* ========================================================= Header — Cuenta Pública Dashboard Flota SOBRE el contenido (position:fixed) con borde redondeado y sombra, dejando ver el fondo (foto del hero o azul navy) alrededor. Las secciones añaden padding-top para no quedar tapadas por él. ========================================================= */ .cpd-body { margin: 0 !important; padding: 0 !important; background: #fff; font-family: 'Gotham', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; transition: background-color 0.2s ease; } /* El color de fondo de TODA la página (de borde a borde, sin franjas en pantallas anchas) lo controla esta clase en , que el JS alterna según la pestaña activa: blanco en Inicio, navy en las otras 3. */ .cpd-body.cpd-tab-recaudacion, .cpd-body.cpd-tab-proyectos, .cpd-body.cpd-tab-gastos { background: #06317C; } .cpd-header { position: fixed !important; top: 18px !important; left: 18px !important; right: 18px !important; bottom: auto !important; z-index: 999999 !important; background: transparent !important; opacity: 1 !important; pointer-events: none; margin: 0 !important; transform: none !important; } .cpd-header-inner { pointer-events: auto; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #fff; border-radius: 18px; padding: 10px 22px; box-shadow: 0 12px 32px rgba(6,49,124,0.25); } .cpd-logo { display: flex; align-items: center; flex-shrink: 0; } .cpd-logo img { height: 52px; width: auto; display: block; } .cpd-nav { flex: 1; display: flex; justify-content: center; } .cpd-nav-list { list-style: none; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; } .cpd-nav-link { display: inline-block; text-decoration: none; font-size: 13.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #06317C; padding: 10px 18px; border-radius: 24px; transition: background-color 0.2s ease, color 0.2s ease; } .cpd-nav-link:hover { background: #EEF2FE; } .cpd-nav-link.is-active { background: #005BEA; color: #fff; } .cpd-emergencia { text-decoration: none; text-align: right; flex-shrink: 0; padding-right: 16px; border-right: 3px solid #005BEA; line-height: 1.3; } .cpd-emergencia-label { display: block; font-size: 12px; font-weight: 600; color: #005BEA; } .cpd-emergencia-titulo { display: block; font-size: 14px; font-weight: 800; color: #06317C; } /* Hamburguesa — oculto en desktop */ .cpd-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 7px; border-radius: 8px; transition: background 0.15s ease; flex-shrink: 0; } .cpd-hamburger:hover { background: #EEF2FE; } .cpd-hamburger span { display: block; width: 22px; height: 2.5px; background: #06317C; border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } .cpd-hamburger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .cpd-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .cpd-hamburger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } @media (max-width: 860px) { .cpd-header { left: 8px !important; right: 8px !important; top: 8px !important; } .cpd-header-inner { flex-wrap: nowrap; padding: 10px 14px; gap: 12px; position: relative; } .cpd-logo img { height: 36px; } .cpd-hamburger { display: flex; } .cpd-emergencia { display: none; } /* Menú colapsado por defecto en móvil */ .cpd-nav { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border-radius: 14px; box-shadow: 0 12px 32px rgba(6,49,124,0.22); padding: 8px 12px 12px; display: none; z-index: 100; justify-content: flex-start; } .cpd-nav.is-open { display: flex; } .cpd-nav-list { flex-direction: column; width: 100%; gap: 2px; } .cpd-nav-link { display: block; width: 100%; text-align: left; padding: 11px 16px; } }