:root {
  --azul: #2c5f8a;
  /* El mismo azul en componentes sueltos, para poder pintarlo con
     transparencia (rgba) en la barra superior esmerilada. */
  --azul-rgb: 44, 95, 138;
  --azul-oscuro: #204a6e;
  --azul-claro: #eaf2f8;
  --texto: #232323;
  --gris: #6b6b6b;
  --borde: #e0e0e0;
  --fondo: #f7f8fa;
  --superficie: #ffffff;
  /* Alto real de .tabs-bottom (la barra inferior fija) mas un margen -
     todo lo que flota en esa misma esquina (boton de peticiones, aviso
     de cookies, banner de instalar) tiene que subir este tanto para no
     quedar tapado por ella. */
  --altura-barra-inferior: 78px;
}

* { box-sizing: border-box; }

/* Los <button> no heredan la tipografia de la pagina por defecto (el
   navegador les pone su propia fuente/altura de linea de sistema) - sin
   esto, un <button> y un <a> con la MISMA clase (ej. "Descargar" enlace y
   "Eliminar" boton, uno al lado del otro) salian con alturas ligeramente
   distintas y se veian descuadrados entre si. */
button, input, select, textarea {
  font-family: inherit;
  /* Nunca por debajo de 16px: si un campo de texto/select tiene la letra
     mas pequeña que eso, iOS Safari hace zoom el solo al enfocarlo (para
     que se lea bien al escribir) - y luego, al cerrar el teclado, el
     zoom no siempre vuelve a su sitio, dejando la pagina "descuadrada"
     hasta recargar. Esto es la base (cubre selects sin clase propia,
     como el de la hora de ampliacion); las reglas mas especificas de
     abajo que fijaban un tamaño menor tambien se han subido a 1rem. */
  font-size: 16px;
}

/* Salvaguarda: cualquier clase de aqui abajo que fije su propio "display"
   (ej. modal-overlay, aviso-cookies, .btn) anularia el atributo "hidden"
   del navegador en un empate de cascada normal - esta regla, con
   !important, garantiza que "hidden" siempre gane, sea cual sea la clase. */
[hidden] { display: none !important; }

html {
  /* "100%"/"100vh" en iOS Safari se basan en el viewport MAS GRANDE
     posible (como si la barra de herramientas de Safari estuviera
     siempre oculta) - si esta visible, el contenido real ocupa menos de
     lo que la pagina "cree", dejando un hueco en blanco abajo, justo
     donde estaba cayendo la barra inferior fija. "-webkit-fill-available"
     ajusta el alto de html al que se ve DE VERDAD en cada momento (mismo
     truco que en Turnos, que no tiene este problema en iPhone real). */
  height: -webkit-fill-available;
  /* El rebote elastico de iOS al tirar del scroll mas alla del limite
     (arriba o abajo del todo) llegaba a hacer "desaparecer" un instante
     los elementos position:sticky/fixed que quedaran fuera del area
     visible real (la barra de arriba o la de abajo) - se soluciona
     desactivando el rebote (soportado desde iOS 16, 2022, cubre a
     practicamente todo el mundo). */
  overscroll-behavior-y: none;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  font-size: 16px;
  line-height: 1.45;
  /* CLAVE del hueco bajo la barra en el iPhone (medido sobre capturas
     reales): en una pagina SIN scroll (ej. Exámenes, que casi no tiene
     contenido) iOS calcula los elementos position:fixed contra un alto
     de pantalla 59px MAS CORTO - justo el alto de la isla dinamica -, y
     la barra de abajo se queda flotando a esa altura con un hueco
     debajo. En una pagina CON scroll (ej. Apuntes) el calculo es
     correcto y la barra queda pegada al borde. Por eso en Turnos y en
     la Porra no pasa nunca: todas sus pantallas tienen contenido de
     sobra y siempre hay scroll.

     Con este "+1px" toda pagina es minimamente scrollable, asi que iOS
     usa siempre el alto bueno. Es 1px invisible (el fondo es liso y
     main.contenido ya deja hueco de sobra por debajo). */
  min-height: calc(100vh + 1px);
  overscroll-behavior-y: none;
}
/* Mientras hay un modal abierto (ver el MutationObserver en base.html):
   truco clasico de iOS para bloquear el scroll del fondo sin que salte -
   se fija el body en su sitio (con "top" negativo, puesto por JS, para
   que no se mueva visualmente) y se restaura el scroll real al cerrar. */
