/* ================================================================
   LA LETRA

   Antes esto ponia `system-ui`. Suena inofensivo, pero en Windows 11
   `system-ui` resuelve a Segoe UI: la letra del Explorador de archivos
   y del Panel de Control. Por buena que sea, hace que la web parezca un
   trozo del sistema operativo en vez de un producto propio. Ninguna app
   que te guste usa la letra del sistema.

   Ahora usa Inter, guardada en /estaticos/fuentes (ver el LEEME de esa
   carpeta: por que esta ahi y no pedida a Google).

   Es una fuente VARIABLE: `font-weight: 100 900` significa que UN solo
   archivo trae todos los grosores, del finito al negro, y ademas los de
   en medio. Antes hacia falta un archivo por grosor.

   `font-display: swap` = "mientras se baja la letra buena, escribe con
   la del sistema". Asi el texto se lee desde el primer momento en vez
   de quedarse en blanco esperando.

   Va partida en dos trozos ("subsets"). El navegador SOLO se baja el
   que necesite: para escribir en espanol basta con el primero, y el
   segundo solo entra si aparece algun caracter raro. Eso es lo que hace
   el `unicode-range`: le dice a cada archivo de que letras se encarga.
   ================================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/estaticos/fuentes/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/estaticos/fuentes/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ================================================================
   COLORES
   Todo el color sale de estas variables. Cambias la variable
   -> cambia toda la web. No hay colores sueltos por ahi.

   OJO a --color: cada tarea puede traer el suyo (de su categoria o
   propio). Si no trae ninguno, var(--color, var(--acento)) cae
   solo al color de acento. Eso es lo que hace el segundo argumento.
   ================================================================ */

:root {
  /* La jerarquia NO se hace con sombras, sino con superficies que suben de
     luminosidad y bordes finos. Es como lo hacen Linear o Notion: plano y
     limpio, no "flotante". Por eso hay una escalera bg -> tarjeta -> panel. */
  /* OJO a los numeros: la version anterior tenia --bg en #fcfcfd y
     --tarjeta en #ffffff. Eso es un 1% de diferencia, o sea NADA. Un
     escalon que no se ve no es un escalon: la pantalla salia blanca
     sobre blanca con rayitas, y por eso se veia plana y triste de dia.
     Ahora el lienzo es gris DE VERDAD y la tarjeta se recorta encima. */
  --bg:      #edeff3;   /* el lienzo: gris, sin verguenza */
  --tarjeta: #ffffff;   /* una superficie: sube un peldaño Y SE NOTA */
  --panel:   #e1e4ea;   /* otra superficie, para huecos y campos */
  --fg:      #0b0d12;   /* casi negro: el texto es lo que mas manda */
  --suave:   #565d6b;   /* texto poco importante, pero LEGIBLE */
  --linea:   #d1d5de;   /* borde fino: casi todo el trabajo de separar es suyo */
  --linea-fuerte: #a7aeba;
  --acento:  #4c56d6;   /* un indigo sobrio, no un azul que grita */
  --peligro: #e5484d;

  /* Sombras: casi solo para lo que FLOTA de verdad (menus, dialogos).
     Las tarjetas NO llevan sombra; se separan con su borde. */
  --sombra-1: none;
  --sombra-2: 0 6px 20px rgba(16, 18, 27, .10);
  --sombra: var(--sombra-2);

  /* Los redondeos, en ESCALA. Antes habia 5, 6, 8, 9, 10, 12, 14 y 16 px
     mezclados sin criterio. Eso se nota aunque no sepas por que: la
     pantalla parece cosida a trozos de sitios distintos. Tres medidas y
     una pildora, y se acabo. La regla es: cuanto mas grande la caja,
     mas redondeada. */
  --radio-chico:   6px;    /* chips, pastillas, botones mini */
  --radio:         8px;    /* botones y campos: lo que tocas */
  --radio-caja:   12px;    /* tarjetas, paneles, dialogos */
  --radio-pildora: 999px;  /* las que son media circunferencia por los lados */
}

/* Tema oscuro, al estilo Linear: un casi-negro de lienzo y superficies que
   suben en pasos muy pequeños. */
html[data-tema="oscuro"] {
  --bg:      #08090a;
  /* ANTES estaba en #0f1011, que apenas se despegaba del lienzo: las
     tarjetas no se veian como tarjetas. Este si sube un peldaño. */
  --tarjeta: #141619;
  --panel:   #1d2025;
  /* Casi blanco PURO. Esto es lo que da la sensacion de "caro": el salto
     entre el fondo y el texto. Un gris claro sobre negro se ve barato. */
  --fg:      #fbfcfd;
  --suave:   #8b929e;
  --linea:   #282c33;
  --linea-fuerte: #3c424c;
  --sombra-2: 0 8px 24px rgba(0, 0, 0, .6);
  --sombra: var(--sombra-2);
  /* Le dice al navegador que pinte de oscuro LO SUYO: barras de scroll,
     desplegables nativos, el calendario del input de fecha. Sin esto se
     quedan blancos y cantan como una almeja en una app negra. */
  color-scheme: dark;
}

/* Tema automatico: hace caso a lo que tenga puesto Windows. */
@media (prefers-color-scheme: dark) {
  html[data-tema="auto"] {
    --bg:      #08090a;
    --tarjeta: #141619;
    --panel:   #1d2025;
    --fg:      #fbfcfd;
    --suave:   #8b929e;
    --linea:   #282c33;
    --linea-fuerte: #3c424c;
    --sombra-2: 0 8px 24px rgba(0, 0, 0, .6);
    --sombra: var(--sombra-2);
    color-scheme: dark;
  }
}

/* ================================================================
   BASE
   ================================================================ */

* { box-sizing: border-box; }

/* La letra BASE de toda la app. De fabrica el navegador usa 16px; aqui
   se sube a 17. Como casi todo el CSS mide en `rem` (multiplos de esta
   letra), ese unico numero agranda la aplicacion ENTERA guardando las
   proporciones. Antes todo andaba por 0,9rem y se leia apretado. */
html { font-size: 17px; }

body {
  margin: 0;
  /* Inter primero; el resto es el paracaidas por si la fuente no
     cargara. Ver el bloque LA LETRA al principio del archivo. */
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  /* El texto se ve mas nitido y "de diseñador" con esto activado. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Inter trae mejoras opcionales apagadas de serie:
       cv11 -> la "l" con cola y el "1" sin pie, para no confundirlos
       ss01 -> la "a" y la "g" de una sola planta, mas limpias en
               tamaños pequeños de interfaz
     Es el tipo de detalle que no sabes nombrar pero se nota. */
  font-feature-settings: "cv11", "ss01";
  font-variant-ligatures: contextual;
}

/* Los titulares, con las letras un pelin mas JUNTAS (tracking negativo) y
   un peso medio, no negrita seca. Es el detalle que separa un titulo
   "de sistema" de uno cuidado: cuanto mas grande el texto, mas se aprietan
   las letras. Copiado del estilo de Linear/Notion. */
h1, h2, h3 { letter-spacing: -0.02em; font-weight: 600; }
h1 { letter-spacing: -0.03em; }

main { padding: 0 1.4rem 4rem; }


/* ================================================================
   EL COLOR DE CADA SECCION

   Las 5 secciones ya tenian su color desde hace tiempo (el que sale en
   las tarjetas del inicio), pero al entrar en ellas no se notaba:

       Calendario  #4f8cff  azul        Entrenos  #f97316  naranja
       Apuntes     #a855f7  morado      Notas     #14b8a6  verde agua
       Dinero      #22c55e  verde

   El truco para teñir la pantalla entera es no repintar cincuenta
   reglas, sino cambiar UNA: --acento. Todo lo que ya lo usaba (botones
   primarios, pestañas activas, halos de foco, el dia de hoy, el titulo)
   se tiñe solo.

   Quien decide el valor es el SERVIDOR, en base.html:

       --acento = el color de la seccion, si la tiene
                  el color que elegiste en Ajustes, si no (Inicio, Cuenta)

   Se hace alli y no aqui por una razon tonta pero real: --acento va
   escrito a mano en el <html>, y un estilo EN LINEA le gana a esta hoja.
   Pelearlo con !important dejaria muerto el selector de color de
   Ajustes. Calculandolo en el servidor mandan los dos, cada uno en su
   sitio.

   --marca guarda SIEMPRE tu color de Ajustes, sin teñir. Lo usa el logo
   de la barra lateral, para que la marca no cambie de color al navegar.
   ================================================================ */

:root { --marca: var(--acento); }


/* ================================================================
   EL FOCO DEL TECLADO

   Quien se mueve con el tabulador tiene que ver DONDE esta. El navegador
   pinta un anillo de fabrica, pero es fino, del color del sistema y se
   pierde sobre nuestros fondos.

   `:focus-visible` y NO `:focus` a secas, y la diferencia importa: el
   navegador solo enciende focus-visible cuando has llegado con el
   TECLADO. Con `:focus` el anillo se quedaria pegado despues de cada
   clic de raton, que es feo, y por eso mucha gente acaba escribiendo
   `outline: none` para todo... dejando a ciegas a quien navega con
   teclado. Asi se tienen las dos cosas.
   ================================================================ */

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--radio-chico);
}


/* ================================================================
   MOVIMIENTO REDUCIDO

   Hay gente a la que el movimiento en pantalla le marea o le dispara
   migrañas. Los sistemas operativos traen un interruptor para pedir
   "menos animacion", y esto lo respeta.

   Se deja en casi-instantaneo (0.01ms) en vez de quitarlo del todo: asi
   los cambios de estado siguen ocurriendo y nada se queda a medias, pero
   no hay nada que se mueva.

   No es un adorno de buen alumno: para quien lo necesita es la
   diferencia entre poder usar la app o marearse usandola.
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================================
   LA RECETA DE TARJETA  (leer esto antes de crear una caja nueva)

   Hay DOS tipos de caja y se confunden con una facilidad pasmosa.
   La diferencia no es de adorno: es si la caja SOBRESALE o si es un
   AGUJERO.

     SUBE (tarjeta, panel, dialogo, menu flotante)
       background: var(--tarjeta);
       border: 1px solid var(--linea);
       border-radius: var(--radio-caja);
       hover -> border-color: var(--linea-fuerte);
                background: color-mix(in srgb, var(--acento) 3%, var(--tarjeta));

     BAJA (campos de texto, selects, celdas, rayas de tabla, ranuras)
       background: var(--panel);

   POR QUE IMPORTA: --panel y --tarjeta se cruzan entre los dos temas.

     CLARO                          OSCURO
     bg      #fcfcfd  ░░░           bg      #08090a  ███
     tarjeta #ffffff  ___  SUBE     tarjeta #0f1011  ▒▒   SUBE
     panel   #f4f5f7  ▓▓▓  BAJA     panel   #141516  ▒▒▒  BAJA

   En claro, --panel es MAS OSCURO que el lienzo (hunde).
   En oscuro, --panel es MAS CLARO que el lienzo (levanta).
   Esa es la trampa: una tarjeta pintada de --panel se ve bien en modo
   oscuro y gris hundida en modo claro. La MISMA linea de CSS hace dos
   cosas opuestas segun el tema. Por eso la app se veia plana de dia.

   NUNCA una sombra para separar una tarjeta del fondo. La sombra se
   guarda para lo que flota DE VERDAD encima de la pagina: dialogos y
   menus. Todo lo demas se separa con su borde fino. Asi lo hace Linear.
   ================================================================ */

/* ---------------------------------------------------- desplegables

   Los <select> nativos los pinta cada navegador a su manera, y todos
   feos. `appearance: none` los apaga y les dibujamos NUESTRA flechita.

   La flecha es un SVG metido en la propia hoja de estilo (data:), asi
   no hay que descargar ninguna imagen. El gris #9aa3b2 se ve bien
   tanto en tema claro como en oscuro. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.9rem !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%239aa3b2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .65rem center;
  background-size: 11px;
  cursor: pointer;
}

/* ================================================================
   LA BARRA LATERAL

   El cambio mas grande del rediseño, y no es de color.

   Antes las 6 secciones vivian escondidas detras de tres rayitas. O sea:
   el 90% de la aplicacion no se veia NUNCA. Eso es un patron de movil
   usado en un ordenador, y es la razon principal de que Orbita pareciera
   una pagina web y no un producto. Una app se ve como una app porque
   ENSEÑA SU ESTRUCTURA.

       ANTES                      AHORA
       ┌──────────────┐           ┌───────┬──────────────┐
       │ ☰  Órbita    │           │Órbita │  Dinero      │
       ├──────────────┤           │       │              │
       │    Dinero    │           │ Inicio│  contenido   │
       │  contenido   │           │ Calend│              │
       └──────────────┘           │ Apunte│              │
                                  │ Dinero│  <- marcado  │
        todo oculto               ├───────┤              │
                                  │ Rodrigo              │
                                  └───────┴──────────────┘

   En el movil no cabe, asi que se esconde y vuelve el cajon de las tres
   rayas, que sigue existiendo tal cual. No se pierde nada.
   ================================================================ */

/* La rejilla de dos columnas: barra fija + todo lo demas. */
.app {
  display: grid;
  /* El ancho de la barra lateral, en una variable, porque lo necesita
     algo mas que esta rejilla: la barra de ajustar horas va `fixed` y
     tiene que empezar justo donde acaba la lateral, o se le echa encima.
     Con un 244 escrito en dos sitios, un dia se cambia uno y no el otro. */
  --ancho-lateral: 244px;
  grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
  min-height: 100vh;
  /* Al plegar, la barra DESLIZA en vez de pegar el salto. Los navegadores
     modernos saben animar grid-template-columns; el que no sepa, cambia
     de golpe como antes y ya esta. */
  transition: grid-template-columns .18s ease;
}

/* `position: sticky` + `top: 0` = la barra se queda quieta mientras el
   contenido de al lado hace scroll. Es lo que la hace sentir "mueble"
   y no "cabecera larga". */
.lateral {
  position: sticky;
  top: 0;
  /* Ver el comentario largo de `dialog.cajon`: `vh` miente en un movil
     porque no cuenta la barra del navegador. Aqui importa menos (esta
     barra solo sale a partir de 901px), pero una tablet en horizontal
     tambien tiene barra y no cuesta nada hacerlo bien. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1rem .7rem;
  background: var(--tarjeta);
  border-right: 1px solid var(--linea);
}

/* La marca, arriba. Usa --marca (tu color de Ajustes), no --acento: si
   usara el acento cambiaria de color en cada seccion, y una marca que
   cambia de color no es una marca. */
.lateral-marca {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem .55rem 1rem;
  text-decoration: none;
  color: inherit;
}
.lateral-marca img { width: 26px; height: 26px; border-radius: 7px; }
.lateral-marca strong {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

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

/* Cada seccion. El icono a la izquierda, el nombre, y a la derecha un
   contador cuando hay algo que contar. */
.lateral-menu a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .55rem;
  border-radius: var(--radio);
  font-size: .93rem;
  font-weight: 500;
  color: var(--suave);
  text-decoration: none;
  /* --color lo pone cada enlace desde la plantilla, con el color de su
     seccion. Si no viniera, cae al acento. */
  --color: var(--acento);
  transition: background .12s ease, color .12s ease;
}
.lateral-menu a svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  /* El icono toma el color del texto de su fila. Una sola regla y ya
     sigue al estado (apagado, hover, activo) sin repetirse. */
  color: currentColor;
}
.lateral-menu a:hover {
  background: var(--panel);
  color: var(--fg);
}

/* La seccion en la que estas: fondo teñido de SU color y el texto y el
   icono en ese color. No un relleno solido: en una lista de seis, un
   bloque de color macizo pesa demasiado y tapa el resto. */
.lateral-menu a.activo {
  background: color-mix(in srgb, var(--color) 14%, transparent);
  color: var(--color);
  font-weight: 600;
}

/* El puntito de color de cada seccion, a la izquierda del icono. Es lo
   que hace que la lista se lea como un indice de colores y no como seis
   renglones grises.

   Es un <i> de verdad y no un ::before por una razon concreta: los
   globitos de ayuda (data-tip) ya usan ::before y ::after del mismo
   elemento. Si el punto fuera un ::before, se pelearian y el piquito del
   globito desapareceria al plegar la barra. */
.lateral-punto {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--color);
  opacity: .35;
  transition: opacity .12s ease, transform .12s ease;
}
.lateral-menu a:hover .lateral-punto { opacity: .7; }
.lateral-menu a.activo .lateral-punto { opacity: 1; transform: scale(1.3); }

.lateral-texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La marca y el boton de plegar, en la misma fila. */
.lateral-cab {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding-bottom: .6rem;
}
.lateral-cab .lateral-marca { flex: 1; min-width: 0; padding: .35rem .55rem; }


/* ---------------------------------------------------- la barra PLEGADA

   No desaparece del todo: se queda en una tira de iconos. Esconderla
   entera dejaria la pantalla sin ninguna forma de navegar hasta
   encontrar el boton de traerla de vuelta; asi sigues viendo donde
   estas y puedes cambiar de seccion de un clic.

   Todo lo que se va (los nombres, el rotulo "Secciones", tu nombre) se
   quita con display:none y no con opacidad: si solo se volviera
   invisible seguiria ocupando sitio y la tira no encogeria. */

.app.plegada { --ancho-lateral: 68px; }

.app.plegada .lateral { padding: 1rem .6rem; align-items: center; }
.app.plegada .lateral-texto,
.app.plegada .lateral-grupo,
.app.plegada .lateral-marca strong,
.app.plegada .lateral-nombre { display: none; }

/* Los iconos, centrados en la tira. */
.app.plegada .lateral-cab { flex-direction: column; gap: .5rem; }
.app.plegada .lateral-marca { justify-content: center; padding: .35rem 0; }
.app.plegada .lateral-menu a { justify-content: center; padding: .6rem 0; }
.app.plegada .lateral-pie { flex-direction: column; gap: .2rem; }
.app.plegada .lateral-yo { justify-content: center; padding: .4rem 0; }

/* El idioma en la tira de 68px. Ahi no cabe "Español" entero, asi que se
   quita la flecha y se aprieta el hueco: queda una cajita con el nombre
   recortado que sigue abriendo la misma lista al pulsarla.
   No se esconde: si has entrado y no entiendes la web, es justo lo que
   estas buscando. */
.app.plegada .lateral-idioma .sel-boton {
  padding: .35rem .3rem;
  font-size: .7rem;
  justify-content: center;
}
.app.plegada .lateral-idioma .sel-flecha { display: none; }

/* El punto de color estorba en la tira: el icono ya va del color de su
   seccion cuando esta activa, y con 68px de ancho el punto solo aprieta. */
.app.plegada .lateral-punto { display: none; }

/* El globito con el nombre SOLO cuando esta plegada. Abierta, el nombre
   ya se lee al lado y un globito encima seria decir dos veces lo mismo.
   `content: none` apaga el pseudo-elemento entero; con `display: none`
   se quedaria ocupando su hueco. */
.app:not(.plegada) .lateral-menu a[data-tip]::after,
.app:not(.plegada) .lateral-menu a[data-tip]::before { content: none; }

/* Los globitos de la barra salen A LA DERECHA, no encima: la barra esta
   pegada al borde izquierdo y uno de arriba se saldria de la pantalla en
   el primer enlace. */
.lateral [data-tip]::after,
.lateral [data-tip]::before {
  bottom: auto;
  top: 50%;
  left: 100%;
}
.lateral [data-tip]::after {
  transform: translate(6px, -50%);
  margin: 0 0 0 6px;
}
.lateral [data-tip]::before {
  transform: translate(6px, -50%);
  margin: 0;
  border-color: transparent;
  border-right-color: var(--fg);
}
.lateral [data-tip]:hover::after,
.lateral [data-tip]:hover::before,
.lateral [data-tip]:focus-visible::after,
.lateral [data-tip]:focus-visible::before {
  transform: translate(0, -50%);
}

/* El rotulillo de grupo ("Secciones"). */
.lateral-grupo {
  margin: .9rem 0 .3rem;
  padding: 0 .55rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--suave);
}

/* ---------------------------------------------------- el idioma

   Un desplegable, no dos pastillas: enseña el que tienes PUESTO y la
   lista solo sale si vas a cambiarlo. Con dos idiomas las pastillas
   cabian; con cuatro serian cuatro cajas ocupando el pie de la barra
   para algo que se toca una vez al año.

   Es un <select> normal y app.js le pone delante el control propio de
   Órbita (.sel-boton), asi que se ve igual que los de Dinero o Entrenos
   sin escribir nada nuevo.

   El `margin-top: auto` estaba antes en `.lateral-pie`: se come todo el
   hueco que sobra y empuja al fondo de la barra. Ahora lo lleva esto,
   que es lo primero del bloque de abajo, y el pie va pegado detras. */
.lateral-idioma {
  margin-top: auto;
  padding-bottom: .55rem;
}
.lateral-idioma .sel-boton {
  width: 100%;
  padding: .4rem .55rem;
  font-size: .82rem;
  color: var(--suave);
}
.lateral-idioma .sel-boton:hover { color: var(--fg); }

/* En el cajon del movil se pulsa con el dedo, asi que va mas alto. */
.lateral-idioma.en-cajon {
  margin-top: 0;
  padding-bottom: .7rem;
}
.en-cajon .sel-boton { padding: .6rem .7rem; font-size: .9rem; }

/* El pie: quien eres y salir. */
.lateral-pie {
  padding-top: .7rem;
  border-top: 1px solid var(--linea);
  display: flex;
  align-items: center;
  gap: .55rem;
}
.lateral-yo {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex: 1;
  min-width: 0;
  padding: .4rem .5rem;
  border-radius: var(--radio);
  text-decoration: none;
  color: var(--fg);
  font-size: .88rem;
  font-weight: 500;
}
.lateral-yo:hover { background: var(--panel); }

/* La chapita con la inicial. Es lo mas parecido a un avatar sin pedirle
   una foto a nadie. */
.lateral-avatar {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--marca);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
}
.lateral-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Los botones de icono del pie (ajustes, salir): sin caja hasta que los
   tocas, para que no compitan con la lista de secciones. */
.lateral-icono {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  background: none;
  color: var(--suave);
  cursor: pointer;
}
.lateral-icono svg { width: 1.05rem; height: 1.05rem; }
.lateral-icono:hover { background: var(--panel); color: var(--fg); }
/* El de Configuracion ahora lleva a una PANTALLA, asi que puede estar
   "activo" igual que las secciones del menu de arriba. */
.lateral-icono.activo {
  background: color-mix(in srgb, var(--acento) 16%, transparent);
  color: var(--acento);
}
.lateral-icono.peligro:hover {
  background: color-mix(in srgb, var(--peligro) 14%, transparent);
  color: var(--peligro);
}
.lateral-pie form { display: flex; margin: 0; }

/* En pantalla estrecha la barra no cabe: se esconde y vuelve el cajon de
   las tres rayas, que nunca se ha ido. */
