/* ============================================================================
V12 — Sistema de diseño
============================================================================
Esta hoja es LA fuente de la estética del portal. Sale de las 7 referencias
que eligió Mateo y de los mockups aprobados en el lienzo "Estructura del
Portal V12". Cada componente dice de qué referencia viene.
LA REGLA: ninguna pantalla nueva escribe estilos propios. Si algo no está
acá, primero se agrega acá (y a /estilo, que es donde se ven todos juntos) y
recién después se usa. Si una pantalla se sale del sistema, es un error del
sistema, no de la pantalla.
PALETA — la del portal, sin inventar nada:
fondo #0d1a29 · panel #15263d · panel2 #1f3654 · acento #d6571a
Un solo acento, como en la referencia Gofit: 20 pantallas sostenidas por un
color. El naranja NUNCA es decoración: marca lo accionable o lo que urge.
============================================================================ */
:root {
/* ── CAPA 1 · Los colores crudos ────────────────────────────────────────
Cada color existe UNA vez, acá, y en ningún otro lado de la hoja. Van como
canales sueltos para poder componer transparencias sin volver a escribir el
número: el naranja estaba escrito NUEVE veces como "214, 87, 26" repartido
por el archivo, y cambiar el acento del portal significaba encontrar las
nueve y no equivocarse en ninguna.
Esta capa NO se usa en un componente. Un componente usa la capa 2, que es
la que dice para qué sirve cada color. Si escribís var(--c-…) dentro de una
regla de componente, falta un nombre en la capa 2. */
--c-noche: 13 26 41;
--c-marino: 21 38 61;
--c-marino-claro: 31 54 84;
--c-marino-mas-claro: 36 61 94;
--c-fuego: 214 87 26;
--c-fuego-hondo: 166 62 12;
--c-fuego-claro: 240 145 92;
--c-blanco: 255 255 255;
--c-negro: 0 0 0;
--c-verde: 60 191 136;
--c-verde-claro: 111 224 179;
--c-ambar: 212 165 42;
--c-ambar-claro: 232 200 96;
--c-rojo: 224 88 88;
--c-rojo-claro: 255 180 180;
--c-hielo: 98 135 174;
--c-hielo-claro: 156 192 230;
--c-violeta: 139 92 246;
/* ── CAPA 2 · Para qué sirve cada uno ───────────────────────────────────
Estos son los nombres que usan los componentes. La regla que hace que la
separación valga: en una regla de componente, `color:` toma un nombre de
texto (--v12-txt / --v12-dim* / los *-claro), `background:` toma una
superficie (--v12-bg / --v12-panel* / --v12-relleno) o un relleno de
estado, y `border-color:` toma una línea. Un color de estado sin -claro
NO es un color de texto: --v12-ok sobre el fondo oscuro da 3,6:1 en 12px.
SIETE DE ESTOS SON HEX DE 6 DÍGITOS A PROPÓSITO y no pueden pasar a
rgb(var(--c-…)): el portal del entrenador les pega el alfa al final del
hex ("#d6571a" + "40") en unos 170 lugares, y "rgb(214 87 26)40" no es un
color. Son --v12-o, --v12-ok, --v12-mal, --v12-frio, --v12-alerta,
--v12-violeta y --v12-txt. Quedan al lado de su primitivo para que se vea
que son el mismo color escrito dos veces por esa razón y no por descuido. */
--v12-bg: rgb(var(--c-noche));
--v12-panel: rgb(var(--c-marino));
--v12-panel2: rgb(var(--c-marino-claro));
--v12-panel3: rgb(var(--c-marino-mas-claro));
--v12-o: #d6571a; /* = --c-fuego (ver arriba) */
--v12-o-hondo: rgb(var(--c-fuego-hondo));
--v12-o-suave: rgb(var(--c-fuego) / .16);
--v12-o-borde: rgb(var(--c-fuego) / .40);
/* Seis dígitos, no #fff: el portal del entrenador le pega el alfa al hex
("#ffffff" + "15") en unos 150 lugares, y "#fff15" no es un color. */
--v12-txt: #ffffff; /* = --c-blanco (hex: le pegan alfa) */
/* Un escalón entre el blanco pleno y el primer apagado: para texto corrido
largo, donde el blanco puro cansa. */
--v12-dim0: rgb(var(--c-blanco) / .82);
--v12-dim: rgb(var(--c-blanco) / .62);
/* .52 y no .38: a .38 daba 3,43:1 sobre el panel y este es el color de trece
reglas de texto, incluida .v12-etiqueta, que es el rótulo de dato que viene
de cuatro de las siete referencias. .52 da 5,16:1 sobre panel y 5,52:1
sobre el fondo. El número está calculado, no elegido a ojo: .50 da 4,88:1 y
no deja margen sobre --v12-panel2. */
--v12-dim2: rgb(var(--c-blanco) / .52);
/* NO es un escalón de texto: 2,03:1 no se lee. Es para marcas, hilos y
puntos — cosas que se ven, no que se leen. Se llamaba --v12-dim3 y el
nombre invitaba a usarlo como el cuarto gris de texto; por eso terminó
pintando los días del calendario. */
--v12-adorno: rgb(var(--c-blanco) / .22);
--v12-line: rgb(var(--c-blanco) / .10);
--v12-line-suave: rgb(var(--c-blanco) / .06);
--v12-line-fuerte: rgb(var(--c-blanco) / .14);
--v12-relleno: rgb(var(--c-blanco) / .05);
/* El riel de una barra: el canal apagado sobre el que corre el relleno. Se
escribía a mano en cuatro lugares (.v12-barra, .v12-mini, .v12-pastilla
neutra y el riel de la regla). */
--v12-riel: rgb(var(--c-blanco) / .07);
/* Los dos estados que pintan la caja entera y no solo el borde. Estaban
escritos con el rojo crudo en .v12-panel.urge y en .v12-fila.urge, que a
propósito comparten valores: dos rojos distintos para "esto urge" serían
dos vocabularios. */
--v12-urge-borde: rgb(var(--c-rojo) / .35);
--v12-urge-fondo: rgb(var(--c-rojo) / .07);
--v12-ok-borde: rgb(var(--c-verde) / .35);
--v12-ok-relleno: rgb(var(--c-verde) / .16);
--v12-ok: #3cbf88; /* = --c-verde (hex: le pegan alfa) */
--v12-alerta: #d4a52a; /* = --c-ambar (hex: le pegan alfa) */
--v12-mal: #e05858; /* = --c-rojo (hex: le pegan alfa) */
--v12-frio: #6287ae; /* = --c-hielo (hex: le pegan alfa) */
/* Los mismos colores, aclarados para usarse como TEXTO. Un #3cbf88 sobre el
fondo oscuro se lee mal en 12px; el aclarado sí. Son los que ya venían
escritos a mano en `.v12-aviso` y en el panel del setter: acá dejan de
estar sueltos en cada pantalla. */
--v12-ok-claro: rgb(var(--c-verde-claro));
--v12-alerta-claro: rgb(var(--c-ambar-claro));
--v12-mal-claro: rgb(var(--c-rojo-claro));
--v12-frio-claro: rgb(var(--c-hielo-claro));
--v12-o-claro: rgb(var(--c-fuego-claro));
--v12-r-chico: 8px;
--v12-r: 12px;
--v12-r-panel: 14px;
--v12-r-pastilla: 999px;
--v12-sombra: 0 14px 34px rgb(var(--c-negro) / .40);
--v12-sombra-suave: 0 8px 24px rgb(var(--c-negro) / .30);
--v12-fuente: 'Montserrat', system-ui, -apple-system, sans-serif;
/* Nada que se toque baja de 44px: es el mínimo para un pulgar. */
--v12-tocable: 44px;
/* ── Piezas que el portal de entrenador ya usaba y el sistema no nombraba ──
El SPA (dist/index.html) traía su paleta escrita tres veces adentro. Para
que pueda leer de acá sin cambiar de aspecto, el sistema tuvo que ponerle
nombre a lo que ese lado sí usa y este no tenía. Se agregan con el valor
exacto que ya tenían: migrar no es rediseñar. */
--v12-violeta: #8b5cf6; /* = --c-violeta (hex: le pegan alfa) */ /* la 5ª serie de los gráficos */
--v12-fuente-titulo: 'Varien', 'Montserrat', sans-serif;
--v12-nav: rgb(var(--c-noche) / .82); /* barra fija sobre contenido */
--v12-o-brillo: 0 0 8px rgb(var(--c-fuego) / .60);
--v12-o-degrade: linear-gradient(135deg, rgb(var(--c-fuego) / .22), rgb(var(--c-fuego) / .06));
--v12-o-sombra: 0 10px 28px rgb(var(--c-fuego) / .32); /* el botón principal levantado */
--v12-r-capsula: 22px;
/* Anillo de foco. Doble a propósito: el primer borde es del color del fondo,
así separa el control de lo que tenga debajo, y el segundo pinta. De un
solo color se pierde cuando el control está sobre un panel del mismo tono. */
--v12-foco: 0 0 0 2px var(--v12-bg), 0 0 0 4px var(--v12-o-claro);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body.v12 {
background: var(--v12-bg);
color: var(--v12-txt);
font-family: var(--v12-fuente);
-webkit-font-smoothing: antialiased;
min-height: 100dvh;
}
.v12 a { color: var(--v12-o); }
/* Aclara, no oscurece: #b84813 bajaba el contraste de 4,38:1 a 3,32:1, o sea
que el estado de foco del mouse dejaba el enlace MENOS legible. */
.v12 a:hover { color: var(--v12-o-claro); }
/* ── Contenedores ──────────────────────────────────────────────────────────
El marco de una pantalla de celular (referencia 4 y 5): ancho acotado,
centrado, y respetando la barra del sistema arriba y abajo. */
.v12-app {
width: 100%; max-width: 460px; margin: 0 auto;
min-height: 100dvh; display: flex; flex-direction: column;
padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
}
.v12-cuerpo { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.v12-pie { flex-shrink: 0; padding-top: 20px; }
/* Panel: la tarjeta base de todo el portal. */
.v12-panel {
background: var(--v12-panel);
border: 1px solid var(--v12-line);
border-radius: var(--v12-r-panel);
padding: 18px 20px;
}
.v12-panel.acento { border-color: var(--v12-o-borde); }
.v12-panel.urge { border-color: var(--v12-urge-borde); background: var(--v12-urge-fondo); }
/* ── Hoja de escritorio ────────────────────────────────────────────────────
El sistema salió de las referencias de celular y su único contenedor es
.v12-app (460px). Las dos referencias horizontales que eligió Mateo "para
gráficos y tarjetas" son de escritorio y no tenían dónde vivir: cada pantalla
se inventaba su ancho (1100 en /estilo, 1180 en /panel, 1080 escrito a mano
en el portal). Tres anchos distintos y ninguno en el sistema. */
.v12-hoja { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
/* ── Estados de bloque (vacío, cargando, error) ────────────────────────────
Ninguna referencia los muestra, y por eso faltaban. Pero con la adherencia en
0% en dos de cinco jugadores, el vacío NO es la excepción: es el estado que
más se ve. El sistema ya había tomado esta decisión una vez, en .v12-kpi.vacia
("se marca a propósito, para que no parezca rota"); acá se generaliza. */
.v12-vacio {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 12px; padding: 26px 20px; border-radius: var(--v12-r-panel);
border: 1px dashed var(--v12-line-fuerte); color: var(--v12-dim);
font-size: 13px; line-height: 1.55;
}
/* Un mensaje no se estira: en escritorio queda del ancho de un párrafo legible. */
.v12-vacio > * { max-width: 420px; }
.v12-vacio svg { color: var(--v12-adorno); flex: 0 0 auto; }
.v12-vacio .v12-btn { width: auto; }
/* El mismo vacío, sin el aire de un estado de pantalla entera: es el hueco de
un bloque sin ejercicios adentro de un formulario. */
.v12-vacio.angosta { padding: 13px 14px; font-size: 12px; gap: 7px; }
.v12-error {
border-style: solid;
border-color: color-mix(in srgb, var(--v12-mal) 35%, transparent);
color: var(--v12-mal-claro);
}
/* Un error sin forma de reintentar obliga a recargar la pestaña. */
/* Esqueleto: bloques del alto de una fila. Es lo que la regla de rendimiento
pide en vez de una ruedita cuando la espera pasa de 300ms — reserva el lugar
y evita que la pantalla salte cuando llega el dato. */
.v12-cargando { display: flex; flex-direction: column; gap: 8px; }
.v12-cargando i {
display: block; height: 62px; border-radius: var(--v12-r);
background: linear-gradient(90deg, var(--v12-relleno) 25%,
rgb(var(--c-blanco) / .09) 37%, var(--v12-relleno) 63%);
background-size: 400% 100%;
animation: v12-brillo 1.4s ease-in-out infinite;
}
@keyframes v12-brillo { from { background-position: 100% 0 } to { background-position: 0 0 } }
/* ── Cabecera de paso (referencia 5: título chico + puntos de avance) ────── */
.v12-top { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; flex-shrink: 0; }
.v12-top-txt { font-size: 13px; font-weight: 750; }
.v12-top-sub { font-size: 11.5px; color: var(--v12-dim2); margin-top: 2px; }
.v12-volver {
/* El chevron sale en currentColor: el color lo pone acá y no el SVG, así un
ícono toma el color de lo que lo rodea en vez de traer el suyo. */
color: var(--v12-dim0);
background: none; border: 0; padding: 6px; margin: -6px; cursor: pointer;
display: flex; align-items: center; justify-content: flex-start;
min-width: var(--v12-tocable); min-height: var(--v12-tocable);
}
.v12-pasos { margin-left: auto; display: flex; gap: 5px; }
.v12-pasos i { display: block; width: 7px; height: 7px; border-radius: var(--v12-r-pastilla); background: var(--v12-adorno); }
.v12-pasos i.on { background: var(--v12-o); width: 20px; }
/* Lleno pero subordinado al actual: distinguía el paso en curso del resto
apagado, y eso sirve para un formulario de 3 pasos, no para una lista donde
importa cuántos quedaron atrás. */
.v12-pasos i.hecho { background: var(--v12-o); opacity: .45; }
/* ── Texto ─────────────────────────────────────────────────────────────── */
.v12-h1 { font-size: 23px; font-weight: 800; letter-spacing: -.4px; line-height: 1.28; }
.v12-h2 { font-size: 13px; font-weight: 750; }
.v12-ayuda { font-size: 13.5px; color: var(--v12-dim); margin-top: 8px; line-height: 1.5; }
.v12-rotulo { font-size: 15px; font-weight: 750; margin-top: 26px; }
.v12-rotulo .opc { font-size: 12px; font-weight: 600; color: var(--v12-dim2); margin-left: 8px; }
/* Rótulo de dato: mayúsculas chicas, como en las referencias 1, 3, 6 y 7. */
.v12-etiqueta {
font-size: 10px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--v12-dim2);
}
/* ── REGLA 0-10 (referencia 5, Gofit) ───────────────────────────────────────
El elemento distintivo de esa referencia y el que hace que el jugador
conteste con el pulgar en vez de escribir. Marcas de verdad, no una barra:
las pares altas, las impares bajas, y la elegida naranja y más alta todavía.
El queda debajo para el teclado y los lectores de
pantalla; el toque y el arrastre los maneja la pista, porque en iOS tocar un
range NO mueve el pulgar y el jugador se queda mirando la pantalla. */
.v12-regla { text-align: center; margin-top: 26px; }
/* Sin tocar: el numero es un guion apagado, para que se vea que falta
responder y no un valor de verdad. */
.v12-regla.sin-tocar .v12-regla-n { color: var(--v12-dim2); }
.v12-regla.sin-tocar .v12-regla-de { opacity: .4; }
.v12-regla-n {
font-size: 62px; font-weight: 800; line-height: 1; letter-spacing: -2px;
color: var(--v12-o); font-variant-numeric: tabular-nums;
}
.v12-regla-de { font-size: 19px; font-weight: 700; color: var(--v12-dim2); margin-left: 5px; }
.v12-regla-que { font-size: 13px; color: var(--v12-dim); margin-top: 9px; font-weight: 650; min-height: 20px; }
.v12-regla-pista {
position: relative; margin-top: 22px; height: 62px;
touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.v12-regla-marcas {
position: absolute; inset: 0 0 24px 0;
display: flex; align-items: center; justify-content: space-between;
}
.v12-regla-marcas i {
display: block; width: 2px; height: 14px; border-radius: 2px;
background: var(--v12-adorno); flex: 0 0 auto;
}
.v12-regla-marcas i.par { height: 20px; background: rgb(var(--c-blanco) / .28); }
.v12-regla-marcas i.sel { width: 3.5px; height: 34px; background: var(--v12-o); }
.v12-regla-nums {
position: absolute; left: 0; right: 0; bottom: 0;
display: flex; justify-content: space-between;
font-size: 11.5px; color: var(--v12-dim2); font-variant-numeric: tabular-nums;
}
.v12-regla-nums span { flex: 0 0 auto; width: 2px; display: flex; justify-content: center; }
.v12-regla-pista input[type=range] {
position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0; margin: 0; cursor: pointer;
}
/* ── Fichas (referencia 4: chips de filtro / referencia 5: objetivos) ────── */
.v12-fichas { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.v12-ficha {
min-height: 46px; padding: 12px 17px; border-radius: var(--v12-r-pastilla);
background: var(--v12-relleno); border: 1px solid var(--v12-line);
color: var(--v12-dim0); font: inherit; font-size: 13.5px; font-weight: 650;
cursor: pointer; display: inline-flex; align-items: center;
}
.v12-ficha[aria-pressed=true] {
background: var(--v12-o); border-color: var(--v12-o); color: var(--v12-bg); font-weight: 800;
}
/* Variante chica, para filtros de una lista (no para respuestas). Chica es la
tipografía y el padding horizontal; la ALTURA no baja. Tenía min-height:34px
diez líneas después de que este archivo declarara --v12-tocable con el
comentario "nada que se toque baja de 44px": la excepción estaba mal, no la
regla. */
.v12-fichas.chicas .v12-ficha { padding: 6px 13px; font-size: 12px; }
/* ── Botones ───────────────────────────────────────────────────────────── */
.v12-btn {
width: 100%; min-height: 54px; border: 0; border-radius: var(--v12-r);
background: var(--v12-o); color: var(--v12-bg);
font: inherit; font-size: 15.5px; font-weight: 800; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 9px;
}
/* .55 y no .4: a .4 el texto del botón quedaba por debajo de 2:1 y no se leía
qué era lo que estaba deshabilitado. El cursor lo dice sin depender de la
vista. */
.v12-btn[disabled] { opacity: .55; cursor: not-allowed; }
.v12-btn.suave {
background: transparent; color: var(--v12-dim);
font-weight: 650; min-height: 46px; font-size: 13.5px;
}
.v12-btn.linea {
background: transparent; color: var(--v12-dim0);
border: 1px solid var(--v12-line); font-weight: 700;
}
.v12-btn.angosto { width: auto; padding: 0 20px; min-height: 44px; font-size: 13px; }
/* La fila de acciones de un pie: la principal ocupa el resto y las angostas se
quedan del ancho de su texto. Cada pantalla lo resolvía con un flex a mano. */
.v12-pie .acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.v12-pie .acciones .v12-btn { flex: 1 1 160px; }
.v12-pie .acciones .v12-btn.angosto { flex: 0 0 auto; }
/* ── Estados ───────────────────────────────────────────────────────────────
El sistema definía el estado por defecto de cada pieza y nada más: el único
:focus en 403 líneas era el del campo de texto. Sin esto, la regla 0-10 y las
filas de ejercicio —que se escribieron a propósito para andar con teclado— no
muestran dónde estás parado.
:focus-visible y no :focus: el anillo aparece cuando se navega con teclado y
no cuando se toca con el dedo, que es donde molesta. */
.v12 :focus-visible {
outline: none;
box-shadow: var(--v12-foco);
border-radius: inherit;
}
/* Hover: un escalón de relleno y el borde que ya existía sin usar
(--v12-line-fuerte). No cambia el tamaño: mover el layout en hover hace
saltar lo que está al lado. */
@media (hover: hover) {
.v12-btn:not([disabled]):hover { filter: brightness(1.08); }
.v12-ficha:not([aria-pressed=true]):hover,
.v12-fila-cabeza:hover,
.v12-stepper button:hover {
background: var(--v12-relleno); border-color: var(--v12-line-fuerte);
}
.v12-fila:hover { border-color: var(--v12-line-fuerte); }
}
/* Apretado: 1px hacia abajo. Es la confirmación táctil que pide la regla 2
cuando no hay vibración. */
.v12-btn:not([disabled]):active,
.v12-ficha:active,
.v12-stepper button:active { transform: translateY(1px); }
/* ── Campos ────────────────────────────────────────────────────────────── */
.v12-campo {
width: 100%; margin-top: 12px; padding: 14px; border-radius: var(--v12-r);
background: var(--v12-relleno); border: 1px solid var(--v12-line);
color: var(--v12-txt); font: inherit; font-size: 16px; line-height: 1.5; outline: none;
}
textarea.v12-campo { min-height: 110px; resize: none; }
input.v12-campo.corto { width: 130px; }
/* El borde solo daba 2,10:1 contra el panel. El anillo del sistema lo cubre;
acá queda el borde para que el campo se vea activo también sin teclado. */
.v12-campo:focus { border-color: var(--v12-o-borde); }
.v12-campo::placeholder { color: var(--v12-dim2); }
/* El desplegable es un campo más. No estaba en el sistema y por eso cada
pantalla lo pintaba sola: en el planificador era una caja de 58px con las
letras A B C D peladas, cuando el jugador del otro lado ya lee "B · Fuerza".
La flecha va en background y no en un ::after, porque un