body.modal-abierto {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
main.contenido {
  /* Hueco abajo para que el contenido no quede tapado por la barra
     inferior, que es position:fixed y no ocupa espacio en el flujo
     normal de la pagina (ver .tabs-bottom mas abajo). */
  padding-bottom: calc(var(--altura-barra-inferior) + env(safe-area-inset-bottom));
}

.topbar {
  background: var(--azul);
  color: white;
  position: sticky;
  top: 0;
  z-index: 10;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  /* Sube el azul hasta detras de la isla dinamica / la muesca (hace
     falta "viewport-fit=cover" en el <meta viewport> de base.html para
     que el sistema deje pintar ahi) - el contenido de dentro no se toca,
     .topbar-inner ya tiene su propio padding y baja solo lo justo. */
  padding-top: env(safe-area-inset-top);
}
/* Ya desplazada (ver el listener de scroll en base.html): la barra se
   oscurece un punto y saca una sombra fina para despegarse del
   contenido que le pasa DIFUMINADO por debajo (gracias al velo de la
   regla de aqui abajo, no a la propia barra). Sin degradado: color
   plano siempre, nunca backdrop-filter ni transform en este elemento. */
.topbar.desplazada {
  background: var(--azul-oscuro);
  box-shadow: 0 1px 14px rgba(0, 0, 0, 0.24);
}
@media (prefers-reduced-motion: reduce) {
  .topbar { transition: none; }
}

/* IMPORTANTE - por que la barra en si YA NO lleva backdrop-filter:
   la primera version la hacia translucida al hacer scroll para dejar
   entrever el contenido desenfocado por detras. Se quito porque
   position:sticky + backdrop-filter en el MISMO elemento es una
   combinacion con bugs reales y documentados en WebKit/iOS Safari: unas
   veces "pierde" su capa de composicion a mitad de scroll y deja de
   pintarse un instante (parece que la barra desaparece del todo). El
   intento de arreglarlo forzando una capa estable con
   transform: translateZ(0) lo EMPEORO: un transform en el propio
   elemento sticky puede romper el pegado y hacer que se desenganche
   SIEMPRE en el mismo punto de scroll - justo lo que paso (de "a veces"
   paso a "siempre en el mismo sitio").

   La solucion de verdad es separar responsabilidades: la barra (sticky)
   se queda simple y solida, sin backdrop-filter ni trucos de capa - eso
   es lo que nunca puede fallar. Todo el difuminado, incluido el que
   antes daba la propia barra, vive en .velo-difuminado de aqui abajo,
   que es position:fixed (no sticky) y no tiene el mismo problema. */

/* Velo de difuminado progresivo: la propia barra solo desenfoca lo que
   pasa POR DENTRO de su franja (unos 60px). Para la zona de transicion
   grande y suave (texto que va entrando nitido segun se aleja de la
   barra, como en las apps nativas de iOS) hace falta una tecnica
   distinta: varias capas apiladas, cada una con MAS desenfoque y una
   mascara en degradado mas alta que la anterior, de forma que se suman -
   cerca de la barra el desenfoque es fuerte (varias capas solapadas) y va
   desapareciendo capa a capa hasta quedar nitido del todo bastante mas
   abajo. Un unico backdrop-filter con una sola mascara no consigue este
   efecto: la mascara solo varia la OPACIDAD del resultado ya desenfocado
   (mismo desenfoque siempre), no la cantidad de desenfoque en si.

   Vive "flotando" (position: fixed) justo debajo de la barra, no empuja
   contenido (pointer-events: none) y solo se enciende cuando la barra
   esta desplazada - el propio selector de hermanos "~" lo detecta sin
   JavaScript aparte, aprovechando la clase que ya pone el listener de
   scroll de base.html sobre .topbar. */
.velo-difuminado {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  z-index: 9; /* justo por debajo de la barra (10): asomando por su borde */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  /* Capa de composicion estable en GPU (ver la nota de arriba sobre por
     que la barra ya NO lleva esto): aqui SI es seguro porque el propio
     elemento es position:fixed, no sticky - un transform en un elemento
     fixed no interfiere con su propio posicionamiento (solo lo haria si
     estuviera en un ANCESTRO), asi que no tiene el bug de WebKit que
     rompio la barra. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.velo-difuminado span {
  position: absolute;
  inset: 0;
  display: block;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topbar.desplazada ~ .velo-difuminado { opacity: 1; }

  /* Los tantos por ciento de las mascaras se median desde el TOPE del
     velo (0%), pero los primeros 60px del velo quedan tapados por la
     propia barra (su altura real) - un fallo de calculo que paso
     desapercibido varias versiones: la capa con MAS desenfoque se
     desvanecia del todo a los 28px (15% de 190px), asi que se apagaba
     ENTERA detras de la barra y nunca llegaba a verse. Lo que se veia
     era solo el rastro debil de las capas 1-2, de ahi que costara
     notarlo ("mira una app y la otra", con una referencia bien visible
     al lado, comparado con esto que apenas se apreciaba).

     Ahora las mascaras se anclan en PIXELES, no en porcentaje, y todas
     arrancan a desvanecerse justo en los 60px de la barra (no antes) -
     asi la transicion entera se ve DESPUES del borde de la barra, que es
     donde de verdad importa. Franja deliberadamente ESTRECHA (66px de
     transicion visible, menos de la mitad que la primera prueba con
     135px): se notaba pero ocupaba demasiada pantalla. */
  .velo-difuminado span:nth-child(1) {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0px, #000 60px, transparent 126px);
    mask-image: linear-gradient(to bottom, #000 0px, #000 60px, transparent 126px);
  }
  .velo-difuminado span:nth-child(2) {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0px, #000 60px, transparent 110px);
    mask-image: linear-gradient(to bottom, #000 0px, #000 60px, transparent 110px);
  }
  .velo-difuminado span:nth-child(3) {
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0px, #000 60px, transparent 94px);
    mask-image: linear-gradient(to bottom, #000 0px, #000 60px, transparent 94px);
  }
  /* Capa 4: la mas honda, pegada a la barra - el maximo desenfoque de
     todos, justo donde el texto tiene que quedar mas ilegible nada mas
     asomar por debajo del borde. */
  .velo-difuminado span:nth-child(4) {
    -webkit-backdrop-filter: blur(36px);
    backdrop-filter: blur(36px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0px, #000 60px, transparent 78px);
    mask-image: linear-gradient(to bottom, #000 0px, #000 60px, transparent 78px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .velo-difuminado { transition: none; }
}
.topbar-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1.05rem;
  color: white;
  text-decoration: none;
}
.brand-icono {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex: none;
}
.topbar select {
  padding: 6px 10px;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
}
.topbar-acciones {
  display: flex;
  align-items: center;
  gap: 10px;
}
.icono-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: white;
  text-decoration: none;
  opacity: 0.9;
  border-radius: 8px;
}
.icono-topbar svg { width: 20px; height: 20px; flex: none; }
.icono-topbar:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }

/* Barra inferior, estilo iOS: icono + etiqueta pequeña por pestaña.
   Solida en reposo, igual que la barra de arriba - el cristal esmerilado
   (backdrop-filter) solo se activa al hacer scroll (clase .desplazada,
   ver el mismo listener de base.html que ya movia la barra de arriba).
   position:fixed, igual que en cuadraturnos/porra (ver la capa de
   composicion propia mas abajo para que no "baile" de una pestaña a
   otra) - main.contenido lleva su propio padding-bottom para no quedar
   tapado por ella (ver mas arriba en este fichero). */
.tabs-bottom {
  position: fixed;
  /* Normalmente 0. Si aun asi iOS deja la barra flotando por encima del
     borde real (ver la nota de "min-height" en body), el script de
     base.html mide el desfase exacto y lo mete en --desfase-abajo (en
     negativo) para bajarla hasta su sitio. En Android y en cualquier
     navegador que se comporte bien vale 0 y no hace nada. */
  bottom: var(--desfase-abajo, 0px);
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  padding: 8px 6px calc(6px + env(safe-area-inset-bottom));
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  transition: background-color 0.3s ease;
  /* Capa de composicion propia: mantiene la barra anclada durante el
     scroll en iOS en vez de "bailar" de una pestaña a otra. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .tabs-bottom.desplazada {
    background: color-mix(in srgb, var(--superficie) 72%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }
}
.tabs-bottom a {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 2px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--gris);
  font-weight: 500;
}
.tabs-bottom-icono {
  position: relative;
  display: flex;
}
.tabs-bottom-icono svg { width: 22px; height: 22px; flex: none; }
.tabs-bottom-etiqueta {
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tabs-bottom a.activo {
  color: var(--azul);
  background: var(--azul-claro);
}
.tabs-bottom a.activo .tabs-bottom-etiqueta { font-weight: 700; }
/* Globo de aviso estilo iOS (circulo rojo con numero) sobre el icono de
   una pestaña - distinto de .punto-nav (el puntito simple, sin numero,
   que se usa en el numero de cada dia del Calendario) porque este lleva
   contenido de texto dentro y necesita mas sitio. Se puede apagar entero
   desde Configuracion > Notificaciones (ver pintarPuntosNav). */
.globo-nav {
  position: absolute;
  top: -5px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--superficie);
}

.contenido {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
}

h1 {
  font-size: 1.3rem;
  margin: 4px 0 16px;
}

.vacio { color: var(--gris); }

.lista-alumnos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tarjeta-alumno {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 16px;
  text-decoration: none;
  color: var(--texto);
}
.tarjeta-alumno span { color: var(--gris); font-size: 0.9rem; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
}
.tarjeta-hoy {
  border-color: var(--azul);
  border-width: 2px;
  box-shadow: 0 4px 14px rgba(44, 95, 138, 0.12);
}
.tarjeta-cabecera h2, .tarjeta > h2 {
  font-size: 1.05rem;
  margin: 0 0 6px;
}
.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.badge {
  background: var(--azul-claro);
  color: var(--azul);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.82rem;
  font-weight: 600;
}
.boton-pdf { margin-bottom: 16px; }
.badge-categoria { color: white; }
.tarjeta-nueva {
  border-color: #e8b84b;
  border-width: 2px;
  box-shadow: 0 4px 14px rgba(232, 184, 75, 0.18);
}
.badge-nuevo {
  background: #fff4d6;
  color: #8a5a00;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.82rem;
  font-weight: 700;
}
.separador-vistos {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gris);
  font-size: 0.82rem;
  font-weight: 600;
  margin: 18px 0 14px;
}
.separador-vistos::before, .separador-vistos::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--borde);
}
.punto-nav {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e8b84b;
  margin-left: 5px;
  vertical-align: middle;
}
.fecha {
  color: var(--gris);
  font-size: 0.85rem;
  align-self: center;
}

.cuerpo-texto {
  white-space: pre-wrap;
  margin: 8px 0;
}

.lista-platos {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.lista-platos li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--borde);
  font-size: 0.95rem;
}
.lista-platos li:last-child { border-bottom: none; }
.lista-platos li:first-child { padding-top: 0; }