@media (max-width: 900px) {
  /* OJO al `.app.plegada` de esta lista: NO sobra.

     Si dejas la barra plegada en el ordenador, eso se guarda en
     localStorage y el <body> sigue llevando la clase `plegada` cuando
     abres la web en el movil. Y `.app.plegada` (linea ~422) pide una
     rejilla de "68px + resto".

     Una regla dentro de un @media NO pesa mas por estar ahi dentro: los
     @media no suman especificidad. Asi que `.app` a secas (0,1,0) PERDIA
     contra `.app.plegada` (0,2,0) aunque este mas abajo en el archivo.
     Resultado: en el movil quedaba una columna de 68px vacia (la barra
     esta escondida) empujando toda la pagina a la derecha.

     Nombrando aqui `.app.plegada` empatamos en especificidad, y al estar
     mas abajo gana esta. */
  /* Y OJO al `minmax(0, 1fr)`: no es lo mismo que `1fr` a secas.

     `1fr` significa en realidad `minmax(auto, 1fr)`, y ese `auto` dice
     "no encojas por debajo de tu contenido". Asi que si algo dentro no
     sabe partirse (una rejilla de 7 dias, una tabla ancha), la columna
     CRECE en vez de obligarlo a caber, y arrastra a toda la pagina.

     Medido: con `1fr`, .principal ocupaba 420px dentro de una ventana de
     390. Los 30px de mas eran la barra de scroll horizontal de la que
     salian TODOS los demas desbordes de la app en el movil: no eran
     cinco fallos, era este repetido cinco veces.

     `minmax(0, 1fr)` pone el minimo en cero: la columna manda sobre su
     contenido y no al reves. */
  .app,
  .app.plegada { grid-template-columns: minmax(0, 1fr); }
  .lateral { display: none; }
}

/* ---------------------------------------------------- el movil de verdad

   Los 17px de letra base y el aire de los lados estan pensados para una
   pantalla de ordenador. En un telefono de 360px, ese mismo aire se come
   casi el 15% del ancho, y como TODO mide en `rem`, subir la base
   agrandaba tambien los huecos: el texto acababa en columnas de cuatro
   palabras.

   Se baja la base a 16px (lo normal) y se recorta el margen. No es
   "hacerlo pequeño": es que en una pantalla que se sujeta con la mano,
   la letra ya esta mas cerca de los ojos. */
@media (max-width: 600px) {
  html { font-size: 16px; }

  main { padding: 0 .9rem 3rem; }

  /* OJO: lo del calendario en el movil (titulo, leyenda, cabecera,
     pastillas del mes, agenda y lista) NO esta aqui. Vive en un segundo
     @media al FINAL de este fichero, y esta explicado alli por que.
     Resumen: las reglas base de esos trozos se escriben mas abajo que
     este bloque, y un @media no gana por ser un @media. */

  /* Los dialogos ya se ajustan solos con el min() de mas abajo; aqui solo
     se les quita relleno, que en un movil es ancho que no tienes. */
  dialog { padding: 1rem; }

  /* Lo de los PANELES en movil (una columna, alto maximo, botones
     pegados abajo) esta en el @media del FINAL del fichero. Aqui perdia:
     `.fila` se define mas abajo y se comia el `gap`. Lo caza
     herramientas/reglas_muertas.py. */

  /* ---- filas de mandos que no cabian ----

     Varias filas de botones estaban puestas en linea sin permiso para
     bajar de renglon. En el ordenador sobra sitio y no se nota; en un
     movil de 390px se salian por la derecha y la pagina cogia barra de
     scroll horizontal, que es de las cosas que peor sientan: arrastras
     de lado sin querer y pierdes el sitio.

     La solucion no es apretarlos hasta que quepan (quedarian ilegibles),
     es dejarles BAJAR. Una fila de dos lineas se lee; una fila cortada
     por la mitad, no.

     OJO: los `margin-left: 0` que acompañaban a estas reglas NO estan
     aqui. Se han ido al @media del final del fichero, porque desde aqui
     no ganaban. Ver alli. */
  .barra-mes { flex-wrap: wrap; }
  .notas-cabecera { flex-wrap: wrap; }
  .notas-archivo { flex-wrap: wrap; }

  /* Las acciones de cada rama del arbol de notas (+ Cuatrimestre, subir,
     bajar, renombrar, borrar) se salian por la derecha. */
  .rama > summary { flex-wrap: wrap; }

  /* Las pestañas Mes/Semana/Dia/Lista: en vez de cortar "Lista", se
     deslizan de lado DENTRO de su propia caja. La pagina no se mueve.
     `-webkit-overflow-scrolling` para que en el iPhone el gesto tenga
     inercia y no parezca que va a tirones. */
  .vistas {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;      /* la barrita de scroll aqui solo ensucia */
  }
  .vistas::-webkit-scrollbar { display: none; }

  /* Un texto largo de apoyo debe partir, no empujar la caja. */
  .media-expediente .pista { white-space: normal; }
}


/* La segunda columna: todo lo que no es la barra.

   `overflow-x: clip` es la red de seguridad contra el scroll lateral.
   Estrechar los globitos ayuda, pero uno colgado de un boton pegado al
   borde derecho siempre asomara un poco, porque va centrado sobre su
   boton. Esto recorta ese sobrante en vez de dejar que estire la pagina.

   `clip` y NO `hidden`, y la diferencia es importante: `hidden` convierte
   la caja en un contenedor de scroll, y eso ROMPE el `position: sticky`
   de la cabecera (se quedaria pegada arriba del todo en vez de seguirte
   al bajar). `clip` recorta sin crear scroll, asi que el sticky sigue
   funcionando. */
.principal { overflow-x: clip; }


/* ---------------------------------------------------- cabecera */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .7rem 1.3rem;
  border-bottom: 1px solid color-mix(in srgb, var(--linea) 60%, transparent);
  position: sticky;
  top: 0;
  z-index: 10;
  /* La barra deja ver un poco lo que pasa por detras al hacer scroll,
     con un desenfoque suave. Sin saturaciones exageradas: solo que no
     sea una franja opaca y seca. */
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.izq, .der { display: flex; align-items: center; gap: .5rem; }
/* Sin `min-width: 0`, un hijo de un flex no encoge por debajo de su
   contenido. Aqui dentro van las pestañas Mes/Semana/Dia/Lista, y sin
   esto el `overflow-x: auto` que llevan en el movil no se activa nunca:
   la fila crecia y empujaba la cabecera fuera de la pantalla. */
.izq { min-width: 0; }
.vistas { min-width: 0; }

/* Con barra lateral, la cabecera se queda SOLO con lo de la pagina:
   navegar por fechas, las vistas del calendario y el boton de crear. La
   marca, el menu y el usuario ya viven en la barra; repetirlos aqui
   seria decir dos veces lo mismo. En movil (donde no hay barra) vuelven
   a salir, porque alli son la unica forma de moverse. */
@media (min-width: 901px) {
  header .hamburguesa,
  header .marca { display: none; }
}
/* Si la cabecera se queda vacia (una seccion sin botones ni fechas) no
   debe dejar una franja hueca con su rayita. */
header:empty { display: none; }

/* El logo de la cabecera: el iconito redondo + el nombre. */
.marca {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-right: .8rem;
  text-decoration: none;   /* ahora es un enlace al inicio, no un rotulo */
  color: inherit;
}
.marca img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.marca strong {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.vistas { display: flex; gap: .2rem; }
.vistas a {
  padding: .35rem .7rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--suave);
  font-size: .9rem;
}
.vistas a:hover { background: var(--panel); }
.vistas a.activo { background: var(--acento); color: #fff; }

/* El titulo de la pantalla. Va en el color de la SECCION (ver el bloque
   de --acento mas abajo): entras en Dinero y el titulo es verde, en
   Apuntes morado. Es la senal mas barata de "estas aqui". */
.titulo {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--acento);
  padding: 1.6rem 1.4rem .4rem;
  margin: 0;
}

/* ---------------------------------------------------- leyenda de categorias */

/* La leyenda vive dentro de un <details> (ver base.html) para poder
   plegarse en el movil. En una pantalla normal eso no hace falta: aqui
   el rotulo "Categorias (5)" sobraria, porque los colores ya se ven.
   Se esconde el <summary> y se queda EXACTAMENTE la leyenda de antes.

   El <details> esta abierto, asi que esconder su rotulo no esconde su
   contenido. */
.leyenda-caja > summary { display: none; }

.leyenda {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  padding: 0 1.2rem .8rem;
}
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  color: var(--suave);
}
.etiqueta i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* ---------------------------------------------------- botones */

.btn {
  padding: .42rem .85rem;
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--tarjeta);
  color: var(--fg);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: background .14s ease, border-color .14s ease,
              transform .14s ease, box-shadow .14s ease;
}
.btn:hover {
  background: var(--panel);
  border-color: color-mix(in srgb, var(--fg) 18%, var(--linea));
}
.btn:active { transform: translateY(1px); }

/* El primario: color solido y ya. Pesa mas que los demas por ser el unico
   con color de fondo, no por gritar con degradados ni sombras de colores. */
.btn.primario {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}
.btn.primario:hover {
  background: color-mix(in srgb, var(--acento) 88%, #000);
  border-color: color-mix(in srgb, var(--acento) 88%, #000);
}

/* Los iconos DENTRO de un boton. Se miden en `em` y no en pixeles: `em`
   es "veces la letra de este boton", asi que en un .btn.mini el icono
   encoge solo, sin una regla aparte para cada tamaño.

   El icono va un pelin por debajo del alto de la letra a proposito: a la
   misma altura que el texto se ve mas grande de lo que es, porque una
   letra minuscula no llega arriba del todo. */
.btn svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  margin-right: -.05em;   /* el gap del boton ya separa; esto lo afina */
}
.btn.mini svg { width: 1em; height: 1em; }

/* Un boton que es SOLO icono: cuadrado, sin el hueco del texto. */
.btn.icono-solo {
  padding: .42rem;
  gap: 0;
}
.btn.icono-solo svg { margin: 0; }
.btn.mini.icono-solo { padding: .28rem; }

.btn.peligro { color: var(--peligro); border-color: var(--peligro); }
.btn.peligro:hover {
  background: var(--peligro); color: #fff; border-color: var(--peligro);
}
.btn.mini { padding: .28rem .6rem; font-size: .78rem; border-radius: var(--radio-chico); }

/* ================================================================
   VISTA MES — una rejilla de 7 columnas. Nada mas.
   ================================================================ */

/* El mes entero es UNA tarjeta, no cuatro rayas sueltas. Antes solo
   llevaba borde arriba y a la izquierda: la rejilla se deshilachaba por
   la derecha y por abajo, como una hoja cortada a mano. */
.mes {
  border: 1px solid var(--linea);
  border-radius: var(--radio-caja);
  overflow: hidden;             /* que las casillas no se salgan del redondeo */
  background: var(--tarjeta);   /* las casillas van encima de esto */
}

/* El borde de fuera ya lo pone .mes. Si la ultima casilla de cada fila
   pusiera ademas el suyo, el borde derecho saldria de 2px; igual con la
   ultima semana y el de abajo. Se les quita el suyo y listo. */
.mes-cabecera .mes-cab:last-child,
.mes-dias .mes-celda:last-child { border-right: none; }
.mes-semana:last-child .mes-celda { border-bottom: none; }

/* Cada semana es una FILA con dos capas encima de la otra:
     capa 1 -> .mes-dias    (las 7 casillas)
     capa 2 -> .mes-bandas  (las convenciones, flotando por encima)
   Por eso la fila es `relative` y las bandas son `absolute`. */
.mes-semana { position: relative; }

.mes-cabecera,
.mes-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.mes-cab {
  padding: .4rem;
  text-align: center;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--suave);
  background: var(--panel);
  border-right: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}

.mes-celda {
  min-height: 110px;
  /* min-width: 0 NO es un adorno, arregla un fallo real.

     Una casilla de una rejilla mide POR DEFECTO al menos lo que ocupa su
     contenido sin partir (`min-width: auto`). Y dentro van pastillas con
     `white-space: nowrap`, asi que una tarea llamada "09:00 Examen de
     Calculo" obligaba a su columna a medir eso de ancho. Con 7 columnas,
     el mes entero se salia de la pantalla en el movil: se veian cinco
     dias y medio y el resto habia que arrastrarlo.

     Con `min-width: 0` la casilla puede encoger, y entonces el
     `text-overflow: ellipsis` de la pastilla hace su trabajo y corta el
     texto con puntos suspensivos. Sin esto, ese ellipsis no se activa
     nunca porque a la pastilla nunca le falta sitio. */
  min-width: 0;
  padding: .3rem;
  border-right: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  gap: .2rem;
  cursor: cell;              /* pista: aqui puedes crear */
}
.mes-celda:hover { background: color-mix(in srgb, var(--acento) 5%, transparent); }
.mes-celda.otro-mes { background: var(--panel); }
.mes-celda.otro-mes .numero { opacity: .35; }

.numero {
  align-self: flex-end;
  font-size: .85rem;
  color: var(--suave);
  text-decoration: none;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
}
.numero:hover { background: var(--linea); }

.mes-celda.es-hoy .numero {
  background: var(--acento);
  color: #fff;
  font-weight: 700;
}

/* ================================================================
   BANDAS — las cosas que duran varios dias (convenciones, viajes)
   ================================================================ */

/* TRES NUMEROS QUE TIENEN QUE CUADRAR, Y AHORA NO PUEDEN DESCUADRARSE.

   Las bandas flotan por ENCIMA de las casillas, y las casillas dejan un
   hueco arriba para que no tapen las pastillas. Si el alto de la banda y
   el del hueco no coinciden, las bandas pisan las tareas.

   Antes eran `20px`, `gap: 2px` y un `22px` escrito a mano en otro sitio,
   con la suma hecha de cabeza. Cambiar el alto de la banda (por ejemplo
   para que se pueda tocar con el dedo) obligaba a acordarse de tocar el
   22, y eso es justo lo que no se recuerda.

   Ahora sale del mismo sitio: cambias `--alto-banda` y lo demas se
   recoloca solo. */
.mes-semana {
  --alto-banda: 20px;
  --hueco-banda: 2px;
  --sitio-numero: 2rem;      /* lo que ocupa el numero del dia */
}

/* El hueco que las casillas dejan libre arriba para que las bandas
   no tapen las pastillas. Tantos carriles, tanto hueco. */
.hueco-bandas {
  height: calc(var(--carriles, 0) * (var(--alto-banda) + var(--hueco-banda)));
  flex: none;
}

.mes-bandas {
  position: absolute;
  top: var(--sitio-numero);  /* justo debajo del numero del dia */
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: var(--alto-banda);
  gap: var(--hueco-banda);
  padding: 0 .25rem;
  pointer-events: none;      /* el hueco entre bandas deja pasar el raton */
}

.banda {
  pointer-events: auto;      /* la banda si se puede tocar */
  min-width: 0;              /* sin esto, un titulo largo estira la rejilla */
  padding: .1rem .4rem;
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  text-align: left;
  color: #fff;
  cursor: grab;
  border: none;
  border-radius: var(--radio-chico);
  background: var(--color, var(--acento));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.banda:hover { filter: brightness(1.1); }
.banda.hecha { opacity: .45; text-decoration: line-through; }

/* Si la banda viene de la semana anterior (o sigue en la siguiente),
   se le quita la esquina de ese lado: se ve que esta cortada. */
.banda.abierta-izq { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.banda.abierta-der { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* En semana/dia la convencion sale como pastilla en "todo el dia",
   un trozo por cada dia. El borde punteado dice "esto sigue". */
.chip.tramo { border-left-style: dotted; }

/* ================================================================
   CHIPS (tareas sin hora) — el color lo trae la propia tarea
   ================================================================ */

.chip {
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: .78rem;
  padding: .15rem .4rem;
  border: none;
  border-radius: var(--radio-chico);
  border-left: 3px solid var(--color, var(--acento));
  background: color-mix(in srgb, var(--color, var(--acento)) 16%, transparent);
  color: var(--fg);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip:hover {
  background: color-mix(in srgb, var(--color, var(--acento)) 30%, transparent);
}
.chip.hecha { text-decoration: line-through; opacity: .45; }
.chip b { font-weight: 600; margin-right: .2rem; }

.chip-form { margin: 0; display: contents; }

/* ---- los REFLEJOS: lo que viene de otra seccion ----

   Una rutina de entreno o un recibo que se paga ese dia. No son tareas
   tuyas: son cosas que viven en Entrenos o en Dinero y que el calendario
   solo ENSEÑA. Ver calculos/reflejos.py.

   Se pintan mas apagados y con el borde punteado a proposito. Eso dice
   "esto no lo has apuntado aqui" sin tener que explicarlo, igual que el
   borde punteado del boton de crear dice "aqui va algo que aun no esta".
   Y el icono de su seccion remata de donde viene. */
.chip.reflejo {
  display: flex;
  align-items: center;
  gap: .25rem;
  text-decoration: none;
  border-left-style: dashed;
  background: color-mix(in srgb, var(--color) 10%, transparent);
  opacity: .82;
}
.chip.reflejo:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--color) 22%, transparent);
}
.chip.reflejo svg {
  width: .85em;
  height: .85em;
  flex: none;
  color: var(--color);
}
/* La mano de "esto se arrastra" NO va aqui: un reflejo no se mueve. Se
   pone la de un enlace normal, que es lo que es. */
.chip.reflejo { cursor: pointer; }

/* ================================================================
   VISTA SEMANA / DIA — rejilla de horas
   Una hora = --alto-hora pixeles. Todo se calcula con eso.
   ================================================================ */

.agenda {
  --ancho-horas: 56px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-caja);
  overflow: hidden;
}

.agenda-cab,
.agenda-tododia,
.agenda-rejilla {
  display: grid;
  grid-template-columns: var(--ancho-horas) repeat(7, 1fr);
}
.agenda.una-columna .agenda-cab,
.agenda.una-columna .agenda-tododia,
.agenda.una-columna .agenda-rejilla {
  grid-template-columns: var(--ancho-horas) 1fr;
}

.agenda-cab { background: var(--panel); border-bottom: 1px solid var(--linea); }

.dia-cab {
  padding: .5rem .3rem;
  text-align: center;
  font-size: .8rem;
  color: var(--suave);
  text-decoration: none;
  border-left: 1px solid var(--linea);
  /* Por lo mismo que en .celda-tododia: un nombre de dia largo en otro
     idioma no debe poder ensanchar su columna. Aqui hoy no pasa, pero es
     la misma rejilla y conviene que las tres filas se midan igual. */
  min-width: 0;
}
.dia-cab .num {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--fg);
}
.dia-cab.es-hoy .num {
  background: var(--acento);
  color: #fff;
  border-radius: 50%;
  width: 1.9rem;
  height: 1.9rem;
  line-height: 1.9rem;
  margin: 0 auto;
}

.agenda-tododia {
  border-bottom: 1px solid var(--linea);
  min-height: 38px;
}
.celda-tododia {
  border-left: 1px solid var(--linea);
  padding: .2rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  cursor: cell;

  /* `min-width: 0` NO es un adorno: sin el, la fila de "todo el dia" deja
     de cuadrar con la rejilla de abajo.

     Una casilla de rejilla mide POR DEFECTO al menos lo que ocupa su
     contenido sin partir (`min-width: auto`). Y dentro van pastillas con
     `white-space: nowrap`: la pastilla SI se recorta sola (tiene su
     text-overflow), pero para calcular el minimo de la casilla el
     navegador usa el texto ENTERO. Asi que un "Matricula del
     cuatrimestre" ensanchaba su columna y empujaba a las siguientes.

     Se veia justo asi: la cabecera (Lun 27, Mar 28...) cuadraba con la
     rejilla de horas, pero las cajas de "todo el dia" iban corridas,
     cada una un poco mas.

     Es la MISMA trampa que ya esta explicada en `.mes-celda`. Ahi se
     encontro en el rediseño y aqui se colo.

     Medido: desvios de 0, 24, 40, 15, 17, 49 y 25px. Ahora, 0. */
  min-width: 0;
}
.celda-tododia:hover { background: color-mix(in srgb, var(--acento) 5%, transparent); }
.hueco {
  font-size: .65rem;
  color: var(--suave);
  padding: .3rem;
  text-align: right;
}

/* ================================================================
   QUIEN SUBE Y BAJA ES LA CAJA ENTERA, NO LA REJILLA

   24h no caben en pantalla, asi que algo tiene que scrollear. Durante
   mucho tiempo fue `.agenda-rejilla`, ella sola. Y eso descuadraba el
   calendario:

     LA BARRA DE SCROLL SE COME ANCHO, Y SOLO SE LO COME A ELLA.

   Las tres filas (dias, todo el dia, horas) son tres rejillas hermanas
   que calculan sus 7 columnas por separado. Si una tiene barra y las
   otras no, reparte ~15px menos y sus columnas salen mas estrechas. El
   desvio se acumula: 0 en la primera columna y ~15px en la ultima. Los
   dias de arriba dejaban de caer sobre su columna.

   Y no se veia en las pruebas: el navegador headless usa barras
   FLOTANTES, que ocupan 0px. En Windows son clasicas y ocupan 15. Dos
   veces di el problema por arreglado midiendo en headless.

   La solucion no es compensar los 15px (¿cuantos son? depende del
   sistema). Es que scrollee UNA sola caja que las contenga a las tres:
   asi la barra queda fuera de las tres rejillas y todas miden igual.

   Esa caja es `.agenda-desliza` (ver semana.html y dia.html), y dentro
   va `.agenda-fija` con la cabecera pegada arriba. En el movil ya se
   hacia asi, por otro motivo (deslizar de lado). Ahora es igual en todas
   las pantallas, que ademas es una cosa menos que recordar.
   ================================================================ */
.agenda-desliza {
  overflow: auto;
  max-height: 62vh;
}

/* La fila de dias y la de "todo el dia" se quedan arriba al bajar por
   las horas. Fondo opaco: son transparentes, y sin el las tareas se
   leerian por debajo. */
.agenda-fija {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--bg);
}

.columna-horas { position: relative; }
.etiqueta-hora {
  height: var(--alto-hora);
  font-size: .68rem;
  color: var(--suave);
  text-align: right;
  padding-right: .4rem;
  transform: translateY(-.5em);  /* la etiqueta se pega a SU raya */
}

.columna-dia {
  position: relative;            /* los eventos se colocan DENTRO de esto */
  height: calc(24 * var(--alto-hora));
  border-left: 1px solid var(--linea);
  cursor: cell;
  /* Las rayas de las horas: una imagen que se repite. Cero HTML extra. */
  background-image: repeating-linear-gradient(
    to bottom,
    var(--linea) 0 1px,
    transparent 1px var(--alto-hora)
  );
}

/* ---------------------------------------------------- eventos (tareas con hora) */

