/*
  La piel de la 2.0: de noche siempre, con su tipografía y su paleta.

  Vive aparte de `app.css` a propósito. La aplicación de siempre es clara u
  oscura según el sistema; las pantallas de la 2.0 tienen una identidad
  comprometida —fondo de noche, cifras de cartel, un color por área— y mezclarlas
  en la misma hoja obligaría a que cada token sirviera para dos mundos.
*/
:root{
  --fondo:#0A0A0D; --alto:#1A1820; --bajo:#100F15;
  --texto:#F2EFEA; --tenue:#A79FB0; --lejos:#665F72;
  --hilo:rgba(255,255,255,.09); --hilo2:rgba(255,255,255,.05);
  --vidrio:rgba(255,255,255,.055); --luz:#FFFFFF;
  /* Los tonos del prototipo aprobado, cada uno con su nombre. Existen aparte
     de los alias de área porque la piel los usa por lo que SON —el sueño va en
     «voz», una lámina del domingo en «mente»— y no por el área a la que
     pertenecen. Faltaban, y eso dejaba el botón de la hora elegida en texto
     oscuro sobre fondo transparente: invisible. */
  --oro:#EBD3A0; --fuego:#E05A78; --cuerpo:#E8657F; --mente:#63C3C9;
  --lectura:#3FC79C; --biblia:#E8C57E; --casa:#BFD063; --golf:#4FC2A4;
  --juegos:#E58AC0; --voz:#A98FE0; --base:#6FC0D4;
  /* Un color por área, del identificador de la sección a su tono. */
  --area-salud-fisica:var(--cuerpo);
  --area-bienestar-mental:var(--mente);
  --area-caracter-y-crecimiento-personal:var(--voz);
  --area-vida-espiritual:var(--biblia);
  --area-desarrollo-personal:var(--lectura);
  --area-productividad:var(--base);
  --area-relaciones:var(--juegos);
  --area-cuidado-personal-y-entorno:var(--casa);
  --area-conductas-a-mejorar:var(--fuego);
  --area-finanzas-personales:var(--golf);
  --area-golf:var(--golf);
  /* La textura de grano de las cartas y las láminas. */
  --ruido:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  --A:"Archivo","Helvetica Neue",sans-serif; --tk:-.025em;
  --S:"Sora",system-ui,sans-serif; --M:"Martian Mono",monospace;
}
*{box-sizing:border-box}
/* EL DOBLE TOQUE NO HACE ZOOM.
   En el teléfono, subir unos pasos de cien en cien son diez toques seguidos, y
   iOS lee dos toques rápidos en el mismo sitio como «acércate»: la pantalla se
   iba encima a media cuenta. Agustín: «lo que sí me frena muchísimo al
   registrar en el celular es que cuando doy doble click hace zoom in, y pues
   doy muchos doble clicks picando subir de 100 en 100. Me gusta picarle, pero
   lo del zoom es muy molesto».

   `manipulation` quita SÓLO el doble toque para acercar. Deja el desplazamiento
   y deja el zoom de dos dedos, que es la manera de acercarse que no estorba
   —la otra salida, `user-scalable=no` en el viewport, se los quitaría los dos y
   dejaría la aplicación sin forma de agrandar nada—. De regalo se va el retraso
   de 300 ms que iOS se guarda por si el toque era el primero de dos, así que
   además cada toque responde antes. */
button,a,label,summary,[role="button"]{touch-action:manipulation}
/* Y sus cajas, porque un toque de los diez puede caer en el hueco ENTRE dos
   botones: si esa caja no lo dice, ese toque vuelve a contar como el segundo de
   un doble toque y la pantalla se acerca igual. */
.pasos,.pasos-dentro,.opciones,.escala,.escalones,.horas,.animo,.calidad,.teclas,.cifrota,.hoja,.sueno{touch-action:manipulation}
html,body{background:var(--fondo);margin:0}
body{color:var(--texto);font-family:var(--S);font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
.app{max-width:480px;margin:0 auto;min-height:100%;padding-bottom:40px;position:relative}
h1,h2,h3{margin:0;font-weight:600}
.A{font-family:var(--A);font-weight:700;letter-spacing:var(--tk);line-height:.98}
.rot{font-family:var(--M);font-weight:500;font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--lejos);margin:0}
section{padding:0 18px;margin-bottom:28px}
.tit{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.tit h2{font-family:var(--A);font-weight:700;font-size:20px;letter-spacing:-.01em}
.tit s{flex:1;height:1px;background:var(--hilo);text-decoration:none}
.tit em{font-family:var(--M);font-weight:300;font-size:9px;font-style:normal;
  letter-spacing:.14em;text-transform:uppercase;color:var(--lejos)}
/* El lienzo de las chispas cubre la pantalla entera. Con sólo `inset:0` se
   quedaba en los 240 px de alto propios de un canvas, así que una tecla picada
   por debajo de esa altura celebraba fuera de la vista. */
#chispas{position:fixed;inset:0;width:100%;height:100%;max-width:480px;
  margin:0 auto;pointer-events:none;z-index:40}