.menu-etiqueta {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--azul);
}

.sugerencia-cena {
  background: var(--azul-claro);
  color: var(--texto);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.88rem;
  margin: 10px 0;
}
.sugerencia-cena strong { color: var(--azul); }

.form-cena, .form-cumpleanos {
  margin-top: 14px;
  margin-bottom: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
}
.form-cena label, .form-cumpleanos label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 6px;
}
.ampliacion-hijos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 12px;
}
.ampliacion-hijos-titulo {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gris);
  width: 100%;
}
.ampliacion-hijo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  color: var(--texto);
  cursor: pointer;
}
.ampliacion-hijo input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--azul);
  cursor: pointer;
}
.form-cena-fila {
  display: flex;
  gap: 8px;
}
.form-cena-fila input {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  font-size: 1rem;
}
.form-cena-fila .boton-secundario {
  align-self: stretch;
  margin-top: 0;
  white-space: nowrap;
}

.adjunto-imagen {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 8px;
}
.adjunto-enlace {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--azul-claro);
  color: var(--azul);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

.aviso-error {
  margin-top: 10px;
  padding: 10px 12px;
  background: #fff4e5;
  border: 1px solid #f3c78a;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #7a4a00;
}
.aviso-error a { color: #7a4a00; }

.cal-cabecera {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}
.cal-mes {
  font-weight: 600;
  min-width: 170px;
  text-align: center;
}
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--superficie);
  border: 1px solid var(--borde);
  color: var(--azul);
  text-decoration: none;
  font-size: 1.2rem;
}