/* EL SELECTOR LLEVA [data-tip] A PROPOSITO. NO SE QUITA.

   Mucho mas abajo hay una regla del sistema de globitos:

       [data-tip] { position: relative; }        (buscala, ~linea 3900)

   Un atributo pesa lo MISMO que una clase (0,1,0). Empate. Y en un
   empate gana la que se lee la ultima... que es aquella, porque va
   despues. Resultado: los eventos dejaban de ser absolutos, volvian al
   flujo normal y CADA UNO EMPUJABA AL SIGUIENTE. La primera tarea del
   dia caia bien de casualidad; a partir de ahi todo corrido, y las
   ultimas del dia salian por debajo de la rejilla, fuera de su columna.

   Estuvo roto desde que se añadieron los globitos, y no se vio porque
   con una o dos tareas al dia no se nota. Salio al llenar la cuenta demo
   (herramientas/llenar_demo.py).

   Poniendo el atributo aqui, esta regla pesa (0,2,0) y manda. Sin
   !important, que es tapar el problema.

   El globito sigue funcionando: solo necesita que su padre este
   posicionado, y `absolute` tambien lo esta.

   Hay una prueba que lo vigila: herramientas/sitios.py comprueba que
   cada evento este a la altura que dice su hora. */
/* ---- el reparto a lo ancho cuando varias se pisan ----

   `--carril` (en cual va) y `--de-cuantos` (cuantas hay en su racimo) los
   pone el servidor en el HTML; la FORMULA vive aqui.

   Estaba en el `style` de la plantilla, ya calculada. Se movio porque
   app.js tiene que poder cambiar el reparto (esconde las que no caben y
   ensancha las que quedan), y para eso tenia que reescribir `left` y
   `width` a mano. Al limpiar esos valores en la pasada siguiente borraba
   TAMBIEN los del servidor, y las tarjetas se iban a ancho completo unas
   encima de otras. Con variables, el JavaScript solo cambia el DATO y no
   puede pisar la formula.

   Se usa `right` y no `width` para que con una sola tarea salgan
   exactamente los 2px de siempre a cada lado, sin condiciones:

       1 de 1  ->  left 2px          right 2px
       1 de 2  ->  left 2px          right 50% + 2px
       2 de 2  ->  left 50% + 2px    right 2px          */
.evento,
.evento[data-tip] {
  position: absolute;            /* top y height los pone el HTML */
  left: calc(var(--carril, 0) * 100% / var(--de-cuantos, 1) + 2px);
  right: calc(
    (var(--de-cuantos, 1) - 1 - var(--carril, 0)) * 100%
    / var(--de-cuantos, 1) + 2px
  );
  display: block;
  text-align: left;
  font: inherit;
  /* .15rem = 2.4px arriba y 2.4 abajo. Ese 4.8 esta escrito TAMBIEN en
     _evento.html, que lo resta para saber cuantas lineas caben. Si se
     cambia aqui, hay que cambiarlo alli. */
  padding: .15rem .35rem;
  overflow: hidden;
  cursor: pointer;
  color: var(--fg);
  border: none;
  border-left: 3px solid var(--color, var(--acento));
  border-radius: var(--radio-chico);
  /* Se mezcla con --tarjeta, que es el fondo real de la rejilla del mes.
     Mezclarlo con --bg lo dejaba un pelin desemparejado del resto. */
  background: color-mix(in srgb, var(--color, var(--acento)) 22%, var(--tarjeta));
  /* Sin sombra: un evento no flota, esta DENTRO de la rejilla. Su color
     y su raya de la izquierda ya lo separan de sobra. */
}
.evento:hover {
  background: color-mix(in srgb, var(--color, var(--acento)) 36%, var(--tarjeta));
}
.evento.hecha { opacity: .45; }
.evento.hecha .evento-titulo { text-decoration: line-through; }

/* ---- "+N": las tareas que no caben a esa hora ----

   Cuando varias se pisan, el servidor reparte la columna a partes
   iguales. Con tres, cada una se queda en 13px de texto y el navegador
   parte el titulo por LETRAS. Asi que app.js deja las que quepan enteras
   y resume el resto aqui.

   VA AL PIE Y CRUZADA, no ocupando una columna mas. Se probo lo segundo
   y salia al reves de lo que se busca: en una columna de 95px, una tarea
   mas el enlace dejaban la tarea en 27px utiles, peor que los 13 que
   veniamos a arreglar. Cruzada no le quita ancho a nadie.

   Sin color de categoria a proposito: esto no es una tarea, es un
   contador. Con color pareceria una tarea mas. */
.mas-tareas {
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 600;
  color: var(--suave);
  text-decoration: none;
  /* Opaco: se cruza por encima del ultimo tramo de las tarjetas que si
     se ven, y translucido se leerian sus letras por debajo. */
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
}
.mas-tareas:hover {
  color: var(--fg);
  background: var(--tarjeta);
}

/* Las que no caben siguen en el HTML a proposito: sin JavaScript se ven
   todas, repartidas como siempre. Con el enlace puesto, sobran. */
.evento.no-cabe { display: none; }

/* ---- los tiradores para estirar con el dedo ----

   Salen al darle a "Ajustar horas" en la ficha de la tarea (ver app.js).
   Son elementos DE VERDAD y no ::before/::after porque en un `.evento`
   esos dos ya los usa el globito de `[data-tip]`.

   Sobresalen POR FUERA de la tarjeta, y eso es justo la gracia: una tarea
   de media hora mide 24px, asi que si el tirador fuera por dentro no
   habria donde agarrar. Saliendo, cada uno tiene sus 44px de dedo aunque
   la tarea sea diminuta.

   `touch-action: none` para que arrastrar el tirador NO desplace la
   semana: sin esto el navegador se queda el gesto y la tarea no se
   entera. */
.tirador {
  position: absolute;
  left: 0;
  right: 0;
  height: 44px;
  z-index: 6;
  cursor: ns-resize;
  touch-action: none;
  /* La barrita que se ve. El resto del tirador es zona de dedo
     transparente: se toca, pero no se pinta. */
  background: linear-gradient(var(--color, var(--acento)), var(--color, var(--acento)))
              center / 38px 4px no-repeat;
  border-radius: 4px;
}
.tirador.arriba { top: -22px; }
.tirador.abajo { bottom: -22px; }

/* Mientras se ajusta, la tarea se destaca del resto y se pone por encima:
   los tiradores se salen de su caja y no deben quedar debajo de la tarea
   de al lado. */
.evento.ajustando {
  z-index: 5;
  outline: 2px solid var(--color, var(--acento));
  outline-offset: 1px;

  /* SIN ESTO LOS TIRADORES NO SE PUEDEN TOCAR.

     `.evento` lleva `overflow: hidden` para recortar el titulo. Pero los
     tiradores sobresalen 22px por arriba y por abajo a proposito, y
     `hidden` no solo los esconde: tambien se lleva por delante su zona
     tocable. El dedo caia en la columna de detras y no pasaba nada.

     Costo encontrarlo porque `getBoundingClientRect` SI devolvia los 44px
     (la caja existe, solo que recortada), asi que la medida decia que
     estaba bien. El titulo sigue recortandose igual: eso lo hace
     `.evento-titulo` por su cuenta. */
  overflow: visible;
}

/* Las interlineas van CLAVADAS a proposito, no al gusto del navegador.

   _evento.html cuenta cuantas lineas caben en la tarjeta, y para eso
   necesita saber cuanto mide una. Con `line-height: normal` cada
   navegador pone lo suyo y la cuenta se iria. Si se tocan estos numeros,
   hay que tocar tambien los del comentario de _evento.html. */
.evento-hora {
  display: block;
  font-size: .65rem;
  line-height: 1.2;
  color: var(--suave);
  /* Que NO se parta nunca en dos renglones: "08:30–10:00" partido roba
     una linea al titulo, que es lo que de verdad hay que leer. Si no
     cabe, mejor recortarla. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* La pone app.js cuando ni con la hora quitada cabria una linea de
   titulo. Entre saber la hora y saber QUE es, lo segundo importa mas. */
.evento.sin-hora .evento-hora { display: none; }
.evento-titulo {
  display: block;
  font-size: .78rem;
  /* La interlinea va CLAVADA, no al gusto del navegador: app.js la lee
     para saber cuantas lineas caben, y `normal` da un valor distinto en
     cada sitio. */
  line-height: 1.2;
  font-weight: 600;

  /* RECORTA POR LINEAS ENTERAS, NO POR LA MITAD DE UNA LETRA.

     Antes el titulo simplemente se salia de la tarjeta y se veia cortado
     a media altura: media palabra, con el trozo de abajo comido. Feo y,
     peor, no se sabia si faltaba texto o era asi.

     `-webkit-line-clamp` corta en la linea N y pone puntos suspensivos.
     El N lo manda el servidor en --lineas, calculado con el alto de ESTA
     tarjeta. Lleva el prefijo -webkit- en todos los navegadores: es como
     se estandarizo, no es un resto de nada. */
  display: -webkit-box;
  -webkit-line-clamp: var(--lineas, 3);
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* Y que las palabras largas ROMPAN en vez de cortarse a hacha.

     El recorte por lineas pone los puntos al final de la ultima linea
     permitida, pero no hace nada DENTRO de una linea: si la palabra es
     mas ancha que la caja, se corta por la mitad de una letra y no avisa.
     Se veia en los carriles estrechos: "Clase" salia como "Clas".

     Con esto parte por donde sea y sigue en la linea siguiente, que en
     una tarjeta de 48px es lo unico que se puede hacer. */
  overflow-wrap: anywhere;
}

/* ---- la linea de categoria de la ficha de tarea ---- */
.ficha-cat { margin: .1rem 0 1rem; }

/* ================================================================
   VISTA LISTA
   ================================================================ */

.lista { list-style: none; padding: 0; max-width: 760px; }
.lista li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--linea);
}
/* La caja del estado vacio ya es su propia caja: una raya debajo la
   partiria por la mitad. Y `display: block` porque el flex de arriba la
   encogeria a lo ancho en vez de dejarla ocupar la fila. */
.lista li.sin-raya { display: block; border-bottom: none; padding: 0; }
.punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  background: var(--color, var(--acento));
}
.titulo-tarea {
  flex: 1;
  text-align: left;
  font: inherit;
  border: none;
  background: none;
  color: var(--fg);
  cursor: pointer;
  padding: .2rem;
  border-radius: 6px;
}
.titulo-tarea:hover { background: var(--panel); }
.lista li.hecha .titulo-tarea { text-decoration: line-through; opacity: .5; }
.cuando { font-size: .8rem; color: var(--suave); }

.pista { color: var(--suave); font-size: .8rem; }


/* ================================================================
   ESTADOS VACIOS

   Ver _vacio.html para el porque. Resumen: una lista vacia era un
   parrafo gris, y esa es justo la primera pantalla que ve alguien.

   El borde DISCONTINUO es lo que hace el trabajo: dice "aqui va algo,
   todavia no esta". Un borde entero diria "esto es una caja y ya", y
   parecería que la app esta rota en vez de recien estrenada.
   ================================================================ */

.vacio-caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  padding: 3.2rem 1.5rem;
  text-align: center;
  background: var(--tarjeta);
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio-caja);
}

/* El icono en su circulo, teñido del color de la seccion. Es lo unico
   con color de toda la caja: el ojo va ahi primero y luego baja al
   texto, que es el orden en el que hay que leerlo. */
.vacio-icono {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  margin-bottom: .35rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--acento) 12%, transparent);
  color: var(--acento);
}
.vacio-icono svg { width: 1.55rem; height: 1.55rem; }

.vacio-titulo { margin: 0; font-size: 1.1rem; font-weight: 600; }
.vacio-texto {
  margin: 0;
  font-size: .88rem;
  color: var(--suave);
  /* `ch` mide anchos de caracter. Una linea de mas de 45-60 caracteres
     cansa: al saltar de renglon el ojo pierde el sitio. Por eso los
     periodicos van a columnas estrechas y no a pagina completa. */
  max-width: 42ch;
}
.vacio-caja .btn { margin-top: .7rem; }

/* ================================================================
   PANTALLAS DE ENTRADA (login / primera vez)
   ================================================================ */

.pantalla-entrada {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 1rem;
}

.tarjeta {
  width: 100%;
  max-width: 360px;
  padding: 2rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-caja);
  /* Sube un peldano sobre el lienzo. Sin sombra: la separa su borde.
     Antes llevaba `box-shadow: var(--sombra)` y flotaba como un cartel. */
  background: var(--tarjeta);
}

.marca-grande {
  margin: 0 0 1.4rem;
  font-size: 1.4rem;
  text-align: center;
}

/* El logo entero, en la pantalla de entrada. Redondeamos las esquinas
   para que el rectangulo azul no choque con la tarjeta. */
.logo-entrada {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto 1.4rem;
  border-radius: 12px;
}

.tarjeta label {
  display: block;
  margin-bottom: 1rem;
  font-size: .85rem;
  color: var(--suave);
}
.tarjeta input {
  display: block;
  width: 100%;
  margin-top: .25rem;
  padding: .6rem;
  font: inherit;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
/* El campo enfocado: el borde se tine de acento y sale un halo finito.
   Es la MISMA senal que ya usaba `.rapido input:focus`, ahora en todos
   los campos de la app. Sin esto, en el login no se ve donde escribes. */
.tarjeta input:focus,
.caja input:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
}

.btn.ancho {
  width: 100%;
  justify-content: center;
  padding: .6rem;
}

/* La rayita con texto en medio: "¿no tienes cuenta?" */
.separador {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 1.2rem 0;
  color: var(--suave);
  font-size: .75rem;
}
.separador::before,
.separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linea);
}

/* (Aqui vivia .quien, el nombre de usuario de la esquina de arriba.
   Ya no existe: ahora estas TU con tu inicial en el pie de la barra
   lateral, que es donde lo pone cualquier app.) */

.centrado { text-align: center; margin: .8rem 0 0; }
.enlace { color: var(--acento); font-size: .8rem; }

/* El aviso: rojo si algo va mal, verde si va bien. Sin gritar. */
.aviso {
  margin: 0 0 1rem;
  padding: .6rem .8rem;
  font-size: .85rem;
  border-radius: 8px;
  color: var(--peligro);
  border: 1px solid var(--peligro);
  background: color-mix(in srgb, var(--peligro) 10%, transparent);
}
.aviso.bien {
  color: #16a34a;
  border-color: #16a34a;
  background: color-mix(in srgb, #16a34a 10%, transparent);
}
.aviso-suave { margin-top: 1rem; }

/* ---------------------------------------------------- pagina "Mi cuenta" */

/* margin: 0 auto = "reparte el hueco que sobra a los dos lados por igual".
   Eso es lo que centra una caja que tiene ancho maximo. */
.pagina-estrecha {
  max-width: 480px;
  margin: 0 auto;
}

.titulo.centrado { text-align: center; }

.cuenta { width: 100%; }

.caja {
  padding: 1.2rem;
  margin-bottom: 1.2rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-caja);
  background: var(--tarjeta);   /* SUBE: es una tarjeta, no un hueco */
}
.caja h2 { margin: 0 0 1rem; font-size: 1rem; }

/* La caja de borrar cuenta: borde rojo, para que se note que es delicada. */
.caja.peligrosa { border-color: var(--peligro); }
.caja.peligrosa h2 { color: var(--peligro); }

.caja label {
  display: block;
  margin-bottom: .9rem;
  font-size: .85rem;
  color: var(--suave);
}
/* Las casillas, los radios y el selector de color quedan FUERA: esto es
   para los campos de ESCRIBIR. Ponerle a un checkbox `display: block;
   width: 100%; padding: .55rem` no tenia sentido ni cuando se escribio.

   No era solo feo: al ir al 100% de ancho tapaba cualquier intento de
   darle tamaño de dedo en tactil (se quedaban en 13px).

   OJO CON ESTA LISTA DE `:not()`: cada uno SUBE el peso del selector.
   Al añadir los dos primeros, esta regla paso a ganarle a la del
   selector de color, que se estiro al 100% y aplasto a las muestras de
   al lado (de 22px a 14). Por eso el color esta tambien excluido. Si
   algun dia hay que añadir otro `:not()`, mirar a quien empieza a
   ganarle. Se ve con: python herramientas/dedos.py */
.caja input:not([type="checkbox"]):not([type="radio"]):not([type="color"]) {
  display: block;
  width: 100%;
  margin-top: .25rem;
  padding: .55rem;
  font: inherit;
  color: var(--fg);
  background: var(--panel);   /* BAJA: un campo es un hueco en la tarjeta */
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

/* ================================================================
   EL MENU DE LA IZQUIERDA (el "cajon")
   ================================================================ */

/* Las tres rayas. Dibujadas, no un emoji: asi cogen el color del tema. */
.hamburguesa {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 32px;
  padding: 0 7px;
  cursor: pointer;
  background: none;
  border: 1px solid var(--linea);
  border-radius: 8px;
}
.hamburguesa span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--fg);
}
.hamburguesa:hover { background: var(--panel); }

/* Un <dialog> normal, pero pegado al borde izquierdo y de alto completo.
   El navegador ya pone el fondo oscuro y lo cierra con Escape. */
dialog.cajon {
  margin: 0;                 /* sin esto, el navegador lo centra */

  /* `dvh` Y NO `vh`, y esto no es quisquillosidad: era un fallo gordo.

     En un movil, `100vh` es la pantalla COMO SI LA BARRA DEL NAVEGADOR NO
     ESTUVIERA. O sea, mas alto que lo que de verdad se ve. El cajon
     medía mas que el hueco visible, su pie ("Mi cuenta", Ajustes, Cerrar
     sesion) quedaba TAPADO por la barra del navegador... y como la altura
     cuadraba justo con el contenido, `overflow-y: auto` no tenia nada que
     desplazar. Resultado: en el telefono no habia forma de llegar a
     Ajustes ni de cerrar sesion.

     `dvh` es la altura que se ve AHORA, con la barra puesta. Se deja el
     `vh` delante como respaldo para un navegador que no lo entienda: si
     no lo entiende se salta esa linea y se queda con la de antes. */
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;

  /* Y el hueco del indicador de inicio del iPhone, esa barrita de abajo.
     Sin esto el ultimo boton queda justo debajo y se falla al tocarlo. */
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  width: 260px;
  min-width: 0;
  max-width: 80vw;
  border-radius: 0;
  border-right: 1px solid var(--linea);
  padding: 1rem;
}

.cajon-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .8rem;
  margin-bottom: .8rem;
  border-bottom: 1px solid var(--linea);
}

.cajon-titulo {
  margin: 1rem 0 .4rem;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--suave);
}

/* El menu del cajon usa las MISMAS reglas que la barra lateral
   (.lateral-menu): mismo icono, mismo puntito de color, mismo marcado de
   la seccion activa. Aqui solo se agrandan las filas, porque en el movil
   hay que darles con el pulgar y no con un raton. */
.cajon-nav a { padding: .7rem .6rem; font-size: 1rem; }
.cajon-nav a svg { width: 1.25rem; height: 1.25rem; }

.cajon-salir {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
}

/* ================================================================
   APUNTES
   ================================================================ */

.editor, .apunte { max-width: 760px; margin: 0 auto; }
/* Los apuntes necesitan mas ancho: caben mas fichas en fila. */
.apuntes { max-width: 1000px; margin: 0 auto; }

/* ---------------------------------------------------- buscador */

.buscador {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-bottom: .8rem;
}
.buscador input[type=search] {
  flex: 1;
  min-width: 0;
  padding: .5rem .7rem;
  font: inherit;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 8px;
}

/* ---------------------------------------------------- carpetas en pastillas */

/* Las carpetas van TODAS, tambien las vacias: son el mapa de como tienes
   repartidos los apuntes, y una carpeta recien creada tiene que verse
   para poder meterle cosas.

   Lo que se arregla es el TAMAÑO. Eran pastillas casi tan grandes como
   un boton de verdad, y con cinco o seis carpetas se comian una franja
   entera por encima de lo que vienes a leer. Un filtro es un MANDO, no
   el contenido: tiene que estar a mano sin llamar la atencion. Ahora
   miden casi la mitad de alto y van en gris hasta que eliges una. */
.carpetas-fila {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.1rem;
}
.pastilla {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .16rem .55rem;
  font: inherit;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--suave);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: var(--radio-pildora);
  cursor: pointer;
  white-space: nowrap;   /* un nombre de carpeta nunca parte en dos lineas */
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.pastilla svg { width: .85em; height: .85em; flex: none; }
.pastilla:hover { background: var(--panel); color: var(--fg); }

/* La elegida NO se rellena de color macizo. En una fila de seis, un
   bulto de color pesa mas que el titulo de los apuntes que hay debajo, y
   entonces el mando grita mas que el contenido. Con un tinte suave, el
   borde y el texto en el color de la seccion ya se ve cual esta puesta. */
.pastilla.activa {
  background: color-mix(in srgb, var(--acento) 12%, transparent);
  border-color: color-mix(in srgb, var(--acento) 45%, transparent);
  color: var(--acento);
  font-weight: 600;
}

/* El contador. Es un dato de apoyo: se lee si lo buscas, no se te mete
   por los ojos. tabular-nums para que la fila no baile al pasar de 9 a
   10 apuntes. */
.pastilla .cuenta {
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  opacity: .55;
}
.pastilla.activa .cuenta { opacity: .8; }

.pastilla.nueva { border-style: dashed; }

/* ---------------------------------------------------- tarjetas */

/* El titulillo de cada grupo: "Fijados" / "Los demás".
   Sustituye al icono: se ve igual de claro y no hay emojis. */
.grupo {
  margin: 0 0 .5rem;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--suave);
}
.tarjetas + .grupo { margin-top: 1.6rem; }

/* Fichas en fila. auto-fill = "mete tantas columnas como quepan;
   cada una de 220px como minimo". Si no caben, bajan solas a la fila
   de abajo. En movil se quedan en una columna, sin tocar nada.
   (Ojo: .tarjeta a secas tambien es la tarjeta del login, por eso
   aqui apuntamos solo a las de DENTRO de .tarjetas.) */
.tarjetas {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .7rem;
}

/* La receta de tarjeta, tal cual. Antes llevaba una barra de color de 4px
   cruzando todo el borde de arriba; con doce fichas en pantalla eso son
   doce brochazos de color y la rejilla se convierte en un semaforo.
   Ahora el color de la carpeta es un PUNTO al lado del titulo: se sigue
   sabiendo de que carpeta es de un vistazo, pero manda el texto. */
.tarjetas .tarjeta {
  display: flex;
  border: 1px solid var(--linea);
  border-radius: var(--radio-caja);
  background: var(--tarjeta);
  transition: border-color .15s ease, background .15s ease;
}
/* Al pasar el raton se marca el BORDE, no cambia el fondo a gris.
   Cambiar el fondo a --panel hundia la ficha justo cuando la senalas:
   la senal iba al reves de lo que quieres decir. */
.tarjetas .tarjeta:hover {
  border-color: var(--linea-fuerte);
  background: color-mix(in srgb, var(--acento) 3%, var(--tarjeta));
}

/* El punto de la carpeta. Si el apunte no tiene carpeta, --color no
   existe y cae al gris del segundo argumento: el punto sigue ahi para
   que todos los titulos empiecen a la misma altura. */
.tarjetas .tarjeta h3::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .45rem;
  vertical-align: .07em;
  border-radius: 50%;
  background: var(--color, var(--linea-fuerte));
}

