/* ==========================================================================
   LIFE OS — PANTALLAS
   --------------------------------------------------------------------------
   Piezas que solo existen en una pantalla concreta. Lo que se repite en
   dos o más vive en app.css: si algo de aquí se usa dos veces, se muda.

   Índice:
     1. Hero de los resúmenes
     2. Trabajo — enfoque, trío de datos, proyectos, gastos
     3. Personal — hoy, destacado, anillos de salud, metas, relaciones
     4. Tiempo — cronómetro y barras
     5. Finanzas — área y filas deslizables
     6. Hábitos — semana y marcado
     7. Ajustes — perfil y grupos
     8. Fichas de detalle
   ========================================================================== */


/* ==========================================================================
   1. HERO DE LOS RESÚMENES
   ========================================================================== */

.hero { padding-block: var(--e-2) var(--e-3); }

.hero__saludo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: var(--e-3);
  font-size: var(--ui-sub);
  font-weight: 500;
  color: var(--tinta-2);
}

.hero__ico {
  width: 21px;
  height: 21px;
  color: var(--ambar);
}

/* El saludo cambia de icono y de color según la franja del día */
.hero__ico--tarde { color: var(--sol-tinta); }
.hero__ico--noche { color: var(--indigo-vivo); }
.hero__ico--vida  { color: var(--salvia); }

.hero__titulo {
  font-size: var(--fs-hero);
  /* Se reserva ancho para que el sol de la acuarela respire a su derecha
     y no quede texto encima del disco */
  max-width: 8.2em;
}

.hero__pie {
  margin-top: var(--e-3);
  font-size: var(--ui-body);
}


/* ==========================================================================
   2. TRABAJO
   ========================================================================== */

.enfoque__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
}

.enfoque__texto {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.enfoque__tarea {
  font-size: var(--ui-sub);
  color: var(--tinta-2);
}

.enfoque__tarea strong { font-weight: 600; color: var(--tinta); }

/* ----- Trío de datos con divisores verticales ------------------------------
   El divisor va en el ::before de cada columna salvo la primera: así una
   columna que se quede sin datos no deja una línea huérfana. */

.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trio--desnudo { padding: 0; box-shadow: none; background: none; }
.trio--apretado { margin-top: var(--e-4); }

.trio__col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* 9 px, no 12: con cifras tabulares «92h 15m» pide 78 px y la columna
     central solo mide 100. Cada píxel de acolchado se lo come al dato. */
  padding-inline: 9px;
  min-width: 0;
}

.trio__col:first-child { padding-left: 0; }
.trio__col:last-child  { padding-right: 0; }

.trio__col + .trio__col::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background-color: var(--linea-suave);
}

.trio__rotulo {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--ui-caption);
  font-weight: 550;
  color: var(--tinta-2);
  white-space: nowrap;
}

.trio__rotulo .ico { width: 14px; height: 14px; color: var(--tinta-3); }

/* ----- El aire del resumen -------------------------------------------------

   Los dos tríos de portada perdían la mitad de su fuerza en marcas que no
   decían nada: un icono por rótulo que repetía la palabra de al lado, un
   filete entre columnas que repetía lo que ya hace la rejilla, y una tercera
   línea con el mismo peso visual que la cifra. Quince marcas entre las dos
   tarjetas para nueve datos.

   Ahora cada vistazo son dos cosas: el nombre en versalita y la cifra
   desnuda. El matiz —el delta, el estado— va pegado debajo, en versalita
   pequeña, como una etiqueta de la cifra y no como un dato más. Ponerlo en la
   misma línea no cabe y está medido: la columna mide 94 px y la cifra más el
   delta piden 104 aunque se les quite el espacio.

   Va con modificador y no en la regla global a propósito: la clase «trio» la
   comparten once bloques de la app. Si esto gusta, se extiende; mientras
   tanto, no se toca lo que no se ha mirado. */

.trio--aire { column-gap: var(--e-3); }

.trio--aire .trio__col {
  gap: 0;
  /* Sin filete que separe, el acolchado deja de hacer falta: el hueco lo pone
     la rejilla, que es quien separaba de verdad. */
  padding-inline: 0;
}

/* El filete entre columnas, fuera. */
.trio--aire .trio__col + .trio__col::before { content: none; }

.trio--aire .trio__rotulo {
  margin-bottom: 5px;
  font-size: var(--ui-caption2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-etiqueta);
  color: var(--tinta-3);
}

/* El apunte, pegado a la cifra. «estado-punto» entra en el mismo trato porque
   en Personal es él quien hace de apunte, con su punto de color. */
.trio--aire .trio__apunte,
.trio--aire .estado-punto {
  margin-top: 2px;
  font-size: var(--ui-caption2);
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--tracking-etiqueta);
  color: var(--tinta-3);
}

.trio--aire .trio__apunte--sube { color: var(--salvia); }

/* El punto baja a 5 px y se recoloca: a 7 pesaba más que la palabra que
   acompaña. */
.trio--aire .estado-punto { gap: 5px; }
.trio--aire .estado-punto::before {
  width: 5px;
  height: 5px;
  margin-top: calc((1.3em - 5px) / 2);
}

/* El pie de un vistazo no puede medir lo mismo que su cifra. «.tenue» solo
   pone color, así que esas terceras líneas heredaban los 17 px del cuerpo y
   quedaban a 1,85 px de la cifra que anotaban: siete tríos de la app con la
   jerarquía plana. Al tamaño del rótulo, que es lo que son. */
.trio__col > .tenue { font-size: var(--ui-caption); line-height: 1.35; }

/* En el trío el dato baja de cuerpo: tres cifras grandes se pisan */
.trio .dato { font-size: clamp(1rem, 0.85rem + 1.4cqi, 1.3rem); }   /* ~19 px */

.dato--pequeno { font-size: var(--ui-title2); }

/* ----- Fila de proyecto con progreso ---------------------------------------- */

.fila__progreso {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  flex: none;
  /* En línea pedía 112 px (43 del porcentaje más 61 de barra) y dejaba 96
     para el nombre, que en «Mantenimiento web» necesita 141. Apilados caben
     en 56 y la barra se sigue leyendo igual de bien: lo que se lee de una
     barra es la proporción, no su longitud absoluta. */
  width: 56px;
}

.fila__pct {
  font-size: var(--ui-footnote);
  font-weight: 600;
  color: var(--tinta-2);
  text-align: right;
  flex: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fila__progreso .barra-prog { width: 100%; flex: none; height: 5px; }

/* ----- Resumen de gastos ------------------------------------------------------- */

.resumen-gasto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
}

.resumen-gasto__texto {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.resumen-gasto__anillo {
  position: relative;
  width: 84px;
  height: 84px;
  flex: none;
}

.resumen-gasto__anillo .anillo__pista,
.resumen-gasto__anillo .anillo__trazo { stroke-width: 10; }

.resumen-gasto__anillo .anillo__cifra { font-size: var(--ui-title3); }

/* El anillo necesita decir CONTRA QUÉ mide: un porcentaje suelto es un
   número sin pregunta. */
.resumen-gasto__pie {
  position: absolute;
  left: 50%;
  bottom: -16px;
  translate: -50% 0;
  white-space: nowrap;
  font-size: var(--ui-caption2);
}

.resumen-gasto { padding-bottom: calc(var(--e-4) + 14px); }


/* ==========================================================================
   3. PERSONAL
   ========================================================================== */

.hoy__titulo { margin-bottom: var(--e-3); }

.hoy__fila {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: var(--e-3);
}

.hoy__anillo {
  position: relative;
  width: 76px;
  height: 76px;
}

.hoy__anillo .anillo__pista,
.hoy__anillo .anillo__trazo { stroke-width: 10; }

.hoy__anillo .anillo__cifra { font-size: var(--ui-title3); }

.hoy__texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.hoy__rotulo {
  font-size: var(--ui-footnote);
  font-weight: 550;
  line-height: 1.25;
  color: var(--tinta);
}

.hoy__texto .dato { font-size: var(--ui-title3); }

.hoy__aparte {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding-left: var(--e-3);
  border-left: 1px solid var(--linea-suave);
  min-width: 0;
}

.hoy__mini {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hoy__minidato {
  font-size: var(--ui-body);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--tinta-fuerte);
}

/* ----- Tarjeta destacada ------------------------------------------------------ */

.destacado { padding: 0; overflow: hidden; }

.destacado__btn {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  padding: var(--e-3) var(--e-4);
  text-align: left;
  transition: background-color var(--d-micro) var(--ease-entrada);
}

.destacado__btn:active { background-color: color-mix(in oklab, var(--tinta) 5%, transparent); }

.destacado__texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.destacado__titulo {
  font-size: var(--ui-body);
  font-weight: 600;
  color: var(--tinta-fuerte);
}

.destacado__pie { font-size: var(--ui-footnote); }

/* ----- Tres anillos de salud ----------------------------------------------------- */

.anillos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-2);
  padding-block: var(--e-5);
}

.anillos__grupo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.anillos__uno {
  position: relative;
  width: 82px;
  height: 82px;
  margin-bottom: 7px;
}

.anillos__uno .anillo__pista,
.anillos__uno .anillo__trazo { stroke-width: 9; }

/* El icono va dentro del anillo, no debajo: el dato manda fuera */
.anillos__ico {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 24px;
  height: 24px;
  color: var(--tinta-2);
}

.anillos__dato {
  font-size: var(--ui-body);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--tinta-fuerte);
  font-variant-numeric: tabular-nums;
}

.anillos__rotulo { font-size: var(--ui-caption); }

/* ----- Metas: barras largas, sin tarjeta que las encierre -------------------- */

.metas {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.meta {
  padding: var(--e-4);
  border-radius: var(--r-lg);
  background-color: var(--lienzo);
  box-shadow: var(--sombra-1);
}

.meta__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: 3px;
}

.meta__titulo {
  font-size: var(--ui-sub);
  font-weight: 600;
  color: var(--tinta-fuerte);
}

.meta__pct {
  font-size: var(--ui-sub);
  font-weight: 700;
  color: var(--salvia);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.meta__pie {
  margin-bottom: var(--e-3);
  font-size: var(--ui-footnote);
  color: var(--tinta-3);
}

.meta--indigo .meta__pct { color: var(--indigo-vivo); }
.meta--indigo .barra-prog__relleno { background-color: var(--indigo-vivo); }
.meta--ambar  .meta__pct { color: var(--ambar); }
.meta--ambar  .barra-prog__relleno { background-color: var(--ambar); }

/* ----- Relaciones ---------------------------------------------------------------- */

.fila__accion {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--r-full);
  background-color: var(--indigo-suave);
  color: var(--indigo-vivo);
  transition: transform var(--d-snappy) var(--muelle-snappy);
}

.fila__accion .ico { width: 17px; height: 17px; }
.fila__accion:active { transform: scale(0.88); }


/* ==========================================================================
   4. TIEMPO
   ========================================================================== */

.crono { padding-bottom: var(--e-5); }

.crono__proyecto {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  padding: 9px 10px;
  margin-bottom: var(--e-5);
  border-radius: var(--r-md);
  background-color: var(--lienzo-2);
  text-align: left;
  transition: transform var(--d-snappy) var(--muelle-snappy);
}

.crono__proyecto:active { transform: scale(0.985); }

.crono__proyecto-texto {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-width: 0;
  font-size: var(--ui-footnote);
}

.crono__proyecto-texto strong {
  font-size: var(--ui-sub);
  font-weight: 600;
  color: var(--tinta-fuerte);
}

.crono__centro {
  position: relative;
  width: 232px;
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0 auto var(--e-5);
  display: grid;
  place-items: center;
}

.anillo--crono { position: absolute; inset: 0; }

.anillo--crono .anillo__pista,
.anillo--crono .anillo__trazo { stroke-width: 9; }

.crono__lectura {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.crono__mandos {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--e-3);
}

.crono__mandos .boton-pildora { width: 100%; }

/* ----- Barras de la semana -------------------------------------------------
   La altura sale de `--v` (0-100) por `scaleY`, no por `height`: animar una
   altura dispara layout en cada frame; escalar va al compositor. */

.barras {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: var(--e-2);
  height: 132px;
  margin-top: var(--e-3);
}

.barras__col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  height: 100%;
}

.barras__barra {
  width: 100%;
  max-width: 26px;
  height: 100%;
  border-radius: var(--r-xs);
  background-color: var(--lienzo-3);
  transform-origin: bottom center;
  transform: scaleY(0);
  transition: transform 0.75s var(--muelle-smooth) calc(var(--d, 0) * 60ms);
}

.barras--dibujadas .barras__barra { transform: scaleY(calc(var(--v) / 100)); }

.barras__col--hoy .barras__barra { background-color: var(--salvia); }

.barras__dia {
  font-size: var(--ui-caption);
  font-weight: 550;
  color: var(--tinta-3);
  flex: none;
}

.barras__col--hoy .barras__dia { color: var(--salvia); font-weight: 700; }


/* ==========================================================================
   5. FINANZAS
   ========================================================================== */

/* (El área dibujada a mano vivía en la vieja pantalla de «Ingresos», que era
   la de Facturas. Esa curva no salía de ningún dato: era decoración. Se fue
   con la pantalla.) */
.area { margin-top: var(--e-4); }

.area svg {
  width: 100%;
  height: 96px;
  overflow: visible;
}

.area__relleno { fill: url(#g-area); }

.area__linea {
  fill: none;
  stroke: var(--salvia);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  /* El trazo se dibuja solo al aparecer: el JS mide su longitud real */
  stroke-dasharray: var(--largo, 900);
  stroke-dashoffset: var(--largo, 900);
  transition: stroke-dashoffset 1.15s var(--ease-salida);
}

.area--dibujada .area__linea { stroke-dashoffset: 0; }

.area--dibujada .area__relleno { animation: area-entra 0.9s var(--ease-entrada) 0.25s both; }

@keyframes area-entra { from { opacity: 0; } to { opacity: 1; } }

.area__meses {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: var(--ui-caption);
  color: var(--tinta-3);
}

/* ----- Pista del gesto ---------------------------------------------------- */

/* ----- Fila deslizable ------------------------------------------------------
   La acción vive DEBAJO de la fila, no al lado: así la fila la tapa en
   reposo y no hace falta recortar nada con overflow lateral. */

.deslizable {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  /* El gesto es horizontal y el vertical sigue siendo del scroll. Sin
     decirlo, el navegador se quedaba el arrastre lateral para su propio
     «volver atrás» y la fila no llegaba a moverse. */
  touch-action: pan-y;
}

.deslizable__accion {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding-right: var(--e-4);
  border-radius: inherit;
  background-color: var(--salvia);
  color: var(--sobre-color);
  font-size: var(--ui-sub);
  font-weight: 600;
}

.deslizable__accion .ico { width: 19px; height: 19px; }

.deslizable .fila {
  position: relative;
  background-color: var(--lienzo);
  transform: translateX(var(--dx, 0px));
  transition: transform var(--d-snappy) var(--muelle-snappy);
}

/* «button.fila:active» pesa (0,2,1) y la regla de arriba (0,2,0): ganaba él
   las dos cosas que aquí importan. Ponía el fondo translúcido —y el verde de
   la acción se leía a través de toda la fila— y cambiaba el desplazamiento
   por un «scale()», así que mientras el botón estaba pulsado la fila no se
   movía ni un píxel. Que es justo todo el rato que dura el arrastre. */
.deslizable button.fila,
.deslizable button.fila:active {
  background-color: var(--lienzo);
  transform: translateX(var(--dx, 0px)) scale(var(--pulsada, 1));
}

/* El hundido del pulsar se queda, pero no mientras se arrastra: una fila
   encogida siguiendo al dedo se lee como un fallo de pintado. */
.deslizable button.fila:active { --pulsada: 0.988; }
.deslizable--arrastrando button.fila:active { --pulsada: 1; }

.deslizable--arrastrando .fila { transition: none; }


/* ==========================================================================
   6. HÁBITOS
   ========================================================================== */

.semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.semana__dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 2px;
  border-radius: var(--r-md);
  background-color: var(--lienzo);
  box-shadow: var(--sombra-1);
  transition: transform var(--d-snappy) var(--muelle-snappy),
              background-color var(--d-rapido) var(--ease-entrada);
}

.semana__dia:active { transform: scale(0.94); }

.semana__letra {
  font-size: var(--ui-caption2);
  font-weight: 600;
  color: var(--tinta-3);
}

.semana__num {
  font-size: var(--ui-sub);
  font-weight: 650;
  color: var(--tinta-fuerte);
  font-variant-numeric: tabular-nums;
}

.semana__dia--hoy { background-color: var(--tinta-fuerte); }
.semana__dia--hoy .semana__letra { color: color-mix(in oklab, var(--lienzo) 70%, transparent); }
.semana__dia--hoy .semana__num   { color: var(--lienzo); }

.progreso-hoy {
  display: flex;
  align-items: center;
  gap: var(--e-4);
}

.progreso-hoy__anillo {
  position: relative;
  width: 108px;
  height: 108px;
  flex: none;
}

.progreso-hoy__anillo .anillo__pista,
.progreso-hoy__anillo .anillo__trazo { stroke-width: 12; }

.progreso-hoy__texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.racha {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--e-2);
  font-size: var(--ui-footnote);
  color: var(--tinta-2);
}

.racha .ico { width: 16px; height: 16px; color: var(--ambar); }
.racha strong { color: var(--tinta-fuerte); font-weight: 650; }

/* ----- Marcar un hábito -----------------------------------------------------
   La casilla es un botón redondo que se rellena con muelle y dibuja el check
   con stroke-dashoffset. El texto se tacha con background-size animado, no
   con `text-decoration` (que no se puede transicionar). */

/* EL DEDO NO MIDE 28 PX. La casilla se dibuja de 28 porque de 44 sería un
   plato dentro de la fila, pero el área que recibe el toque sí tiene que ser
   de 44: se estira con un seudoelemento centrado, que no ocupa sitio en la
   composición ni se ve. La fila entera no sirve como área, porque en Hábitos
   y en Vencimientos la fila abre la ficha y la casilla marca: son dos cosas
   distintas y hacen falta dos áreas. */
.marca-check {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--r-full);
  border: 2px solid var(--linea);
  background-color: transparent;
  color: transparent;
  transition:
    background-color var(--d-rapido) var(--ease-entrada),
    border-color var(--d-rapido) var(--ease-entrada),
    transform var(--d-snappy) var(--muelle-snappy);
}

.marca-check::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  translate: -50% -50%;
}

.marca-check .ico {
  width: 16px;
  height: 16px;
  /* La longitud del trazado real del check suelto (15,85 u). Antes se
     usaba el símbolo `check-en-círculo` dentro de un círculo verde: el
     resultado era un anillo roto dentro de otro círculo. */
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  transition: stroke-dashoffset 0.34s var(--ease-salida);
}

/* La línea de tiempo marca `.linea__hito--hecho`, no `.fila--hecha`: sin
   esta segunda mitad el botón que acabas de tocar se quedaba en aro vacío. */
.fila--hecha .marca-check,
.linea__hito--hecho .marca-check,
.toma--hecha .marca-check {
  background-color: var(--salvia);
  border-color: var(--salvia);
  color: var(--sobre-color);
}

.fila--hecha .marca-check .ico,
.linea__hito--hecho .marca-check .ico,
.toma--hecha .marca-check .ico { stroke-dashoffset: 0; }

.marca-check--late { animation: late 0.42s var(--muelle-bouncy); }

@keyframes late {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* Tachado animado: el trazo crece de 0 a 100 % del ancho del texto */
.lista--habitos .fila__titulo {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 58%;
  background-size: 0% 1.5px;
  transition: background-size 0.34s var(--ease-salida),
              color var(--d-rapido) var(--ease-entrada);
}

.lista--habitos .fila--hecha .fila__titulo {
  color: var(--tinta-3);
  background-size: 100% 1.5px;
}

.fila__racha {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--ui-caption);
  color: var(--tinta-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fila__racha .ico { width: 13px; height: 13px; color: var(--ambar); }


/* ==========================================================================
   7. AJUSTES
   ========================================================================== */

.perfil {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.perfil__texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
  font-size: var(--ui-footnote);
}

.perfil__nombre {
  font-size: var(--ui-body);
  font-weight: 650;
  color: var(--tinta-fuerte);
}

.grupo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

/* Cabecera pegajosa: se queda bajo la barra de navegación mientras su
   sección está en pantalla y la empuja la siguiente, como en Ajustes o
   Contactos de iOS. `sticky` mide contra el ancestro con scroll, que aquí
   es `.scroll`; si algún día un contenedor intermedio recibe `overflow`,
   este efecto muere en silencio. */
.grupo__titulo {
  position: sticky;
  top: calc(var(--alto-estado) + var(--alto-nav) - 4px);
  z-index: 6;
  margin-inline: calc(var(--margen) * -1);
  padding: 8px calc(var(--margen) + 4px);
  font-size: var(--ui-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-etiqueta);
  color: var(--tinta-3);
}

/* Misma receta que la cabecera del cajón: el velo en una lámina detrás para
   poder desvanecerlo POR DEBAJO de su borde. Aquí sí sangra a todo el ancho —una cabecera
   de lista es de borde a borde en iOS, como en Ajustes o Contactos— pero se
   difumina al final en vez de cortarse, que era lo que la hacía parecer una
   caja gris flotando sobre el contenido. */
.grupo__titulo::before {
  content: '';
  position: absolute;
  inset: -12px 0 -16px;
  z-index: -1;
  background-color: color-mix(in oklab, var(--papel) 68%, transparent);
  /* La falda cae FUERA de la caja: 12 px por arriba, para que no haya
     costura entre este vidrio y el de la barra de navegación, y 16 por
     abajo, para que el contenido no se corte bajo la cabecera sino que se
     evapore. Dentro de su propia caja la máscara es opaca del todo: meter
     el degradado por dentro desvanecía el pie de las letras y, peor, dejaba
     leer nítida la fila que pasaba por debajo. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100%);
}

/* El vidrio, solo mientras esté pegada. Ver el porqué en app.css, junto a
   .cajon__grupo: son la misma receta. */
.grupo__titulo.pegada::before {
  -webkit-backdrop-filter: var(--cristal-filtro-corto);
  backdrop-filter: var(--cristal-filtro-corto);
}

.apariencia { padding: var(--e-1) 0 var(--e-3); }

.apariencia__pie {
  margin-top: var(--e-2);
  padding-left: 2px;
  font-size: var(--ui-caption);
}

.pie-version {
  margin-top: var(--e-2);
  text-align: center;
  font-size: var(--ui-caption);
}


/* ==========================================================================
   8. FICHAS DE DETALLE
   ========================================================================== */

.ficha-cabeza {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-block: var(--e-2);
}


/* ==========================================================================
   LA PORTADA DE UN PROYECTO
   --------------------------------------------------------------------------
   Un proyecto tenía la misma cabecera plana que un gasto. Ahora tiene cara: una
   portada a sangre que sube hasta el borde de la pantalla y por debajo de la
   cual flotan las dos cápsulas del chrome.

   El problema de cualquier portada es el mismo: poner texto encima sin saber
   qué hay debajo. La solución de manual es un velo negro, y mata el color de la
   imagen. Aquí son CUATRO CAPAS y ninguna es un velo:

     1. el fondo, nítido, a toda la caja;
     2. una lámina de vidrio esmerilado que desenfoca LO QUE TIENE DETRÁS —o sea
        una copia borrosa de la propia imagen, gratis— recortada con una máscara
        de degradado para que arriba no exista y abajo sea total;
     3. el tinte de esa misma lámina, del color del papel, que sube el contraste
        sin cambiar el tono de lo que hay debajo. En tema oscuro «--papel» es
        casi negro, así que la misma regla oscurece en vez de aclarar;
     4. el texto, que va en «--tinta-fuerte» y por tanto se da la vuelta solo.

   El resultado es que la mitad de arriba enseña la imagen entera y la de abajo
   es el mismo color, desenfocado, con el texto encima. No hay ningún negro. */

.caratula {
  position: relative;
  /* A sangre: deshace el acolchado del lienzo por los tres lados */
  margin:
    calc((var(--alto-estado) + var(--alto-nav) + var(--e-2)) * -1)
    calc(var(--margen) * -1)
    0;
  min-height: 252px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--margen);
  padding-top: calc(var(--alto-estado) + var(--alto-nav));
  overflow: hidden;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  isolation: isolate;
}

.caratula__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: var(--lienzo-3);
  background-size: cover;
  background-position: center;
}

/* La lámina esmerilada. El desenfoque es de FONDO, así que lo que difumina es
   la portada misma: no hay que duplicar la imagen ni pintar nada encima. */
.caratula__esmerilado {
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-backdrop-filter: blur(var(--portada-borroso, 18px)) saturate(118%);
  backdrop-filter: blur(var(--portada-borroso, 18px)) saturate(118%);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in oklab, var(--papel) 34%, transparent) 46%,
    color-mix(in oklab, var(--papel) 82%, transparent) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 22%, #000 62%);
  mask-image: linear-gradient(to bottom, transparent 22%, #000 62%);
}

.caratula__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.caratula .monograma { margin-bottom: 2px; }

.caratula__cliente {
  font-size: var(--ui-sub);
  color: var(--tinta-2);
}

/* El botón de cambiarla: arriba a la derecha no, que ahí está la acción de
   editar. Abajo a la derecha, donde no pisa nada y se encuentra solo. */
.caratula__cambiar {
  position: absolute;
  right: var(--margen);
  bottom: var(--margen);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  color: var(--tinta-fuerte);
  background-color: var(--cristal-fuerte);
  border: 0.5px solid var(--cristal-borde);
  box-shadow:
    inset 0 0.5px 0 var(--cristal-filo),
    0 0 0 0.5px color-mix(in oklab, var(--tinta) 9%, transparent),
    0 2px 6px color-mix(in oklab, var(--tinta) 10%, transparent);
  -webkit-backdrop-filter: var(--cristal-filtro-corto);
  backdrop-filter: var(--cristal-filtro-corto);
  transition: transform var(--d-snappy) var(--muelle-snappy);
}

.caratula__cambiar:active { transform: scale(0.90); }
.caratula__cambiar .ico { width: 18px; height: 18px; }

/* ----- La galería -----------------------------------------------------------
   No hay ni un mapa de bits en todo el proyecto, y no puede haberlo: esto tiene
   que abrirse con doble clic desde el disco, sin servidor y sin red. Así que
   las portadas son atmósferas hechas de degradados, con el mismo grano que el
   resto de la app. Pesan cero y se dan la vuelta con el tema.
   Y quien quiera la suya, la sube: eso sí funciona con file://. */

.caratula__fondo[data-fondo="amanecer"] {
  background-image:
    radial-gradient(88% 70% at 78% 8%, color-mix(in oklab, var(--sol) 92%, transparent), transparent 66%),
    radial-gradient(70% 58% at 12% 88%, color-mix(in oklab, var(--ambar) 30%, transparent), transparent 62%),
    linear-gradient(168deg, color-mix(in oklab, var(--sol) 34%, var(--papel)), var(--papel)),
    var(--grano);
}

.caratula__fondo[data-fondo="bruma"] {
  background-image:
    radial-gradient(96% 64% at 22% 4%, color-mix(in oklab, var(--bruma) 78%, transparent), transparent 70%),
    radial-gradient(64% 52% at 88% 76%, color-mix(in oklab, var(--indigo) 22%, transparent), transparent 64%),
    linear-gradient(160deg, color-mix(in oklab, var(--bruma) 26%, var(--papel)), var(--papel)),
    var(--grano);
}

.caratula__fondo[data-fondo="bosque"] {
  background-image:
    radial-gradient(84% 72% at 16% 10%, color-mix(in oklab, var(--salvia) 68%, transparent), transparent 66%),
    radial-gradient(72% 60% at 92% 92%, color-mix(in oklab, var(--salvia) 34%, transparent), transparent 60%),
    linear-gradient(150deg, color-mix(in oklab, var(--salvia) 20%, var(--papel)), var(--papel)),
    var(--grano);
}

.caratula__fondo[data-fondo="tinta"] {
  background-image:
    radial-gradient(92% 68% at 84% 6%, color-mix(in oklab, var(--indigo) 72%, transparent), transparent 68%),
    radial-gradient(66% 56% at 6% 82%, color-mix(in oklab, var(--indigo) 30%, transparent), transparent 62%),
    linear-gradient(172deg, color-mix(in oklab, var(--indigo) 22%, var(--papel)), var(--papel)),
    var(--grano);
}

.caratula__fondo[data-fondo="arcilla"] {
  background-image:
    radial-gradient(86% 66% at 70% 12%, color-mix(in oklab, var(--rojo) 52%, transparent), transparent 66%),
    radial-gradient(70% 58% at 10% 86%, color-mix(in oklab, var(--sol) 62%, transparent), transparent 64%),
    linear-gradient(164deg, color-mix(in oklab, var(--rojo) 14%, var(--papel)), var(--papel)),
    var(--grano);
}

.caratula__fondo[data-fondo="lino"] {
  background-image:
    radial-gradient(90% 68% at 30% 6%, color-mix(in oklab, var(--lienzo-3) 92%, transparent), transparent 70%),
    radial-gradient(64% 54% at 86% 84%, color-mix(in oklab, var(--bruma) 20%, transparent), transparent 62%),
    linear-gradient(158deg, var(--lienzo-2), var(--papel)),
    var(--grano);
}

.ficha-cabeza .monograma { margin-bottom: var(--e-2); }

/* La cabeza es una columna estirada, así que un sello suelto se iba a todo
   el ancho y parecía una barra. Que se ajuste a su palabra. */
.ficha-cabeza .sello { align-self: flex-start; }

.ficha-cabeza__titulo { font-size: var(--fs-large); }

.ficha-cabeza--centrada {
  align-items: center;
  text-align: center;
  gap: var(--e-2);
}

.ficha-cabeza__cifra {
  font-size: var(--fs-hero);
  font-variant-numeric: tabular-nums;
}

.acciones-ficha {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-top: var(--e-1);
}

.acciones-ficha .boton-pildora { width: 100%; padding-block: 14px; }

/* ----- Tarjeta de tema: la acuarela vuelve, en pequeño ---------------------- */

.tema {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.tema::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 80% at 88% 18%, color-mix(in oklab, var(--salvia) 22%, transparent), transparent 70%),
    radial-gradient(70% 60% at 100% 100%, color-mix(in oklab, var(--bruma) 34%, transparent), transparent 72%);
}

