/* PUENTE · sistema de diseño. Hereda ~/proyecto-tablero-academico/DESIGN.md: la marca no se toca. Lo NUEVO aquí son las superficies de juego, los estados de celebración y la rampa de energía, que un tablero de gestión no necesitaba y un producto para chicos sí. LEY DE COLOR: el oro y el verde NUNCA escriben texto sobre fondo claro. Ya costó una versión entera — la v2 declaró un dorado "legible sobre blanco" y lo era (4,60:1), pero la superficie real es papel #FBFAF7, donde cae bajo AA. Al cambiar la superficie hay que re-medir todo lo que se apoya en ella. */ @font-face{font-family:Inter;src:url(/fuentes/InterVariable.woff2) format("woff2");font-weight:100 900;font-display:swap} @font-face{font-family:"Bricolage Grotesque";src:url(/fuentes/BricolageGrotesque-latin.woff2) format("woff2");font-weight:400 800;font-display:swap} :root{ /* MARCA — intocable */ --navy:#03045E; --azul:#314A97; --oro:#DD9817; --verde:#22A66C; --oro-txt:#94660E; /* 4,83:1 — la única variante del oro que escribe */ --verde-txt:#157A4C; /* 5,13:1 — la única variante del verde que escribe */ /* SUPERFICIES */ --papel:#FBFAF7; --panel:#FFFFFF; --panel-2:#F7F6F2; --juego:#F2F5FD; /* la sesión de práctica: azulado, para que se sienta otro sitio */ --linea:#E1DFDA; --linea-2:#CECCC6; /* TINTA — cuatro niveles, todos medidos sobre el papel */ --tinta:#202329; /* 15,08:1 */ --tinta-2:#53575F; /* 6,95:1 */ --tinta-3:#70747B; /* 4,50:1 — el mínimo AA, no bajar */ --tinta-4:#8E9298; /* 3,00:1 — SOLO deshabilitado, nunca texto vivo */ /* ESTADO — reservado, jamás como "serie 4" */ --acierto:#157A4C; --acierto-bg:#EAF7F0; --error:#B3261E; --error-bg:#FDF1F0; --atencion:#8A5A00; --sin-datos:#8E9298; /* ENERGÍA — exclusivo de la sesión */ --chispa:#FFD166; --racha:#F4A261; --r:14px; --r-s:10px; --sombra:0 1px 2px rgba(3,4,94,.06), 0 12px 32px -18px rgba(3,4,94,.28); --sombra-alta:0 2px 4px rgba(3,4,94,.08), 0 24px 60px -24px rgba(3,4,94,.42); /* ESCALA POR EDAD — la clase del la fija el servidor desde el curso */ --base:16px; --tactil:44px; } html.pequenos{--base:20px;--tactil:56px} html.medianos{--base:17px;--tactil:48px} html.grandes {--base:16px;--tactil:44px} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --navy:#C9D3FA; --azul:#93AAEA; --oro:#E8AE3C; --verde:#3FC98A; --oro-txt:#E0A63C; --verde-txt:#58C08E; --papel:#0C0E1C; --panel:#151830; --panel-2:#1B1F38; --juego:#101430; --linea:#262B47; --linea-2:#363C5C; --tinta:#ECEDF6; --tinta-2:#AAB0C8; --tinta-3:#878DA8; --tinta-4:#666C88; --acierto:#58C08E; --acierto-bg:#122A20; --error:#F0837C; --error-bg:#2C1616; --atencion:#E0A63C; --sin-datos:#666C88; --sombra:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -18px rgba(0,0,0,.9); --sombra-alta:0 2px 4px rgba(0,0,0,.6), 0 24px 60px -24px rgba(0,0,0,1); }} :root[data-theme="dark"]{ --navy:#C9D3FA; --azul:#93AAEA; --oro:#E8AE3C; --verde:#3FC98A; --oro-txt:#E0A63C; --verde-txt:#58C08E; --papel:#0C0E1C; --panel:#151830; --panel-2:#1B1F38; --juego:#101430; --linea:#262B47; --linea-2:#363C5C; --tinta:#ECEDF6; --tinta-2:#AAB0C8; --tinta-3:#878DA8; --tinta-4:#666C88; --acierto:#58C08E; --acierto-bg:#122A20; --error:#F0837C; --error-bg:#2C1616; --atencion:#E0A63C; --sin-datos:#666C88; --sombra:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -18px rgba(0,0,0,.9); --sombra-alta:0 2px 4px rgba(0,0,0,.6), 0 24px 60px -24px rgba(0,0,0,1); } *{box-sizing:border-box} body{background:var(--papel);color:var(--tinta);margin:0; font-family:Inter,system-ui,sans-serif;font-size:var(--base);line-height:1.6; font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased} h1,h2,h3,.disp{font-family:"Bricolage Grotesque",Inter,sans-serif;letter-spacing:-.025em;text-wrap:balance} [hidden]{display:none !important} /* un display de autor le gana al atributo; ya costó dos veces */ button{font:inherit;cursor:pointer;min-height:var(--tactil)} :focus-visible{outline:2.5px solid var(--azul);outline-offset:3px;border-radius:6px} /* anchos por clase: la CSP es style-src 'self' y el JS no puede escribir style.x */ .w0{width:0}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%} .w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%} .w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%} .w90{width:90%}.w95{width:95%}.w100{width:100%} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important} }