.cal-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
  margin-bottom: 18px;
  table-layout: fixed;
}
.cal-grid th {
  font-size: 0.72rem;
  color: var(--gris);
  padding: 6px 2px;
  font-weight: 600;
}
.cal-grid td {
  text-align: center;
  padding: 6px 2px;
  font-size: 0.9rem;
  vertical-align: middle;
  height: 44px;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
}
/* Cada dia del mes es su propia "chip" tintada (no solo los que tienen
   algo apuntado) - se nota mas de un vistazo que el mes esta ahi, y los
   puntitos de categoria siguen encima para el detalle. Los dias de fuera
   de mes (.cal-vacio) se quedan sin tintar, para que se noten de menos. */
.cal-vacio { background: var(--fondo); }
.cal-dia {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borde);
}
.cal-dia.cal-ampliacion::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 14px solid #e0a530;
  border-right: 14px solid transparent;
}
.cal-dia a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: var(--texto);
}
.cal-numero { line-height: 1; }
.cal-puntos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 6px;
}
.cal-punto {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex: none;
}
.cal-mas {
  font-size: 0.55rem;
  color: var(--gris);
  line-height: 1;
}
.cal-hoy .cal-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--azul-claro);
  color: var(--azul);
  font-weight: 700;
}
.cal-seleccionado {
  background: var(--azul-claro);
  border-color: var(--azul);
}
.cal-subtitulo {
  font-size: 1rem;
  color: var(--gris);
  margin: 4px 0 10px;
}

/* --- Login / primer arranque --- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding-top: calc(24px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  background:
    radial-gradient(480px circle at 15% -10%, rgba(44, 95, 138, 0.16), transparent 60%),
    radial-gradient(420px circle at 100% 0%, rgba(44, 95, 138, 0.1), transparent 55%),
    var(--fondo);
}
.auth-card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(20, 30, 40, 0.04), 0 20px 45px rgba(20, 40, 60, 0.12);
  padding: 36px 28px;
  max-width: 380px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.auth-logo img {
  width: 60px;
  height: 60px;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(44, 95, 138, 0.3);
}
.auth-card h1 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0 0 4px;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.auth-subtitulo {
  color: var(--gris);
  font-size: 0.9rem;
  margin: 0 0 18px;
  text-align: center;
}
.boton-faceid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--azul-oscuro);
}
.auth-separador {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--gris);
  font-size: 0.8rem;
  margin: 16px 0 4px;
}
.auth-separador::before,
.auth-separador::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--borde);
}
.auth-separador span { padding: 0 10px; }
.auth-ayuda {
  color: var(--gris);
  font-size: 0.8rem;
  margin: 4px 0 0;
}
.auth-card label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 10px;
}
.auth-card input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  font-size: 1rem;
}
.boton-primario {
  margin-top: 18px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: var(--azul);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.boton-enlace {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}
.enlace-reenvio {
  font-size: 0.85rem;
  margin: 8px 0;
}
.enlace-reenvio a {
  color: var(--azul);
  text-decoration: underline;
  cursor: pointer;
}
.enlace-reenvio a.enlace-deshabilitado {
  color: var(--gris);
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}
.enlace-reenvio span { color: var(--gris); }
.boton-secundario {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: var(--azul-claro);
  color: var(--azul);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  cursor: pointer;
  align-self: flex-start;
  margin-top: 4px;
}
.boton-borrar {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 4px 8px;
}
.aviso-ok {
  margin-top: 10px;
  padding: 10px 12px;
  background: #e8f7ee;
  border: 1px solid #a9dfbf;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #1e7e42;
}

/* --- Configuración --- */
.form-config {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.form-config label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 8px;
}
.form-config input,
.form-config textarea {
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  font-size: 1rem;
  font-family: inherit;
}
.form-config textarea { resize: vertical; }
.subtitulo-config {
  font-size: 1rem;
  margin: 16px 0 6px;
}
.fila-dispositivo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--borde);
  font-size: 0.92rem;
}
.fila-dispositivo span { color: var(--gris); font-size: 0.8rem; }
.fila-invitacion {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.fila-invitacion input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-size: 1rem;
  background: var(--fondo);
  color: var(--gris);
}
#enlace-whatsapp {
  margin: 6px 0 14px;
}
.fila-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  margin-top: 10px;
}
.fila-checkbox input { width: 18px; height: 18px; flex: none; }

/* --- Gastos escolares --- */
.tarjeta-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.gasto-ajustes {
  margin: 4px 0 6px;
  font-size: 0.85rem;
}
.gasto-ajustes summary {
  cursor: pointer;
  color: var(--azul);
  font-weight: 600;
}
.gasto-ajustes-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}
.gasto-ajustes-fila label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gris);
  flex: 1;
  min-width: 180px;
}
.gasto-ajustes-fila select {
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.gasto-importe-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--borde);
}
.gasto-importe-fila:last-of-type { border-bottom: none; }
.gasto-importe-fila label {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--texto);
  margin-bottom: 0;
  flex: 1;
}
.input-importe {
  flex: none;
  width: 100px;
  padding: 12px 10px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  font-size: 1.05rem;
  text-align: right;
}
.gasto-ajustes .badge {
  margin-left: 8px;
}
.gasto-total-familia {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
  font-size: 0.95rem;
}

.subnav-gastos {
  display: flex;
  gap: 18px;
  margin: -6px 0 14px;
  font-size: 0.9rem;
  font-weight: 600;
}
.subnav-gastos a {
  color: var(--gris);
  text-decoration: none;
}
.subnav-gastos a:hover {
  color: var(--azul);
}
.subnav-gastos .activo {
  color: var(--azul);
  border-bottom: 2px solid var(--azul);
  padding-bottom: 3px;
}