.tema__titulo {
  margin-bottom: 6px;
  font-size: var(--fs-large);
}

.tema__pie {
  max-width: 24ch;
  font-size: var(--ui-sub);
}

.tema__progreso {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: var(--e-5) 0 var(--e-2);
  font-size: var(--ui-footnote);
}

.tema__cifra {
  font-size: var(--ui-title3);
  font-weight: 650;
  color: var(--salvia);
}

/* ----- Tarjetas de repaso ---------------------------------------------------- */

.lista--tarjetas .fila { align-items: flex-start; }

.lista--tarjetas .fila__titulo {
  white-space: normal;
  line-height: 1.35;
}

.dificultad {
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: var(--ui-caption);
  font-weight: 600;
  white-space: nowrap;
  flex: none;
}

.dificultad--dificil { background-color: var(--ambar-suave); color: var(--ambar); }
.dificultad--media   { background-color: var(--indigo-suave); color: var(--indigo-vivo); }
.dificultad--facil   { background-color: var(--salvia-suave); color: var(--salvia); }

/* ----- Lectura actual ---------------------------------------------------------- */

.lectura {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
}

.lectura__texto { min-width: 0; }

.lectura__titulo {
  margin: 2px 0 1px;
  font-size: var(--ui-title2);
}


/* ==========================================================================
   9. PANTALLAS NUEVAS
   --------------------------------------------------------------------------
   Avisos, Buscar, Perfil, ficha de hábito y portada de bienvenida.
   ========================================================================== */

/* ----- Campo de búsqueda: cristal, como el resto del chrome --------------- */

.campo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 11px var(--e-3);
  border-radius: var(--r-md);
  background-color: var(--cristal-fuerte);
  -webkit-backdrop-filter: var(--cristal-filtro-corto);
  backdrop-filter: var(--cristal-filtro-corto);
  border: 0.5px solid var(--cristal-borde);
  box-shadow:
    inset 0 0.5px 0 var(--cristal-filo),
    var(--sombra-1);
  transition: box-shadow var(--d-rapido) var(--ease-entrada);
}

.campo:focus-within {
  box-shadow:
    inset 0 0.5px 0 var(--cristal-filo),
    0 0 0 3px color-mix(in oklab, var(--indigo-vivo) 22%, transparent),
    var(--sombra-1);
}

.campo__ico { color: var(--tinta-3); }

.campo__input {
  flex: 1;
  min-width: 0;
  font-size: var(--ui-body);
  color: var(--tinta);
  background: none;
  border: 0;
  outline: none;
}

.campo__input::placeholder { color: var(--tinta-3); }

/* Safari pinta su propia cruz en los input de tipo search */
.campo__input::-webkit-search-cancel-button { display: none; }

.campo__limpiar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: var(--r-full);
  background-color: var(--lienzo-3);
  color: var(--tinta-2);
}

.campo__limpiar .ico { width: 13px; height: 13px; }
.campo__limpiar[hidden] { display: none; }

/* El resultado dice de qué sección viene */
.fila__origen {
  font-size: var(--ui-caption2);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-3);
  white-space: nowrap;
}

/* ----- Avisos ------------------------------------------------------------- */

.fila--sinleer .fila__titulo { font-weight: 650; color: var(--tinta-fuerte); }

.fila__punto {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--r-full);
  background-color: var(--indigo-vivo);
}

.fila__cuando {
  font-size: var(--ui-caption);
  color: var(--tinta-3);
  white-space: nowrap;
  flex: none;
}

/* ----- Perfil ------------------------------------------------------------- */

.monograma--enorme {
  width: 84px;
  height: 84px;
  border-radius: 26px;
  font-size: var(--ui-title1);
}

button.perfil { width: 100%; text-align: left; }

.boton-pildora--peligro {
  background-color: var(--rojo-suave);
  color: var(--rojo);
}

/* ----- Ficha de hábito ----------------------------------------------------- */

.racha-grande {
  display: flex;
  align-items: center;
  gap: var(--e-4);
}

.racha-grande__cifra {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  color: var(--ambar);
}

.racha-grande__cifra .ico { width: 30px; height: 30px; }
.racha-grande__cifra .dato { color: var(--ambar); font-size: var(--fs-dato); }

.racha-grande__rotulo {
  font-size: var(--ui-body);
  font-weight: 650;
  color: var(--tinta-fuerte);
}

/* Mapa de cumplimiento: 5 semanas × 7 días. Las columnas son los días de
   la semana, así que se lee en vertical igual que un calendario. */
.rejilla-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: var(--e-3);
}

.rejilla-dias span {
  aspect-ratio: 1;
  border-radius: 7px;
  background-color: var(--lienzo-3);
}

.rejilla-dias .hecho { background-color: var(--salvia); }
.rejilla-dias .medio { background-color: color-mix(in oklab, var(--salvia) 42%, var(--lienzo-3)); }
.rejilla-dias .hoy   { box-shadow: 0 0 0 2px var(--tinta-fuerte); }

.rejilla-leyenda {
  display: flex;
  justify-content: space-between;
  margin-top: var(--e-2);
  font-size: var(--ui-caption);
}

/* ----- Fila con dos zonas pulsables ---------------------------------------
   El cuerpo abre la ficha y la casilla marca. Dos botones hermanos, no uno
   dentro de otro: un <button> dentro de otro <button> es marcado inválido y
   el navegador lo desanida por su cuenta. */

.fila--doble {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0;
}

.fila__principal {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex: 1;
  min-width: 0;
  padding: 11px 2px;
  border-radius: var(--r-sm);
  text-align: left;
  color: inherit;
  transition: background-color var(--d-micro) var(--ease-entrada),
              transform var(--d-snappy) var(--muelle-snappy);
}

.fila__principal:active {
  background-color: color-mix(in oklab, var(--tinta) 5%, transparent);
  transform: scale(0.988);
}

/* ----- Portada de bienvenida ------------------------------------------------ */

.vista--portada { background-color: var(--papel); }

.portada {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 0 var(--margen) calc(var(--alto-indicador) + var(--e-8));
  overflow: hidden;
}

.portada__cielo {
  position: absolute;
  inset: 0 0 auto 0;
  height: 62%;
  pointer-events: none;
}

.portada__cielo svg { width: 100%; height: 100%; }

.portada__cuerpo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

/* En su sitio y no flotando. `.marca` es la de la barra de arriba, y ahí va
   absoluta y centrada con translate. Reusada aquí arrastraba las dos cosas: se
   salía del flujo y caía en el top:0 de `.portada__cuerpo`, que empieza a 382
   píxeles —justo donde empieza el titular—, así que «LIFE OS» se le montaba
   encima a «Tu sistema.». Esto no se había visto nunca porque la pantalla
   entera estaba rota por la colisión de `.portada` con la tapa de los libros:
   un fallo tapaba al otro. */
.marca--portada {
  position: static;
  translate: none;
  align-self: start;
  margin-bottom: var(--e-2);
}

.portada__titulo {
  font-size: var(--fs-hero);
  line-height: 1.08;
}

.portada__pie {
  max-width: 26ch;
  font-size: var(--ui-body);
}

.portada__acciones {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-top: var(--e-4);
}

.portada__acciones .boton-pildora { width: 100%; padding-block: 15px; font-size: var(--ui-body); }

.portada__legal {
  text-align: center;
  font-size: var(--ui-caption);
}


/* ==========================================================================
   10. HOJA MODAL Y FORMULARIOS
   --------------------------------------------------------------------------
   La hoja sube con muelle y la app retrocede detrás con esquinas
   redondeadas: en iOS eso es lo que dice «hay algo encima de todo».
   ========================================================================== */

.telon {
  position: absolute;
  inset: 0;
  z-index: var(--z-telon);
  background-color: rgb(20 17 12 / 0.32);
  opacity: 0;
  transition: opacity var(--d-medio) var(--ease-entrada);
}

.telon[hidden] { display: none; }
.telon--visible { opacity: 1; }

.hoja {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-hoja);
  max-height: 88%;
  display: flex;
  flex-direction: column;
  padding: 10px var(--margen) calc(var(--alto-indicador) + var(--e-4));
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  /* Cristal fuerte: debajo hay contenido y aquí se escribe */
  background-color: var(--cristal-fuerte);
  -webkit-backdrop-filter: var(--cristal-filtro);
  backdrop-filter: var(--cristal-filtro);
  border-top: 0.5px solid var(--cristal-borde);
  box-shadow:
    inset 0 0.5px 0 var(--cristal-filo),
    0 -10px 44px -14px rgb(20 17 12 / 0.34);
  transform: translateY(100%);
  transition: transform var(--d-bouncy) var(--muelle-bouncy);
  will-change: transform;
}

.hoja[hidden] { display: none; }
.hoja--abierta { transform: translateY(0); }
.hoja--arrastrando { transition: none; }

.hoja__asa {
  width: 38px;
  height: 5px;
  margin: 0 auto 8px;
  border-radius: var(--r-full);
  background-color: var(--linea);
  flex: none;
}

.hoja__cabeza {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--e-2);
  padding-bottom: var(--e-3);
  flex: none;
}

.hoja__titulo {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces);
  font-size: var(--ui-title2);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--tinta-fuerte);
  text-align: center;
  white-space: nowrap;
  /* Que ceda el título y no los botones: con uno largo, «Guardar» se salía
     por el canto derecho. La columna del medio es «auto», así que crecía
     hasta empujar a los dos «1fr» de los lados por debajo de su contenido. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hoja__accion { white-space: nowrap; }

.hoja__accion {
  font-size: var(--ui-body);
  font-weight: 400;
  color: var(--indigo-vivo);
  text-align: left;
  transition: opacity var(--d-micro) var(--ease-entrada);
}

.hoja__accion:active { opacity: 0.4; }
.hoja__accion--fuerte { font-weight: 650; text-align: right; }

.hoja__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding-bottom: var(--e-2);
}

.hoja__cuerpo::-webkit-scrollbar { display: none; }

/* ----- Campos de formulario ------------------------------------------------
   Agrupados en una tarjeta, con separador sangrado: el patrón de
   formulario de iOS, no el de la web. */

.grupo-campos {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  background-color: var(--lienzo-2);
  overflow: hidden;
}

.campo-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px var(--e-3);
}

.campo-form + .campo-form::before {
  content: "";
  position: absolute;
  left: var(--e-3);
  right: 0;
  top: 0;
  height: 1px;
  background-color: var(--linea-suave);
}

.campo-form--fila {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: 50px;
}

.campo-form__rotulo {
  font-size: var(--ui-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-3);
}

.campo-form--fila .campo-form__rotulo {
  font-size: var(--ui-sub);
  font-weight: 500;
  letter-spacing: var(--tracking-ui);
  text-transform: none;
  color: var(--tinta);
}

.campo-form__input,
.campo-form__area {
  width: 100%;
  font-size: var(--ui-body);
  color: var(--tinta-fuerte);
  background: none;
  border: 0;
  outline: none;
  resize: none;
}

.campo-form__input::placeholder,
.campo-form__area::placeholder { color: var(--tinta-3); }

.campo-form__area { min-height: 76px; line-height: 1.45; }

.campo-form__valor {
  font-size: var(--ui-body);
  font-weight: 550;
  color: var(--indigo-vivo);
  white-space: nowrap;
}

/* ----- Contador de pasos (−/+) ----------------------------------------------- */

.pasos {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-full);
  background-color: var(--lienzo-3);
  flex: none;
}

.pasos button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  background-color: var(--lienzo);
  color: var(--tinta-fuerte);
  font-size: var(--ui-body);
  font-weight: 600;
  box-shadow: var(--sombra-1);
  transition: transform var(--d-snappy) var(--muelle-snappy);
}

.pasos button:active { transform: scale(0.88); }

.pasos__valor {
  min-width: 3.2em;
  text-align: center;
  font-size: var(--ui-sub);
  font-weight: 650;
  color: var(--tinta-fuerte);
  font-variant-numeric: tabular-nums;
}

/* ----- Selector de opción en fila -------------------------------------------- */

.opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px var(--e-3) 12px;
}

.opcion {
  padding: 7px 13px;
  border-radius: var(--r-full);
  background-color: var(--lienzo);
  border: 0.5px solid var(--linea);
  font-size: var(--ui-footnote);
  font-weight: 550;
  color: var(--tinta-2);
  transition: background-color var(--d-rapido) var(--ease-entrada),
              color var(--d-rapido) var(--ease-entrada),
              transform var(--d-snappy) var(--muelle-snappy);
}

.opcion[aria-pressed="true"] {
  background-color: var(--tinta-fuerte);
  border-color: var(--tinta-fuerte);
  color: var(--papel);
}

.opcion:active { transform: scale(0.94); }


/* ==========================================================================
   11. DINERO
   --------------------------------------------------------------------------
   Tres piezas propias: el neto del año, el año en doce meses y el reparto
   entre el taller y la vida.
   ========================================================================== */

/* ----- El neto: la cifra que de verdad importa --------------------------- */

.neto { overflow: hidden; }

.neto__cifra {
  font-size: var(--fs-hero);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--e-4);
}

.neto__pareja {
  display: flex;
  gap: var(--e-5);
  margin-bottom: var(--e-3);
}

.neto__parte {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.neto__rotulo {
  font-size: var(--ui-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-etiqueta);
  color: var(--tinta-3);
}

.neto__parte strong {
  font-size: var(--ui-body);
  font-weight: 650;
  color: var(--salvia);
  font-variant-numeric: tabular-nums;
}

.neto__parte--sale strong { color: var(--ambar); }

/* La barra dice lo mismo que la cifra pero de un vistazo: cuánto del total
   facturado se queda en casa. */
.neto__barra {
  height: 9px;
  border-radius: var(--r-full);
  background-color: var(--ambar);
  overflow: hidden;
}

.neto__queda {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background-color: var(--salvia);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  transition: transform var(--d-gentle) var(--muelle-smooth);
}

.neto__pie { margin-top: var(--e-2); font-size: var(--ui-footnote); }

/* ----- El año en doce meses -----------------------------------------------
   El gasto se pinta DENTRO de la barra de ingresos, apoyado en su base: así
   se ve literalmente el mordisco que se lleva cada mes, en vez de tener que
   comparar dos barras vecinas. */

.anio {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  margin-top: var(--e-3);
}

.anio__mes {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border-radius: var(--r-xs);
  transition: transform var(--d-snappy) var(--muelle-snappy);
}

/* LOS HUECOS TAMBIÉN SON DEL MES QUE TIENEN AL LADO. Doce columnas de 21 px
   con 4 de hueco en 301: cuarenta y cuatro píxeles del ancho no recibían nada,
   y cada columna, que es lo que hay que tocar para abrir un mes, se quedaba en
   21. Con dos píxeles a cada lado el año entero está vivo y las áreas quedan
   pegadas, no solapadas: dos más dos son exactamente el hueco. */
.anio__mes::after {
  content: "";
  position: absolute;
  inset: 0 -2px;
}

.anio__mes:active { transform: scale(0.92); }

.anio__col {
  position: relative;
  width: 100%;
  height: 112px;
  border-radius: 5px;
  background-color: var(--lienzo-3);
  overflow: hidden;
}

.anio__in,
.anio__out {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 5px;
  transform-origin: bottom center;
  transform: scaleY(0);
  transition: transform 0.7s var(--muelle-smooth) calc(var(--d, 0) * 42ms);
}

.anio__in  { height: calc(var(--in, 0) * 1%);  background-color: var(--salvia); }
.anio__out { height: calc(var(--out, 0) * 1%); background-color: var(--ambar); }

.anio--dibujado .anio__in,
.anio--dibujado .anio__out { transform: scaleY(1); }

.anio__et {
  font-size: var(--ui-caption2);
  font-weight: 600;
  color: var(--tinta-3);
}

.anio__mes--actual .anio__et { color: var(--tinta-fuerte); font-weight: 700; }

/* El mes elegido se marca con un aro, no cambiando de color: el color ya
   está diciendo otra cosa (ingreso o gasto). */
.anio__mes--elegido .anio__col {
  box-shadow: 0 0 0 2px var(--tinta-fuerte);
}

.anio__leyenda {
  display: flex;
  gap: var(--e-4);
  margin-top: var(--e-3);
}

.anio__clave {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ui-caption);
  color: var(--tinta-2);
}

.anio__clave::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 3px;
}

.anio__clave--in::before  { background-color: var(--salvia); }
.anio__clave--out::before { background-color: var(--ambar); }

/* ----- Reparto entre el taller y la vida ---------------------------------- */

.reparto {
  display: flex;
  height: 14px;
  gap: 3px;
  margin-bottom: var(--e-3);
}

.reparto__tramo {
  width: var(--p, 50%);
  border-radius: var(--r-full);
  transition: width var(--d-gentle) var(--muelle-smooth);
}

.reparto__tramo--tr { background-color: var(--indigo); }
.reparto__tramo--pe { background-color: var(--salvia); }

.reparto__leyenda {
  display: flex;
  gap: var(--e-4);
  margin-bottom: var(--e-2);
}

/* Cada clave es un atajo: tocar «del taller» abre Gastos ya filtrado */
.reparto__clave {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 4px;
  border-radius: var(--r-sm);
  font-size: var(--ui-footnote);
  color: var(--tinta-2);
  transition: background-color var(--d-micro) var(--ease-entrada);
}

.reparto__clave:active { background-color: color-mix(in oklab, var(--tinta) 6%, transparent); }

.reparto__punto {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 3px;
}

.reparto__clave--tr .reparto__punto { background-color: var(--indigo); }
.reparto__clave--pe .reparto__punto { background-color: var(--salvia); }

.reparto__texto strong { color: var(--tinta-fuerte); font-weight: 650; }

/* ----- Lo que se va solo --------------------------------------------------- */

.recurrente__aviso {
  margin-bottom: var(--e-2);
  font-size: var(--ui-sub);
  line-height: 1.45;
  color: var(--tinta-2);
}

.recurrente__aviso strong { color: var(--tinta-fuerte); font-weight: 650; }

/* ----- Apuntar en una línea -------------------------------------------------
   El gesto más corto que existe para registrar un gasto: escribes «Café 2,40»
   y se acabó. El formulario largo sigue estando en el botón + de la barra. */

.apunte {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 8px 8px 8px var(--e-3);
  border-radius: var(--r-md);
  background-color: var(--cristal-fuerte);
  -webkit-backdrop-filter: var(--cristal-filtro-corto);
  backdrop-filter: var(--cristal-filtro-corto);
  border: 0.5px solid var(--cristal-borde);
  box-shadow:
    inset 0 0.5px 0 var(--cristal-filo),
    var(--sombra-1);
  transition: box-shadow var(--d-rapido) var(--ease-entrada);
}

.apunte:focus-within {
  box-shadow:
    inset 0 0.5px 0 var(--cristal-filo),
    0 0 0 3px color-mix(in oklab, var(--indigo-vivo) 22%, transparent),
    var(--sombra-1);
}

.apunte__ico { color: var(--ambar); }

.apunte__campo {
  flex: 1;
  min-width: 0;
  font-size: var(--ui-body);
  color: var(--tinta-fuerte);
  background: none;
  border: 0;
  outline: none;
}

.apunte__campo::placeholder { color: var(--tinta-3); }

.apunte__ok {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--r-full);
  background-color: var(--indigo);
  color: var(--sobre-color);
  transition: transform var(--d-snappy) var(--muelle-snappy),
              opacity var(--d-rapido) var(--ease-entrada);
}

.apunte__ok:active { transform: scale(0.88); }
.apunte--vacia .apunte__ok { opacity: 0.35; }

.apunte__pista {
  margin: -4px 0 0 var(--e-3);
  font-size: var(--ui-caption);
}

/* Un gasto recién apuntado entra destacado y se calma solo */
.fila--nueva { animation: recien 1.8s var(--ease-salida); }

@keyframes recien {
  0%   { background-color: color-mix(in oklab, var(--salvia) 24%, transparent); }
  100% { background-color: transparent; }
}

/* ----- Sello de ámbito de un gasto ------------------------------------------ */

/* (Aquí vivían .sello--taller y .sello--vida, dos sellos de ámbito que no usó
   nunca nadie y que además hablaban el vocabulario que la decisión 0.1 ha
   retirado. CSS muerto con nombre convincente: lo peor que puede quedarse en
   una hoja, porque el siguiente que lo lea creerá que ya funciona.) */


/* ==========================================================================
   12. SUSCRIPCIONES
   ========================================================================== */

/* ----- La sangría: el mes no asusta, el año sí ---------------------------- */

.sangria__mes {
  font-size: var(--fs-hero);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ambar);
  transition: color var(--d-medio) var(--ease-entrada);
}

/* Al mirar «las que cobro» toda la tarjeta cambia de signo y de color */
.sangria--cobro .sangria__mes { color: var(--salvia); }

/* Dos apoyos en vez de una frase corrida. La cifra del mes no asusta a
   nadie; la del año, sí — y el equivalente en días de trabajo es lo que
   de verdad hace cancelar cosas. Cada uno necesita su propio sitio. */
.apoyos {
  display: flex;
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
}

.apoyo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
  padding-right: var(--e-4);
}

.apoyo + .apoyo {
  padding-left: var(--e-4);
  padding-right: 0;
}

.apoyo + .apoyo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background-color: var(--linea-suave);
}

.apoyo strong {
  font-size: var(--ui-title3);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--tinta-fuerte);
  font-variant-numeric: tabular-nums;
}

.apoyo span {
  font-size: var(--ui-caption);
  color: var(--tinta-3);
}

/* ----- El mes día a día ----------------------------------------------------
   Siete columnas empezando en lunes, con los huecos del principio: un
   calendario que no empieza donde toca no es un calendario. */

/* El calendario NO es un mapa de calor: rellenar cinco casillas de mostaza
   convierte un mes tranquilo en una hoja de cálculo. Los días se quedan en
   silencio y el cargo lo dice un punto debajo, cuyo tamaño crece con el
   importe. Se lee el ritmo del mes de un vistazo, no una rejilla. */

.calendario {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px 0;
  margin-top: var(--e-4);
}

.calendario__ini {
  padding-bottom: 6px;
  text-align: center;
  font-size: var(--ui-caption2);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--tinta-3);
}

.calendario__dia {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 7px 0 11px;
  font-size: var(--ui-footnote);
  font-weight: 500;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
  transition: color var(--d-rapido) var(--ease-entrada);
}

.calendario__hueco { background: none; }

/* El día con cargo no se rellena: se despierta. */
.calendario__dia--cargo {
  color: var(--tinta-fuerte);
  font-weight: 650;
}

/* El punto: de 4 a 9 px según lo que se lleve ese día */
.calendario__punto {
  width: var(--tam, 5px);
  height: var(--tam, 5px);
  border-radius: var(--r-full);
  background-color: var(--ambar);
  transform: scale(0);
  transition: transform 0.5s var(--muelle-bouncy) calc(var(--d, 0) * 22ms);
}

.calendario--dibujado .calendario__punto { transform: scale(1); }

.calendario--cobro .calendario__punto { background-color: var(--salvia); }

/* Hoy: un aro discreto alrededor del número, sin tocar el color del punto */
.calendario__dia--hoy::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  translate: -50% 0;
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--tinta-fuerte);
}

.calendario__dia--hoy { color: var(--tinta-fuerte); font-weight: 650; }

.calendario__pie {
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
  font-size: var(--ui-footnote);
  color: var(--tinta-2);
}

/* Una suscripción en pausa sigue en la lista pero se apaga */
/* Fila con interruptor Y importe: los 12 px de hueco por tres separaciones
   son justo lo que le falta a «Adobe Creative Cloud» para entrar entero. */
.fila--apretada { gap: 8px; }
.fila--apretada .fila__principal { gap: 10px; }

.fila--pausada .fila__titulo,
.fila--pausada .fila__valor { color: var(--tinta-3); }
.fila--pausada .chip { opacity: 0.5; }


/* ==========================================================================
   13. DOMINIOS
   ========================================================================== */

/* ----- La regla: cuatro dominios, un solo eje ------------------------------
   Cada fila comparte la misma escala de tiempo, así que la distancia entre
   dos puntos ES la distancia real entre sus renovaciones. Cuatro barras
   independientes no dicen eso: dicen cuatro porcentajes sueltos. */

.regla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 11px;
  margin-top: var(--e-3);
}

.regla__fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}

.regla__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
}