/* Toda la tarjeta es un enlace. Sin botones dentro: se elige y ya.
   Fijar y borrar se hacen DENTRO del apunte. */
.tarjeta-cuerpo {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: .8rem;
  text-decoration: none;
  color: inherit;
}
.tarjeta h3 { margin: 0 0 .35rem; font-size: 1rem; }

/* El resumen ocupa hasta 3 lineas y luego corta con "...".
   Asi las fichas quedan mas o menos del mismo alto. */
.resumen {
  margin: 0 0 .6rem;
  font-size: .85rem;
  color: var(--suave);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* La fecha y la carpeta, empujadas al fondo de la ficha. */
.tarjeta .meta { margin-top: auto; }

.tarjeta .meta,
.apunte-cab .meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  font-size: .75rem;
  color: var(--suave);
}
.carpeta {
  padding: .1rem .4rem;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--linea);
  color: var(--suave);
  text-decoration: none;
}
.apunte-cab .fecha { margin-left: auto; }
.tarjeta .fecha { margin-left: auto; }

/* El boton "Fijado" (encendido) se ve distinto del "Fijar" (apagado). */
.btn.marcado {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

/* ---------------------------------------------------- editor */

.titulo-grande {
  width: 100%;
  padding: .5rem 0;
  margin-bottom: 1rem;
  font: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fg);
  background: none;
  border: none;
  border-bottom: 2px solid var(--linea);
}
.titulo-grande:focus { outline: none; border-bottom-color: var(--acento); }

.editor .fila { gap: 1rem; margin-bottom: 1rem; }
.editor label { display: block; font-size: .8rem; color: var(--suave); flex: 1; }
.editor select {
  display: block;
  width: 100%;
  margin-top: .25rem;
  padding: .5rem;
  font: inherit;
  color: var(--fg);
  /* background-COLOR, no `background` a secas: el atajo borraria la
     flechita que le dibujamos abajo a todos los desplegables. */
  background-color: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 8px;
}

.cuerpo {
  width: 100%;
  padding: .8rem;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  resize: vertical;
}
.cuerpo:focus { outline: none; border-color: var(--acento); }

/* ------------------------------------------- el editor con formato

   Misma caja que el textarea de arriba (mismo borde, mismo fondo, mismo
   redondeo) para que no parezca otra aplicacion. Lo que cambia es la
   letra: aqui NO va monoespaciada. La de maquina de escribir tiene
   sentido cuando escribes simbolos de Markdown; cuando lo que ves es ya
   el resultado, la letra normal es la que corresponde. */

.editor-rico {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;          /* que la barra no se salga del redondeo */
}
.editor-rico:focus-within { border-color: var(--acento); }

.barra-formato {
  display: flex;
  flex-wrap: wrap;           /* en pantalla estrecha, los botones bajan */
  align-items: center;
  gap: .2rem;
  padding: .35rem;
  border-bottom: 1px solid var(--linea);
}
.barra-formato button {
  padding: .3rem .55rem;
  font: inherit;
  font-size: .85rem;
  color: var(--fg);
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
/* OJO: aqui ponia `var(--fondo)`, y esa variable NO EXISTE en ningun
   sitio. Cuando una variable no existe y no le pones segundo argumento,
   el navegador no se queja: se queda en transparente. Resultado, el
   boton no se iluminaba al pasar por encima y parecia estropeado. */
.barra-formato button:hover {
  background: var(--tarjeta);
  border-color: var(--linea);
}
/* Apagado = no hay nada que deshacer (o que rehacer). Se deja a la vista
   en gris, no se esconde: si desapareciera y volviera, la barra iria
   dando saltos cada vez que escribes una letra. */
.barra-formato button:disabled {
  opacity: .35;
  cursor: default;
}
.barra-formato button:disabled:hover {
  background: none;
  border-color: transparent;
}
/* Pulsado = el cursor esta DENTRO de algo con ese formato. Mismo aspecto
   que el resto de cosas activas de la app (.btn.marcado, .vistas a.activo)
   para que se entienda sin explicarlo. */
.barra-formato button.activo,
.barra-formato button.activo:hover {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}
.barra-formato .separador {
  width: 1px;
  height: 1.1rem;
  margin: 0 .25rem;
  background: var(--linea);
}

.lienzo {
  min-height: 22rem;
  padding: .8rem;
  line-height: 1.7;
  overflow-y: auto;
  outline: none;             /* el borde ya lo marca .editor-rico */
}

/* Lo que se escribe dentro se ve como se vera despues. Se copian los
   tamaños de .texto (el apunte ya pintado) para que no haya sorpresas
   al guardar: lo que ves es lo que sale. */
.lienzo h1 { font-size: 1.5rem; margin: 1.6rem 0 .6rem; }
.lienzo h2 { font-size: 1.2rem; margin: 1.4rem 0 .5rem; }
.lienzo h3 { font-size: 1rem;   margin: 1.2rem 0 .4rem; }
.lienzo p { margin: .6rem 0; }
.lienzo ul, .lienzo ol { padding-left: 1.4rem; }
.lienzo li { margin: .25rem 0; }
.lienzo blockquote {
  margin: .8rem 0;
  padding: .2rem 0 .2rem .9rem;
  border-left: 3px solid var(--acento);
  color: var(--suave);
}
.lienzo:empty::before {
  content: "Escribe aquí. Usa los botones de arriba para dar formato.";
  color: var(--suave);
}

/* Las tablas MIENTRAS escribes. Se copian los estilos de .texto (el
   apunte ya guardado) para que lo que ves sea lo que sale al guardar.
   Si no cuadran, escribes una tabla bonita y luego aparece otra cosa. */
.lienzo table { border-collapse: collapse; width: 100%; margin: .8rem 0; }
.lienzo th, .lienzo td {
  padding: .4rem .6rem;
  border: 1px solid var(--linea);
  text-align: left;
  min-width: 3rem;        /* una columna estrecha se puede pinchar igual */
}
.lienzo th { background: var(--panel); font-weight: 700; }
/* Igual que en el apunte ya guardado (.texto a), para que lo que ves
   mientras escribes sea lo que sale despues. */
.lienzo a { color: var(--acento); }

/* Una tabla ancha scrollea DENTRO de su caja, no rompe la pagina.
   Lo mismo que ya hace .texto pre con el codigo largo. */
.lienzo, .texto { overflow-x: auto; }

/* ------------------------------------------- la rejilla de la tabla */

.menu-tabla { position: relative; }

.rejilla-tabla {
  position: absolute;
  top: calc(100% + .3rem);
  left: 0;
  z-index: 5;
  padding: .5rem;
  /* Este SI flota de verdad encima de la pagina, asi que SI lleva sombra
     (la excepcion que dice la receta de arriba). */
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-caja);
  box-shadow: var(--sombra);
}
.rejilla-tabla .cuadros {
  display: grid;
  grid-template-columns: repeat(6, 1rem);   /* cuadra con COLS_REJILLA */
  gap: 2px;
}
/* El otro `var(--fondo)` fantasma: los cuadritos salian transparentes,
   asi que la rejilla para elegir el tamano de la tabla se veia como un
   enrejado de bordes sueltos en vez de casillas. */
.rejilla-tabla .cuadros span {
  width: 1rem;
  height: 1rem;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 2px;
  cursor: pointer;
}
/* Los que quedan dentro de lo que estas señalando. */
.rejilla-tabla .cuadros span.dentro {
  background: var(--acento);
  border-color: var(--acento);
}
.rejilla-tabla .medida {
  display: block;
  margin-top: .4rem;
  font-size: .75rem;
  color: var(--suave);
  text-align: center;
}

/* ---------------------------------------------------- apunte ya pintado */

.apunte-cab {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  padding-bottom: .8rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--linea);
}
.apunte-cab .meta { flex: 1; }
.apunte-cab .botones { display: flex; gap: .4rem; }

/* Aqui vive el HTML que sale del Markdown. */
.texto { line-height: 1.7; }
.texto h1 { font-size: 1.5rem; margin: 1.6rem 0 .6rem; }
.texto h2 { font-size: 1.2rem; margin: 1.4rem 0 .5rem; }
.texto h3 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
.texto p { margin: .6rem 0; }
.texto ul, .texto ol { padding-left: 1.4rem; }
.texto li { margin: .25rem 0; }
.texto a { color: var(--acento); }
.texto hr { border: none; border-top: 1px solid var(--linea); margin: 1.5rem 0; }

.texto code {
  padding: .1rem .3rem;
  font-family: ui-monospace, Consolas, monospace;
  font-size: .87em;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
}
.texto pre {
  padding: .8rem;
  overflow-x: auto;          /* el codigo largo scrollea dentro, no rompe la pagina */
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.texto pre code { padding: 0; border: none; background: none; }

/* ------------------------------------------- apuntes de TEXTO PLANO
   Es un <pre>, asi que por defecto heredaria el estilo de arriba: caja
   gris, borde y letra de maquina de escribir. Eso vale para un TROZO de
   codigo, pero aqui el <pre> es el apunte ENTERO: quedaria como si toda
   la nota fuera codigo. Lo dejamos con la letra normal de la app y sin
   caja; lo unico que se conserva es lo que importa de verdad, que los
   saltos de linea y los espacios salgan tal cual se escribieron.

   pre-wrap (y no el pre de siempre) para que las lineas MUY largas bajen
   solas en vez de obligarte a arrastrar la pagina de lado. */
.texto .texto-plano {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  white-space: pre-wrap;
  overflow-wrap: break-word;   /* una palabra kilometrica tampoco desborda */
  background: none;
  border: none;
  border-radius: 0;
}

.texto blockquote {
  margin: .8rem 0;
  padding: .2rem 0 .2rem .9rem;
  border-left: 3px solid var(--color, var(--acento));
  color: var(--suave);
}

.texto table { border-collapse: collapse; width: 100%; }
.texto th, .texto td {
  padding: .4rem .6rem;
  border: 1px solid var(--linea);
  text-align: left;
}
.texto th { background: var(--panel); }

/* ================================================================
   DINERO
   ================================================================ */

/* Aire entre secciones. Lo que mas ensucia una pantalla no son los
   colores: es que todo este pegado y metido en cajas dentro de cajas. */
.dinero {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

/* ---------------------------------------------------- secciones sin caja

   Antes cada trozo iba dentro de un recuadro con borde. Resultado:
   recuadros dentro de recuadros. Ahora cada seccion es solo una
   ETIQUETA pequeña arriba y su contenido debajo. Se respira. */

.bloque { display: flex; flex-direction: column; gap: .9rem; }

.bloque-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.bloque-cab h2 {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--suave);
}

/* ---------------------------------------------------- la barra del mes */

.barra-mes { display: flex; align-items: center; gap: .4rem; }
/* Los de exportar, empujados al otro extremo. El margen AUTOMATICO se come
   todo el hueco que sobra y los echa a la derecha. Asi el selector de mes
   se queda solo en su lado y no parece que todo sea lo mismo. */
.barra-mes .exportar { margin-left: auto; display: flex; gap: .4rem; }
.mes-nombre {
  min-width: 9.5rem;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
}
.redondo {
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
}

/* ---------------------------------------------------- el heroe y la forma del mes

   Regla del sistema de graficos: UN solo numero grande por pantalla.
   Si todo es grande, nada es grande. Aqui manda "Gastado este mes";
   el saldo y lo que ha entrado van debajo, mas pequeños. */

.panel-mes {
  display: grid;
  grid-template-columns: minmax(230px, 300px) 1fr;
  gap: 1rem;
}

.heroe,
.grafico {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.3rem 1.4rem;
  border-radius: var(--radio-caja);
  background: var(--tarjeta);
  border: 1px solid var(--linea);
}

.etiqueta-campo {
  margin: 0;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--suave);
}

/* El numero heroe: 48px. Y OJO, SIN tabular-nums.
   tabular-nums le da a cada cifra el ancho de un "0"; en letra grande eso
   deja huecos raros y se ve suelto. Los numeros gordos van con la letra
   normal; tabular-nums se guarda para las COLUMNAS, que si deben cuadrar. */
.cifra-heroe {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
}

/* Comparar con el mes pasado. Rojo si gastas mas, verde si menos.
   La flechita ▲▼ dice lo mismo que el color: quien no distinga los
   colores lo sigue entendiendo. */
.delta {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  font-weight: 700;
}
.delta.mal { color: var(--peligro); }
.delta.bien { color: #16a34a; }
.delta .pista { font-weight: 400; }

/* Los datos de apoyo: gastado, entrado y el saldo total. Pequeños a
   proposito — el titular es el balance del mes, no lo que tienes. */
.mini-datos {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1.4rem;
  margin-top: auto;
  padding-top: 1.1rem;
}
.mini-datos div { display: flex; flex-direction: column; gap: .1rem; }
.mini-datos .etiqueta-campo { font-size: .62rem; }
.mini-datos strong { font-size: 1.02rem; font-weight: 700; }
.mini-datos .delta { font-size: .72rem; }

/* ---- el grafico de columnas (dia a dia) ---- */

/* Todas las barras nacen del MISMO suelo y crecen hacia arriba.
   align-items: flex-end = pegadas abajo. El color dice que es cada una. */
.columnas {
  display: flex;
  align-items: flex-end;
  gap: 2px;                /* los 2px de aire: separa el hueco, no una raya */
  height: 120px;
  margin-top: .3rem;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--linea);   /* el suelo: finito y apagado */
}

/* Un dia. `relative` para poder colgar arriba la marca del ingreso. */
.hueco-col {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  height: 100%;
}

/* El nombre de cada fila y su tope. Escribir el maximo es lo que hace
   honesto tener dos escalas: se ve que cada fila mide con su vara. */