.grafico-mensual {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 4px 4px;
  min-height: 220px;
}
.barra-mes-columna {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 0 40px;
  min-width: 40px;
}
.barra-mes-pista {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: flex-end;
}
.barra-mes-apilada {
  width: 100%;
  height: 0%;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  transition: height 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.barra-mes-grupo {
  width: 100%;
  height: 0%;
  display: flex;
  flex-direction: column-reverse;
  transition: height 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.barra-mes-apilada.con-extra .barra-mes-grupo-recibo {
  border-top: 2px solid var(--fondo);
}
.barra-mes-segmento {
  width: 100%;
  height: 0%;
  cursor: pointer;
  transition: height 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.15s ease;
}
.barra-mes-segmento:hover, .barra-mes-segmento:active {
  filter: brightness(1.15);
}
.barra-mes-futuro .barra-mes-apilada {
  opacity: 0.4;
}
.barra-mes-columna.mes-actual .barra-mes-etiqueta {
  color: var(--azul);
  font-weight: 700;
}
.barra-mes-valor {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--azul-oscuro);
  white-space: nowrap;
}
.barra-mes-etiqueta {
  font-size: 0.78rem;
  color: var(--gris);
}
.vacio-mini {
  font-size: 0.82rem;
  color: var(--gris);
  margin: -6px 0 10px;
}
.tooltip-gasto {
  position: fixed;
  z-index: 50;
  background: var(--azul-oscuro);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -6px) scale(0.92);
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.tooltip-gasto.visible {
  opacity: 1;
  transform: translate(-50%, -12px) scale(1);
}

/* --- Gastos: pestañas por hijo, recibo/extra, gasto personalizado --- */
.gasto-tabs {
  display: flex;
  gap: 6px;
  margin: 4px 0 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.gasto-tab {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--gris);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.gasto-tab.activo {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}
.gasto-tab-total { margin-left: auto; border-color: var(--azul); color: var(--azul); }
.gasto-tab-total.activo { color: #fff; }
.lista-recibo .total-banco { font-weight: 700; border-top: 1px solid var(--borde); }
.gasto-panel.oculto { display: none; }

.tarjeta-recibo .badge { background: var(--azul-claro); color: var(--azul); }
.badge-extra { background: #fff4e5; color: #7a4a00; }
@media (prefers-color-scheme: dark) {
  .badge-extra { background: #3a2c12; color: #f0c37a; }
}
.lista-recibo {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.lista-recibo li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--borde);
  font-size: 0.92rem;
}
.lista-recibo li:last-child { border-bottom: none; }
.lista-recibo li.resta { color: #1e7e42; }
@media (prefers-color-scheme: dark) {
  .lista-recibo li.resta { color: #7fe3ac; }
}
.fila-checkbox-sutil {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
  font-size: 0.85rem;
  color: var(--gris);
}
.gasto-nuevo-concepto { margin-top: 14px; }
.boton-anadir-gasto {
  background: none;
  border: 1px dashed var(--azul);
  color: var(--azul);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}
.gasto-nuevo-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.gasto-nuevo-form.oculto { display: none; }
.input-nuevo-nombre { flex: 2; min-width: 140px; }
.input-nuevo-importe { flex: 1; min-width: 90px; }
.input-nuevo-nombre, .input-nuevo-importe {
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  font-size: 1rem;
}
.gasto-nuevo-form .boton-guardar-nuevo-gasto { margin-top: 0; }
.gasto-total-mes {
  margin-top: 4px;
  font-size: 0.95rem;
}
.gasto-ajustes-fila-septiembre {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
}
.gasto-ticket-fila {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--borde);
}
.boton-subir-ticket {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px dashed var(--azul);
  color: var(--azul);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.input-ticket-oculto {
  display: none;
}
.ticket-estado {
  font-size: 0.8rem;
  color: var(--gris);
}
.ticket-estado a { color: var(--azul); }

/* --- Aviso de fecha de nacimiento sin poner --- */
.aviso-fecha-nacimiento {
  max-width: 720px;
  margin: 0 auto 12px;
  padding: 12px 16px;
  background: #fff4e5;
  border: 1px solid #f0c37a;
  border-radius: 10px;
  color: #7a4a00;
  font-size: 0.88rem;
  line-height: 1.5;
}
.aviso-fecha-nacimiento a { color: #7a4a00; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  .aviso-fecha-nacimiento { background: #3a2c12; border-color: #6b4d18; color: #f0c37a; }
  .aviso-fecha-nacimiento a { color: #f0c37a; }
}

/* --- Configuración: tickets guardados (para la Renta) --- */
.lista-tickets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.ticket-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--borde);
  border-radius: 10px;
}
.ticket-item img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  flex: none;
}
.ticket-item-info { flex: 1; min-width: 0; }
.ticket-item-info strong { display: block; font-size: 0.9rem; }
.ticket-item-info span { font-size: 0.78rem; color: var(--gris); }
.ticket-item-acciones {
  display: flex;
  gap: 6px;
  flex: none;
}
.ticket-item-acciones a, .ticket-item-acciones button {
  padding: 6px 10px;
  font-size: 0.78rem;
  margin-top: 0;
}

/* --- Histórico: desglose por categoría (donut) y proyección --- */
.grafico-donut-envoltorio {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 8px auto 16px;
}
.grafico-donut { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-fondo {
  fill: none;
  stroke: var(--borde);
  stroke-width: 14;
}
.donut-segmento {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke-dasharray 1.1s cubic-bezier(0.22, 1, 0.36, 1), stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.grafico-donut-centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.grafico-donut-centro strong { font-size: 1.15rem; }
.grafico-donut-centro span { font-size: 0.75rem; color: var(--gris); }
.lista-categorias {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lista-categorias li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.9rem;
  border-bottom: 1px dashed var(--borde);
}
.lista-categorias li:last-child { border-bottom: none; }
.lista-categorias li strong { margin-left: auto; }
.punto-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.progreso-proyeccion-pista {
  height: 14px;
  border-radius: 999px;
  background: var(--borde);
  overflow: hidden;
  margin-top: 8px;
}
.progreso-proyeccion-barra {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--azul), #17b8a6);
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.progreso-proyeccion-cifras {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--gris);
  flex-wrap: wrap;
}
.progreso-proyeccion-cifras strong { color: var(--texto); }

.tarjeta-admin {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.tarjeta-admin-cabecera {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.tarjeta-admin-cabecera strong { font-size: 1rem; }
.tarjeta-admin .badge {
  background: var(--azul-claro);
  color: var(--azul);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.7rem;
  font-weight: 700;
}
.badge-estado {
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-estado.ok { background: #e8f7ee; color: #1e7e42; }
.badge-estado.pendiente { background: #fff4e5; color: #7a4a00; }
.badge-estado.rechazada { background: #fdecea; color: #c0392b; }
.tarjeta-admin-datos {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--gris);
  margin-bottom: 10px;
  word-break: break-word;
}
.tarjeta-admin-acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.tarjeta-admin-acciones form { display: inline-block; }
.tarjeta-admin-acciones .boton-secundario { padding: 6px 10px; font-size: 0.8rem; margin-top: 0; white-space: nowrap; }
/* El de rechazar lleva un textarea al lado (comentario obligatorio para la
   familia) - necesita su propia fila entera, no encajar inline como los
   botones sueltos de "Marcar vista/hecha". */
.tarjeta-admin-acciones .form-rechazar-peticion {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  width: 100%;
}
.tarjeta-admin-acciones .form-rechazar-peticion textarea {
  flex: 1;
  min-width: 160px;
  font-size: 0.8rem;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  resize: vertical;
  font-family: inherit;
}

/* --- Modo oscuro: los colores de estado necesitan mas contraste sobre fondo oscuro --- */
@media (prefers-color-scheme: dark) {
  .badge-estado.ok { background: #12301e; color: #7fe3ac; }
  .badge-estado.pendiente { background: #3a2c12; color: #f0c37a; }
  .badge-estado.rechazada { background: #3a1616; color: #ff8a80; }
  .badge-nuevo { background: #3a2c12; color: #f0c37a; }
}

.pie-app {
  max-width: 720px;
  margin: 40px auto 0;
  padding: 16px;
  /* El hueco para que la barra fija de abajo no tape el pie ya lo pone
     main.contenido (padding-bottom con env(safe-area-inset-bottom)) -
     ponerlo tambien aqui lo duplicaba, dejando un hueco enorme en
     paginas cortas (Examenes, Gastos con pocos campos). */
  text-align: center;
  color: var(--gris);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  line-height: 1.8;
}
.pie-app a { color: var(--gris); text-decoration: underline; }

/* --- Modales (tutorial de bienvenida, aviso de verificar correo) --- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-caja {
  background: var(--superficie);
  border-radius: 16px;
  padding: 28px 24px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.modal-caja h2 { font-size: 1.15rem; margin: 0 0 8px; }
.modal-caja-ancha {
  max-width: 480px;
  text-align: left;
}
.modal-caja-ancha h2 { text-align: center; }
.lista-peticiones-hechas {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  max-height: 40vh;
  overflow-y: auto;
  text-align: left;
}
.lista-peticiones-hechas li {
  padding: 9px 12px;
  margin-bottom: 8px;
  background: var(--fondo);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--texto);
}
.lista-peticiones-hechas li:last-child { margin-bottom: 0; }
.lista-changelog {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  max-height: 55vh;
  overflow-y: auto;
}
.lista-changelog li {
  padding: 10px 0;
  border-bottom: 1px dashed var(--borde);
}
.lista-changelog li:last-child { border-bottom: none; }
.changelog-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 3px;
}
.changelog-cabecera strong { color: var(--azul); }
.changelog-cabecera span { font-size: 0.78rem; color: var(--gris); white-space: nowrap; }
.lista-changelog p { margin: 0; font-size: 0.92rem; color: var(--texto); line-height: 1.4; }
.novedades-caja {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: none;
  border-radius: 12px;
  background: var(--azul-claro);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
}
.novedades-version {
  flex: none;
  font-weight: 700;
  color: var(--azul);
  background: var(--superficie);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.78rem;
}
.novedades-texto {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.novedades-flecha {
  flex: none;
  color: var(--azul);
  font-size: 1.2rem;
}
.modal-emoji { font-size: 2.2rem; margin: 0 0 8px; }
.modal-botones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
}
.modal-botones button,
.modal-botones a { flex: 1; margin-top: 0; align-self: stretch; }
.tutorial-puntos {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}
.punto-tutorial {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--borde);
}
.punto-tutorial.activo { background: var(--azul); }
.modal-caja textarea {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
  text-align: left;
}
.modal-caja .aviso-error { text-align: left; }
.review-estrellas {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 14px;
}
.review-estrella {
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  padding: 2px;
  color: var(--borde);
  cursor: pointer;
  margin-top: 0;
}
.review-estrella.activa { color: #f0b429; }

/* --- Boton flotante (peticiones/sugerencias desde el Calendario) --- */
.boton-flotante {
  position: fixed;
  right: 18px;
  bottom: calc(var(--altura-barra-inferior) + 22px + env(safe-area-inset-bottom, 0px) + var(--desfase-abajo, 0px));
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  background: var(--azul);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 40;
  transition: bottom 0.2s ease;
}
/* El aviso de cookies (z-index 90) vive en la misma esquina y si no, lo
   taparia por completo - mientras este visible, el boton sube por encima. */
body.aviso-cookies-visible .boton-flotante {
  bottom: calc(var(--altura-barra-inferior) + var(--altura-aviso-cookies, 110px) + env(safe-area-inset-bottom, 0px) + var(--desfase-abajo, 0px));
}

/* --- Aviso de cookies --- */
.aviso-cookies {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(var(--altura-barra-inferior) + 12px + var(--desfase-abajo, 0px));
  z-index: 90;
  max-width: 640px;
  margin: 0 auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
.aviso-cookies p { font-size: 0.8rem; color: var(--gris); flex: 1; min-width: 200px; margin: 0; }
.aviso-cookies button { margin-top: 0; white-space: nowrap; }

/* --- Aviso de instalar como app (PWA) --- */
.install-banner {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(var(--altura-barra-inferior) + 12px + env(safe-area-inset-bottom, 0px) + var(--desfase-abajo, 0px));
  z-index: 91;
  max-width: 420px;
  margin: 0 auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 16px 40px 16px 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
.install-banner h3 { font-size: 0.95rem; margin: 0 0 6px; }
.install-banner p { font-size: 0.8rem; color: var(--gris); line-height: 1.5; margin: 0; }
.install-banner .close {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
  border: none; background: transparent; color: var(--gris); font-size: 18px; line-height: 1; cursor: pointer;
}
.install-banner #btn-install { margin-top: 10px; }
/* Punta que "apunta" hacia el icono Compartir de la barra de Safari,
   justo debajo del banner - por eso el banner va centrado. */
.install-banner-flecha {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-top: 9px solid var(--superficie);
}

.pagina-legal { max-width: 640px; padding: 32px 20px 60px; }
.pagina-legal h2 { font-size: 1.05rem; margin: 24px 0 8px; }
.pagina-legal p, .pagina-legal li { color: var(--texto); font-size: 0.92rem; line-height: 1.6; }
.pagina-legal ul { padding-left: 20px; margin: 8px 0; }
.pagina-legal a { color: var(--azul); }

/* --- Modo oscuro (sigue el ajuste del sistema) --- */
@media (prefers-color-scheme: dark) {
  :root {
    --azul-claro: #1b2a36;
    --texto: #eef1f4;
    --gris: #98a2ab;
    --borde: #2c343b;
    --fondo: #14181b;
    --superficie: #1c2126;
  }
  .cal-vacio { background: #171b1e; }
  .aviso-error { background: #3a2c12; border-color: #6b4d18; color: #f0c37a; }
  .aviso-error a { color: #f0c37a; }
  .aviso-ok { background: #12301e; border-color: #1e7e42; color: #7fe3ac; }
}

/* --- Exámenes --------------------------------------------------------- */
:root { --examen: #c0392b; --examen-claro: #fdecea; }
@media (prefers-color-scheme: dark) {
  :root { --examen: #ff7b6e; --examen-claro: #3a1616; }
}

/* Dia de examen en la rejilla del Calendario: reborde por dentro (con
   box-shadow inset, para que conviva con el borde azul del dia
   seleccionado y el triangulo de ampliacion sin taparse). */
.cal-dia.cal-examen { box-shadow: inset 0 0 0 2px var(--cal-examen, var(--examen)); }
/* Dias sin cole: reborde de color (personalizable, ver Configuracion). Si
   ademas es dia de examen, el rojo queda por fuera y el de sin cole dentro. */
.cal-dia.cal-finde { box-shadow: inset 0 0 0 2px var(--cal-finde); }
.cal-dia.cal-festivo { box-shadow: inset 0 0 0 2px var(--cal-festivo); }
.cal-dia.cal-examen.cal-finde { box-shadow: inset 0 0 0 2px var(--cal-examen, var(--examen)), inset 0 0 0 4px var(--cal-finde); }
.cal-dia.cal-examen.cal-festivo { box-shadow: inset 0 0 0 2px var(--cal-examen, var(--examen)), inset 0 0 0 4px var(--cal-festivo); }
.cal-leyenda-finde, .cal-leyenda-festivo {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--superficie);
  flex: none;
}
.cal-leyenda-finde { box-shadow: inset 0 0 0 2px var(--cal-finde, #2ecc71); }
.cal-leyenda-festivo { box-shadow: inset 0 0 0 2px var(--cal-festivo, #9b59b6); }
.cal-leyenda {
  font-size: 0.8rem;
  color: var(--gris);
  margin: -8px 0 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cal-leyenda a { color: var(--azul); }
.cal-leyenda-examen {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--cal-examen, var(--examen));
  background: var(--superficie);
}
.badge-examen {
  background: var(--examen-claro);
  color: var(--examen);
  text-decoration: none;
}

.examen-fila {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.examen-info { flex: 1; min-width: 0; }
.examen-info h2 { font-size: 1.05rem; margin: 0 0 4px; }
.examen-fecha {
  margin: 0;
  color: var(--gris);
  font-size: 0.88rem;
}
.examen-nota {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.examen-nota span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gris);
}
.input-nota {
  width: 68px;
  height: 58px;
  padding: 0;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1.5px dashed var(--borde);
  border-radius: 12px;
  background: var(--fondo);
  color: var(--texto);
  transition: box-shadow 0.2s;
}
.input-nota:not(:placeholder-shown) {
  border-style: solid;
  border-color: var(--azul);
  background: var(--azul-claro);
  color: var(--azul);
}
.input-nota:focus { outline: none; border-style: solid; border-color: var(--azul); }
.input-nota-guardada { box-shadow: 0 0 0 3px rgba(30, 126, 66, 0.35); }
.input-nota-error { border-color: var(--examen) !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.25); }

.examen-fotos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.examen-foto { position: relative; width: 64px; height: 64px; }
.examen-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--borde);
}
.examen-foto-borrar {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 2px solid var(--superficie);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.examen-foto-anadir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 0 14px;
  border: 1.5px dashed var(--azul);
  border-radius: 8px;
  color: var(--azul);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.examen-estado { margin: 8px 0 0; font-size: 0.85rem; color: var(--gris); }
.examen-acciones { display: flex; justify-content: flex-end; margin-top: 8px; }
.boton-texto {
  background: none;
  border: none;
  padding: 4px 0;
  color: var(--gris);
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
}
.badge-manual { background: var(--fondo); color: var(--gris); border: 1px solid var(--borde); }

.examen-anadir summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--azul);
}
.form-examen-manual {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.form-examen-manual label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gris);
}
.form-examen-manual input,
.form-examen-manual select {
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--texto);
  font-size: 16px;
}
.form-examen-manual .boton-primario { margin-top: 4px; }
.examen-ocultos { margin: 4px 0 20px; font-size: 0.9rem; color: var(--gris); }
.examen-ocultos summary { cursor: pointer; }
.examen-ocultos ul { list-style: none; padding: 0; margin: 8px 0 0; }
.examen-ocultos li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--borde);
}

/* --- Medias ----------------------------------------------------------- */
.medias-cursos { display: flex; gap: 14px; margin: -4px 0 12px; font-size: 0.85rem; }
.medias-cursos a { color: var(--gris); text-decoration: none; }
.medias-cursos .activo { color: var(--azul); font-weight: 700; }
.medias-resumen { text-align: center; }
.medias-cifra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 10px;
}
.medias-cifra-valor {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.medias-cifra-etiqueta { font-size: 0.85rem; color: var(--gris); }
.medias-nota-pie { margin: 6px 0 0; font-size: 0.8rem; color: var(--gris); }
.tabla-trimestres {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 8px;
  font-variant-numeric: tabular-nums;
}
.tabla-trimestres th {
  padding: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gris);
}
.tabla-trimestres td {
  padding: 6px 4px;
  text-align: center;
  font-size: 1.05rem;
  border-top: 1px solid var(--borde);
}

.barras-media { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.barra-media-cabecera {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  font-size: 0.88rem;
}
.barra-media-cabecera strong { font-variant-numeric: tabular-nums; }
.barra-media-pista {
  position: relative;
  height: 12px;
  border-radius: 4px;
  background: var(--fondo);
  border: 1px solid var(--borde);
}
/* Extremo de dato redondeado, el de la base recto (pegado al 0). */
.barra-media-relleno { height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; }
.barra-media-cinco {
  position: absolute;
  left: 50%;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  background: var(--texto);
  opacity: 0.35;
}

.medias-asignatura .tabla-trimestres { margin-top: 0; }
.grafico-evolucion { display: block; width: 100%; height: auto; margin: 8px 0 2px; overflow: visible; }
.evolucion-eje { stroke: var(--borde); stroke-width: 1; }
.evolucion-cinco { stroke: var(--gris); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.6; }
.evolucion-eje-texto { font-size: 9px; fill: var(--gris); }
.evolucion-linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.evolucion-zona { fill: transparent; }
.evolucion-marca { stroke: var(--superficie); stroke-width: 2; }
.evolucion-valor {
  font-size: 11px;
  font-weight: 700;
  fill: var(--texto);
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}
.lista-notas-asignatura { list-style: none; padding: 0; margin: 6px 0 0; font-size: 0.88rem; }
.lista-notas-asignatura li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px dashed var(--borde);
}
.lista-notas-asignatura small { color: var(--gris); }
.lista-notas-asignatura strong { font-variant-numeric: tabular-nums; }

/* --- Modales de enlazar cuentas de pareja: botones uno debajo de otro --- */
.modal-botones-columna { flex-direction: column; align-items: stretch; }
.modal-botones-columna button { width: 100%; }
.modal-botones-columna .boton-texto { padding: 8px 0 0; text-align: center; }

/* --- Historial por cursos --------------------------------------------- */
.selector-cursos { flex-wrap: wrap; row-gap: 6px; }
.cal-mes { display: inline-flex; align-items: center; }
.cal-mes-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: var(--texto);
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-align-last: center;
  padding: 6px 18px 6px 6px;
  max-width: 100%;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b6b6b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
}
.tabla-cursos-envoltorio { overflow-x: auto; margin-top: 14px; }
.tabla-cursos { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 0.88rem; }
.tabla-cursos th, .tabla-cursos td { padding: 7px 8px; border-top: 1px solid var(--borde); text-align: center; white-space: nowrap; }
.tabla-cursos thead th { font-size: 0.72rem; color: var(--gris); border-top: none; }
.tabla-cursos tbody th { text-align: left; font-weight: 600; white-space: normal; min-width: 130px; }
.punto-color-fijo { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }

/* --- Colores personalizables (Configuración) y extraescolares (Gastos) --- */
.colores-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.color-fila { display: flex; align-items: center; gap: 10px; }
.color-nombre { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 0.92rem; }
.color-muestra { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.input-color { width: 44px; height: 32px; padding: 0; border: 1px solid var(--borde); border-radius: 8px; background: none; cursor: pointer; }
.boton-restablecer-color { font-size: 0.78rem; background: none; border: none; color: var(--azul); cursor: pointer; padding: 4px; }
.boton-restablecer-color.oculto { display: none; }
.gasto-actividades { border: 1px solid var(--borde); border-radius: 10px; padding: 8px 12px; margin: 8px 0; }
.gasto-actividades legend { font-size: 0.85rem; color: var(--gris); padding: 0 6px; }
.gasto-actividades label { display: flex; align-items: center; gap: 8px; text-transform: none; font-size: 0.9rem; font-weight: 400; letter-spacing: 0; color: var(--texto); text-align: left; }
.gasto-actividades input[type=checkbox] { width: auto; flex: none; }
.cal-leyenda { flex-wrap: wrap; }

/* --- Pantalla de asignatura: la etiqueta de asignatura es un enlace --- */
a.badge-categoria { text-decoration: none; color: #fff; }
.form-buscar-asignatura { display: flex; gap: 8px; margin: 8px 0 12px; }
.form-buscar-asignatura input[type=search] { flex: 1; min-width: 0; }