:root { /* --- Sistema de diseño EESA (director creativo / UI-UX pro-max) --- Escala completa de marca. El resto del CSS (1200+ líneas, 34+ plantillas) sigue usando los nombres cortos de siempre (--color-primario, etc.) — esos ahora son alias que apuntan aquí, así que todo el sitio hereda la paleta refinada sin tocar una sola plantilla. Nunca se elimina un alias viejo: se amplía. */ --burgundy-900: #58151F; --burgundy-800: #681A26; --burgundy-700: #7A1F2B; --burgundy-600: #922F3E; --burgundy-100: #F5E8EA; --gold-700: #A98516; --gold-600: #C9A227; --gold-500: #D5B444; --gold-100: #F8F0D5; --cream-50: #FFFDF9; --cream-100: #FAF6EF; --cream-200: #F2EADF; --charcoal-900: #211D1C; --charcoal-800: #2B2B2B; --charcoal-600: #625B57; --charcoal-400: #948B85; /* Tokens semánticos (tema claro = predeterminado) */ --page-bg: var(--cream-100); --page-bg-alt: var(--cream-200); --surface: #FFFFFF; --surface-soft: var(--cream-50); --surface-hover: #F8F0E8; --surface-active: var(--burgundy-100); --text-primary: var(--charcoal-800); --text-secondary: var(--charcoal-600); --text-muted: #817770; --text-disabled: var(--charcoal-400); --text-on-primary: #FFFFFF; --text-on-accent: #2B2413; --primary: var(--burgundy-700); --primary-hover: var(--burgundy-800); --primary-active: var(--burgundy-900); --primary-soft: var(--burgundy-100); /* Fondo de los círculos de icono (.icono-badge/.icono-avatar) — se re-tiñe en tema oscuro más abajo; sin esto quedaban en rosa clarito fijo, fuera de lugar sobre una interfaz oscura. */ /* Para fondos sólidos que SIEMPRE llevan texto blanco encima (botones, gradiente del sidebar/login) — a diferencia de --primary (que en tema oscuro se aclara para servir como TEXTO legible sobre fondo oscuro), esta pareja se queda fija en el burdeos oscuro en los dos temas, porque el blanco necesita ese tono oscuro para tener contraste suficiente encima, sin importar el tema del sitio. */ --primary-solid: var(--burgundy-700); --primary-solid-hover: var(--burgundy-800); --accent: var(--gold-600); --accent-hover: var(--gold-700); --accent-soft: var(--gold-100); /* Insignia de "nivel" (certificación de escuela) — un nivel/tier no es un estado (no reutilizar .pill-activo verde, que implica "activo/aprobado" y no distingue básico de avanzado). --gold-dark no sirve aquí tal cual: su tono está afinado para verse como ícono sobre tarjeta blanca, no como texto sobre --accent-soft — da solo 3.27:1 ahí, por eso un tono propio. */ --pill-nivel-texto: #7A5A0E; --border: #DED4CB; --border-subtle: #ECE4DC; --border-strong: #BFB2A8; --divider: #E8DED5; --success: #327A55; --success-bg: #EAF5EE; /* Fijo en los dos temas — igual que --primary-solid arriba: --success se aclara en tema oscuro para servir de TEXTO de badge sobre fondo oscuro, pero un botón sólido con texto blanco (.btn-aprobar) necesita quedarse siempre oscuro para que el blanco tenga contraste. */ --success-solid: #327A55; --warning: #9C5E16; --warning-bg: #FFF3DE; --danger: #B13A3A; --danger-bg: #FBEAEA; --info: #356D8C; --info-bg: #EAF3F8; /* Estado neutral (ej. "finalizado" — ya no activo, sin ser error/aviso). En tema claro coincide a propósito con --text-secondary/--page-bg-alt (mismo look de siempre); en oscuro se define aparte porque esos dos tokens ahí son casi idénticos a --surface-soft, y la insignia se perdía visualmente contra el resto de paneles oscuros. */ --neutral: #625B57; --neutral-bg: #F2EADF; --focus-ring: rgba(122, 31, 43, 0.12); --selection-bg: #F1DDE0; --overlay: rgba(33, 29, 28, 0.44); --shadow-sm: 0 1px 3px rgba(54, 38, 31, 0.08); --shadow-md: 0 8px 24px rgba(54, 38, 31, 0.10); --shadow-lg: 0 18px 48px rgba(54, 38, 31, 0.14); /* Escala tipográfica y de espaciado — para componentes nuevos; el CSS existente conserva sus tamaños/espacios ya afinados por pantalla. */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: clamp(1.8rem, 4vw, 2.5rem); --text-4xl: clamp(2.3rem, 6vw, 4.5rem); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --nav-transition-fast: 160ms; --nav-transition-normal: 220ms; --nav-transition-menu: 280ms; /* --- Alias históricos: todo el CSS/plantillas ya escritos usan estos nombres. Apuntan a los tokens de arriba — nunca se renombran los usos existentes, solo se redirige de dónde toman su valor. --- */ --color-primario: var(--primary); --color-primario-oscuro: var(--primary-hover); --color-secundario: var(--accent); --color-secundario-suave: var(--gold-500); --color-fondo: var(--page-bg); --color-tarjeta: var(--surface); --color-texto: var(--text-primary); --color-texto-suave: var(--text-secondary); --color-borde: var(--border); --color-error: var(--danger); --color-error-fondo: var(--danger-bg); --radio: 10px; --sombra: var(--shadow-md); --fuente-cuerpo: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fuente-encabezado: Georgia, "Times New Roman", Cambria, serif; /* Usadas solo dentro de .app-shell (sidebar oscuro) — login/home no se tocan. */ --fuente-condensada: "Roboto Condensed", var(--fuente-cuerpo); --fuente-manuscrita: "Cormorant Garamond", var(--fuente-encabezado); } /* Tema oscuro (mega-prompt Fase 9, refinado por el director creativo) — el sidebar de los paneles internos (.app-sidebar) ya es oscuro de por sí (gradiente de marca) y no cambia; estas variables solo afectan el fondo/tarjetas/texto del resto del sitio. Se aplica por atributo (elegido a mano) o por prefers-color-scheme cuando la preferencia es "sistema" (sin cookie o data-tema="sistema"). */ :root[data-tema="oscuro"] { color-scheme: dark; --page-bg: #171313; --surface: #231B1D; --surface-soft: #2C2225; --surface-hover: #2C2225; --surface-active: #362A2D; --text-primary: #F8F1E8; --text-secondary: #CFC2BA; --text-muted: #A99C93; --border: rgba(255, 255, 255, .11); --border-subtle: rgba(255, 255, 255, .07); --border-strong: rgba(255, 255, 255, .18); /* --primary en reposo se subió de #B65A68 (4.08:1, reprueba AA en texto normal como los enlaces del nav) a #C97482 (5.53:1) — verificado con la fórmula de contraste WCAG, no a ojo. El tono más oscuro se conserva para el estado "activo/presionado", que es una interacción breve. */ --primary: #C97482; --primary-hover: #D1808C; --primary-active: #B65A68; --accent: #D7B64A; --page-bg-alt: var(--surface-soft); /* Estados semánticos (éxito/aviso/error/info) — en tema claro son texto medio sobre fondo pastel muy claro; en oscuro esa combinación se vuelve casi ilegible sobre --surface, así que aquí se invierte: fondo oscuro apenas teñido + texto claro saturado del mismo tono. Verificado con la fórmula de contraste WCAG (los cuatro pares pasan 6.5:1 o más). */ --success: #97D8B7; --success-bg: #193828; --warning: #EDBC82; --warning-bg: #3F2B12; --danger: #DF9090; --danger-bg: #3B1616; --info: #94C2DB; --info-bg: #182E39; --neutral: #E3D9D1; --neutral-bg: #3D3336; --primary-soft: #2F1E21; --focus-ring: rgba(201, 116, 130, 0.3); /* Fichas de curso por etapa (public/cursos.php) — 2026-09-21, segunda pasada: el tema CLARO sigue con los colores literales del sitio internacional (sin tocar, ver bloque :root de tema claro más abajo). El tema OSCURO ya no copia esos mismos hex saturados (se sentía como "bloques de color pesados" — feedback real del usuario) — ahora rojo/ verde/azul (y los 3 tonos de Equipos/Optativo/Retiros) son solo ACENTO: ícono, línea superior, halo sutil detrás del ícono, borde de hover/foco. La base de la tarjeta es neutral (--surface-soft, ya existente — no se duplica token) con un tinte de 8%/13% de opacidad encima. Contraste verificado: hasta el tono menos saturado (retiro) da ~7:1 contra la tarjeta, muy por encima del 3:1 que exige WCAG para indicadores de foco. */ --gold-dark: #D9B054; --stage-red: #EF5548; --stage-red-soft: rgba(239, 85, 72, 0.08); --stage-red-hover: rgba(239, 85, 72, 0.13); --stage-red-borde-hover: rgba(239, 85, 72, 0.36); --stage-green: #67B943; --stage-green-soft: rgba(103, 185, 67, 0.08); --stage-green-hover: rgba(103, 185, 67, 0.13); --stage-green-borde-hover: rgba(103, 185, 67, 0.36); --stage-blue: #62A9D6; --stage-blue-soft: rgba(98, 169, 214, 0.08); --stage-blue-hover: rgba(98, 169, 214, 0.13); --stage-blue-borde-hover: rgba(98, 169, 214, 0.36); --stage-equipos: #C9A578; --stage-equipos-soft: rgba(201, 165, 120, 0.08); --stage-equipos-hover: rgba(201, 165, 120, 0.13); --stage-equipos-borde-hover: rgba(201, 165, 120, 0.36); --stage-optativo: #E0A857; --stage-optativo-soft: rgba(224, 168, 87, 0.08); --stage-optativo-hover: rgba(224, 168, 87, 0.13); --stage-optativo-borde-hover: rgba(224, 168, 87, 0.36); --stage-retiro: #B7AEA6; --stage-retiro-soft: rgba(183, 174, 166, 0.08); --stage-retiro-hover: rgba(183, 174, 166, 0.13); --stage-retiro-borde-hover: rgba(183, 174, 166, 0.36); --etapa-vida-acento: var(--stage-red); --etapa-vida-bg: linear-gradient(var(--stage-red-soft), var(--stage-red-soft)), var(--surface-soft); --etapa-vida-bg-hover: linear-gradient(var(--stage-red-hover), var(--stage-red-hover)), var(--surface-soft); --etapa-evangelizar-acento: var(--stage-green); --etapa-evangelizar-bg: linear-gradient(var(--stage-green-soft), var(--stage-green-soft)), var(--surface-soft); --etapa-evangelizar-bg-hover: linear-gradient(var(--stage-green-hover), var(--stage-green-hover)), var(--surface-soft); --etapa-formar-acento: var(--stage-blue); --etapa-formar-bg: linear-gradient(var(--stage-blue-soft), var(--stage-blue-soft)), var(--surface-soft); --etapa-formar-bg-hover: linear-gradient(var(--stage-blue-hover), var(--stage-blue-hover)), var(--surface-soft); --etapa-equipos-acento: var(--stage-equipos); --etapa-equipos-bg: linear-gradient(var(--stage-equipos-soft), var(--stage-equipos-soft)), var(--surface-soft); --etapa-equipos-bg-hover: linear-gradient(var(--stage-equipos-hover), var(--stage-equipos-hover)), var(--surface-soft); --etapa-optativo-acento: var(--stage-optativo); --etapa-optativo-bg: linear-gradient(var(--stage-optativo-soft), var(--stage-optativo-soft)), var(--surface-soft); --etapa-optativo-bg-hover: linear-gradient(var(--stage-optativo-hover), var(--stage-optativo-hover)), var(--surface-soft); --etapa-retiro-acento: var(--stage-retiro); --etapa-retiro-bg: linear-gradient(var(--stage-retiro-soft), var(--stage-retiro-soft)), var(--surface-soft); --etapa-retiro-bg-hover: linear-gradient(var(--stage-retiro-hover), var(--stage-retiro-hover)), var(--surface-soft); --accent-soft: #372F15; --pill-nivel-texto: #D9B054; --color-fondo: var(--page-bg); --color-tarjeta: var(--surface); --color-texto: var(--text-primary); --color-texto-suave: var(--text-secondary); --color-borde: var(--border); --sombra: 0 8px 24px rgba(0, 0, 0, 0.35); } @media (prefers-color-scheme: dark) { :root:not([data-tema]), :root[data-tema="sistema"] { color-scheme: dark; --page-bg: #171313; --surface: #231B1D; --surface-soft: #2C2225; --surface-hover: #2C2225; --surface-active: #362A2D; --text-primary: #F8F1E8; --text-secondary: #CFC2BA; --text-muted: #A99C93; --border: rgba(255, 255, 255, .11); --border-subtle: rgba(255, 255, 255, .07); --border-strong: rgba(255, 255, 255, .18); --primary: #C97482; --primary-hover: #D1808C; --primary-active: #B65A68; --accent: #D7B64A; --page-bg-alt: var(--surface-soft); --success: #97D8B7; --success-bg: #193828; --warning: #EDBC82; --warning-bg: #3F2B12; --danger: #DF9090; --danger-bg: #3B1616; --info: #94C2DB; --info-bg: #182E39; --neutral: #E3D9D1; --neutral-bg: #3D3336; --primary-soft: #2F1E21; --focus-ring: rgba(201, 116, 130, 0.3); /* Mismos tokens de etapa que el bloque :root[data-tema="oscuro"] de arriba (tema oscuro por preferencia del sistema en vez de toggle manual) — ver ese comentario: rojo/verde/azul como acento sutil, no fondo saturado (2026-09-21, segunda pasada). */ --gold-dark: #D9B054; --stage-red: #EF5548; --stage-red-soft: rgba(239, 85, 72, 0.08); --stage-red-hover: rgba(239, 85, 72, 0.13); --stage-red-borde-hover: rgba(239, 85, 72, 0.36); --stage-green: #67B943; --stage-green-soft: rgba(103, 185, 67, 0.08); --stage-green-hover: rgba(103, 185, 67, 0.13); --stage-green-borde-hover: rgba(103, 185, 67, 0.36); --stage-blue: #62A9D6; --stage-blue-soft: rgba(98, 169, 214, 0.08); --stage-blue-hover: rgba(98, 169, 214, 0.13); --stage-blue-borde-hover: rgba(98, 169, 214, 0.36); --stage-equipos: #C9A578; --stage-equipos-soft: rgba(201, 165, 120, 0.08); --stage-equipos-hover: rgba(201, 165, 120, 0.13); --stage-equipos-borde-hover: rgba(201, 165, 120, 0.36); --stage-optativo: #E0A857; --stage-optativo-soft: rgba(224, 168, 87, 0.08); --stage-optativo-hover: rgba(224, 168, 87, 0.13); --stage-optativo-borde-hover: rgba(224, 168, 87, 0.36); --stage-retiro: #B7AEA6; --stage-retiro-soft: rgba(183, 174, 166, 0.08); --stage-retiro-hover: rgba(183, 174, 166, 0.13); --stage-retiro-borde-hover: rgba(183, 174, 166, 0.36); --etapa-vida-acento: var(--stage-red); --etapa-vida-bg: linear-gradient(var(--stage-red-soft), var(--stage-red-soft)), var(--surface-soft); --etapa-vida-bg-hover: linear-gradient(var(--stage-red-hover), var(--stage-red-hover)), var(--surface-soft); --etapa-evangelizar-acento: var(--stage-green); --etapa-evangelizar-bg: linear-gradient(var(--stage-green-soft), var(--stage-green-soft)), var(--surface-soft); --etapa-evangelizar-bg-hover: linear-gradient(var(--stage-green-hover), var(--stage-green-hover)), var(--surface-soft); --etapa-formar-acento: var(--stage-blue); --etapa-formar-bg: linear-gradient(var(--stage-blue-soft), var(--stage-blue-soft)), var(--surface-soft); --etapa-formar-bg-hover: linear-gradient(var(--stage-blue-hover), var(--stage-blue-hover)), var(--surface-soft); --etapa-equipos-acento: var(--stage-equipos); --etapa-equipos-bg: linear-gradient(var(--stage-equipos-soft), var(--stage-equipos-soft)), var(--surface-soft); --etapa-equipos-bg-hover: linear-gradient(var(--stage-equipos-hover), var(--stage-equipos-hover)), var(--surface-soft); --etapa-optativo-acento: var(--stage-optativo); --etapa-optativo-bg: linear-gradient(var(--stage-optativo-soft), var(--stage-optativo-soft)), var(--surface-soft); --etapa-optativo-bg-hover: linear-gradient(var(--stage-optativo-hover), var(--stage-optativo-hover)), var(--surface-soft); --etapa-retiro-acento: var(--stage-retiro); --etapa-retiro-bg: linear-gradient(var(--stage-retiro-soft), var(--stage-retiro-soft)), var(--surface-soft); --etapa-retiro-bg-hover: linear-gradient(var(--stage-retiro-hover), var(--stage-retiro-hover)), var(--surface-soft); --accent-soft: #372F15; --pill-nivel-texto: #D9B054; --color-fondo: var(--page-bg); --color-tarjeta: var(--surface); --color-texto: var(--text-primary); --color-texto-suave: var(--text-secondary); --color-borde: var(--border); --sombra: 0 8px 24px rgba(0, 0, 0, 0.35); } } * { box-sizing: border-box; } /* Accesibilidad — mega-prompt de diseño, sección 37: respetar siempre la preferencia del sistema de movimiento reducido, sin excepción por componente. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { margin: 0; font-family: var(--fuente-cuerpo); background: var(--color-fondo); color: var(--color-texto); line-height: 1.5; } h1, h2, h3 { font-family: var(--fuente-encabezado); } a { color: var(--color-primario); } .pagina-centrada { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; } .tarjeta { width: 100%; max-width: 400px; background: var(--color-tarjeta); border-radius: var(--radio); box-shadow: var(--sombra); padding: 32px 28px; } .marca { text-align: center; margin-bottom: 24px; } .marca .logo-escuela { display: block; width: 96px; height: 96px; margin: 0 auto; object-fit: contain; } .marca .insignia { display: inline-block; padding: 8px 18px; border: 2px solid var(--color-secundario); border-radius: 999px; color: var(--color-primario); font-weight: 700; letter-spacing: 0.05em; font-size: 0.85rem; text-transform: uppercase; } .marca h1 { font-size: 1.35rem; margin: 14px 0 4px; color: var(--color-primario-oscuro); } .marca p { margin: 0; color: var(--color-texto-suave); font-size: 0.92rem; } .campo { margin-bottom: 18px; } .campo label { display: block; margin-bottom: 6px; font-size: 0.88rem; font-weight: 600; color: var(--color-texto); } .campo input, .campo select, .campo textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--color-borde); border-radius: 8px; font-size: 1rem; background: var(--surface-soft); font-family: inherit; color: var(--color-texto); transition: border-color var(--nav-transition-fast) ease, box-shadow var(--nav-transition-fast) ease; } .campo textarea { resize: vertical; } /* Input suelto dentro de una fila de acciones (ej. "correo del reemplazo" junto a un botón) — fuera de un .campo, así que necesita su propio fondo/ foco en vez de heredar la regla de arriba. Antes tenía estilos en línea sin fondo ni estado de foco propios, apenas se salvaban en oscuro gracias a color-scheme:dark del navegador. */ .campo-inline { padding: 8px 10px; border: 1px solid var(--color-borde); border-radius: 6px; font-size: 0.88rem; font-family: inherit; background: var(--surface-soft); color: var(--color-texto); transition: border-color var(--nav-transition-fast) ease, box-shadow var(--nav-transition-fast) ease; } .campo-inline:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px var(--focus-ring); } .campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--border-strong); } .campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px var(--focus-ring); } .campo input:disabled, .campo select:disabled, .campo textarea:disabled { background: var(--page-bg-alt); color: var(--text-disabled); cursor: not-allowed; border-color: var(--border-subtle); } .boton { width: 100%; padding: 12px; border: none; border-radius: 8px; background: var(--primary-solid); color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } .boton:hover { background: var(--primary-solid-hover); } .boton:disabled { background: var(--border-strong); color: var(--text-disabled); cursor: not-allowed; } .boton:disabled:hover { background: var(--border-strong); } .enlaces-secundarios { margin-top: 18px; text-align: center; font-size: 0.88rem; } .alerta { padding: 10px 14px; border-radius: 8px; font-size: 0.9rem; margin-bottom: 18px; } .alerta-error { background: var(--color-error-fondo); color: var(--color-error); border: 1px solid rgba(179, 38, 30, 0.25); } .alerta-info { background: var(--success-bg); color: var(--success); border: 1px solid rgba(50, 122, 85, 0.25); } .enlace-reset { word-break: break-all; font-size: 0.82rem; background: var(--page-bg-alt); border: 1px dashed var(--color-secundario); padding: 10px; border-radius: 8px; margin-top: 10px; } @media (max-width: 420px) { .tarjeta { padding: 26px 20px; } } /* --------------------------------------------------------------- Autenticación (login / recuperar) — layout de dos paneles --------------------------------------------------------------- */ .auth-shell { min-height: 100vh; display: flex; } .auth-marca { flex: 1 1 42%; position: relative; overflow: hidden; background: linear-gradient(155deg, var(--primary-solid) 0%, var(--primary-solid-hover) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 32px; text-align: center; color: #fff; } .auth-marca::before, .auth-marca::after { content: ""; position: absolute; border: 1px solid rgba(201, 162, 39, 0.22); border-radius: 50%; } .auth-marca::before { width: 520px; height: 520px; } .auth-marca::after { width: 720px; height: 720px; border-color: rgba(201, 162, 39, 0.12); } .auth-marca .medallon { position: relative; width: 190px; height: 190px; background: #fdfbf6; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); margin-bottom: 24px; } .auth-marca .medallon img { width: 158px; height: 158px; object-fit: contain; } .auth-marca h1 { position: relative; font-size: 1.5rem; line-height: 1.3; margin: 0 0 10px; max-width: 22ch; } .auth-marca p { position: relative; margin: 0; color: var(--color-secundario-suave); font-size: 0.95rem; max-width: 34ch; } .auth-form-panel { flex: 1 1 58%; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--color-tarjeta); } .auth-form-panel .contenido { width: 100%; max-width: 380px; } .auth-form-panel .encabezado-form { margin-bottom: 28px; } .auth-form-panel .encabezado-form h2 { margin: 0 0 6px; font-size: 1.5rem; color: var(--color-primario-oscuro); } .auth-form-panel .encabezado-form p { margin: 0; color: var(--color-texto-suave); font-size: 0.94rem; } .campo-envoltura { position: relative; } .campo-envoltura svg.icono-campo { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--color-texto-suave); pointer-events: none; } .campo-envoltura input { padding-left: 40px; } .campo-envoltura .alternar-clave { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 6px; cursor: pointer; color: var(--color-texto-suave); display: flex; } .campo-envoltura .alternar-clave:hover { color: var(--color-primario); } .campo-envoltura .alternar-clave svg { width: 18px; height: 18px; } .campo-envoltura input[type="password"], .campo-envoltura input.tiene-alternar { padding-right: 40px; } .boton { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease; } .boton:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(122, 31, 43, 0.28); } .boton:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } .boton:disabled, .boton:disabled:hover, .boton:disabled:active { transform: none; box-shadow: none; } .alerta-con-icono { display: flex; align-items: flex-start; gap: 10px; } .alerta-con-icono svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; } @media (max-width: 860px) { .auth-shell { flex-direction: column; } .auth-marca { flex: none; padding: 32px 24px; } .auth-marca::before { width: 340px; height: 340px; } .auth-marca::after { width: 460px; height: 460px; } .auth-marca .medallon { width: 128px; height: 128px; margin-bottom: 16px; } .auth-marca .medallon img { width: 106px; height: 106px; } .auth-marca h1 { font-size: 1.2rem; } .auth-form-panel { padding: 32px 20px 48px; align-items: flex-start; } } /* --------------------------------------------------------------- Sitio público (header, nav, contenido ancho, footer) --------------------------------------------------------------- */ .sitio-header { background: var(--color-tarjeta); border-bottom: 1px solid var(--color-borde); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .sitio-header .marca-inline { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; } .sitio-header .marca-inline img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; } .sitio-header .marca-inline span { font-weight: 700; color: var(--color-primario-oscuro); font-size: 1.02rem; line-height: 1.2; } .sitio-nav { display: flex; gap: 4px; flex-wrap: wrap; } .sitio-nav a { padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--color-texto); font-size: 0.92rem; font-weight: 600; } .sitio-nav a:hover { background: var(--color-fondo); } .sitio-nav a.activo { color: var(--color-primario); background: var(--primary-soft); } .sitio-nav a.destacado { background: var(--primary-solid); color: #fff; } .sitio-nav a.destacado:hover { background: var(--primary-solid-hover); } .contenedor-ancho { max-width: 960px; margin: 0 auto; padding: 32px 20px 64px; } .contenedor-ancho h1 { color: var(--color-primario-oscuro); margin-top: 0; } .intro-pagina { color: var(--color-texto-suave); max-width: 62ch; margin-bottom: 28px; } .sitio-footer { text-align: center; padding: 24px 20px 40px; color: var(--color-texto-suave); font-size: 0.85rem; } /* Catálogo de cursos */ .etapa-grupo { margin-bottom: 32px; } .etapa-grupo h2 { font-size: 1.1rem; color: var(--color-primario); border-bottom: 2px solid var(--color-secundario); padding-bottom: 6px; margin-bottom: 14px; } .grid-cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .curso-card { background: var(--color-tarjeta); border: 1px solid var(--color-borde); border-radius: 10px; padding: 14px 16px; font-weight: 600; font-size: 0.94rem; } .curso-card .etiqueta-menor { display: block; margin-top: 6px; font-weight: 500; font-size: 0.78rem; color: var(--color-primario); } /* Calendario / listado de sesiones */ .sesion-card { background: var(--color-tarjeta); border: 1px solid var(--color-borde); border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .sesion-card .info h3 { margin: 0 0 4px; color: var(--color-primario-oscuro); } .sesion-card .info p { margin: 0; color: var(--color-texto-suave); font-size: 0.9rem; } .estado-vacio { background: var(--page-bg-alt); border: 1px dashed var(--color-secundario); border-radius: 10px; padding: 24px; text-align: center; color: var(--color-texto-suave); } /* Formulario ancho (inscribirme) */ .tarjeta-ancha { background: var(--color-tarjeta); border-radius: var(--radio); box-shadow: var(--sombra); padding: 28px; max-width: 720px; margin: 0 auto; } .campo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } @media (max-width: 560px) { .campo-grid { grid-template-columns: 1fr; } .tarjeta-ancha { padding: 20px; } } .campo-checkbox { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 4px; padding: 8px 10px; border-radius: 8px; transition: background 0.15s ease; } /* Área táctil mínima de 44px (mega-prompt, sección 5) — la casilla nativa es chica, pero toda la fila (casilla + etiqueta) responde al toque. */ .campo-checkbox:hover { background: var(--surface-hover); } .campo-checkbox input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--color-primario); cursor: pointer; } .campo-checkbox label { font-weight: 500; font-size: 0.92rem; cursor: pointer; padding-top: 2px; } /* Selector de sede (migración 009, 2026-09-21: "sede habitual" vs "otra parroquia/comunidad", ver local/cursos.php) — mismo patrón visual que .campo-checkbox. El bloque de "otra sede" se revela solo con CSS (:has, sin JavaScript) cuando ese radio está marcado; si el navegador no soporta :has() el bloque queda siempre visible (degradación seguro, nunca oculta campos que hagan falta). */ .campo-radio-grupo { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; } .campo-radio { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 0.92rem; cursor: pointer; } .campo-radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-primario); cursor: pointer; } .bloque-sede-otra { display: block; padding: 12px; border: 1px solid var(--color-borde); border-radius: 8px; margin-bottom: 14px; background: var(--surface-soft); } .campo-radio-grupo:has(input[value="habitual"]:checked) + .bloque-sede-otra { display: none; } fieldset { border: 1px solid var(--color-borde); border-radius: 10px; padding: 16px 16px 4px; margin: 0 0 22px; } fieldset legend { font-weight: 700; color: var(--color-primario); padding: 0 8px; font-size: 0.92rem; } .texto-ayuda { font-size: 0.82rem; color: var(--color-texto-suave); margin-top: -10px; margin-bottom: 16px; } /* Lista simple con viñeta discreta — resúmenes/estado (ej. cupo, fecha límite en public/inscribirme.php y public/sesion.php) — 2026-09-21. */ .lista-simple { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; } .lista-simple li { padding-left: 16px; position: relative; font-size: 0.9rem; color: var(--color-texto); } .lista-simple li::before { content: '•'; position: absolute; left: 0; color: var(--color-secundario); } /* ================================================================= Paneles internos (local/admin/equipo/registracion/participante): sidebar oscuro + barra superior + contenido — inspirado en las pantallas de referencia (support/recursos/web-example-*.png). ================================================================= */ .app-shell { display: flex; align-items: flex-start; min-height: 100vh; font-family: var(--fuente-condensada); } .app-shell h1, .app-shell h2, .app-shell h3 { font-family: var(--fuente-condensada); font-weight: 800; } .app-sidebar { width: 240px; flex-shrink: 0; background: linear-gradient(180deg, var(--primary-solid) 0%, var(--primary-solid-hover) 100%); color: #fff; display: flex; flex-direction: column; padding: 20px 18px; /* Panel fijo (2026-09-30): siempre del alto de la pantalla y pegado arriba aunque el contenido de la derecha haga scroll. Si no cabe todo, solo .app-nav hace scroll por dentro — marca, idioma/tema y usuario/salir siempre quedan a la vista. */ position: sticky; top: 0; height: 100vh; overflow: hidden; } .app-sidebar .marca-app { margin-bottom: 18px; flex-shrink: 0; } .app-sidebar .marca-app img { width: 52px; height: 52px; object-fit: contain; margin-bottom: 10px; } .app-sidebar .marca-app strong { display: block; font-family: var(--fuente-encabezado); font-size: 1.2rem; line-height: 1.25; } .app-sidebar .marca-app span { display: block; font-size: 0.76rem; color: var(--color-secundario-suave); margin-top: 6px; line-height: 1.4; } .app-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.3) transparent; } .app-nav a { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; color: #f2e9df; text-decoration: none; font-size: 0.92rem; font-weight: 600; border-left: 3px solid transparent; } .app-nav a svg { width: 18px; height: 18px; flex-shrink: 0; } .app-nav a:hover { background: rgba(255, 255, 255, 0.08); } .app-nav a.activo { background: var(--color-secundario); border-left-color: transparent; color: var(--text-on-accent); } /* Separador de grupo dentro del nav (hoy solo lo usa adminHeader(), ver includes/layout.php: una entrada de $enlaces con url '#grupo' se renderiza como este rótulo en vez de un , para no amontonar ~11 enlaces sin jerarquía visual). */ .app-nav-grupo { display: block; margin: 10px 0 2px; padding: 0 12px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(242, 233, 223, 0.55); } .app-nav-grupo:first-child { margin-top: 0; } .app-sidebar .cita-sidebar { flex-shrink: 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.16); font-family: var(--fuente-manuscrita); font-style: italic; font-size: 1.15rem; line-height: 1.4; color: var(--color-secundario-suave); } .app-sidebar .cita-sidebar cite { display: block; font-style: normal; font-size: 0.7rem; font-family: var(--fuente-condensada); letter-spacing: 0.03em; margin-top: 4px; opacity: 0.85; } .app-sidebar .pie-sidebar { flex-shrink: 0; padding-top: 12px; margin-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.16); } .app-sidebar .pie-sidebar .usuario { font-size: 0.86rem; margin-bottom: 10px; } .app-sidebar .pie-sidebar .usuario strong { display: block; color: #fff; } .app-sidebar .pie-sidebar .usuario span { color: var(--color-secundario-suave); font-size: 0.76rem; } .app-sidebar .pie-sidebar a.salir { color: #f2e9df; font-size: 0.85rem; text-decoration: none; } .app-sidebar .pie-sidebar a.salir:hover { color: #fff; text-decoration: underline; } .app-sidebar .pie-sidebar a.visitar-sitio { display: flex; align-items: center; gap: 6px; color: var(--color-secundario); font-size: 0.82rem; font-weight: 700; text-decoration: none; margin-bottom: 12px; } .app-sidebar .pie-sidebar a.visitar-sitio svg { width: 14px; height: 14px; } .app-sidebar .pie-sidebar a.visitar-sitio:hover, .app-sidebar .pie-sidebar a.visitar-sitio.activo { color: #fff; } /* Laptops/pantallas bajas: se compacta para que SIEMPRE quepa sin scroll de página. */ @media (max-height: 780px) and (min-width: 861px) { .app-sidebar .cita-sidebar { display: none; } .app-sidebar .marca-app { margin-bottom: 10px; } .app-sidebar .marca-app img { width: 38px; height: 38px; margin-bottom: 6px; } .app-sidebar .marca-app strong { font-size: 1rem; } } @media (max-height: 640px) and (min-width: 861px) { .app-sidebar { padding: 12px 14px; } .app-sidebar .marca-app span, .app-sidebar .marca-app strong { display: none; } .app-sidebar .marca-app img { margin-bottom: 0; } .app-nav a { padding: 5px 10px; font-size: 0.86rem; } .app-nav-grupo { margin-top: 6px; } .app-sidebar .pie-sidebar { padding-top: 8px; margin-top: 8px; } .app-sidebar .pie-sidebar .usuario span { display: none; } .app-sidebar .pie-sidebar .selector-preferencias, .app-sidebar .pie-sidebar a.visitar-sitio { margin-bottom: 6px; } } /* Sitio público embebido en el panel (ver-sitio.php). */ .sitio-embebido { display: block; width: 100%; height: calc(100vh - 190px); min-height: 420px; border: 1px solid var(--color-borde); border-radius: 10px; background: #fff; } .app-sidebar .pie-sidebar .selector-preferencias { margin-bottom: 12px; } .app-sidebar .pie-sidebar .boton-tema { color: #f2e9df; } .app-sidebar .pie-sidebar .boton-tema:hover { background: rgba(255, 255, 255, 0.14); color: #fff; } .app-sidebar .pie-sidebar .selector-idioma a { color: #f2e9df; } .app-sidebar .pie-sidebar .selector-idioma a.activo { color: var(--color-secundario); } .app-sidebar .pie-sidebar .selector-idioma a:hover { background: rgba(255, 255, 255, 0.14); color: #fff; } .app-main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; } .app-topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; background: var(--color-tarjeta); border-bottom: 1px solid var(--color-borde); flex-wrap: wrap; gap: 10px; } .app-topbar .migaja { font-weight: 700; color: var(--color-texto); position: relative; padding-bottom: 10px; } .app-topbar .migaja::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 2px; background: var(--color-secundario); } .app-topbar .usuario-chip { display: flex; align-items: center; gap: 10px; color: var(--color-texto); font-weight: 600; font-size: 0.88rem; } .app-topbar .usuario-chip .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-fondo); border: 1px solid var(--color-borde); display: flex; align-items: center; justify-content: center; font-size: 0.76rem; font-weight: 700; color: var(--color-primario-oscuro); } .app-content { padding: 32px; flex: 1; } .app-content h1 { margin: 0 0 22px; color: var(--color-primario-oscuro); } .app-content h2 { font-size: 1.05rem; color: var(--color-texto); margin: 0 0 16px; } @media (max-width: 860px) { .app-shell { flex-direction: column; align-items: stretch; } .app-sidebar { position: static; height: auto; overflow: visible; width: auto; flex-direction: column; align-items: stretch; padding: 0; gap: 0; } .app-sidebar .marca-app { margin: 0; display: flex; align-items: center; gap: 10px; padding: 14px 18px; } .app-sidebar .marca-app img { width: 34px; height: 34px; margin-bottom: 0; flex-shrink: 0; } .app-sidebar .marca-app strong { font-size: 1rem; } .app-sidebar .marca-app span { display: none; } .app-nav { flex-direction: row; overflow-x: auto; flex: none; gap: 4px; padding: 0 12px 12px; } .app-nav a { white-space: nowrap; flex-shrink: 0; } /* El rótulo de grupo no aporta nada en una barra horizontal angosta (ver .app-nav-grupo más arriba) — se oculta solo en este breakpoint. */ .app-nav-grupo { display: none; } .app-sidebar .cita-sidebar { display: none; } .app-sidebar .pie-sidebar { margin-top: 0; padding: 10px 18px; border-top: 1px solid rgba(255, 255, 255, 0.16); } .app-sidebar .pie-sidebar .usuario { display: none; } .app-content { padding: 20px 16px; } .app-topbar { padding: 14px 18px; } } /* Tarjetas de estadística del dashboard */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; } .stat-card { background: var(--color-tarjeta); border: 1px solid var(--color-borde); border-radius: 12px; padding: 18px 20px; display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; } /* Solo las stat-card que además son enlaces (ej. "Solicitudes pendientes" → /admin/solicitudes.php) llevan feedback de hover — las que son
puramente informativos (sin destino al hacer clic) se quedan estáticas. */ a.stat-card { transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } a.stat-card:hover, a.stat-card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-secundario); } .stat-card .icono-badge { width: 48px; height: 48px; border-radius: 50%; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .stat-card .icono-badge svg { width: 22px; height: 22px; color: var(--color-primario); } .stat-card .numero { display: block; font-size: 1.6rem; font-weight: 800; color: var(--color-texto); line-height: 1.3; } .stat-card .etiqueta { display: block; font-size: 0.84rem; color: var(--color-texto-suave); } /* Tarjeta de panel con encabezado (ej. "Inscripciones por aprobar") */ .panel-card { background: var(--color-tarjeta); border: 1px solid var(--color-borde); border-radius: 12px; padding: 22px; margin-bottom: 24px; overflow-x: auto; } .panel-card > h2 { margin: 0 0 16px; } /* Blog público */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .blog-tarjeta { display: flex; flex-direction: column; background: var(--color-tarjeta); border: 1px solid var(--color-borde); border-radius: 12px; padding: 18px; text-decoration: none; color: var(--color-texto); box-shadow: var(--sombra); transition: transform 0.15s ease, box-shadow 0.15s ease; } .blog-tarjeta:hover, .blog-tarjeta:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(66, 42, 35, 0.14); } .blog-tarjeta img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; margin-bottom: 12px; } .blog-tarjeta .categoria { font-size: 0.78rem; font-weight: 700; color: var(--color-primario); margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.03em; } .blog-tarjeta strong { font-size: 1.05rem; line-height: 1.35; } .blog-tarjeta p { font-size: 0.88rem; color: var(--color-texto-suave); margin: 8px 0 0; line-height: 1.5; } .blog-tarjeta .fecha { margin-top: 12px; font-size: 0.78rem; color: var(--color-texto-suave); } /* La sección "Últimas noticias" (home) tiene su propio bloque de estilos, ver ".latest-news-section" más abajo en el archivo (rediseño 2026-09-29). */ /* Tabla de datos */ .tabla-datos { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .tabla-datos th { text-align: left; background: var(--page-bg-alt); color: var(--color-texto-suave); font-weight: 700; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 10px 12px; white-space: nowrap; } .tabla-datos td { padding: 12px; border-top: 1px solid var(--color-borde); vertical-align: middle; } .tabla-datos tr:hover td { background: var(--surface-hover); } /* Tabla -> tarjetas en móvil, en vez de depender solo del scroll horizontal del .panel-card contenedor (mega-prompt: sin scroll horizontal cuando se pueda evitar). data-label lo pone includes/layout.php::appFooter() por JS, leyendo el de cada tabla — así no hace falta editar las 17 tablas del sistema una por una. */ @media (max-width: 640px) { .tabla-datos thead { display: none; } .tabla-datos, .tabla-datos tbody, .tabla-datos tr, .tabla-datos td { display: block; width: 100%; } .tabla-datos { border: none; } .tabla-datos tbody tr { margin-bottom: 12px; border: 1px solid var(--color-borde); border-radius: 10px; overflow: hidden; background: var(--color-tarjeta); } .tabla-datos tbody tr:last-child { margin-bottom: 0; } .tabla-datos tbody tr:hover td { background: var(--color-tarjeta); } .tabla-datos td { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: right; } .tabla-datos td:first-child { border-top: none; } .tabla-datos td::before { content: attr(data-label); font-weight: 700; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-texto-suave); text-align: left; flex-shrink: 0; } .tabla-datos td:not([data-label]) { justify-content: flex-start; } .tabla-datos td .fila-acciones { justify-content: flex-end; flex-wrap: wrap; } } /* Pills de estado */ .pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; white-space: nowrap; } /* Sistema de badges (mega-prompt de diseño, sección "Badges y estados"): fondo suave + texto oscuro del mismo color, nunca texto blanco sobre un tono claro. Usan los tokens semánticos de estado, no colores sueltos, para que cualquier ajuste futuro de marca se propague solo. */ .pill-pendiente { background: var(--warning-bg); color: var(--warning); } .pill-aprobada, .pill-activo, .pill-completada, .pill-en_curso { background: var(--success-bg); color: var(--success); } .pill-rechazada, .pill-cancelado { background: var(--danger-bg); color: var(--danger); } .pill-lista_espera { background: var(--info-bg); color: var(--info); } .pill-incompleta { background: var(--warning-bg); color: var(--warning); } .pill-programado { background: var(--info-bg); color: var(--info); } .pill-finalizado { background: var(--neutral-bg); color: var(--neutral); } /* Botones pequeños de acción en tablas/tarjetas */ .btn-mini { padding: 7px 14px; border-radius: 6px; font-size: 0.82rem; font-weight: 700; border: 1px solid transparent; cursor: pointer; text-decoration: none; display: inline-block; background: none; } .btn-aprobar { background: var(--success-solid); color: #fff; } .btn-aprobar:hover { background: #245e3e; } .btn-rechazar { background: var(--surface); color: var(--danger); border-color: #e3b3b3; } .btn-rechazar:hover { background: var(--danger-bg); } .btn-neutro { background: var(--surface); color: var(--color-texto); border-color: var(--color-borde); } .btn-neutro:hover { background: var(--color-fondo); } /* Página actual en paginación (ej. blog público) — nunca reutilizar .btn-aprobar aquí: ese color implica "solicitud aprobada", un significado de estado que no aplica a "estás viendo esta página". */ .btn-actual { background: var(--primary-solid); color: #fff; border-color: var(--primary-solid); } .btn-mini:disabled { opacity: 0.55; cursor: not-allowed; } .btn-mini:disabled:hover { background: inherit; } .fila-acciones { display: flex; gap: 6px; flex-wrap: wrap; } /* Etiqueta neutral (ej. #hashtag de una entrada de blog) — a diferencia de los .pill-* de estado (pendiente/aprobada/...), no implica ningún estado. */ .pill-etiqueta { background: var(--page-bg-alt); color: var(--color-texto-suave); } /* Insignia de nivel de certificación de escuela (básico/intermedio/avanzado) — un nivel no es un estado "activo", así que no reutiliza .pill-activo. */ .pill-nivel { background: var(--accent-soft); color: var(--pill-nivel-texto); } /* ================================================================= Sitio público de mercadeo (anónimo) — header horizontal + hero ================================================================= */ .marketing-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 40px; background: var(--color-tarjeta); flex-wrap: wrap; gap: 14px; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background-color var(--nav-transition-normal) ease, border-color var(--nav-transition-normal) ease, box-shadow var(--nav-transition-normal) ease, padding var(--nav-transition-normal) ease; } /* Estado tras hacer scroll (mega-prompt de diseño, navbar sticky): la clase la aplica un IntersectionObserver liviano en publicHeader() — nunca un cálculo en cada evento de scroll. Sin JavaScript, el header ya se ve bien: fondo sólido desde el principio, solo pierde el borde/sombra de scroll. */ .marketing-header.con-scroll { border-bottom-color: var(--border-subtle); box-shadow: var(--shadow-sm); } .marketing-header .marca-inline { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-primario-oscuro); font-family: var(--fuente-encabezado); } .marketing-header .marca-inline img { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; } /* Nombre + subtítulo institucional (2026-09-21, a pedido del usuario) — apilados dentro de la misma altura de 42px del logo, sin agrandar el header: line-height ajustado para que las 2 líneas quepan justas. */ .marketing-header .marca-texto { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; min-width: 0; } .marketing-header .marca-nombre { font-weight: 800; font-size: 1.15rem; white-space: nowrap; } .marketing-header .marca-subtitulo { font-weight: 500; font-size: 0.62rem; color: var(--color-texto-suave); white-space: nowrap; letter-spacing: 0.01em; } .marketing-header nav { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; } .marketing-header nav a { color: var(--color-texto); text-decoration: none; font-weight: 600; font-size: 0.92rem; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: color var(--nav-transition-fast) ease, border-color var(--nav-transition-fast) ease; } .marketing-header nav a:hover { color: var(--color-primario); } .marketing-header nav a.activo { color: var(--color-primario); border-bottom-color: var(--color-secundario); } /* .cta sin acotar a .marketing-header a propósito: el mismo botón se reutiliza en el pie del menú móvil (.menu-movil-pie .cta) — acotarlo dejaba ese botón sin forma de píldora y con el ícono de flecha sin tamaño, renderizando gigante (bug real encontrado al inspeccionar el drawer abierto, no solo cerrado). */ .cta { border: 1.5px solid var(--color-primario); color: var(--color-primario); padding: 9px 20px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 0.86rem; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .cta svg { width: 16px; height: 16px; flex-shrink: 0; } .cta:hover { background: var(--primary-solid); color: #fff; } /* Selector de tema (un solo botón contextual, revertido 2026-09-21 de una versión de 2 botones del mismo día) + idioma (ES/EN) — mega-prompt Fase 9. Markup compartido por publicHeader() (header horizontal) y appHeader() (pie del sidebar oscuro) vía selectorPreferencias() en includes/layout.php. Es