.regla__nombre {
  font-size: var(--ui-footnote);
  font-weight: 550;
  color: var(--tinta-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.regla__dias {
  font-size: var(--ui-footnote);
  font-weight: 650;
  color: var(--tinta-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.regla__fila--urgente .regla__nombre,
.regla__fila--urgente .regla__dias { color: var(--rojo); }
.regla__fila--pronto  .regla__dias { color: var(--ambar); }

/* El raíl y el punto */
.regla__rail {
  position: relative;
  height: 10px;
}

.regla__rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--lienzo-3);
}

.regla__punto {
  position: absolute;
  top: 0;
  left: var(--x, 0%);
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: var(--r-full);
  background-color: var(--salvia);
  box-shadow: 0 0 0 3px var(--lienzo);
  transform: scale(0);
  transition: transform 0.6s var(--muelle-bouncy) calc(var(--d, 0) * 70ms);
}

.regla--dibujada .regla__punto { transform: scale(1); }

/* El tramo recorrido: del origen hasta el punto, para que el ojo siga la
   distancia en vez de tener que estimarla */
.regla__tramo {
  position: absolute;
  left: 0;
  top: 4px;
  height: 2px;
  width: var(--x, 0%);
  border-radius: 1px;
  background-color: color-mix(in oklab, var(--salvia) 45%, transparent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.7s var(--muelle-smooth) calc(var(--d, 0) * 70ms);
}

.regla--dibujada .regla__tramo { transform: scaleX(1); }

.regla__fila--urgente .regla__punto { background-color: var(--rojo); }
.regla__fila--urgente .regla__tramo { background-color: color-mix(in oklab, var(--rojo) 45%, transparent); }
.regla__fila--pronto  .regla__punto { background-color: var(--ambar); }
.regla__fila--pronto  .regla__tramo { background-color: color-mix(in oklab, var(--ambar) 45%, transparent); }

/* La escala, una sola vez abajo */
.regla__escala {
  position: relative;
  height: 15px;
  margin-top: 3px;
  border-top: 1px solid var(--linea-suave);
}

.regla__marca {
  position: absolute;
  top: 4px;
  left: var(--x, 0%);
  translate: -50% 0;
  font-size: var(--ui-caption2);
  color: var(--tinta-3);
  white-space: nowrap;
}

.regla__marca:first-child { translate: 0 0; }
.regla__marca:last-child  { translate: -100% 0; }

.pistas {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

/* ----- La pista de aterrizaje ---------------------------------------------
   La barra no mide «progreso»: mide lo que le queda de vida al dominio sobre
   un año entero. Por eso se vacía en vez de llenarse, y por eso el color lo
   decide la urgencia y no la marca. */

.pista {
  padding: var(--e-4);
  border-radius: var(--r-lg);
  background-color: var(--cristal-fuerte);
  border: 0.5px solid var(--cristal-borde);
  box-shadow:
    inset 0 0.5px 0 var(--cristal-filo),
    var(--sombra-1);
}

.pista__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
}

.pista__nombre {
  font-size: var(--ui-body);
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--tinta-fuerte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pista__coste {
  font-size: var(--ui-sub);
  font-weight: 600;
  color: var(--tinta-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pista__meta {
  margin-top: 2px;
  font-size: var(--ui-footnote);
  color: var(--tinta-3);
}

/* La cuenta atrás va en el meta, junto a la fecha: la barra por tarjeta se
   quitó porque 12 días sobre 365 son 9 px de 297 — invisible. Lo que compara
   de verdad es la regla de arriba, con su eje compartido. */
.pista__cuenta {
  font-weight: 650;
  color: var(--tinta-2);
}

.pista--pronto  .pista__cuenta { color: var(--ambar); }
.pista--urgente .pista__cuenta { color: var(--rojo); }

.pista__pie {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
}

.pista__pie .boton-pildora { padding: 9px 14px; font-size: var(--ui-footnote); }

/* El interruptor de renovación automática, con su rótulo, empujado al final */
.pista__auto {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: var(--ui-caption);
  color: var(--tinta-3);
}

/* Interruptor compacto: 40 px en vez de 51. Se usa donde comparte fila con
   texto, porque los 11 px de diferencia son justo los que separan un título
   entero de un «Adobe Creative Clo…». El área de toque sigue en 44 por el
   acolchado de la fila. */
.interruptor--compacto,
.pista__auto .interruptor { width: 40px; height: 24px; }

.interruptor--compacto .interruptor__pomo,
.pista__auto .interruptor__pomo { width: 20px; height: 20px; }

.interruptor--compacto.interruptor--on .interruptor__pomo,
.pista__auto .interruptor--on .interruptor__pomo { transform: translateX(16px); }

.interruptor--compacto:active .interruptor__pomo,
.pista__auto .interruptor:active .interruptor__pomo { width: 24px; }

.interruptor--compacto.interruptor--on:active .interruptor__pomo,
.pista__auto .interruptor--on:active .interruptor__pomo { transform: translateX(12px); }

/* Al renovar, la barra vuelve a llenarse y la tarjeta da un respingo */
.pista--renovada { animation: respingo 0.6s var(--muelle-bouncy); }

@keyframes respingo {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}


/* ==========================================================================
   14. HOSTING
   ========================================================================== */

/* ----- La flota: tres máquinas, una sola escala de gigas -------------------
   Misma familia que la regla de Dominios, otro eje. Allí se comparte el
   tiempo; aquí, el espacio. La CAJA mide el plan contratado, así que la de
   20 GB es corta de verdad; el RELLENO mide lo gastado. Dos barras al 100 %
   de ancho dirían «90 %» y «12 %» y se quedarían tan anchas, escondiendo que
   el 12 % de Vercel son ochenta y ocho gigas libres y el 90 % de SiteGround
   son dos. */

.flota { margin-top: var(--e-3); }

.flota__fila + .flota__fila { margin-top: 13px; }

.flota__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: 5px;
}

.flota__nombre {
  font-size: var(--ui-footnote);
  font-weight: 550;
  color: var(--tinta-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flota__cifra {
  font-size: var(--ui-footnote);
  font-weight: 650;
  color: var(--tinta-fuerte);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.flota__cifra span { font-weight: 450; color: var(--tinta-3); }

.flota__caja {
  width: var(--ancho, 100%);
  height: 9px;
  border-radius: var(--r-full);
  background-color: var(--lienzo-3);
  overflow: hidden;
}

.flota__lleno {
  display: block;
  width: calc(var(--p, 0) * 100%);
  height: 100%;
  border-radius: inherit;
  background-color: var(--salvia);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.72s var(--muelle-smooth) calc(var(--i, 0) * 90ms);
}

.flota--dibujada .flota__lleno { transform: scaleX(1); }

/* A partir del 70 % deja de ser un dato y empieza a ser un plazo */
.flota__fila--justo   .flota__lleno { background-color: var(--ambar); }
.flota__fila--critico .flota__lleno { background-color: var(--rojo); }
.flota__fila--critico .flota__cifra { color: var(--rojo); }

/* La escala, una sola vez abajo — igual que en la regla */
.flota__escala {
  position: relative;
  height: 15px;
  margin-top: 7px;
  border-top: 1px solid var(--linea-suave);
}

.flota__marca {
  position: absolute;
  top: 4px;
  left: var(--x, 0%);
  translate: -50% 0;
  font-size: var(--ui-caption2);
  color: var(--tinta-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.flota__marca:first-child { translate: 0 0; }
.flota__marca:last-child  { translate: -100% 0; }

/* El gráfico no se explica solo: debajo va dicho en una frase */
.flota__lectura {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
  font-size: var(--ui-footnote);
  line-height: 1.5;
  color: var(--tinta-2);
}

.flota__lectura strong { color: var(--tinta-fuerte); font-weight: 650; }
.flota__lectura--aviso strong { color: var(--rojo); }

.alojamientos {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.alojamiento {
  padding: var(--e-4);
  border-radius: var(--r-lg);
  background-color: var(--cristal-fuerte);
  border: 0.5px solid var(--cristal-borde);
  box-shadow:
    inset 0 0.5px 0 var(--cristal-filo),
    var(--sombra-1);
}

.alojamiento__cabeza {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-3);
}

/* Era un span con dos spans dentro: cajas en línea, o sea nombre y plan
   pintados uno al lado del otro pisando la columna del precio. */
.alojamiento__texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.alojamiento__nombre {
  font-size: var(--ui-body);
  font-weight: 650;
  color: var(--tinta-fuerte);
}

.alojamiento__meta {
  font-size: var(--ui-footnote);
  color: var(--tinta-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alojamiento__coste {
  text-align: right;
  flex: none;
}

.alojamiento__coste strong {
  display: block;
  font-size: var(--ui-body);
  font-weight: 650;
  color: var(--tinta-fuerte);
  font-variant-numeric: tabular-nums;
}

.alojamiento__coste span { font-size: var(--ui-caption); color: var(--tinta-3); }

/* ----- Lo que vive en la máquina ------------------------------------------
   El dato que de verdad se busca aquí es «¿qué se cae si apago esto?». Los
   dominios con nombre y apellidos, no «aduarte.es y dos más». */

.alojamiento__sitios {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--e-3);
}

.sitio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--r-full);
  background-color: var(--cristal);
  border: 0.5px solid var(--cristal-borde);
  box-shadow: inset 0 0.5px 0 var(--cristal-filo);
  font-size: var(--ui-caption);
  font-weight: 550;
  color: var(--tinta-2);
  white-space: nowrap;
}

.sitio .ico { width: 12px; height: 12px; color: var(--tinta-3); }

/* ----- El pie: los dos datos secundarios y el enlace al panel ------------- */

.alojamiento__pie {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
  display: flex;
  align-items: flex-end;
  gap: var(--e-4);
}

.alojamiento__dato {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.alojamiento__dato > span {
  font-size: var(--ui-caption2);
  font-weight: 600;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-3);
}

.alojamiento__dato > strong {
  font-size: var(--ui-footnote);
  font-weight: 550;
  color: var(--tinta-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.alojamiento__pie .enlace { margin-left: auto; }


/* ----- La franja: noventa días en un eje -----------------------------------
   Tercera pieza de la misma familia — la regla de Dominios comparte el
   tiempo, la flota de Hosting comparte los gigas, y aquí se comparten los
   noventa días. Lo que cambia es lo que dice la FORMA del punto: macizo el
   que hay que renovar a mano, hueco el que se cobra solo. Esa es la única
   diferencia que obliga a hacer algo, así que es la única que se dibuja.

   (Aquí estuvo un rato una curva de dinero acumulado. Era lógica de Dinero
   metida en una pantalla de Activos: lo que se caduca importa por lo que
   pierdes si se te pasa, no por lo que cuesta.) */

.franja__cifra {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  margin-top: var(--e-4);
}

.franja__cifra strong {
  font-size: var(--ui-title1);
  font-weight: 650;
  letter-spacing: -0.025em;
  color: var(--tinta-fuerte);
  font-variant-numeric: tabular-nums;
}

.franja__cifra span {
  font-size: var(--ui-footnote);
  color: var(--tinta-3);
}

.franja { margin-top: var(--e-5); }

.franja__rail {
  position: relative;
  height: 13px;
}

.franja__rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 5.5px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--lienzo-3);
}

.franja__hito {
  position: absolute;
  top: 0;
  left: var(--x, 0%);
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-radius: var(--r-full);
  background-color: var(--tinta-fuerte);
  /* El halo del color de la tarjeta: dos fechas pegadas se solapan limpio
     en vez de fundirse en una mancha. */
  box-shadow: 0 0 0 3px var(--lienzo);
  transform: scale(0);
  transition: transform 0.55s var(--muelle-bouncy) calc(var(--d, 0) * 70ms);
}

.franja--dibujada .franja__hito { transform: scale(1); }

/* Lo que se renueva solo no pide nada: se queda hueco */
.franja__hito--urgente { background-color: var(--rojo); }
.franja__hito--pronto  { background-color: var(--ambar); }

.franja__escala {
  position: relative;
  height: 15px;
  margin-top: 6px;
  border-top: 1px solid var(--linea-suave);
}

.franja__marca {
  position: absolute;
  top: 4px;
  left: var(--x, 0%);
  translate: -50% 0;
  font-size: var(--ui-caption2);
  color: var(--tinta-3);
  white-space: nowrap;
}

.franja__marca:first-child { translate: 0 0; }
.franja__marca:last-child  { translate: -100% 0; }

.franja__lectura {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
  font-size: var(--ui-footnote);
  line-height: 1.5;
  color: var(--tinta-2);
}

.franja__lectura strong { color: var(--tinta-fuerte); font-weight: 650; }
.franja__lectura--calma { color: var(--salvia); }


/* ==========================================================================
   15. VENCIMIENTOS
   --------------------------------------------------------------------------
   La magia de esta pantalla es que los HUECOS MIDEN DÍAS. Dos vencimientos
   seguidos quedan pegados; uno a veinticinco días queda lejos de verdad. Un
   listado normal miente sobre el tiempo: dice que todo está igual de cerca.
   ========================================================================== */

.linea {
  position: relative;
  margin-top: var(--e-3);
  padding-left: var(--e-6);
}

/* El raíl */
.linea::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 14px;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(var(--linea), color-mix(in oklab, var(--linea) 20%, transparent));
}

.linea__hito {
  position: relative;
  /* El hueco hasta el siguiente hito es proporcional a los días que faltan.
     Se topa a 64 px: sin tope, un salto de tres meses deja media pantalla
     en blanco y el patrón deja de leerse. */
  padding-bottom: calc(var(--e-4) + min(64px, var(--hueco, 0) * 1.7px));
}

.linea__hito:last-child { padding-bottom: 0; }

.linea__punto {
  position: absolute;
  left: calc(var(--e-6) * -1 + 2px);
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: var(--r-full);
  background-color: var(--lienzo);
  border: 2.5px solid var(--tinta-3);
  transition: background-color var(--d-rapido) var(--ease-entrada),
              border-color var(--d-rapido) var(--ease-entrada);
}

.linea__hito--urgente .linea__punto { border-color: var(--rojo); background-color: var(--rojo); }
.linea__hito--pronto  .linea__punto { border-color: var(--ambar); background-color: var(--ambar); }

.linea__fila {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
}

.linea__cuerpo { flex: 1; min-width: 0; }

.linea__cuando {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: var(--ui-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-3);
}

.linea__hito--urgente .linea__cuando { color: var(--rojo); }
.linea__hito--pronto  .linea__cuando { color: var(--ambar); }

/* Se cobra sola: la fila lo dice sin gritar, y por eso su punto no se pinta */
.linea__auto {
  color: var(--tinta-3);
  font-weight: 550;
  letter-spacing: var(--tracking-etiqueta);
}

.linea__titulo {
  margin-top: 2px;
  /* La raya del tachado es un degradado de fondo, y el fondo mide la CAJA.
     Sin esto, la caja es todo el ancho del <p> y la raya cruza la tarjeta. */
  width: fit-content;
  max-width: 100%;
  font-size: var(--ui-sub);
  font-weight: 600;
  color: var(--tinta-fuerte);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 58%;
  background-size: 0% 1.5px;
  transition: background-size 0.34s var(--ease-salida),
              color var(--d-rapido) var(--ease-entrada);
}

.linea__pie { font-size: var(--ui-footnote); color: var(--tinta-3); }

.linea__hito--hecho .linea__titulo {
  color: var(--tinta-3);
  background-size: 100% 1.5px;
}

.linea__hito--hecho .linea__punto {
  background-color: var(--salvia);
  border-color: var(--salvia);
}

.linea__hito--hecho .linea__cuando { color: var(--salvia); }

/* Cuando un vencimiento anual se resuelve, el del año que viene queda puesto
   y se anuncia aquí: es el detalle que convierte una lista en un sistema. */
.linea__proximo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background-color: var(--salvia-suave);
  color: var(--salvia);
  font-size: var(--ui-caption2);
  font-weight: 600;
}

.linea__proximo .ico { width: 12px; height: 12px; }

/* Se inserta al resolver, así que la animación corre sola al nacer */
.linea__proximo { animation: sello-entra 0.44s var(--muelle-bouncy) backwards; }

@keyframes sello-entra {
  from { opacity: 0; transform: scale(0.82) translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .linea__proximo { animation: none; }
}


/* ==========================================================================
   16. LEADS
   --------------------------------------------------------------------------
   A un lead no lo mata el calendario, lo mata el olvido. Por eso aquí `dias`
   no cuenta lo que falta sino lo que lleva nadie tocándolo, la lista se
   ordena por eso y el color lo decide la temperatura, no la fase: un lead
   NUEVO de hace veintiocho días está peor que uno en propuesta de hace seis.
   ========================================================================== */

/* ----- El embudo: una sola barra, el dinero repartido por fase ------------
   Un embudo de verdad (los trapecios que estrechan) miente con el área y no
   cabe en 297 px. Una barra partida dice lo mismo y se lee de un vistazo:
   dónde está parado el dinero. */

.embudo { margin-top: var(--e-3); }

.embudo__barra {
  display: flex;
  height: 12px;
  gap: 2px;
  border-radius: var(--r-full);
  overflow: hidden;
}

.embudo__tramo {
  width: var(--p, 0%);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--muelle-smooth) calc(var(--i, 0) * 110ms);
}

.embudo__barra > :first-child { border-radius: var(--r-full) 2px 2px var(--r-full); }
.embudo__barra > :last-child  { border-radius: 2px var(--r-full) var(--r-full) 2px; }

.embudo--dibujado .embudo__tramo { transform: scaleX(1); }

/* Del gris al verde: cuanto más cerca de firmar, más vivo */
.embudo__tramo--nuevo      { background-color: color-mix(in oklab, var(--indigo-vivo) 26%, var(--lienzo-3)); }
.embudo__tramo--contactado { background-color: var(--indigo-vivo); }
.embudo__tramo--propuesta  { background-color: var(--salvia); }

.embudo__clave {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: var(--e-4);
}

.embudo__pata {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--ui-footnote);
  color: var(--tinta-2);
}

.embudo__punto {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--r-full);
  translate: 0 -1px;
}

.embudo__punto--nuevo      { background-color: color-mix(in oklab, var(--indigo-vivo) 26%, var(--lienzo-3)); }
.embudo__punto--contactado { background-color: var(--indigo-vivo); }
.embudo__punto--propuesta  { background-color: var(--salvia); }

.embudo__pata b {
  flex: 1;
  min-width: 0;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.embudo__pata span {
  color: var(--tinta-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.embudo__pata strong {
  color: var(--tinta-fuerte);
  font-weight: 650;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.embudo__lectura {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
  font-size: var(--ui-footnote);
  line-height: 1.5;
  color: var(--tinta-2);
}

.embudo__lectura strong { color: var(--tinta-fuerte); font-weight: 650; }

/* La temperatura, dentro del pie de la fila */
.olvido { font-weight: 600; }
.olvido--tibio { color: var(--ambar); }
.olvido--frio  { color: var(--rojo); }


/* ==========================================================================
   17. PRESUPUESTOS
   ========================================================================== */

.aire__cifra { margin-top: var(--e-3); }

/* ----- Lo que sueles cerrar ----------------------------------------------
   El dato que no tiene ningún freelance a mano y que decide si subir precios
   o bajar el ritmo: de lo ya decidido, cuánto se firma. Solo cuenta lo
   cerrado — meter los enviados en la cuenta sería contar un partido que
   todavía se está jugando. */

.cierre {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea-suave);
}

.cierre__barra {
  height: 10px;
  border-radius: var(--r-full);
  background-color: var(--rojo-suave);
  overflow: hidden;
}

.cierre__gana {
  display: block;
  width: calc(var(--p, 0) * 100%);
  height: 100%;
  border-radius: inherit;
  background-color: var(--salvia);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s var(--muelle-smooth) 0.1s;
}

.cierre--dibujado .cierre__gana { transform: scaleX(1); }

.cierre__pie {
  margin-top: 9px;
  font-size: var(--ui-footnote);
  color: var(--tinta-3);
}

.cierre__pie strong { color: var(--tinta-fuerte); font-weight: 650; }

.aire__lectura {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
  font-size: var(--ui-footnote);
  line-height: 1.5;
  color: var(--tinta-2);
}

.aire__lectura strong { color: var(--tinta-fuerte); font-weight: 650; }

/* Estados dentro del pie de la fila, sin pastillas: una etiqueta «Rechazado»
   se come 80 px de los 297 y deja el concepto en «Packaging de la líne…» */
/* Importe arriba, estado debajo — mismo patrón que el coste en Hosting.
   El estado en línea con el concepto no cabe y se come las dos cosas. */
.fila__valor--apilado {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
}

.fila__valor--apilado small {
  font-size: var(--ui-caption);
  font-weight: 550;
  white-space: nowrap;
}

.estado-ok   { color: var(--salvia); font-weight: 600; }
.estado-urge { color: var(--rojo);   font-weight: 600; }
.estado-baja { color: var(--tinta-3); }

.fila--apagada .fila__titulo { color: var(--tinta-2); }
.fila--apagada .fila__valor  { color: var(--tinta-3); }


/* ==========================================================================
   18. CARGOS CON DÍA PUESTO (dentro de Gastos)
   --------------------------------------------------------------------------
   Los impuestos no son una pantalla aparte: son gastos recurrentes que
   además tienen fecha. Aquí se ven juntos los que se cobran solos con día
   marcado, sin tocar el total del mes — el IVA se paga en octubre y no puede
   sumar en septiembre.
   ========================================================================== */

.cargos {
  display: flex;
  flex-direction: column;
  margin-top: var(--e-3);
}

.cargo { padding: var(--e-3) 0; }

.cargo + .cargo { border-top: 1px solid var(--linea-suave); }
.cargo:first-child { padding-top: 0; }
.cargo:last-child  { padding-bottom: 0; }

.cargo__cuando {
  font-size: var(--ui-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-3);
}

.cargo--pronto  .cargo__cuando { color: var(--ambar); }
.cargo--urgente .cargo__cuando { color: var(--rojo); }

.cargo__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  margin-top: 2px;
}

.cargo__titulo {
  min-width: 0;
  font-size: var(--ui-sub);
  font-weight: 600;
  color: var(--tinta-fuerte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cargo__valor {
  flex: none;
  font-size: var(--ui-sub);
  font-weight: 650;
  color: var(--tinta-fuerte);
  font-variant-numeric: tabular-nums;
}

.cargo__pie {
  font-size: var(--ui-footnote);
  color: var(--tinta-3);
}


/* ==========================================================================
   19. PERSONAL · SUEÑO
   --------------------------------------------------------------------------
   Catorce barras de duración ordenadas por fecha dicen «unas noches duermes
   más que otras», que ya lo sabías. Lo que no se ve en ningún sitio es la
   HORA: puestas sobre un reloj de 22:00 a 09:00, el borde izquierdo dibuja
   a qué hora te acuestas, y ahí aparece lo que de verdad rompe el sueño —
   que cada noche empieza en un sitio distinto.
   ========================================================================== */

/* `.display` solo pone la familia y el peso; el TAMAÑO lo trae siempre una
   clase hermana (`.sangria__mes` lo hacía con `--fs-hero`). Sin ella, la
   cifra principal de la tarjeta se quedaba en 17 px — más pequeña que los
   apoyos de debajo, que van a 20. La jerarquía al revés. */
.sueno__cifra,
.aire__cifra,
.nutri__cifra strong {
  font-size: var(--fs-hero);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tinta-fuerte);
  font-variant-numeric: tabular-nums;
}

.sueno__cifra { margin-top: var(--e-3); }

.banda { margin-top: var(--e-3); }

.banda__reloj {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 3px 8px;
}

.banda__dia {
  font-size: var(--ui-caption2);
  font-weight: 600;
  color: var(--tinta-3);
  text-align: center;
}

.banda__carril {
  position: relative;
  height: 9px;
  border-radius: var(--r-full);
  background-color: var(--lienzo-3);
}

/* El objetivo lo dibuja cada carril por su cuenta: una sola línea absoluta
   por encima de la rejilla tendría que adivinar dónde empieza la columna de
   los raíles, y con los huecos de 3 px estos trocitos se leen como una raya
   continua igual. */
.banda__carril::after {
  content: "";
  position: absolute;
  left: var(--obj, 0%);
  top: -3px;
  bottom: -3px;
  width: 1.5px;
  border-radius: 1px;
  background-color: color-mix(in oklab, var(--tinta-fuerte) 30%, transparent);
}

.banda__noche {
  position: absolute;
  top: 0;
  left: var(--x, 0%);
  width: var(--w, 0%);
  height: 100%;
  border-radius: var(--r-full);
  background-color: var(--indigo-vivo);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--muelle-smooth) calc(var(--i, 0) * 45ms);
}

.banda--dibujada .banda__noche { transform: scaleX(1); }

/* Menos de siete horas avisa; menos de seis y media, alarma */
.banda__noche--corta    { background-color: var(--ambar); }
.banda__noche--muycorta { background-color: var(--rojo); }

.banda__escala {
  position: relative;
  height: 15px;
  margin-top: 7px;
  margin-left: 22px;
  border-top: 1px solid var(--linea-suave);
}

.banda__marca {
  position: absolute;
  top: 4px;
  left: var(--x, 0%);
  translate: -50% 0;
  font-size: var(--ui-caption2);
  color: var(--tinta-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.banda__marca:first-of-type { translate: 0 0; }
.banda__marca:last-of-type  { translate: -100% 0; }

.banda__lectura {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
  font-size: var(--ui-footnote);
  line-height: 1.5;
  color: var(--tinta-2);
}

.banda__lectura strong { color: var(--tinta-fuerte); font-weight: 650; }


/* ==========================================================================
   20. PERSONAL · ENTRENAMIENTO
   ========================================================================== */

.sesion__cabeza {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
}

.sesion__sello {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r-full);
  background-color: var(--salvia);
  color: var(--sobre-color);
}

.sesion__sello .ico { width: 19px; height: 19px; }

/* Sin hacer, el sello se queda hueco: no hay nada que celebrar todavía */
.sesion--pendiente .sesion__sello {
  background-color: transparent;
  border: 2px solid var(--linea);
  color: transparent;
}

.sesion__texto { min-width: 0; }

.sesion__rotulo {
  font-size: var(--ui-caption2);
  font-weight: 600;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--salvia);
}

.sesion--pendiente .sesion__rotulo { color: var(--tinta-3); }

.sesion__titulo {
  margin-top: 1px;
  font-size: var(--ui-title3);
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--tinta-fuerte);
}

.ejercicios {
  margin-top: var(--e-4);
  padding-top: var(--e-2);
  border-top: 1px solid var(--linea-suave);
}

.ejercicio {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  padding: 9px 0;
}

.ejercicio + .ejercicio { border-top: 1px solid var(--linea-suave); }

.ejercicio__nombre {
  min-width: 0;
  font-size: var(--ui-sub);
  color: var(--tinta-fuerte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ejercicio__carga {
  flex: none;
  font-size: var(--ui-footnote);
  color: var(--tinta-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ejercicio__carga b { color: var(--tinta-2); font-weight: 600; }

.sesion__siguiente {
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
  font-size: var(--ui-footnote);
  color: var(--tinta-3);
}

.sesion__siguiente strong { color: var(--tinta-2); font-weight: 650; }

/* ----- Los grupos: cuál se está quedando atrás ----------------------------- */

/* `.reparto` es de Dinero (barra apilada de 14 px). Este es otro reparto:
   el de grupos musculares. Nombre propio, o se pisan. */
.grupos { margin-top: var(--e-3); }

.grupos__fila {
  display: flex;
  align-items: center;
  gap: 10px;
}

.grupos__fila + .grupos__fila { margin-top: 9px; }

.grupos__nombre {
  width: 62px;
  flex: none;
  font-size: var(--ui-footnote);
  color: var(--tinta-2);
}

.grupos__carril {
  flex: 1;
  min-width: 0;
  height: 9px;
  border-radius: var(--r-full);
  background-color: var(--lienzo-3);
  overflow: hidden;
}

.grupos__lleno {
  display: block;
  width: calc(var(--p, 0) * 100%);
  height: 100%;
  border-radius: inherit;
  background-color: var(--salvia);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.65s var(--muelle-smooth) calc(var(--i, 0) * 85ms);
}

.grupos--dibujado .grupos__lleno { transform: scaleX(1); }

/* El que menos sale es el aviso, no el que más */
.grupos__fila--rezagado .grupos__lleno { background-color: var(--ambar); }
.grupos__fila--rezagado .grupos__nombre { color: var(--ambar); font-weight: 600; }

.grupos__n {
  width: 13px;
  flex: none;
  text-align: right;
  font-size: var(--ui-footnote);
  font-weight: 650;
  color: var(--tinta-fuerte);
  font-variant-numeric: tabular-nums;
}

.grupos__lectura {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
  font-size: var(--ui-footnote);
  line-height: 1.5;
  color: var(--tinta-2);
}

.grupos__lectura strong { color: var(--tinta-fuerte); font-weight: 650; }


/* ==========================================================================
   21. PERSONAL · NUTRICIÓN
   --------------------------------------------------------------------------
   Una barra que se llena hasta el 100 % no sabe decir «te has pasado»: al
   llegar al tope se para y miente. Cada macro se dibuja sobre una escala con
   holgura y el objetivo va marcado con una raya, así que pasarse se VE.
   ========================================================================== */

.nutri__cifra {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: var(--e-3);
}

.nutri__cifra span {
  font-size: var(--ui-footnote);
  font-weight: 450;
  letter-spacing: 0;
  color: var(--tinta-3);
  /* Heredada, a secas: aqui ponia var(--fuente-ui, inherit) y no existe
     ningun token --fuente-ui, asi que siempre caia en el respaldo. Un nombre
     que no lleva a ninguna parte hace pensar que hay una fuente de interfaz
     aparte, y no la hay. */
  font-family: inherit;
}

.nutri__pista {
  height: 10px;
  margin-top: var(--e-3);
  border-radius: var(--r-full);
  background-color: var(--lienzo-3);
  overflow: hidden;
}

.nutri__lleno {
  display: block;
  width: calc(var(--p, 0) * 100%);
  height: 100%;
  border-radius: inherit;
  background-color: var(--salvia);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.75s var(--muelle-smooth);
}

.nutri--dibujada .nutri__lleno { transform: scaleX(1); }

.macros {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea-suave);
}

.macro + .macro { margin-top: 11px; }

.macro__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: 5px;
}

.macro__nombre { font-size: var(--ui-footnote); color: var(--tinta-2); }

.macro__cifra {
  font-size: var(--ui-footnote);
  font-weight: 650;
  color: var(--tinta-fuerte);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.macro__cifra span { font-weight: 450; color: var(--tinta-3); }

.macro__carril {
  position: relative;
  height: 8px;
  border-radius: var(--r-full);
  background-color: var(--lienzo-3);
}

.macro__lleno {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  border-radius: var(--r-full);
  background-color: var(--indigo-vivo);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.65s var(--muelle-smooth) calc(var(--i, 0) * 90ms);
}

.macros--dibujados .macro__lleno { transform: scaleX(1); }

/* La raya del objetivo. Sin ella, «74 g» no dice si sobra o falta. */
.macro__carril::after {
  content: "";
  position: absolute;
  left: var(--t, 80%);
  top: -3px;
  bottom: -3px;
  width: 1.5px;
  border-radius: 1px;
  background-color: color-mix(in oklab, var(--tinta-fuerte) 42%, transparent);
}

.macro--pasado .macro__lleno { background-color: var(--ambar); }
.macro--pasado .macro__cifra { color: var(--ambar); }

.macros__lectura {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
  font-size: var(--ui-footnote);
  line-height: 1.5;
  color: var(--tinta-2);
}

.macros__lectura strong { color: var(--tinta-fuerte); font-weight: 650; }


/* ==========================================================================
   22. PERSONAL · SUPLEMENTOS
   --------------------------------------------------------------------------
   Una lista de cuatro casillas no necesita pantalla propia. Lo que sí la
   necesita es la MEMORIA: los siete días de antes en siete puntos por fila,
   que es lo que enseña cuál se te olvida siempre y a qué hora del día.
   ========================================================================== */

.momentos {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.momento__rotulo {
  margin-bottom: var(--e-2);
  font-size: var(--ui-caption2);
  font-weight: 600;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-3);
}

.toma {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 11px 0;
}

.toma + .toma { border-top: 1px solid var(--linea-suave); }
.toma:first-of-type { padding-top: 0; }
.toma:last-of-type { padding-bottom: 0; }

/* Tres spans dentro de un span son tres cajas EN LÍNEA: «Creatina5 g»
   pegados. Es el mismo fallo que tuvo `.alojamiento__texto` en Hosting. */
.toma__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.toma__nombre {
  font-size: var(--ui-sub);
  font-weight: 600;
  color: var(--tinta-fuerte);
}

.toma--hecha .toma__nombre { color: var(--tinta-2); }

.toma__dosis { font-size: var(--ui-footnote); color: var(--tinta-3); }

/* Los siete días de antes. Cuadrados y no círculos: un círculo de 6 px se
   confunde con el punto de una lista. */
.rastro {
  display: flex;
  gap: 3px;
  margin-top: 6px;
}

.rastro__dia {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background-color: var(--lienzo-3);
}

.rastro__dia--si { background-color: var(--salvia); }

.rastro__lectura {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
  font-size: var(--ui-footnote);
  line-height: 1.5;
  color: var(--tinta-2);
}

.rastro__lectura strong { color: var(--tinta-fuerte); font-weight: 650; }
.rastro__lectura--bien strong { color: var(--salvia); }


/* ==========================================================================
   23. TARJETAS DE EMPEZAR (meditación y flashcards)
   --------------------------------------------------------------------------
   Estas dos pantallas no son cuadros de mando: son un botón. Lo único que
   quieres de ellas es empezar antes de que se te pase la gana.
   ========================================================================== */

.empezar { text-align: center; }

.empezar__rotulo {
  font-size: var(--ui-title3);
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--tinta-fuerte);
}

.empezar__racha {
  margin-top: 3px;
  font-size: var(--ui-footnote);
  color: var(--tinta-3);
}

.empezar__racha strong { color: var(--ambar); font-weight: 650; }

/* Rejilla y no flex con salto: cuatro pastillas de 92 px no caben en los 265
   de la tarjeta y la cuarta se caía sola a una segunda línea. En cuatro
   columnas iguales caben, y además quedan alineadas. */
.duraciones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: var(--e-4);
}

.duracion {
  padding: 9px 4px;
  border-radius: var(--r-full);
  border: 1px solid var(--linea);
  background-color: transparent;
  font-size: var(--ui-footnote);
  font-weight: 600;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--d-rapido) var(--ease-entrada),
              color var(--d-rapido) var(--ease-entrada),
              border-color var(--d-rapido) var(--ease-entrada);
}

.duracion--elegida {
  background-color: var(--tinta-fuerte);
  border-color: var(--tinta-fuerte);
  color: var(--lienzo);
}

.boton-grande {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  margin-top: var(--e-4);
  border: none;
  border-radius: var(--r-lg);
  background-color: var(--indigo);
  color: var(--sobre-color);
  font-size: var(--ui-sub);
  font-weight: 650;
  box-shadow: inset 0 0.5px 0 rgb(255 255 255 / 0.18), var(--sombra-1);
  transition: transform var(--d-snappy) var(--muelle-snappy), opacity var(--d-micro) var(--ease-entrada);
}

.boton-grande:active { transform: scale(0.975); opacity: 0.9; }
.boton-grande .ico { width: 18px; height: 18px; }

/* La baraja: tres cartas, la de delante con la cuenta. `.pila` ya es la pila
   de vistas de la app, así que esta tiene su propio nombre. */
.baraja {
  position: relative;
  display: grid;
  place-items: center;
  height: 92px;
  margin-bottom: var(--e-3);
}

/* Las de atrás iban con el borde de cristal —blanco al 72 %— sobre una
   tarjeta blanca: no se veía ninguna y la baraja parecía una carta suelta. */
.baraja__carta {
  position: absolute;
  width: 92px;
  height: 64px;
  border-radius: 14px;
  background-color: var(--lienzo);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-1);
}

.baraja__carta:nth-child(1) { rotate: -8deg; translate: -9px 3px; }
.baraja__carta:nth-child(2) { rotate:  5deg; translate:  8px 1px; }

.baraja__carta--frente {
  position: relative;
  display: grid;
  place-items: center;
  rotate: 0deg;
  translate: 0 0;
  background-color: var(--tinta-fuerte);
  border-color: var(--tinta-fuerte);
  color: var(--lienzo);
  font-size: var(--ui-title1);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   24. PERSONAL · DIARIO
   ========================================================================== */

.pagina__fecha {
  font-size: var(--ui-caption2);
  font-weight: 600;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-3);
}

.pagina__texto {
  display: block;
  width: 100%;
  min-height: 96px;
  margin-top: var(--e-3);
  padding: 0;
  border: none;
  background: none;
  resize: none;
  font-family: inherit;
  font-size: var(--ui-sub);
  line-height: 1.6;
  color: var(--tinta-fuerte);
}

.pagina__texto::placeholder { color: var(--tinta-3); }
.pagina__texto:focus { outline: none; }

.pagina__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
}

.animos { display: flex; gap: 5px; }

.animo {
  padding: 6px 11px;
  border-radius: var(--r-full);
  border: 1px solid var(--linea);
  background-color: transparent;
  font-size: var(--ui-caption);
  font-weight: 550;
  color: var(--tinta-2);
  transition: background-color var(--d-rapido) var(--ease-entrada),
              border-color var(--d-rapido) var(--ease-entrada),
              color var(--d-rapido) var(--ease-entrada);
}

.animo--elegido { color: var(--sobre-color); }
.animo--elegido[data-animo="bien"]    { background-color: var(--salvia); border-color: var(--salvia); }
.animo--elegido[data-animo="regular"] { background-color: var(--ambar);  border-color: var(--ambar); }
.animo--elegido[data-animo="mal"]     { background-color: var(--rojo);   border-color: var(--rojo); }

.entradas {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

/* El canto de color es lo único que queda del ánimo cuando pasa el tiempo,
   y es justo lo que se busca al mirar atrás: dónde estaban las malas. */
/* Desde la fase 7 cada entrada ABRE su día, así que es un botón y no un
   artículo. Lo que cambia de verdad no es el tono: es que el bloque entero
   tenga que anunciarse como pulsable y responder al dedo. */
.entrada {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  padding: var(--e-4);
  padding-left: calc(var(--e-4) + 7px);
  border-radius: var(--r-lg);
  background-color: var(--cristal-fuerte);
  border: 0.5px solid var(--cristal-borde);
  box-shadow: inset 0 0.5px 0 var(--cristal-filo), var(--sombra-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--d-snappy) var(--muelle-snappy);
}

.entrada::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--linea);
}

.entrada--bien::before    { background-color: var(--salvia); }
.entrada--regular::before { background-color: var(--ambar); }
.entrada--mal::before     { background-color: var(--rojo); }

.entrada__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
}

.entrada__cuando {
  font-size: var(--ui-caption2);
  font-weight: 600;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-3);
}

.entrada__fecha {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--ui-caption);
  color: var(--tinta-3);
}