/* cabecera */
.corona{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:22px 18px 6px}
.col-llama{display:flex;flex-direction:column;align-items:center}
.llama{position:relative;width:104px;height:116px;display:flex;flex-direction:column;align-items:center}
.llama svg{width:112px;height:122px;display:block;margin:-4px 0 -6px;overflow:visible}
.llama .n{position:absolute;left:0;right:0;top:53px;transform:translateY(-50%);text-align:center;pointer-events:none}
.llama .n b{font-size:24px;line-height:1;color:#fff;text-shadow:0 0 22px rgba(230,161,92,.8);display:block}
.texto-corona{min-width:0}
.texto-corona h1{font-family:var(--A);font-weight:700;font-size:clamp(22px,7.2vw,30px);
  line-height:1.04;letter-spacing:-.02em;margin-bottom:7px}
.texto-corona p{font-size:12px;color:var(--tenue);margin:0}
.escudos{grid-column:2;display:flex;gap:6px;align-items:center;margin-top:11px}
.escudos i{width:20px;height:23px;display:block;background:linear-gradient(180deg,#2B3248,#171C2B);
  clip-path:polygon(50% 0,100% 22%,100% 66%,50% 100%,0 66%,0 22%)}
.escudos i.on{background:linear-gradient(180deg,#8FB6FF,#4D6FD8);box-shadow:0 0 16px -4px #6C8CFF}
.escudos span{font-family:var(--M);font-weight:300;font-size:9px;color:var(--lejos);margin-left:4px}

/* nivel */
.nivel{margin:18px 18px 26px;padding:14px 16px 15px;border-radius:20px;
  background:linear-gradient(176deg,var(--alto),var(--bajo) 72%);
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 0 0 1px rgba(255,255,255,.045),0 22px 44px -26px #000}
.nivel .fila{display:flex;align-items:baseline;gap:9px;margin-bottom:10px}
.nivel .fila b{font-family:var(--A);font-weight:700;font-size:24px;letter-spacing:-.02em}
.nivel .fila span{font-family:var(--M);font-weight:300;font-size:10px;color:var(--tenue);flex:1}
.nivel .fila u{font-family:var(--M);font-weight:500;font-size:10px;color:var(--oro);text-decoration:none}
.xp{height:13px;border-radius:7px;background:#0A0D15;box-shadow:0 2px 6px rgba(0,0,0,.6) inset;overflow:hidden;position:relative}
.xp s{position:absolute;left:0;top:0;bottom:0;border-radius:7px;text-decoration:none;
  background:linear-gradient(90deg,#8A7442,var(--oro));box-shadow:0 0 18px -2px var(--oro);
  transition:width .6s cubic-bezier(.2,.9,.3,1)}
.xp u{position:absolute;inset:0;border-radius:7px;text-decoration:none;
  background:repeating-linear-gradient(115deg,transparent 0 9px,rgba(255,255,255,.10) 9px 18px)}

/* momentos y teclas */
.momento{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.momento .hh{font-family:var(--M);font-weight:500;font-size:8.5px;letter-spacing:.2em;color:var(--lejos)}
.momento .tit{flex:1;margin:0}
.teclas{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
/* En el teléfono son dos columnas, así que un grupo con un número impar de
   teclas dejaba a la última sola con un hueco al lado. Agustín lo vio en tres
   sitios a la vez —Oración, Enfoque, Resultado del día— y lo dijo así: «no me
   gusta que en móvil se vea disparejo, quisiera todas las secciones sin ese
   espacio». La última ocupa el renglón entero: el hueco desaparece y se lee
   como un cierre en vez de como algo que falta.

   Sólo en HOY, y eso es una decisión de contenido y no de rejilla. Estirar una
   tecla la señala como importante, así que sólo se estira donde se ha elegido
   quién cierra cada tramo —`teclas.CIERRES`—. En la página de un área las
   medidas van en el orden del catálogo y no hay ninguna que cierre: estirar la
   última señalaría a la que quedó al final, que es justo lo que él rechazó al
   ver «De pie» estirada. */
.app.hoy .teclas>.tecla:last-child:nth-child(odd){grid-column:1/-1;
  display:flex;align-items:center;gap:14px}
/* Y al ocupar el renglón entero se acomoda en fila: el nombre a la izquierda y
   la tira a la derecha, a su tamaño. Estirada a lo ancho, la tira de siete días
   se leía como una barra de progreso, que no es. */
.app.hoy .teclas>.tecla:last-child:nth-child(odd) .arriba{flex:1 1 52%;min-width:0}
/* La tira cede antes que el nombre. Con la tira fija, una tecla que además
   enseña su cifra —«12 horas»— dejaba el nombre en «De / pie», partido en dos
   renglones de dos letras. */
.app.hoy .teclas>.tecla:last-child:nth-child(odd) .mini{flex:0 1 132px;min-width:68px;margin:0}
.app.hoy .teclas>.tecla:last-child:nth-child(odd) .cuenta{position:static;flex:none;margin:0}
.tecla{appearance:none;border:0;padding:12px;cursor:pointer;font:inherit;color:var(--texto);text-align:left;
  border-radius:17px;background:linear-gradient(176deg,var(--alto),var(--bajo) 78%);position:relative;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 0 0 1px rgba(255,255,255,.04),0 14px 26px -20px #000;
  transition:transform .11s cubic-bezier(.3,1.4,.5,1),box-shadow .25s,background .25s}
.tecla:active{transform:scale(.955) translateY(2px)}
.tecla .arriba{display:flex;align-items:flex-start;gap:10px}
.tecla .ico{width:32px;height:32px;border-radius:11px;flex:none;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset;transition:background .25s}
.tecla .nm{flex:1;min-width:0}
.tecla .nm b{display:block;font-size:13px;font-weight:600;line-height:1.2}
.tecla .nm span{display:block;font-family:var(--M);font-weight:300;font-size:8.5px;color:var(--lejos);
  margin-top:3px;line-height:1.45}
.tecla .cuenta{display:block;font-family:var(--A);font-weight:700;font-size:20px;line-height:1.05;
  color:var(--c);text-align:right;margin-top:9px;overflow-wrap:anywhere}
.tecla[aria-pressed="true"]{background:linear-gradient(176deg,color-mix(in srgb,var(--c) 26%,var(--alto)),var(--bajo) 80%);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent),
             0 0 30px -12px var(--c),0 14px 26px -20px #000}
.tecla[aria-pressed="true"] .ico{background:var(--c);box-shadow:0 0 18px -5px var(--c)}
.tecla[aria-pressed="true"]::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--c);box-shadow:0 0 12px -1px var(--c)}
.tecla:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.pop{animation:pop .42s cubic-bezier(.22,1.6,.42,1)}
@keyframes pop{0%{transform:scale(1)}30%{transform:scale(1.05,.94)}60%{transform:scale(.98,1.03)}100%{transform:scale(1)}}
.flota{position:fixed;font-family:var(--A);font-weight:700;font-size:24px;letter-spacing:-.02em;
  pointer-events:none;z-index:41;animation:flota 1s ease-out forwards}
@keyframes flota{0%{opacity:0;transform:translate(-50%,0) scale(.7)}
  18%{opacity:1;transform:translate(-50%,-14px) scale(1.12)}
  100%{opacity:0;transform:translate(-50%,-58px) scale(1)}}

/* tira de días */
.dias{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;align-items:end;height:54px}
.dias i{display:block;background:rgba(255,255,255,.06);border-radius:3px;position:relative;overflow:hidden;height:100%}
.dias i s{position:absolute;left:0;right:0;bottom:0;text-decoration:none;border-radius:3px;
  background:linear-gradient(180deg,var(--base),color-mix(in srgb,var(--base) 45%,transparent))}
.dias i.hoy{box-shadow:0 0 0 1.5px var(--oro)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* la hoja de cantidad: la cifra ES el registro, así que se pica aquí */
.velo{position:fixed;inset:0;z-index:48;background:rgba(4,5,8,.72);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .3s}
.velo[data-on="1"]{opacity:1;pointer-events:auto}
.hoja{position:fixed;left:0;right:0;bottom:0;z-index:52;max-width:480px;margin:0 auto;
  padding:22px 18px calc(22px + env(safe-area-inset-bottom,0px));border-radius:28px 28px 0 0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c,var(--oro)) 18%,var(--alto)),var(--fondo) 74%);
  box-shadow:0 -1px 0 rgba(255,255,255,.16) inset,0 -26px 60px -22px #000;
  transform:translateY(104%);transition:transform .44s cubic-bezier(.2,.9,.25,1)}
.hoja[data-on="1"]{transform:none}
.hoja .tt{display:flex;align-items:baseline;gap:11px;margin-bottom:12px}
.hoja .tt h3{font-family:var(--A);font-weight:700;font-size:20px;letter-spacing:var(--tk);flex:1;min-width:0}
.hoja .tt span{font-family:var(--M);font-weight:300;font-size:9px;color:var(--tenue);text-align:right}
.cifrota{text-align:center;padding:4px 0 2px}
.cifrota b{font-family:var(--A);font-weight:700;font-size:clamp(46px,16vw,66px);line-height:.95;
  letter-spacing:-.04em;display:inline-block;transition:transform .16s}
.cifrota b.salta{transform:scale(1.1)}
.cifrota i{font-family:var(--M);font-weight:300;font-style:normal;font-size:12px;color:var(--tenue);margin-left:7px}
.pasos{display:flex;gap:8px;margin:16px 0 12px}
.pasos button{flex:1;appearance:none;border:0;cursor:pointer;border-radius:15px;padding:15px 0;font:inherit;
  font-family:var(--A);font-weight:700;font-size:16px;letter-spacing:var(--tk);color:var(--texto);
  background:rgba(255,255,255,.07);box-shadow:0 1px 0 rgba(255,255,255,.09) inset;transition:transform .11s,background .2s}
.pasos button:active{transform:scale(.92);background:color-mix(in srgb,var(--c,var(--oro)) 40%,transparent)}
.opciones{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:14px}
.opciones:has(button:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.opciones button{appearance:none;border:0;cursor:pointer;border-radius:13px;padding:13px 6px;font:inherit;
  font-size:14px;color:var(--tenue);background:rgba(255,255,255,.06);
  box-shadow:0 0 0 1px var(--hilo2);transition:transform .11s,background .2s,color .2s}
.opciones button:active{transform:scale(.93)}
.opciones button[aria-pressed="true"]{color:var(--fondo);background:var(--c,var(--oro));font-weight:600}
.acciones{display:flex;gap:9px;margin-top:6px}
.guardar{flex:1;appearance:none;border:0;cursor:pointer;border-radius:17px;padding:16px;font:inherit;
  font-family:var(--M);font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fondo);background:var(--c,var(--oro));box-shadow:0 14px 30px -16px var(--c,var(--oro));transition:transform .12s}
.guardar:active{transform:scale(.97)}
.secundario{appearance:none;border:0;cursor:pointer;border-radius:17px;padding:16px 18px;font:inherit;
  font-family:var(--M);font-weight:300;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tenue);background:rgba(255,255,255,.06);box-shadow:0 0 0 1px var(--hilo2)}

/* la barra de abajo: mientras la 2.0 tenga una sola pantalla, la otra puerta
   lleva a la aplicación de siempre para que esto no sea un callejón */
.app{padding-bottom:96px}
/* LA BARRA ES UNA SUPERFICIE, NO UN DEGRADADO.
   Antes el fondo entero era `transparent → fondo 44%`, así que justo donde
   están los iconos todavía se transparentaba: una tarjeta que pasara por
   debajo se veía a través de la barra y los iconos quedaban flotando encima
   del contenido en vez de apoyados en algo. Ahora la barra es opaca de arriba
   abajo, con una línea de pelo que dice dónde empieza, y el desvanecido vive
   en `::before`, ENCIMA de ella: el contenido se apaga al acercarse y la barra
   se queda quieta y sólida.

   `translateZ(0)` no es adorno: en iOS una barra fija sin capa propia se
   despega mientras dura el desplazamiento por inercia y se la ve flotar a
   media pantalla hasta que el dedo para. */
.nav{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;justify-content:center;gap:4px;
  background:var(--fondo);box-shadow:0 -1px 0 var(--hilo2);
  transform:translateZ(0);
  padding:13px 0 calc(13px + env(safe-area-inset-bottom,0px))}
.nav::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:28px;
  pointer-events:none;background:linear-gradient(180deg,transparent,var(--fondo))}
.nav a{flex:0 1 110px;text-decoration:none;font-family:var(--M);font-weight:300;font-size:8px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--lejos);padding:6px 2px;
  display:flex;flex-direction:column;align-items:center;gap:6px;transition:color .2s}
.nav a svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.nav a[aria-current="page"]{color:var(--texto)}
.nav a[aria-current="page"] svg{stroke:var(--oro);filter:drop-shadow(0 0 8px var(--oro))}

/* ===== pureza: se apunta la caída, nunca el día limpio ===== */
.portada-pureza{padding:30px 18px 6px}
.cifra-pureza{display:flex;align-items:flex-end;gap:12px;margin:12px 0 10px}
.cifra-pureza b{font-family:var(--A);font-weight:700;font-size:clamp(64px,22vw,92px);line-height:.84;
  letter-spacing:-.04em;background:linear-gradient(168deg,#fff 20%,#9FD8E8);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cifra-pureza span{font-family:var(--M);font-weight:300;font-size:11px;color:var(--tenue);padding-bottom:10px}
.apunte{font-size:13px;color:var(--tenue);margin:0;max-width:34ch}
.apuntar{display:flex;flex-direction:column;gap:10px}
.cuando{display:flex;gap:8px}
.cuando label{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  border-radius:14px;padding:13px 0;font-size:13.5px;color:var(--tenue);
  background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--hilo2)}
.cuando label:has(input:checked){color:var(--texto);box-shadow:0 0 0 1px var(--base)}
.cuando input{accent-color:var(--base)}
.apuntar input[type="text"]{appearance:none;border:0;border-radius:14px;padding:14px;font:inherit;font-size:14px;
  color:var(--texto);background:rgba(0,0,0,.35);box-shadow:0 0 0 1px var(--hilo2)}
.apuntar input[type="text"]:focus{outline:none;box-shadow:0 0 0 1px var(--base)}
.apuntar .guardar{--c:var(--base)}
.nota-fina{font-family:var(--M);font-weight:300;font-size:9.5px;color:var(--lejos);margin:2px 0 0;line-height:1.7}
.meses{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;align-items:end;height:70px}
.meses i{display:block;height:100%;background:rgba(255,255,255,.05);border-radius:4px;position:relative;overflow:hidden}
.meses i s{position:absolute;left:0;right:0;bottom:0;border-radius:4px;text-decoration:none;
  background:linear-gradient(180deg,var(--fuego),color-mix(in srgb,var(--fuego) 35%,transparent))}
.pie-meses{display:flex;justify-content:space-between;font-family:var(--M);font-weight:300;font-size:9px;
  color:var(--lejos);margin-top:8px}
.linea-caida{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--hilo2)}
.linea-caida .fecha{font-size:13px;flex:none}
.linea-caida .nota{font-family:var(--M);font-weight:300;font-size:10px;color:var(--lejos);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linea-caida form{margin-left:auto}
.quitar{appearance:none;border:0;background:none;cursor:pointer;font:inherit;font-family:var(--M);font-weight:300;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--lejos);padding:6px 4px}
.quitar:hover{color:var(--tenue)}
.volver-area{display:inline-block;margin-bottom:14px;text-decoration:none;font-family:var(--M);font-weight:300;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lejos)}
.volver-area:hover{color:var(--tenue)}

/* ===== progreso: el índice, las áreas y en qué te conviertes ===== */
.portada{padding:26px 18px 0}
.fila-indice{display:flex;gap:14px;align-items:flex-end;margin-top:8px}
.mega{font-size:clamp(72px,24vw,104px);line-height:.82;letter-spacing:-.04em;
  background:linear-gradient(168deg,#fff 20%,var(--oro));-webkit-background-clip:text;
  background-clip:text;color:transparent;display:inline-block}
.lineas{display:flex;flex-direction:column;gap:3px;font-family:var(--M);font-weight:300;
  font-size:10px;color:var(--tenue);padding-bottom:12px}
.portada h1{font-family:var(--A);font-weight:700;font-size:30px;line-height:1.04;
  letter-spacing:-.02em;max-width:13ch;margin-top:12px}
.sangre{margin:14px 0 4px;color:var(--oro)}
.curva{display:block}
.cintas{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--hilo);
  border-bottom:1px solid var(--hilo);margin-bottom:26px}
.cinta{padding:12px 16px;border-right:1px solid var(--hilo);border-bottom:1px solid var(--hilo)}
.cinta:nth-child(2n){border-right:0}
.cinta:nth-child(n+3){border-bottom:0}
.cinta .e{font-family:var(--M);font-weight:300;font-size:7.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lejos);display:block}
.cinta .v{font-size:26px;letter-spacing:-.02em;display:block;margin-top:4px}
.cinta .s{font-family:var(--M);font-weight:300;font-size:8.5px;color:var(--tenue)}
@media (min-width:420px){
  .cintas{grid-template-columns:repeat(4,1fr)}
  .cinta{border-bottom:0}
  .cinta:nth-child(2n){border-right:1px solid var(--hilo)}
  .cinta:last-child{border-right:0}
}
.rango{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:1px solid var(--hilo2)}
.rango:first-of-type{border-top:0}
.rango .esc{width:40px;height:44px;flex:none;display:grid;place-items:center;
  clip-path:polygon(50% 0,100% 24%,100% 70%,50% 100%,0 70%,0 24%);
  background:linear-gradient(170deg,color-mix(in srgb,var(--c) 55%,#111520),#0C0F17)}
.rango .esc b{font-size:15px;color:#fff;letter-spacing:.02em}
.rango .cu{flex:1;min-width:0}
.rango .cu .a{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.rango .cu b{font-size:13.5px;font-weight:600}
.rango .cu i{font-family:var(--M);font-weight:300;font-style:normal;font-size:9px;color:var(--c)}
.rango .barra{display:block;height:7px;border-radius:4px;background:#0A0D15;overflow:hidden;margin-top:7px;
  box-shadow:0 1px 4px rgba(0,0,0,.6) inset}
.rango .barra s{display:block;height:7px;border-radius:4px;background:var(--c);
  box-shadow:0 0 14px -3px var(--c);text-decoration:none}
.rango .xpn{font-family:var(--M);font-weight:300;font-size:8.5px;color:var(--lejos);margin-top:5px;display:block}
.medida{display:block;width:100%;text-align:left;font:inherit;color:inherit;text-decoration:none;
  position:relative;border-top:1px solid var(--hilo);overflow:hidden;color:var(--c)}
.medida:last-of-type{border-bottom:1px solid var(--hilo)}
.medida .fondo{position:absolute;inset:0;opacity:.5;pointer-events:none;display:block}
.medida .dentro{position:relative;padding:15px 3px 13px;display:flex;align-items:flex-end;gap:12px}
.medida .et{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.medida .et s{width:6px;height:6px;background:var(--c);display:block;text-decoration:none;
  transform:rotate(45deg);box-shadow:0 0 8px var(--c)}
.medida .et span{font-family:var(--M);font-weight:500;font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tenue)}
.medida .cif{font-size:44px;line-height:.84;letter-spacing:-.035em;color:var(--texto);display:block}
.medida .cif em{font-family:var(--M);font-weight:300;font-size:10px;font-style:normal;
  color:var(--tenue);margin-left:6px;letter-spacing:0}
.medida .der{margin-left:auto;text-align:right;padding-bottom:3px;flex:none}
.medida .der b{font-size:19px;color:var(--c);letter-spacing:-.02em}
.medida .der span{display:block;font-family:var(--M);font-weight:300;font-size:8.5px;
  color:var(--lejos);margin-top:3px}
.medida .datos{position:relative;display:flex;gap:15px;padding:0 3px 13px;flex-wrap:wrap;row-gap:4px;
  font-family:var(--M);font-weight:300;font-size:9px;color:var(--lejos)}
.calor{display:grid;grid-template-columns:repeat(26,1fr);gap:3px}
.calor i{aspect-ratio:1;border-radius:2px;background:var(--oro)}
.medida-fila{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--hilo2)}
.medida-fila .nm{flex:1;min-width:0}
.medida-fila .nm b{display:block;font-size:13px;font-weight:500}
.medida-fila .nm span{font-family:var(--M);font-weight:300;font-size:8.5px;color:var(--lejos)}
.medida-fila .vl{font-size:19px;letter-spacing:-.02em;text-align:right;flex:none;max-width:45%;
  overflow-wrap:anywhere}
.rec-a{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--hilo2)}
.rec-a .cu{flex:1;min-width:0}
.rec-a .cu b{display:block;font-size:13px;font-weight:500}
.rec-a .cu span{font-family:var(--M);font-weight:300;font-size:9px;color:var(--lejos)}
.rec-a .vv{font-size:19px;letter-spacing:-.02em;text-align:right;flex:none;max-width:45%;overflow-wrap:anywhere}
.bloque-pureza{display:flex;align-items:center;gap:16px;padding:16px;border-radius:19px;text-decoration:none;
  color:inherit;background:linear-gradient(168deg,color-mix(in srgb,var(--c) 18%,var(--alto)),var(--bajo) 74%);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent)}
.cifra-bloque{font-size:46px;line-height:.9;letter-spacing:-.03em;color:var(--c)}
.texto-bloque{font-size:13px;color:var(--texto);line-height:1.5}
.texto-bloque i{font-family:var(--M);font-weight:300;font-style:normal;font-size:9.5px;color:var(--lejos)}

/* la entrada: la única pantalla sin barra */
.entrar .app{display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding-bottom:0}
.entrar .portada{padding:0 18px}
.entrar .portada h1{font-size:32px;margin:12px 0 10px}
.entrar .nota-fina{margin:0}
.entrar form{display:flex;flex-direction:column;gap:14px;margin-top:22px;--c:var(--oro)}
.etiqueta-campo{font-family:var(--M);font-weight:300;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lejos);margin:0 0 -8px}
.entrar input{appearance:none;-webkit-appearance:none;border:0;border-radius:14px;
  padding:15px;font:inherit;font-size:15px;line-height:1.2;color:var(--texto);
  background:rgba(255,255,255,.06);box-shadow:0 0 0 1px var(--hilo2);width:100%}
.entrar input:focus{outline:none;box-shadow:0 0 0 1px var(--oro)}
.entrar input:-webkit-autofill,.entrar input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--texto);
  box-shadow:0 0 0 1px var(--hilo2),0 0 0 1000px #191722 inset}