.fila-grafico {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .15rem;
}
.fila-grafico.arriba-aire { margin-top: .9rem; }
.fila-nombre {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.fila-tope { font-size: .68rem; }

/* Los gastos, altos: son los que comparas dia a dia.
   Lo que entra, mas bajo: suelen ser una o dos barras al mes. */
.columnas.altas { height: 108px; }
.columnas.bajas { height: 42px; }

/* Nunca mas gorda de 24px: si llena todo el hueco, agobia.
   Punta redonda arriba, base CUADRADA: la barra sale del suelo. */
.columna {
  flex: 1;
  max-width: 24px;
  min-height: 3px;
  border-radius: 4px 4px 0 0;
}

/* Rojo lo que sale, verde lo que entra. */
.gasto-col { background: var(--peligro); }
.ingreso-col { background: #16a34a; }

/* El dia que mas gastaste, un poco mas fuerte: es el que quieres ver. */
.gasto-col.es-max { filter: brightness(1.2); }

/* La leyenda: el color NO puede ser lo unico que diga que es cada cosa. */
.leyenda-grafico {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .75rem;
  color: var(--suave);
}
.leyenda-grafico span { display: flex; align-items: center; gap: .35rem; }
.cuadro {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}
/* El punto de la leyenda: igual que el que sale en el suelo del grafico. */
.cuadro.redondo-verde {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
}

.dias-eje {
  display: flex;
  gap: 2px;
  margin-top: .35rem;
}
.dias-eje .hueco-col {
  height: auto;
  font-size: .68rem;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
}

.vacio-grafico { margin: auto 0; }

@media (max-width: 780px) {
  .panel-mes { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------- limite mensual

   Tres estados, no un degradado: un color que cambia poco a poco no
   dice nada. Un salto de color si se nota. */

.limite {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linea);
}
.limite-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .45rem;
}

.limite-riel {
  height: 8px;
  border-radius: 999px;
  background: var(--linea);
  overflow: hidden;      /* si la barra pasa del 100 %, no se sale */
}
.limite-barra {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .25s ease;
}
.limite-barra.bien { background: #16a34a; }
.limite-barra.cerca { background: #f97316; }
.limite-barra.pasado { background: var(--peligro); }

.limite-pie {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-top: .4rem;
}
.limite-porcien {
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.limite-porcien.bien { color: #16a34a; }
.limite-porcien.cerca { color: #f97316; }
.limite-porcien.pasado { color: var(--peligro); }

/* ---------------------------------------------------- apuntar: una sola fila */

.rapido {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  padding: .85rem;
  border-radius: var(--radio-caja);
  background: var(--tarjeta);
  border: 1px solid var(--linea);
}

/* TODOS los controles del mismo alto. Antes cada uno era de su padre y
   de su madre, y eso es la mitad de lo que hacia que se viera mal. */
.rapido input,
.rapido select {
  height: 42px;
  padding: 0 .7rem;
  font: inherit;
  font-size: .9rem;
  color: var(--fg);
  background-color: var(--panel);   /* BAJA: hueco dentro de la tarjeta */
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.rapido .btn { height: 42px; padding: 0 1.2rem; }
.rapido input:focus,
.rapido select:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
}
.rapido .concepto-in { flex: 1; min-width: 130px; }

.importe-in {
  width: 105px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.mini-sel { font-size: .82rem !important; }

/* Series y repeticiones: numeros de una o dos cifras, no necesitan mas.
   tabular-nums = todas las cifras ocupan lo mismo, asi la lista de
   ejercicios no baila al cambiar un 1 por un 8.

   El color y el borde van AQUI, no heredados de `.rapido input`. Antes
   solo se usaba dentro de un formulario rapido y de ahi sacaba el
   estilo; en la tarjeta de una rutina esta suelto, y salia con el fondo
   BLANCO del navegador, cantando en una app oscura. */
.mini-num {
  width: 62px;
  height: 42px;
  padding: 0 .5rem;
  text-align: right;
  font: inherit;
  font-size: .9rem;
  color: var(--fg);
  background-color: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  font-variant-numeric: tabular-nums;
}
.mini-num:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
}

/* ---------------------------------------------------- entrenos */

/* Los puntos de grupo muscular en la lista de entrenos. Van juntos
   para que se lean como UNA cosa ("esto fue pierna y core"). */
.puntos-grupo { display: inline-flex; gap: 3px; }

/* El selector de grupo, disfrazado de pastilla de color. Es un <select>
   de verdad (funciona con teclado y en el movil sale el selector nativo),
   solo que sin la pinta de formulario. */
.grupo-sel {
  appearance: none;
  border: 1px solid var(--color);
  background: color-mix(in srgb, var(--color) 14%, transparent);
  color: var(--color);
  font-size: .72rem !important;
  font-weight: 700;
  padding: .12rem .4rem !important;
  border-radius: 999px;
  cursor: pointer;
  width: 82px;
  text-align: center;
}

/* Bajar / peso / subir, pegados como un solo mando. */
.peso-mando {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.peso-mando .peso-valor {
  min-width: 68px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* En una lista larga, un boton por fila x3 es mucho ruido visual:
   se aclaran hasta que pasas por encima de la fila. */
.ejercicios-lista .peso-mando .btn { opacity: .45; }
.ejercicios-lista li:hover .peso-mando .btn,
.ejercicios-lista .peso-mando .btn:focus { opacity: 1; }
.peso-mando .btn[disabled] { opacity: .15; cursor: default; }

/* El reparto por grupo muscular, debajo de los numeros grandes. */
.grupos-reparto {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.grupo-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid var(--color);
  background: color-mix(in srgb, var(--color) 12%, transparent);
  color: var(--color);
  border-radius: 999px;
  padding: .2rem .6rem;
  font-size: .78rem;
  font-weight: 600;
}
.grupo-chip b { font-variant-numeric: tabular-nums; }

/* La medalla de record: la estrella al lado del peso cuando bates tu
   marca. Amarillo, color de "premio", y no choca con los grupos. */
.record {
  color: #eab308;
  font-size: .95rem;
  line-height: 1;
  margin-left: .15rem;
}

/* El panel de "esta semana", arriba de la lista de entrenos. Tres cifras
   grandes en fila, y debajo los grupos que tocaste. */
.semana-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-caja);
  background: var(--tarjeta);
}
.semana-numeros {
  display: flex;
  gap: 2.2rem;
  flex-wrap: wrap;
}
.semana-dato {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.semana-dato strong {
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.semana-dato span {
  font-size: .8rem;
  color: var(--suave);
}
.semana-grupos {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

/* La lista de entrenos: cada dia, una tarjeta. La fecha en bloque a la
   izquierda como un calendario de pared, el nombre y los grupos al lado. */
.dia-tarjetas {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.dia-tarjeta {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem 1rem .7rem 0;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  /* La banda de color, mas fina: 5px de color por toda la altura de la
     tarjeta era mucho brochazo repetido fila tras fila. */
  border-left: 3px solid var(--color);
  border-radius: var(--radio-caja);
}
.dia-fecha {
  flex: 0 0 auto;
  width: 58px;
  margin-left: .8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--fg);
}
.dia-fecha strong {
  font-size: 1.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dia-fecha span {
  font-size: .7rem;
  text-transform: uppercase;
  color: var(--suave);
}
.dia-cuerpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  text-decoration: none;
}
.dia-nombre {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--fg);
}
.dia-detalle {
  font-size: .85rem;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
}
.dia-grupos {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 45%;
}
.dia-borrar .btn { opacity: .35; }
.dia-tarjeta:hover .dia-borrar .btn { opacity: 1; }

@media (max-width: 480px) {
  .dia-grupos { display: none; }   /* en el movil, el color del borde basta */
}

/* ---------------------------------------------------- tarjetas de ejercicio

   Cada ejercicio de un entreno es una tarjeta, no una fila fina. Antes
   se reutilizaba el estilo de los movimientos de Dinero y parecia una
   hoja de cuentas. Aqui el peso manda y la imagen le da cuerpo. */

.ej-tarjetas {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.ej-tarjeta {
  position: relative;      /* para la cruz de quitar, que va arriba */
  display: flex;
  gap: 1rem;
  padding: .9rem 1rem .9rem 0;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  /* La banda de color del grupo, a la izquierda. */
  border-left: 3px solid var(--color);
  border-radius: var(--radio-caja);
  /* SIN overflow:hidden a proposito: recortaria los globitos de ayuda
     de los botones que van dentro. La foto ya tiene su propio redondeo. */
}
/* El dia que bates tu marca, la tarjeta lo celebra con un halo dorado. */
.ej-tarjeta.es-record {
  border-color: #eab308;
  box-shadow: inset 0 0 0 1px #eab308;
}

/* La imagen o el muñeco, cuadrado, a la izquierda. */
.ej-foto {
  flex: 0 0 84px;
  height: 84px;
  align-self: center;
  margin-left: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color) 10%, transparent);
  border-radius: 12px;
  overflow: hidden;
}
.ej-foto img { width: 100%; height: 100%; object-fit: cover; }
.ej-foto .cuerpo-mini { height: 76px; }
.ej-foto .cuerpo-mini svg { height: 76px; width: auto; }
.cuerpo-mini { --musculo: #4f8cff; }
.cuerpo-mini .piel { fill: var(--linea); }
.cuerpo-mini .mus { fill: var(--linea); }
.cuerpo-mini .mus.fuerte { fill: var(--musculo); }
.cuerpo-mini .mus.flojo {
  fill: color-mix(in srgb, var(--musculo) 42%, var(--linea));
}

.ej-cuerpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  justify-content: center;
}
.ej-cab {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.ej-nombre {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
}
.ej-nombre:hover { color: var(--acento); }

.ej-abajo {
  display: flex;
  align-items: center;
  gap: .9rem;
}

/* ---- UNA FILA POR SERIE ----

   Cada serie con SU peso y SUS repeticiones, que es lo que permite
   apuntar 40×10, 45×8, 45×6. Se lee como una tabla aunque no lo sea:
   el numero a la izquierda hace de columna y todo lo demas se alinea
   detras. */
.series {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.serie {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
/* El numero de la serie. Ancho fijo para que los pesos queden en
   columna aunque haya diez series y el 10 ocupe mas que el 1. */
.serie-n {
  width: 1.4rem;
  flex: 0 0 auto;
  font-size: .8rem;
  font-weight: 700;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
}
/* La serie ya hecha se apaga: de un vistazo se ve por donde vas. */
.serie.hecha .peso-valor,
.serie.hecha .repes-campo { color: var(--suave); }

/* Lo que hiciste en esta misma serie la vez pasada. Apagado y en su
   columna: es un recuerdo, no algo que se toque. El ancho fijo es lo
   que hace que las tres filas queden en columna aunque una ponga
   "100 × 5" y otra "—". */
.serie-antes {
  flex: 0 0 74px;
  font-size: .78rem;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* − 40 kg +  , todo junto: los tres formularios son hermanos, asi que
   lo que los hace parecer UNA pieza es que aqui casi no hay hueco. */
.serie-peso {
  display: flex;
  align-items: center;
  gap: .25rem;
}
.serie-peso .peso-valor {
  font-size: 1.15rem;
  font-weight: 700;
  min-width: 56px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Pegado al numero, que es de lo que es unidad. */
.serie-peso .peso-unidad { margin-left: -.15rem; }
/* Y AQUI si hay hueco: separa el peso de las repeticiones. Sin esto, el
   "+" del peso queda pegado al "× 10" y parece que suma repeticiones. */
.serie-repes {
  display: flex;
  align-items: center;
  gap: .2rem;
  margin-left: 1rem;
}
.serie-por { color: var(--suave); font-size: .85rem; }
.repes-campo {
  width: 3.2rem;
  padding: .25rem .3rem;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radio);
}
.repes-campo:hover { border-color: var(--linea); }
.repes-campo:focus {
  outline: none;
  border-color: var(--acento);
  background: var(--panel);
}
/* La cruz de quitar la serie, apagada hasta que pasas por encima: es
   destructiva y no tiene que llamar la atencion. Otra vez el boton y no
   el formulario, por lo del `display: contents`. */
.serie-quitar .btn { margin-left: .4rem; opacity: .3; }
.serie:hover .serie-quitar .btn { opacity: 1; }

/* OJO: `.chip-form` es `display: contents`, o sea que el formulario NO
   pinta caja: el que se coloca es el BOTON, y es hijo directo de la
   columna .ej-cuerpo. Por eso se estiraba a todo lo ancho, y por eso
   estas reglas apuntan al boton y no al formulario. */
.serie-mas {
  align-self: flex-start;
  margin-top: .45rem;
  margin-left: 1.9rem;   /* alineado con los pesos, no con el numero */
  font-size: .8rem;
}

/* El circulo de "hecha". Uno por serie, se rellena al pulsarlo. */
.ej-sets {
  display: flex;
  align-items: center;
  gap: .3rem;
}
.ej-set {
  width: 20px;
  height: 20px;
  /* Que NO encoja. Es un circulo: si flexbox le quita ancho para hacer
     sitio a lo demas, deja de ser un circulo y sale una raya roja. */
  flex: 0 0 20px;
  padding: 0;
  border: 2px solid var(--color);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background .12s ease, transform .08s ease;
}
.ej-set:hover { transform: scale(1.15); }
/* La serie hecha, rellena del color del grupo. */
.ej-set.hecha { background: var(--color); }

.ej-sets-texto {
  margin-left: .35rem;
  font-size: .85rem;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Cuando acabas todas las series, la tarjeta se apaga un poco: te dice
   "este ya esta" sin quitarlo de en medio. */
.ej-tarjeta.completo { opacity: .62; }
.ej-tarjeta.completo:hover { opacity: 1; }

/* En el movil los circulos se hacen mas grandes: hay que darles con el
   pulgar, y encima sudado. */
@media (hover: none) {
  .ej-set { width: 26px; height: 26px; flex-basis: 26px; }
}
/* Quitar el ejercicio entero. Arriba a la derecha de la tarjeta, no al
   final: al final quedaba una barra suelta debajo de "Añadir serie", y
   las dos cruces (la de la serie y la del ejercicio) se confundian.

   La posicion va en el BOTON: el formulario es `display: contents` y no
   pinta caja, asi que colocarlo a el no haria nada. */
.ej-borrar .btn {
  position: absolute;
  top: .55rem;
  right: .55rem;
  opacity: .4;
}
.ej-tarjeta:hover .ej-borrar .btn { opacity: 1; }

/* El selector de grupo dentro de la tarjeta, discreto. */
.ej-cuerpo .grupo-sel { align-self: flex-start; }

/* En pantalla estrecha, la tarjeta se mantiene: la imagen encoge pero no
   desaparece, que es lo que le da caracter.

   Y la fila de una serie tiene SEIS cosas dentro (numero, −, peso, +,
   repes, hecha, quitar). En 390 px no caben a tamaño normal y la fila
   se partia en dos, con la mitad de abajo pareciendo otra serie. Asi
   que aqui se aprieta todo lo justo para que quepa en UNA linea. */
@media (max-width: 480px) {
  .ej-foto { flex-basis: 56px; height: 56px; margin-left: .6rem; }
  .ej-foto .cuerpo-mini svg { height: 50px; }
  .ej-tarjeta { gap: .6rem; padding-right: .6rem; }

  /* En el movil no caben las dos cosas en una linea, asi que el
     "antes" se lleva su propio renglon ENCIMA, al lado del numero:

         1   antes 40 × 10
             − 42,5 + × 10  ●  ×

     Partido asi se lee; partido por donde caiga, no. */
  .serie { flex-wrap: wrap; gap: .25rem; }
  .serie-antes { flex: 1 0 calc(100% - 1.4rem); font-size: .72rem; }
  .serie-n { width: .9rem; }
  .serie-peso { gap: .1rem; }
  .serie-peso .peso-valor { font-size: 1rem; min-width: 34px; }
  /* El "kg" se va SOLO en el movil. No se pierde nada: es la unica
     unidad que usa Órbita, sale en el total de arriba y en la ficha, y
     ese hueco es justo lo que le falta a la fila para caber entera. */
  .serie-peso .peso-unidad { display: none; }
  .serie-repes { margin-left: .3rem; }
  .repes-campo { width: 2.2rem; font-size: .95rem; padding: .2rem 0; }
  /* Los botones tampoco encogen: son redondos. Lo que cede es el
     campo del peso, que es texto y aguanta. */
  .serie .btn.redondo { width: 28px; height: 28px; font-size: .95rem;
                        flex: 0 0 28px; }
  .serie-n, .serie-por { flex: 0 0 auto; }
  .serie-quitar .btn { margin-left: .1rem; padding: .15rem; }
}

/* ---------------------------------------------------- la ficha del ejercicio */

.ficha-dlg { max-width: 460px; width: calc(100% - 2rem); }
.ficha { display: flex; flex-direction: column; gap: 1.1rem; }

.ficha-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
}
.ficha-cab h3 { margin: 0 0 .35rem; font-size: 1.15rem; }

.ficha-bloque { display: flex; flex-direction: column; gap: .4rem; }
.ficha-texto { margin: 0; line-height: 1.5; font-size: .9rem; }
/* La de fabrica, cuando ademas tienes la tuya: mas apagada, porque
   la que manda es la tuya. */
.ficha-fabrica {
  margin: 0;
  padding-left: .7rem;
  border-left: 2px solid var(--linea);
}

/* La imagen o el video del ejercicio, cuando los hay. */
.ejercicio-medio {
  margin: 0;
  display: flex;
  justify-content: center;
}
.ejercicio-medio img,
.ejercicio-medio video {
  max-width: 100%;
  max-height: 260px;
  height: auto;
}

/* El VIDEO no puede tener fondo transparente (el formato no lo permite),
   asi que en vez de disimularlo se presenta como una tarjeta: esquinas
   redondeadas y fondo oscuro. Asi el fondo del video parece intencionado
   y no un recorte mal hecho, y queda igual de bien en tema claro que en
   oscuro. Las fotos SI son transparentes y por eso no llevan tarjeta. */
.ejercicio-medio.video video {
  border-radius: 14px;
  background: #2a2d34;
  display: block;
}

/* Los GIF del dataset vienen con FONDO BLANCO opaco. Misma jugada que
   con el video pero al reves: tarjeta BLANCA. En tema oscuro se ve una
   pastilla clara, que es justo lo que se busca. Disimularlo no se puede:
   ese mismo blanco esta tambien DENTRO del dibujo, asi que borrarlo
   agujerearia al muñeco.

   Y a 180 px clavados, sin estirar:
     - la licencia de Gym Visual solo deja usarlos a ese tamaño
     - estirar un dibujo de 180 a 260 lo deja borroso
   Por eso se pisa aqui el max-height de arriba. */
.ejercicio-medio.gif img {
  width: 180px;
  height: 180px;
  max-height: none;
  border-radius: 14px;
  background: #fff;
  display: block;
}

/* De quien es la imagen. Pequeño y apagado: tiene que verse, no mandar. */
.credito-medio {
  margin: .35rem 0 0;
  text-align: center;
  font-size: .7rem;
  color: var(--suave);
}
.credito-medio a {
  color: inherit;
}

/* ---- el muñeco de los musculos ---- */

.cuerpo-par {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
}
.cuerpo { margin: 0; text-align: center; }
.cuerpo svg { height: 190px; width: auto; }
.cuerpo figcaption {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--suave);
  margin-top: .2rem;
}

/* El cuerpo, apagado. Cada zona se enciende sola segun su clase. */
.cuerpo .piel { fill: var(--linea); }
.cuerpo .mus {
  fill: var(--linea);
  transition: fill .18s;
}
/* Principal: el color a tope. Secundario: el mismo, a medio gas.
   Se usa color-mix y no dos colores distintos para que se vea claro
   que es el MISMO musculo trabajando mas o menos. */
.cuerpo .mus.fuerte { fill: var(--musculo); }
.cuerpo .mus.flojo {
  fill: color-mix(in srgb, var(--musculo) 42%, var(--linea));
}

.leyenda-musculos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .2rem 1rem;
  font-size: .78rem;
  color: var(--suave);
}
.leyenda-musculos span { display: inline-flex; align-items: center; gap: .35rem; }
.mus-punto {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  display: inline-block;
}
.mus-punto.fuerte { background: var(--color); }
.mus-punto.flojo { background: color-mix(in srgb, var(--color) 42%, var(--linea)); }

/* ---- la linea de progreso ---- */

.progreso-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}

/* ALTO fijo del grafico. Lo usan la caja y la escala, para que los kilos
   de los extremos caigan justo en el borde de arriba y en el de abajo. */
.linea-progreso {
  --alto-grafico: 110px;
  display: flex;
  gap: .5rem;
}

/* Los kilos de arriba y de abajo del eje. Sin esto el grafico mentiria:
   el eje NO empieza en cero, y hay que decirlo. */
.linea-escala {
  height: var(--alto-grafico);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: .68rem;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.linea-cuerpo { flex: 1; min-width: 0; }

/* La caja del grafico, SIN las fechas dentro. Esa separacion es lo que
   permite que la altura de cada punto sea un porcentaje limpio de esta
   caja: nada de restarle el hueco de las fechas con un calc. */
.linea-plot {
  position: relative;
  height: var(--alto-grafico);
  display: flex;
  align-items: stretch;
  border-left: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  padding: 0 .2rem;
}

/* El SVG NECESITA width y height explicitos. Con `auto` no se estira al
   hueco: coge su tamano por defecto (300x150) y el dibujo se sale por
   donde quiere. */
.linea-trazo {
  position: absolute;
  left: .2rem;
  right: .2rem;
  top: 0;
  bottom: 0;
  width: calc(100% - .4rem);
  height: 100%;
}

.linea-dias {
  display: flex;
  padding: .25rem .2rem 0;
}
.linea-dias span {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: .62rem;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
}
.linea-trazo polyline {
  fill: none;
  stroke: var(--color);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: .45;
  /* Sin esto, al estirar el SVG a lo ancho la linea saldria gorda en
     horizontal y fina en vertical. Con esto el grosor es real. */
  vector-effect: non-scaling-stroke;
}

/* Cada punto es una columna. El circulo se coloca con `bottom`, que aqui
   ya es un porcentaje limpio de la caja del grafico.
   Antes esto llevaba un calc que multiplicaba una longitud por un
   PORCENTAJE: eso no existe en CSS, el calc entero se invalidaba y los
   puntos se quedaban todos amontonados arriba. */
.linea-punto {
  flex: 1;
  position: relative;
  min-width: 0;
}
.linea-punto i {
  position: absolute;
  bottom: var(--alto);
  left: 50%;
  /* Centrar con transform y no con margenes: asi da igual lo que mida
     el circulo, siempre queda clavado en su punto. */
  transform: translate(-50%, 50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color);
  z-index: 1;
}
/* El mejor dia, con un halo: se encuentra de un vistazo. */
.linea-punto.top i {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color) 25%, transparent);
}

/* ---- historial dentro de la ficha ---- */

.historial { list-style: none; margin: 0; padding: 0; }
.historial li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--linea);
  font-size: .88rem;
}
.historial li:last-child { border-bottom: 0; }
.historial strong {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* ---- cambiar los numeros desde la ficha ---- */

.ficha-editar {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  flex-wrap: wrap;
  padding-top: .8rem;
  border-top: 1px solid var(--linea);
}
.ficha-editar label { display: flex; flex-direction: column; gap: .2rem; }
.ficha-editar .btn { margin-left: auto; }

.ficha-nota summary {
  cursor: pointer;
  font-size: .82rem;
  color: var(--suave);
}
.ficha-nota textarea {
  width: 100%;
  margin: .5rem 0;
  resize: vertical;
}

/* En pantalla estrecha, los dos cuerpos no caben al lado: se encogen
   antes que salirse. */
@media (max-width: 420px) {
  .cuerpo svg { height: 150px; }
  .cuerpo-par { gap: .6rem; }
}

/* ---------------------------------------------------- las cuentas, como tarjetas */

.cuentas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .8rem;
}

/* La cuenta, con su color PLANO. Antes llevaba un degradado de tres
   paradas, un circulo blanco de brillo en la esquina y se levantaba dos
   pixeles con sombra al pasar el raton. Imitaba una tarjeta de credito
   de plastico, y era lo mas llamativo de toda la app: chocaba de frente
   con la contencion del resto.

   Un color plano dice exactamente lo mismo (de que cuenta es) sin
   brillos que no significan nada. El borde de dentro es blanco muy
   transparente en vez de gris: sobre un fondo de color saturado, un
   borde gris no se ve. */
.tarjeta-banco {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
  min-height: 130px;
  padding: 1rem;
  font: inherit;
  text-align: left;
  color: #fff;
  border: none;
  border-radius: var(--radio-caja);
  cursor: pointer;
  overflow: hidden;
  background: var(--color);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  transition: filter .14s ease, box-shadow .14s ease;
}
/* Al pasar el raton, el color sube un punto. Nada se mueve de sitio. */
.tarjeta-banco:hover {
  filter: brightness(1.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}

.banco-tipo {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .85;
}
.banco-nombre {
  max-width: 100%;
  font-size: 1.05rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.banco-saldo {
  margin-top: auto;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* La de "+ Añadir": vacia y punteada, se ve que no es una cuenta. */
.tarjeta-banco.nueva {
  align-items: center;
  justify-content: center;
  gap: .35rem;
  background: none;
  border: 1px dashed var(--linea-fuerte);
  box-shadow: none;
  color: var(--suave);
  font-size: .82rem;
  text-align: center;
}
/* Esta no tiene color propio, asi que hay que apagarle el `filter` que
   hereda de .tarjeta-banco:hover; si no, se le aclara el texto gris. */
.tarjeta-banco.nueva:hover {
  filter: none;
  box-shadow: none;
  border-color: var(--acento);
  color: var(--acento);
  background: color-mix(in srgb, var(--acento) 6%, transparent);
}
.tarjeta-banco.nueva .mas { font-size: 1.6rem; line-height: 1; }

/* ---------------------------------------------------- el reparto del mes

   "Parte de un todo" -> UNA barra partida en trozos. No un quesito:
   los trozos de un quesito hay que compararlos por angulo, y el ojo
   humano compara fatal angulos. Longitudes las compara bien. */

.reparto {
  display: flex;
  gap: 2px;               /* los 2px que separan: hueco, no rayas pintadas */
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
}
.trozo {
  min-width: 3px;         /* que un gasto chico siga viendose */
  transition: filter .12s ease;
}
.trozo:hover { filter: brightness(1.25); }

/* La leyenda con las cifras. El texto NUNCA va del color del dato:
   un amarillo o un verde claro no se leen sobre el fondo. El color lo
   lleva el puntito de al lado; el texto va en gris o blanco normal. */

.leyenda-cats { list-style: none; padding: 0; margin: 0; }
.leyenda-cats li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 0;
  font-size: .9rem;
  border-bottom: 1px solid var(--linea);
}
.leyenda-cats li:last-child { border-bottom: none; }

.cat-nombre { flex: 1; }
.cat-porcien {
  width: 46px;
  text-align: right;
  color: var(--suave);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}
.cat-cifra {
  width: 96px;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------- gastos fijos */

.fijos { list-style: none; padding: 0; margin: 0; }
.fijos li {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .8rem;
  border-radius: var(--radio);
  font-size: .9rem;
}
.fijos li:nth-child(odd) { background: var(--panel); }
/* Un fijo pausado sigue ahi, pero apagado: se ve que no cuenta. */
.fijos li.apagado { opacity: .5; }

/* El dia del mes, en un circulito: se lee de un vistazo cuando toca. */
.fijo-dia {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--linea);
  font-size: .75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fijo-concepto { flex: 1; font-weight: 500; }
.fijos strong { font-weight: 700; font-variant-numeric: tabular-nums; }

/* El boton Editar solo asoma al pasar por encima: no ensucia la lista. */
.fijos .btn.mini { opacity: 0; }
.fijos li:hover .btn.mini { opacity: 1; }

/* ---------------------------------------------------- movimientos */

.movimientos { list-style: none; padding: 0; margin: 0; }

.movimientos li {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .8rem;
  border-radius: var(--radio);
  font-size: .9rem;
}
/* rayas suaves: se sigue la fila con la vista sin necesitar bordes */
.movimientos li:nth-child(odd) { background: var(--panel); }

.mov-fecha {
  width: 42px;
  flex: none;
  font-size: .78rem;
  color: var(--suave);
}
.mov-concepto { flex: 1; font-weight: 500; }
.mov-cuenta { flex: none; }
.movimientos strong { font-weight: 700; }

/* La ✕ solo aparece al pasar por encima: no ensucia la lista. */
.movimientos .chip-form button {
  opacity: 0;
  border: none;
  background: none;
  color: var(--suave);
  cursor: pointer;
  padding: .2rem .35rem;
  border-radius: 6px;
}
.movimientos li:hover .chip-form button { opacity: 1; }
.movimientos .chip-form button:hover { color: var(--peligro); }

/* Rojo lo que se va, verde lo que entra. Se lee sin pensar. */
.gasto { color: var(--peligro); }
.ingreso { color: #16a34a; }

/* ---------------------------------------------------- el tipo, en pastillas */

.tipos { display: flex; gap: .35rem; margin-bottom: 1rem; }
.tipo-check { margin: 0; flex: 1; }
.tipo-check input { display: none; }     /* escondemos el circulito feo */
.tipo-check span {
  display: block;
  text-align: center;
  padding: .55rem .2rem;
  font-size: .78rem;
  color: var(--suave);
  border: 1px solid var(--linea);
  border-radius: 10px;
  cursor: pointer;
}
/* :has = "el label que TENGA dentro un radio marcado". CSS puro. */
.tipo-check:has(input:checked) span {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
  font-weight: 600;
}

.ancho-total { width: 100% !important; text-align: left !important; }

/* En movil, la fila de apuntar se parte en dos lineas sin apretarse */
@media (max-width: 640px) {
  .rapido .concepto-in { min-width: 100%; }
  .cifra-heroe { font-size: 2.3rem; }
}


/* ================================================================
   PANELES (dialog)
   ================================================================ */

/* Un dialogo SI flota de verdad encima de la pagina, asi que lleva
   sombra. Es la excepcion que dice la receta de tarjeta de arriba. */
dialog {
  border: 1px solid var(--linea);
  border-radius: var(--radio-caja);
  background: var(--tarjeta);
  color: var(--fg);
  padding: 1.4rem;
  /* min-width era 360px a secas, y eso DESBORDA en el movil: un telefono
     de 360px de ancho no tiene 360px + margenes, asi que el dialogo se
     salia y la pagina cogia barra de scroll horizontal. En uno de 320px
     directamente se cortaba.

     `min()` coge el MENOR de los dos: 360px cuando hay sitio, y
     "el ancho de la ventana menos 2rem" cuando no lo hay. Un solo valor
     resuelve el movil y el ordenador sin una regla aparte. */
  min-width: min(360px, calc(100vw - 2rem));
  max-width: min(460px, calc(100vw - 2rem));
  box-shadow: var(--sombra);
}
dialog::backdrop { background: rgba(0, 0, 0, .45); }

/* ---------------------------------------------------- que entren, no que apar

   Un dialogo que APARECE de golpe se lee como un pantallazo: el ojo no
   sabe de donde ha salido ni que tapa. Subiendo un poco y creciendo un
   pelin, el cerebro entiende solo que es una capa NUEVA encima de lo que
   estabas mirando.

   Son 160ms. Menos de 100 no se percibe; mas de 250 se nota que esperas.

   `@starting-style` es la parte lista: dice "de DONDE sale" cuando el
   elemento acaba de nacer. Sin eso el navegador no tiene desde que
   animar, porque el dialogo pasa de no existir a existir. Si el
   navegador es viejo y no lo entiende, se ignora y el dialogo sale de
   golpe como antes: no se rompe nada. */
dialog {
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition: opacity .16s ease, transform .16s ease, overlay .16s allow-discrete,
              display .16s allow-discrete;
}
/* OJO al `transform: none`. NO es lo mismo que `translateY(0) scale(1)`,
   que es lo que ponia antes y estaba ROTO.

   Un elemento con `transform` —aunque no mueva nada— se convierte en el
   MARCO DE REFERENCIA de sus hijos con `position: fixed`. Y los
   desplegables propios de Órbita son paneles `fixed` que se cuelgan del
   dialogo cuando el boton esta dentro de uno.

   Con el transform puesto, su `left: 1200px` dejaba de significar "1200
   desde el borde de la VENTANA" y pasaba a "1200 desde el borde del
   DIALOGO": el panel se abria fuera de la pantalla.

   Sintoma: pulsabas un desplegable dentro de Configuracion y no pasaba
   nada. Pasaba, pero donde no se veia.

   `none` no crea ese marco. Y la animacion no se pierde: se puede
   transicionar de un transform a `none`, que el navegador entiende como
   "sin mover". */
dialog[open] {
  opacity: 1;
  transform: none;
}
@starting-style {
  dialog[open] {
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }
}

/* El fondo oscuro, que se funda en vez de aparecer con el dialogo. */
dialog::backdrop {
  opacity: 0;
  transition: opacity .16s ease, overlay .16s allow-discrete,
              display .16s allow-discrete;
}
dialog[open]::backdrop { opacity: 1; }
@starting-style {
  dialog[open]::backdrop { opacity: 0; }
}

/* El cajon del movil entra DESLIZANDO desde su borde, no subiendo: sale
   del lado izquierdo, y el movimiento tiene que decir de donde viene. */
dialog.cajon { transform: translateX(-14px); }
dialog.cajon[open] { transform: none; }   /* `none`, por lo mismo de arriba */
@starting-style {
  dialog.cajon[open] { transform: translateX(-14px); }
}

dialog h2 { margin: 0 0 1rem; font-size: 1.1rem; }
/* La rayita separadora, tambien fuera de los dialogos: la usa la
   pantalla de Configuracion para partir la caja de avisos por temas. */
dialog hr,
.caja hr { border: none; border-top: 1px solid var(--linea); margin: 1rem 0; }

dialog label {
  display: block;
  margin-bottom: .9rem;
  font-size: .85rem;
  color: var(--suave);
}
/* Una etiqueta con casilla: el cuadradito y su texto EN LA MISMA FILA.

   Antes esta regla iba atada a `dialog`, porque las casillas solo
   existian dentro de ventanitas. Al mudar Configuracion a una pantalla
   propia dejo de aplicarse, y mandaba `.caja label { display: block }`:
   el cuadradito se iba al otro extremo de la caja, a un palmo de su
   texto, y no habia forma de saber cual era de cual.

   Ahora vale en cualquier sitio. */
label.check {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--fg);
  margin-bottom: .5rem;
}
/* Y la casilla, de su tamaño. Dentro de una `.caja` hereda
   `width: 100%` de los campos de texto, y un cuadradito estirado a todo
   lo ancho es justo lo que empujaba el texto fuera de sitio. */
label.check input[type="checkbox"] {
  width: auto;
  margin: 0;
  padding: 0;
  flex: none;
  accent-color: var(--acento);
}

dialog input[type=text],
dialog input[type=date],
dialog input[type=time],
dialog select {
  display: block;
  width: 100%;
  margin-top: .25rem;
  padding: .5rem;
  font: inherit;
  color: var(--fg);
  background-color: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 8px;
}

.fila { display: flex; gap: .8rem; }
.fila label { flex: 1; }

.colores {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: .3rem 0 1rem;
}
.colores.apagado { opacity: .4; }

input[type=color] {
  width: 42px;
  height: 30px;
  padding: 0;
  flex: none;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}
.muestra {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--linea);
  cursor: pointer;
}

/* ---------------------------------------------------- panel de categorias */

.cat-fila { display: flex; gap: .4rem; margin-bottom: .5rem; }
.cat-editar {
  display: flex;
  gap: .4rem;
  align-items: center;
  flex: 1;
}
.cat-editar input[type=text] {
  flex: 1;
  margin-top: 0;
  padding: .35rem .5rem;
  font-size: .85rem;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 8px;
}

/* ================================================================
   ARRASTRAR
   ================================================================ */

/* La mano dice lo que puedes hacer antes de que lo intentes. */
/* Nada de seleccionar texto al arrastrar.

   En el movil era muy visible: intentabas mover una tarea y el telefono
   entendia "quiero seleccionar este texto", te sacaba el cursor de
   seleccion y los tiradores azules, y la tarea no se movia.

   `-webkit-touch-callout` es lo que quita el menu que sale en el iPhone
   al mantener pulsado un rato ("Copiar / Buscar / Compartir"), que
   aparecia justo encima del gesto de arrastrar. */
.chip, .evento, .banda, .tirador {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.chip, .evento { cursor: grab; }

/* ---- la barra de ajustar horas ----

   Pegada abajo y DEJANDO VER el calendario: la gracia es ver la tarea
   moverse mientras tocas. Por eso no es un <dialog>, que tapa todo.

   Existe porque arrastrar el borde no vale en un telefono: una tarea de
   media hora mide 24px, y los dos tiradores (44px) acaban con sus
   centros a 24px, montados uno encima del otro. Con menos y mas no hace
   falta punteria. */
.barra-ajuste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .9rem 1rem calc(.9rem + env(safe-area-inset-bottom));
  background: var(--tarjeta);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .18);
}
.barra-ajuste[hidden] { display: none; }   /* si no, el flex le gana al hidden */

/* En el ordenador la barra NO se echa encima del menu de la izquierda.
   Empieza donde acaba la lateral, y se corre sola al plegarla porque las
   dos leen el mismo `--ancho-lateral`.

   Debajo de 901px la lateral no existe (se cambia por el cajon), asi que
   ahi la barra ocupa todo el ancho y esta bien.

   La transicion es la misma que la de la rejilla: al plegar el menu, la
   barra acompaña en vez de pegar un salto. */
@media (min-width: 901px) {
  .barra-ajuste {
    left: var(--ancho-lateral);
    transition: left .18s ease;

    /* En una pantalla ancha, la barra en columna quedaba estirada y con
       los botones tirados contra el borde derecho, a un palmo de su
       etiqueta. En el movil la columna es lo unico que cabe; aqui cabe
       todo de una linea y se lee de un vistazo:

           ZZ pc    Empieza − 10:00 +    Acaba − 11:00 +    [Hecho] */
    flex-direction: row;
    align-items: center;
    gap: 1.6rem;
  }
  .barra-ajuste-titulo { max-width: 16rem; }
  .ajuste-que { flex: none; }
  /* El `auto` empuja "Hecho" hasta el final, separandolo de los mandos:
     no es un mando mas, es el que cierra. */
  .ajuste-hecho { margin-left: auto; padding-inline: 1.6rem; }
}

.barra-ajuste-titulo {
  margin: 0;
  font-weight: 600;
  /* Un titulo largo no debe empujar la barra ni partirla en tres. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ajuste-fila {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.ajuste-que { flex: 1; color: var(--suave); font-size: .9rem; }
/* La hora, con ancho fijo: si no, la barra pega un salto cada vez que
   pasa de "9:00" a "10:00". */
.ajuste-hora {
  min-width: 4.2rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
}
.ajuste-fila .btn {
  min-width: 44px;
  min-height: 44px;
  font-size: 1.2rem;
  justify-content: center;
}
.ajuste-hecho { justify-content: center; min-height: 44px; }

/* Mientras esta enganchada por una pulsacion larga: se levanta un poco
   para que se note que ya la tienes cogida. */
.evento.enganchada, .chip.enganchada, .banda.enganchada {
  transform: scale(1.02);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}
.chip.rutina, .evento.rutina { cursor: pointer; }   /* rutina: no se arrastra */

/* Mientras arrastras, la cosa no debe taparse a si misma:
   pointer-events: none deja que el raton "vea" la columna de debajo. */
.arrastrando { pointer-events: none; }

.evento.arrastrando {
  opacity: .9;
  z-index: 5;
  cursor: grabbing;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}

/* En el mes movemos un CLON. El original se queda palido en su sitio. */
.chip.arrastrando { opacity: .3; }

/* El [data-tip] del selector es por lo mismo que en .evento: el clon se
   hace con cloneNode(true) (app.js), asi que se trae el globito puesto, y
   la regla `[data-tip] { position: relative }` de aqui abajo le ganaba a
   este `fixed`. Un clon en `relative` ignora el left/top que le va
   poniendo el raton y se queda tirado al final del <body>. */
.clon,
.clon[data-tip] {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  opacity: .95;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
  transform: rotate(-1deg);
}

/* El dia donde vas a soltar se marca. Si no, sueltas a ciegas. */
.destino {
  outline: 2px dashed var(--acento);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--acento) 10%, transparent) !important;
}

/* ---------------------------------------------------- rutinas */

/* La rutina se ve igual que una tarea, pero con el simbolo ⟳ y el borde
   punteado: "esto no es un evento suelto, es un molde que se repite". */
.chip.rutina,
.evento.rutina { border-left-style: dashed; }

.repite { opacity: .6; margin-right: .15rem; }

.rut-fila {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--linea);
}
.rut-nombre { font-weight: 600; font-size: .9rem; }
.rut-fila .cuando { flex: 1; }

/* Los 7 dias de la semana, como botones que se marcan. */
.etiqueta-campo {
  display: block;
  font-size: .85rem;
  color: var(--suave);
  margin-bottom: .3rem;
}
.dias {
  display: flex;
  gap: .3rem;
  margin-bottom: 1rem;
}
.dia-check { margin: 0; flex: 1; }

/* Los DIAS DEL MES son 31, no 7.
   `.dias` es un flex sin envolver: reparte bien siete pastillas, pero
   con treinta y una las aplasta y se salen del panel. Medido: hasta
   325px fuera por la derecha en el movil, con pastillas de 10px de
   ancho.
   Rejilla de SIETE columnas, como un calendario de verdad: los numeros
   quedan alineados en columna y en un movil de 390px cada pastilla sale
   a unos 44px, que es el minimo para el dedo. */
.dias-mes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.dias-mes .dia-check { flex: none; }
.dia-check input { display: none; }   /* escondemos la casilla fea */
.dia-check span {
  display: block;
  text-align: center;
  padding: .4rem .1rem;
  font-size: .75rem;
  border: 1px solid var(--linea);
  border-radius: 8px;
  cursor: pointer;
  color: var(--suave);
}
/* :has = "el label que TENGA dentro una casilla marcada". CSS puro. */
.dia-check:has(input:checked) span {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
  font-weight: 600;
}

.saltados {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  padding: .35rem 0 .6rem 1.1rem;
}

.bloque {
  padding: .6rem 0;
  border-top: 1px solid var(--linea);
}
.bloque .pista { margin: 0 0 .5rem; }
.fila-botones { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------------------------------------------------- fila de acciones */

.acciones {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .5rem;
  margin-top: 1.2rem;
}
.acciones .izquierda { margin-right: auto; }  /* empuja "Borrar" a la izquierda */


/* ============================================================
   GLOBITOS DE AYUDA propios

   Antes se usaba el atributo `title`, y ese globito lo dibuja el
   SISTEMA OPERATIVO: amarillo, cuadrado, con su propio retardo, y no
   se puede tocar con CSS. En una app oscura canta mucho.

   Ahora se usa `data-tip`. El globito lo dibuja esta hoja de estilos,
   asi que va con los colores de Orbita y el mismo redondeo que todo lo
   demas.

   El `aria-label` que acompaña a cada `data-tip` en las plantillas NO
   es decoracion: casi todos son botones de icono (✕, −, +), y sin el
   un lector de pantalla no sabria decir que hacen.
   ============================================================ */

[data-tip] { position: relative; }

[data-tip]::after,
[data-tip]::before {
  position: absolute;
  bottom: 100%;
  left: 50%;
  opacity: 0;
  pointer-events: none;          /* el globito nunca roba el clic */
  transition: opacity .12s ease, transform .12s ease;
  z-index: 60;
}

/* el cuerpo del globito */
[data-tip]::after {
  content: attr(data-tip);
  transform: translate(-50%, -2px);
  margin-bottom: 8px;
  padding: .35rem .6rem;
  background: var(--fg);
  color: var(--bg);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.3;
  /* Antes esto era `white-space: nowrap`, y ahi estaba el fallo.

     Un globito es un ::after con position:absolute. Aunque este
     invisible (opacity 0), SIGUE OCUPANDO SITIO en el diseno. Con nowrap
     se estiraba tanto como su texto, y en un boton pegado al borde
     derecho se salia de la pantalla y estiraba el ancho scrollable de
     TODA la pagina.

     Medido con el navegador: /notas se iba 81px de lado, /dinero 63,
     /apuntes 35, /entrenos 22. Apagando los globitos, los cuatro
     bajaban a 0. No era una sospecha, se comprobo apagandolos.

     `width: max-content` los deja tan anchos como su texto (que es lo
     que se queria), pero `max-width` les pone tope y entonces parten en
     dos lineas en vez de crecer sin fin. */
  width: max-content;
  max-width: 14rem;
  border-radius: 8px;
  box-shadow: var(--sombra);
}

/* el piquito que apunta al boton */
[data-tip]::before {
  content: "";
  transform: translate(-50%, -2px);
  margin-bottom: 2px;
  border: 6px solid transparent;
  border-top-color: var(--fg);
}

/* Se enseña al pasar el raton Y al llegar con el teclado (focus-visible),
   que si no, quien navega con Tab se queda sin la ayuda. */
[data-tip]:hover::after,
[data-tip]:hover::before,
[data-tip]:focus-visible::after,
[data-tip]:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Los de la primera fila de la pantalla no caben arriba: se ponen abajo. */
[data-tip][data-tip-abajo]::after,
[data-tip][data-tip-abajo]::before {
  bottom: auto;
  top: 100%;
}
[data-tip][data-tip-abajo]::after { margin: 8px 0 0; }
[data-tip][data-tip-abajo]::before {
  margin: 2px 0 0;
  border-top-color: transparent;
  border-bottom-color: var(--fg);
}

/* En pantalla tactil no hay "pasar el raton": el globito saldria pegado
   al dedo y molestando. Se apaga. */
@media (hover: none) {
  [data-tip]::after, [data-tip]::before { display: none; }
}


/* ============================================================
   DESPLEGABLES Y PANELES PROPIOS
   ============================================================ */

/* El <select> de verdad: sigue en el formulario, pero no se ve.
   No se usa display:none porque entonces el navegador no lo valida ni
   lo enfoca; asi sigue siendo un campo normal, solo que invisible. */
.sel-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* El boton que lo sustituye. Hereda las clases del select original
   (mini-sel, grupo-sel...) para que siga viendose donde va. */
.sel-boton {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  padding: .45rem .7rem;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  text-align: left;
}
.sel-boton:hover { border-color: var(--acento); }
.sel-boton[aria-expanded="true"] { border-color: var(--acento); }
.sel-flecha { font-size: .7rem; color: var(--suave); flex: none; }
.sel-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Cuando el select era una pastilla de grupo muscular, el boton la
   imita: mismo color, mismo redondeo de pildora. */
.sel-boton.grupo-sel {
  border-color: var(--color);
  background: color-mix(in srgb, var(--color) 14%, transparent);
  color: var(--color);
  font-size: .72rem;
  font-weight: 700;
  padding: .12rem .5rem;
  border-radius: 999px;
  width: auto;
}
.sel-boton.mini-sel { font-size: .82rem; }

/* El panel que sale. Va en <body> con position:fixed para que no lo
   recorte ninguna tarjeta con overflow:hidden. */
.panel-flotante {
  position: fixed;
  z-index: 200;
  max-height: 320px;
  overflow-y: auto;
  padding: .3rem;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-caja);
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.panel-fila {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .5rem .7rem;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--fg);
  font: inherit;
  font-size: .9rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.panel-fila:hover,
.panel-fila:focus-visible {
  background: color-mix(in srgb, var(--acento) 18%, transparent);
  outline: none;
}
/* La opcion que ya esta puesta, con un tic delante. */
.panel-fila.elegida { color: var(--acento); font-weight: 600; }
.panel-fila.elegida::before { content: "✓"; font-size: .8rem; }
.panel-fila:not(.elegida)::before { content: ""; width: .8rem; }

/* En movil las filas se hacen mas altas: hay que darles con el pulgar. */
@media (hover: none) {
  .panel-fila { padding: .8rem .7rem; font-size: 1rem; }
}


/* ---- el calendario propio ---- */

/* Al input type=date se le tapa el iconito del navegador: el calendario
   lo abre el panel de abajo. Solo se hace donde hay raton; en el movil
   el nativo se queda tal cual (lo decide el JavaScript). */
.fecha-propia { cursor: pointer; }
.fecha-propia::-webkit-calendar-picker-indicator { display: none; }

.cal-panel { gap: .6rem; padding: .7rem; }
.cal-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.cal-cab strong { font-size: .9rem; text-transform: capitalize; }

.cal-rejilla {
  display: grid;
  grid-template-columns: repeat(7, 34px);
  gap: 2px;
}
.cal-dia-nombre {
  text-align: center;
  font-size: .65rem;
  color: var(--suave);
  padding-bottom: .2rem;
}
.cal-dia {
  height: 32px;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--fg);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.cal-dia:hover { background: color-mix(in srgb, var(--acento) 20%, transparent); }
/* Hoy va marcado con un aro; el dia elegido, relleno. Distintos a
   proposito: pueden ser el mismo dia y hay que verlos los dos. */
.cal-dia.hoy { box-shadow: inset 0 0 0 1px var(--acento); }
.cal-dia.elegido { background: var(--acento); color: #fff; font-weight: 600; }

/* ---- la paleta de color propia ---- */

.color-boton {
  width: 34px;
  height: 34px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  cursor: pointer;
  padding: 0;
}
.color-panel { padding: .6rem; gap: .6rem; }

/* Cuarenta muestras: diez tonos (columnas) en cuatro intensidades
   (filas). Ordenadas asi se busca por SITIO, no leyendo cuarenta
   cuadraditos de uno en uno. */
.color-rejilla {
  display: grid;
  grid-template-columns: repeat(10, 22px);
  gap: 4px;
}
.color-muestra {
  width: 22px;
  height: 22px;
  border: 2px solid transparent;
  border-radius: var(--radio-chico);
  cursor: pointer;
  padding: 0;
  transition: transform .1s ease;
}
.color-muestra:hover { transform: scale(1.18); }
/* El elegido lleva un aro POR FUERA, no un borde que le coma tamaño: si
   el borde fuera hacia dentro, el cuadradito marcado se veria mas
   pequeño que los demas y parecería que se ha hundido. */
.color-muestra.elegida {
  border-color: var(--tarjeta);
  box-shadow: 0 0 0 2px var(--fg);
}

/* Escribir el color exacto. Es lo que hace que la paleta sea de verdad
   abierta: cuarenta muestras cubren casi todo, pero si vienes con un
   color concreto tienes que poder ponerlo. */
.color-exacto {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding-top: .55rem;
  border-top: 1px solid var(--linea);
}
.color-almo {
  font-family: ui-monospace, Consolas, monospace;
  color: var(--suave);
  font-size: .9rem;
}
.color-exacto input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: .3rem .45rem;
  font-family: ui-monospace, Consolas, monospace;
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
}
.color-exacto input:focus {
  outline: none;
  border-color: var(--acento);
}
/* Mientras lo que hay escrito no sea un color, el borde avisa en rojo.
   No se borra lo tecleado ni se bloquea nada: estas a medio escribir. */
.color-exacto input.mal { border-color: var(--peligro); }


/* ---- el reloj propio ----

   Al `input type=time` se le tapa el iconito del navegador, igual que a
   las fechas: el selector lo abre el panel de abajo. Solo donde hay
   raton; en el movil se deja el del sistema, que es mejor para el dedo. */
.hora-propia { cursor: pointer; }
.hora-propia::-webkit-calendar-picker-indicator { display: none; }

.hora-panel {
  flex-direction: row !important;
  gap: .5rem;
  padding: .6rem;
}
.hora-columna {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.hora-rotulo {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--suave);
  text-align: center;
}
/* La lista se desliza dentro de su caja. 24 horas no caben de golpe, y
   estirar el panel hasta que quepan lo dejaria mas alto que la pantalla. */
.hora-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 190px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.hora-opcion {
  min-width: 48px;
  padding: .32rem .5rem;
  font: inherit;
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  background: none;
  border: 0;
  border-radius: var(--radio-chico);
  cursor: pointer;
  text-align: center;
}
.hora-opcion:hover {
  background: color-mix(in srgb, var(--acento) 18%, transparent);
}
.hora-opcion.elegida {
  background: var(--acento);
  color: #fff;
  font-weight: 700;
}
/* ================================================================
   NOTAS  (el arbol Curso > Cuatrimestre > Asignatura > Evaluacion)
   ================================================================ */

.notas { max-width: 820px; margin: 0 auto; }
.notas-cabecera { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.notas-cabecera h1 { margin: 0; }
/* Exportar/importar a la derecha del todo: el margen automatico se come
   el hueco que sobra y los empuja hasta el borde. */
.notas-archivo { margin-left: auto; display: flex; gap: 1rem; align-items: flex-start; }
.notas-archivo form { margin: 0; }
/* La etiqueta hace de boton (el input de archivo va escondido dentro). */
.notas-archivo label.btn { cursor: pointer; }

/* Cada formato (Excel / GestorNotas) con su rotulo encima y sus dos
   botones debajo. Sin el rotulo serian cuatro botones sueltos que ponen
   "Exportar" e "Importar" dos veces, y no se sabria a que va cada uno. */
.grupo-archivo {
  display: grid;
  grid-template-columns: auto auto;
  gap: .2rem .35rem;
  align-items: center;
}
/* La extension va tal cual, en minuscula y con letra de codigo: es el
   nombre de un tipo de archivo, no un titulo. En mayusculas (".CSV")
   pareceria otra cosa. */
.grupo-archivo .etiqueta-campo {
  grid-column: 1 / -1;
  font-family: ui-monospace, Consolas, monospace;
  font-size: .72rem;
  color: var(--suave);
}

.notas .aviso ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.notas .aviso li { margin: .15rem 0; }

/* Cada rama del arbol es un <details>. La raya de la izquierda y la
   sangria hacen que se vea de un vistazo que cuelga de que. */
.rama {
  border-left: 2px solid var(--linea);
  margin: .3rem 0 .3rem .2rem;
  padding-left: .7rem;
}
.rama > summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem .4rem;
  border-radius: 8px;
  cursor: pointer;
  list-style: none;            /* fuera el triangulito feo de serie */
}
.rama > summary::-webkit-details-marker { display: none; }
.rama > summary:hover { background: var(--panel); }

/* Sin flechas. Lo que marca cada nivel es la raya de la izquierda y la
   sangria, que ya se ven de sobra. Las ramas se siguen plegando al
   pinchar en su fila: lo que se quita es el adorno, no la funcion. */

.rama .nombre { font-weight: 600; }
.curso > summary .nombre { font-size: 1.15rem; }
.cuatri > summary .nombre { font-size: 1rem; }

/* Las acciones (+ / editar / borrar) a la derecha, y en gris hasta que
   pasas el raton por la fila: asi no ensucian. */
.rama > summary .acciones {
  margin-left: auto;
  display: flex;
  gap: .25rem;
  opacity: .35;
  transition: opacity .12s;
}
.rama > summary:hover .acciones,
.rama > summary:focus-within .acciones { opacity: 1; }

/* La nota final de la asignatura, en su pastilla. Verde si los pesos
   cuadran, rojo si no: el mismo codigo de color que el dinero. */
.nota-final {
  font-weight: 700;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.nota-final.ok    { color: #16a34a; background: color-mix(in srgb, #16a34a 12%, transparent); }
.nota-final.aviso { color: var(--peligro); background: color-mix(in srgb, var(--peligro) 12%, transparent); }

/* La caja que deja scrollear la tabla de evaluaciones.

   Una <table> no sabe encoger por debajo de lo que miden sus columnas:
   si no cabe, EMPUJA. En el movil eso le daba a la pagina entera una
   barra de scroll horizontal (medido: 105px de mas). Metida aqui dentro,
   la que se desliza de lado es la tabla y la pagina se queda quieta.

   Es la regla general para cualquier cosa ancha (tablas, diagramas,
   bloques de codigo): que scrollee DENTRO de su caja, nunca la pagina. */
.tabla-scroll {
  overflow-x: auto;
  /* Sin esto, un elemento de rejilla o flex no encoge por debajo de su
     contenido y el overflow-x de arriba no llega a activarse nunca. */
  min-width: 0;
}

/* La tabla de evaluaciones de una asignatura. */
.tabla-notas { width: 100%; border-collapse: collapse; margin: .2rem 0 .4rem 1.4rem; }
.tabla-notas td { padding: .3rem .5rem; border-bottom: 1px solid var(--linea); }
.tabla-notas .ev-nombre { width: 45%; }

/* Los rotulos de las columnas. Sin ellos ves "10  50%  5.0" y no sabes
   cual es cual. Van pequeños y en gris: tienen que explicar, no gritar.
   Se alinean igual que los numeros de debajo (a la derecha), o el rotulo
   no cuadraria con su columna. */
.tabla-notas thead th {
  padding: .2rem .5rem;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--suave);
  text-align: right;
  border-bottom: 1px solid var(--linea);
}
.tabla-notas thead th:first-child { text-align: left; }
.tabla-notas .ev-nota, .tabla-notas .ev-peso, .tabla-notas .ev-aporte {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--suave);
}
.tabla-notas .ev-acciones { text-align: right; white-space: nowrap; }

.fila-pesos td { border: none; font-size: .85rem; padding-top: .4rem; }
.fila-pesos .ok    { color: var(--suave); }
.fila-pesos .aviso { color: var(--peligro); font-weight: 600; }

/* Las filas de "añadir" (curso, cuatri, asignatura, evaluacion). */
/* OJO: un `display` puesto aqui PISA al atributo `hidden` del HTML.
   El navegador aplica `hidden { display: none }` con prioridad baja, y
   cualquier regla nuestra le gana. Sin la linea de abajo, las filas de
   "añadir" salian SIEMPRE, aunque en el HTML pusiera hidden. */
.fila-nueva[hidden] { display: none; }

.fila-nueva {
  display: flex;
  gap: .4rem;
  align-items: center;
  margin: .4rem 0 .4rem 1.4rem;
  flex-wrap: wrap;
}
.fila-nueva input {
  padding: .4rem .6rem;
  font: inherit;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 8px;
}
.fila-nueva input:not(.corto) { flex: 1; min-width: 8rem; }
.fila-nueva input.corto { width: 5rem; }
.nuevo-curso { margin-left: 0; margin-top: 1rem; }

.notas .vacio { color: var(--suave); margin: 2rem 0; }

/* La media del expediente: UN numero grande y solo uno. Es lo que vienes
   a mirar, asi que manda sobre todo lo demas de la pantalla. */
.media-expediente {
  margin: 0 0 1.2rem;
  padding: .8rem 1rem;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-caja);
}
.media-expediente .cifra-media {
  display: block;
  font-size: 2.2rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.media-expediente .pista { font-size: .8rem; color: var(--suave); }

/* Las medias de cada curso y cuatrimestre: en pequeño y en gris. Son
   contexto, no pueden competir con la nota de la asignatura ni con la
   media grande de arriba. */
.media-rama {
  font-size: .78rem;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
}

/* La grafica de evolucion. La caja, el trazo y los puntos los pinta el
   CSS que ya existia para los entrenos (.linea-progreso y compañia):
   aqui solo se le da su sitio y se arreglan las etiquetas.

   En entrenos las etiquetas son fechas cortas ("14/07"). Aqui son
   "1º · 1er cuatrimestre", que no cabe: se parten en varias lineas en vez
   de salirse de su hueco. */
.evolucion-notas {
  /* --color NO ES DECORACION, es lo que hace que se VEA.
     Los puntos (.linea-punto i) y el trazo (.linea-trazo polyline) se
     pintan con `var(--color)`. En los entrenos esa variable la pone el
     <div class="ficha" style="--color: ..."> de fuera, con el color del
     grupo muscular. Aqui no hay ficha, asi que sin esta linea el color
     no existe: los puntos y la linea salen TRANSPARENTES y la grafica
     se queda en blanco aunque el HTML este perfecto. */
  --color: var(--acento);

  margin: 0 0 1.4rem;
  padding: .8rem 1rem 1rem;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-caja);
}
.evolucion-notas .linea-dias span {
  font-size: .6rem;
  line-height: 1.2;
  overflow-wrap: anywhere;   /* un nombre largo baja de linea, no desborda */
  padding: 0 .15rem;
}

/* Las flechas de subir/bajar salen en CADA fila, asi que se aprietan para
   no comerse la pantalla. El resto de botones no se tocan. */
.notas [data-subir] {
  padding: .15rem .35rem;
  line-height: 1;
}
/* En la tabla de notas los botones son mas de lo mismo: se apagan hasta
   que pasas el raton por la fila, como en el resto del arbol. */
.tabla-notas .ev-acciones { opacity: .35; transition: opacity .12s; }
.tabla-notas tr:hover .ev-acciones,
.tabla-notas tr:focus-within .ev-acciones { opacity: 1; }

/* El dialogo de editar una evaluacion. */
#dlgEval label { display: block; margin: .6rem 0; }
#dlgEval input {
  display: block;
  width: 100%;
  margin-top: .2rem;
  padding: .45rem .6rem;
  font: inherit;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 8px;
}
#dlgEval .acciones-dialogo { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }


/* ---- el calendario de entrenos ---- */

.mes-mando {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
}

/* Casillas de tamaño FIJO, no estiradas a lo ancho. Con 7 columnas al
   ancho de la pagina salian de 145 px y el calendario se comia media
   pantalla, empujando todo lo demas abajo. Esto es un resumen para
   mirar de reojo; la vista de calendario de verdad ya es /mes. */
.mes-entrenos {
  display: grid;
  grid-template-columns: repeat(7, 42px);
  gap: 4px;
  justify-content: start;
}

/* OJO: esto ponia `.mes-cab` a secas, y ESE NOMBRE YA EXISTE: es el
   rotulo de los dias del calendario grande (LUN, MAR...), definido mucho
   mas arriba. Al llamarse igual y estar mas abajo en el archivo, GANABA,
   y le cambiaba la letra y el hueco al calendario de verdad sin que
   nadie lo pidiera. Ahora va atado a `.mes-entrenos`, asi que solo toca
   el suyo. Dos cosas distintas no pueden llamarse igual. */
.mes-entrenos .mes-cab {
  text-align: center;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--suave);
  padding: 0 0 .2rem;
  background: none;
  border: none;
}
.mes-dia {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio);
  background: var(--panel);
  color: var(--suave);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
/* Los dias del mes vecino, apagados: se ven pero no distraen. */
.mes-dia.fuera { opacity: .3; }
.mes-dia.hoy { box-shadow: inset 0 0 0 1px var(--acento); color: var(--fg); }

/* El dia que entrenaste, con el color de lo que hiciste. Es lo unico
   que tiene color en toda la rejilla: asi los huecos cantan.
   Y es un ENLACE: te lleva a lo que hiciste ese dia. */
.mes-dia.entrenado {
  background: var(--color);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .1s ease;
}
.mes-dia.entrenado:hover { transform: scale(1.08); }

/* ---- progreso de todos los ejercicios ---- */

.prog-lista {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.prog-fila {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .8rem 1rem;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--color);
  border-radius: var(--radio-caja);
}
.prog-nombre {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  align-items: flex-start;
}
.prog-nombre strong { font-size: 1rem; }

.prog-numeros {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.prog-de { color: var(--suave); font-size: .9rem; }
.prog-flecha { color: var(--suave); font-size: .8rem; }
.prog-a { font-size: 1.15rem; font-weight: 700; }

.delta.igual { color: var(--suave); }
.prog-veces { white-space: nowrap; min-width: 60px; text-align: right; }

.semana-enlace { font-size: .85rem; }

/* En pantalla estrecha la fila se parte en dos lineas antes que
   apretarse hasta no leerse. */
@media (max-width: 560px) {
  .prog-fila { flex-wrap: wrap; gap: .5rem 1rem; }
  .prog-nombre { flex-basis: 100%; }
  .prog-veces { margin-left: auto; }
}


/* ---- rutinas de entreno ---- */

/* Las rutinas van en tarjetas y A LA VISTA en /entrenos. Antes estaban
   detras de un boton, en su propia pagina: son el atajo para empezar a
   entrenar, asi que tienen que verse sin buscarlas.

   Misma rejilla que las cuentas de Dinero, con su tarjeta "+" al final
   para crear una nueva. */
.rut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .8rem;
}

.rut-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .9rem 1rem 1rem;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-caja);
}
/* La que toca hoy, marcada: es la que vas a pulsar. */
.rut-card.toca {
  border-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 8%, var(--tarjeta));
}
.rut-hoy {
  position: absolute;
  top: -9px;
  left: 1rem;
  padding: .1rem .5rem;
  background: var(--acento);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 999px;
}