/* Las dos marcas dicen, sin abrir nada, si ese día contestaste los pliegos. */
.entrada__fecha .ico { width: 12px; height: 12px; }

.entrada__titulo {
  display: block;
  margin-top: 3px;
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces);
  font-size: var(--ui-title3);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--tinta-fuerte);
}

.entrada__texto {
  display: block;
  margin-top: 5px;
  font-size: var(--ui-footnote);
  line-height: 1.6;
  color: var(--tinta-2);
}

.entrada:active { transform: scale(0.985); }

@media (prefers-reduced-motion: reduce) {
  .entrada:active { transform: none; }
  .pliego__flecha { transition: none; }
}


/* ==========================================================================
   25. PERSONAL · LECTURA
   --------------------------------------------------------------------------
   Quince de veinticuatro no dice nada por sí solo: depende de en qué día del
   año estés. La raya marca dónde deberías ir hoy, y ahí la cifra empieza a
   significar algo.
   ========================================================================== */

.ritmo { margin-top: var(--e-4); }

.ritmo__carril {
  position: relative;
  height: 10px;
  border-radius: var(--r-full);
  background-color: var(--lienzo-3);
}

.ritmo__lleno {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  border-radius: var(--r-full);
  background-color: var(--salvia);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.75s var(--muelle-smooth);
}

.ritmo--dibujado .ritmo__lleno { transform: scaleX(1); }
.ritmo--corto .ritmo__lleno { background-color: var(--ambar); }

.ritmo__carril::after {
  content: "";
  position: absolute;
  left: var(--t, 70%);
  top: -3px;
  bottom: -3px;
  width: 1.5px;
  border-radius: 1px;
  background-color: color-mix(in oklab, var(--tinta-fuerte) 42%, transparent);
}

.ritmo__lectura {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
  font-size: var(--ui-footnote);
  line-height: 1.5;
  color: var(--tinta-2);
}

.ritmo__lectura strong { color: var(--tinta-fuerte); font-weight: 650; }

.libros {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  margin-top: var(--e-3);
}

/* La ficha lo convirtió en botón: sin esto hereda el centrado y el fondo
   de los botones del navegador. */
.libro {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  transition: transform var(--d-snappy) var(--muelle-snappy);
}

.libro:active { transform: scale(0.985); }

.libro__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
}

.libro__titulo {
  min-width: 0;
  font-size: var(--ui-sub);
  font-weight: 600;
  color: var(--tinta-fuerte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.libro__paginas {
  flex: none;
  font-size: var(--ui-footnote);
  color: var(--tinta-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.libro__autor { font-size: var(--ui-footnote); color: var(--tinta-3); }

/* Con display explícito: la ficha lo pinta en un <div> y la tarjeta de
   «Leyendo ahora» en un <span>, y un span es inline, así que el alto no le
   aplicaba y el carril salía de cero por cero mientras su relleno flotaba por
   encima a lo ancho de la tarjeta entera. */
.libro__carril {
  display: block;
  height: 6px;
  margin-top: 7px;
  border-radius: var(--r-full);
  background-color: var(--lienzo-3);
  overflow: hidden;
}

.libro__lleno {
  display: block;
  width: calc(var(--p, 0) * 100%);
  height: 100%;
  border-radius: inherit;
  background-color: var(--salvia);
}

.libro--ambar .libro__lleno { background-color: var(--ambar); }


/* ==========================================================================
   26. PERSONAL · FLASHCARDS (los mazos)
   ========================================================================== */

.mazos { margin-top: var(--e-3); }

.mazo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

.mazo + .mazo { border-top: 1px solid var(--linea-suave); }
.mazo:first-child { padding-top: 0; }
.mazo:last-child { padding-bottom: 0; }

.mazo__punto {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 3px;
}

.mazo__punto--salvia { background-color: var(--salvia); }
.mazo__punto--indigo { background-color: var(--indigo-vivo); }
.mazo__punto--ambar  { background-color: var(--ambar); }

/* Tercera vez en este proyecto: un <span> con <span> dentro son cajas EN
   LÍNEA y el nombre se pega al pie («Diseño de sistemas86 tarjetas»). Dentro
   de un <button> no se puede usar <div>, así que los spans tienen que
   declararse bloque a mano. */
.mazo__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.mazo__nombre, .mazo__total { display: block; max-width: 100%; }

.mazo__nombre {
  font-size: var(--ui-sub);
  color: var(--tinta-fuerte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mazo__total { font-size: var(--ui-footnote); color: var(--tinta-3); }

.mazo__pend {
  flex: none;
  font-size: var(--ui-sub);
  font-weight: 650;
  color: var(--tinta-fuerte);
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   27. PERSONAL · NOTAS
   ========================================================================== */

.notas {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.nota {
  padding: var(--e-4);
  border-radius: var(--r-lg);
  background-color: var(--cristal-fuerte);
  border: 0.5px solid var(--cristal-borde);
  box-shadow: inset 0 0.5px 0 var(--cristal-filo), var(--sombra-1);
  text-align: left;
  width: 100%;
  transition: transform var(--d-snappy) var(--muelle-snappy);
}

.nota:active { transform: scale(0.985); }

.nota__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
}

.nota__etiqueta {
  font-size: var(--ui-caption2);
  font-weight: 600;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--indigo-vivo);
}

.nota__cuando { font-size: var(--ui-caption); color: var(--tinta-3); white-space: nowrap; }

.nota__cabeza { display: flex; }

.nota__titulo {
  display: block;
  margin-top: 4px;
  font-size: var(--ui-sub);
  font-weight: 600;
  color: var(--tinta-fuerte);
}

.nota__texto {
  display: block;
  margin-top: 3px;
  font-size: var(--ui-footnote);
  line-height: 1.55;
  color: var(--tinta-2);
}


/* ==========================================================================
   28. FICHAS DE DETALLE (lead, presupuesto, libro, nota, persona)
   ========================================================================== */

.ficha-cabeza--izq { align-items: flex-start; text-align: left; }

/* ----- El hilo: cómo ha ido la cosa ---------------------------------------
   La línea de tiempo de Vencimientos mide días con los huecos. Aquí el
   tiempo no importa tanto como el orden, así que los hitos van pegados y lo
   que manda es la secuencia. */

.hilo {
  position: relative;
  margin-top: var(--e-3);
  padding-left: var(--e-5);
}

.hilo::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 10px;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(var(--linea), color-mix(in oklab, var(--linea) 15%, transparent));
}

.hilo__hito { position: relative; padding-bottom: var(--e-4); }
.hilo__hito:last-child { padding-bottom: 0; }

.hilo__punto {
  position: absolute;
  left: calc(var(--e-5) * -1 + 1px);
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background-color: var(--linea);
}

/* Lo último que pasó es lo que importa: solo ese va macizo */
.hilo__hito:first-child .hilo__punto { background-color: var(--indigo-vivo); }

.hilo__cuando {
  font-size: var(--ui-caption2);
  font-weight: 600;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-3);
}

.hilo__que {
  margin-top: 2px;
  font-size: var(--ui-footnote);
  line-height: 1.5;
  color: var(--tinta-2);
}

/* ============================================================================
   EL DINERO DE VERDAD (fase 5)
   ============================================================================ */

/* ----- El semáforo del cobro ------------------------------------------------
   Un carril que contesta dos preguntas a la vez. El carril entero es la
   VENTANA DE PAGO —de la emisión al vencimiento—, el relleno macizo es lo que
   ya has cobrado y el hueco lo que falta. La marca es hoy: se ve de un golpe
   cuánto plazo queda. Si el plazo se pasó, el hueco se tiñe de rojo, que es
   literalmente el tramo sobrante.

   Va dentro de la fila, debajo del pie, y solo en las facturas abiertas: una
   cobrada no tiene cuenta atrás y dibujarle un carril lleno sería ruido en la
   mitad de la lista. */

.cobro {
  position: relative;
  display: block;
  height: 4px;
  margin-top: 7px;
  border-radius: var(--r-full);
  background-color: var(--lienzo-3);
}

.cobro--tarde { background-color: color-mix(in oklab, var(--rojo) 32%, var(--lienzo-3)); }

.cobro__hecho {
  position: absolute;
  inset: 0;
  border-radius: var(--r-full);
  background-color: var(--salvia);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

/* Hoy. Sobresale por arriba y por abajo para que se lea como una marca sobre
   el carril y no como un trozo del carril. */
.cobro::after {
  content: "";
  position: absolute;
  left: var(--h, 0%);
  top: -3px;
  bottom: -3px;
  width: 1.5px;
  border-radius: var(--r-full);
  background-color: var(--tinta-fuerte);
  translate: -0.75px 0;
}

.cobro--tarde::after { background-color: var(--rojo); }

/* El grande, en la ficha */
.cobro--grande { height: 10px; margin-top: var(--e-3); }
.cobro--grande::after { top: -4px; bottom: -4px; width: 2px; }

.cobro__lectura {
  margin: var(--e-3) 0 0;
  font-size: var(--ui-footnote);
  line-height: 1.55;
  color: var(--tinta-2);
  text-wrap: pretty;
}

.cobro__lectura strong { color: var(--tinta-fuerte); font-weight: 600; }

/* ----- El saldo -------------------------------------------------------------
   Emitido, cobrado y lo que te deben. Pares nombre-valor, como los datos
   fiscales, porque eso es lo que son y porque el lector de pantalla los tiene
   que leer emparejados. */

.saldo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px var(--e-3);
  margin: var(--e-3) 0 0;
}

.saldo__par { display: contents; }

.saldo dt {
  font-size: var(--ui-caption2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-etiqueta);
  color: var(--tinta-3);
  align-self: center;
}

.saldo dd {
  margin: 0;
  font-size: var(--ui-sub);
  color: var(--tinta-fuerte);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.saldo__par--debe dt { color: var(--ambar); }
.saldo__par--debe dd { font-weight: 600; }

/* ----- La cinta del mes -----------------------------------------------------
   Cada ingreso cae como una muesca en su día, con la altura proporcional al
   importe. Lo que se ve no son los ingresos: es el RITMO, y sobre todo los
   HUECOS —los días en que no entró nada, que son casi todos—. Una lista de
   seis filas no puede enseñar eso.

   Las barras no animan su altura: crecen con scaleY desde abajo. Animar la
   altura es rehacer el layout en cada fotograma. */

.cinta {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 76px;
  margin-top: var(--e-3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--linea-suave);
}

.cinta__dia { position: relative; flex: 1 1 0; min-width: 0; height: 100%; }

.cinta__dia::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--h, 3px);
  min-height: 3px;
  border-radius: var(--r-full);
  background-color: var(--lienzo-3);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--d-medio) var(--ease-salida) var(--d, 0s);
}

.cinta--dibujada .cinta__dia::before { transform: scaleY(1); }

.cinta__dia--lleno::before { background-color: var(--salvia); }

/* Los días que todavía no han llegado se ven, pero se ven menos: el mes está
   a medias y fingir lo contrario es lo que hace que una maqueta se note. */
.cinta__dia--porvenir::before { opacity: 0.45; }

/* Hoy: un punto debajo de la línea, fuera de las barras. */
.cinta__dia--hoy::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 4px;
  height: 4px;
  border-radius: var(--r-full);
  background-color: var(--tinta-fuerte);
  translate: -50% 0;
}

.cinta__escala {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-size: var(--ui-caption2);
  color: var(--tinta-3);
}

.cinta__lectura {
  margin: var(--e-3) 0 0;
  font-size: var(--ui-footnote);
  line-height: 1.55;
  color: var(--tinta-2);
  text-wrap: pretty;
}

.cinta__lectura strong { color: var(--tinta-fuerte); font-weight: 600; }

/* ----- La cascada -----------------------------------------------------------
   Siete peldaños desde lo que emitiste hasta lo que es tuyo de verdad. Cada
   barra mide lo que QUEDA después de esa resta, así que se ve encoger: eso es
   lo que una tabla de siete números no enseña.

   El salto entre Emitido y Cobrado se marca aparte porque no es un impuesto
   ni un gasto: es dinero que ya has trabajado y que estás financiando tú. */

.cascada {
  list-style: none;
  margin: var(--e-3) 0 0;
  padding: 0;
}

.cascada__paso {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px var(--e-3);
  align-items: baseline;
  padding: 9px 0;
}

.cascada__paso + .cascada__paso { border-top: 1px solid var(--linea-suave); }
.cascada__paso:first-child { padding-top: 0; }

.cascada__rotulo { font-size: var(--ui-sub); color: var(--tinta-2); }

.cascada__cifra {
  font-size: var(--ui-sub);
  font-weight: 600;
  color: var(--tinta-fuerte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cascada__barra {
  grid-column: 1 / -1;
  position: relative;
  height: 5px;
  margin-top: 2px;
  border-radius: var(--r-full);
  background-color: var(--lienzo-3);
  overflow: hidden;
}

.cascada__barra::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-full);
  background-color: var(--indigo);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  transition: transform var(--d-medio) var(--ease-salida);
}

.cascada__nota {
  grid-column: 1 / -1;
  font-size: var(--ui-caption2);
  color: var(--tinta-3);
  line-height: 1.45;
}

.cascada__salto {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 3px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background-color: color-mix(in oklab, var(--ambar) 16%, transparent);
  color: var(--ambar);
  font-size: var(--ui-caption2);
  font-weight: 600;
}

/* Lo que se va va en rojo y sin barra propia: una resta no es un saldo. */
.cascada__paso--resta .cascada__cifra { color: var(--rojo); }
.cascada__paso--resta .cascada__rotulo { color: var(--tinta-3); }

/* Los dos resultados —rendimiento y lo tuyo— se leen más fuerte porque son
   las dos únicas cifras de las siete que contestan una pregunta. */
.cascada__paso--hito .cascada__rotulo { color: var(--tinta-fuerte); font-weight: 600; }
.cascada__paso--hito .cascada__barra::after { background-color: var(--salvia); }

/* ----- Impuestos: lo que hay que apartar ------------------------------------ */

/* `.display` pone la familia y el peso, pero NO el tamaño: el tamaño lo
   pone cada sitio. Sin esta línea la cifra grande de Impuestos salía a 17 px,
   igual de grande que el texto de al lado. */
.aparte__cifra {
  margin: var(--e-2) 0 0;
  font-size: var(--fs-hero);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ambar);
}

.aparte__pie { margin: var(--e-2) 0 0; font-size: var(--ui-caption); line-height: 1.5; }
.aparte__pie strong { color: var(--tinta-fuerte); font-weight: 600; }

/* ----- Un ingreso que no viene de ninguna factura --------------------------- */

.procedencia {
  margin: var(--e-3) 0 0;
  padding: 11px var(--e-3);
  border-radius: var(--r-md);
  background-color: var(--lienzo-2);
  font-size: var(--ui-footnote);
  line-height: 1.5;
  color: var(--tinta-3);
  text-wrap: pretty;
}


/* ----- El desglose del presupuesto ---------------------------------------- */

.conceptos { margin-top: var(--e-3); }

/* Cada línea es un botón mientras el presupuesto esté en juego, y un `span`
   con la misma pinta cuando ya está decidido. La raya que las separa cuelga
   del `li` y no de la línea: el fondo del pulsado tiene esquinas redondeadas
   y una raya dentro de él se vería cortada en los extremos. */
.concepto {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  width: 100%;
  padding: 9px 6px;
  margin-inline: -6px;
  text-align: left;
  border-radius: var(--r-sm);
  transition: background-color var(--d-micro) var(--ease-entrada),
              transform var(--d-snappy) var(--muelle-snappy);
}

.conceptos > li + li { border-top: 1px solid var(--linea-suave); }
.conceptos > li:first-child .concepto { padding-top: 0; }

button.concepto:active {
  background-color: color-mix(in oklab, var(--tinta) 5%, transparent);
  transform: scale(0.988);
}

.concepto__texto {
  min-width: 0;
  font-size: var(--ui-footnote);
  color: var(--tinta-2);
}

.concepto__importe {
  flex: none;
  font-size: var(--ui-footnote);
  font-weight: 600;
  color: var(--tinta-fuerte);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ----- Condiciones y validez -----------------------------------------------
   Las condiciones son el contrato —cómo se paga, qué entra y qué no— y la
   validez es su fecha de caducidad. Antes esa caducidad la contaba «dónde
   está», que es la conversación con el cliente, y se decía dos veces. */

.condiciones {
  margin: var(--e-3) 0 0;
  font-size: var(--ui-footnote);
  line-height: 1.55;
  color: var(--tinta-2);
  text-wrap: pretty;
}

.condiciones__validez {
  margin: var(--e-2) 0 0;
  padding-top: var(--e-2);
  border-top: 1px solid var(--linea-suave);
  font-size: var(--ui-caption);
  color: var(--tinta-3);
}

.condiciones__validez strong { color: var(--tinta-fuerte); font-weight: 600; }

/* ----- El botón de quitar de una hoja ---------------------------------------
   Una fila más del grupo de campos, con la raya que la separa de lo de arriba
   y centrada: es una acción, no un dato. En rojo porque no se deshace. */

.borrar {
  width: 100%;
  min-height: 48px;
  padding: 11px var(--e-3);
  border-top: 1px solid var(--linea-suave);
  font-size: var(--ui-sub);
  font-weight: 550;
  color: var(--rojo);
  text-align: center;
  transition: background-color var(--d-micro) var(--ease-entrada);
}

.borrar:active { background-color: color-mix(in oklab, var(--rojo) 10%, transparent); }

.sumas {
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea);
}

.suma {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  padding: 3px 0;
  font-size: var(--ui-footnote);
  color: var(--tinta-3);
}

.suma dd { font-variant-numeric: tabular-nums; }

.suma--total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--linea-suave);
  font-size: var(--ui-sub);
  font-weight: 650;
  color: var(--tinta-fuerte);
}

.presupuesto__estado {
  margin-top: var(--e-3);
  font-size: var(--ui-footnote);
  line-height: 1.5;
  color: var(--tinta-2);
}

.presupuesto__estado strong { color: var(--tinta-fuerte); font-weight: 650; }

/* ----- El libro -----------------------------------------------------------

   `.cubierta` y no `.portada`: ya había una `.portada` —la de la pantalla de
   bienvenida, que ocupa el alto entero— y esta, que viene después en la hoja y
   tiene la misma especificidad, le ganaba. Resultado: al cerrar sesión, la
   pantalla de entrar salía EN BLANCO, con todo su contenido apretado en una
   caja de 52 × 68 px y desbordado 132 px por la izquierda. Ni un error, ni un
   aviso: dos componentes que no tienen nada que ver llamándose igual. */

.cubierta {
  display: grid;
  place-items: center;
  width: 52px;
  height: 68px;
  border-radius: 4px 10px 10px 4px;
  background-color: var(--indigo);
  color: var(--sobre-color);
  /* El canto del lomo, que es lo que hace que parezca un libro y no una caja */
  box-shadow: inset 5px 0 0 color-mix(in oklab, #000 18%, transparent), var(--sombra-1);
}

.cubierta .ico { width: 22px; height: 22px; translate: 3px 0; }
.cubierta--ambar { background-color: var(--ambar); }

.libro__carril--ficha { height: 10px; margin-top: var(--e-3); }

.citas { margin-top: var(--e-3); }

.cita {
  position: relative;
  padding: var(--e-3) 0 var(--e-3) var(--e-4);
}

.cita + .cita { border-top: 1px solid var(--linea-suave); }
.cita:first-child { padding-top: 0; }
.cita:last-child { padding-bottom: 0; }

.cita::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--e-3);
  bottom: var(--e-3);
  width: 2px;
  border-radius: 1px;
  background-color: var(--ambar);
}

.cita:first-child::before { top: 2px; }
.cita:last-child::before { bottom: 2px; }

.cita__texto {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces);
  font-size: var(--ui-sub);
  font-weight: 400;
  line-height: 1.5;
  color: var(--tinta-fuerte);
}

.cita__pagina {
  margin-top: 4px;
  font-size: var(--ui-caption);
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

/* ----- La persona: cuánto hace que no la ves ------------------------------
   La barra no mide progreso, mide DEUDA: se llena según lo que llevas sin
   verla contra lo que te propusiste. Pasarse tiene que verse, así que la
   escala llega al doble del objetivo y el objetivo va marcado. */

.deuda { margin-top: var(--e-4); }

.deuda__carril {
  position: relative;
  height: 10px;
  border-radius: var(--r-full);
  background-color: var(--lienzo-3);
  overflow: hidden;
}

.deuda__lleno {
  display: block;
  width: calc(var(--p, 0) * 100%);
  height: 100%;
  border-radius: inherit;
  background-color: var(--salvia);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--muelle-smooth);
}

.deuda--dibujada .deuda__lleno { transform: scaleX(1); }
.deuda--debe .deuda__lleno { background-color: var(--ambar); }

.deuda__carril::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1.5px;
  border-radius: 1px;
  background-color: color-mix(in oklab, var(--tinta-fuerte) 42%, transparent);
}

.deuda__lectura {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
  font-size: var(--ui-footnote);
  line-height: 1.5;
  color: var(--tinta-2);
}

.deuda__lectura strong { color: var(--tinta-fuerte); font-weight: 650; }
.deuda__lectura--debe strong { color: var(--ambar); }

.recordar__rotulo {
  font-size: var(--ui-caption2);
  font-weight: 600;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-3);
}

.recordar__texto {
  margin-top: 5px;
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces);
  font-size: var(--ui-sub);
  line-height: 1.5;
  color: var(--tinta-fuerte);
}

.ficha-cabeza .sello { margin-top: var(--e-3); }


/* ==========================================================================
   29. PROYECTO · EL MARGEN
   --------------------------------------------------------------------------
   El número que ningún gestor de proyectos enseña y que decide si el encargo
   valió la pena: a cuántas horas deja de pagarte tu tarifa. Sale de dividir
   lo que cobras entre lo que cuesta tu hora, y a partir de ahí la barra se
   pone roja. Si la marca del presupuesto de horas cae DENTRO del rojo, el
   proyecto ya nació mal presupuestado — y eso se ve sin leer nada.
   ========================================================================== */

.margen { margin-top: var(--e-4); }

.margen__carril {
  position: relative;
  height: 12px;
  border-radius: var(--r-full);
  background-color: var(--lienzo-3);
  overflow: hidden;
}

/* La zona en la que ya trabajas por debajo de tu tarifa */
.margen__peligro {
  position: absolute;
  left: calc(var(--u, 100%) );
  right: 0;
  top: 0;
  bottom: 0;
  background-color: var(--rojo-suave);
}

.margen__hecho {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--p, 0%);
  border-radius: var(--r-full);
  background-color: var(--salvia);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.75s var(--muelle-smooth);
}

.margen--dibujado .margen__hecho { transform: scaleX(1); }
.margen--pasado .margen__hecho { background-color: var(--rojo); }

/* La marca del presupuesto de horas. Va por encima de todo: es la que hay
   que poder leer contra cualquier fondo. */
.margen__tope {
  position: absolute;
  left: var(--t, 100%);
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 2.5px;
  margin-left: -1.25px;
  background-color: var(--tinta-fuerte);
}

.margen__escala {
  position: relative;
  height: 15px;
  margin-top: 6px;
  border-top: 1px solid var(--linea-suave);
}

