/* cssHeader.css estilos y dependencias necesarios SOLO para
Ubicación: cssApp/cssHeader.css Uso: incluir en de la página que vaya a usar este header. Requisitos: Bootstrap 5 (clases usadas), Bootstrap Icons (iconos opcionales). - Este fichero importa las fuentes necesarias (caída segura a fuentes del sistema) - Contiene únicamente las reglas que afectan al header/brand/subtitle y sus responsivos mínimos para facilitar mantenimiento y pruebas. - No modifica el resto de la página. Autores: equipo MesasDeJusticia generado por GitHub Copilot */ /* --- Fuentes (carga específica para el wordmark) --- */ @import url('https://fonts.googleapis.com/css2?family=Monoton&family=Francois+One&family=Public+Sans:wght@100;400;600&display=swap'); :root{ /* Paleta institucional compartida header/footer */ --brand-dark: #003E65; /* fondo principal header/footer */ --brand-dark-hover: #004a7a; /* hover footer / variantes más claras */ --brand-accent-1: #0b66c2; --brand-accent-2: #0662a3; --brand-contrast: rgba(255,255,255,0.95); /* texto claro sobre fondos oscuros */ --brand-border-light: rgba(255,255,255,0.15); /* borde superior footer */ --brand-border-subtle: rgba(255,255,255,0.06); /* borde inferior navbar */ /* Proporción bandera (40% amarillo, 30% azul, 30% rojo) */ --flag-stop-1: 40%; --flag-stop-2: 70%; --flag-yellow: #f8d400; --flag-blue: #0033a0; --flag-red: #ce1126; /* Sombras unificadas */ --brand-shadow-header: 0 6px 20px rgba(2,20,34,0.10); --brand-shadow-footer: 0 -2px 8px rgba(0, 0, 0, 0.1); --brand-focus-ring: 0 0 0 4px rgba(11,102,194,0.12); /* Botones y bordes de tarjetas principales */ --brand-btn-primary-bg: #286090; /* fondo botón principal (login, etc.) */ --brand-btn-primary-border: #204d74; /* borde botón principal y tarjetas asociadas */ } /* Navbar base (dependiente de Bootstrap) */ .navbar-justicia{ background-color: var(--brand-dark) !important; border-bottom: 1px solid var(--brand-border-subtle); box-shadow: var(--brand-shadow-header); } /* Brand (wordmark) */ .brand-wordmark{ display:flex; align-items:center !important; /* centra visualmente wm-title y wm-year en el eje vertical */ gap:1.05rem; text-decoration:none; line-height:1; } .wm-title{ font-family: 'Monoton', 'Francois One', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing:.13em; text-transform:uppercase; color:var(--brand-contrast); font-size: 1.85rem; line-height: 1; display:flex; align-items:center; justify-content:center; transform: translateY(4px); /* Ajuste óptico para centrado vertical con wm-year */ -webkit-font-smoothing:antialiased; } /* .wm-year{ font-weight:900; font-size:2.45rem; letter-spacing:.02em; background: linear-gradient(135deg, #E8E8E8 0%, #FFFFFF 25%, #9E9E9E 50%, #E8E8E8 75%, #FFFFFF 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow: 0 10px 28px rgba(0,0,0,.35); position:relative; } */ .wm-year { font-weight: 900; letter-spacing: .025em; font-size: 3rem; line-height: 1; display: inline-block; vertical-align: middle; transform: translateY(-4px); /* Eliminar flex para que el texto fluya arriba y el padding abajo cree el espacio del underline */ position: relative; /* Ajuste de caja para centrado vertical y posición de línea */ /* Recrea la brecha visual original de ~2-3px entre texto y línea */ padding-bottom: 7px; margin-bottom: 0; -webkit-text-stroke: 0.7px rgba(255,255,255,0.6); text-shadow: 0 1px 3px rgba(200,220,255,0.32); /* Dos capas en shorthand background: arriba brillo, abajo tricolor 40/30/30 */ background: linear-gradient(to bottom, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.08) 32%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.07) 68%, rgba(255,255,255,0.15) 100%), linear-gradient(to bottom, var(--flag-yellow) 0%, var(--flag-yellow) var(--flag-stop-1), var(--flag-blue) var(--flag-stop-1), var(--flag-blue) var(--flag-stop-2), var(--flag-red) var(--flag-stop-2), var(--flag-red) 100%); background-repeat: no-repeat; background-size: 100% 100%, 100% 100%; background-position: center top, center top; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .wm-year::after{ content:''; position:absolute; left:0; right:0; bottom: 0px; /* Pegado al borde, dentro del padding-bottom:8px -> gap visual óptimo */ height:5px; /* Restaurar grosor percibido */ /* Subrayado horizontal con proporción 40/30/30 izquierda→derecha */ background: linear-gradient(to right, var(--flag-yellow) 0%, var(--flag-yellow) var(--flag-stop-1), var(--flag-blue) var(--flag-stop-1), var(--flag-blue) var(--flag-stop-2), var(--flag-red) var(--flag-stop-2), var(--flag-red) 100%); background-repeat: no-repeat; opacity:1; /* Mayor visibilidad */ box-shadow: 0 1px 3px rgba(200,220,255,0.32), 0 0 0 0.7px rgba(255,255,255,0.6); } /* Header subtitle (texto descriptivo a la derecha del wordmark) */ /* Nota: reglas defensivas añadidas para evitar que herencias/utility-classes (p.ej. text-end / text-center) cambien la alineación visual del subtítulo. */ .header-subtitle{ color: rgba(255, 255, 255, 0.92); font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 600; letter-spacing: 0.02em; line-height: 1.25; text-align: left !important; /* fuerza alineación izquierda */ margin-left: 1rem; max-width: 520px; white-space: normal; min-width: 0; /* evitar overflow por flex-basis */ overflow-wrap: anywhere; display:flex; flex-direction:column; justify-content:center; /* centra verticalmente las dos líneas respecto al wordmark */ } .header-subtitle .line-1{ display:block; font-size:1.65em; } .header-subtitle .line-2{ display:block; font-size:0.97em; opacity:0.96; } /* Layout helpers used by the header (non-invasive) */ .header-subtitle.flex-grow-1{ flex:1 1 auto; min-width:0; } /* Defensive: asegurar que el contenedor del navbar no centre el contenido */ .navbar-justicia .container-fluid{ justify-content: flex-start !important; /* mantener inicio (izquierda) */ text-align: left !important; gap: 0.9rem; /* espacio controlado, evita que el brand empuje demasiado */ align-items: center !important; /* alinea brand, año y subtítulo sobre el mismo eje vertical (sobrepone align-items-start de Bootstrap) */ display:flex; /* fuerza el eje vertical aun si Bootstrap cambia la display */ padding-top: 0 !important; /* Elimina padding extra para recuperar altura original */ padding-bottom: 0 !important; } /* Forzar que el brand ocupe su espacio mínimo y el subtítulo use el resto */ .brand-wordmark{ flex: 0 0 auto; align-items: center; } .navbar-justicia .header-subtitle{ flex: 1 1 auto; align-self: center; display:flex; flex-direction:column; justify-content:center; } /* Mobile: mantener subtítulo alineado a la izquierda y evitar centrados indeseados */ @media (max-width: 991px){ .navbar-justicia .container-fluid{ justify-content: flex-start !important; } .header-subtitle{ margin-left: 0; margin-top: 0.35rem; max-width: 100%; width: 100%; text-align: left !important; } } /* Tablets (entre 576px y 992px): equilibrar proporciones sin ocupar demasiada altura */ @media (min-width: 576px) and (max-width: 991.98px){ .brand-wordmark{ gap: 0.8rem; } .wm-title{ font-size: 1.45rem; } .wm-year{ font-size: 2.2rem; } .header-subtitle .line-1{ font-size: 1.4em; } .header-subtitle .line-2{ font-size: 0.95em; } } /* Accessibility: focus visible for brand link */ .brand-wordmark:focus-visible{ outline: none; box-shadow: var(--brand-focus-ring); border-radius: 6px; } @media (max-width: 576px){ /* Ajustes móviles: permitir que el wordmark se adapte sin desbordar */ .brand-wordmark{ gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0; /* evitar separación extra con el subtítulo */ } /* Reducir padding vertical del navbar en móvil */ .navbar-justicia{ padding-top: 0.2rem; padding-bottom: 0.2rem; } /* Compactar el bloque brand-subtítulo en móvil */ .navbar-justicia .container-fluid{ gap: 0.25rem; align-items: center !important; } .navbar-justicia .container-fluid{ padding-top:0.25rem; padding-bottom:0.25rem; } .header-subtitle{ margin-top: 0.12rem; line-height: 1.02; align-items: center; } /* Aumenta el tamaño de 'ELECCIONES' en móvil para equilibrarlo con 2026 */ .wm-title{ font-size: 1.28rem; } .wm-year{ font-size: 2.05rem; background-size: 100% 120%, 100% 120%; background-position: center bottom, center bottom; padding-bottom: 5px; display: inline-block; vertical-align: middle; position: relative; top: 2px; transform: none; } .wm-year::after{ bottom:-1px; height:4.5px; } .header-subtitle, .header-subtitle .line-1, .header-subtitle .line-2{ text-align: center !important; } .header-subtitle .line-1{ font-size:1rem; } .header-subtitle .line-2{ font-size:0.94rem; } /* Slightly reduce vertical padding for the navbar on small screens */ .navbar-justicia .container-fluid{ padding-top:0.25rem; padding-bottom:0.25rem; } /* Compact logo height en móviles */ .navbar-justicia .navbar-brand img{ max-height:60px; } } /* Minimal visual reset to avoid conflicts with older inline styles */ .navbar-justicia .navbar-brand img{ max-height:72px; width:auto; } /* Optional utility: use .brand-mark if future header variant includes an icon */ .brand-mark{ width:48px; height:48px; flex:0 0 auto; display:inline-block; position:relative; } /* End of cssHeader.css */