.entrar .guardar{margin-top:6px}
.error-entrar{font-size:13px;color:#FF8FA8;background:rgba(224,90,120,.14);border-radius:12px;
  padding:11px 13px;margin:0}


/* ===== las piezas de Hoy, tal y como se aprobaron en el prototipo =====
   Copiadas del prototipo que Agustín aceptó, adaptadas a los datos reales:
   lo que allí era una maqueta con cifras escritas a mano aquí lo rellena la
   vista con sus registros. El aspecto no se reinventa. */
.hoja[data-abierta="1"]{transform:none}
.hoja h4{font-family:var(--A);font-weight:700;font-size:19px;letter-spacing:var(--tk);margin-bottom:3px}
.llama .n span{font-family:var(--M);font-weight:500;font-size:8px;letter-spacing:.2em;color:#F2D8B4;margin-top:5px}
.corona h1{font-family:var(--A);font-weight:700;font-size:31px;line-height:1.02;letter-spacing:-.02em;max-width:11ch;margin-bottom:9px}
.corona p{font-size:12.5px;color:var(--tenue);margin:0}
.juego{display:flex;gap:9px;overflow-x:auto;padding:0 18px 4px;margin-bottom:24px;scrollbar-width:none}
.juego::-webkit-scrollbar{display:none}
.riesgo{flex:0 0 172px;padding:13px 14px;border-radius:16px;background:linear-gradient(170deg,color-mix(in srgb,var(--c) 22%,var(--alto)),var(--bajo));
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 0 0 1px color-mix(in srgb,var(--c) 26%,transparent),0 16px 30px -22px #000}
.riesgo .e{font-family:var(--M);font-weight:500;font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--c)}
.riesgo .t{font-size:12.5px;margin:7px 0 9px;color:var(--texto);line-height:1.35}
.riesgo .b{height:6px;border-radius:3px;background:rgba(0,0,0,.45);overflow:hidden}
.riesgo .b s{display:block;height:6px;border-radius:3px;background:var(--c);box-shadow:0 0 12px -2px var(--c);text-decoration:none}
.riesgo .p{font-family:var(--M);font-weight:300;font-size:9px;color:var(--tenue);margin-top:6px;display:block}
.tecla{appearance:none;border:0;padding:12px;cursor:pointer;font:inherit;color:var(--texto);text-align:left;
  border-radius:17px;background:linear-gradient(176deg,var(--alto),var(--bajo) 78%);position:relative;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 0 0 1px rgba(255,255,255,.04),0 14px 26px -20px #000;
  transition:transform .11s cubic-bezier(.3,1.4,.5,1),box-shadow .25s,background .25s}
.tecla:active{transform:scale(.955) translateY(2px)}
.tecla .ico svg{width:18px;height:18px;stroke:var(--tenue);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.tecla .rach{position:absolute;top:11px;right:12px;font-family:var(--M);font-weight:500;font-size:8.5px;color:var(--lejos)}
.tecla[aria-pressed="true"]{background:linear-gradient(176deg,color-mix(in srgb,var(--c) 26%,var(--alto)),var(--bajo) 80%);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent),
             0 0 30px -12px var(--c),0 14px 26px -20px #000}
.tecla[aria-pressed="true"] .ico svg{stroke:#0A0C13}
.tecla[aria-pressed="true"] .rach{color:var(--c)}
.animo{display:flex;gap:8px}
.animo button{flex:1;appearance:none;border:0;border-radius:15px;padding:12px 0;cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(176deg,var(--alto),var(--bajo));box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 0 0 1px rgba(255,255,255,.04);
  transition:transform .11s,box-shadow .25s,background .25s}
.animo button:active{transform:scale(.93)}
.animo svg{width:25px;height:25px;stroke:var(--lejos);fill:none;stroke-width:1.5;stroke-linecap:round;transition:stroke .2s}
.animo button[aria-pressed="true"]{background:linear-gradient(176deg,color-mix(in srgb,var(--mente) 30%,var(--alto)),var(--bajo));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--mente) 50%,transparent),0 0 26px -10px var(--mente)}
.animo button[aria-pressed="true"] svg{stroke:#fff}
.dias26{display:grid;grid-template-columns:repeat(13,1fr);gap:7px;position:relative}
.dias26 .d{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;position:relative;
  transition:transform .5s cubic-bezier(.2,1.5,.4,1);transform:scale(0)}
.dias26 .d s{display:block;border-radius:50%;text-decoration:none}
.sueno{margin:0 18px 26px;padding:18px 16px 16px;border-radius:20px;position:relative;overflow:hidden;
  background:linear-gradient(168deg,color-mix(in srgb,var(--voz) 20%,var(--alto)),var(--bajo) 72%);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 0 0 1px color-mix(in srgb,var(--voz) 22%,transparent),0 22px 44px -28px #000}
.sueno .cab{display:flex;align-items:flex-start;gap:14px}
.sueno .arco{flex:none}
.sueno .arco b{text-align:center;font-family:var(--A);font-weight:700;letter-spacing:-.025em;line-height:1;white-space:nowrap}
.sueno .arco b i{font-family:var(--M);font-weight:300;font-style:normal;font-size:8px;color:var(--tenue);margin-left:2px}
.sueno h3{font-family:var(--A);font-weight:700;font-size:21px;letter-spacing:var(--tk);margin-bottom:5px}
.sueno p{margin:0;font-size:12px;color:var(--tenue)}
.horas{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:15px}
.horas button{appearance:none;border:0;cursor:pointer;border-radius:12px;padding:11px 0;font:inherit;
  font-family:var(--M);font-weight:500;font-size:11px;color:var(--tenue);
  background:rgba(0,0,0,.34);box-shadow:0 0 0 1px var(--hilo2);transition:transform .12s,box-shadow .2s,color .2s,background .2s}
.horas button:active{transform:scale(.9)}
.horas button[aria-pressed="true"]{color:var(--fondo);background:var(--voz);box-shadow:0 0 22px -6px var(--voz)}
.calidad{display:flex;gap:7px;margin-top:9px}
.calidad button{flex:1;appearance:none;border:0;cursor:pointer;border-radius:12px;padding:10px 0;font:inherit;font-size:11.5px;
  color:var(--tenue);background:rgba(0,0,0,.34);box-shadow:0 0 0 1px var(--hilo2);transition:transform .12s,box-shadow .2s,color .2s}
.calidad button:active{transform:scale(.94)}
.calidad button[aria-pressed="true"]{color:var(--texto);box-shadow:0 0 0 1px var(--voz),0 0 20px -8px var(--voz)}
.tecla .mini{display:flex;gap:2px;align-items:flex-end;height:15px;margin-top:9px}
.tecla .mini i{flex:1;border-radius:1px;background:rgba(255,255,255,.10)}
.tecla[aria-pressed="true"] .mini i.on{background:var(--c)}
.tecla .mini i.on{background:color-mix(in srgb,var(--c) 55%,transparent)}
.cifrota p{margin:6px 0 0;font-family:var(--M);font-weight:300;font-size:9.5px;color:var(--c)}
.libro{margin:0 0 12px;padding:15px 16px;border-radius:19px;position:relative;overflow:hidden;
  background:linear-gradient(168deg,color-mix(in srgb,var(--lectura) 20%,var(--alto)),var(--bajo) 74%);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 0 0 1px color-mix(in srgb,var(--lectura) 24%,transparent)}
.libro .top{display:flex;align-items:flex-start;gap:12px;margin-bottom:13px}
.libro .tapa{width:42px;height:58px;border-radius:4px 8px 8px 4px;flex:none;
  background:linear-gradient(140deg,color-mix(in srgb,var(--lectura) 60%,#1A2430),#101820);
  box-shadow:0 8px 18px -8px #000,inset 2px 0 0 rgba(255,255,255,.18)}
.libro h3{font-family:var(--A);font-weight:700;font-size:17px;letter-spacing:var(--tk);line-height:1.1}
.libro .aut{font-family:var(--M);font-weight:300;font-size:9px;color:var(--tenue);margin-top:4px;display:block}
.libro .pct{margin-left:auto;font-family:var(--A);font-weight:700;font-size:26px;letter-spacing:var(--tk);color:var(--lectura)}
.libro .pista{height:11px;border-radius:6px;background:rgba(0,0,0,.4);overflow:hidden;position:relative;
  box-shadow:0 1px 4px rgba(0,0,0,.5) inset}
.libro .pista s{display:block;height:11px;border-radius:6px;text-decoration:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--lectura) 45%,transparent),var(--lectura));
  box-shadow:0 0 18px -3px var(--lectura);transition:width .9s cubic-bezier(.16,1,.3,1)}
.libro .pie2{display:flex;justify-content:space-between;font-family:var(--M);font-weight:300;font-size:9px;color:var(--tenue);margin-top:8px}
.mini-btn{appearance:none;border:0;cursor:pointer;border-radius:11px;padding:9px 13px;font:inherit;font-family:var(--M);
  font-weight:500;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--c);
  background:color-mix(in srgb,var(--c) 14%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent);
  transition:transform .12s}
.mini-btn:active{transform:scale(.93)}
.pista-varios{font-family:var(--M);font-weight:300;font-size:8.5px;color:var(--lejos);align-self:center;margin-left:2px}
.llama .rotulo{font-family:var(--M);font-weight:500;font-size:7.5px;letter-spacing:.24em;color:#F2D8B4;margin-top:-4px;opacity:.9}
.corona h1{overflow-wrap:anywhere}
.riesgo .t{overflow-wrap:anywhere}
.sueno h3,.sueno p{overflow-wrap:anywhere}
.juego,.carrusel,.tabs,.semana-que-viene{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%)}
.juego{padding-bottom:10px}
.tecla:focus-visible,.ficha:focus-visible,button:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.xp s::after{content:"";position:absolute;right:0;top:0;bottom:0;width:14px;border-radius:7px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55))}
.escudos i.on:hover{transform:translateY(-2px)}
.riesgo,.cerca,.cargando{transition:transform .12s}
.riesgo:active{transform:scale(.98)}
.sueno,.libro,.nivel{position:relative}
.sueno::after,.libro::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset}
.dias26 .d{will-change:transform}
.llama .rotulo{font-size:7px;letter-spacing:.2em;margin-top:-2px}
.corona h1{font-size:clamp(22px,7.2vw,30px);line-height:1.04;max-width:none;margin-bottom:7px}
.corona p{font-size:12px;line-height:1.45}
.sueno{padding:16px 15px 15px}
.sueno .cab{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.sueno .arco{width:104px;height:64px;position:relative;display:block}
.sueno .arco svg{width:104px;height:64px;position:absolute;inset:0;overflow:visible}
.sueno .arco b{position:absolute;left:0;right:0;top:58px;transform:translateY(-100%);margin:0;font-size:19px}
.sueno h3{font-size:19px}
.sueno p{font-size:12px;line-height:1.5}
.horas{grid-template-columns:repeat(6,1fr);gap:5px;margin-top:14px}
.horas button{padding:12px 0;font-size:12px}
#ajuste{grid-template-columns:repeat(2,1fr);gap:8px}
.calidad button{min-height:52px;display:grid;place-items:center;text-align:center;font-size:11.5px;line-height:1.3;padding:8px 4px}
.tecla .rach{top:12px;right:12px}
.tecla .mini{margin-top:11px}
.libro .top{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start}
.datos-libro{min-width:0}
.libro h3{font-size:16px;line-height:1.15}
.libro .aut{margin-top:5px}
.libro .pct{align-self:center;font-size:24px}
.libro .pie2{flex-wrap:wrap;gap:4px 12px}
.libro .pie2 span{white-space:nowrap}
.riesgo{flex:0 0 184px}
.sueno,.libro,.riesgo,.cerca,.cargando,.lamina,.cofre,.carta{isolation:isolate}

/* la semana, de lunes a domingo */
/* ===== los dos paneles: el reloj y lo de dentro =====
   Agustín los pidió juntos y breves, y la razón está medida: lo que se le
   quedaba sin contestar casi todos los días eran siempre las mismas medidas, y
   todas tenían en común que vivían en la página de su área y no en Hoy. */

/* El reloj: las cuatro cifras de la muñeca en una rejilla, con su rótulo. */
.reloj-panel,.dentro{padding:15px 15px 16px;border-radius:19px;
  background:linear-gradient(170deg,var(--alto),var(--bajo) 78%);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 0 0 1px var(--hilo2)}
.reloj-panel .rot,.dentro .rot{margin:0 0 12px}
.reloj-panel .teclas{margin:0}

/* Lo de dentro: un renglón por medida, el nombre a la izquierda y los
   escalones a la derecha. En el teléfono el nombre y los escalones no caben en
   la misma línea, así que el renglón se parte y los escalones ocupan el ancho:
   cinco botones de un dedo valen más que cinco apretados al lado del nombre. */
.dentro-fila{padding:11px 0;border-top:1px solid var(--hilo2)}
.dentro-fila:first-of-type{border-top:0;padding-top:0}
.dentro-fila .nb{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.dentro-fila .nb b{font-size:13.5px;font-weight:600}
.dentro-fila .nb i{font-family:var(--M);font-weight:500;font-size:8.5px;
  font-style:normal;color:var(--c);margin-left:auto}
.pasos-dentro{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.pasos-dentro.una{grid-template-columns:1fr}
.pasos-dentro button{appearance:none;border:0;cursor:pointer;border-radius:10px;padding:10px 2px;
  font:inherit;font-family:var(--M);font-weight:400;font-size:9.5px;color:var(--tenue);
  background:rgba(0,0,0,.30);box-shadow:0 0 0 1px var(--hilo2);
  transition:transform .12s,background .2s,color .2s}
.pasos-dentro button:active{transform:scale(.92)}
.pasos-dentro button[aria-pressed="true"]{color:var(--fondo);background:var(--c);font-weight:600;
  box-shadow:0 0 16px -6px var(--c)}

/* La puntuación de sueño dentro del bloque del sueño: es una tecla de las de
   siempre —se corrige por la misma hoja— pero fuera de la rejilla, así que se
   acomoda en fila y ocupa el ancho, igual que la última de una sección impar. */
.sueno>.tecla{width:100%;display:flex;align-items:center;gap:14px}
.sueno>.tecla .arriba{flex:1 1 52%;min-width:0}
.sueno>.tecla .mini{flex:0 1 132px;min-width:68px;margin:0}
.sueno>.tecla .cuenta{position:static;flex:none;margin:0}

/* LA DIVISIÓN entre lo de todos los días y lo demás.
   «Separarlo por lo diario y hasta abajo lo demás con una división, para que no
   abrume pero que lo pueda encontrar ahí.» Es una raya con su rótulo en medio:
   corta la pantalla de verdad —se ve que ahí empieza otra cosa— sin esconder
   nada detrás de un botón, que es lo que él rechazó. */
.division{display:flex;align-items:center;gap:12px;padding:30px 18px 18px}
.division span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--hilo),transparent)}
.division .rot{flex:none;color:var(--lejos)}