.margen__marca {
  position: absolute;
  top: 4px;
  left: var(--x, 0%);
  translate: -50% 0;
  font-size: var(--ui-caption2);
  color: var(--tinta-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.margen__marca:first-child { translate: 0 0; }
.margen__marca:last-child  { translate: -100% 0; }

.margen__lectura {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
  font-size: var(--ui-footnote);
  line-height: 1.5;
  color: var(--tinta-2);
}

.margen__lectura strong { color: var(--tinta-fuerte); font-weight: 650; }
.margen__lectura--flojo strong { color: var(--rojo); }

/* El tablero: tres columnas no caben en 393 px, así que se ve una cada vez
   y los chips llevan la cuenta. Es lo que hace cualquier tablero en móvil,
   y además evita el carrusel horizontal dentro de una tarjeta. */
/* Las tres pastillas se apoyan en la tarjeta, no en un carril.

   «.filtros» está pensado para un carril pegajoso a ancho de pantalla, y por
   eso trae velo de papel, desenfoque, sangrado a los bordes y 20 px de
   acolchado lateral. Dentro de una tarjeta ninguna de esas razones existe, y
   las tres juntas hacían tres destrozos: dibujaban el rectángulo gris que
   sobraba, metían las pastillas 20 px hacia dentro respecto al título —que se
   apoya en el borde de contenido— y dejaban la tercera cortada por el canto,
   porque 356 px de pastillas no caben en los 301 de la tarjeta.

   El modificador solo pisaba el sangrado. Ahora desmonta el carril entero. */
.filtros--tablero {
  position: static;
  margin: var(--e-3) 0 var(--e-2);
  padding: 0;
  overflow: visible;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Tres columnas del mismo ancho: el tablero tiene tres estados y ninguno pesa
   más que otro. De paso caben las tres a la vez y se acabó el carrusel. */
.filtros--tablero .filtro {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 6px;
  font-size: var(--ui-caption);
  text-align: center;
  white-space: nowrap;
}

.filtros--tablero .filtro b { font-weight: 650; opacity: 0.55; }


/* ==========================================================================
   30. CLIENTE · CONTACTOS
   ========================================================================== */

.contactos { margin-top: var(--e-3); }


/* Un día con cargo es un botón; uno vacío, no. Tocarlo cuenta lo que pasó ESE
   día, que es para lo que sirve un calendario y no solo para verlo.
   El elegido se marca con el mismo tinte que un chip pulsado: no hace falta
   un color nuevo para decir «este». */
.calendario__dia--elegido {
  background-color: color-mix(in oklab, var(--tinta) 8%, transparent);
  color: var(--tinta-fuerte);
  font-weight: 600;
}

button.calendario__dia {
  transition: transform var(--d-snappy) var(--muelle-snappy),
              background-color var(--d-micro) var(--ease-entrada);
}

button.calendario__dia:active { transform: scale(0.88); }


/* ============================================================================
   PERSONAL III · NUTRICIÓN (fase 9)
   ============================================================================ */

/* ----- El carril del día ----------------------------------------------------
   La idea que organiza la pantalla: el objetivo NO es una línea fija. El carril
   entero mide el objetivo de hoy —la base más lo que has ganado moviéndote— y
   la muesca marca dónde estaba la base. Lo que queda a su derecha es el trozo
   que te has ganado esta mañana, y verlo aparecer es toda la idea.

   Es el mismo mecanismo que las barras de macros, que ya lo tenían: un carril,
   un relleno y una raya de objetivo. Ahí la raya está siempre al 80 % porque la
   escala va al objetivo por 1,25; aquí se mueve, porque el objetivo se mueve. */

.carril-dia {
  position: relative;
  height: 12px;
  margin-top: var(--e-3);
  border-radius: var(--r-full);
  background-color: var(--lienzo-3);
  overflow: hidden;
}

.carril-dia__lleno {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: calc(var(--comido, 0) * 100%);
  border-radius: var(--r-full);
  background-color: var(--indigo-vivo);
  /* Se anima la VARIABLE, registrada en base.css, y el ancho la sigue. */
  transition: --comido var(--d-medio) var(--muelle-smooth);
}

.carril-dia--pasado .carril-dia__lleno { background-color: var(--ambar); }

/* El trozo ganado: de la muesca al final, con otra textura para que se lea
   como lo que es —terreno que no estaba ahí esta mañana— y no como más carril. */
.carril-dia::after {
  content: "";
  position: absolute;
  left: calc(var(--base, 1) * 100%);
  right: 0;
  top: 0;
  bottom: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in oklab, var(--salvia) 26%, transparent) 0 3px,
    transparent 3px 7px);
  pointer-events: none;
}

.carril-dia__base {
  position: absolute;
  left: calc(var(--base, 1) * 100%);
  top: -3px;
  bottom: -3px;
  width: 1.5px;
  translate: -0.75px 0;
  border-radius: 1px;
  background-color: color-mix(in oklab, var(--tinta-fuerte) 48%, transparent);
}

.carril-dia__pie {
  margin: 7px 0 0;
  font-size: var(--ui-caption);
  color: var(--tinta-3);
}

.carril-dia__pie strong { color: var(--salvia); font-weight: 650; }


/* ----- La balanza -----------------------------------------------------------
   A la izquierda lo que entra, a la derecha lo que sale, y la viga se inclina.
   El desnivel ES la respuesta: dos cifras y una resta de cabeza es trabajo que
   la pantalla puede hacer por ti. */

.balanza {
  position: relative;
  height: 118px;
  margin-top: var(--e-3);
}

.balanza__viga {
  position: absolute;
  /* A un 22 % de cada lado, no a un 8 %: los platillos cuelgan centrados en el
     extremo del brazo, así que la mitad de su ancho sobresale. Con el 8 % se
     salían de la tarjeta por los dos lados. */
  left: 22%;
  right: 22%;
  top: 22px;
  height: 2px;
  border-radius: var(--r-full);
  background-color: var(--tinta-3);
  rotate: var(--inclina, 0deg);
  transition: --inclina var(--d-medio) var(--muelle-smooth);
}

.balanza__viga::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  width: 8px;
  height: 8px;
  translate: -50% 0;
  border-radius: var(--r-full);
  background-color: var(--tinta-fuerte);
}

.balanza__brazo {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Los platillos cuelgan RECTOS aunque la viga esté torcida: si giraran con
     ella, las cifras se leerían en diagonal.
     Y contrarrotan sobre el PUNTO DE CUELGUE, que es su borde de arriba. Con
     el origen por defecto —el centro, a 43 px de ahí— el brazo entero se
     desplazaba cuatro píxeles al girar y el hilo se despegaba de la punta de
     la viga: los platillos no colgaban de los extremos. */
  transform-origin: 50% 0;
  rotate: calc(var(--inclina, 0deg) * -1);
}

.balanza__brazo--izq { left: 0; translate: -50% 0; }
.balanza__brazo--der { right: 0; translate: 50% 0; }

.balanza__hilo {
  width: 1px;
  height: 22px;
  background-color: var(--linea);
}

.balanza__platillo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 72px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background-color: var(--lienzo-2);
}

.balanza__platillo b {
  font-size: var(--ui-title3);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-fuerte);
}

.balanza__platillo i {
  font-style: normal;
  font-size: var(--ui-caption2);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* Lo que entra pesa más de lo que sale: el platillo de la izquierda se tiñe,
   porque es el que está ganando. */
.balanza--sobra .balanza__brazo--izq .balanza__platillo {
  background-color: var(--ambar-suave);
}
.balanza--sobra .balanza__brazo--izq .balanza__platillo b { color: var(--ambar); }

.balanza__pie {
  position: absolute;
  left: 50%;
  top: 24px;
  width: 2px;
  height: 34px;
  translate: -50% 0;
  background-color: var(--linea);
}

.balanza__desnivel {
  margin: var(--e-3) 0 0;
  font-size: var(--ui-footnote);
  line-height: 1.5;
  color: var(--tinta-2);
  text-wrap: pretty;
}

.balanza__desnivel strong { color: var(--tinta-fuerte); font-weight: 600; }


/* ----- Los cuatro huecos ---------------------------------------------------- */

/* Un hueco que todavía no toca se apaga TIÑENDO, no bajándole la opacidad a
   la fila entera: con 0.62 el pie de «A las 21:00» caía a 2,46:1 de contraste
   —AA pide 4,5— y cada fila es un botón que lleva a la biblioteca. Texto
   interactivo ilegible a cambio de nada, porque el chip del reloj ya dice que
   eso aún no ha pasado. */
.hueco--pronto .chip { opacity: 0.55; }
.hueco--pronto .fila__titulo { color: var(--tinta-2); }
.hueco--vacio .fila__titulo { color: var(--tinta-2); }
.chip--lienzo { background-color: var(--lienzo-2); color: var(--tinta-3); }


/* ----- La semana ------------------------------------------------------------ */

.sem-nutri {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 92px;
  margin-top: var(--e-3);
}

.sem-nutri__dia {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  height: 100%;
}

.sem-nutri__carril {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  border-radius: var(--r-sm);
  background-color: var(--lienzo-2);
  overflow: hidden;
}

.sem-nutri__lleno {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--h, 0%);
  border-radius: var(--r-sm);
  background-color: color-mix(in oklab, var(--indigo) 62%, var(--lienzo-2));
}

.sem-nutri__lleno--pasado { background-color: var(--ambar); }

/* La raya del objetivo de CADA día, que no es la misma todos los días porque
   lleva dentro lo que se ganó moviéndose. */
.sem-nutri__meta {
  position: absolute;
  left: 0;
  right: 0;
  /* El día cuyo objetivo fija el tope de la semana sale al 100 %, y a esa
     altura la raya queda ENTERA por encima del carril: el overflow la borra y
     el día con el objetivo más alto —el que más interesa marcar— era el único
     sin rayita. Se le deja su grosor dentro. */
  bottom: clamp(0px, var(--h, 0%), calc(100% - 1.5px));
  height: 1.5px;
  background-color: color-mix(in oklab, var(--tinta-fuerte) 40%, transparent);
}

.sem-nutri__letra {
  font-size: var(--ui-caption2);
  font-weight: 600;
  color: var(--tinta-3);
}

.sem-nutri__dia--hoy .sem-nutri__letra { color: var(--tinta-fuerte); }

.sem-nutri__lectura {
  margin: var(--e-3) 0 0;
  font-size: var(--ui-footnote);
  line-height: 1.5;
  color: var(--tinta-2);
  text-wrap: pretty;
}

.sem-nutri__lectura strong { color: var(--tinta-fuerte); font-weight: 600; }


/* ----- El carril tricolor ---------------------------------------------------
   En cada fila de la biblioteca, en miniatura: reconoces un alimento por su
   forma antes de leer una cifra. Un aceite es una barra índigo entera; un
   pollo, una verde entera; el arroz, ámbar.

   Reparte ENERGÍA y no gramos: un gramo de grasa son nueve kilocalorías y uno
   de proteína, cuatro. Repartiendo gramos, el aceite saldría casi vacío. */

.tricolor {
  display: flex;
  flex: 0 0 auto;
  width: 54px;
  height: 7px;
  border-radius: var(--r-full);
  background-color: var(--lienzo-3);
  overflow: hidden;
}

.tricolor i { width: var(--w, 0%); height: 100%; }
.tricolor__p { background-color: var(--salvia); }
.tricolor__c { background-color: var(--ambar); }
.tricolor__g { background-color: var(--indigo); }

.tricolor--mini { width: 46px; height: 6px; }
.tricolor--grande { width: 100%; height: 12px; margin-top: var(--e-3); }

.tri-pie {
  display: flex;
  justify-content: space-between;
  gap: var(--e-2);
  margin-top: 7px;
  font-size: var(--ui-caption2);
  color: var(--tinta-3);
}

.tri-pie span { white-space: nowrap; }
.tri-pie__p { color: var(--salvia); }
.tri-pie__c { color: var(--ambar); }
.tri-pie__g { color: var(--indigo); }


/* ----- La biblioteca de alimentos ------------------------------------------- */

.alimentos {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.alimento + .alimento { border-top: 0.5px solid var(--linea); }

.alimento__fila {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  min-height: 54px;
  padding: 9px 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.alimento__texto { flex: 1 1 auto; min-width: 0; }

.alimento__nombre {
  display: block;
  font-size: var(--ui-sub);
  font-weight: 550;
  color: var(--tinta-fuerte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alimento__pie {
  display: block;
  margin-top: 1px;
  font-size: var(--ui-caption2);
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

.alimento__pie i { font-style: normal; opacity: 0.75; }

.alimento--abierto .alimento__nombre { color: var(--indigo); }


/* ----- La regla de gramos ---------------------------------------------------
   Con las muescas imantadas en las raciones REALES de cada alimento. Un campo
   numérico te haría escribir «125» con el teclado; la regla te lo pone donde el
   dedo ya estaba. Y al soltar, si estás cerca de una ración de verdad, se va a
   ella: nadie quiere 127 g de yogur, quiere un yogur. */

.gramos {
  padding: var(--e-3) 0 var(--e-4);
  animation: gramosAbre var(--d-rapido) var(--ease-entrada);
}

@keyframes gramosAbre {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

.gramos__cifra {
  margin: 0;
  font-size: var(--ui-title3);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-fuerte);
}

.gramos__cifra strong { font-weight: 650; }
.gramos__cifra span { font-size: var(--ui-footnote); font-weight: 450; color: var(--tinta-3); }

.gramos__pista {
  position: relative;
  height: 46px;
  margin-top: var(--e-3);
  /* La pista se toca y se arrastra: el navegador no puede quedarse el gesto
     horizontal, pero el vertical sigue siendo scroll. */
  touch-action: pan-y;
  cursor: ew-resize;
}

.gramos__pista::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 15px;
  height: 4px;
  border-radius: var(--r-full);
  background-color: var(--lienzo-3);
}

.gramos__lleno {
  position: absolute;
  left: 0;
  top: 15px;
  height: 4px;
  width: calc(var(--p, 0) * 100%);
  border-radius: var(--r-full);
  background-color: var(--indigo);
}

.gramos__pomo {
  position: absolute;
  left: calc(var(--p, 0) * 100%);
  top: 9px;
  width: 16px;
  height: 16px;
  translate: -50% 0;
  border-radius: var(--r-full);
  background-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--lienzo), var(--sombra-1);
}

.gramos__pista--moviendo .gramos__pomo { scale: 1.15; }

/* La muesca cruza la pista y su número va DEBAJO del pomo, no a su altura: a
   media regla el pomo tapaba justo la cifra que estabas eligiendo. */
.gramos__paso {
  position: absolute;
  left: var(--x, 0%);
  top: 9px;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Área de dedo alrededor de una muesca de dos píxeles: llega hasta la mitad
     del camino a su vecina —«--tacto», que calcula reglaGramos— menos un
     píxel, y como mucho a nueve. Fijo en nueve, dos muescas juntas se
     solapaban y la segunda, hermana posterior, se comía el toque de la
     primera: en la leche, tocar donde ponía «200» marcaba 250 g. El
     porcentaje se mide contra el ancho de la pista, que es la regla en la que
     están puestos los gramos.
     Y SIN margen negativo. El margen izquierdo corría la caja entera nueve
     píxeles a la izquierda, y con ella la marca: las muescas se pintaban
     fuera de su sitio mientras el pomo caía en el correcto, así que tocar una
     muesca movía el pomo nueve píxeles más allá de la rayita que habías
     tocado. Centrar una caja absoluta ya lo hace el translate; el relleno
     crece a los dos lados por igual. */
  padding: 4px max(2px, min(9px, calc(var(--tacto, 9px) - 1px))) 22px;
  cursor: pointer;
}

.gramos__paso i {
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background-color: var(--tinta-3);
}

/* La cifra va COLOCADA, no en el flujo. Contando para el ancho de la caja, el
   área de dedo medía lo que midiera el número —tres dígitos son diecisiete
   píxeles— y la caja volvía a pisar a la vecina por mucho que se afinara el
   relleno. Los 30 px son los 4 del relleno, los 12 de la marca y los 14 de
   aire que antes ponía el «gap». */
.gramos__paso b {
  position: absolute;
  top: 30px;
  left: 50%;
  translate: -50% 0;
  font-size: 9px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-3);
}

.gramos__paso--puesto i { background-color: var(--indigo); }
.gramos__paso--puesto b { color: var(--indigo); font-weight: 650; }

.gramos__macros {
  margin: var(--e-3) 0 0;
  font-size: var(--ui-footnote);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
}

.gramos__macros strong { color: var(--tinta-fuerte); font-weight: 650; }

.gramos__pie {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-3);
}


/* ----- El peso --------------------------------------------------------------
   Los puntos diarios en gris y la media móvil de siete en color. Las dos cosas
   a la vez: aquí se ve que la báscula ha subido tres días seguidos y la línea
   sigue bajando. */

/* Doble clase a propósito. El bloque de nutrición se escribió ENCIMA del de
   entrenamiento, así que con una sola clase estas dos reglas empataban en
   especificidad y perdían por orden: la curva de sesenta días se quedaba en
   los 108 px de «.curva-caja» y la media móvil, en el grosor de una curva
   cualquiera. Un modificador que no modifica nada no se ve venir. */
.curva-caja.curva-caja--peso { height: 138px; }

.peso__punto {
  position: absolute;
  left: calc(8px + (100% - 16px) * var(--x, 50) / 100);
  top: calc(8px + (100% - 16px) * var(--y, 50) / 100);
  translate: -50% -50%;
  width: 3.5px;
  height: 3.5px;
  border-radius: var(--r-full);
  background-color: var(--tinta-3);
}

.peso__punto--ultimo {
  width: 9px;
  height: 9px;
  background-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--lienzo-2);
}

.curva__linea.curva__linea--media { stroke: var(--indigo); stroke-width: 2; }

.curva__objetivo {
  stroke: var(--salvia);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  opacity: 0.8;
}

.peso__delta { font-variant-numeric: tabular-nums; }
.peso__delta--sube { color: var(--ambar); }
.peso__delta--baja { color: var(--salvia); }


@media (prefers-reduced-motion: reduce) {
  /* El brazo no declara transición: hereda «--inclina» de la viga y la sigue,
     así que parando la viga se para él. */
  .carril-dia__lleno,
  .balanza__viga { transition: none; }
  .gramos { animation: none; }
}


/* ============================================================================
   PERSONAL II · ENTRENAMIENTO (fase 8)
   ============================================================================ */

/* ----- La silueta ----------------------------------------------------------
   Dos cuerpos, de frente y de espalda, con una forma por zona. El dibujo se
   genera por script porque los músculos van por pares y el espejo tiene que
   salir exacto; escribir 48 formas a mano son 48 oportunidades de que el
   bíceps izquierdo quede dos píxeles más arriba que el derecho.

   No es anatomía, es vocabulario: formas simples donde la gente espera
   encontrarlas. Lo que tiene que funcionar es «toco el pecho y la lista se
   queda en pecho», y para eso hace falta que se reconozca, no que sea exacto. */

/* Dos cuerpos de 62 × 172 uno al lado del otro dan un lienzo más alto que
   ancho (140 × 186), y a 300 px de ancho eso son 400 px de alto: una tarjeta
   que se come la pantalla entera. Se fija el ALTO y el SVG se encarga de
   centrar lo que sobra a los lados, que es para lo que existe
   preserveAspectRatio. */
.silueta {
  display: block;
  width: 100%;
  height: 240px;
  margin: var(--e-3) auto 0;
}

/* La de la biblioteca es el control principal de su tarjeta: ahí las zonas
   tienen que ser lo bastante grandes para darles con el dedo. */
.silueta--filtro { height: 296px; }

.silueta__contorno { fill: var(--lienzo-2); }

.silueta__zona {
  fill: color-mix(in oklab, var(--tinta-3) 34%, var(--lienzo-2));
  transition: fill var(--d-medio) var(--ease-entrada);
}

.silueta__cara {
  font-family: var(--font-ui);
  font-size: 7px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-anchor: middle;
  fill: var(--tinta-3);
}

/* En el cuerpo de carga la zona se tiñe con lo que ha recibido esta semana.
   `--carga` va de 0 a 1 y lo escribe el JS por la RAÍZ, no en línea recta: con
   escala lineal las diecinueve zonas que reciben menos de diez minutos salen
   todas del mismo color y el cuerpo se lee como dos manchas y nada más. */
.silueta--carga .silueta__zona--tocada {
  fill: color-mix(in oklab, var(--indigo) calc(var(--carga, 0) * 86%), var(--lienzo-2));
}

/* La zona más descuidada de las que tu rutina SÍ trabaja, con su aro. Entre
   diecinueve zonas a cero, la que importa no es «la que menos tiene»: es la
   que te habías propuesto trabajar y llevas una semana sin tocar. */
.silueta--carga .silueta__zona--floja {
  fill: color-mix(in oklab, var(--ambar) 22%, var(--lienzo-2));
  stroke: var(--ambar);
  stroke-width: 1.4;
  paint-order: stroke;
}

/* En la biblioteca la silueta es un control, y tiene que parecerlo. */
.silueta--filtro .silueta__zona { cursor: pointer; }

.silueta--filtro .silueta__zona--elegida {
  fill: var(--indigo);
}

.silueta--filtro .silueta__zona:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 1px;
}

@media (hover: hover) {
  .silueta--filtro .silueta__zona:hover {
    fill: color-mix(in oklab, var(--indigo) 45%, var(--lienzo-2));
  }
}

.cuerpo__lectura {
  margin: var(--e-3) 0 0;
  font-size: var(--ui-footnote);
  line-height: 1.55;
  color: var(--tinta-2);
  text-wrap: pretty;
}

.cuerpo__lectura strong { color: var(--tinta-fuerte); font-weight: 600; }

.cuerpo__lectura + .tenue { margin-top: 6px; }


/* ----- La parrilla de la semana --------------------------------------------
   Siete casillas de lunes a domingo. Mantener pulsada una tarjeta y soltarla
   en otro día reescribe la rutina, y de ella salen los días del hábito, los
   bloques del calendario y las píldoras del riel. */

.parrilla {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-top: var(--e-3);
}

.parrilla__dia {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  min-width: 0;
  padding: 6px 2px;
  border-radius: var(--r-md);
  transition: background-color var(--d-rapido) var(--ease-entrada);
}

.parrilla__letra {
  font-size: var(--ui-caption2);
  font-weight: 650;
  letter-spacing: var(--tracking-etiqueta);
  color: var(--tinta-3);
  text-align: center;
}

.parrilla__dia--hoy { background-color: var(--lienzo-2); }
.parrilla__dia--hoy .parrilla__letra { color: var(--tinta-fuerte); }

/* Debajo del dedo mientras arrastras. */
.parrilla__dia--destino {
  background-color: color-mix(in oklab, var(--indigo) 14%, var(--lienzo-2));
  outline: 1.5px dashed var(--indigo);
  outline-offset: -1.5px;
}

.parrilla__tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 58px;
  /* Un píxel de acolchado lateral y no dos: medido con la fuente de verdad,
     «Empuje» pide 30,3 px y con dos acolchados quedaban 30. Se cortaba una
     palabra de seis letras por tres décimas de píxel, y los puntos suspensivos
     se ven más que la letra que falta. Con uno quedan 32. */
  padding: 5px 1px;
  border: 0;
  border-radius: var(--r-sm);
  background-color: var(--salvia-suave);
  color: var(--salvia);
  font: inherit;
  cursor: grab;
  touch-action: pan-y;
  transition: transform var(--d-snappy) var(--muelle-snappy);
}

.parrilla__tarjeta--indigo { background-color: var(--indigo-suave); color: var(--indigo); }
.parrilla__tarjeta--ambar  { background-color: var(--ambar-suave);  color: var(--ambar); }
.parrilla__tarjeta--salvia { background-color: var(--salvia-suave); color: var(--salvia); }

.parrilla__nombre {
  font-size: 8.5px;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
  /* Una sola palabra y una sola línea. Lo que no quepa se corta con puntos,
     pero con la primera palabra no debería llegar a pasar. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.parrilla__n {
  font-size: var(--ui-caption2);
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.parrilla__hueco {
  min-height: 58px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--linea);
}

/* El hundido del toque, SOLO cuando no está volando: con las dos reglas
   activas a la vez el 0,94 del :active se multiplicaba con el 1,08 del
   levantamiento y la tarjeta subía un 1,5 % en vez de un 8. */
.parrilla__tarjeta:active:not(.parrilla__tarjeta--volando) { transform: scale(0.94); }

/* Mientras vuela: sigue al dedo y deja pasar el puntero, que si no se tapa a
   sí misma y elementFromPoint nunca ve la casilla de debajo. */
.parrilla__tarjeta--volando {
  position: relative;
  z-index: 3;
  translate: var(--dx, 0) var(--dy, 0);
  scale: 1.08;
  cursor: grabbing;
  pointer-events: none;
  box-shadow: var(--sombra-2);
  transition: none;
}

.parrilla__lectura {
  margin: var(--e-3) 0 0;
  font-size: var(--ui-caption);
  line-height: 1.5;
  text-wrap: pretty;
}


/* ----- La tarjeta del día --------------------------------------------------
   `.sesion` ya existía sin una sola regla propia: solo tenía hijos y el
   modificador de pendiente. Ahora tiene tres estados y el tercero, el día
   libre, no es un pendiente sin marcar. */

.sesion--libre .sesion__sello {
  background-color: var(--lienzo-2);
  color: var(--tinta-3);
}

.sesion__pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-3);
}

.sesion__pie > *[hidden] { display: none; }

.ejercicio__abrir {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  width: 100%;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* La columna PREVIA de Symmetry: lo que hiciste la última vez, en gris
   fantasma. No es decoración — es lo que hace que nunca empieces de cero. */
.previa {
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

.previa__pie {
  margin: 6px 0 0;
  font-size: var(--ui-caption);
  line-height: 1.45;
}


/* ----- La ficha de un ejercicio -------------------------------------------- */

.chips-zona {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: var(--e-3);
}

.ficha-cabeza--izq .chips-zona { justify-content: flex-start; }

.chip-zona {
  padding: 3px 9px;
  border-radius: var(--r-full);
  background-color: var(--lienzo-2);
  font-size: var(--ui-caption2);
  font-weight: 550;
  color: var(--tinta-3);
}

.chip-zona--principal {
  background-color: var(--indigo-suave);
  color: var(--indigo);
}

.metrica__valor {
  margin: var(--e-3) 0 0;
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces);
  font-size: var(--ui-title1);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-fuerte);
}

.metrica__unidad {
  font-family: var(--font-ui);
  font-size: var(--ui-sub);
  font-weight: 550;
  letter-spacing: 0;
  color: var(--tinta-3);
}

.metrica__pildora {
  display: inline-block;
  margin: 5px 0 0;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background-color: var(--lienzo-2);
  font-size: var(--ui-caption);
  font-weight: 550;
  color: var(--tinta-3);
}

.metrica__pildora--bien { background-color: var(--salvia-suave); color: var(--salvia); }
.metrica__pildora--mal  { background-color: color-mix(in oklab, var(--rojo) 12%, var(--lienzo)); color: var(--rojo); }

/* La curva. El eje vertical se estira al rango REAL de los datos y no a cero:
   la 1RM de un press de banca va de 70 a 80, y contra un eje que empieza en
   cero eso es una raya plana. Y en cardio se lee al revés, porque bajar de
   ritmo es mejorar y subir en la gráfica tiene que seguir siendo ir mejor. */
.curva-caja {
  position: relative;
  height: 108px;
  margin-top: var(--e-3);
  padding: 8px;
  border-radius: var(--r-md);
  background-color: var(--lienzo-2);
}

.curva {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  overflow: visible;
}

.curva__linea {
  fill: none;
  stroke: var(--indigo);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.curva__punto {
  position: absolute;
  left: calc(8px + (100% - 16px) * var(--x, 50) / 100);
  top: calc(8px + (100% - 16px) * var(--y, 50) / 100);
  translate: -50% -50%;
  width: 5px;
  height: 5px;
  border-radius: var(--r-full);
  background-color: var(--indigo);
}

.curva__punto--ultimo {
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 3px var(--lienzo-2);
}

/* El récord marcado, que es lo que pedía la investigación de Symmetry. */
.curva__punto--record {
  width: 9px;
  height: 9px;
  background-color: var(--ambar);
  box-shadow: 0 0 0 3px var(--lienzo-2);
}

.records {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--e-2);
  padding: 0;
  list-style: none;
}

.record {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px var(--e-3);
  padding: 9px 0;
  border-bottom: 0.5px solid var(--linea);
}

.record:last-child { border-bottom: 0; }

.record__que { font-size: var(--ui-footnote); color: var(--tinta-2); }

.record__valor {
  font-size: var(--ui-sub);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-fuerte);
  text-align: right;
}

.record__cuando {
  grid-column: 1 / -1;
  font-size: var(--ui-caption2);
  color: var(--tinta-3);
}

.fila--alta { align-items: flex-start; }
.fila--alta .fila__pie { white-space: normal; overflow: visible; text-overflow: clip; }


/* ----- Las pastillas de serie ----------------------------------------------
   Cada serie es una pastilla ancha. Cambia de campos según el tipo —kilos por
   repeticiones en fuerza, distancia y tiempo en cardio, solo duración en los
   isométricos—: un componente con cuatro caras, no cuatro pantallas. */

.bloques-serie {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: 0;
  list-style: none;
}

.bloque-serie {
  padding: var(--e-4);
  border-radius: var(--r-lg);
  background-color: var(--cristal-fuerte);
  border: 0.5px solid var(--cristal-borde);
  box-shadow: inset 0 0.5px 0 var(--cristal-filo), var(--sombra-1);
}

/* Es una fila pulsable y medía 23 px de alto: el texto y nada más. Se le da
   sitio para el dedo sin mover nada de sitio, con el relleno hacia arriba y
   hacia abajo y un margen negativo que lo compensa. */
