/* =========================================================================== kit.css β€” la piel de Coral, en UN solo lugar πŸ”‘ DUEΓ‘O ÚNICO, A PROPΓ“SITO. Hasta el 10/09 el acabado β€”el serif, las versalitas, el degradado metΓ‘lico del tΓ­tulo, el canto dorado, el relieve de los botonesβ€” vivΓ­a suelto adentro de `panel.html`, y las otras dos pantallas tenΓ­an sΓ³lo los COLORES. El resultado: la misma app se veΓ­a de dos maneras segΓΊn por dΓ³nde entraras, y nadie lo notaba desde el cΓ³digo porque los hex coincidΓ­an. El acabado no es el color. Copiarlo a las tres pΓ‘ginas habrΓ­a sido tres copias que divergen sin dar error (Ley 10). Por eso es un archivo, y las tres lo importan. ⚠️ Lo que va acΓ‘ son PRIMITIVAS: cosas que se ven igual en las tres pantallas. Lo propio de cada una β€”las tarjetas de lanzamiento, el veredicto a pantalla completa de la puerta, la tarjeta de la entradaβ€” se queda en su pΓ‘gina. Meter acΓ‘ algo que usa una sola pantalla es empezar a hacer de este archivo el CSS de todo. Los contrastes estΓ‘n MEDIDOS, no estimados. Entre escalones vecinos de negro el contraste es 1,05:1 y hace falta 3:1 para que un lΓ­mite se lea: la profundidad sale del canto y de la sombra, no de aclarar superficies. =========================================================================== */ :root { /* Negro cΓ‘lido, no violΓ‘ceo: sobre #0d0b12 el oro tira a lila. Lo marcaron las tres direcciones del abanico por separado, sin coordinarse. No es contraste (9,30 β†’ 9,46) sino tono β€” y el contraste no mide el tono. */ --s0:#070605; --s1:#0a0908; --s2:#131110; --s3:#191713; --s4:#221f1a; --borde:#241f18; --texto:#f4f1ea; /* 17,64:1 sobre s1 */ --suave:#9c9186; /* 6,45:1 */ --tenue:#6b6259; /* 3,15 β€” decorativo, NO es color de texto */ --oro:#d4af37; /* 9,46:1 */ --oro-tenue:#8f7530; /* 4,51:1 β€” cantos y reglas */ --oro-sombra:#7d5e1a; /* el valle del metal */ --oro-claro:#e8c96a; --oro-brillo:#fdf1cd; --ok:#17a34a; --tibio:#c98a12; --mal:#cf3030; /* πŸ”΄ Una tinta POR SEΓ‘AL, no una sola. El marfil sobre el verde daba 2,92:1 y sobre el Γ‘mbar 2,61 β€” los dos bajo el piso, en la pantalla que se lee a un metro y con poca luz. En el ROJO se invierte: ahΓ­ gana el claro (4,52 contra 4,12 del negro). El invariante es el contraste contra CADA fondo, no un color que sirva para los tres. */ --tinta-ok:#06210f; --tinta-tibio:#2a1c02; --tinta-mal:#f4f1ea; /* Los valores del acabado que hasta el 21/09 vivΓ­an como hex sueltos abajo (.metal, .rasante, el relieve del botΓ³n y del avatar). Los tres abanicos del HUD los encontraron por separado: un hex fuera de :root no se ve desde ningΓΊn lado y envejece solo. Ahora tienen nombre. */ --oro-medio:#a9852c; /* el cierre del degradado metΓ‘lico */ --s1-5:#0d0b0a; /* el fondo al que cae la luz rasante, entre s1 y s2 */ --chapa-alta:#2a2318; --chapa-media:#1d1913; --chapa-baja:#161310; /* el relieve de un botΓ³n */ /* Sistema del HUD (21/09): movimiento, radios y ritmo. Una curva para todo lo que se mueve; tres tiempos y nada mΓ‘s. Lo que no estΓ‘ acΓ‘ no se inventa en una pantalla. */ --curva:cubic-bezier(.2,.8,.2,1); --t-hover:160ms; --t-estado:240ms; --t-entrada:420ms; --r-tarjeta:6px; --r-pildora:999px; --sombra-suave:0 10px 26px -12px var(--s0); /* toda superficie que se despega del fondo */ --u:8px; /* Alias de compatibilidad: `index.html` y `entrada.html` nacieron con estos nombres. Se resuelven contra los de arriba en vez de repetir el hex, asΓ­ que no pueden desfasarse. */ --fondo:var(--s1); --panel:var(--s2); } * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; } body { margin:0; background:var(--s1); color:var(--texto); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; -webkit-text-size-adjust:100%; } ::selection { background:var(--oro-tenue); color:var(--s0); } .oculto { display:none !important; } /* ── TipografΓ­a ─────────────────────────────────────────────────────────── */ .serif { font-family:Georgia,"Times New Roman",serif; font-weight:400; } /* Las versalitas doradas de arriba de cada tΓ­tulo. Es lo que dice de quiΓ©n es la app antes de decir quΓ© pantalla es. */ .overline { font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:var(--oro-tenue); } /* El tΓ­tulo metΓ‘lico: un degradado que cruza en diagonal, con el brillo cerca del 46% para que parezca luz sobre metal y no un gradiente decorativo. `background-clip:text` necesita el color transparente para dejarlo ver. */ .metal { background-image:linear-gradient(102deg,var(--oro-tenue) 0%,var(--oro) 26%, var(--oro-brillo) 46%,var(--oro-claro) 62%,var(--oro-medio) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .titulo { font-size:30px; line-height:1.1; margin:0; } .titulo-chico { font-size:26px; line-height:1.1; } /* ── El canto ───────────────────────────────────────────────────────────── */ /* Un filo que se enciende arriba-izquierda y se disuelve hacia la derecha. Es lo que separa una superficie del fondo cuando el relleno no puede: entre dos negros vecinos no hay contraste suficiente para que se lea un lΓ­mite. */ .canto { position:relative; } .canto::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(100deg,var(--oro) 0%,var(--oro-tenue) 40%,rgba(125,94,26,0) 100%); } /* Superficie con luz rasante: el degradado va en la misma diagonal que el canto, asΓ­ la pieza entera se lee como iluminada desde arriba-izquierda. */ .rasante { background:linear-gradient(158deg,var(--s3) 0%,var(--s2) 55%,var(--s1-5) 100%); box-shadow:0 10px 26px -12px rgba(0,0,0,.9); } /* ── Controles ──────────────────────────────────────────────────────────── */ input, select, textarea { font:inherit; font-size:16px; /* 16px o iOS hace zoom al enfocar */ background:var(--s2); color:var(--texto); border:1px solid var(--borde); border-radius:3px; padding:13px 14px; min-height:48px; width:100%; } input:focus-visible, select:focus-visible, button:focus-visible { outline:2px solid var(--oro-tenue); outline-offset:1px; border-color:var(--oro-tenue); } /* El botΓ³n es una chapa biselada, no un rectΓ‘ngulo de color: el `inset` de arriba es el filo que recibe la luz y el de abajo la sombra propia. */ button { font:inherit; font-size:15px; font-weight:600; letter-spacing:.06em; cursor:pointer; border:0; border-radius:3px; padding:15px; min-height:48px; width:100%; background:linear-gradient(102deg,var(--chapa-alta) 0%,var(--chapa-media) 55%,var(--chapa-baja) 100%); color:var(--oro); box-shadow:inset 0 1px 0 rgba(253,241,205,.3), inset 0 -1px 0 rgba(0,0,0,.6), 0 8px 20px -6px rgba(0,0,0,.9); } button:active { box-shadow:inset 0 1px 3px rgba(0,0,0,.7); } button:disabled { opacity:.55; cursor:default; } /* El secundario no compite: sin relieve y sin oro. */ button.gris, .salir { background:none; box-shadow:none; border:1px solid var(--borde); color:var(--suave); font-weight:400; } label { display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--suave); } /* ⚠️ El label es flex EN COLUMNA: cada hijo directo se lleva su propio renglΓ³n. Un `(mΓ­nimo 8)` suelto adentro se lee como otro campo, y NO se arregla con `display:inline` en el hijo β€” manda el contenedor. El rΓ³tulo y su aclaraciΓ³n van envueltos juntos en un span. */ /* ── Avisos ─────────────────────────────────────────────────────────────── */ .aviso { font-size:13px; line-height:1.45; padding:11px 13px; border-radius:3px; background:var(--s2); border-left:2px solid var(--mal); color:var(--texto); } /* El mismo bloque confirma: mismo lugar, misma forma, el color como ΓΊnica diferencia. Dos cajas distintas para "saliΓ³ bien" y "saliΓ³ mal" obligan a mirar dos sitios cuando hace falta mirar uno. */ .aviso.bien { border-left-color:var(--ok); } .nota { font-size:13px; color:var(--suave); line-height:1.5; } /* ── Chips ──────────────────────────────────────────────────────────────── */ .chip { font-size:10px; letter-spacing:.1em; padding:4px 9px; border-radius:2px; border:1px solid var(--borde); color:var(--suave); display:inline-block; } .chip.on { border-color:var(--oro-tenue); color:var(--oro-claro); } .chip.ojo { border-color:var(--tibio); color:var(--tibio); } /* ── Avatar ─────────────────────────────────────────────────────────────── */ /* πŸ”‘ El centrado va acΓ‘ y no se hereda del `button`: la misma clase la usan un `