.rut-card-cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  text-decoration: none;
  color: var(--fg);
}
.rut-card-nombre { font-size: 1.05rem; }
.rut-card-grupos { display: flex; gap: 4px; }
.rut-card-datos { font-size: .78rem; color: var(--suave); }
.rut-card-pie { margin-top: auto; }

/* La tarjeta de crear: discontinua, para que se lea como un hueco que
   llenar y no como una rutina mas. */
.rut-card.nueva {
  justify-content: center;
  border-style: dashed;
  background: none;
}
.rut-card.nueva .mas {
  font-size: 1.5rem;
  color: var(--suave);
  text-align: center;
  line-height: 1;
}
.rut-nueva-in {
  width: 100%;
  padding: .4rem .6rem;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  color: var(--fg);
  font: inherit;
  font-size: .85rem;
}

/* La tarjeta de una rutina en la lista. Como la de un dia, pero sin
   fecha: una rutina no es de ningun dia concreto. */
.rut-tarjeta {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .8rem 1rem;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-caja);
}
.rut-tarjeta .dia-cuerpo { padding: 0; }
.rut-tarjeta .btn { opacity: .35; }
.rut-tarjeta:hover .btn { opacity: 1; }

.guardar-rutina summary {
  cursor: pointer;
  font-size: .85rem;
  color: var(--suave);
  padding: .4rem 0;
}
.guardar-rutina .rapido { margin-top: .5rem; }