.bloque-serie__cabeza {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  width: 100%;
  min-height: 38px;
  margin: -7px 0;
  padding: 7px 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.bloque-serie__nombre {
  flex: 1 1 auto;
  font-size: var(--ui-sub);
  font-weight: 600;
  color: var(--tinta-fuerte);
}

.bloque-serie__zona {
  flex: 0 0 auto;
  font-size: var(--ui-caption2);
  color: var(--tinta-3);
}

.pastillas {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: var(--e-3) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pastilla;
}

.pastilla {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 38px;
  padding: 0 12px;
  border-radius: var(--r-md);
  background-color: var(--lienzo-2);
}

.pastilla__n {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  background-color: var(--lienzo);
  font-size: var(--ui-caption2);
  font-weight: 650;
  color: var(--tinta-3);
}

.pastilla__campos {
  flex: 1 1 auto;
  font-size: var(--ui-footnote);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-fuerte);
}

.pastilla--hecha {
  background-color: var(--salvia-suave);
}

.pastilla--hecha .pastilla__n { background-color: var(--salvia); color: var(--sobre-color); }

.boton-texto {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--ui-caption);
  font-weight: 550;
  color: var(--indigo);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .silueta__zona,
  .parrilla__dia,
  .parrilla__tarjeta { transition: none; }
  .parrilla__tarjeta:active { transform: none; }
}


/* ----- La sesión en vivo y su píldora ---------------------------------------
   La pantalla crítica de la fase y la única que se usa con el móvil en una
   mano. De ahí salen las medidas: pastillas de 46 px de alto, cifras grandes
   y nada que haga falta apuntar con precisión. */

.vivo__reloj { font-variant-numeric: tabular-nums; }

.vivo__descanso {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--e-3) 0 0;
  padding: 10px var(--e-4);
  border-radius: var(--r-full);
  background-color: var(--indigo-suave);
  font-size: var(--ui-footnote);
  color: var(--indigo);
}

.vivo__descanso strong { font-variant-numeric: tabular-nums; }
.vivo__descanso[hidden] { display: none; }

/* La pastilla de serie, en su versión usable: más alta, con la casilla a la
   izquierda y las cifras grandes. Sin marcar, los números van en gris fantasma
   porque son los de la última vez y todavía no has dicho que sean los de hoy. */
.pastilla--viva {
  min-height: 46px;
  cursor: pointer;
  touch-action: pan-y;
  transition: background-color var(--d-rapido) var(--ease-entrada);
}

.pastilla--viva .pastilla__n {
  width: 22px;
  height: 22px;
  background-color: var(--lienzo);
  color: var(--tinta-3);
}

.pastilla--viva .pastilla__n .ico {
  width: 13px;
  height: 13px;
  opacity: 0;
  transition: opacity var(--d-rapido) var(--ease-entrada);
}

.pastilla--viva.pastilla--hecha .pastilla__n { background-color: var(--salvia); color: var(--sobre-color); }
.pastilla--viva.pastilla--hecha .pastilla__n .ico { opacity: 1; }

.pastilla__campos {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
}

.pastilla__campo {
  font-size: var(--ui-sub);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-fuerte);
}

.pastilla__campo i {
  margin-left: 2px;
  font-size: var(--ui-caption2);
  font-style: normal;
  font-weight: 500;
  color: var(--tinta-3);
}

/* Gris fantasma: lo de la última vez, todavía sin confirmar. */
.pastilla--previa .pastilla__campo { color: var(--tinta-3); }
.pastilla--previa .pastilla__campo i { opacity: 0.7; }

/* Mientras arrastras para corregir. */
.pastilla--ajustando {
  background-color: color-mix(in oklab, var(--indigo) 12%, var(--lienzo-2));
  cursor: ew-resize;
}

.pastilla--viva:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

/* LA PÍLDORA VIVA. Sobre la barra, en el hueco que queda entre el orbe y el
   final del contenido. No cabe más alta: el lienzo reserva 146 px por abajo,
   la barra ocupa 83 y el orbe llega a 109, así que quedan 37 px de aire por
   encima del orbe. Con 44 px la cápsula pisaría la última fila de todas las
   listas, y por eso .app--con-capsula le añade su alto al scroll. */
.capsula {
  position: absolute;
  left: var(--margen);
  right: var(--margen);
  /* POR ENCIMA DEL ORBE, no pegada a la barra. Las cuentas: la barra ocupa de
     19 a 83 px del fondo y el orbe, que sobresale, de 53 a 109. Una cápsula de
     ancho completo pegada a la barra se le mete debajo justo por el centro,
     que es donde está el botón. A 117 px empieza por encima de los dos. */
  bottom: calc(var(--alto-indicador) - 3px + var(--alto-barra) + 34px);
  z-index: 74;                  /* por encima del chrome inferior, por debajo del telón (78) */
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  border: 0.5px solid var(--cristal-borde);
  border-radius: var(--r-full);
  background-color: var(--cristal);
  -webkit-backdrop-filter: var(--cristal-filtro);
  backdrop-filter: var(--cristal-filtro);
  box-shadow: inset 0 0.5px 0 var(--cristal-filo), var(--sombra-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--d-snappy) var(--muelle-snappy);
}

.capsula[hidden] { display: none; }
.capsula:active { transform: scale(0.98); }

.capsula__pulso {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background-color: var(--salvia);
  animation: capsulaPulso 2s var(--ease-entrada) infinite;
}

.capsula--descansando .capsula__pulso {
  background-color: var(--indigo);
  animation-duration: 1s;
}

@keyframes capsulaPulso {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.capsula__texto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.capsula__que {
  font-size: var(--ui-footnote);
  font-weight: 650;
  color: var(--tinta-fuerte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.capsula__detalle {
  font-size: var(--ui-caption2);
  color: var(--tinta-3);
}

.pastilla__campo--nota {
  font-size: var(--ui-caption2);
  font-weight: 500;
  color: var(--tinta-3);
}

.capsula__reloj {
  flex: 0 0 auto;
  font-size: var(--ui-sub);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-fuerte);
}

.capsula--descansando .capsula__reloj { color: var(--indigo); }

/* Con la cápsula puesta, el contenido tiene que apartarse: si no, se come la
   última fila de todas las listas de la app. */
/* Con la cápsula puesta, el contenido se aparta: la cápsula acaba a 163 px del
   fondo y el lienzo solo reservaba 146. Sin esto, la última fila de todas las
   listas de la app se quedaría debajo. */
.app--con-capsula .lienzo-scroll {
  padding-bottom: calc(var(--alto-barra) + var(--alto-indicador) + 3.75rem + 32px);
}

@media (prefers-reduced-motion: reduce) {
  .capsula__pulso { animation: none; }
  .capsula:active { transform: none; }
  .pastilla--viva,
  .pastilla--viva .pastilla__n .ico { transition: none; }
}


/* ============================================================================
   PERSONAL I (fase 7)
   ============================================================================ */

/* ----- Los dos pliegos ------------------------------------------------------
   El plan los llama «los dos sobres». La clase se llama .pliego porque
   --sobre-color ya es un token del kit y tener las dos cosas con el mismo
   nombre en la misma hoja es pedir una confusión.

   Se turnan con el reloj: el que toca está abierto con su pregunta a la vista
   y el otro queda en una línea. Plegar no es esconder —lo escrito se sigue
   leyendo debajo de la cabecera— porque lo que apuntaste por la mañana tiene
   que seguir ahí a las siete de la tarde. */

.pliego { padding: 0; overflow: hidden; }

.pliego__cabeza {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  min-height: 52px;
  padding: var(--e-3) var(--e-4);
  border: 0;
  background: none;
  font: inherit;
  color: var(--tinta-fuerte);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--d-rapido) var(--ease-entrada);
}

.pliego__cabeza:active { background-color: var(--lienzo-2); }
.pliego__cabeza--fija { cursor: default; }

.pliego__ico {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: var(--r-full);
  background-color: var(--lienzo-2);
  color: var(--tinta-3);
}

.pliego__ico .ico { width: 16px; height: 16px; }

/* Los mismos dos tonos en la pantalla y en la ficha de un día: allí los
   pliegos se identifican por su propio atributo, no por data-pliego, que
   es la llave con la que el JS los busca y tiene que seguir siendo única. */
.pliego[data-pliego="manana"] .pliego__ico,
.pliego[data-dia-manana] .pliego__ico { background-color: var(--ambar-suave); color: var(--ambar); }
.pliego[data-pliego="noche"] .pliego__ico,
.pliego[data-dia-noche] .pliego__ico { background-color: var(--indigo-suave); color: var(--indigo); }

.pliego__nombre {
  flex: 1 1 auto;
  font-size: var(--ui-sub);
  font-weight: 600;
}

.pliego__estado {
  flex: 0 0 auto;
  font-size: var(--ui-caption);
  color: var(--tinta-3);
}

/* Escrito, el rótulo deja de ser un aviso y pasa a ser un visto bueno. */
.pliego--hecho .pliego__estado { color: var(--salvia); }

.pliego__flecha {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--tinta-3);
  rotate: 90deg;
  transition: rotate var(--d-medio) var(--muelle-smooth);
}

.pliego--abierto .pliego__flecha { rotate: -90deg; }

.pliego__cuerpo { padding: 0 var(--e-4) var(--e-4); }

.pliego__pregunta {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces);
  font-size: var(--ui-title3);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--tinta-fuerte);
  text-wrap: pretty;
}

/* Por qué te pregunta eso y no otra cosa. Sin esta línea la pregunta de la
   mañana parece sacada de una plantilla, que es justo lo que no es. */
.pliego__porque {
  margin: 5px 0 0;
  font-size: var(--ui-footnote);
  line-height: 1.5;
  color: var(--tinta-3);
  text-wrap: pretty;
}

.pliego__porque:empty { display: none; }

.pliego__campo {
  display: block;
  width: 100%;
  margin-top: var(--e-3);
  padding: var(--e-3);
  border: 0.5px solid var(--linea);
  border-radius: var(--r-md);
  background-color: var(--lienzo-2);
  font: inherit;
  font-size: var(--ui-body);
  line-height: 1.55;
  color: var(--tinta-fuerte);
  resize: none;
}

.pliego__campo::placeholder { color: var(--tinta-3); }
.pliego__campo:focus { outline: none; border-color: var(--indigo); }

.pliego__pie {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--e-3);
}

.pliego__escrito {
  margin: 0;
  padding: 0 var(--e-4) var(--e-4) calc(var(--e-4) + 28px + var(--e-3));
  font-size: var(--ui-footnote);
  line-height: 1.6;
  color: var(--tinta-2);
  text-wrap: pretty;
}

/* En la ficha de un día los pliegos ya no se abren: son lo que se lee. */
.pliego--leido .pliego__escrito { padding-top: 0; }


/* Los hábitos que hoy no tocan, bajo la lista del día. */
.no-toca {
  margin: var(--e-3) 0 0;
  font-size: var(--ui-caption);
  line-height: 1.5;
  color: var(--tinta-3);
  text-wrap: pretty;
}


/* ----- La tira de contexto --------------------------------------------------
   Bajo la fecha de un día, lo que el resto del sistema sabe de él. Nada de
   esto se escribió en la entrada: se va a buscar donde estaba. */

.tira {
  display: flex;
  gap: var(--e-2);
  margin: var(--e-3) 0 var(--e-4);
  padding: 0;
  list-style: none;
}

.tira__celda {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--e-3) 10px;
  border-radius: var(--r-md);
  background-color: var(--lienzo-2);
  text-align: center;
}

.tira__ico { display: block; color: var(--tinta-3); }
.tira__ico .ico { width: 15px; height: 15px; }

.tira__dato {
  display: block;
  margin-top: 3px;
  font-size: var(--ui-sub);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-fuerte);
  white-space: nowrap;
}

.tira__pie {
  display: block;
  margin-top: 1px;
  font-size: var(--ui-caption2);
  line-height: 1.35;
  color: var(--tinta-3);
}

/* Lo que ese día se quedó corto. Sin este tono la tira son tres números
   iguales y hay que leerlos uno a uno para saber cuál era el malo. */
.tira__celda--flojo { background-color: color-mix(in oklab, var(--ambar) 12%, var(--lienzo-2)); }
.tira__celda--flojo .tira__ico,
.tira__celda--flojo .tira__dato { color: var(--ambar); }

.tira__nota {
  display: block;
  margin: var(--e-3) 0 0;
  font-size: var(--ui-caption);
  line-height: 1.5;
  text-wrap: pretty;
}

.dia__animo {
  margin: 0 0 3px;
  font-size: var(--ui-caption2);
  font-weight: 600;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-3);
}

.dia__animo--bien    { color: var(--salvia); }
.dia__animo--regular { color: var(--ambar); }
.dia__animo--mal     { color: var(--rojo); }

.dia__texto {
  margin: 0;
  font-size: var(--ui-body);
  line-height: 1.65;
  color: var(--tinta-2);
  text-wrap: pretty;
}

/* ----- El riel de 24 horas --------------------------------------------------
   Cada hábito con hora fija es una píldora en su hora real, y una aguja marca
   el minuto de ahora. Lo que se ve de un vistazo no son los hábitos: es LO QUE
   YA SE TE HA PASADO. Un hábito de las ocho, a las diez y sin marcar, no es un
   pendiente: es un fallo, y eso una lista de casillas no lo puede decir.

   Solo entran los de hora fija. Poner «leer por la noche» en un punto del riel
   sería inventarse un dato. */

.riel {
  position: relative;
  height: 46px;
  margin-top: var(--e-3);
  border-radius: var(--r-full);
  background-color: var(--lienzo-2);
}

.riel__pildora {
  position: absolute;
  top: 50%;
  left: var(--x, 50%);
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  background-color: var(--lienzo);
  box-shadow: var(--sombra-1);
  color: var(--tinta-3);
  transition: transform var(--d-snappy) var(--muelle-snappy);
}

.riel__pildora:active { transform: translate(-50%, -50%) scale(0.88); }
.riel__pildora .ico { width: 18px; height: 18px; }

/* Hecho es salvia; pasado y sin hacer, rojo. Lo que todavía no toca se queda
   en gris: no es ni bueno ni malo, es que aún no. */
.riel__pildora--hecha  { background-color: var(--salvia-suave); color: var(--salvia); }
.riel__pildora--pasada { background-color: color-mix(in oklab, var(--rojo) 14%, var(--lienzo)); color: var(--rojo); }

.riel__pildora span {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  translate: -50% 0;
  font-size: var(--ui-caption2);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-3);
  white-space: nowrap;
}

.riel__aguja {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: var(--x, 40%);
  width: 1.5px;
  translate: -0.75px 0;
  border-radius: var(--r-full);
  background-color: var(--rojo);
}

.riel__aguja::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  translate: -50% 0;
  border-radius: var(--r-full);
  background-color: var(--rojo);
}

.riel__escala {
  position: relative;
  height: 15px;
  margin-top: 22px;
}

.riel__escala span {
  position: absolute;
  left: var(--x, 0%);
  translate: -50% 0;
  font-size: var(--ui-caption2);
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

.riel__escala span:first-child { translate: 0 0; }
.riel__escala span:last-child  { translate: -100% 0; }

.riel__lectura {
  margin: var(--e-3) 0 0;
  font-size: var(--ui-footnote);
  line-height: 1.5;
  color: var(--tinta-2);
  text-wrap: pretty;
}

.riel__lectura strong { color: var(--tinta-fuerte); font-weight: 600; }


/* ----- El horizonte ---------------------------------------------------------
   Cada meta es un punto en su fecha límite y a la altura de su progreso. La
   línea tenue une los puntos de «lo que tocaría»: lo que queda por encima va
   adelantado y lo que queda por debajo, no.

   Una barra de progreso sola no puede decir eso, porque no sabe cuánto tiempo
   queda. El 58 % de un colchón a dos años es ir sobrado; el 66 % de una media
   maratón que corres en noviembre es ir tarde. */

.horizonte {
  position: relative;
  height: 148px;
  margin-top: var(--e-3);
  padding: 8px;
  border-radius: var(--r-md);
  background-color: var(--lienzo-2);
}

.horizonte__linea {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  overflow: visible;
}

.horizonte__linea polyline {
  fill: none;
  stroke: var(--tinta-3);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  opacity: 0.55;
}

/* Las mismas coordenadas que el SVG de la línea: 0 es el borde de dentro de
   la caja y 100 el de enfrente. Antes se colocaban con un 0,86 a ojo y punto y
   línea no medían igual, en la única tarjeta cuya lectura es comparar
   alturas. */
.horizonte__meta {
  position: absolute;
  left: calc(8px + (100% - 16px) * var(--x, 50) / 100);
  top: calc(8px + (100% - 16px) * var(--y, 50) / 100);
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  transition: transform var(--d-snappy) var(--muelle-snappy);
}

.horizonte__meta:active { transform: translate(-50%, -50%) scale(0.8); }

.horizonte__punto {
  width: 13px;
  height: 13px;
  border-radius: var(--r-full);
  box-shadow: 0 0 0 3px var(--lienzo-2);
}

.horizonte__meta--bien  .horizonte__punto { background-color: var(--salvia); }
.horizonte__meta--tarde .horizonte__punto { background-color: var(--ambar); }

.horizonte__escala {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: var(--ui-caption2);
  color: var(--tinta-3);
}

.horizonte__lectura {
  margin: var(--e-3) 0 0;
  font-size: var(--ui-footnote);
  line-height: 1.55;
  color: var(--tinta-2);
  text-wrap: pretty;
}

.horizonte__lectura strong { color: var(--tinta-fuerte); font-weight: 600; }

/* La marca de «dónde tocaría» dentro de la propia barra de la meta: sin ella,
   un 70 % es solo un 70 %. */
.barra-prog--meta { position: relative; }

.barra-prog--meta::after {
  content: "";
  position: absolute;
  left: calc(var(--e, 0) * 100%);
  top: -3px;
  bottom: -3px;
  width: 1.5px;
  translate: -0.75px 0;
  border-radius: var(--r-full);
  background-color: var(--tinta-fuerte);
}

.meta__juicio {
  margin: 7px 0 0;
  font-size: var(--ui-caption);
  color: var(--tinta-3);
}

.meta__juicio--bien  { color: var(--salvia); }
.meta__juicio--tarde { color: var(--ambar); }


/* ============================================================================
   EL CALENDARIO (fase 6)
   ============================================================================ */

/* ----- La rejilla del mes ---------------------------------------------------
   Siete columnas empezando en lunes, que es como se lee un mes aquí. Bajo el
   número de cada día, una barra de tres píxeles: el ANCHO dice cuánto pesa ese
   día contra el más cargado del mes, y el CORTE dice qué parte es de trabajo y
   qué parte es tuya. Dos preguntas en tres píxeles, y el mes se lee sin leer.

   El corte se hace con un degradado y no con dos nodos: una barra de 3 px con
   dos hijos dentro son sesenta elementos más en la rejilla para no ver nada. */

.mes__cabeza { align-items: center; }

/* La flecha de «mes siguiente» es la de volver del revés. Un icono menos que
   mantener, y son exactamente la misma forma. */
.mes__siguiente .ico { transform: rotate(180deg); }

.mes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px 2px;
  margin-top: var(--e-3);
}

.mes__ini {
  padding-bottom: 4px;
  font-size: var(--ui-caption2);
  font-weight: 600;
  color: var(--tinta-3);
  text-align: center;
}

.mes__hueco { aspect-ratio: 1; }

.mes__dia {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  font-size: var(--ui-footnote);
  color: var(--tinta-fuerte);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--d-micro) var(--ease-entrada),
              transform var(--d-snappy) var(--muelle-snappy);
}

.mes__dia:active { transform: scale(0.9); }
.mes__dia--vacio { color: var(--tinta-3); }

/* Hoy lleva anillo; el elegido, fondo. Son dos cosas distintas y el mismo día
   puede ser las dos. */
.mes__dia--hoy { box-shadow: inset 0 0 0 1.5px var(--tinta-fuerte); }

.mes__dia--elegido {
  background-color: var(--tinta-fuerte);
  color: var(--papel);
}

.mes__dia--elegido.mes__dia--hoy { box-shadow: none; }

.mes__num { line-height: 1; }

.mes__carga {
  width: var(--w, 40%);
  height: 3px;
  border-radius: var(--r-full);
  background: linear-gradient(
    to right,
    var(--indigo) 0 var(--tr, 50%),
    var(--salvia) var(--tr, 50%) 100%);
}

/* Sobre el día elegido el fondo es tinta y los dos colores se apagan: que se
   vea que sigue ahí, sin competir con el número en blanco. */
.mes__dia--elegido .mes__carga { opacity: 0.72; }

.mes__lectura {
  margin: var(--e-3) 0 0;
  font-size: var(--ui-footnote);
  line-height: 1.5;
  color: var(--tinta-2);
  text-wrap: pretty;
}

.mes__lectura strong { color: var(--tinta-fuerte); font-weight: 600; }


/* ----- El canal partido -----------------------------------------------------
   Trabajo a la izquierda, tu vida a la derecha, y en medio un carril estrecho
   que casi siempre está vacío. Cuando dos cosas se pisan aparece ahí LA GRAPA,
   y el conflicto se ve sin haber leído una palabra.

   El tiempo baja. La escala va de la primera cosa del día a la última, siempre
   con las horas enteras de los extremos: una escala que empieza a las 8:53 no
   se lee. */

.canal {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 16px 1fr;
  gap: 0;
  height: 380px;
  margin-top: var(--e-3);
  padding-left: 26px;
}

.canal__escala {
  position: absolute;
  inset: 0 0 0 0;
  pointer-events: none;
}

.canal__hora {
  position: absolute;
  left: 0;
  top: var(--y, 0%);
  translate: 0 -50%;
  font-size: var(--ui-caption2);
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

/* La raya fina que cruza el canal a la altura de cada hora. */
.canal__hora::after {
  content: "";
  position: absolute;
  left: 26px;
  top: 50%;
  width: 100vw;
  height: 1px;
  background-color: var(--linea-suave);
}

.canal__lado { position: relative; }
.canal__lado--tr { padding-right: 3px; }
.canal__lado--pe { padding-left: 3px; }

.canal__medio { position: relative; }

.canal__bloque {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--y, 0%);
  height: var(--h, 4%);
  /* Nunca más bajo que su propio nombre: diez minutos son cuatro píxeles a
     esta escala y ahí no cabe una palabra. La geometría miente un poco aquí, y
     se dice a propósito. */
  min-height: 20px;
  overflow: hidden;
  /* La hora y el nombre en UNA línea y no en dos: a esta escala un rato de
     45 minutos mide 20 px, y en 20 px no caben dos renglones. Apiladas, el
     nombre se quedaba cortado justo en los bloques cortos, que son la mitad. */
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 7px;
  border-radius: var(--r-xs);
  font-size: var(--ui-caption2);
  line-height: 1.15;
  background-color: var(--lienzo-3);
  border-left: 2px solid var(--tinta-3);
}

/* Índigo es trabajo y salvia es tu vida, los mismos dos colores de la barra de
   carga del mes. En una pantalla, un color significa una cosa. */
.canal__bloque--tr { background-color: var(--indigo-suave); border-left-color: var(--indigo); }
.canal__bloque--pe { background-color: var(--salvia-suave); border-left-color: var(--salvia); }

.canal__hora-bloque {
  font-weight: 600;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

.canal__titulo {
  color: var(--tinta-fuerte);
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* LA GRAPA. Dos dientes y un lomo: la forma de una grapa de verdad, que es lo
   que hace un cruce de agenda —coge dos cosas y las junta a la fuerza—. */
.canal__grapa {
  position: absolute;
  left: 50%;
  top: var(--y, 0%);
  height: var(--h, 2%);
  min-height: 13px;
  width: 11px;
  translate: -50% 0;
  border: 2px solid var(--rojo);
  border-left: 0;
  border-radius: 0 4px 4px 0;
  background-color: color-mix(in oklab, var(--rojo) 13%, transparent);
}

/* La aguja del minuto de hoy. Solo en el día de hoy: en cualquier otro sería
   una raya sin significado. */
.canal__aguja {
  position: absolute;
  left: 22px;
  right: 0;
  top: var(--y, 0%);
  height: 1.5px;
  background-color: var(--rojo);
  border-radius: var(--r-full);
  z-index: 2;
}

.canal__aguja::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  width: 6px;
  height: 6px;
  translate: 0 -50%;
  border-radius: var(--r-full);
  background-color: var(--rojo);
}

/* La orilla: lo que pasa ese día pero no a una hora. Un hábito de franja no
   ocupa sitio en el día porque no lo ocupa de verdad. */
.canal__orilla {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--e-3) 0 0;
}

.canal__franja {
  padding: 4px 10px;
  border-radius: var(--r-full);
  background-color: var(--lienzo-2);
  font-size: var(--ui-caption2);
  color: var(--tinta-2);
}

.canal__franja small { color: var(--tinta-3); }

.canal__lectura {
  margin: var(--e-3) 0 0;
  font-size: var(--ui-footnote);
  line-height: 1.55;
  color: var(--tinta-2);
  text-wrap: pretty;
}

.canal__lectura strong { color: var(--tinta-fuerte); font-weight: 600; }


/* ----- El catador de hueco --------------------------------------------------
   Al poner algo en una agenda la pregunta de verdad no es «¿a qué hora?», es
   «¿me cabe?». Y eso no se contesta con un desplegable: se contesta mirando.

   En cuanto tocas la hora, esta banda dibuja esas dos horas de tu día con lo
   que ya hay dentro —una hora de margen por delante y otra por detrás, que es
   el contexto que hace falta para decidir—. Tu cita va encima, en tinta, para
   que se vea si pisa algo. */

.catador { margin-top: var(--e-2); }

.catador__carril {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px;
  border-radius: var(--r-sm);
  background-color: var(--lienzo-2);
  overflow: hidden;
}

/* Arriba lo que ya hay, abajo lo tuyo. El choque se ve porque los dos
   carriles comparten la misma regla de tiempo: lo que cae encima, cae encima. */
.catador__fila {
  position: relative;
  display: block;
  height: 22px;
}

.catador__otro {
  position: absolute;
  inset: 0 auto;
  left: var(--x, 0%);
  width: var(--w, 10%);
  display: flex;
  align-items: center;
  padding-left: 5px;
  border-radius: 3px;
  overflow: hidden;
}

.catador__otro small {
  font-size: var(--ui-caption2);
  color: var(--tinta-2);
  white-space: nowrap;
}

.catador__otro--tr { background-color: var(--indigo-suave); box-shadow: inset 2px 0 0 var(--indigo); }
.catador__otro--pe { background-color: var(--salvia-suave); box-shadow: inset 2px 0 0 var(--salvia); }

.catador__tuyo {
  position: absolute;
  inset: 0 auto;
  left: var(--x, 0%);
  width: var(--w, 20%);
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xs);
  background-color: var(--tinta-fuerte);
  color: var(--papel);
  font-size: var(--ui-caption2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: left var(--d-snappy) var(--ease-salida), width var(--d-snappy) var(--ease-salida);
}

.catador__tuyo span { white-space: nowrap; }

.catador__horas {
  position: relative;
  height: 15px;
  margin-top: 5px;
  /* Un poco de aire a los lados para que la primera y la última hora no se
     salgan por el borde de la tarjeta al centrarse sobre su marca. */
  padding-inline: 4px;
}

.catador__hora {
  position: absolute;
  left: var(--x, 0%);
  translate: -50% 0;
  font-size: var(--ui-caption2);
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

/* La primera y la última se pegan a su lado en vez de centrarse: centradas se
   salían media palabra por el borde de la tarjeta. */
.catador__hora--ini { translate: 0 0; }
.catador__hora--fin { translate: -100% 0; }

.catador__lectura {
  margin: var(--e-2) 0 0;
  font-size: var(--ui-footnote);
  line-height: 1.5;
  color: var(--tinta-2);
}

.catador__lectura strong { color: var(--tinta-fuerte); font-weight: 600; }
.catador__lectura--choca { color: var(--rojo); }
.catador__lectura--choca strong { color: var(--rojo); }


/* ----- Apuntar un gasto (MonAI) ---------------------------------------------
   El número gigante ES el campo. No hay caja, ni rótulo, ni recuadro que diga
   «Importe»: el tamaño ya dice que eso es lo importante y que es lo primero
   que se teclea. Debajo, el concepto en una sola línea sin caja tampoco.

   El teclado es propio y no el del sistema por dos razones. Una, que trabaja
   en CÉNTIMOS —tecleas 2, 4, 0 y ves 0,02 → 0,24 → 2,40— y así no hay que
   acertarle a una coma con el pulgar. Y dos, que en una maqueta que se enseña
   con el ratón el teclado del móvil no sale nunca: sin este, la pantalla no
   se podría ni probar. */

.apuntar {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.apuntar__cifra {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: var(--e-2) 0 0;
}

.apuntar__num {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces);
  font-weight: 500;
  font-size: clamp(42px, 15vw, 58px);
  line-height: 1;
  color: var(--tinta-fuerte);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}

.apuntar__moneda {
  font-family: var(--font-display);
  font-size: var(--ui-title2);
  color: var(--tinta-3);
}

/* Mientras no has tecleado nada, el cero está ahí pero no grita. */
.apuntar--cero .apuntar__num,
.apuntar--cero .apuntar__moneda { color: var(--tinta-3); }

.apuntar__concepto {
  width: 100%;
  padding: 0;
  text-align: center;
  font-size: var(--ui-title3);
  font-weight: 550;
  color: var(--tinta-fuerte);
  background: none;
  border: 0;
  outline: none;
}

.apuntar__concepto::placeholder { color: var(--tinta-3); font-weight: 400; }

/* Los dos carriles de dentro de la hoja no se pegan a nada: `.filtros` es
   sticky porque en una pantalla vive debajo de la barra de navegación, y aquí
   no hay barra de la que colgar. */
.apuntar .filtros { position: static; top: auto; z-index: auto; }

.teclado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-2);
}

