@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&family=Nunito:wght@400;600;700;800;900&family=Nunito+Sans:wght@700&display=swap'); /* ============================================================ Tokens de tema. Los valores de :root son el modo claro y reproducen el aspecto original; html.dark los reescribe. El tema se aplica con la clase `dark` en , la misma convención que la landing (public/styles.css) y la app Inertia (resources/js/hooks/use-appearance.tsx). La rampa oscura es la de la landing, para que pasar de una a otra no cambie de piel. ============================================================ */ :root { /* Escala de marca: son los colores del logo y NO cambian con el tema. Los acentos que sí se ajustan están más abajo. */ --brand-ink: #1A243B; --brand-blue: #0083F5; --brand-green: #33CC66; --brand-blue-700: #0068c4; --brand-green-700: #1a9a50; --brand-blue-100: #d9edff; --brand-blue-50: #eef7ff; --brand-green-100: #dcf7e5; --brand-green-50: #effbf3; --brand-ink-100: #e7eaf0; --brand-ink-50: #f5f7fa; /* Superficies */ --bg: #f4f8fc; --surface-1: #ffffff; --surface-2: #f7f9fc; --surface-3: #e5edf5; /* Panel navy: oscuro en AMBOS temas, porque lleva texto e iconos blancos encima (.sound-check, .audio-player, .mode-number…). No confundir con --text, que sí voltea. */ --surface-inverse: #1A243B; --surface-inverse-2: #203454; --header-bg: rgba(255, 255, 255, .92); /* Superficies translúcidas: se apoyan en el fondo de página */ --surface-1-a96: rgba(255, 255, 255, .96); --surface-1-a95: rgba(255, 255, 255, .95); --surface-1-a90: rgba(255, 255, 255, .90); --surface-1-a88: rgba(255, 255, 255, .88); --surface-1-a82: rgba(255, 255, 255, .82); /* Extremos del degradado de fondo (body::before) */ --bg-grad-top: #ffffff; /* Rejilla de body::after: tinta sobre claro, luz sobre oscuro. No puede salir de --shadow-rgb, que en oscuro es negro. */ --grid-line: rgba(26, 36, 59, .035); /* Superficies con tinte (fondos de .fill-sentence, .target-wrap…) */ --tint-a: #f8fbff; --tint-b: #fbfdff; /* Pastilla clara sobre el panel navy: NO voltea, porque el panel sigue oscuro en los dos temas (.sound-btn y su acento). */ --chip-bg: #ffffff; --chip-fg: #1E2E4B; --chip-accent: #0068c4; /* Texto */ --text: #1A243B; --text-2: #32445c; --text-3: #53617a; --muted: #647087; --muted-2: #7b8799; --placeholder: #9aa4b6; --text-inverse: #ffffff; --muted-inverse: #1E2E4B; --navy: var(--text); --ink: var(--text); /* Tinta sobre verde de marca: el verde no voltea, así que esto tiene que seguir siendo oscuro en ambos temas. */ --on-green: #08261a; /* Bordes */ --line: #dce5ef; --line-strong: #cbd9e8; --line-hover: #b8cadc; --line-slot: #9CB1C9; /* Acentos de marca (estos sí se ajustan al tema) */ --green: #33CC66; --green-strong: #2cc260; --green-dark: #1a9a50; --cyan: #0083F5; --green-soft: #e7f9ed; --green-border: #bfead0; --blue-soft: #eef7ff; --blue-border: rgba(var(--blue-rgb), .14); --blue-ink: #0068c4; --blue-ring: #d9edff; /* Canales sueltos: dejan escribir rgba(var(--x-rgb), .34) y conservar el alfa original de cada regla en vez de un token por alfa. */ --green-rgb: 51, 204, 102; --blue-rgb: 0, 131, 245; /* Alias heredados: conservan su valor claro original y sólo cambian en oscuro. */ --soft-green: var(--brand-green-50); --soft-cyan: var(--brand-blue-50); --soft: var(--surface-2); /* Ámbar: aviso de integridad y modal de acciones */ --warn-soft: #fff8ed; --warn-border: #f2d0a4; --warn-ink: #6f4b1f; --warn-icon-fg: #b66a16; --warn-btn-bg: #fff3df; --warn-btn-bg-hover: #ffe9c6; --warn-btn-border: #e7b86d; --warn-btn-border-hover: #dc9c3b; --warn-btn-fg: #8a4b09; /* Terracota: el diálogo de advertencia de integridad. Es otra escala distinta del ámbar de la nota y del rojo del descalificado. */ --alert-soft: #fff5ef; --alert-border: #f1c7b7; --alert-icon-bg: #ffe2d6; --alert-icon-fg: #b34d28; --alert-title: #7a2f1d; --alert-text: #765047; --alert-btn: #d96b42; --alert-btn-hover: #c65b35; --on-alert: #ffffff; /* Rojo: descalificación y validación de correo */ --danger-soft: #fff1f1; --danger-border: #efbcbc; --danger-icon-bg: #ffdada; --danger-ink: #a82121; --danger-btn: #c94a4a; --on-danger: #ffffff; --field-error: #d64545; --field-error-rgb: 214, 69, 69; --field-error-text: #c23434; /* Curva del resultado. El SVG lo inyecta quiz.js, pero se pinta entero desde aquí (los ids salen de renderCurveChart). */ --curve-area: #ecfff4; --curve-axis: #cfdbe7; --curve-tick: #a8bad0; --curve-label: #5c6980; --curve-pointer: #7dbf9a; /* El hueco del aro: tiene que igualar el fondo del panel, no ser una superficie clara, o el anillo se vuelve un disco. */ --curve-point-fill: #ffffff; --curve-point-stroke: #30ca78; --curve-callout-bg: #071a34; --curve-callout-fg: #ffffff; --curve-stroke-1: #0083F5; --curve-stroke-2: #33CC66; --curve-stroke-3: #1A9A50; --curve-glow: #33CC66; /* Realce interior del panel de la curva */ --panel-highlight: #fff; /* Velos de modal: oscuros en ambos temas */ --overlay: rgba(4, 15, 31, .72); --overlay-2: rgba(15, 28, 51, .58); /* Sombras: un solo color base con los alfas originales */ --shadow-rgb: 26, 36, 59; --shadow: 0 24px 70px rgba(var(--shadow-rgb), .12); --shadow-soft: 0 12px 36px rgba(var(--shadow-rgb), .08); } html.dark { /* Rampa de la landing: el fondo baja y las tarjetas suben, para que se lean como paneles sobre él. */ --bg: #0b1424; --surface-1: #1e3050; --surface-2: #263c62; --surface-3: #2e4874; /* Sigue siendo el panel oscuro, pero por encima de --bg: en el navy de marca se fundiría con la página. */ --surface-inverse: #2a4470; --surface-inverse-2: #35558c; --header-bg: rgba(11, 20, 36, .92); /* Derivados de --surface-1: han de seguir su valor o las tarjetas translúcidas quedarían más oscuras que las opacas. */ --surface-1-a96: rgba(30, 48, 80, .96); --surface-1-a95: rgba(30, 48, 80, .95); --surface-1-a90: rgba(30, 48, 80, .90); --surface-1-a88: rgba(30, 48, 80, .88); --surface-1-a82: rgba(30, 48, 80, .82); --bg-grad-top: #101b2c; --grid-line: rgba(255, 255, 255, .06); --tint-a: #24395e; --tint-b: #203458; /* La pastilla sigue clara: su panel no se aclara tanto como para poder invertirla sin perder el contraste del diseño. */ --chip-bg: #e8eef7; --chip-fg: #1E2E4B; --chip-accent: #0068c4; --text: #e8eef7; --text-2: #c3d0e2; --text-3: #a8bad2; --muted: #92a4bf; --muted-2: #8ea3c0; --placeholder: #8b9db8; --text-inverse: #ffffff; --muted-inverse: #1E2E4B; --on-green: #052e16; --line: #33496b; --line-strong: #425d87; --line-hover: #4d6b99; --line-slot: #6b83a8; --green: #5cd685; --green-strong: #4ecb7a; --green-dark: #4ecb7a; --cyan: #56d3e8; --green-soft: rgba(92, 214, 133, .14); --green-border: rgba(92, 214, 133, .34); --blue-soft: rgba(86, 211, 232, .14); --blue-border: rgba(86, 211, 232, .34); --blue-ink: #7cc4ff; --blue-ring: rgba(86, 211, 232, .30); --soft-green: rgba(92, 214, 133, .14); --soft-cyan: rgba(86, 211, 232, .14); --green-rgb: 92, 214, 133; --blue-rgb: 86, 211, 232; /* Opacos, no translúcidos: un velo cálido sobre el azul de la superficie se compone como gris y pierde el color. Es la misma decisión que documenta la landing para sus naranjas. */ --warn-soft: #4a3a22; --warn-border: #7a5c30; --warn-ink: #f0c48a; --warn-icon-fg: #f4a663; --warn-btn-bg: #5c4526; --warn-btn-bg-hover: #6d5230; --warn-btn-border: #a3703a; --warn-btn-border-hover: #c08b46; --warn-btn-fg: #ffd7a1; --alert-soft: #3d2a1f; --alert-border: #6e4b38; --alert-icon-bg: #5a3928; --alert-icon-fg: #ffab86; --alert-title: #ffb99a; --alert-text: #e0bdae; /* El botón ha de ser lo más saturado del diálogo: un terracota apagado sobre fondo terracota oscuro no se ve. */ --alert-btn: #e07a52; --alert-btn-hover: #ef8a62; --on-alert: #2a1409; --danger-soft: #3b1f22; --danger-border: #6d3b3e; --danger-icon-bg: #55282c; --danger-ink: #ff9c9c; --danger-btn: #d05a5a; --on-danger: #2a0d0d; --field-error: #ff6b7f; --field-error-rgb: 255, 107, 127; --field-error-text: #ff6b7f; --curve-area: rgba(92, 214, 133, .14); --curve-axis: #425d87; --curve-tick: #5a7aa8; --curve-label: #c3d0e2; --curve-pointer: #5cd685; --curve-point-fill: #0b1424; --curve-point-stroke: #5cd685; --curve-callout-bg: #35558c; --curve-callout-fg: #e8eef7; --curve-stroke-1: #4fa9ff; --curve-stroke-2: #5cd685; --curve-stroke-3: #35b06a; --curve-glow: #5cd685; --panel-highlight: rgba(255, 255, 255, .06); --overlay: rgba(2, 7, 15, .84); --overlay-2: rgba(2, 7, 15, .74); --shadow-rgb: 0, 0, 0; /* No es cosmético: gobierna la barra de scroll, el input de correo y los controles nativos del