.rut-borrar {
  padding-top: 1rem;
  border-top: 1px solid var(--linea);
}
.rut-borrar .pista { margin-top: .4rem; }

/* "Antes 42,5 kg × 8 · récord 45 kg" en la tarjeta del ejercicio.
   Es el dato que miras antes de cargar la barra. */
.ej-antes {
  font-size: .78rem;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
}

/* ---- el volumen del entreno: actual y esperado ---- */

.vol-panel {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.vol-cifras {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
.vol-dato {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
/* El actual manda: mas grande y en el color de acento. El esperado va
   al lado, mas apagado, para que se lea "2.090 DE 3.190" y no como dos
   numeros sueltos que compiten. */
.vol-actual {
  font-size: 2.1rem;
  line-height: 1;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.vol-esperado {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
}
.vol-de {
  color: var(--suave);
  font-size: .9rem;
  padding-bottom: .15rem;
}
.vol-series { margin-left: auto; }
.vol-series strong {
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 460px) {
  .vol-series { margin-left: 0; flex-basis: 100%; }
}


/* ============================================================
   PAGINA DE INICIO

   Lo primero que ves al entrar: eliges seccion en vez de caer en el
   calendario. Cada tarjeta con su color y un dato vivo.
   ============================================================ */

.inicio { max-width: 940px; margin: 0 auto; }

/* ---- el saludo, con mas presencia ---- */
.inicio-saludo { margin: .5rem 0 2rem; }
.inicio-saludo h1 {
  margin: 0 0 .3rem;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;   /* titulares grandes respiran mejor apretados */
}
.inicio-fecha { color: var(--suave); font-size: 1rem; }
.inicio-fecha::first-letter { text-transform: uppercase; }

.inicio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.1rem;
}

/* ---- las tarjetas, con color y vida ----

   Cada tarjeta se tiñe del color de su seccion: un degradado muy suave de
   fondo, el icono en un circulo del color, y al pasar el raton se eleva y
   suelta una sombra DE SU COLOR. Es lo que la hace "moderna con color" en
   vez de un panel gris con una rayita. */
.inicio-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "icono texto flecha"
    "icono dato  flecha";
  align-items: center;
  column-gap: 1rem;
  padding: 1.25rem 1.35rem;
  border-radius: 12px;
  text-decoration: none;
  color: var(--fg);
  /* Superficie limpia, sin sombra. Se separa del fondo por su borde fino
     y por ser un peldaño mas clara. El color de la seccion vive SOLO en
     su icono: un punto, no un baño. */
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  transition: border-color .15s ease, background .15s ease;
}
.inicio-card:hover {
  /* al pasar el raton, el borde se marca: la jerarquia es el borde, no una
     sombra que aparece de la nada */
  border-color: var(--linea-fuerte);
  background: color-mix(in srgb, var(--acento) 3%, var(--tarjeta));
}

/* el icono de linea, en su cuadro con un fondo muy tenue de su color.
   El SVG toma el color de la seccion via currentColor. Es el UNICO sitio
   donde aparece el color: un punto, no un baño. */
.inicio-card-icono {
  grid-area: icono;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radio);
  background: color-mix(in srgb, var(--color) 12%, transparent);
  color: var(--color);
}
.inicio-card-icono svg { width: 1.4rem; height: 1.4rem; }

.inicio-card-texto {
  grid-area: texto;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.inicio-card-nombre { font-size: 1.2rem; font-weight: 700; }
.inicio-card-desc {
  font-size: .82rem;
  color: var(--suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El dato vivo, grande y en el color: es lo que da vida al panel. */
.inicio-card-dato {
  grid-area: dato;
  margin-top: .3rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color);
  font-variant-numeric: tabular-nums;
}

/* la flecha, discreta, que se desliza al pasar el raton */
.inicio-card-flecha {
  grid-area: flecha;
  color: var(--color);
  font-size: 1.3rem;
  opacity: .35;
  transition: transform .18s ease, opacity .18s ease;
}
.inicio-card:hover .inicio-card-flecha {
  opacity: 1;
  transform: translateX(4px);
}
/* Series y repes editables en la tarjeta de una rutina. Se envian al
   cambiarlos, sin boton de guardar: es un molde, cambiarlo tiene que
   costar lo mismo que pensarlo. */
.ej-serrep {
  display: flex;
  align-items: center;
  gap: .3rem;
}
.ej-por { color: var(--suave); font-size: .85rem; }

/* El peso, escribible. Parece el numero grande de siempre hasta que lo
   tocas: sin caja ni borde, para que no se lea como un formulario en
   medio de la tarjeta. */
.peso-campo {
  width: 90px;
  padding: .1rem .2rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: inherit;
  font: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.peso-campo:hover { border-color: var(--linea); }
.peso-campo:focus {
  outline: none;
  border-color: var(--acento);
  background: var(--panel);   /* al escribir se hunde: se ve que es un campo */
}
.peso-unidad {
  font-size: .95rem;
  font-weight: 600;
  color: var(--suave);
  /* Pegado al numero: el campo ya tiene su propio hueco a la derecha,
     y con el gap de .ej-peso encima quedaba el "kg" flotando lejos. */
  margin-left: -.35rem;
}
/* Fuera las flechitas del navegador si algun dia es type=number. */
.peso-campo::-webkit-outer-spin-button,
.peso-campo::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------------------------------------------- buscar ejercicio

   La ventana de "Añadir ejercicio": el buscador, las pastillas de grupo
   y los 144 en una lista. Misma ventana que la ficha, pero mas alta:
   aqui se viene a recorrer, no a leer. */
.buscar-dlg {
  max-width: 460px;
  width: calc(100% - 2rem);
  max-height: 85vh;
}
.buscar {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  /* La ventana entera no crece: lo que se desplaza es la lista de
     abajo, asi el buscador y las pastillas se quedan siempre a la
     vista mientras bajas. */
  max-height: calc(85vh - 2.5rem);
}
.buscar-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.buscar-cab h3 { margin: 0; font-size: 1.15rem; }

.buscar-campo {
  width: 100%;
  padding: .55rem .7rem;
  font-size: 1rem;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.buscar-campo:focus { outline: none; border-color: var(--acento); }

/* Cada grupo es una lista que se abre. Son <details> de HTML: se abren
   solos sin JavaScript, con el teclado y para un lector de pantalla.

   Cerrados de partida a proposito: 144 ejercicios de corrido es un
   rollo de bajar, y asi de un vistazo ves los siete grupos y cuantos
   hay en cada uno. */
.buscar-grupo > summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .4rem;
  border-radius: var(--radio);
  cursor: pointer;
  list-style: none;          /* fuera el triangulito del navegador */
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--suave);
}
.buscar-grupo > summary::-webkit-details-marker { display: none; }
.buscar-grupo > summary:hover { background: var(--panel); }

/* La flecha, puesta por nosotros para poder girarla al abrir. */
.buscar-grupo > summary::after {
  content: "›";
  margin-left: auto;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--suave);
  transition: transform .12s ease;
}
.buscar-grupo[open] > summary::after { transform: rotate(90deg); }
.buscar-grupo[open] > summary { color: var(--fg); }

.buscar-grupo-nombre { flex: 0 1 auto; }

/* Cuantos hay dentro. Se lee antes de abrir, que es de lo que sirve. */
.buscar-cuantos {
  font-weight: 400;
  letter-spacing: 0;
  color: var(--suave);
}

.buscar-lista {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  /* Sitio para que el dedo llegue al ultimo sin pelearse con el borde. */
  padding-bottom: .3rem;
}
.buscar-titulo { margin: .6rem 0 .2rem; }

.buscar-boton {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .35rem .4rem;
  background: none;
  border: 0;
  border-radius: var(--radio);
  cursor: pointer;
  text-align: left;
  color: var(--fg);
}
.buscar-boton:hover { background: var(--panel); }

/* El hueco de la foto se reserva SIEMPRE, tenga imagen o no: si no, la
   lista se movia de izquierda a derecha segun cual tuviera GIF. */
.buscar-foto {
  flex: 0 0 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border-radius: 8px;
  overflow: hidden;
}
.buscar-foto img { width: 100%; height: 100%; object-fit: cover; }

.buscar-nombre { flex: 1; font-size: .92rem; }

/* Un puntito del color del grupo. Dice de que es sin gastar el ancho de
   una pastilla entera, que aqui hacen falta 144 veces. */
.grupo-punto {
  flex: 0 0 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color);
}

/* "No lo encuentro": escribir el nombre a mano. Es lo que antes era el
   cuadro de texto de la pantalla del entreno; se movio aqui porque es
   donde se te ocurre buscarlo, y ahi estorbaba. Va apagado hasta que se
   abre: el 99% de las veces el ejercicio esta en la lista. */
.buscar-mano {
  border-top: 1px solid var(--linea);
  padding-top: .6rem;
}
.buscar-mano > summary {
  cursor: pointer;
  font-size: .85rem;
  color: var(--suave);
  list-style: none;
}
.buscar-mano > summary::-webkit-details-marker { display: none; }
.buscar-mano > summary::before { content: "+ "; }
.buscar-mano > summary:hover { color: var(--fg); }
.buscar-mano .rapido { margin-top: .5rem; }

/* Las tarjetas de "Rutinas listas". Mismas que las tuyas (.rut-card),
   con dos diferencias: no llevan a ningun sitio (todavia no son tuyas,
   hay que copiarlas) y tienen una linea explicando para que son. */
.rut-card.lista {
  background: var(--panel);
  border-style: dashed;
}
.rut-card-para {
  font-size: .8rem;
  line-height: 1.35;
  color: var(--suave);
}
/* En las tuyas el cuerpo es un <a> y ya trae sus estilos; aqui es un
   div, asi que hay que decirle que crezca para que el boton de copiar
   quede abajo del todo y todas las tarjetas lo tengan a la misma
   altura. */
.rut-card.lista .rut-card-cuerpo {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1;
}


/* ================================================================
   EL CALENDARIO EN EL MOVIL

   POR QUE ESTE BLOQUE ESTA AL FINAL DEL FICHERO

   Ya hay un @media (max-width: 600px) mucho mas arriba. Lo logico seria
   meter esto alli. No se puede, y el motivo merece un parrafo porque es
   una trampa de CSS que ya mordio antes en este mismo fichero (ver el
   comentario del @media de 900px):

     UN @media NO SUMA FUERZA.

   Entre dos reglas que pesan lo mismo gana LA ULTIMA que se lee, este
   dentro de un @media o no. Y las reglas base de .titulo, header,
   .leyenda, .mes-celda, .chip, .dia-cab y .agenda-rejilla se escriben MAS
   ABAJO que aquel bloque. O sea que sus versiones de movil se estaban
   perdiendo: el titulo salia a 1.9rem en el telefono y la rejilla de la
   semana se quedaba con su max-height de 62vh, cortada a las 18:00.

   Poniendolo al final va detras de todo y gana sin trucos. Sin
   !important, que es tapar el problema en vez de arreglarlo.

   QUE ARREGLA

   Medido a 390x844 con Playwright: la rejilla del mes no empezaba hasta
   el pixel 605 de una pantalla de 844. Abrias el mes y veias semana y
   media.
   ================================================================ */

@media (max-width: 600px) {

  /* ---- la cabecera se comia la pantalla ---- */

  /* Un "Julio 2026" a 1.9rem es un cartel. En que mes estas se sabe por
     el calendario que hay debajo; el titulo solo lo confirma. */
  .titulo { font-size: 1.15rem; padding: .6rem .9rem .2rem; }

  header { padding: .5rem .9rem; gap: .5rem; }
  header .marca { margin-right: .2rem; }
  .izq, .der { gap: .35rem; }

  /* La leyenda de categorias ocupaba DOS lineas. Ahora vive dentro de un
     <details> (ver base.html) que en el movil nace plegado. Aqui se le
     pinta el rotulo: en el ordenador esta escondido, porque alli los
     colores se ven directamente y un boton para abrir algo que ya esta
     abierto no dice nada. */
  .leyenda-caja > summary {
    display: flex;
    align-items: center;
    gap: .35rem;
    width: max-content;
    margin: 0 .9rem .6rem;
    padding: .28rem .6rem;
    font-size: .78rem;
    color: var(--suave);
    border: 1px solid var(--linea);
    border-radius: var(--radio-chico);
    cursor: pointer;
    /* Fuera el triangulito que pone el navegador por su cuenta: el
       <summary> ya se ve que se toca (tiene su borde) y ese triangulo no
       se parece a nada mas de la app. Hacen falta las dos lineas porque
       Chrome y Safari usan cada uno la suya. */
    list-style: none;
  }
  .leyenda-caja > summary::-webkit-details-marker { display: none; }
  .leyenda-caja > summary svg { width: 1em; height: 1em; flex: none; }
  .leyenda-caja[open] > summary { margin-bottom: .35rem; }
  .leyenda { padding: 0 .9rem .7rem; }

  /* ---- las pastillas del mes ----

     Una casilla mide 55px. Ahi no cabe una palabra: lo que se leia era
     "Pie" (por "Pierna"), "E...", "17...". Eso no es informacion, es
     ruido del tamaño justo para estorbar.

     Lo que SI cabe en 55px es "aqui hay algo, y es naranja". Asi que en
     el movil la pastilla pasa a ser una barra de color, igual que en el
     calendario del telefono de toda la vida.

     `text-indent` empuja el texto fuera de la caja en vez de apagarlo. Un
     `display: none` se lo llevaria tambien al lector de pantalla y el dia
     se quedaria mudo; asi el texto sigue ahi (y el aria-label de
     _chip.html ya lleva titulo y categoria), solo que no se dibuja.

     La barra se puede tocar, pero la puerta buena al detalle es el NUMERO
     del dia: lleva a /dia, donde cada tarea tiene su fila entera. */
  .mes-celda { min-height: 76px; }
  .mes-celda .chip {
    /* 12px, y no mas. A 16 se probo y el mes dejaba de caber: con 7
       barras por casilla y el numero del dia a 44px, solo entraban TRES
       semanas donde antes entraban cinco. Un mes que hay que scrollear
       deja de servir para lo unico que sirve un mes.

       Esta altura estaba puesta DOS veces: 9px aqui y 12px en el bloque
       de `(hover: none)` del final, que ganaba por ir despues. O sea que
       los 9px no se veian en ningun movil de verdad, solo estrechando la
       ventana del ordenador. Ahora es un solo numero en un solo sitio, y
       vale para el dedo y para el raton. */
    height: 12px;
    min-height: 12px;
    padding: 0;
    margin-bottom: 3px;
    text-indent: -9999px;
    overflow: hidden;
    /* El color iba en el borde izquierdo, que en una barra tan fina seria
       un cuadradito. Aqui manda el fondo. */
    border-left-width: 0;
    background: var(--color, var(--acento));
    border-radius: 3px;
  }
  /* El simbolo de "se repite" y el icono de seccion de los reflejos (ver
     _reflejo.html) son hijos de verdad, no texto: el text-indent no se los
     lleva y en una barra de 12px saldrian cortados.

     La hora en negrita estaba en esta misma lista. Se ha ido al @media de
     900 del final del fichero, que la esconde en TODA la tablet y no solo
     aqui: de 900 para abajo tampoco cabia. */
  .mes-celda .chip .repite,
  .mes-celda .chip svg { display: none; }
  .mes-celda .chip.hecha { opacity: .35; }
  /* Los reflejos mezclaban su color al 22% con el fondo, que en una barra
     fina se queda en un gris palido. Una barra de 9px o es color o no es
     nada. */
  .mes-celda .chip.reflejo { background: var(--color, var(--acento)); }

  /* ---- vista Semana: deslizar de lado ----

     7 columnas en 390px salen a 66px. Ahi no cabe ni "Pierna". Se les da
     ancho FIJO y se deslizan con el dedo.

     Se prefirio esto a enseñar solo 3 dias: la vista Semana existe para
     ver LA SEMANA. Recortarla la convierte en otra cosa; deslizandola
     sigue siendo la semana, solo que se mira en dos golpes. */

  /* La caja que scrollea y la cabecera pegada ya estan puestas para todas
     las pantallas, alli arriba (busca "QUIEN SUBE Y BAJA ES LA CAJA
     ENTERA"). El alto tambien se ha ido al @media de 900 del final, porque
     la tablet lo necesitaba igual. Aqui queda la inercia del iPhone, que
     eso si es solo del movil. */
  .agenda-desliza { -webkit-overflow-scrolling: touch; }

  /* ---- el calendario, de borde a borde ----

     `main` deja .9rem de aire a cada lado. En el movil eso son 29px de
     los 390, y en una rejilla de 7 columnas 29px es media columna.

     Pero hay un motivo mas fuerte que el ancho, y conviene dejarlo
     escrito porque costo medirlo:

     LA COLUMNA DE HORAS PEGADA (el `position: sticky` de mas abajo) NO
     SE ANCLA A LA CAJA QUE SE DESLIZA, SINO AL BORDE DE LA PANTALLA.

     Medido con Playwright: con el relleno de `main` puesto, al arrastrar
     hasta el domingo la columna de horas se quedaba 18px a la izquierda
     de donde debia y las etiquetas salian cortadas ("0:00" en vez de
     "10:00"). Esos 18px son justo el relleno de `main` mas el borde de
     la tarjeta. Quitandolos, la caja empieza en el pixel 0 y las dos
     referencias coinciden: la desviacion pasa a ser 0.

     Se podria haber puesto `left: 18px` a mano, pero seria un numero
     magico atado al relleno de `main`: cambias el relleno y se rompe sin
     que nadie sepa por que.

     Los bordes de los lados y el redondeo se quitan porque una tarjeta
     que toca los dos bordes de la pantalla ya no es una tarjeta. El Mes
     va igual para que las dos vistas no queden desiguales. */
  .mes, .agenda {
    margin-left: -.9rem;
    margin-right: -.9rem;
    border-left: none;
    border-right: none;
    border-radius: 0;
  }

  /* Cada pixel de ancho es de los dias, no de las etiquetas de hora. */
  .agenda { --ancho-horas: 46px; }

  /* EL FONDO GRIS DE LA CABECERA SE CORTABA A MEDIA SEMANA.

     La semana mide 690px y la pantalla 390. Las filas son bloques, asi
     que su ANCHO era el de la pantalla (390) aunque su CONTENIDO midiera
     690: las columnas se salian por la derecha. Y un fondo se pinta sobre
     la caja, no sobre lo que se sale.

     Resultado: deslizabas hasta el viernes y a partir de ahi la cabecera
     perdia su gris y los dias se veian sobre el fondo de la pagina, como
     si fueran otra cosa. Justo lo que se veia en su captura.

     `max-content` hace que la caja mida lo que mide su contenido, y el
     `min-width: 100%` evita que se quede corta cuando la semana SI cabe
     (una tablet ancha, por ejemplo). */
  .agenda-fija,
  .agenda-cab,
  .agenda-tododia,
  .agenda-rejilla {
    width: max-content;
    min-width: 100%;
  }

  /* `una-columna` es la vista Dia: un solo dia, ancho de sobra, no se
     desliza nada. Por eso queda fuera de estas reglas. */
  .agenda:not(.una-columna) .agenda-cab,
  .agenda:not(.una-columna) .agenda-tododia,
  .agenda:not(.una-columna) .agenda-rejilla {
    grid-template-columns: var(--ancho-horas) repeat(7, 92px);
  }


  /* La columna de horas se queda PEGADA a la izquierda al deslizar. Sin
     esto arrastras hasta el jueves y ya no sabes si esa raya son las 10 o
     las 18: los numeros se habrian ido por la izquierda.

     Necesita fondo propio: transparente, las tareas pasarian por debajo y
     se leerian encima de la hora. */
  .agenda:not(.una-columna) .columna-horas,
  .agenda:not(.una-columna) .agenda-cab > .hueco,
  .agenda:not(.una-columna) .agenda-tododia > .hueco {
    position: sticky;
    left: 0;
    z-index: 3;
  }
  .agenda:not(.una-columna) .columna-horas { background: var(--tarjeta); }
  .agenda:not(.una-columna) .agenda-cab > .hueco,
  .agenda:not(.una-columna) .agenda-tododia > .hueco {
    background: var(--panel);
  }

  /* El circulito de "hoy" media 1.9rem y en una columna de 92px se comia
     el nombre del dia. */
  .dia-cab { padding: .45rem .15rem; font-size: .72rem; }
  .dia-cab .num { font-size: 1rem; }
  .dia-cab.es-hoy .num { width: 1.6rem; height: 1.6rem; line-height: 1.6rem; }

  /* ---- vista Lista: la fecha, a su propio renglon ----

     La fila era [tic] [punto] [titulo] [cuando] [papelera], todo en linea.
     En 390px la fecha se llevaba su trozo de ancho y el titulo se partia
     en TRES lineas ("Examen / de / Calculo"), que es justo lo que uno
     viene a leer.

     El `order: 1` no sobra: sin el, al bajar de renglon la fecha
     arrastraria consigo a la papelera, que va detras. Poniendola la
     ULTIMA de la fila, baja sola.

     La sangria la deja debajo del titulo y no del tic, para que se lea
     como lo que es: el pie de esa tarea. */
  .lista li { flex-wrap: wrap; row-gap: .15rem; }
  .lista .cuando {
    order: 1;
    flex-basis: 100%;
    padding-left: 3.15rem;
    font-size: .75rem;
  }

  /* ================================================================
     NOTAS Y DINERO: LO QUE COLGABA A LA DERECHA

     Estas siete declaraciones estaban arriba, en el otro @media, y NO
     SE APLICABAN NUNCA. Llevaban meses ahi sin hacer nada.

     El motivo es el mismo de todo este bloque: aquel @media va antes que
     las reglas base de Notas y Dinero, pesan lo mismo, y en un empate
     gana la ultima. Asi que el `margin-left: auto` de siempre se comia
     al `margin-left: 0` del movil.

     Y se veia, aunque nadie lo mirara: en Notas los botones de cada rama
     (+ Cuatrimestre, subir, bajar, renombrar, borrar) salian despegados
     90px a la derecha, sueltos de su titulo. En Dinero, "Exportar mes /
     Exportar todo" colgaban 152px a la derecha.

     `desbordes.py` decia "no se sale nada" y eso se leyo como "se ve
     bien". No es lo mismo.

     Hay un chivato que ahora lo vigila:
         python herramientas/reglas_muertas.py
     ================================================================ */

  /* `margin-left: auto` es lo que empuja un trozo de una fila flex hasta
     la derecha del todo. En el ordenador esta bien: separa los botones de
     exportar del resto. En un movil de 390px no hay derecha a la que
     empujar, y lo unico que hace es dejar el hueco delante. */
  .barra-mes .exportar { margin-left: 0; }
  .notas-archivo { margin-left: 0; }
  .rama > summary .acciones { margin-left: 0; }

  /* La fila de Notas ya baja de renglon (arriba); aqui se le aprieta el
     aire entre botones, que a 1rem gastaba un renglon de mas. */
  .notas-cabecera { gap: .6rem; }

  /* La sangria del arbol y de la tabla de evaluaciones es fija: 1.4rem
     por nivel. Con cuatro niveles (curso > cuatrimestre > asignatura >
     evaluacion) eso son 90px comidos de los 390 que hay. */
  .tabla-notas { margin-left: .4rem; }
  .fila-nueva { margin-left: .4rem; }

  /* ---- los paneles, de dos columnas a una ----

     `.fila` pone dos campos uno al lado del otro: Dia / Hasta, Empieza /
     Acaba. En un ordenador esta bien. En 390px cada uno se queda en 170,
     y ahi no cabe ni la etiqueta: "Hasta (si dura varios dias)" se parte
     en dos renglones y el panel entero se ve apelotonado.

     En un telefono no hay dos columnas: uno debajo de otro y se lee todo.
     Ocupa mas alto, pero el panel ya sube y baja por dentro. */
  .fila { flex-direction: column; gap: .5rem; }

  /* El panel no puede pasarse de alto: si se pasa, el navegador lo corta
     y Guardar y Cancelar quedan fuera. `dvh` y no `vh` por lo de siempre:
     `vh` no cuenta la barra del navegador (ver dialog.cajon). */
  dialog:not(.cajon) {
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
  }

  /* Y los botones de abajo se quedan PEGADOS al pie del panel. Sin esto
     hay que bajar por dentro hasta encontrarlos, y el boton mas
     importante de la pantalla no deberia haber que buscarlo. Medido:
     Guardar caia 12px por debajo del corte; ahora cae a 775 de 844.

     El fondo no sobra: el panel scrollea por debajo y sin el se leerian
     los campos a traves de los botones. */
  dialog:not(.cajon) .acciones {
    position: sticky;
    bottom: 0;
    background: var(--tarjeta);
    padding-top: .7rem;
    margin-bottom: 0;
    /* El relleno del panel es 1rem; con esto el fondo llega hasta el
       borde en vez de dejar una franja del color de detras. */
    margin-inline: -1rem;
    padding-inline: 1rem;
    padding-bottom: calc(.2rem + env(safe-area-inset-bottom));
  }
}


/* ================================================================
   PARA DEDOS

   Va al FINAL del fichero por lo mismo que el bloque de arriba: un
   @media no suma peso, asi que si estuviera antes de las reglas base de
   cada boton, la mitad no se aplicaria. Ya paso.

   `(hover: none)` = "este aparato no sabe pasar el raton por encima".
   Es MEJOR señal que el ancho: una tablet grande sigue siendo un dedo, y
   una ventana estrecha en un portatil sigue siendo un raton. Por eso no
   va dentro del @media de 600px.

   POR QUE 44px

   Un raton apunta al pixel. Un dedo deja una huella de unos 8mm, asi que
   por debajo de 44px se falla mucho. Es lo que recomiendan Apple y
   Google. En Orbita habia cosas de 9, 13 y 19px.

   En el ordenador NO se toca nada de esto: alli un boton de 44px es un
   boton gordo y feo, y con raton das igual.

   Vigilado por:  python herramientas/dedos.py
   ================================================================ */

@media (hover: none) {

  /* ---- los mandos de moverse por la app ----
     Estos son los que mas duele fallar: si no aciertas al menu, no vas a
     ningun lado. */
  .hamburguesa { width: 44px; height: 44px; }
  .vistas a { min-height: 44px; display: inline-flex; align-items: center; }
  .marca { min-height: 44px; }
  /* Ajustes y Cerrar sesion, en el pie del cajon. Miden 30px y con el
     dedo se fallan. Y fallar el de salir en un movil prestado es
     justo lo que no puede pasar. Crecen los DOS: son la misma clase en
     la barra y en el cajon, y comparten plantilla (_pie_cuenta.html). */
  .lateral-icono { min-width: 44px; min-height: 44px; }

  /* ---- botones y campos, en general ----
     `min-height` y no `height`: si el contenido pide mas (un boton con
     dos lineas), que crezca. Se le da tambien un poco de aire a los
     lados, que un boton de 44px de alto y 20 de ancho sigue siendo dificil
     de acertar. */
  .btn,
  .pastilla,
  .sel-boton,
  summary,
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  select,
  textarea {
    min-height: 44px;
  }
  /* `min-width` y no relleno: hay sitios que le ponen a estos botones un
     relleno mas apretado con un selector mas fuerte (`.movimientos
     .chip-form button`, por ejemplo), y ahi el relleno de aqui perdia.
     El `min-width` no lo toca nadie, asi que gana siempre. */
  .btn { min-width: 44px; }
  .btn.mini { padding-inline: .8rem; }

  /* ---- `flex: none`, y no es un detalle ----

     Casi todos estos botones viven dentro de una fila flex. Y un hijo de
     un flex ENCOGE por defecto si la fila va justa, asi que se llevaba
     por delante los tamaños de arriba sin decir nada:

         .hamburguesa   le puse 44px  -> salia 41.6
         .btn.mini      con relleno   -> salia 23
         la casilla     le puse 20px  -> salia 13

     Los tres medidos, los tres encogidos. Con `flex: none` se plantan.
     Las filas donde viven ya saben bajar de renglon (`flex-wrap: wrap`),
     asi que lo que antes se apretaba ahora baja, que es lo que se quiere
     en un telefono. */
  .btn, .pastilla, .hamburguesa, .sel-boton, .vistas a { flex: none; }

  /* Las casillas de marcar son cuadraditos de 13px. No se agranda la
     casilla (quedaria enorme y rara): se agranda la ETIQUETA que la
     envuelve, que es lo que de verdad se toca. */
  label.check,
  .dia-check { min-height: 44px; display: flex; align-items: center; }
  /* El selector va largo a proposito: mas arriba hay un
     `label.check input[type="checkbox"] { width: auto }` que pesa (0,3,2)
     y se comia un `input[type="checkbox"]` a secas, que pesa (0,1,1). Con
     el nombre completo empatan, y gana este por ir despues. */
  label.check input[type="checkbox"],
  .dia-check input[type="checkbox"],
  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
    flex: none;
  }

  /* ---- el calendario ---- */

  /* El numero del dia en el mes es la PUERTA a ese dia (lleva a /dia).
     Medía 26px. Es el objetivo importante de esa pantalla, porque las
     barras de debajo no pueden crecer (ver mas abajo). */
  .numero {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Las barras del mes NO llegan a 44 Y NO PUEDEN: en una casilla caben
     hasta 7, y a 44px cada una la casilla mediria 300px y el mes no
     cabria en ninguna pantalla. El camino bueno para tocar es el NUMERO
     del dia, que si mide 44 y lleva a la vista Dia, donde cada tarea
     tiene su fila entera.

     SU ALTURA YA NO SE PONE AQUI, y el motivo merece leerse porque
     mordio:

     `(hover: none)` es CUALQUIER aparato con dedo, TABLET INCLUIDA. Pero
     la pastilla solo es una barra (con el texto escondido por
     `text-indent`) por debajo de 600px. En una tablet de 768 todavia
     lleva su titulo escrito, y esta regla le clavaba 12px de alto con una
     interlinea de 19.89px: las 136 pastillas del mes, con el texto
     cortado por abajo.

     La altura vive ahora en el @media de 600, que es donde la pastilla es
     de verdad una barra. Aqui no hace falta nada: lo que manda no es el
     dedo, es que haya texto o no.

     Vigilado por:  python herramientas/cabe.py --ancho 768 */

  /* Las bandas (viajes, convenciones) SI pueden crecer: van solas en su
     carril, no apiladas como las pastillas.

     Se toca `--alto-banda` y ya: el hueco que las casillas dejan arriba
     se recalcula solo (ver .hueco-bandas). Antes habia que acordarse de
     cambiar tambien un 22 escrito a mano en otro sitio, y si no, las
     bandas pisaban las tareas.

     `--sitio-numero` sube porque el numero del dia pasa a medir 44px:
     si no, las bandas se le meterian encima. */
  .mes-semana {
    --alto-banda: 34px;
    --sitio-numero: 46px;
  }
  .banda { display: flex; align-items: center; }

  /* Las pastillas de "todo el dia" de la Semana. Estas no son las del
     mes: aqui solo hay una o dos por dia, asi que caben mas altas. */
  .celda-tododia .chip { min-height: 44px; display: flex; align-items: center; }

  /* La fila de una tarea en la vista Lista. */
  .titulo-tarea { min-height: 44px; display: flex; align-items: center; }

  /* Enlaces sueltos de Entrenos ("Ver mi progreso") y las fechas de la
     rejilla de meses. */
  .enlace { min-height: 44px; display: inline-flex; align-items: center; }
  .mes-dia, .dia-fecha { min-height: 44px; }

  /* ---- fuera las pistas de "aqui se puede tocar" ----

     Con el dedo, tocar un hueco del calendario YA NO crea nada (ver
     app.js): saltaba el panel de "Nueva tarea" sin querer al desplazar o
     al apoyar el pulgar. Se crea solo desde el boton de arriba.

     Asi que estas casillas dejan de anunciarse como tocables. El cursor
     de "celda" no se ve en un movil, pero el resalte al pasar por encima
     SI se queda pegado despues de tocar, y prometeria algo que ya no
     pasa. */
  .mes-celda, .celda-tododia, .columna-dia { cursor: default; }
  .mes-celda:hover,
  .celda-tododia:hover { background: none; }
  .mes-celda.otro-mes:hover { background: var(--panel); }
  .mes-celda.es-hoy:hover { background: color-mix(in srgb, var(--acento) 6%, transparent); }
}


/* ================================================================
   LA TABLET: DE 601 A 900, EL ANCHO QUE NADIE MIRA

   Debajo de 600 entran las reglas de movil. Por encima de 900 sale la
   barra lateral. En medio no entra ninguna de las dos cosas, asi que
   este trozo se quedo con la version de ordenador metida en una
   pantalla que no le llega.

   Va al FINAL del fichero por lo de siempre: un @media NO suma peso, y
   `.chip` se escribe en la linea 1137. Puesto arriba, perderia.

   QUE ARREGLA (medido a 768 con herramientas/cabe.py)

   La pastilla del mes pone la hora en negrita y luego el titulo. Con la
   casilla a 91px, la hora se llevaba 48 -- el 53% -- y del titulo se
   leian tres letras:

       390px    hora   0px  ->  45px para el titulo   0 pastillas mudas
       768px    hora  48px  ->  27px para el titulo  22 pastillas mudas
      1440px    hora  38px  ->  98px para el titulo   0 pastillas mudas

       [19:00 Cla...]   <- "Clase de ingles"
       [19:00 Gim...]   <- "Gimnasio"

   POR QUE AQUI SI VALE UN NUMERO DE ANCHO

   En la semana no valdria: alli el ancho de una tarjeta depende de
   cuantas tareas se pisen, y eso el CSS no lo sabe. Pero la casilla del
   mes es siempre ventana/7, o sea funcion directa del ancho. Y 900 no
   es inventado: es el mismo sitio donde aparece la barra lateral.

   Vigilado por:  python herramientas/cabe.py --ancho 768
   ================================================================ */

@media (max-width: 900px) {

  /* La hora fuera: la casilla no da para las dos cosas y entre saber la
     hora y saber QUE es, lo segundo importa mas. La hora no se pierde;
     esta en el aria-label, en el globito y en la ficha que sale al tocar
     la tarea. Y la dice tambien el ORDEN, que las pastillas de un dia van
     de mas temprano a mas tarde.

     Debajo de 600 esta regla ya hacia falta por otro motivo: alli la
     pastilla es una barra de color con `text-indent`, y el text-indent no
     se lleva a los hijos de verdad como este <b>. Por eso la declaracion
     vivia en aquel bloque y ahora vive aqui: hace las dos cosas, y en un
     solo sitio. */
  .mes-celda .chip b { display: none; }

  /* La agenda usaba 62vh y dejaba 118px de pantalla vacia debajo a 768,
     con el contenido pidiendo 1321px. 72vh es lo que ya usaba el movil,
     por la misma razon: cada franja de hora cuenta. */
  .agenda-desliza { max-height: 72vh; }
}