/* Las flechas de la tira de la semana. Una flecha apagada se queda puesta en
   vez de desaparecer: si se fuera, el rótulo bailaría de sitio al cambiar de
   semana y costaría encontrarlas otra vez. */
.saltos{display:flex;gap:4px;flex:none}
.saltos a,.saltos i{display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:9px;font-style:normal;font-size:13px;
  text-decoration:none;color:var(--tenue);background:var(--vidrio);
  box-shadow:0 0 0 1px var(--hilo2);transition:color .2s,background .2s}
.saltos a:active{transform:scale(.92)}
.saltos i{opacity:.3}
.semana{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.dia-semana{text-align:center}
.vaso{height:74px;border-radius:11px;background:#0A0D15;position:relative;overflow:hidden;
  box-shadow:0 1px 5px rgba(0,0,0,.6) inset}
.vaso.hoy{box-shadow:0 0 0 1.5px var(--oro),0 1px 5px rgba(0,0,0,.6) inset}
.vaso span{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,#5E5670,#2A2633)}
.vaso.hoy span{background:linear-gradient(180deg,var(--oro),#8B6A1E);
  box-shadow:0 0 20px -4px var(--oro)}
.letra{font-family:var(--M);font-weight:300;font-size:9px;color:var(--lejos);display:block;margin-top:6px}
.letra.hoy{color:var(--oro)}

/* ===== las marcas: la lista entera, filtrable por área ===== */
.tabs a{text-decoration:none;font:inherit;font-family:var(--M);font-weight:300;font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;background:var(--vidrio,rgba(255,255,255,.055));
  color:var(--lejos);border-radius:999px;padding:8px 13px;white-space:nowrap;
  box-shadow:0 0 0 1px var(--hilo2)}
.tabs a[aria-current="page"]{color:var(--fondo);background:var(--texto);box-shadow:none}
.marca-fila{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--hilo2)}
.marca-fila .p{width:4px;height:28px;border-radius:2px;background:var(--c);flex:none;
  box-shadow:0 0 12px -1px var(--c)}
.marca-fila .cu{flex:1;min-width:0}
.marca-fila h4{font-size:12.5px;font-weight:500}
.marca-fila .su{font-family:var(--M);font-weight:300;font-size:8.5px;color:var(--lejos);margin-top:2px;
  display:block;overflow-wrap:anywhere}
.marca-fila .vl{font-size:22px;letter-spacing:-.025em;text-align:right;flex:none;max-width:42%;
  overflow-wrap:anywhere}

/* ===== el domingo: una lámina por lectura ===== */
.revista{padding:0 18px}
.lamina{border-radius:24px;padding:24px 20px 22px;margin-bottom:14px;position:relative;overflow:hidden;
  background:linear-gradient(166deg,color-mix(in srgb,var(--c) 26%,#16141C) 0,#0C0B11 62%);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent),
             0 30px 56px -34px #000}
.lamina .folio{position:absolute;top:-34px;right:4px;font-size:150px;line-height:1;
  color:color-mix(in srgb,var(--c) 13%,transparent);letter-spacing:-.05em}
.lamina .ojo{font-family:var(--M);font-weight:500;font-size:8.5px;letter-spacing:.24em;
  text-transform:uppercase;color:color-mix(in srgb,var(--c) 70%,#fff);position:relative;margin:0}
.lamina h3{font-size:26px;line-height:1.08;letter-spacing:-.025em;margin:12px 0 4px;position:relative;
  max-width:20ch}
.lamina .cierre{font-family:var(--M);font-weight:300;font-size:9.5px;color:var(--tenue);line-height:1.9;
  position:relative;border-top:1px solid var(--hilo2);padding-top:12px;margin-top:16px}

/* ===== los iconos del sprite, medidos por esta hoja =====
   `ui/icono.html` es marcado compartido —SVG propios del proyecto, no piel— y
   deja el tamaño a quien lo usa con una clase. La aplicación anterior se lo da
   con utilidades de Tailwind, que aquí no existen, así que la medida se pone
   desde este lado y una sola vez. */
.app .icono,.hoja .icono{width:18px;height:18px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tecla .ico .icono{width:18px;height:18px;stroke:var(--tenue);transition:stroke .25s}
.tecla[aria-pressed="true"] .ico .icono{stroke:var(--fondo)}
.carta .ico .icono{width:17px;height:17px;stroke:var(--c)}
.rec-a .med .icono{width:15px;height:15px;stroke:var(--c)}

/* las cartas de récord: el carrusel que se desliza */
.carrusel{display:flex;gap:13px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 18px 26px;
  margin:0 -18px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%)}
.carrusel::-webkit-scrollbar{display:none}
.carta{scroll-snap-align:center;flex:0 0 226px;min-height:300px;border-radius:22px;padding:17px;
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(162deg,color-mix(in srgb,var(--c) 40%,#12151F) 0,#0B0E15 58%);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 0 0 1px color-mix(in srgb,var(--c) 34%,transparent),
             0 30px 50px -32px var(--c),0 18px 34px -24px #000}
.carta .cab{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:2}
.carta .ico{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(0,0,0,.36);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent) inset}
.carta .nom{margin-top:auto;font-size:13px;color:var(--tenue);position:relative;z-index:2;overflow-wrap:anywhere}
.carta .val{font-family:var(--A);font-weight:700;font-size:52px;line-height:.9;letter-spacing:-.04em;
  margin:5px 0 6px;position:relative;z-index:2;text-shadow:0 0 30px color-mix(in srgb,var(--c) 55%,transparent);
  overflow-wrap:anywhere}
.carta .val span{font-family:var(--M);font-weight:300;font-size:11px;margin-left:5px;letter-spacing:0}
.carta .meta{font-family:var(--M);font-weight:300;font-size:8.5px;color:var(--tenue);line-height:1.8;
  position:relative;z-index:2}
.carta .meta s{opacity:.5}
.cargando{padding:13px 0;border-top:1px solid var(--hilo)}
.cargando .t{display:flex;align-items:baseline;gap:9px;margin-bottom:8px}
.cargando .t h3{font-size:13px;font-weight:600;flex:1}
.cargando .t b{font-size:20px;color:var(--c);letter-spacing:-.02em}
.cargando .t span{font-family:var(--M);font-weight:300;font-size:9px;color:var(--lejos)}
.medidor{height:9px;border-radius:5px;background:#0A0D15;box-shadow:0 1px 5px rgba(0,0,0,.6) inset;overflow:hidden}
.medidor s{display:block;height:9px;border-radius:5px;text-decoration:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 40%,transparent),var(--c));
  box-shadow:0 0 16px -2px var(--c)}
.cargando .pie2{display:flex;justify-content:space-between;gap:10px;margin-top:8px;
  font-family:var(--M);font-weight:300;font-size:9px;color:var(--lejos)}

/* ===== arreglos de acomodo y piezas nuevas =====
   Lo de aquí es lo que se vio mal al probar la aplicación entera en un
   teléfono de 375 px: nombres que chocaban con su racha, vasos que nunca se
   llenaban y piezas del prototipo que faltaban por construir. */

/* El nombre de una tecla nunca puede meterse debajo de su racha: la racha va
   en la esquina, así que el nombre le reserva su hueco. Antes «Rutina facial»
   y «Movilidad y estiramientos» se encimaban con el «2 d». */
.tecla .nm b{padding-right:26px;white-space:normal;overflow:visible;
  overflow-wrap:break-word;font-size:12.5px;line-height:1.22}
.tecla .nm span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;line-height:1.45;margin-top:3px}
/* La cifra de hoy va en su propio renglón y no encima del nombre. */
.tecla .cuenta{display:block;text-align:right;margin-top:8px}

/* Los vasos de la semana: se llenan con la cobertura del día y el día cerrado
   se corona. Sin esto, un día con dos registros de treinta y tres medidas
   pintaba un dedo de agua invisible. */
.vaso.lleno{box-shadow:0 0 0 1px color-mix(in srgb,var(--oro) 45%,transparent),
  0 1px 5px rgba(0,0,0,.6) inset}
.vaso span{min-height:3px}

/* La línea que dice dónde vive lo que no sale en Hoy. */
.resto{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;padding:12px 14px;border-radius:14px;text-decoration:none;
  background:var(--vidrio,rgba(255,255,255,.055));color:var(--tenue);
  font-family:var(--M);font-weight:300;font-size:9.5px;line-height:1.6}
.resto b{font-weight:500;color:var(--oro);white-space:nowrap}

/* Lo que sostienes: una fila por costumbre, 28 cuadros y su racha viva. */
.cadena{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-top:1px solid var(--hilo2)}
.cadena:first-of-type{border-top:0}
.cadena .nu{width:30px;flex:none;text-align:right;font-size:19px;color:var(--c);
  letter-spacing:-.02em}
.cadena .cu{flex:1;min-width:0}
.cadena .et{display:flex;align-items:baseline;gap:8px;font-size:12.5px;font-weight:600}
.cadena .et i{font-family:var(--M);font-weight:300;font-style:normal;font-size:8.5px;
  color:var(--lejos);margin-left:auto;white-space:nowrap}
.eslabones{display:grid;grid-template-columns:repeat(28,1fr);gap:2px;margin-top:7px}
.eslabones i{aspect-ratio:1;border-radius:1.5px;background:rgba(255,255,255,.08)}
.eslabones i.on{background:var(--c);box-shadow:0 0 6px -2px var(--c)}

/* El duelo del domingo: dos torres, y la diferencia se ve antes de leerse. */
.duelo{display:flex;gap:14px;align-items:flex-end;height:186px;position:relative;
  padding:0 4px;margin-bottom:4px}
.duelo .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;
  height:100%;justify-content:flex-end;min-width:0}
.duelo .torre{width:100%;border-radius:14px 14px 5px 5px;position:relative;
  overflow:hidden;background:linear-gradient(180deg,var(--c),
  color-mix(in srgb,var(--c) 22%,transparent))}
.duelo .torre.baja{background:linear-gradient(180deg,
  color-mix(in srgb,var(--c) 55%,#2A2733),color-mix(in srgb,var(--c) 12%,transparent))}
.duelo .torre::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 42%)}
.duelo .val{font-family:var(--A);font-weight:700;font-size:34px;line-height:1;
  letter-spacing:-.03em}
.duelo .lab{font-family:var(--M);font-weight:300;font-size:8.5px;color:var(--tenue);
  text-align:center;line-height:1.5;overflow-wrap:anywhere}
/* La diferencia va en su propio renglón, encima de las torres. Flotando en el
   centro del bloque se montaba justo encima de las dos cifras. */
.dif{display:block;width:max-content;margin:0 auto 12px;position:relative;
  font-family:var(--M);font-weight:500;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--c);background:rgba(0,0,0,.45);
  border-radius:999px;padding:6px 13px;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent)}
.lamina .bajada{font-size:13px;color:var(--tenue);margin:0 0 20px;position:relative;
  max-width:32ch;overflow-wrap:anywhere}
.lamina.chica{padding:20px}
.lamina.chica h3{font-size:19px;max-width:none}

/* Lo que se movió: una barra por área, hacia arriba o hacia abajo. */
.movida{display:flex;align-items:center;gap:11px;padding:11px 0;text-decoration:none;
  color:var(--texto);border-top:1px solid var(--hilo2)}
.movida:first-of-type{border-top:0}
.movida .nb{font-size:12.5px;font-weight:600;flex:0 0 40%;min-width:0;
  overflow-wrap:anywhere}
.movida .pista{flex:1;height:7px;border-radius:4px;background:#0A0D15;overflow:hidden}
.movida .pista s{display:block;height:7px;border-radius:4px;text-decoration:none;
  background:var(--c);box-shadow:0 0 12px -3px var(--c)}
.movida .df{width:38px;text-align:right;font-size:17px;color:var(--c);
  letter-spacing:-.02em}
.movida.baja .pista s{background:color-mix(in srgb,var(--fuego) 70%,var(--c));
  box-shadow:none}
.movida.baja .df{color:var(--fuego)}

/* El cofre de la semana: lo ganado, sin botones que no hacen nada. */
.cofre{border-radius:22px;padding:22px;text-align:center;position:relative;
  overflow:hidden;background:linear-gradient(168deg,#3A3322,#0D0C12 70%);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 0 0 1px rgba(230,206,155,.32),
  0 26px 46px -30px var(--oro)}
.cofre h3{font-family:var(--A);font-weight:700;font-size:24px;letter-spacing:-.02em;
  margin:12px 0 6px}
.cofre p{font-family:var(--M);font-weight:300;font-size:9.5px;color:#E2D2B0;
  margin:0;line-height:1.8}
.cofre .premio{display:inline-block;margin:10px 4px 0;padding:7px 13px;
  border-radius:999px;font-family:var(--M);font-weight:500;font-size:9px;
  color:#1A1508;background:linear-gradient(180deg,#F6E7C4,var(--oro))}

/* El pie de la mancha de calor. */
.calor+.pie{display:flex;justify-content:space-between;gap:10px;margin-top:9px;
  font-family:var(--M);font-weight:300;font-size:8.5px;color:var(--lejos)}

/* El grano y el barrido de luz de las cartas y las láminas. Estaban en el
   prototipo aprobado y se habían quedado fuera: son lo que hace que una carta
   de récord parezca una carta y no un rectángulo de color. */
.carta::before,.lamina::before,.cofre::before{content:"";position:absolute;inset:0;
  background-image:var(--ruido);opacity:.055;mix-blend-mode:overlay;pointer-events:none}
.carta::after{content:"";position:absolute;top:-58%;left:-30%;width:170%;height:90%;
  transform:rotate(-16deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  animation:barrido 5.5s ease-in-out infinite}
@keyframes barrido{0%,62%{transform:translateX(-62%) rotate(-16deg)}
  100%{transform:translateX(62%) rotate(-16deg)}}
@media (prefers-reduced-motion:reduce){.carta::after{animation:none}}

/* La racha, en el renglón del contexto. Flotando en la esquina obligaba al
   nombre a reservarle un hueco, y aun así «Autocontrol» se partía en dos. */
.tecla .nm b{padding-right:0}
.tecla .ctx{display:flex;align-items:baseline;gap:7px;margin-top:3px;
  font-family:var(--M);font-weight:300;font-size:8.5px;color:var(--lejos);
  line-height:1.45}
.tecla .ctx>span{min-width:0;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.tecla .rach{position:static;top:auto;right:auto;margin-left:auto;font-style:normal;
  font-family:var(--M);font-weight:500;font-size:8.5px;white-space:nowrap}
.tecla[aria-pressed="true"] .rach{color:var(--c)}
/* La cifra de hoy, con su unidad en pequeño al lado. */
.tecla .cuenta u{font-family:var(--M);font-weight:300;font-size:9px;
  text-decoration:none;color:var(--tenue);margin-left:4px;letter-spacing:0}

/* La barra de abajo tapaba el final de la página. */
.app{padding-bottom:104px}

/* Los SVG no se recortan: el punto del final de una curva y los resplandores
   viven pegados al borde de su lienzo, y con `overflow:hidden` —que es lo que
   trae un SVG por defecto— se quedaban a medias. */
svg{overflow:visible}
.curva{display:block;overflow:visible}

/* Una cifra larga no puede partirse en dos renglones dentro de la carta:
   «11023 pasos» se leía «1102 / 3». La cifra se encoge con el ancho. */
.carta .val{font-size:clamp(30px,12vw,52px);word-break:normal;
  overflow-wrap:break-word;hyphens:none}
.carta .nom{font-size:12.5px}

/* ===== la versión de escritorio =====
   Instalada en el Dock de una Mac, la aplicación se abría como una columna de
   teléfono en medio de una pantalla de 27 pulgadas: no es que se viera mal, es
   que no era una aplicación de escritorio. Aquí, y sólo desde 960 px, la misma
   pantalla se reparte en dos columnas y la barra se va arriba.

   Nada de esto cambia el teléfono: son reglas dentro de una consulta de medios,
   y los dos envoltorios de Hoy no existen por debajo de ese ancho. */
.columna-fija,.columna-larga,.rangos-dos,.areas-dos,.marcas-dos{display:contents}

@media (min-width:960px){
  /* LA BARRA, ARRIBA. Una barra fija abajo cruzando una pantalla ancha se lee
     como un móvil estirado; arriba y en pastillas se lee como una aplicación. */
  /* Arriba el desvanecido va por debajo, así que se le da la vuelta: la línea
     de pelo y el `::before` del teléfono sobran aquí. */
  .nav{top:0;bottom:auto;gap:7px;box-shadow:none;
    background:linear-gradient(180deg,var(--fondo) 62%,transparent);
    padding:15px 0 26px}
  .nav::before{content:none}
  .nav a{flex:0 0 auto;flex-direction:row;gap:9px;padding:9px 17px;border-radius:999px;
    font-size:8.5px;transition:color .2s,background .2s}
  .nav a svg{width:17px;height:17px}
  .nav a:hover{color:var(--texto)}
  .nav a[aria-current="page"]{background:var(--vidrio);
    box-shadow:0 0 0 1px rgba(255,255,255,.07) inset}

  .app{max-width:1120px;padding:74px 26px 56px}
  /* La entrada no: un formulario de dos campos estirado a mil píxeles es lo
     más ancho y lo más vacío que puede verse en una pantalla grande. */
  .entrar .app{max-width:420px;padding:0 26px}

  /* HOY, EN DOS COLUMNAS. A la izquierda lo que se mira —la racha, el nivel, lo
     que está en juego y el sueño—, y se queda quieto al desplazar; a la derecha
     lo que se pica, que es lo que crece. */
  .app.hoy{display:grid;grid-template-columns:clamp(330px,33%,404px) 1fr;
    gap:0 32px;align-items:start}
  .columna-fija{display:block;position:sticky;top:74px}
  .columna-larga{display:block;min-width:0}
  .corona{padding:6px 0 6px}
  .nivel{margin:18px 0 22px}
  .columna-fija #riesgos .rot{padding:8px 0 10px}
  /* Los tres riesgos caben a la vez: en el teléfono se pasan de lado porque no
     hay sitio, no porque esté bueno pasarlos. */
  .juego{flex-wrap:wrap;overflow:visible;padding:0;margin-bottom:22px;
    -webkit-mask-image:none;mask-image:none}
  .riesgo{flex:1 1 100%}
  .sueno{margin:0 0 4px}
  .columna-larga section{padding:0;margin-bottom:26px}
  /* Cuatro teclas por fila en vez de dos, que es lo que sobra de ancho. Y la
     última deja de estirarse: con columnas automáticas el hueco del teléfono no
     existe, y una tecla de cuatro anchos sí sería disparejo. */
  .teclas{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:11px}
  .app.hoy .teclas>.tecla:last-child:nth-child(odd){grid-column:auto;display:block}
  .app.hoy .teclas>.tecla:last-child:nth-child(odd) .mini{flex:none}
  .semana{gap:9px}
  .vaso{height:86px}

  /* LAS OTRAS TRES PANTALLAS. No hacen falta columnas: lo que hacía falta era
     que las listas dejaran de ser una tira de un dedo de ancho. */
  .portada{padding:26px 0 0}
  section{padding:0}
  .sangre{margin:16px 0 6px}
  .rangos-dos,
  .areas-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 30px;align-items:start}
  .revista{padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;align-items:start}
  .lamina{margin-bottom:0}
  .marcas-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 30px;align-items:start}
  .cintas{grid-template-columns:repeat(4,1fr)}
  .calor{grid-template-columns:repeat(52,1fr);gap:2.5px}
  /* La vitrina sigue deslizándose a mano, que es lo que le gusta: lo único que
     cambia es que caben más cartas antes de tener que empujar. */
  .carrusel{padding-right:26px}
  /* La cifra de una carta se mide contra el ANCHO DE LA CARTA, que no crece
     con la pantalla: con `12vw` una marca de cinco cifras se partía en dos. */
  .carta .val{font-size:40px}
}

@media (min-width:1280px){
  .app{max-width:1220px}
  .teclas{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
}

/* ===== la revisión del bloque 51 =====
   Nueve cosas que Agustín pidió al entrar a ver la piel nueva. Cada bloque de
   aquí abajo dice cuál y por qué, porque ninguna es una mejora estética: todas
   salen de algo que no se entendía o de algo que no se podía hacer. */

/* LA GOTITA. La cifra dentro de la llama no decía de qué era —«el 26 en la
   gotita no sé bien qué significa»— así que lleva debajo lo que cuenta. */
.que-cuenta{display:block;font-family:var(--M);font-weight:500;font-size:7.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#E8C9A4;margin-top:-6px;
  white-space:nowrap}

/* EL NIVEL ES UNA PUERTA. La cifra tenía un detrás —de qué áreas salió, cuánto
   cuesta el siguiente— y no se podía abrir. */
a.nivel{display:block;text-decoration:none;color:inherit;
  transition:transform .14s,box-shadow .25s}
a.nivel:hover{transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 0 0 1px rgba(255,255,255,.09),0 26px 48px -26px #000}
a.nivel:active{transform:scale(.99)}
.entrar-nivel{display:flex;align-items:center;gap:5px;margin-top:9px;
  font-family:var(--M);font-weight:300;font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lejos)}
.entrar-nivel svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* EL PULSO. La pieza que ocupa el sitio que dejó el sueño, y la única en la que
   REGISTRAR SE VE: el palo del día crece con cada tecla que se pica. */
.pulso{margin:0 18px 26px;padding:16px 16px 14px;border-radius:20px;position:relative;
  background:linear-gradient(168deg,color-mix(in srgb,var(--oro) 14%,var(--alto)),var(--bajo) 74%);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 0 0 1px color-mix(in srgb,var(--oro) 18%,transparent),
             0 22px 44px -28px #000}
.cab-pulso{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:13px}
.cab-pulso h3{font-family:var(--A);font-weight:700;font-size:17px;letter-spacing:var(--tk);
  color:var(--tenue);white-space:nowrap}
.cab-pulso h3 b{font-size:23px;color:var(--oro);text-shadow:0 0 18px rgba(235,211,160,.45)}
.palos{display:flex;align-items:flex-end;gap:2.5px;height:72px;position:relative}
/* La raya de tu media: el palo de hoy se compara con ella sin leer cifras. */
.palos::after{content:"";position:absolute;left:0;right:0;bottom:var(--media,0);height:1px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.26) 0 4px,transparent 4px 9px)}
.palos i{flex:1;height:var(--h,5%);border-radius:2px;background:rgba(255,255,255,.10);
  transition:height .5s cubic-bezier(.16,1,.3,1),background .3s,box-shadow .3s}
.palos i.cerrado{background:linear-gradient(180deg,var(--oro),#8A7442)}
.palos i.hoy{background:linear-gradient(180deg,#FFF3D6,var(--oro));
  box-shadow:0 0 16px -2px var(--oro);outline:1px solid rgba(255,255,255,.28);outline-offset:1px}
.pie-pulso{display:flex;justify-content:space-between;gap:8px;margin-top:11px;
  font-family:var(--M);font-weight:300;font-size:8.5px;color:var(--lejos);flex-wrap:wrap}
.pie-pulso b{font-weight:500;color:var(--tenue)}

/* TAPAR UN HUECO. Los días que se saltó no se pierden: la tira de la semana es
   la puerta, y este aviso dice en qué día estás apuntando. */
.otro-dia{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin:0 18px 6px;padding:13px 15px;border-radius:17px;
  background:linear-gradient(168deg,color-mix(in srgb,var(--oro) 20%,var(--alto)),var(--bajo) 76%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--oro) 30%,transparent)}
.otro-dia h2{font-family:var(--A);font-weight:700;font-size:19px;letter-spacing:var(--tk);
  margin-top:5px}
.otro-dia .mini-btn{flex:none;text-decoration:none}
/* La semana es picable, así que los vasos se comportan como botones. */
a.vaso{display:block;text-decoration:none;transition:transform .12s,box-shadow .25s}
a.vaso:hover{transform:translateY(-2px)}
a.vaso.abierto{box-shadow:0 0 0 1.5px var(--luz),0 1px 5px rgba(0,0,0,.6) inset}
.letra.abierta{color:var(--texto)}

/* EL LIBRO SE PICA. Verlo avanzar sin poder moverlo era lo único de esta
   pantalla que obligaba a salir a otra. */
button.libro{appearance:none;border:0;width:100%;text-align:left;font:inherit;color:inherit;
  cursor:pointer;--c:var(--lectura);transition:transform .12s,box-shadow .25s}
button.libro:active{transform:scale(.985)}
.apuntar-paginas{display:block;margin-top:11px;font-family:var(--M);font-weight:500;font-size:8.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--lectura);text-align:right}

/* LA COLUMNA DE LA IZQUIERDA NO SE CORTA. Era `sticky` sin tope de alto, así
   que lo que no cabía en la pantalla no se alcanzaba nunca. Ahora tiene su
   propio desplazamiento —sin barra a la vista— como último seguro; lo que de
   verdad lo arregló fue pasar el sueño a la otra columna. */
@media (min-width:960px){
  .columna-fija{max-height:calc(100vh - 88px);overflow-y:auto;scrollbar-width:none;
    overscroll-behavior:contain}
  .columna-fija::-webkit-scrollbar{display:none}
  .pulso{margin:0 0 4px}
  .otro-dia{margin:0 0 20px}
}

/* ===== la vitrina: más grande, y con las insignias dentro ===== */
.vitrina .tit h2{font-size:25px}
.vitrina section{margin-bottom:38px}
.vitrina .marca-fila{padding:16px 0}
.vitrina .marca-fila .p{height:36px;width:5px}
.vitrina .marca-fila h4{font-size:15px}
.vitrina .marca-fila .vl{font-size:24px}
.vitrina .cargando{padding:16px 0}
.vitrina-insignias{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px}
.insignia{text-align:center;padding:13px 8px 12px;border-radius:17px;
  background:linear-gradient(176deg,color-mix(in srgb,var(--c) 16%,var(--alto)),var(--bajo) 80%);
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 0 0 1px color-mix(in srgb,var(--c) 26%,transparent),
             0 14px 26px -20px #000}
.insignia b{display:block;font-size:11px;font-weight:600;line-height:1.3;margin-top:9px;
  overflow-wrap:anywhere}
.insignia .cuando{display:block;font-family:var(--M);font-weight:300;font-size:8px;
  color:var(--lejos);margin-top:5px}
.hexa{position:relative;display:inline-grid;place-items:center;width:46px;height:46px;color:var(--c)}
.hexa svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--c) 55%,transparent))}
.hexa .ico{position:relative;display:grid;place-items:center}
.hexa .ico svg{position:static;width:19px;height:19px;filter:none;stroke:var(--c);fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hexa.apagada{color:var(--lejos)}
.hexa.apagada svg{filter:none}
.hexa.apagada .ico svg{stroke:var(--lejos)}
.insignia-cerca{display:flex;align-items:center;gap:13px;padding:12px 0;border-top:1px solid var(--hilo2)}
.insignia-cerca .hexa{width:38px;height:38px;flex:none}
.insignia-cerca .cu{flex:1;min-width:0}
.insignia-cerca .cu b{display:block;font-size:13px;font-weight:500}
.insignia-cerca .barra{display:block;height:6px;border-radius:3px;background:#0A0D15;overflow:hidden;
  margin-top:7px;box-shadow:0 1px 4px rgba(0,0,0,.6) inset}
.insignia-cerca .barra s{display:block;height:6px;border-radius:3px;background:var(--c);
  box-shadow:0 0 12px -3px var(--c);text-decoration:none}
.insignia-cerca .pc{font-size:17px;letter-spacing:-.02em;color:var(--c);flex:none}

/* ===== la pantalla del nivel ===== */
.peldano{display:flex;align-items:center;gap:13px;padding:12px 0;border-top:1px solid var(--hilo2)}
.peldano:first-of-type{border-top:0}
.peldano .num{width:38px;height:42px;flex:none;display:grid;place-items:center;font-size:15px;
  color:var(--lejos);clip-path:polygon(50% 0,100% 24%,100% 70%,50% 100%,0 70%,0 24%);
  background:linear-gradient(170deg,#191D27,#0C0F17)}
.peldano.hecho .num{color:var(--tenue);background:linear-gradient(170deg,#2A2A22,#12130F)}
.peldano.tuyo .num{color:var(--fondo);background:linear-gradient(170deg,#FFF0CC,var(--oro));
  box-shadow:0 0 22px -6px var(--oro)}
.peldano .cu{flex:1;min-width:0}
.peldano .cu b{display:block;font-size:13.5px;font-weight:500}
.peldano.tuyo .cu b{color:var(--oro)}
.peldano .cu span{font-family:var(--M);font-weight:300;font-size:9px;color:var(--lejos)}
.peldano .vl{font-family:var(--A);font-weight:700;font-size:17px;letter-spacing:-.02em;
  color:var(--tenue);flex:none}
.peldano .vl i{font-family:var(--M);font-weight:300;font-style:normal;font-size:8.5px;
  color:var(--lejos);margin-left:4px}
.regla-xp{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.regla-xp>div{padding:15px 14px;border-radius:17px;
  background:linear-gradient(176deg,var(--alto),var(--bajo) 78%);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 0 0 1px var(--hilo2)}
.regla-xp b{display:block;font-size:30px;letter-spacing:-.03em;color:var(--oro)}
.regla-xp span{display:block;font-size:12px;color:var(--tenue);margin-top:6px;line-height:1.45}
/* Lo que el día se lleva. Ocupa el ancho entero y va en otro color porque no es
   una tercera forma de ganar: es la que resta, y leerla igual que las otras dos
   sería esconder justo la mitad de la regla. */
.regla-xp>div.resta{grid-column:1/-1}
.regla-xp>div.resta b{color:var(--brasa,#E8657F)}
.meses i s{background:linear-gradient(180deg,var(--oro),color-mix(in srgb,var(--oro) 35%,transparent))}

/* EL BORDE DE ARRIBA EN EL TELÉFONO.
   Instalada en el iPhone, la primera línea de cada pantalla caía debajo de la
   hora y la batería: la aplicación se declara `viewport-fit=cover` con la barra
   de estado translúcida —que es lo que hace que se vea a pantalla completa— y
   eso mete el contenido DEBAJO de la barra si nadie lo aparta.

   Va en el `body` y NO en `.app`, y eso importa: `.app` ya fija su relleno en
   tres sitios —la base, la entrada y la versión de escritorio— y una regla más
   sobre la misma clase ganaría por ir la última y le comería los 74 px que la
   versión de escritorio necesita para su barra de arriba. El `body` no se lo
   disputa nadie.

   La barra de abajo, la hoja de cantidad y el lienzo de las chispas son fijos,
   así que se siguen midiendo contra la pantalla y no se mueven con esto.

   En el navegador y en la Mac el inset vale cero, así que fuera del teléfono
   instalado esto no cambia nada. */
body{padding-top:env(safe-area-inset-top,0px)}

/* ===== el acomodo, revisado en el teléfono =====
   «veo algunas cosas amontonadas sobre todo en móvil». Lo que se encontró al
   recorrerla entera a 375 px, y que no era cuestión de gusto. */

/* EL RÓTULO PEQUEÑO VOLVÍA A SER GRANDE EN TRES SITIOS.
   `.rot` es la etiqueta diminuta en monoespaciada y versales —9 px— y tres
   reglas de pieza la pisaban sin querer: `.corona p`, `.texto-corona p` y
   `.sueno p` valen todas 0,1,1 y `.rot` sólo 0,1,0, así que ganaban por
   especificidad. El resultado era el mismo rótulo a 12 px CON su espaciado de
   letra de versales: «martes 22 · 3:28 p.m.» ocupaba dos renglones pegados al
   titular, y «Al despertar» y «¿Cómo fue la noche?» engordaban la tarjeta del
   sueño.

   Se arregla de una vez y no pieza a pieza: `p.rot` empata en especificidad con
   las tres y gana por ir la última, así que cualquier rótulo futuro dentro de
   una pieza con estilo de párrafo propio ya nace bien. */
p.rot{font-size:9px;line-height:1.6;letter-spacing:.2em}

/* EL TÍTULO DE SECCIÓN Y SU APOSTILLA SE PISABAN.
   `.tit` es h2 + hilo + apostilla en una fila que no envolvía: con un título
   largo —«En qué te estás convirtiendo», «Medio año de constancia»— el hilo se
   quedaba en cero y la apostilla se partía en dos renglones contra el borde. Al
   envolver, cuando no cabe se va a su propio renglón, pegada a la derecha, y el
   hilo recupera su sitio. */
.tit{flex-wrap:wrap}
.tit s{min-width:16px}
.tit em{white-space:nowrap;margin-left:auto}

/* LA CIFRA DEL ÁREA SE LEÍA ENCIMA DE SU PROPIA CURVA.
   En Progreso, cada área pinta su curva de fondo y su cifra encima. En una
   pantalla ancha la curva queda lejos del número; en el teléfono le pasa por
   debajo, y «Guardián V · 4 314 xp» se cruzaba con la línea.

   La curva no se quita —es la mitad de lo que dice la tarjeta—: se le pone un
   velo que la apaga por la izquierda, justo donde vive el texto, y la deja
   entera por la derecha, que es donde está el dato reciente. */
.medida::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,var(--fondo) 10%,
    color-mix(in srgb,var(--fondo) 78%,transparent) 48%,transparent 76%)}
.medida .dentro,.medida .datos{z-index:1}

/* LOS FILTROS DE ÁREA NUNCA FUERON UNA FILA.
   `.tabs` estaba en la lista de piezas con velo a la derecha —el gesto de «esto
   se desliza»— pero nadie le dijo que fuera una fila: era un bloque, las
   pastillas se envolvían, y el velo apagaba el borde derecho de CADA renglón.
   Se leía como si la lista estuviera rota. Ahora es la fila que el velo estaba
   anunciando. */
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}

/* LAS CARTAS DE RÉCORD, EN EL TELÉFONO.
   La cifra se medía contra el ANCHO DE LA PANTALLA (`12vw`) y la carta mide
   siempre lo mismo, así que en el móvil el número salía más grande que su
   propia carta: «2 h 31 min» se partía en dos renglones y empujaba el resto.
   La carta se ensancha con la pantalla y la cifra se mide contra ella. */
@media (max-width:959.98px){
  .carta{flex:0 0 min(76vw,266px)}
  .carta .val{font-size:clamp(30px,9.4vw,44px)}
}

/* LO QUE SE MOVIÓ ESTA SEMANA, EN UN TELÉFONO.
   El nombre del área tenía el 40 % de la fila y el resto era la barra, así que
   «Carácter y crecimiento personal» caía en tres renglones contra una barra de
   un renglón: la fila entera se leía torcida. Por debajo de 560 px el nombre se
   queda con la fila entera y la barra baja a la suya, que es la misma
   información sin apretarla. */
@media (max-width:559.98px){
  .movida{flex-wrap:wrap;gap:7px 11px}
  .movida .nb{flex:1 1 100%}
  .movida .pista{flex:1 1 auto}
}

/* LA HORA DEL MOMENTO, A LA ALTURA DE SU TÍTULO.
   `.momento` es la hora —«14:00»— al lado del título de la franja, y estaba
   centrada verticalmente contra él. Mientras el título cabía en un renglón no
   se notaba; desde que su apostilla puede bajar a un segundo renglón, la hora
   se quedaba flotando a media altura, debajo de su propio título. Alineada por
   la base, se queda donde empieza el título diga lo que diga debajo. */
.momento{align-items:baseline}
.momento .hh{line-height:1.6}

/* ===== ejercicio: la sesión se apunta donde se mira =====
   «No hay cómo registrar ejercicio, movilidad sí pero ejercicio no». La sesión
   vivía sólo en la aplicación de siempre. Su tarjeta es la misma en Hoy y en la
   página de Salud física, porque no puede haber dos maneras de apuntar lo
   mismo. */
.ejercicio{margin:0 0 12px;padding:15px 16px;border-radius:19px;position:relative;overflow:hidden;
  --c:var(--cuerpo);
  background:linear-gradient(168deg,color-mix(in srgb,var(--cuerpo) 20%,var(--alto)),var(--bajo) 74%);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 0 0 1px color-mix(in srgb,var(--cuerpo) 24%,transparent)}
.ejercicio .top{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.ejercicio .pesa{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:rgba(0,0,0,.32);box-shadow:0 0 0 1px color-mix(in srgb,var(--cuerpo) 34%,transparent) inset}
.ejercicio .pesa svg{width:20px;height:20px;stroke:var(--cuerpo);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.datos-ej{min-width:0}
.ejercicio h3{font-family:var(--A);font-weight:700;font-size:17px;letter-spacing:var(--tk);line-height:1.1}
.ejercicio .aut{font-family:var(--M);font-weight:300;font-size:9px;color:var(--tenue);margin-top:4px;display:block}
.ejercicio .pct{text-align:right;flex:none;line-height:1}
.ejercicio .pct b{font-family:var(--A);font-weight:700;font-size:24px;letter-spacing:var(--tk);color:var(--cuerpo)}
.ejercicio .pct i{display:block;font-family:var(--M);font-weight:300;font-style:normal;font-size:8px;
  color:var(--lejos);margin-top:3px}
.ejercicio .sesiones:not(:empty){margin-top:13px;display:flex;flex-direction:column;gap:7px}
.ejercicio .sesion{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:12px;
  background:rgba(0,0,0,.3);box-shadow:0 0 0 1px var(--hilo2)}
.ejercicio .sesion b{font-size:12.5px;font-weight:600;flex:none}
.ejercicio .sesion span{font-family:var(--M);font-weight:300;font-size:9px;color:var(--tenue);flex:1;min-width:0}
.quitar-sesion{appearance:none;border:0;background:none;cursor:pointer;font:inherit;font-family:var(--M);
  font-weight:300;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lejos);
  padding:4px 2px;flex:none}
.quitar-sesion:hover{color:var(--tenue)}
.pie-ej{display:flex;align-items:center;gap:12px;margin-top:13px}
.pie-ej .mini{display:flex;gap:3px;align-items:center;height:14px;flex:1}
.pie-ej .mini i{flex:1;height:100%;border-radius:2px;background:rgba(255,255,255,.10)}
.pie-ej .mini i.on{background:var(--cuerpo);box-shadow:0 0 10px -3px var(--cuerpo)}
.pie-ej .mini-btn{flex:none;--c:var(--cuerpo)}

/* La hoja de la sesión es más alta que la de una cifra: lleva tres preguntas.
   Con tope de altura y desplazamiento propio, porque en un teléfono corto la
   última —«cómo fue»— se quedaba fuera de la pantalla y no había cómo llegar. */
.hoja-alta{max-height:88vh;overflow-y:auto;scrollbar-width:none}
.hoja-alta::-webkit-scrollbar{display:none}
.hoja-alta .rot{margin:16px 0 8px}
.hoja-alta .rot:first-of-type{margin-top:6px}
.hoja-alta .cifrota b{font-size:clamp(38px,13vw,54px)}
.hoja-alta .cifrota.chica b{font-size:clamp(28px,9vw,38px)}
/* Los tipos de ejercicio los inventa él, así que no caben en una rejilla de
   ancho fijo: se acomodan al nombre y bajan de renglón cuando hace falta. */
.opciones-libres{display:flex;flex-wrap:wrap;gap:7px}
.opciones-libres button{flex:1 1 auto;min-width:96px}
/* «+ otro»: la puerta para dar de alta un tipo sin salir de la hoja. Va
   apagado y con el borde punteado porque no es una opción más que elegir, es
   la que abre el alta; si pesara lo mismo que «Escalada» competiría con ella. */
.opciones-libres button.otro{flex:0 0 auto;min-width:0;background:transparent;
  color:var(--lejos);box-shadow:0 0 0 1px var(--hilo2);border:1px dashed var(--hilo2)}
/* El alta de un tipo dentro de la hoja: nombre tecleado —un nombre no se pica—
   y disciplina picada, que es lo que decide qué te preguntará después. */
#ej-alta input{width:100%;appearance:none;border:0;border-radius:14px;padding:13px 14px;
  font:inherit;font-size:13.5px;color:var(--texto);background:rgba(0,0,0,.35);
  box-shadow:0 0 0 1px var(--hilo2);margin-top:12px}
#ej-alta input::placeholder{color:var(--lejos)}
#ej-alta input:focus{outline:none;box-shadow:0 0 0 1px var(--c)}
/* Cuatro opciones caben en cuatro columnas: en la rejilla de cinco dejaban un
   hueco al final que se lee como una opción que falta. */
.opciones:has(button:nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}

/* ===== las secciones dentro de su área =====
   «El área es el lugar.» Cada sección conserva su forma propia; lo común es el
   apartado, no el contenido. Estas piezas son las que estrenan: un registro de
   un toque, una molestia con su escala, una obra con sus escalones y el alta de
   algo nuevo. */

/* Un registro que se contesta de un toque o abriendo su hoja: la confesión, una
   práctica, una ronda. Dice lo que hay y al lado el botón que lo mueve. */
.registro-corto{display:flex;align-items:center;gap:14px;padding:14px 15px;border-radius:17px;
  margin-bottom:12px;
  background:linear-gradient(168deg,color-mix(in srgb,var(--c) 16%,var(--alto)),var(--bajo) 76%);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent)}
.registro-corto .cu{flex:1;min-width:0}
.registro-corto .cu b{display:block;font-family:var(--A);font-weight:700;font-size:19px;
  letter-spacing:var(--tk);line-height:1.1}
.registro-corto .cu span{display:block;font-family:var(--M);font-weight:300;font-size:9px;
  color:var(--tenue);margin-top:5px;line-height:1.5}
.registro-corto .mini-btn{flex:none}
.registro-corto .mini-btn[disabled]{opacity:.45;pointer-events:none}

/* UNA MOLESTIA. «Para darles seguimiento e irlas corrigiendo»: seguimiento es
   anotar cómo va HOY, así que la escala de 0 a 10 está en la propia fila y se
   pica. No hay color de alarma: lo físico se registra y se describe. */
.molestia{padding:13px 0;border-top:1px solid var(--hilo2)}
.molestia:first-of-type{border-top:0}
.cab-molestia{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.cab-molestia b{display:block;font-size:13.5px;font-weight:600}
.cab-molestia span{display:block;font-family:var(--M);font-weight:300;font-size:9px;
  color:var(--lejos);margin-top:3px}
.cab-molestia div{flex:1;min-width:0}
.escala{display:grid;grid-template-columns:repeat(11,1fr);gap:4px}
.escala button{appearance:none;border:0;cursor:pointer;border-radius:8px;padding:9px 0;font:inherit;
  font-family:var(--M);font-weight:500;font-size:10px;color:var(--tenue);
  background:rgba(0,0,0,.34);box-shadow:0 0 0 1px var(--hilo2);
  transition:transform .12s,background .2s,color .2s}
.escala button:active{transform:scale(.88)}
.escala button[aria-pressed="true"]{color:var(--fondo);background:var(--c);
  box-shadow:0 0 16px -5px var(--c)}

/* UNA OBRA O UNA CANCIÓN, con sus escalones. La acción vive dentro de la cosa
   que mueve: el escalón se pica en su propia fila y no en una lista aparte. */
.obra{padding:12px 0;border-top:1px solid var(--hilo2)}
.obra>b{display:block;font-size:13.5px;font-weight:600;margin-bottom:9px}
.obra>b i{font-family:var(--M);font-weight:300;font-style:normal;font-size:9px;
  color:var(--lejos);margin-left:6px}
.escalones{display:flex;flex-wrap:wrap;gap:6px}
.escalones button{flex:1 1 auto;min-width:88px;appearance:none;border:0;cursor:pointer;
  border-radius:11px;padding:10px 8px;font:inherit;font-size:11.5px;color:var(--tenue);
  background:rgba(255,255,255,.06);box-shadow:0 0 0 1px var(--hilo2);
  transition:transform .12s,background .2s,color .2s}
.escalones button:active{transform:scale(.94)}
.escalones button[aria-pressed="true"]{color:var(--fondo);background:var(--c);font-weight:600;
  box-shadow:0 0 18px -6px var(--c)}

/* DAR DE ALTA ALGO NUEVO. Es lo único de estas pantallas que se teclea, y no
   hay manera de evitarlo: un cuadro necesita un nombre. */
.alta{display:flex;gap:9px;margin-top:16px}
.alta input{flex:1;min-width:0;appearance:none;border:0;border-radius:14px;padding:13px 14px;
  font:inherit;font-size:13.5px;color:var(--texto);background:rgba(0,0,0,.35);
  box-shadow:0 0 0 1px var(--hilo2)}
.alta input::placeholder{color:var(--lejos)}
.alta input:focus{outline:none;box-shadow:0 0 0 1px var(--c)}
.alta .mini-btn{flex:none}

/* Cuando el servidor dice que no se pudo: el motivo, y se va solo. */
.aviso-corto{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:60;
  max-width:min(92vw,420px);padding:13px 16px;border-radius:15px;font-size:13px;
  color:var(--texto);background:#2A1A20;
  box-shadow:0 0 0 1px rgba(224,90,120,.4),0 22px 44px -22px #000}

/* ===== la prueba de usuario del 6 de octubre de 2026 =====
   Dieciséis hallazgos de un recorrido con datos ficticios; lo de aquí abajo
   es la parte de ellos que se arregla con la hoja de estilos. Cada bloque dice
   cuál. */

/* LO QUE HOY ESTÁ EN JUEGO vive en su parcial y se repinta tras cada toque, así
   que el relleno del rótulo va aquí y no escrito en la plantilla. */
#riesgos .rot{padding:22px 18px 10px}

/* LLEGAR ANTES A LA PRIMERA TECLA (D1). En el teléfono la primera captura
   quedaba a casi una pantalla de distancia y la página mide seis: estos
   accesos llevan a cada tramo de la MISMA página —nada se esconde detrás de
   una pestaña— y el del momento del día en que estás va encendido. El salto
   es suave y deja aire arriba para que el título no quede pegado al borde. */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:18px}
.ir-a{display:flex;gap:7px;overflow-x:auto;padding:0 18px 4px;margin:-10px 0 20px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent 100%)}
.ir-a::-webkit-scrollbar{display:none}
.ir-a a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 15px;border-radius:999px;
  text-decoration:none;font-family:var(--M);font-weight:500;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tenue);background:var(--vidrio);box-shadow:0 0 0 1px var(--hilo2);
  transition:color .2s,background .2s,transform .12s}
.ir-a a:active{transform:scale(.95)}
.ir-a a[aria-current="true"]{color:var(--fondo);background:var(--oro);box-shadow:0 0 18px -6px var(--oro)}

/* CONTROLES CÓMODOS PARA EL PULGAR (D2). La regla de la casa pide 44 px o más
   en todo lo que se pica, y aquí había botones de 20, 31, 34 y 41. Un solo
   sitio con la lista entera, para que un control nuevo que se apunte aquí
   nazca bien y no haya que medir pieza por pieza otra vez. */
.mini-btn,.quitar,.quitar-sesion,.horas button,.pasos-dentro button,.escala button,.escalones button,.tabs a{min-height:44px}
.saltos a,.saltos i,.opciones button,.calidad button,.animo button,.registrar-corto,.dar-de-alta,.empezar-obra{min-height:44px}
.resolver-molestia,.abrir-sesion,.abrir-ronda,.abrir-handicap,.abrir-biblia,.ir-a a{min-height:44px}
.mini-btn,.quitar,.quitar-sesion,.tabs a{display:inline-flex;align-items:center;justify-content:center}
.quitar,.quitar-sesion{padding:6px 10px}
.saltos a,.saltos i{width:44px;height:44px;border-radius:12px}
.escala{gap:3px}
.escala button{padding:0 2px}
.horas button{padding:0}
.pasos-dentro button{padding:0 2px;line-height:1.25}
.escalones button{padding:0 10px}
.tabs a{padding:0 14px}
.alta input{min-height:44px}

/* LA MOLESTIA (C2) no cambia de forma, sólo de verdad: su texto lo pone la
   plantilla. Nada aquí. */

/* UNA CINTA O UNA FILA QUE SE PICA (U4): el handicap y cada ronda son botones
   con la misma cara que sus vecinas, más una seña de que se pueden tocar. */
button.cinta,button.rec-a{appearance:none;border:0;font:inherit;color:inherit;text-align:left;
  cursor:pointer;width:100%;background:none}
button.cinta{border-right:1px solid var(--hilo);border-bottom:1px solid var(--hilo)}
.picable{position:relative;transition:transform .12s,background .2s}
.picable:active{transform:scale(.985)}
.picable:hover{background:var(--vidrio)}
.cinta.picable .v{color:var(--c,var(--texto))}
.rec-a .vv u,.cargando .t b u{font-family:var(--M);font-weight:300;font-size:9px;text-decoration:none;
  color:var(--tenue);margin-left:4px;letter-spacing:0}

/* LA BIBLIA (U1): la barra de lo que llevas del libro, debajo del registro. */
.pista-biblia{margin-top:4px}
.pista-biblia .barra{display:block;height:9px;border-radius:5px;background:#0A0D15;overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,.6) inset}
.pista-biblia .barra s{display:block;height:9px;border-radius:5px;text-decoration:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 45%,transparent),var(--c));
  box-shadow:0 0 16px -3px var(--c)}
.pista-biblia .pie2{display:flex;justify-content:space-between;gap:10px;margin-top:7px;
  font-family:var(--M);font-weight:300;font-size:9px;color:var(--lejos)}

/* EL ALTA DE UN LIBRO (U1): título y autor en su renglón, y el botón debajo
   cuando no caben los tres en uno. */
.alta-doble{flex-wrap:wrap}
.alta-doble input{flex:1 1 150px}
.alta-doble .mini-btn{flex:1 1 100%}
@media (min-width:560px){.alta-doble .mini-btn{flex:0 0 auto}}

/* LAS INSIGNIAS CON SU REQUISITO (U5): una fila por escalera, con el peldaño
   que persigues, lo que pide y cuánto llevas. Las enteras van encendidas. */
.insignia-cerca .req,.peldano-insignia .req{display:block;font-family:var(--M);font-weight:300;font-size:9px;
  color:var(--lejos);margin-top:3px;line-height:1.5}
.peldano-insignia{display:flex;align-items:center;gap:13px;padding:12px 0;border-top:1px solid var(--hilo2)}
.peldano-insignia .hexa{width:38px;height:38px;flex:none}
.peldano-insignia .cu{flex:1;min-width:0}
.peldano-insignia .cu b{display:block;font-size:13px;font-weight:500}
.peldano-insignia.completa .cu b{color:var(--c)}
.peldano-insignia .barra{display:block;height:6px;border-radius:3px;background:#0A0D15;overflow:hidden;
  margin-top:7px;box-shadow:0 1px 4px rgba(0,0,0,.6) inset}
.peldano-insignia .barra s{display:block;height:6px;border-radius:3px;background:var(--c);
  box-shadow:0 0 12px -3px var(--c);text-decoration:none}
.peldano-insignia .av{display:block;font-family:var(--M);font-weight:300;font-size:8.5px;color:var(--tenue);
  margin-top:5px}

@media (min-width:960px){
  section[id]{scroll-margin-top:84px}
  .ir-a{padding:0;margin:-6px 0 18px;overflow:visible;flex-wrap:wrap;-webkit-mask-image:none;mask-image:none}
}

/* El NÚMERO del nivel va en su propio `span` para poder repintarlo tras un
   toque, y la regla de la fila —que viste de monoespaciada pequeña a los
   «4 001 xp»— se lo comía: el 7 salía diminuto al lado de «Nivel». Hereda. */
.nivel .fila b span{font:inherit;color:inherit;flex:none;letter-spacing:inherit}

/* ===== el pendiente [695]: las curvas se pican y las marcas se abren =====
   Lo que la prueba de usuario del 6 de octubre dejó para después. */

/* LA BURBUJA DE UN PUNTO: su valor grande y su fecha debajo, flotando encima
   del punto. No se pica —se quita tocando fuera—, por eso no recibe eventos. */
.curva.picable .punto{cursor:pointer;outline:none}
.curva.picable .punto:focus-visible{stroke:var(--oro);stroke-width:2}
.pico{position:absolute;z-index:45;pointer-events:none;padding:8px 12px 7px;border-radius:12px;
  text-align:center;background:#1A1820;color:var(--texto);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 0 0 1px rgba(255,255,255,.08),0 16px 30px -18px #000;
  animation:pico .16s ease-out}
.pico b{display:block;font-family:var(--A);font-weight:700;font-size:18px;letter-spacing:var(--tk);line-height:1}
.pico span{display:block;font-family:var(--M);font-weight:300;font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tenue);margin-top:4px;white-space:nowrap}
.pico::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;
  transform:translateX(-50%) rotate(45deg);background:#1A1820;
  box-shadow:1px 1px 0 rgba(255,255,255,.08)}
@keyframes pico{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* UNA MARCA SE ABRE: la fila, la carta y la del área son enlaces al registro
   que la produjo, con la misma cara que tenían y la seña de que se tocan. */
a.marca-fila,a.rec-a,a.carta{text-decoration:none;color:inherit;transition:transform .12s,background .2s}
a.marca-fila:hover,a.rec-a:hover{background:var(--vidrio)}
a.marca-fila:active,a.rec-a:active,a.carta:active{transform:scale(.985)}
a.marca-fila .cu,a.rec-a .cu{color:var(--texto)}
.abre{font-family:var(--M);font-weight:300;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lejos);white-space:nowrap}

/* ELIMINAR PREGUNTA: el botón que espera el segundo toque se enciende del color
   de lo que resta, para que se vea que ahora sí va en serio. */
button[data-seguro="1"]{color:#fff;background:var(--fuego);box-shadow:0 0 18px -6px var(--fuego)}