.tecla {
  display: grid;
  place-items: center;
  min-height: 52px;
  border-radius: var(--r-md);
  background-color: var(--lienzo-2);
  font-size: var(--ui-title3);
  font-weight: 500;
  color: var(--tinta-fuerte);
  font-variant-numeric: tabular-nums;
  transition: transform var(--d-snappy) var(--muelle-snappy),
              background-color var(--d-micro) var(--ease-entrada);
}

.tecla:active { transform: scale(0.94); background-color: var(--lienzo-3); }

/* El hueco de la fila de abajo. Existe para que el 0 caiga en el centro, que
   es donde lo busca el pulgar en cualquier teclado numérico del mundo. */
.tecla--hueco { background: none; pointer-events: none; }

.tecla--borrar { color: var(--tinta-3); }
.tecla--borrar .ico { width: 22px; height: 22px; }

.apuntar__repetir {
  align-self: center;
  min-height: 44px;
  padding: 0 var(--e-3);
  font-size: var(--ui-sub);
  color: var(--indigo-vivo);
  text-align: center;
  transition: opacity var(--d-micro) var(--ease-entrada);
}

.apuntar__repetir:active { opacity: 0.45; }
.apuntar__repetir strong { font-weight: 600; }


/* El control único de mundo (decisión 0.1). Es el segmentado de tres que ya
   usan Horas y el tema de Ajustes, así que aquí solo hace falta decirle que
   respire: va pegado encima del carril de filtros y son dos preguntas
   distintas, no una fila de chips más. */
.mundo { margin-bottom: var(--e-3); }

/* Una etiqueta dentro del trío de la ficha de gasto: el hueco es de un dato y
   lo que va dentro es una pastilla, así que se recoloca sin heredar el tamaño
   de `.dato`. */
.dato--eti { margin: 2px 0 0; line-height: 1; }
.dato--eti .eti { font-size: var(--ui-caption2); }


/* ----- Etiquetas -----------------------------------------------------------
   Las etiquetas SE SUMAN: tocar dos deja los leads que llevan las dos, no los
   que llevan cualquiera. Con seis leads da igual, pero esto está pensado para
   una base de doscientos, y ahí es la diferencia entre acotar y no acotar.
   Por eso van en su propio carril y no mezcladas con el estado: son dos
   preguntas distintas y se combinan. */

.filtros--etiquetas { margin-bottom: 0; }

.eti {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: var(--r-full);
  font-size: var(--ui-caption2);
  font-weight: 600;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  white-space: nowrap;
}

/* El punto de color es lo que hace que una etiqueta se reconozca de un vistazo
   sin leerla. El texto es la confirmación, no la señal. */
.eti::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background-color: currentColor;
  flex: none;
}

.eti--ambar  { color: var(--ambar); }
.eti--indigo { color: var(--indigo); }
/* El rosa de la casa ya es un token en base.css: el rojo tirando al ámbar.
   Aquí estaba escrito a mano y en otros dos sitios se pedía como var(--rosa),
   que no existía y pintaba transparente. Uno solo, y los tres lo usan. */
.eti--rosa   { color: var(--rosa); }
.eti--salvia { color: var(--salvia); }
.eti--rojo   { color: var(--rojo); }
.eti--neutro { color: var(--tinta-3); }

/* En el carril de filtro llevan fondo; sueltas en una fila, no. */
.filtros--etiquetas .eti {
  padding: 7px 13px 7px 11px;
  background-color: var(--cristal);
  border: 0.5px solid var(--cristal-borde);
  box-shadow: inset 0 0.5px 0 var(--cristal-filo), var(--sombra-1);
  transition: background-color var(--d-micro) var(--ease-entrada),
              transform var(--d-snappy) var(--muelle-snappy);
}

.filtros--etiquetas .eti:active { transform: scale(0.94); }

.filtros--etiquetas .eti[aria-pressed="true"] {
  background-color: currentColor;
  border-color: transparent;
}

/* El texto y el punto se vuelven del color del papel cuando el fondo se llena
   del color de la etiqueta. `currentColor` ya es el color, así que el truco es
   pintar encima con el papel. */
.filtros--etiquetas .eti[aria-pressed="true"] span { color: var(--papel); }
.filtros--etiquetas .eti[aria-pressed="true"]::before { background-color: var(--papel); }

/* La línea que dice qué estás mirando de verdad cuando hay un filtro puesto:
   con la lista acotada, el total de la tarjeta de arriba ya no es el tuyo.
   Nació en Leads y ahora la usan también Facturas e Ingresos, así que deja de
   llevar el nombre de una sola pantalla. */
.cuenta { margin: var(--e-2) 0 0; font-size: var(--ui-caption); }

/* Las etiquetas dentro de una fila: pequeñas, después del pie, sin fondo. */
.fila__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 9px;
  margin-top: 3px;
}


/* ----- Datos fiscales -------------------------------------------------------
   Una lista de definición y no una tabla: son pares nombre-valor y el lector
   de pantalla los tiene que leer emparejados. El NIF en tabulares, que es un
   número que se compara con el de una factura. */

.fiscal {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px var(--e-3);
  margin: 0;
}

.fiscal dt {
  font-size: var(--ui-caption2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-etiqueta);
  color: var(--tinta-3);
  align-self: center;
}

.fiscal dd {
  margin: 0;
  font-size: var(--ui-sub);
  color: var(--tinta-fuerte);
  text-align: right;
}

.fiscal dd.fiscal__nif { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }


/* ----- Horas ----------------------------------------------------------------
   El encabezado de cada grupo lleva su total a la derecha, y cuando ese grupo
   tiene horas sin facturar, el botón de facturarlas. No es un adorno: es el
   único sitio de la app donde una hora se convierte en dinero. */

.horas__lectura { margin: calc(var(--e-2) * -1) 0 0; }

.horas__grupo + .horas__grupo { margin-top: var(--e-4); }

.horas__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
  margin-bottom: var(--e-2);
}

.horas__nombre {
  font-size: var(--ui-caption2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-etiqueta);
  color: var(--tinta-3);
}

.horas__total {
  font-size: var(--ui-footnote);
  font-weight: 600;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}

.horas__facturar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: var(--e-2);
  padding: 12px;
  border-radius: var(--r-md);
  background-color: var(--indigo);
  color: var(--papel);
  font-size: var(--ui-sub);
  font-weight: 600;
  transition: transform var(--d-snappy) var(--muelle-snappy);
}

.horas__facturar:active { transform: scale(0.97); }
.horas__facturar .ico { width: 18px; height: 18px; }


/* ==========================================================================
   LA JORNADA
   --------------------------------------------------------------------------
   El día entero de un vistazo: una franja de las 8 a las 20 con cada rato
   fichado en su sitio real. El de esta ficha encendido, los demás en gris.

   Lo que de verdad cuenta aquí son los HUECOS. Una lista de sesiones te dice
   lo que hiciste; esta barra te dice lo que NO fichaste, sin escribir una sola
   palabra: los blancos entre tramos son las horas que se han perdido por el
   camino. Por eso el carril va a todo el ancho y los tramos no se separan con
   márgenes: un hueco tiene que medir lo que mide.
   ========================================================================== */

.jornada {
  position: relative;
  height: 46px;
  margin-top: var(--e-2);
}

.jornada__carril {
  position: absolute;
  inset: 0 0 18px;
  border-radius: var(--r-sm);
  background-color: var(--lienzo-3);
  overflow: hidden;
}

.jornada__tramo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: var(--w);
  background-color: color-mix(in oklab, var(--tinta) 22%, transparent);
}

/* El de esta ficha: el único con color, y con un filo a los lados para que se
   distinga de un tramo gris pegado a él. */
.jornada__tramo--esta {
  background-color: var(--salvia);
  box-shadow: 0 0 0 1.5px var(--lienzo);
  border-radius: 2px;
  z-index: 1;
}

.jornada__horas {
  position: absolute;
  inset: auto 0 0 0;
  height: 14px;
}

.jornada__hora {
  position: absolute;
  left: var(--x);
  translate: -50% 0;
  font-size: var(--ui-caption2);
  font-weight: 600;
  letter-spacing: var(--tracking-etiqueta);
  color: var(--tinta-3);
  white-space: nowrap;
}

.jornada__hora:first-child { translate: 0 0; }
.jornada__hora:last-child { translate: -100% 0; }

.jornada__lectura { margin-top: var(--e-2); font-size: var(--ui-caption); }


/* ==========================================================================
   ELEGIR LA PORTADA
   --------------------------------------------------------------------------
   Una galería de miniaturas no sirve para esto. Lo que hay que decidir no es
   «cuál me gusta», es «¿se lee el nombre encima?», y eso depende de la imagen,
   del desenfoque y del texto a la vez. Así que la vista previa lleva el
   logotipo y los nombres puestos, con el mismo vidrio esmerilado que tendrá de
   verdad, y el deslizador la cambia mientras lo mueves.
   ========================================================================== */

.elegir {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.elegir__vista {
  position: relative;
  min-height: 176px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--e-4);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  border: 0.5px solid var(--cristal-borde);
}

.elegir__fondo { border-radius: inherit; }

.elegir__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.elegir__titulo {
  font-size: var(--ui-title2);
  color: var(--tinta-fuerte);
}

.elegir__mando {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.elegir__rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-2);
}

.elegir__op {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  transition: border-color var(--d-micro) var(--ease-entrada),
              transform var(--d-snappy) var(--muelle-snappy);
}

.elegir__op:active { transform: scale(0.95); }
.elegir__op--activa { border-color: var(--indigo); }

.elegir__muestra {
  position: static;
  height: 54px;
  border-radius: var(--r-sm);
  border: 0.5px solid var(--cristal-borde);
}

.elegir__nombre {
  font-size: var(--ui-caption2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-etiqueta);
  color: var(--tinta-3);
}

.elegir__op--activa .elegir__nombre { color: var(--indigo); }

.elegir__subir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  border-radius: var(--r-md);
  border: 1px dashed var(--linea);
  font-size: var(--ui-sub);
  font-weight: 550;
  color: var(--tinta-2);
  cursor: pointer;
}

.elegir__subir .ico { width: 18px; height: 18px; }

/* ----- El deslizador -------------------------------------------------------
   No había ninguno en la app: es el primero. Se le quita la piel del navegador
   y se le pone la de la casa —carril de `--lienzo-3`, pomo de vidrio con el
   mismo aro de tinta que las cápsulas del chrome, para que se vea sobre lo que
   sea. */

.deslizador {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: none;
}

.deslizador::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: var(--r-full);
  background-color: var(--lienzo-3);
}

.deslizador::-moz-range-track {
  height: 5px;
  border-radius: var(--r-full);
  background-color: var(--lienzo-3);
}

.deslizador::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9.5px;
  border-radius: var(--r-full);
  background-color: var(--lienzo);
  border: 0.5px solid var(--cristal-borde);
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--tinta) 10%, transparent),
    0 1px 3px color-mix(in oklab, var(--tinta) 14%, transparent);
}

.deslizador::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  background-color: var(--lienzo);
  border: 0.5px solid var(--cristal-borde);
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--tinta) 10%, transparent),
    0 1px 3px color-mix(in oklab, var(--tinta) 14%, transparent);
}

.deslizador:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--indigo); outline-offset: 2px; }
.deslizador:focus-visible::-moz-range-thumb { outline: 2px solid var(--indigo); outline-offset: 2px; }


/* ----- Entregables ----------------------------------------------------------
   Lo que se le ENTREGA al cliente frente a lo que hay que hacer para poder
   entregarlo. La marca es una palabra y no un icono: un punto de color más en
   una fila que ya tiene título, pie y check no diría nada. */

.progreso__lectura {
  margin-top: 7px;
  font-size: var(--ui-caption);
}

.entregable {
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: var(--r-full);
  background-color: color-mix(in oklab, var(--indigo) 12%, transparent);
  font-size: var(--ui-caption2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-etiqueta);
  color: var(--indigo);
  white-space: nowrap;
  vertical-align: 1px;
}


/* ==========================================================================
   LA CADENA
   --------------------------------------------------------------------------
   Una ficha de trabajo nunca está sola: un lead pide un presupuesto, el
   presupuesto se convierte en proyecto, el proyecto es de un cliente y acaba
   en facturas. Esa historia estaba en los datos y en ningún sitio más — desde
   una factura no había manera de subir al proyecto.

   Aquí se cuenta en una línea, justo debajo del título, con el eslabón donde
   estás marcado. El orden es SIEMPRE el mismo aunque falten piezas: así la
   posición de cada eslabón significa algo por sí misma, y la cadena de una
   factura suelta se lee igual que la de un proyecto entero.
   ========================================================================== */

.cadena {
  display: flex;
  align-items: stretch;
  gap: 6px;
  /* Sangra a los bordes como los carriles de filtros: los eslabones no mueren
     en el margen, y a 375 px la cadena entera no siempre cabe. */
  margin-inline: calc(var(--margen) * -1);
  padding-inline: var(--margen);
  overflow-x: auto;
  scrollbar-width: none;
}

.cadena[hidden] { display: none; }
.cadena::-webkit-scrollbar { display: none; }

.cadena__eslabon {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 11px;
  border-radius: var(--r-sm);
  background-color: var(--cristal);
  border: 0.5px solid var(--cristal-borde);
  box-shadow: inset 0 0.5px 0 var(--cristal-filo);
  text-align: left;
  transition:
    background-color var(--d-micro) var(--ease-entrada),
    transform var(--d-snappy) var(--muelle-snappy);
}

.cadena__eslabon:active { transform: scale(0.96); }

/* El separador va en el eslabón y no entre ellos para que ruede con el
   carril: un chevron suelto en medio del scroll se queda descolgado. */
.cadena__eslabon + .cadena__eslabon::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  width: 6px;
  height: 0.5px;
  background-color: var(--linea);
}

.cadena__tipo {
  font-size: var(--ui-caption2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-etiqueta);
  color: var(--tinta-3);
}

.cadena__nombre {
  font-size: var(--ui-footnote);
  font-weight: 550;
  color: var(--tinta-fuerte);
  white-space: nowrap;
}

/* Donde estás: macizo, no de vidrio. Es el único que no lleva a ninguna parte
   y tiene que notarse antes de tocarlo. */
.cadena__eslabon--actual {
  background-color: var(--tinta-fuerte);
  border-color: transparent;
  box-shadow: none;
}

.cadena__eslabon--actual .cadena__tipo { color: color-mix(in oklab, var(--papel) 62%, transparent); }
.cadena__eslabon--actual .cadena__nombre { color: var(--papel); }
.cadena__eslabon--actual:active { transform: none; }


/* ==========================================================================
   31. FICHA DE GASTO · LOS SEIS MESES
   --------------------------------------------------------------------------
   Seis barras no son una gráfica: son la respuesta a «¿esto se me está
   subiendo solo?». El mes en curso va en verde para tener contra qué
   comparar sin leer ninguna leyenda.
   ========================================================================== */

.serie {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 78px;
  margin-top: var(--e-4);
}

/* Rejilla y no flex: como ítems flex, las seis barras se encogían al mismo
   alto para caber en la columna y el `height: N%` no se veía nunca. Con
   `1fr auto` la fila de arriba tiene alto propio y el porcentaje resuelve
   contra ella. */
.serie__mes {
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  height: 100%;
}

.serie__barra {
  align-self: end;
  width: 100%;
  height: calc(var(--h, 0) * 1%);
  min-height: 3px;
  border-radius: 4px 4px 2px 2px;
  background-color: color-mix(in oklab, var(--tinta-3) 26%, var(--lienzo-3));
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.55s var(--muelle-smooth) calc(var(--i, 0) * 65ms);
}

.serie--dibujada .serie__barra { transform: scaleY(1); }

.serie__mes--hoy .serie__barra { background-color: var(--salvia); }
.serie__mes--cero .serie__barra { background-color: var(--linea); }

.serie__etiqueta {
  font-size: var(--ui-caption2);
  color: var(--tinta-3);
}

.serie__mes--hoy .serie__etiqueta { color: var(--tinta-fuerte); font-weight: 650; }

.serie__lectura {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
  font-size: var(--ui-footnote);
  line-height: 1.5;
  color: var(--tinta-2);
}

.serie__lectura strong { color: var(--tinta-fuerte); font-weight: 650; }
.serie__lectura--sube strong { color: var(--ambar); }


/* ==========================================================================
   32. FICHA DE SUSCRIPCIÓN · EL CANJE
   --------------------------------------------------------------------------
   «14 € al mes» no hace cancelar nada. Lo que hace cancelar es lo que llevas
   pagado y a cuántos días de trabajo equivale lo que queda por pagar.
   ========================================================================== */

.canje__rotulo {
  font-size: var(--ui-caption2);
  font-weight: 600;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-3);
}

.canje__texto {
  margin-top: 5px;
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces);
  font-size: var(--ui-sub);
  line-height: 1.5;
  color: var(--tinta-fuerte);
}

.canje__texto strong { font-weight: 650; }

/* ==========================================================================
   FASE 10 · SUEÑO
   ========================================================================== */

/* Una frase que explica la tarjeta. Hay veintiséis clases «__lectura» en esta
   hoja con exactamente estas cinco reglas, una por componente; las de la fase
   10 comparten esta y ya. */
.dicho {
  font-size: var(--ui-footnote);
  line-height: 1.5;
  color: var(--tinta-2);
  text-wrap: pretty;
}

.dicho strong { color: var(--tinta-fuerte); font-weight: 600; }


/* ----- El arco de la noche --------------------------------------------------
   Dos anillos concéntricos y cada uno contesta una cosa. El de fuera, fino, es
   el PASO de la noche: un degradado de índigo profundo a ámbar de amanecer, de
   izquierda a derecha. El de dentro, gordo, son las FASES en su sitio.
   La posición sobre el arco es la hora real, así que las marcas de las horas
   en punto caen donde tienen que caer. */

.arco {
  position: relative;
  margin-top: var(--e-3);
}

.arco__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* El canal vacío: sin él, entre banda y banda se ve el fondo de la tarjeta y
   el arco parece roto en vez de continuo. */
.arco__hueco {
  stroke: var(--lienzo-2);
  stroke-linecap: round;
}

.arco__fase { stroke-linecap: butt; }
.arco__fase--indigo { stroke: var(--indigo); }
.arco__fase--salvia { stroke: var(--salvia); }
.arco__fase--ambar  { stroke: var(--ambar); }
/* El sueño ligero es más de la mitad de la noche: a todo color se comería el
   dibujo y las otras tres fases dejarían de verse. */
.arco__fase--ligero { stroke: color-mix(in oklab, var(--indigo) 26%, var(--lienzo-2)); }

.arco__cielo-ini { stop-color: var(--indigo); }
.arco__cielo-med { stop-color: color-mix(in oklab, var(--indigo) 72%, var(--ambar)); }
.arco__cielo-fin { stop-color: var(--ambar); }
.arco__cielo { stroke-linecap: round; }

.arco__hora {
  stroke: var(--lienzo);
  stroke-width: 1;
  opacity: 0.55;
}

.arco__rotulo {
  fill: var(--tinta-3);
  font-size: 8.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Las dos horas que de verdad importan, en los extremos del arco y fuera de
   él: dentro se pisan con el anillo. */
.arco__pie {
  position: absolute;
  bottom: -2px;
  font-size: var(--ui-caption2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
}

.arco__pie--ini { left: 0; }
.arco__pie--fin { right: 0; }

.arco__centro {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 58%;
  translate: -50% 0;
  text-align: center;
}

.arco__cifra {
  font-size: var(--ui-title1);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.arco__centro .tenue {
  display: block;
  margin-top: 2px;
  font-size: var(--ui-caption2);
  text-wrap: balance;
}


/* ----- La leyenda de las fases ---------------------------------------------- */

.fases {
  margin: var(--e-4) 0 0;
  padding: var(--e-3) 0 0;
  border-top: 1px solid var(--linea-suave);
  list-style: none;
  display: grid;
  gap: 7px;
}

.fase {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--ui-footnote);
}

.fase__punto {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
}

.fase__punto--indigo { background-color: var(--indigo); }
.fase__punto--salvia { background-color: var(--salvia); }
.fase__punto--ambar  { background-color: var(--ambar); }
.fase__punto--ligero { background-color: color-mix(in oklab, var(--indigo) 26%, var(--lienzo-2)); }

.fase__nombre { color: var(--tinta-2); }

.fase__min,
.fase__pct {
  font-variant-numeric: tabular-nums;
  color: var(--tinta-fuerte);
  font-weight: 600;
}

/* El porcentaje, a la derecha y con su ancho fijo: si cada fila lo coloca
   donde le toca, la columna baila y deja de leerse como columna. */
.fase__pct {
  min-width: 34px;
  text-align: right;
  color: var(--tinta-3);
  font-weight: 550;
}


/* ----- Las preguntas de la mañana -------------------------------------------
   Una pregunta cada vez. Todo lo que se toca es del tamaño de un pulgar y no
   hay ni un campo de texto: a las siete y media de la mañana nadie escribe. */

.pasos-preg {
  display: flex;
  gap: 6px;
  margin-bottom: var(--e-5);
}

.pasos-preg__punto {
  flex: 1 1 auto;
  height: 3px;
  border-radius: var(--r-full);
  background-color: var(--lienzo-2);
  transition: background-color var(--d-rapido) var(--muelle-smooth);
}

.pasos-preg__punto--hecho { background-color: var(--indigo); }

.pregunta__cuenta {
  font-size: var(--ui-caption2);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.pregunta__texto {
  margin-top: var(--e-2);
  font-size: var(--ui-title1);
  line-height: 1.12;
  text-wrap: balance;
}

.pregunta__pie {
  margin-top: var(--e-2);
  font-size: var(--ui-footnote);
  color: var(--tinta-3);
}

.pregunta__cuerpo { margin-top: var(--e-5); }

.pregunta__ops {
  display: grid;
  gap: var(--e-2);
}

/* Cuando se puede marcar más de una, van en dos columnas: seis pastillas a lo
   ancho son seis renglones de pantalla y ya no se abarcan de un vistazo. */
.pregunta__ops--varios { grid-template-columns: 1fr 1fr; }

.op-gorda {
  min-height: 56px;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background-color: var(--lienzo);
  color: var(--tinta-fuerte);
  font: inherit;
  font-size: var(--ui-body);
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--d-rapido) var(--muelle-smooth),
              border-color var(--d-rapido) var(--muelle-smooth),
              scale var(--d-rapido) var(--muelle-smooth);
}

.op-gorda:active { scale: 0.98; }

.op-gorda--puesta {
  border-color: var(--indigo);
  background-color: color-mix(in oklab, var(--indigo) 12%, var(--lienzo));
  color: var(--tinta-fuerte);
  font-weight: 650;
}

.pregunta__botones {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-6);
}

.pregunta__botones [data-preg-hecho] { margin-left: auto; }


/* ----- El carril de horas ---------------------------------------------------
   Se elige la hora tocando, no escribiendo. Se sale por los dos lados de la
   tarjeta a propósito: así se ve que hay más horas a los lados y se arrastra. */

.carril-horas {
  display: flex;
  gap: var(--e-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 calc(var(--e-4) * -1);
  padding: var(--e-1) var(--e-4);
  scrollbar-width: none;
}

.carril-horas::-webkit-scrollbar { display: none; }

.hora-op {
  flex: 0 0 auto;
  scroll-snap-align: center;
  min-width: 72px;
  min-height: 52px;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background-color: var(--lienzo);
  color: var(--tinta-2);
  font: inherit;
  font-size: var(--ui-sub);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--d-rapido) var(--muelle-smooth),
              color var(--d-rapido) var(--muelle-smooth),
              scale var(--d-rapido) var(--muelle-smooth);
}

.hora-op:active { scale: 0.96; }

.hora-op--puesta {
  border-color: var(--indigo);
  background-color: var(--indigo);
  color: var(--lienzo);
}


@media (prefers-reduced-motion: reduce) {
  .pasos-preg__punto,
  .op-gorda,
  .hora-op { transition: none; }
}

/* ==========================================================================
   FASE 10 · MEDITACIÓN
   ========================================================================== */

/* Las guías, debajo de las duraciones: la duración dice cuánto y la guía dice
   con qué ritmo, y las dos son la misma decisión partida en dos. */
.guias {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
  margin-top: var(--e-3);
}

.guia {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 52px;
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background-color: var(--lienzo);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--d-rapido) var(--muelle-smooth),
              background-color var(--d-rapido) var(--muelle-smooth);
}

.guia--elegida {
  border-color: var(--indigo);
  background-color: color-mix(in oklab, var(--indigo) 10%, var(--lienzo));
}

.guia__nombre {
  font-size: var(--ui-footnote);
  font-weight: 600;
  color: var(--tinta-fuerte);
}

.guia__pie {
  font-size: var(--ui-caption2);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-3);
}

.guia--elegida .guia__pie { color: var(--indigo); }


/* ----- El respirador ---------------------------------------------------------
   El orbe ES el temporizador. Crece mientras inhalas y se encoge mientras
   sueltas, y la transición dura exactamente lo que dura el paso —se la pone el
   JS con el número de la guía—, así que el dibujo no se sincroniza con el
   dato: el dibujo ES el dato. El aro de alrededor se cierra con la sesión. */

.lienzo-scroll--centrado {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* El 100 % es el alto del carril de scroll, que sí lo tiene definido. Con
     70vh el orbe se quedaba pegado arriba y sobraba media pantalla debajo:
     centrar dentro de una caja más pequeña que la pantalla no centra nada. */
  min-height: 100%;
  text-align: center;
}

.respirador {
  position: relative;
  width: min(260px, 74vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.respirador__aro {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  rotate: -90deg;          /* que empiece a cerrarse por arriba */
}

.respirador__pista {
  fill: none;
  stroke: var(--lienzo-2);
  stroke-width: 4;
}

.respirador__hecho {
  fill: none;
  stroke: var(--indigo);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}

/* El orbe de vidrio: el degradado hace el volumen y el desenfoque de detrás lo
   asienta sobre el lienzo. Se anima SOLO la escala. */
.respirador__orbe {
  position: relative;
  width: 68%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border-radius: var(--r-full);
  scale: var(--abre, 0.58);
  background:
    radial-gradient(circle at 34% 28%,
      color-mix(in oklab, var(--lienzo) 70%, transparent) 0%,
      transparent 52%),
    linear-gradient(160deg,
      color-mix(in oklab, var(--indigo) 82%, var(--lienzo)) 0%,
      var(--indigo) 100%);
  box-shadow: var(--sombra-2),
              inset 0 -8px 20px color-mix(in oklab, var(--indigo) 60%, black);
}

.respirador__palabra {
  font-size: var(--ui-title3);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lienzo);
}

.respirador__seg {
  font-size: var(--ui-caption);
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, var(--lienzo) 72%, transparent);
}

.respirador__reloj {
  margin-top: var(--e-5);
  font-size: var(--ui-title2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-fuerte);
}

.respirador__guia {
  margin-top: var(--e-2);
  text-align: center;
  color: var(--tinta-3);
}


@media (prefers-reduced-motion: reduce) {
  /* Sin movimiento el orbe se queda abierto y quieto: la palabra y la cuenta
     siguen diciendo en qué paso vas, que es la información. Un orbe que
     palpita no es información, es acompañamiento. */
  .respirador__orbe {
    scale: 1 !important;
    transition: none !important;
  }
  .respirador__hecho { transition: none; }
  .guia { transition: none; }
}

/* ==========================================================================
   FASE 10 · SUPLEMENTOS
   ========================================================================== */

/* El momento que todavía no ha llegado. Se tiñe el rótulo y el reloj, no se le
   baja la opacidad al bloque entero: eso arrastra el contraste del texto por
   debajo de AA y aquí dentro hay nombres que hay que poder leer. */
.momento__hora {
  margin-left: var(--e-2);
  font-size: var(--ui-caption2);
  font-weight: 550;
  color: var(--tinta-3);
}

.momento--pronto .momento__rotulo { color: var(--tinta-2); }

.marca-check--pronto {
  display: grid;
  place-items: center;
  color: var(--tinta-3);
  background-color: var(--lienzo-2);
  border-color: transparent;
  cursor: default;
}

/* El rastro de siete días gana dos estados: el día en que el bote todavía no
   estaba abierto —que no es un fallo, es que no existía— y el de hoy cuando
   aún no ha llegado su hora. */
.rastro__dia--nada { opacity: 0.3; }

.rastro__dia--pronto {
  background-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--tinta-3);
  opacity: 0.6;
}


/* ----- Las cápsulas que se vacían -------------------------------------------
   Una cápsula de pie con su relleno. El relleno NO es un porcentaje bonito: es
   lo que queda del bote, contado restando las tomas de lo que traía. Marcar un
   suplemento hoy baja un poco su cápsula, porque marcar y vaciar son el mismo
   dato visto dos veces. */

.stock {
  list-style: none;
  display: grid;
  gap: var(--e-3);
  margin: var(--e-3) 0 0;
  padding: 0;
}

.vial-fila {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: var(--e-3);
}

.vial {
  position: relative;
  width: 22px;
  height: 44px;
  border-radius: 11px;
  background-color: var(--lienzo-2);
  box-shadow: inset 0 0 0 1px var(--linea-suave);
  overflow: hidden;
}

/* La ranura de la cápsula, donde se separan las dos mitades. Sin ella es un
   rectángulo redondeado y podría ser cualquier cosa. */
.vial::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  translate: 0 -50%;
  background-color: color-mix(in oklab, var(--tinta-3) 35%, transparent);
  z-index: 2;
}

