/* ───────────────────────────────────────────────────────────────────────── EL PANEL ▼ — la interfaz. Los cinco principios de `brand/diseno-app.md` §8, en este orden: 1 · una cosa por pantalla 2 · los números, grandes y tabulares 3 · todo estado con su frase del método 4 · veinte segundos o no existe 5 · sofisticado = quieto: nada parpadea, nada persigue ───────────────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--voz); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; padding-bottom: env(safe-area-inset-bottom); } .app { max-width: 560px; margin: 0 auto; padding: 0 20px 120px; } /* ── la Fecha: vive arriba de CADA pantalla del ▼ (§2.2) ─────────────── */ .norte { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--fondo) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linea); margin: 0 -20px 26px; padding: 14px 20px 13px; } .norte .rot { font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-tenue); } .norte .fecha { font-size: 27px; font-weight: 700; line-height: 1.15; margin-top: 2px; } .norte .fecha.sin { font-size: 19px; color: var(--texto-mate); font-family: var(--voz); font-weight: 400; font-style: italic; } .norte .mueve { font-family: var(--ui); font-size: 12.5px; margin-top: 3px; } .mejor { color: var(--bien); } .peor { color: var(--duele); } /* El estado de la nube. Vive arriba a la derecha y no grita: si la persona nunca lo mira, la app funciona exactamente igual. */ .norte { position: sticky; } .chip { position: absolute; top: 14px; right: 20px; background: none; border: 0; padding: 4px 0; font-family: var(--ui); font-size: 11.5px; font-weight: 600; color: var(--texto-tenue); cursor: pointer; } .chip:hover { color: var(--texto-mate); border-color: transparent; } .chip.mejor { color: var(--bien); } .chip.peor { color: var(--duele); } /* ── tipografía ──────────────────────────────────────────────────────── */ h1 { font-size: clamp(28px, 6vw, 36px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 8px; font-weight: 700; } h2 { font-size: 21px; margin: 34px 0 12px; font-weight: 700; letter-spacing: -.01em; } h3 { font-family: var(--ui); font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--texto-tenue); margin: 26px 0 10px; } p { margin: 0 0 14px; color: var(--texto-mate); } p.guia { color: var(--texto-mate); font-size: 15.5px; } strong { color: var(--texto); font-weight: 700; } em { color: var(--texto-mate); } /* 🔴 Principio 3: nada aparece sin su porqué. Esta es la frase del método. */ .porque { font-family: var(--ui); font-size: 13px; line-height: 1.5; color: var(--texto-mate); border-left: 2px solid var(--hacer); padding: 2px 0 2px 12px; margin: 10px 0 0; } .porque .clase { display: inline-block; font-weight: 700; color: var(--hacer); text-decoration: none; border-bottom: 1px dotted currentColor; } /* ── tarjetas ────────────────────────────────────────────────────────── */ .caja { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 18px 16px; margin: 0 0 14px; } .caja.turno { border-color: var(--hacer); box-shadow: inset 3px 0 0 var(--hacer); } .canasta { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: baseline; } .canasta .n { font-family: var(--ui); font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-tenue); grid-column: 1 / -1; } .canasta .titulo { font-size: 19px; font-weight: 700; } .canasta .monto { font-size: 22px; font-weight: 700; text-align: right; } .canasta .meta { font-family: var(--ui); font-size: 12.5px; color: var(--texto-tenue); text-align: right; } .barra { grid-column: 1 / -1; height: 5px; background: var(--alto); border-radius: 3px; overflow: hidden; margin-top: 10px; } .barra > i { display: block; height: 100%; background: var(--hacer); border-radius: 3px; } .barra.lleno > i { background: var(--bien); } /* ── cifras grandes: la protagonista ─────────────────────────────────── */ .granCifra { font-size: clamp(34px, 9vw, 46px); font-weight: 700; line-height: 1.05; } .subCifra { font-family: var(--ui); font-size: 13px; color: var(--texto-tenue); margin-top: 2px; } /* la especificidad importa: `.mejor` a secas la pisaba `.subCifra`. */ .subCifra.mejor { color: var(--bien); } .subCifra.peor { color: var(--duele); } /* ── formularios: veinte segundos con una mano ───────────────────────── */ label { display: block; font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-tenue); margin: 16px 0 6px; } input, select { width: 100%; background: var(--alto); color: var(--texto); border: 1px solid var(--linea); border-radius: var(--radio); padding: 13px 14px; font-family: var(--ui); font-size: 17px; font-variant-numeric: tabular-nums; } /* 🔴 UN 10 SIN SU SÍMBOLO NO SE DISTINGUE DE 10 PESOS NI DE 10 AÑOS. El «%» vivía solo en el `placeholder`, que desaparece en cuanto hay una cifra: las dieciséis casillas de porcentaje de los tres cursos se leían en crudo. Andrés lo vio en la clase 21 el 10-sep-2026 — «aparece el 10 pero no aclara si es 10 o 10 %». Mismo fallo que el 62 sin unidad de las cifras calculadas, en el otro lado de la pantalla: allí se lee, aquí se escribe. */ .conSufijo { position: relative; } .conSufijo > input { padding-right: 34px; } .conSufijo > .sufijo { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--texto-tenue); pointer-events: none; font-size: 15px; } input:focus, select:focus { outline: 2px solid var(--hacer); outline-offset: 1px; border-color: transparent; } /* 🔴 EL AUTORRELLENO DE CHROME PINTA LA CASILLA DE BLANCO, y no hay forma de quitarle el fondo: `background` no le gana. La única que funciona es tapar el fondo con una sombra interior del color de la casilla, y forzar el color del texto, que si no queda negro sobre negro. Lo vio Andrés el 2-sep-2026 escribiendo un gasto: al elegir la sugerencia de Chrome, la casilla se volvía blanca en mitad de una pantalla oscura. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--alto) inset; -webkit-text-fill-color: var(--texto); caret-color: var(--texto); transition: background-color 100000s ease-in-out 0s; } input[type=range] { padding: 0; background: none; border: 0; accent-color: var(--hacer); } /* 🔴 28-sep-2026. El Diagnóstico del Depósito es del ●: sus deslizadores van en verde, no en el azul de finanzas, y con algo más de cuerpo para tocarlos con el pulgar. */ #formDeposito input[type=range] { accent-color: var(--ser); width: 100%; height: 26px; } .botones { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-top: 8px; } button { font-family: var(--ui); font-size: 15px; font-weight: 600; background: var(--alto); color: var(--texto); border: 1px solid var(--linea); border-radius: var(--radio); padding: 13px 16px; cursor: pointer; text-align: center; } button:hover { border-color: var(--texto-tenue); } /* 🔴 `.enlace` SE USABA SIN EXISTIR. Dos botones la llevan —«Quitarla», que retira tu respuesta del corcho, y «esto no debería estar aquí», que denuncia la de otro— y ninguno tenía estilo: caían al `button` de arriba y salían como cajas grises de 13px de relleno, gritando más que el texto al que acompañan. Encontrado mirando la pantalla el 2-sep-2026, no leyendo el CSS. Un botón que hace algo pequeño tiene que parecer pequeño. */ .enlace { background: none; border: 0; padding: 0; margin: 0; color: var(--texto-tenue); font-size: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; width: auto; } .enlace:hover { color: var(--texto); border-color: transparent; } button.principal { background: var(--hacer); border-color: var(--hacer); color: #0E1116; font-weight: 700; } button.grande { padding: 17px; font-size: 16px; } /* 🔴 EL BOTÓN NO PUEDE PEGARSE A LA CASILLA DE ARRIBA. `input:focus` dibuja un contorno de 2px desplazado 1px, o sea que sobresale TRES por fuera de la caja — y con cero de hueco el botón queda por debajo, pisado. Medido: campo y botón compartían el mismo píxel. Lo vio Andrés el 2-sep-2026 escribiendo un 3 en la última casilla de la clase 6. 16px, no 4: que quepa el contorno es el mínimo, no el objetivo. */ #formEntrega > button[type="submit"] { margin-top: 16px; } button[aria-pressed="true"] { border-color: var(--hacer); color: var(--hacer); } button.discreto { background: none; border-color: transparent; color: var(--texto-tenue); font-weight: 500; } /* las cuatro finalidades: se elige con el pulgar, sin leer (§2.4) */ .finalidades { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .finalidades button { padding: 14px 10px; line-height: 1.25; } .finalidades button small { display: block; font-size: 11px; font-weight: 400; color: var(--texto-tenue); margin-top: 3px; } /* ── tablas de deudas ────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; font-family: var(--ui); font-size: 14.5px; } th { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-tenue); text-align: left; padding: 0 0 8px; border-bottom: 1px solid var(--linea); } td { padding: 12px 0; border-bottom: 1px solid var(--linea); vertical-align: baseline; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } tr.proxima td { color: var(--texto); } tr.proxima td:first-child::before { content: "▸ "; color: var(--hacer); } tr:not(.proxima) td { color: var(--texto-mate); } /* ── el hexagrama de 12 segmentos ────────────────────────────────────── */ .hexa { display: block; width: 100%; max-width: 200px; margin: 0 auto 6px; } .hexa .vacio { fill: none; stroke: var(--linea); stroke-width: 2; } .hexa .lleno { fill: none; stroke-width: 2; } .hexa .hacer { stroke: var(--hacer); } .hexa .ser { stroke: var(--ser); } /* ── navegación inferior: el pulgar llega ────────────────────────────── */ .barraNav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: color-mix(in srgb, var(--fondo) 94%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--linea); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 4px; } .barraNav button { flex: 1 1 0; max-width: 110px; background: none; border: 0; padding: 8px 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--texto-tenue); /* 🔴 Una sola línea SIEMPRE. Al añadir «Clases» pasaron a ser seis botones y «¿Y si…?» se partió en dos, dejando la barra descuadrada en un teléfono de 375 px. Con seis no sobra un píxel: la letra se encoge lo justo y nada se parte. */ white-space: nowrap; } @media (max-width: 420px) { .barraNav { gap: 0; padding-left: 4px; padding-right: 4px; } .barraNav button { font-size: 10px; letter-spacing: .02em; padding: 8px 1px; } .barraNav .ic svg { width: 19px; height: 19px; } } .barraNav button[aria-current="page"] { color: var(--hacer); } .barraNav .ic { display: block; line-height: 0; margin-bottom: 3px; } .barraNav .ic svg { width: 21px; height: 21px; display: inline-block; } /* ── el pie legal: NO se achica ni se esconde (Decreto 2555) ─────────── */ .legal { font-family: var(--ui); font-size: 12.5px; line-height: 1.55; color: var(--texto-tenue); border-top: 1px solid var(--linea); margin-top: 40px; padding-top: 16px; } /* `display:flex` le gana al atributo `hidden` si no se dice esto. */ [hidden] { display: none !important; } /* Casillas de verdad, no viñetas. Se marcan con el pulgar. */ ul.casillas { list-style: none; margin: 0; padding: 0; } ul.casillas li { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--ui); font-size: 14.5px; cursor: pointer; } .casilla { flex: 0 0 auto; display: inline-block; width: 17px; height: 17px; border: 1.5px solid var(--texto-tenue); border-radius: 3px; } .casilla[data-marcada="1"] { background: var(--hacer); border-color: var(--hacer); } /* 🔴 UNA FILA QUE SE MARCA: el cuadradito y su texto al lado, no dentro. `.casilla` sola es el cuadrado de 17×17 que va junto a una etiqueta dentro de `ul.casillas`. En las entregas se usaba como botón CON el texto dentro: no cabía, medía 28px de alto —el pulgar no acierta por debajo de 44— y el contraste caía a 2.5:1. Lo midió el mirador en 225 pantallas. Alto mínimo 44px porque es lo que necesita un dedo, no porque quede bonito. */ .marcaFila { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 14px; margin-top: 8px; text-align: left; font-size: 15px; font-weight: 400; background: var(--alto); color: var(--texto); border: 1px solid var(--linea); border-radius: var(--radio); cursor: pointer; } .marcaFila[data-marcada="1"] { border-color: var(--hacer); } .marcaFila[data-marcada="1"] .casilla { background: var(--hacer); border-color: var(--hacer); } .oculto { display: none !important; } .centro { text-align: center; } .nota { font-family: var(--ui); font-size: 13px; color: var(--texto-tenue); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ── El aula: temario y clase ───────────────────────────────────────────── Sobrio a propósito. Lo que tiene que destacar es el título de la clase y lo que falta para cerrarla; el adorno compite con eso. */ .barraAvance{height:6px;border-radius:3px;background:#00000018;overflow:hidden;margin:14px 0 20px} .barraAvanceLlena{height:100%;background:var(--hacer);transition:width .4s ease} .bloque{margin-top:28px} .bloque h2{display:flex;align-items:baseline;justify-content:space-between;gap:10px; font-size:1rem;letter-spacing:.02em;text-transform:uppercase;opacity:.7;margin:0 0 8px} .deBloque{font-variant-numeric:tabular-nums;font-size:.85rem;opacity:.7} .listaClases{list-style:none;margin:0;padding:0} .listaClases li{margin:0 0 6px} .filaClase{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px; width:100%;text-align:left;padding:12px 14px;border:0;border-radius:10px; background:#00000008;color:inherit;font:inherit;cursor:pointer} .filaClase:hover:not(:disabled){background:#00000012} .filaClase.esperando{opacity:.45;cursor:default} .filaClase.hecha .marcaClase{color:var(--hacer)} .marcaClase{font-size:1.05rem;text-align:center;opacity:.8} .tituloClase{line-height:1.3} .colaClase{font-size:.8rem;opacity:.65;text-align:right;white-space:nowrap} /* 🔴 44px de alto también aquí. Es el botón para salir de una entrega —lo primero que se busca cuando alguien se equivoca de pantalla— y medía 27. El mirador lo encontró en 184 pantallas. El relleno negativo a la izquierda mantiene el texto alineado con el resto, aunque la zona de toque sea mayor. */ .volver{background:none;border:0;color:inherit;opacity:.7;font:inherit; min-height:44px;padding:0 10px;margin:0 -10px 6px;cursor:pointer} .volver:hover{opacity:1} /* 16:9 sin que el vídeo empuje el resto de la página al cargar. */ .marcoVideo{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden; background:#000;margin:6px 0 18px} .marcoVideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* Lo que aparece cuando la clase termina. No hay «siguiente»: hay entrega. */ .alTerminar{border-top:2px solid var(--hacer);padding-top:18px;margin-top:6px} .alTerminar h2{margin:0 0 8px} /* Sin perfil, el Panel todavía no tiene nada que enseñar: se atenúa en vez de desaparecer, para que se vea que está y que llegará. */ .barraNav button:disabled{opacity:.35;cursor:default} /* La entrada del alumno. Arriba del todo, antes del formulario: si estuviera abajo no la vería quien viene buscando sus clases. 🔴 DECÍA «¿Ya tienes cuenta?» Y ESO EXCLUÍA A MEDIA GENTE. Quien nunca ha entrado leía esa pregunta como «esto no es para ti» y se ponía a rellenar el formulario de ingresos — justo lo contrario de lo que venía a hacer. Y era falso: poner el correo CREA la cuenta si no existe (`api/entrar/[token].js` hace el INSERT). Una sola puerta para entrar y para registrarse, que es lo que permite que no haya contraseñas. El botón va PRIMERO y en firme: en la captura de Andrés, el texto discreto parecía deshabilitado y no se leía como algo que se pulsa. */ .yaTengoCuenta{display:flex;flex-direction:column;align-items:stretch; gap:10px;padding:16px;margin:0 0 24px; border:1px solid #ffffff1f;border-radius:12px;background:#ffffff08} .yaTengoCuenta span{opacity:.75;font-size:.92rem;line-height:1.4;text-align:center} .yaTengoCuenta .principal{width:100%} /* Elegir entre varias formaciones. Con una sola esta pantalla no aparece. */ .fichaFormacion{display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto; gap:2px 12px;width:100%;text-align:left;padding:16px;margin:0 0 10px; border:0;border-radius:12px;background:#00000010;color:inherit;font:inherit;cursor:pointer} .fichaFormacion:hover{background:#00000018} .simboloFormacion{grid-row:1/3;align-self:center;font-size:1.6rem;text-align:center} .nombreFormacion{font-weight:600;line-height:1.25} .avanceFormacion{font-size:.8rem;opacity:.65} /* ── La entrega ─────────────────────────────────────────────────────────── 🔴 El «aún no» NO se pinta como un error. Ni rojo, ni icono de alarma: es un paso del camino, y el color tiene que decir eso. */ .veredicto{border-radius:12px;padding:16px;margin:0 0 22px} .veredicto h2{margin:0 0 6px;font-size:1.15rem} .veredicto.completo{background:#2F6B4F1f;border-left:3px solid var(--ser)} .veredicto.aunNo{background:#3A5E8222;border-left:3px solid var(--hacer)} /* 🔴 LOS SALTOS DE LÍNEA DEL MENSAJE SE RESPETAN. El veredicto viene de la ficha de Andrés: su texto arriba, y debajo los criterios que faltan, cada uno en su línea. Sin esto el navegador lo aplastaba todo en un párrafo y el alumno leía «…a fin de mes no sobra» · hay un porcentaje», donde el último trozo parece una frase cortada. Lo vio Andrés entregando la clase 9. La solución NO era añadir palabras —la guarda de `_calificar-texto.js` lo impide, y con razón: ni una línea de ese mensaje puede ser del programa—. Era pintar bien lo que ya venía escrito. */ .veredicto p{margin:0 0 10px;white-space:pre-line} .grupoCampos{border:1px solid #ffffff1a;border-radius:12px;padding:14px 16px;margin:18px 0} .grupoCampos legend{padding:0 6px;font-size:.8rem;letter-spacing:.06em; text-transform:uppercase;opacity:.7} /* 🔴 TODO LO QUE SIGUE A UNA CASILLA NECESITA HUECO. `input:focus` dibuja un contorno que sobresale 3px, así que un control pegado justo debajo queda pisado. Salía en 133 pantallas —el «Quitar» de cada fila— y no lo veía nadie: la regla de solapes del mirador solo miraba lo que está FIJO en pantalla, no lo contiguo. Ahora lo mira, y por eso apareció. */ .filaLista{border-bottom:1px solid #ffffff12;padding-bottom:12px;margin-bottom:12px} .filaLista > button.discreto{margin-top:8px} /* El nombre de una fila fija: «Nivel 1 · Propósito». Es el encabezado de la fila, no una etiqueta de casilla: por eso no va en mayúsculas ni en gris. */ .rotuloFila{margin:0 0 8px;font-family:var(--ui);font-size:14px;font-weight:600;color:var(--texto)} .filaLista > input + label, .filaLista > select + label{margin-top:14px} .filaLista:last-of-type{border-bottom:0} .listaOrden{margin:0;padding-left:22px} .listaOrden li{display:flex;align-items:center;justify-content:space-between; gap:10px;padding:8px 0} .flechas{display:flex;gap:4px;flex-shrink:0} /* 🔴 44px, no 34. Es lo que necesita un pulgar, y estas dos flechas son de lo que más se toca: reordenar una lista de diez es veinte toques seguidos. Fallaban en 191 pantallas —el único hallazgo que quedó del mirador después de arreglar el gris y el cuadradito de marcar. */ .flechas button{width:44px;height:44px;border:0;border-radius:8px; background:#ffffff14;color:inherit;font:inherit;cursor:pointer} .flechas button:disabled{opacity:.25;cursor:default} .opciones{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px} .opcion{text-align:left;padding:12px 14px;border:1px solid #ffffff1f;border-radius:10px; background:transparent;color:inherit;font:inherit;cursor:pointer} .opcion.puesta{border-color:var(--hacer);background:#3A5E8226} /* Derivado a una persona. Ni verde de éxito ni azul de «aún no»: es otra cosa, y no lleva botón de reintentar — pedirle que reescriba sería lo peor. */ .veredicto.derivado{background:#ffffff10;border-left:3px solid #ffffff55} /* Texto libre de las entregas. Cómodo de escribir: es donde la persona piensa. */ textarea{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:10px; border:1px solid #ffffff1f;background:#00000018;color:inherit; font:inherit;line-height:1.5;resize:vertical;min-height:120px} textarea:focus{outline:2px solid var(--hacer);outline-offset:1px} /* El aviso de errata bajo un vídeo. Ni alarma ni letra pequeña: si el alumno oye una cifra y la app usa otra, tiene que enterarse ahí mismo. */ .notaClase{border-left:3px solid var(--hacer);background:#3A5E8218; border-radius:0 8px 8px 0;padding:12px 14px;margin:-6px 0 18px; font-size:.92rem;line-height:1.5} /* ── lo que la app calcula, y no se rellena ─────────────────────────────── */ .calculado{font-size:1.5rem;font-weight:600;margin:.2rem 0 .4rem; color:var(--texto);letter-spacing:-.01em} .calculado .pendiente{font-size:.95rem;font-weight:400;color:var(--texto-mate)} .pendiente{color:var(--texto-mate)} /* Lo que escribió hace clases, al lado de lo de hoy. */ blockquote.entonces{margin:.2rem 0 .6rem;padding:.7rem .9rem; border-left:3px solid var(--linea);background:var(--alto); border-radius:0 var(--radio) var(--radio) 0;color:var(--texto);font-size:.95rem} blockquote.entonces .pendiente{font-style:italic} /* El diario de varios días. */ .diario{display:grid;gap:.5rem;margin:.3rem 0 .5rem} .diario .dia{display:grid;grid-template-columns:auto 1fr;gap:.5rem;align-items:center} .diario .dia-n{font-size:.8rem;color:var(--texto-mate);min-width:3.6rem} .diario .dia input{margin:0} @media (max-width:520px){ .diario .dia{grid-template-columns:1fr} .diario .dia-n{min-width:0} } /* La ayuda de una casilla: debajo de su título y encima de ella. 🔴 MISMA TIPOGRAFÍA Y TAMAÑO QUE `.nota`, Y NO ES UN DETALLE. Al estrenarla se le puso solo un tamaño en `rem` y sin `font-family`, así que heredó la serif del cuerpo y salía MÁS GRANDE QUE SU PROPIO TÍTULO. Lo vio Andrés en la primera pantalla. Una explicación que pesa más que lo que explica deja de ser una ayuda y se convierte en el texto principal. */ .ayuda{font-family:var(--ui);font-size:13px;line-height:1.45; margin:2px 0 8px;color:var(--texto-mate)} fieldset.grupoCampos > .ayuda{margin:4px 0 10px} /* La puerta de vuelta a lo ya entregado. Discreta a propósito: lo que manda en una clase cerrada es seguir, no volver — pero volver tiene que ser posible. */ .yaEntregado{margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--linea)} .yaEntregado h3{margin:0 0 4px;font-size:1rem} .yaEntregado .nota{margin:0 0 10px} .yaEntregado .secundario{display:block;width:100%;text-align:left;margin:0 0 8px} /* ── EL MURO DE COHORTE ─────────────────────────────────────────────────── 🔴 Sin nada que perseguir: ni votos, ni contadores, ni orden por popularidad. El diseño tiene que decir «esto se lee», no «esto se puntúa». Por eso las tarjetas son planas, iguales entre sí y sin ningún adorno que distinga a una de otra. */ .muro-abrir { background: none; border: 1px solid var(--linea); border-radius: var(--radio); color: var(--texto-tenue); padding: 10px 16px; margin-top: 18px; font: inherit; font-size: .92rem; cursor: pointer; width: 100%; } .muro-abrir:hover { color: var(--texto); border-color: var(--texto-tenue); } .muro { margin-top: 20px; border-top: 1px solid var(--linea); padding-top: 16px; } .muro h3 { font-size: 1rem; margin: 0 0 12px; color: var(--texto-tenue); font-weight: 600; } .muro-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } /* Todas iguales. Que ninguna «destaque» es una decisión, no una falta. */ .muro-uno { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; } .muro-texto { margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; } .muro-quien { margin: 0; font-size: .8rem; color: var(--texto-tenue); } /* Discreta a propósito: tiene que estar, pero no invitar. */ .muro-denunciar { font-size: .78rem; opacity: .55; margin-left: 8px; } .muro-denunciar:hover { opacity: 1; } .muro-compartir { margin-top: 18px; display: grid; gap: 8px; } /* 🔴 ESTA ETIQUETA ES UNA FRASE, NO EL TÍTULO DE UNA CASILLA. El `label` de arriba está pensado para rotular un campo: mayúsculas, negrita, 12px. Al heredarlo, «Compartir esto con quien llegue a este ejercicio» salía gritado y en dos líneas, con el cuadradito abandonado a un lado. Se vio en la captura que mandó Andrés el 2-sep-2026, y se deshereda entero, propiedad a propiedad — poner solo `font-size` dejaba las mayúsculas puestas. */ .muro-compartir label { display: flex; gap: 10px; align-items: center; font-family: var(--ui); font-size: .92rem; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--texto); margin: 0; } /* `input { width: 100% }` vale para escribir, nunca para una casilla: le daba todo el ancho y empujaba el texto al otro lado. */ .muro-compartir input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; padding: 0; margin: 0; accent-color: var(--hacer); } .muro-compartir input[type="text"] { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); color: var(--texto); padding: 8px 12px; font: inherit; max-width: 320px; } /* 🔴 El prefijo de una carta. NO es una ayuda: es la primera línea de lo que la persona está escribiendo, así que se lee con su misma voz —cursiva, del color del texto— y va pegado a la casilla. Si se pintara como una ayuda gris parecería una instrucción y no la entrada de la carta. */ .prefijo { margin: 12px 0 6px; font-style: italic; color: var(--texto); padding-left: 12px; border-left: 2px solid var(--linea); } /* «Los tuyos, si faltan»: el rótulo de las casillas que él añade. */ label.libres { margin-top: 18px; } /* La cuenta viva de los porcentajes. Va ARRIBA, antes de las casillas: es la regla del ejercicio, no un aviso de que algo salió mal. */ .sumanA { margin: 0 0 4px; font-family: var(--ui); font-size: .92rem; color: var(--texto); padding-left: 12px; border-left: 2px solid var(--hacer); } /* El supuesto de una cifra proyectada. Pequeño, pero PEGADO al número: si se separa deja de leerse como parte de él, y una proyección suelta se lee como una promesa. */ .supuesto { margin: -2px 0 0; font-size: .78rem; color: var(--texto-tenue); font-style: italic; } /* La nota del contraste. Discreta a propósito: acompaña al «Completo», no lo discute. Si gritara, quien cambió una cifra creería que hizo algo mal. */ .veredicto .contraste { margin: 10px 0 0; padding-left: 12px; border-left: 2px solid var(--linea); color: var(--texto-tenue); } /* 🔴 La vista previa: el recuadro EXACTO que verá el otro, antes de marcar. Nace de la pregunta de Andrés del 2-sep-2026 —«¿cómo sé qué voy a compartir?»— y por eso NO se estiliza distinto de una tarjeta del corcho: si se viera diferente, no estaría enseñando lo que se va a ver. Solo se marca de dónde sale, con el filete de la izquierda. */ .muro-previo { margin: 2px 0 4px; } /* 🔴 `var(--acento)` NO EXISTE en marca.css — me la inventé, y una variable que no existe no falla: cae al color heredado y el filete salió blanco gritando. Se vio en pantalla, no leyendo el CSS. Las que hay son `--hacer`, `--texto`, `--texto-tenue`, `--linea`, `--papel`, `--alto`. */ .muro-previo .muro-uno { border-left: 3px solid var(--hacer); } /* ── El espejo: cuántos eligieron lo mismo (2-sep-2026) ──────────────────── Números, nunca palabras de nadie. Sale a partir de diez personas; por debajo no se pinta nada, y esa rama no existe ni en el módulo. */ .espejo { margin-top: 20px; border-top: 1px solid var(--linea); padding-top: 16px; } .espejo h3 { font-size: 1rem; margin: 0 0 12px; color: var(--texto-tenue); font-weight: 600; } .espejo-que { margin: 14px 0 6px; font-size: .88rem; color: var(--texto-tenue); } .espejo-que:first-of-type { margin-top: 0; } .espejo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .espejo-lista li { font-size: .95rem; } .espejo-lista strong { font-variant-numeric: tabular-nums; } /* ── Casa, Un año y los paneles sin motor (1-sep-2026) ───────────────────── 🔴 Copiado del mockup de Andrés, no aproximado: brand/mockup/Main.dc.html. La primera versión se escribió leyendo el TEXTO del mockup —anillo con el número dentro, todo centrado, tarjeta en oro— y no se parecía. Él lo cazó abriéndolo. Las medidas de aquí salen de su HTML. Ningún color literal: todo de marca.css. Y nunca `var(--tinta)` para texto. */ .casaFecha { font-family: var(--ui); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-tenue); margin: 0 0 4px; } /* El anillo y la cifra van UNO AL LADO DEL OTRO, no la cifra dentro. */ .casaAnillo { display: flex; align-items: center; gap: 20px; margin: 4px 0 18px; } .anillo { width: 118px; height: 118px; flex-shrink: 0; } .anilloCifra { font-family: var(--voz); font-size: 48px; line-height: 1; letter-spacing: -1px; color: var(--texto); margin: 0; } .anilloCifra span { font-size: 23px; color: var(--texto-tenue); letter-spacing: 0; } .casaRacha { font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-tenue); margin: 9px 0 0; } .casaCejaCaras { font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-tenue); margin: 0 0 10px; } /* «Hoy te toca»: verde y con punto, como el ● cuyo sitio ocupa. */ .hoyToca { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: transparent; border: 1px solid var(--ser); border-radius: 4px; padding: 17px 16px; margin: 0 0 18px; cursor: pointer; } .hoyToca:hover { background: var(--papel); } .hoyPunto { color: var(--ser); font-size: 19px; line-height: 1; } .hoyTexto { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; min-width: 0; } .hoyCeja { font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ser); } .hoyQue { font-family: var(--voz); font-size: 18px; line-height: 1.3; color: var(--texto); } .hoyDetalle { font-family: var(--ui); font-size: 12px; color: var(--texto-tenue); } .hoyFlecha { font-family: var(--ui); font-size: 20px; color: var(--texto-tenue); } .caras { display: flex; flex-direction: column; gap: 10px; } .cara { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: transparent; border: 1px solid var(--linea); border-left: 3px solid; border-radius: 4px; padding: 15px 16px; cursor: pointer; } .cara:hover { background: var(--papel); } /* Una cara que no has comprado NO se esconde: se apaga. El mapa completo se ve desde el primer día — la misma razón por la que Un año enseña los doce. */ .cara[data-sin] { opacity: .55; } .caraGlifo { font-size: 16px; line-height: 1; width: 18px; text-align: center; flex-shrink: 0; } .caraTexto { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; } .caraTexto b { color: var(--texto); font-size: 16.5px; font-weight: 400; line-height: 1.3; } .caraRitmo { font-family: var(--ui); font-size: 12.5px; color: var(--texto-tenue); } .caraAviso { font-family: var(--ui); font-size: 12.5px; color: var(--texto-tenue); text-align: right; max-width: 12ch; } .segCabeza { font-size: 16px; margin: 22px 0 8px; } .segmentos { list-style: none; padding: 0; margin: 0; } .segmento { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: baseline; padding: 9px 2px; border-bottom: 1px solid var(--linea); } .segNum { font-family: var(--ui); font-size: 12px; font-weight: 700; color: var(--texto-tenue); } .segTitulo { color: var(--texto); font-size: 14.5px; } .segEstado { font-family: var(--ui); font-size: 11px; color: var(--texto-tenue); } .segmento.cerrado .segNum { color: var(--oro); } .segmento.cerrado .segEstado { color: var(--oro); } .segmento.ajeno { opacity: .5; } .panelGlifo { font-size: 34px; line-height: 1; margin: 0 0 2px; } .seccionVacia { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px; margin: 0 0 10px; } .seccionVacia.pendiente, .seccionVacia.andres { opacity: .78; } .svCabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 5px; } .svCabeza b { color: var(--texto); font-size: 15px; } .sello { font-family: var(--ui); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; padding: 3px 7px; border-radius: 99px; border: 1px solid currentColor; } .sello.listo { color: var(--bien); } .sello.pendiente { color: var(--texto-tenue); } .sello.andres { color: var(--oro); } .svQue { margin: 0 0 4px; color: var(--texto-mate); font-size: 14px; } .svNota { margin: 0; color: var(--texto-tenue); font-size: 12.5px; } /* ── La puerta para conseguir lo que no tienes (1-sep-2026) ──────────────── Va ARRIBA del panel, antes de las secciones: quien no lo tiene necesita saber CÓMO conseguirlo antes que qué contiene. Es un y no un