.vial i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--lleno, 0) * 100%);
  border-radius: 0 0 11px 11px;
  background-color: var(--indigo);
  transition: height var(--d-medio) var(--muelle-smooth);
}

.vial--ambar i  { background-color: var(--ambar); }
.vial--salvia i { background-color: var(--salvia); }

.vial-fila__cuerpo { display: grid; gap: 1px; min-width: 0; }

.vial-fila__nombre {
  font-size: var(--ui-footnote);
  font-weight: 600;
  color: var(--tinta-fuerte);
}

.vial-fila__pie {
  font-size: var(--ui-caption2);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-3);
}

.vial-fila__valor {
  font-size: var(--ui-caption);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
}

/* El que se acaba pronto, en ámbar: es el único de los cuatro sobre el que hay
   que hacer algo, y hacerlo antes de que se acabe. */
.vial-fila__valor--apura { color: var(--ambar); }


@media (prefers-reduced-motion: reduce) {
  .vial i { transition: none; }
}

/* ==========================================================================
   FASE 10 · APRENDIZAJE
   ========================================================================== */

/* ----- La escalera ----------------------------------------------------------
   Los módulos como peldaños. Los hechos, MACIZOS; el que toca, encendido; los
   que quedan, solo contorneados. Y cada peldaño un poco más alto que el
   anterior, porque una escalera sube: si todos midieran igual sería una lista
   con viñetas, y una lista no dice por dónde vas. */

.escalera {
  list-style: none;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin: var(--e-4) 0 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.escalera::-webkit-scrollbar { display: none; }

.peldano {
  position: relative;
  flex: 1 1 0;
  /* El suelo, y nada mas: con 26 px, un tema de doce modulos pedia 356 px y
     hay 301, asi que la escalera se iba a scroll horizontal y dejaba de verse
     de un vistazo, que es para lo unico que sirve una escalera. Sin suelo
     grande, el flex reparte: once peldanos a 19 px y el que toca a 49. */
  min-width: 14px;
  /* MIN-height y no height: el peldano que toca lleva su nombre dentro y si
     el nombre cae en tres lineas, una caja fija lo corta. Con la escalera
     alineada abajo, un peldano mas alto sigue siendo un peldano. */
  min-height: var(--alto, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  padding-bottom: 5px;
  border-radius: var(--r-sm) var(--r-sm) 3px 3px;
}

.peldano--hecho {
  background-color: var(--indigo);
  color: var(--lienzo);
}

/* El que toca: encendido y más ancho, porque es el único sobre el que hay que
   hacer algo. Su nombre se lee; los demás solo se cuentan. */
.peldano--actual {
  flex: 2.6 1 0;
  min-height: max(var(--alto, 44px), 64px);
  background-color: var(--ambar);
  color: var(--lienzo);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ambar) 22%, transparent);
}

.peldano--futuro {
  background-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--linea);
  color: var(--tinta-3);
}

.peldano__num {
  font-size: var(--ui-caption2);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* En la pantalla solo se lee el nombre del que toca: cabe. En la ficha caben
   todos porque la escalera va en vertical. */
/* Con ancho: un hijo de un flex con «align-items: center» se dimensiona a su
   CONTENIDO, no a la caja, asi que «Documentacion viva» se salia casi ocho
   pixeles por cada lado en vez de partirse en dos lineas. */
.peldano__nombre {
  display: none;
  width: 100%;
  font-size: var(--ui-caption2);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}

.peldano--actual .peldano__nombre { display: block; padding: 0 4px; }
.peldano__estado { display: none; }

/* ----- La escalera larga, en la ficha: en vertical y con todos los nombres -- */

.escalera--larga {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  overflow: visible;
}

.escalera--larga .peldano {
  flex: none;
  height: auto;
  min-height: 44px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-md);
  /* En vertical la escalera sube por la IZQUIERDA: cada peldaño entra un poco
     más que el anterior. El --alto lo pone el JS y aquí se usa como sangría. */
  margin-left: calc((var(--alto, 38px) - 38px) * 0.9);
}

.escalera--larga .peldano__nombre {
  display: block;
  text-align: left;
  font-size: var(--ui-footnote);
}

.escalera--larga .peldano__num {
  width: 20px;
  flex: none;
  text-align: center;
  font-size: var(--ui-caption);
}

.escalera--larga .peldano__estado {
  display: block;
  margin-left: auto;
  font-size: var(--ui-caption2);
  font-weight: 550;
  opacity: 0.85;
}

.escalera--larga .peldano--futuro .peldano__nombre { color: var(--tinta-2); }


/* ----- La carta -------------------------------------------------------------
   A pantalla completa y de una en una. La respuesta NO está debajo esperando:
   está oculta. Si está debajo, el ojo la lee antes de que te dé tiempo a
   intentarlo, y entonces no has repasado, has leído. */

.carta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  width: 100%;
  min-height: 300px;
  padding: var(--e-6) var(--e-5);
  border: 1px solid var(--linea-suave);
  border-radius: var(--r-xl);
  background-color: var(--lienzo);
  box-shadow: var(--sombra-2);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: scale var(--d-rapido) var(--muelle-smooth);
}

.carta:active { scale: 0.99; }

.carta__tema {
  font-size: var(--ui-caption2);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.carta__delante {
  font-size: var(--ui-title3);
  font-weight: 600;
  line-height: 1.25;
  color: var(--tinta-fuerte);
  text-wrap: balance;
}

.carta__linea {
  width: 40px;
  height: 2px;
  border-radius: var(--r-full);
  background-color: var(--salvia);
}

.carta__detras {
  font-size: var(--ui-body);
  line-height: 1.5;
  color: var(--tinta-2);
  text-wrap: pretty;
}

.carta__pista {
  margin-top: var(--e-2);
  font-size: var(--ui-caption2);
  color: var(--tinta-3);
}

.carta__botones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3);
  width: 100%;
  margin-top: var(--e-5);
}

.boton-pildora--fallo {
  background-color: var(--lienzo);
  color: var(--tinta-2);
  box-shadow: inset 0 0 0 1px var(--linea);
}

.carta__caja {
  margin-top: var(--e-4);
  text-align: center;
  color: var(--tinta-3);
}


@media (prefers-reduced-motion: reduce) {
  .carta { transition: none; }
}

/* ==========================================================================
   FASE 10 · LA BIBLIOTECA
   ========================================================================== */

/* Faltaba el tercer tono de la tapa: la ficha los pide por `b.tono` y solo
   había índigo —el de por defecto— y ámbar, así que los salvia salían índigo. */
.portada--salvia { background-color: var(--salvia); }


/* ----- La estantería ---------------------------------------------------------
   Los libros de pie, como en un estante. Lo que hace que esto funcione y no sea
   una lista girada es que EL ANCHO DEL LOMO ES EL NÚMERO DE PÁGINAS: en un
   estante de verdad reconoces un libro por su grosor antes que por su título. */

.balda {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  margin-top: var(--e-4);
  padding: 0 2px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  /* La tabla del estante, que es lo que convierte una fila de rectángulos en
     una estantería. */
  background-image: linear-gradient(var(--linea), var(--linea));
  background-size: 100% 3px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}

.balda::-webkit-scrollbar { display: none; }

.lomo {
  position: relative;
  flex: 0 0 auto;
  width: var(--ancho, 30px);
  height: 132px;
  padding: 10px 0;
  border: none;
  border-radius: 2px 2px 1px 1px;
  background-color: var(--indigo);
  color: var(--lienzo);
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  /* El canto y el filo de arriba: sin ellos es un rectángulo de color. */
  box-shadow: inset -3px 0 0 color-mix(in oklab, #000 16%, transparent),
              inset 0 3px 0 color-mix(in oklab, #fff 14%, transparent),
              var(--sombra-1);
  transition: translate var(--d-rapido) var(--muelle-smooth);
}

/* Al tocarlo sale un poco del estante, como cuando lo sacas con el dedo. */
.lomo:active { translate: 0 -5px; }

.lomo--ambar  { background-color: var(--ambar); }
.lomo--salvia { background-color: var(--salvia); }

/* El título gira y se lee de arriba abajo, que es como se lee un lomo en
   español. Si no cabe, se corta con puntos: un lomo estrecho es un libro fino
   y eso también es información. */
.lomo__titulo {
  display: block;
  writing-mode: vertical-rl;
  width: 100%;
  height: 100%;
  padding: 0 1px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.6;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Los que no tienes todavía: contorneados, como el hueco que dejarán. */
.lomo--por-comprar {
  background-color: transparent;
  color: var(--tinta-2);
  box-shadow: inset 0 0 0 1.5px var(--linea);
}

/* Los leídos, un punto más apagados: están, pero ya no hay nada que hacer con
   ellos. Se baja la SATURACIÓN, no la opacidad, para no arrastrar el contraste
   del título. */
.lomo--leido { filter: saturate(0.55); }

/* LA CINTA DEL MARCAPÁGINAS, a la altura por la que vas. Sale por el canto
   derecho, que es por donde sale de un libro cerrado. */
.lomo__senal {
  position: absolute;
  right: -2px;
  top: var(--senal, 50%);
  width: 9px;
  height: 3px;
  border-radius: 0 2px 2px 0;
  background-color: var(--ambar);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--lienzo) 60%, transparent);
}

.lomo--ambar .lomo__senal { background-color: var(--indigo); }


/* ----- Las notas, a la altura de su página -----------------------------------
   Una nota de la página 41 de 320 cae casi abajo del todo, donde estaba cuando
   la escribiste. Un listado por página dice lo mismo; colocarlas dice además
   CUÁNTO libro había entre una y otra. */

.lomo-notas {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: var(--e-4);
  margin-top: var(--e-3);
  list-style: none;
}

.lomo-notas__barra {
  position: relative;
  border-radius: var(--r-full);
  background-color: var(--lienzo-2);
}

.lomo-notas__barra i {
  position: absolute;
  left: 50%;
  top: var(--y, 0%);
  width: 14px;
  height: 3px;
  translate: -50% -50%;
  border-radius: var(--r-full);
  background-color: var(--salvia);
}

.lomo-notas__lista { display: grid; gap: var(--e-4); }


@media (prefers-reduced-motion: reduce) {
  .lomo { transition: none; }
}


/* El botón de texto de una barra: la caja táctil tiene que llenar los 44 px de
   alto de la barra y no los 18 que mide su línea de texto. El relleno la sube y
   el margen negativo devuelve la maquetación a donde estaba, que es lo que hace
   que se pueda arreglar sin tocar ninguna otra pantalla. */
.navbar__fila .boton-texto {
  padding: 13px 4px;
  margin: -13px -4px;
}

/* ==========================================================================
   FASE 11 · RELACIONES · LAS ÓRBITAS
   ========================================================================== */

/* Cuatro aros concéntricos, y el aro ES la frecuencia: el de dentro son los de
   cada semana y el de fuera, los de dos veces al año. La distancia al centro
   es la distancia de verdad.

   Los aros giran despacio —tres minutos por vuelta— y cada monograma gira al
   revés a la misma velocidad, así que las iniciales nunca se ponen del revés.
   A esa velocidad una persona se desplaza menos de un píxel mientras levantas
   el dedo, que es la condición para que se pueda tocar sin perseguirla. */

.orbitas {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 320px;
  margin: var(--e-4) auto 0;
  display: grid;
  place-items: center;
}

.orbitas__yo {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background-color: var(--tinta-fuerte);
  color: var(--lienzo);
  font-size: var(--ui-caption);
  font-weight: 650;
}

/* Sin recibir toques. Un aro es una caja cuadrada del tamano de su diametro,
   asi que el de fuera cubre a los tres de dentro y —siendo hermano posterior—
   se comia el toque de once de las catorce personas. Las que reciben el toque
   son las personas, no los aros. Es el mismo fallo que las muescas de la regla
   de gramos en la fase 9, en otro sitio. */
.orbita {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--r) * 2);
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
  animation: orbitar 180s linear infinite;
}

/* Un aro en un sentido y el siguiente en el otro: si todos giran igual, el
   conjunto se lee como una sola rueda y se pierde que son aros distintos. */
.orbita--contra { animation-direction: reverse; }

.aro {
  position: absolute;
  inset: 0;
  border-radius: var(--r-full);
  border: 1px dashed var(--linea);
}

/* Colocado por COORDENADAS sobre el aro. El 50 % de «left» y «top» es el del
   ARO, que es el elemento que lo contiene, y --cx/--cy son el coseno y el seno
   que pone el JS. Con «rotate + translateY» el porcentaje del translate se mide
   contra el propio satelite y todos acababan en el centro. */
.satelite {
  position: absolute;
  left: calc(50% + 50% * var(--cx, 0));
  top: calc(50% + 50% * var(--cy, -1));
  width: 30px;
  height: 30px;
  translate: -50% -50%;
  padding: 0;
  border: none;
  background: none;
  pointer-events: auto;
  cursor: pointer;
}

/* Y esta capa deshace el giro DEL ARO, que es una animación y no un transform
   fijo. Misma duración y sentido contrario: se cancelan exactamente. */
.satelite__gira {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  animation: orbitar 180s linear infinite reverse;
}

.orbita--contra .satelite__gira { animation-direction: normal; }

/* El apagado va en GRIS y no en transparencia. El gris conserva la
   luminosidad, y con ella el contraste entre la inicial blanca y su fondo; la
   transparencia se lo come y deja una letra ilegible sobre el lienzo. */
.satelite__mono {
  width: 30px;
  height: 30px;
  font-size: var(--ui-footnote);
  filter: grayscale(var(--apaga, 0));
  transition: filter var(--d-medio) var(--muelle-smooth);
}

/* El punto de los que deben un saludo: fuera del monograma para no taparlo. */
.satelite__toca {
  position: absolute;
  right: -1px;
  top: -1px;
  width: 9px;
  height: 9px;
  border-radius: var(--r-full);
  background-color: var(--ambar);
  box-shadow: 0 0 0 2px var(--lienzo);
}

@keyframes orbitar {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}


/* ----- La leyenda de los aros ----------------------------------------------- */

.leyenda-orb {
  list-style: none;
  display: grid;
  gap: 6px;
  margin: var(--e-5) 0 0;
  padding: var(--e-3) 0 0;
  border-top: 1px solid var(--linea-suave);
}

.leyenda-orb__fila {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--ui-footnote);
}

.leyenda-orb__punto {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background-color: var(--indigo);
}

/* De dentro a fuera, cada aro un poco más apagado: el mismo gradiente que se
   ve en el dibujo, para que la leyenda y el dibujo se lean juntos. */
.leyenda-orb__punto--2 { background-color: color-mix(in oklab, var(--indigo) 72%, var(--lienzo-2)); }
.leyenda-orb__punto--3 { background-color: color-mix(in oklab, var(--indigo) 46%, var(--lienzo-2)); }
.leyenda-orb__punto--4 { background-color: color-mix(in oklab, var(--indigo) 26%, var(--lienzo-2)); }

.leyenda-orb__nombre { color: var(--tinta-fuerte); font-weight: 600; }
.leyenda-orb__cada { color: var(--tinta-3); font-variant-numeric: tabular-nums; }

.leyenda-orb__cuantos {
  min-width: 22px;
  text-align: right;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
}


@media (prefers-reduced-motion: reduce) {
  /* Quietas las dos capas a la vez: parar solo el aro dejaría los monogramas
     girando solos, que es peor que el movimiento entero. */
  .orbita,
  .satelite__gira { animation: none; }
  .satelite__mono { transition: none; }
}

/* ==========================================================================
   FASE 11 · NOTAS · LA CINTA VIVA Y LA PASTILLA VIVA
   ========================================================================== */

/* ----- La cinta viva ---------------------------------------------------------
   Los filtros no son etiquetas abstractas: son LAS COSAS, con su monograma y
   su cuenta. «Startify 4» dice dos cosas a la vez —a qué filtras y cuánto hay
   ahí— y eso es lo que convierte una fila de filtros en un mapa. */

.filtros--cinta .filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 7px;
}

.filtros--cinta .filtro b {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  opacity: 0.55;
}

.filtros--cinta .filtro--activo b { opacity: 0.8; }

.filtro__mono {
  flex: none;
  width: 19px;
  height: 19px;
  font-size: 9.5px;
  font-weight: 650;
}

.filtro__punto {
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: 3px;
  border-radius: var(--r-full);
  background-color: var(--indigo);
}

.filtro__punto--salvia { background-color: var(--salvia); }
.filtro__punto--ambar  { background-color: var(--ambar); }
.filtro__punto--rosa   { background-color: var(--rosa); }
.filtro__punto--neutro { background-color: var(--tinta-3); }

/* Las que no tienen sitio: un punto hueco, que es lo que son. */
.filtro__punto--hueco {
  background-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--tinta-3);
}


/* ----- El ancla de una nota --------------------------------------------------
   De qué va la nota, en su tarjeta y en su ficha. */

.ancla {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: var(--ui-caption);
  font-weight: 600;
  color: var(--tinta-2);
}

.ancla__mono {
  flex: none;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: var(--r-full);
  background-color: var(--indigo);
  color: var(--lienzo);
  font-size: 9px;
  font-weight: 650;
  font-style: normal;
}

.ancla-caja {
  display: grid;
  gap: 5px;
  margin-bottom: var(--e-4);
}

.ancla__rot {
  font-size: var(--ui-caption2);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.ancla--grande {
  width: 100%;
  gap: var(--e-2);
  padding: var(--e-3);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background-color: var(--lienzo);
  font-size: var(--ui-body);
  color: var(--tinta-fuerte);
  cursor: pointer;
}

.ancla--grande .ancla__mono { width: 24px; height: 24px; font-size: var(--ui-caption2); }
.ancla--grande .ico { margin-left: auto; color: var(--tinta-3); }


/* ----- La pastilla viva ------------------------------------------------------
   Una mención DENTRO de la frase, con su monograma. Va en línea con el texto y
   no en una lista de «relacionado con» al lado: una mención tiene un sitio en
   la frase, y sacarla a un campo aparte pierde dónde estaba y por qué. */

.mencion {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Vertical-align y no un margen: dentro de un párrafo la pastilla tiene que
     sentarse sobre la línea base como una palabra más, no empujar el renglón. */
  vertical-align: -3px;
  margin: 0 1px;
  padding: 1px 7px 1px 2px;
  border-radius: var(--r-full);
  background-color: color-mix(in oklab, var(--indigo) 11%, var(--lienzo));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--indigo) 20%, transparent);
  color: var(--tinta-fuerte);
  font-size: 0.92em;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
}

.mencion__mono {
  flex: none;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: var(--r-full);
  background-color: var(--indigo);
  color: var(--lienzo);
  font-size: 9px;
  font-weight: 650;
  font-style: normal;
}


/* ----- El cuerpo editable ---------------------------------------------------- */

.pagina__texto--vivo {
  min-height: 132px;
  line-height: 1.6;
  white-space: pre-wrap;
  /* El contorno propio del navegador se come el radio de la tarjeta. */
  outline: none;
}

.pagina__texto--vivo:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--indigo) 45%, transparent);
  border-radius: var(--r-sm);
}

.pagina__texto--vivo:empty::before {
  content: "Escribe la nota… y «@» para citar algo";
  color: var(--tinta-3);
}


/* ----- El elector de menciones ------------------------------------------------ */

.elector {
  margin-top: var(--e-3);
  padding: var(--e-3);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background-color: var(--lienzo-2);
}

.elector__rotulo {
  margin-bottom: var(--e-2);
  font-size: var(--ui-caption2);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.elector__lista { display: grid; gap: 2px; }

.elector__op {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  width: 100%;
  min-height: 40px;
  padding: 6px 8px;
  border: none;
  border-radius: var(--r-sm);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.elector__op:active { background-color: var(--lienzo-3); }

.elector__nombre {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--ui-footnote);
  font-weight: 600;
  color: var(--tinta-fuerte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.elector__rot {
  flex: none;
  font-size: var(--ui-caption2);
  color: var(--tinta-3);
}


/* ----- Los aros, en la ficha de persona --------------------------------------- */

.aros-elegir {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--e-3);
}

.aro-op {
  padding: 6px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--r-full);
  background-color: var(--lienzo);
  color: var(--tinta-2);
  font: inherit;
  font-size: var(--ui-caption);
  font-weight: 550;
  cursor: pointer;
}

.aro-op--puesto {
  border-color: var(--indigo);
  background-color: var(--indigo);
  color: var(--lienzo);
  font-weight: 650;
}

/* ==========================================================================
   FASE 12 · LAS DOS PORTADAS
   ========================================================================== */

/* ----- Cambiar el enfoque sin pararlo ---------------------------------------
   El botón no dice «parar»: dice «cambiar». Y la hoja dice lo que se guarda
   ANTES de tocarla, con nombre y cifra. */

.enfoque__cambiar {
  display: block;
  margin-top: var(--e-3);
  padding: 6px 0;
}

.cambio {
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
}

.cambio__guarda { margin-bottom: var(--e-3); }

.cambio__lista { display: grid; gap: var(--e-2); }

.cambio__op {
  display: grid;
  gap: 2px;
  min-height: 52px;
  padding: var(--e-2) var(--e-3);
}

.cambio__que {
  font-size: var(--ui-footnote);
  font-weight: 600;
  color: var(--tinta-fuerte);
}

.cambio__quien { font-size: var(--ui-caption2); color: var(--tinta-3); }

.cambio__no {
  width: 100%;
  margin-top: var(--e-3);
  background-color: transparent;
  color: var(--tinta-2);
  box-shadow: inset 0 0 0 1px var(--linea);
}


/* ----- Las manijas de ordenar ------------------------------------------------
   Dos botones y no un arrastre: dentro de una lista que ya se desplaza, un
   arrastre vertical se pelea con el scroll, y perder el scroll de la portada
   para ganar un gesto es un mal cambio. */

.manijas {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: auto;
}

.manija {
  display: grid;
  place-items: center;
  width: 34px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: var(--r-xs);
  background-color: var(--lienzo-2);
  color: var(--tinta-2);
  cursor: pointer;
}

.manija:active { background-color: var(--lienzo-3); }

/* El chevron apunta a la derecha: girándolo noventa grados apunta arriba y
   abajo, que es lo que hacen los dos botones. */
.manija .ico { width: 15px; height: 15px; rotate: -90deg; }
.manija + .manija .ico { rotate: 90deg; }

.enlace--activo { font-weight: 700; }


/* ----- El riel del día --------------------------------------------------------
   Una columna de horas con todo lo de hoy y una marca en la hora que es. Lo ya
   pasado se aparta —se tiñe, no se le baja la opacidad, porque dentro hay texto
   que hay que poder leer— y lo que viene se queda entero: a las 09:41 lo que
   importa es lo que queda. */

.riel-dia {
  list-style: none;
  display: grid;
  gap: 0;
  margin: var(--e-4) 0 0;
  padding: 0;
}

.hora-fila {
  display: grid;
  grid-template-columns: 42px 14px 1fr;
  align-items: stretch;
  gap: var(--e-2);
}

.hora-fila__hora {
  padding-top: 11px;
  font-size: var(--ui-caption2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-3);
  text-align: right;
}

/* La línea de la columna: un hilo continuo con el punto de cada cosa encima.
   Sin el hilo son puntos sueltos; con él, una jornada. */
.hora-fila__linea {
  position: relative;
  display: block;
}

.hora-fila__linea::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1.5px;
  translate: -50% 0;
  background-color: var(--linea-suave);
}

.hora-fila:first-child .hora-fila__linea::before { top: 16px; }
.hora-fila:last-child .hora-fila__linea::before { bottom: calc(100% - 16px); }

.hora-fila__punto {
  position: absolute;
  left: 50%;
  top: 16px;
  width: 9px;
  height: 9px;
  translate: -50% -50%;
  border-radius: var(--r-full);
  background-color: var(--indigo);
  box-shadow: 0 0 0 2.5px var(--lienzo);
}

.hora-fila__punto--salvia { background-color: var(--salvia); }
.hora-fila__punto--ambar  { background-color: var(--ambar); }
.hora-fila__punto--rosa   { background-color: var(--rosa); }
.hora-fila__punto--neutro { background-color: var(--lienzo-3); box-shadow: 0 0 0 2.5px var(--lienzo), inset 0 0 0 1.5px var(--tinta-3); }

.hora-fila__cuerpo {
  display: grid;
  gap: 1px;
  padding: 7px 0 9px;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.hora-fila__que {
  font-size: var(--ui-footnote);
  font-weight: 600;
  color: var(--tinta-fuerte);
}

.hora-fila__pie { font-size: var(--ui-caption2); color: var(--tinta-2); }

/* LO YA PASADO. El plan pedía llevarlo al 55 % de opacidad; medido, eso deja
   el pie en 2,8:1 y el título en 3,6:1, los dos por debajo de AA, y cada fila
   es un botón. Se consigue lo mismo —que se aparte— tiñendo: el título baja a
   la tinta de segundo nivel y el pie a la de tercero, y el punto pierde color.
   Se ve igual de apartado y se sigue pudiendo leer. */
.hora-fila--ida .hora-fila__que { color: var(--tinta-2); font-weight: 550; }
.hora-fila--ida .hora-fila__pie { color: var(--tinta-3); }
.hora-fila--ida .hora-fila__punto { filter: grayscale(1); }

/* LA MARCA DE AHORA, entre lo que ya ha pasado y lo que viene. */
.hora-ahora {
  display: grid;
  grid-template-columns: 42px 14px 1fr;
  align-items: center;
  gap: var(--e-2);
  padding: 3px 0;
}

.hora-ahora__hora {
  font-size: var(--ui-caption2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--indigo);
  text-align: right;
}

.hora-ahora__raya {
  position: relative;
  display: block;
  height: 1.5px;
  background-color: var(--indigo);
}

.hora-ahora__raya::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  translate: -50% -50%;
  border-radius: var(--r-full);
  background-color: var(--indigo);
}

.hora-ahora__rot {
  font-size: var(--ui-caption2);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--indigo);
}


@media (prefers-reduced-motion: reduce) {
  .manija { transition: none; }
}

/* La línea de periodo del trío de Trabajo: cruza las tres columnas y dice de
   qué mes son las cifras y contra qué comparan las flechas. Sin ella, una
   cifra a medio mes con una flecha debajo no se puede leer bien: no se sabe
   si el número es del mes o de siempre, ni contra qué va la flecha. */
.trio__periodo {
  grid-column: 1 / -1;
  margin-bottom: var(--e-3);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--linea-suave);
  font-size: var(--ui-caption2);
  color: var(--tinta-3);
}

.trio__periodo:empty { display: none; }


/* ----- La misma zona, por su nombre ------------------------------------------
   El camino de dedo de la silueta. El cuello mide 13 × 10 px dibujado sobre un
   cuerpo, y eso no se arregla agrandándolo: lo que se dibuja es un cuerpo. Se
   arregla dando el mismo filtro por otro sitio, con botones de 44 px de alto. */

.zonas-nombre__abrir {
  display: block;
  margin-top: var(--e-3);
  padding: 7px 0;
}

.zonas-nombre {
  margin-top: var(--e-2);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
}

.zonas-nombre__cara {
  margin-bottom: var(--e-2);
  font-size: var(--ui-caption2);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.zonas-nombre__cara + .zonas-nombre__fila { margin-bottom: var(--e-4); }

.zonas-nombre__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* 32 de alto y no 44: dentro hay doce pastillas por cara y a 44 la tarjeta se
   iría de pantalla. El área de dedo la pone el seudoelemento, que no ocupa
   sitio; con seis de hueco entre pastillas las áreas no llegan a solaparse. */
.zonas-nombre__zona {
  position: relative;
  min-height: 32px;
}

.zonas-nombre__zona::after {
  content: "";
  position: absolute;
  inset: -6px -3px;
}


/* ----- La barra de estado de una sesión --------------------------------------
   En las listas de sesiones el icono del chip es SIEMPRE un reloj —en una
   pantalla que se llama Horas, ochenta y dos veces seguidas— y lo único que
   cambia de fila a fila es el TONO: verde si esas horas ya están facturadas,
   ámbar si no. El icono se lleva 34 de los 301 px de la fila y no dice nada;
   el tono dice algo y cabe en cuatro. Medido, el nombre de la tarea pasa de
   156 a 213 px de sitio y los cortes de 39 a 9 de 82. */

.chip--fino {
  width: 4px;
  min-width: 4px;
  height: 32px;
  padding: 0;
  border-radius: var(--r-full);
}

.chip--fino .ico { display: none; }

/* Sin chevron: la fila ya acaba en una cifra, y un chevron detrás de una cifra
   no promete nada que la cifra no prometiera. En las listas que no llevan
   columna de valor se queda, porque ahí sí es la única señal de que se abre.
   Se pone a mano y no con :has(.fila__valor): esa regla tocaría de golpe todas
   las filas con cifra de la app, que son cientos, y a estas alturas un cambio
   así se comprueba peor de lo que arregla. Aquí están las que se midieron
   cortadas. */
.fila--sin-chevron .ico--chevron { display: none; }


/* El tono del resultado, ahora en su etiqueta: antes lo llevaba un chip con un
   icono que decía la misma palabra que la etiqueta. */
.fila__origen--indigo { color: var(--indigo); }
.fila__origen--salvia { color: var(--salvia); }
.fila__origen--ambar  { color: var(--ambar); }
.fila__origen--rosa   { color: var(--rosa); }
.fila__origen--rojo   { color: var(--rojo); }
.fila__origen--neutro { color: var(--tinta-3); }