/*
 * Orden del Día para iPhone. Misma familia de temas y de relieve que la app del PC, pensada para el dedo: márgenes seguros (muesca y
 * barra de inicio), objetivos táctiles de al menos 44 px, fuentes de 16 px o más en los campos (así Safari no hace zoom al tocarlos)
 * y estados «pulsado» que se notan aunque no haya puntero. Todo en clases: la página no usa estilos en línea.
 *
 * Los COLORES y los TOKENS de relieve de cada tema (diez temas, tres niveles de efectos) los define /aspecto.css, que se carga justo
 * después de este archivo y gana. Lo de abajo son valores de RESPALDO, claros y sencillos, por si aspecto.css o aspecto.js no llegaran
 * a cargar (así la app sigue viéndose bien). Los colores de prioridad (--p-*) sí se quedan aquí: no cambian con ningún tema, son la
 * identidad de las notas.
 *
 * Cómo se logra el relieve (sin imágenes, sin estilos en línea y sin desenfoques costosos en Safari):
 *   - Cada pieza elevada lleva dos cosas: la LUZ de arriba (--luz, un reborde claro por dentro) y sombras en capas teñidas del tono
 *     del tema (--relieve-1/2/3). Lo hundido (campos, huecos, interruptores) usa --hundido por dentro.
 *   - Los degradados vienen de los tokens (--superficie-grad, --acento-grad, --menu-fondo, --fondo-imagen): arriba un poco más de luz.
 *   - Lo que este archivo inventa para sí mismo (brillo del papel de las notas, sombras de botones y de hojas) se multiplica por --e
 *     (1 completos, .5 suaves, 0 ninguno): con «Sin efectos» desaparece y la app queda plana, como antes.
 *   - Nada anima sombras de piezas grandes: solo se anima transform y opacity, y con «reducir movimiento» no se anima nada.
 */

:root {
  color-scheme: light dark;
  --fondo: #f4f5f7;
  --fondo-2: #eef0f4;
  --fondo-imagen: none;
  --superficie: #ffffff;
  --superficie-2: #eef0f4;
  --superficie-alta: #ffffff;
  --superficie-hundida: #eef0f4;
  --superficie-grad: linear-gradient(#ffffff, #ffffff);
  --texto: #1f2430;
  --texto-suave: #667085;
  --borde: #dfe3ea;
  --borde-fuerte: #c9cfdb;
  --acento: #2563eb;
  --acento-2: #2563eb;
  --acento-fuerte: #1d4ed8;
  --acento-texto: #ffffff;
  --acento-grad: linear-gradient(#2563eb, #2563eb);
  --acento-rgb: 37 99 235;
  --peligro: #d92d20;
  --ok: #12803c;
  --aviso: #b54708;
  --interruptor-on: #34c759;
  /*
   * Colores FIJOS con nombre (no cambian con el tema a propósito; antes estaban repetidos suelto en varias reglas).
   * Van sobre piezas que ya son de un solo color en todos los temas y llevan su marca blanca encima, así que deben ser oscuros:
   * los --ok y --peligro de los temas oscuros son claros (para leerse SOBRE la superficie) y la marca blanca no se vería encima.
   *   - casilla marcada: chapa verde (--check-on-2 arriba, --check-on-3 abajo y de borde; la marca ✓ blanca llega a 3:1 en todo el degradado);
   *   - «Vencido» y el error de las hojas: rojo oscuro con texto blanco (6,6:1);
   *   - perilla del interruptor: blanca, como la de iOS, con su sombra.
   */
  --check-on: #1b9a4b;
  --check-on-2: #1fa653;
  --check-on-3: #138a3f;
  --check-on-rgb: 19 138 63; /* el mismo verde de --check-on-3, en canales, para el resplandor de la chapa */
  --vencida: #b42318;
  --vencida-2: #c8321f;
  --perilla: #ffffff;
  --perilla-2: #ececec;
  /* Colores de prioridad: idénticos a Comun.COLOR_PRIORIDAD (app.js los vuelve a poner desde Comun al arrancar). */
  --p-baja: #c9f0a9;
  --p-normal: #fff2a3;
  --p-alta: #ffc78f;
  --p-urgente: #ff9f9f;
  --p-baja-fuerte: #6dbb3a;
  --p-normal-fuerte: #e6c200;
  --p-alta-fuerte: #f08a24;
  --p-urgente-fuerte: #e5484d;
  --sombra-rgb: 16 24 40;
  --sombra: 0 1px 2px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .1);
  --luz: inset 0 0 0 0 transparent;
  --relieve-1: 0 1px 2px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .1);
  --relieve-2: 0 4px 12px rgba(16, 24, 40, .14);
  --relieve-3: 0 12px 32px rgba(16, 24, 40, .24);
  --hundido: inset 0 1px 2px rgba(16, 24, 40, .08);
  --halo: 0 0 0 3px rgba(37, 99, 235, .18);
  --menu-fondo: linear-gradient(#ffffff, #ffffff);
  --menu-borde: #dfe3ea;
  --menu-activo: linear-gradient(#2563eb, #2563eb);
  --radio-1: 6px;
  --radio-2: 10px;
  --radio-3: 16px;
  --fuente-titulo: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --transicion: 0s;
  --alto-pestanas: 60px;

  /* Fuerza de los efectos (aspecto.css los vuelve a poner por nivel): 1 completos, .5 suaves, 0 ninguno. */
  --e: 1;
  --g: 100%;

  /*
   * Piezas propias de la app del iPhone, derivadas de los tokens del tema (por eso viven en :root, el mismo elemento donde
   * aspecto.js pone el tema: se recalculan solas al cambiar de tema o de nivel de efectos).
   * Papel de las notas adhesivas: brillo en diagonal arriba y un poco de sombra abajo; el color sigue siendo el de la prioridad.
   */
  --brillo-nota: linear-gradient(160deg, rgb(255 255 255 / calc(.42 * var(--e))) 0%, rgb(255 255 255 / 0) 46%, rgb(0 0 0 / calc(.07 * var(--e))) 100%);
  --luz-nota: inset 0 1px 0 rgb(255 255 255 / calc(.55 * var(--e))), inset 0 -14px 16px -14px rgb(0 0 0 / calc(.16 * var(--e)));
  --sombra-nota: var(--luz-nota), var(--relieve-1);
  --sombra-nota-2: var(--luz-nota), var(--relieve-2);
  /* Botón primario: luz, canto inferior, sombra corta y un resplandor del color del acento. */
  --sombra-boton: var(--luz), inset 0 -1px 0 rgb(0 0 0 / calc(.2 * var(--e))), 0 1px 2px rgb(var(--sombra-rgb) / calc(.28 * var(--e))), 0 6px 12px -4px rgb(var(--acento-rgb) / calc(.5 * var(--e)));
  /* Hoja que sube desde abajo: su sombra cae hacia ARRIBA (la de --relieve-3 cae hacia abajo y quedaría fuera de la pantalla). */
  --relieve-hoja: 0 -1px 0 rgb(var(--sombra-rgb) / calc(.16 * var(--e))), 0 -16px 36px -8px rgb(var(--sombra-rgb) / calc(.42 * var(--e)));
}

/* Respaldo oscuro: solo si aspecto.js no puso ningún tema (con tema puesto mandan los bloques de aspecto.css). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --fondo: #14161b;
    --fondo-2: #14161b;
    --superficie: #1f232b;
    --superficie-2: #2a2f39;
    --superficie-alta: #2a2f39;
    --superficie-hundida: #111318;
    --superficie-grad: linear-gradient(#1f232b, #1f232b);
    --texto: #e8eaf0;
    --texto-suave: #98a2b3;
    --borde: #343a46;
    --borde-fuerte: #454c5b;
    --acento: #5b8def;
    --acento-2: #5b8def;
    --acento-fuerte: #7aa2f7;
    --acento-texto: #0b1020;
    --acento-grad: linear-gradient(#5b8def, #5b8def);
    --acento-rgb: 91 141 239;
    --peligro: #f97066;
    --ok: #47cd89;
    --aviso: #fdb022;
    --sombra-rgb: 0 0 0;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4);
    --relieve-1: 0 1px 2px rgba(0, 0, 0, .4);
    --relieve-2: 0 4px 12px rgba(0, 0, 0, .45);
    --relieve-3: 0 12px 32px rgba(0, 0, 0, .55);
    --hundido: inset 0 1px 2px rgba(0, 0, 0, .4);
    --halo: 0 0 0 3px rgba(91, 141, 239, .3);
    --menu-fondo: linear-gradient(#1f232b, #1f232b);
    --menu-borde: #343a46;
    --menu-activo: linear-gradient(#5b8def, #5b8def);
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  overscroll-behavior: none;
  font: 17px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  color: var(--texto);
  /* La página: color liso y, encima, el degradado de fondo del tema (aspecto.css lo repite con :where; aquí va por si no cargara). */
  background-color: var(--fondo);
  background-image: var(--fondo-imagen);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button, input, select, textarea { font: inherit; color: inherit; }

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

h1, h2, h3, p { margin: 0; }
p + p { margin-top: 8px; }

/* Colores de prioridad: cada elemento con .p-xxx recibe --color-p (suave) y --color-pf (fuerte). */
.p-baja { --color-p: var(--p-baja); --color-pf: var(--p-baja-fuerte); }
.p-normal { --color-p: var(--p-normal); --color-pf: var(--p-normal-fuerte); }
.p-alta { --color-p: var(--p-alta); --color-pf: var(--p-alta-fuerte); }
.p-urgente { --color-p: var(--p-urgente); --color-pf: var(--p-urgente-fuerte); }

/* ------------------------------ armazón ------------------------------ */

#raiz {
  display: flex;
  flex-direction: column;
  height: 100%;
  height: 100dvh; /* el alto realmente visible en el iPhone (con la barra de Safari a la vista o no) */
}

.cargando { padding: 40vh 16px 0; text-align: center; color: var(--texto-suave); }

/*
 * Barra superior: título grande con la letra del tema y el estado de la sincronización. Va por ENCIMA del contenido (z-index) para que,
 * al desplazar la lista, se vea una sombra suave bajo ella (la clase .con-sombra la pone app.js cuando el contenido ya se movió).
 * La sombra es un degradado en un pseudoelemento: solo cambia su opacidad (barato), nunca se anima una sombra grande.
 */
.barra-superior {
  position: relative;
  z-index: 3;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(env(safe-area-inset-top) + 8px) calc(16px + env(safe-area-inset-right)) 4px calc(16px + env(safe-area-inset-left));
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion);
}
.barra-superior::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 18px;
  background: linear-gradient(rgb(var(--sombra-rgb) / calc(.2 * var(--e))), rgb(var(--sombra-rgb) / 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicion);
}
.con-sombra .barra-superior { border-bottom-color: var(--borde); }
.con-sombra .barra-superior::after { opacity: 1; }

.titulo {
  font-family: var(--fuente-titulo);
  font-size: 32px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--texto);
}

.chip-sync { min-height: 44px; display: flex; align-items: center; }
.chip-texto {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  background-color: var(--superficie);
  background-image: var(--superficie-grad);
  color: var(--texto-suave);
  box-shadow: var(--luz), var(--relieve-1);
}
.chip-texto.ok { color: var(--ok); }
.chip-texto.trabajando { color: var(--acento); }
.chip-texto.error { color: var(--peligro); }
/* Un puntito del color del estado (con un halo suave) para los estados que no llevan marca en el texto. */
.chip-texto.trabajando::before, .chip-texto.error::before, .chip-texto.neutro::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 calc(7px * var(--e)) currentColor;
}
.chip-sync:active .chip-texto { box-shadow: var(--hundido); }

.contenido {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 8px calc(16px + env(safe-area-inset-right)) 108px calc(16px + env(safe-area-inset-left));
}

.vista { max-width: 720px; margin: 0 auto; }

/*
 * Barra de pestañas: elevada sobre el contenido (su sombra cae hacia arriba), con la luz de arriba y el fondo de menú del tema.
 * Seis pestañas: a 375 px caben a unos 62 px cada una, así que el texto es compacto y nunca se sale de su casilla.
 * La pestaña activa lleva una pastilla con el degradado del acento (+ luz y resplandor) detrás del ícono, y su nombre en el color del acento.
 */
.pestanas {
  position: relative;
  z-index: 4;
  flex: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 4px env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background-color: var(--superficie);
  background-image: var(--menu-fondo);
  border-top: 1px solid var(--menu-borde);
  box-shadow: var(--luz), 0 -10px 24px -12px rgb(var(--sombra-rgb) / calc(.38 * var(--e)));
}

.pestana {
  min-height: var(--alto-pestanas);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px 1px 2px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--texto-suave);
}
.pestana:focus-visible { outline-offset: -3px; border-radius: var(--radio-2); }
.pestana-pastilla {
  display: grid;
  place-items: center;
  width: 54px;
  max-width: calc(100% - 2px); /* en pantallas muy angostas (320 px) la pastilla se encoge en vez de pisar a la vecina */
  height: 30px;
  border-radius: 15px;
  transition: transform var(--transicion);
}
/*
 * Ícono de una pestaña SIN elegir: en gris (como la barra de iOS) pero a opacidad completa y con un contorno finito del tono de la sombra
 * del tema. Antes llevaba además opacity .72, y los emojis que ya son claros (engranaje, libro, calendario) casi desaparecían sobre las
 * barras claras (2,2:1 medido; el contrato pide 3:1 en iconos). El contorno hace lo mismo que el del ícono activo, así se ven los dos igual de nítidos.
 */
.pestana-icono { font-size: 20px; line-height: 1; filter: grayscale(1) drop-shadow(0 0 .6px rgb(var(--sombra-rgb))) drop-shadow(0 0 .6px rgb(var(--sombra-rgb) / .7)); }
.pestana-texto { max-width: 100%; overflow: hidden; line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; }
/* Desde 360 px de ancho (todos los iPhone actuales) los nombres suben a 11 px, el tamaño de la barra de iOS; en un aparato más angosto, «Calendario» se cortaría con «…». */
@media (min-width: 360px) {
  .pestana { font-size: 11px; }
}
.pestana.activa { color: var(--acento); font-weight: 700; }
/*
 * La etiqueta de la pestaña activa (11 px) va en --acento-fuerte: es la variante del acento que más contrasta con la barra (más oscura en los
 * temas claros, más clara en los oscuros) y así, aunque quede un resto del resplandor de la pastilla detrás de las primeras letras, sigue
 * pasando de 4,5:1 en el peor píxel. Con el acento «normal» el peor píxel bajaba a 3,4–4,4:1 en 8 de los 9 temas.
 */
.pestana.activa .pestana-texto { color: var(--acento-fuerte); }
.pestana.activa .pestana-pastilla {
  background-color: var(--acento);
  background-image: var(--acento-grad);
  /* El resplandor corto: su borde de abajo termina pegado a la pastilla (-4 px de dispersión) y no llega a las letras de la etiqueta. */
  box-shadow: var(--luz), inset 0 -1px 0 rgb(0 0 0 / calc(.18 * var(--e))), 0 3px 8px -4px rgb(var(--acento-rgb) / calc(.6 * var(--e)));
}
/* El ícono activo va a todo color y con un contorno finito oscuro: así se distingue aunque sea pálido (el engranaje, el carrito) sobre la pastilla del acento, clara u oscura según el tema. */
.pestana.activa .pestana-icono { filter: drop-shadow(0 0 .6px rgb(0 0 0 / .75)) drop-shadow(0 1px 1px rgb(0 0 0 / .3)); opacity: 1; }
.pestana:active .pestana-pastilla { transform: scale(.92); }

.banner {
  margin: 8px 0;
  padding: 10px 14px;
  border: 1px solid var(--borde);
  border-left: 5px solid var(--aviso);
  border-radius: var(--radio-2);
  font-size: 15px;
  background-color: var(--superficie);
  background-image: var(--superficie-grad);
  color: var(--texto);
  box-shadow: var(--luz), var(--relieve-1);
}
button.banner-toque:not([hidden]) {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
button.banner-toque:active { box-shadow: var(--hundido); }

/* ------------------------------ Cuaderno ------------------------------ */

/*
 * Con el Cuaderno a la vista no hay título ni desplazamiento: la libreta ocupa todo el alto que queda. De la barra superior solo
 * se queda una tira bajita con el estado de la sincronización (se puede tocar para sincronizar), que además cubre la zona segura de arriba.
 * La tira es una barra de menú del tema que descansa sobre la mesa del Cuaderno (con su luz y su sombra).
 */
.modo-cuaderno .titulo { display: none; }
.modo-cuaderno .barra-superior {
  justify-content: flex-end;
  padding-top: calc(env(safe-area-inset-top) + 2px);
  padding-bottom: 0;
  border-bottom-color: var(--menu-borde);
  background-color: var(--superficie);
  background-image: var(--menu-fondo);
  box-shadow: var(--luz), 0 6px 14px -8px rgb(var(--sombra-rgb) / calc(.4 * var(--e)));
}
.modo-cuaderno .barra-superior::after { display: none; }
.modo-cuaderno .chip-sync { min-height: 44px; } /* el dedo necesita 44 px de alto, aunque la píldora que se ve sea más baja */
.modo-cuaderno .contenido {
  display: flex;
  flex-direction: column;
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  overflow: hidden;
  overscroll-behavior: none;
  /*
   * El relleno de los lados (la muesca, con el teléfono de lado) deja una franja que no es de la libreta. Con el color de borde de la
   * mesa elegida (--cu-mesa-2, que se define en <html> y la lee cualquier descendiente) la franja se funde con la mesa en vez de verse
   * como un marco liso del color de la página.
   */
  background-color: var(--cu-mesa-2, var(--fondo));
}
.modo-cuaderno .banner { flex: none; margin: 6px 8px; }
.vista.vista-cuaderno { flex: 1; min-height: 0; max-width: none; margin: 0; }
/* Con el teclado abierto se esconden las pestañas: la hoja gana ese espacio y nada queda pegado al teclado. */
.teclado-abierto .pestanas { display: none; }
/* El mensaje del Cuaderno va directo sobre la mesa: sus colores son los de texto sobre la mesa elegida (≥ 4,5:1), no los del tema. */
.cuaderno-mensaje { padding: 48px 24px; text-align: center; color: var(--cu-mesa-texto-suave, var(--texto-suave)); }
.cuaderno-mensaje .vacio-titulo { color: var(--cu-mesa-texto, var(--texto)); }

/*
 * Teléfono en apaisado (poca altura): con la tira del estado arriba y las pestañas abajo, de los 390 px de alto la hoja se quedaba
 * con unos 130. Las pestañas pasan a una columna a la IZQUIERDA que ocupa todo el alto, y el contenido toma el resto del ancho y del
 * alto. Las pestañas siguen a un toque. La columna respeta la muesca y la barra de inicio (los márgenes seguros).
 *   - Cuaderno: encima de la columna va el estado de la sincronización y la libreta ocupa todo el alto.
 *   - Notas, Calendario, Compras, Gastos y Ajustes (reglas «#raiz:not(.modo-cuaderno)», más abajo): antes la barra de pestañas, el
 *     título y, en Notas, el buscador y los filtros dejaban unos 120 px para las tarjetas. Ahora la columna llega hasta arriba y el
 *     título, más bajito y con el estado de la sincronización, queda sobre el contenido.
 */
@media (orientation: landscape) and (max-height: 500px) {
  #raiz.modo-cuaderno {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .modo-cuaderno .barra-superior {
    grid-column: 1;
    grid-row: 1;
    justify-content: center;
    padding: 4px 6px 0 calc(6px + env(safe-area-inset-left));
    background-color: var(--superficie);
    background-image: var(--menu-fondo);
    border-right: 1px solid var(--menu-borde);
    box-shadow: var(--luz);
  }
  .modo-cuaderno .chip-texto { max-width: 84px; padding: 3px 6px; font-size: 11px; font-weight: 600; line-height: 1.15; text-align: center; white-space: normal; }
  /*
   * De lado, a la derecha queda la franja de la muesca (el relleno de arriba). Además del color de la mesa se le pone su misma textura: la
   * portada es una mesa sin barras y así la mesa llega hasta el borde de la pantalla sin costura. Solo de lado: en vertical no hay franja y
   * pintar la textura debajo de la libreta sería trabajo de más para el teléfono.
   */
  .modo-cuaderno .contenido {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: 0 env(safe-area-inset-right) 0 0;
    background-image: var(--cu-mesa-imagen, none);
    background-size: var(--cu-mesa-tamano, auto);
  }
  .modo-cuaderno .pestanas {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(44px, 1fr);
    padding: 0 0 env(safe-area-inset-bottom) env(safe-area-inset-left);
    overflow-y: auto;
    border-top: 0;
    border-right: 1px solid var(--menu-borde);
    box-shadow: var(--luz), 10px 0 22px -12px rgb(var(--sombra-rgb) / calc(.38 * var(--e)));
  }
  .modo-cuaderno .pestana { min-height: 44px; }
  .modo-cuaderno .pestana-pastilla { width: 44px; height: 26px; }
  /* con el teclado abierto no queda sitio ni para la columna: solo la hoja (respetando la muesca) */
  .modo-cuaderno.teclado-abierto .barra-superior { display: none; }
  .modo-cuaderno.teclado-abierto .contenido { padding-left: env(safe-area-inset-left); }

  /* Notas, Calendario, Compras, Gastos y Ajustes: columna de pestañas a todo el alto (con ancho para «Calendario») y, a su derecha, título y contenido. */
  #raiz:not(.modo-cuaderno) {
    display: grid;
    grid-template-columns: calc(78px + env(safe-area-inset-left)) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  #raiz:not(.modo-cuaderno) .pestanas {
    grid-column: 1;
    grid-row: 1 / span 2;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(44px, 1fr);
    padding: 4px 0 env(safe-area-inset-bottom) env(safe-area-inset-left);
    overflow-y: auto;
    border-top: 0;
    border-right: 1px solid var(--menu-borde);
    box-shadow: var(--luz), 10px 0 22px -12px rgb(var(--sombra-rgb) / calc(.38 * var(--e)));
  }
  #raiz:not(.modo-cuaderno) .pestana { min-height: 44px; }
  #raiz:not(.modo-cuaderno) .pestana-pastilla { width: 44px; height: 26px; }
  #raiz:not(.modo-cuaderno) .barra-superior {
    grid-column: 2;
    grid-row: 1;
    padding: calc(env(safe-area-inset-top) + 2px) calc(16px + env(safe-area-inset-right)) 0 16px; /* el margen de la muesca ya lo lleva la columna de pestañas */
  }
  #raiz:not(.modo-cuaderno) .titulo { font-size: 26px; }
  #raiz:not(.modo-cuaderno) .contenido {
    grid-column: 2;
    grid-row: 2;
    /* abajo cabe el botón flotante (＋) y la barra de inicio: ya no hay barra de pestañas debajo */
    padding: 8px calc(16px + env(safe-area-inset-right)) calc(84px + env(safe-area-inset-bottom)) 16px;
  }
  /* (los filtros y el botón flotante ajustan su posición junto a sus reglas, más abajo: allí van después de las reglas base) */
}

/*
 * iPhone chico y de pie (alto menor de 640 px, como el SE de primera generación: 320×568): el selector de aspecto del Cuaderno
 * (/aspecto.css) abre su hoja al 56 % del alto y la cabecera ocupaba dos renglones, así que el cuerpo con las opciones quedaba en unos
 * 175 px: una sola fila de tapas. Aquí se esconde el subtítulo (el título y «Listo» bastan) y la hoja sube hasta el 72 %.
 * Va con tres clases para ganarle a las reglas de aspecto.css (que carga después), sin tocar ese archivo.
 */
@media (orientation: portrait) and (max-height: 640px) {
  .modo-cuaderno .cu-iphone .as-cu-dialogo { max-height: 72%; }
  .modo-cuaderno .cu-iphone .as-cu-sub { display: none; }
}

/* El círculo de la agenda del día que se abre desde la hoja lo pinta la interfaz compartida (28 px): en el iPhone mide 44 px, como todo lo que se toca. */
.cu-iphone .cu-panel-casilla { width: 44px; height: 44px; font-size: 22px; }

/* ------------------------------ avisos (toasts) ------------------------------ */

.avisos {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(env(safe-area-inset-top) + 8px);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  pointer-events: none;
}
/*
 * Aviso flotante: una tarjeta elevada con una cinta de color a la izquierda (azul normal, verde bien, rojo error). Los de «bien» y «error»
 * llevan además una marca dentro de una chapita (✓ o !), así no dependen solo del color. El texto de la marca es el de la superficie:
 * sobre el verde o el rojo del tema se lee en todos los temas (los estados cumplen 4,5:1 sobre las superficies).
 */
.aviso {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 480px;
  padding: 12px 16px;
  border: 1px solid var(--borde);
  border-left: 5px solid var(--acento);
  border-radius: var(--radio-2);
  font-size: 15px;
  font-weight: 500;
  color: var(--texto);
  background-color: var(--superficie-alta);
  background-image: var(--superficie-grad);
  box-shadow: var(--luz), var(--relieve-3);
  animation: entrar .2s ease-out;
}
.aviso.ok { border-left-color: var(--ok); }
.aviso.error { border-left-color: var(--peligro); }
.aviso.ok::before, .aviso.error::before {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  color: var(--superficie);
}
.aviso.ok::before { content: "✓"; background-color: var(--ok); }
.aviso.error::before { content: "!"; background-color: var(--peligro); }

/* ------------------------------ controles ------------------------------ */

/* Botón primario: degradado del acento con luz, canto y resplandor; al tocarlo se hunde (escala .97 y sombra por dentro). */
.boton {
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radio-2);
  font-weight: 600;
  background-color: var(--acento);
  background-image: var(--acento-grad);
  color: var(--acento-texto);
  box-shadow: var(--sombra-boton);
  transition: transform var(--transicion);
}
.boton:active:not(:disabled) {
  transform: scale(.97);
  background-image: none;
  background-color: var(--acento-fuerte);
  box-shadow: var(--hundido);
}
.boton.secundario {
  border: 1px solid var(--borde-fuerte);
  background-color: var(--superficie);
  background-image: var(--superficie-grad);
  color: var(--texto);
  box-shadow: var(--luz), var(--relieve-1);
}
.boton.secundario:active:not(:disabled) { background-image: none; background-color: var(--superficie-2); box-shadow: var(--hundido); }
.boton.chico { padding: 0 14px; font-size: 15px; }
.boton.ancho { display: block; width: 100%; margin-top: 10px; }
.boton:disabled { opacity: .45; cursor: default; box-shadow: none; }

.boton-peligro {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 12px 0;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-2);
  background-color: var(--superficie);
  background-image: var(--superficie-grad);
  color: var(--peligro);
  font-weight: 600;
  box-shadow: var(--luz), var(--relieve-1);
  transition: transform var(--transicion);
}
.boton-peligro:active { transform: scale(.98); background-image: none; background-color: var(--superficie-2); box-shadow: var(--hundido); }

/* Campos: hundidos en la superficie (fondo más oscuro, sombra por dentro); al enfocarlos se encienden con el halo del acento. */
.campo-texto, .buscador, .campo-codigo {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  background-color: var(--superficie-hundida);
  color: var(--texto);
  font-size: 17px;
  box-shadow: var(--hundido);
  -webkit-appearance: none;
  appearance: none;
}
.campo-texto::placeholder, .buscador::placeholder, .campo-codigo::placeholder { color: var(--texto-suave); opacity: 1; }
.campo-texto:focus-visible, .buscador:focus-visible, .campo-codigo:focus-visible, .campo-fila:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 0;
  border-color: var(--acento);
  box-shadow: var(--hundido), var(--halo);
}
/*
 * El relleno de arriba y de abajo (10 px) pone el área del texto justo en el centro del campo, lejos de la sombra interior de los bordes
 * (--hundido): así lo que se mide como «fondo del marcador» es el fondo liso que hay detrás de las letras y no el borde sombreado.
 */
.buscador { padding: 10px 16px; border-radius: var(--radio-3); }
.campo-codigo {
  min-height: 60px;
  margin-top: 12px;
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: .3em;
  font-variant-numeric: tabular-nums;
}

.campo-fila {
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  background-color: var(--superficie-hundida);
  color: var(--texto);
  font-size: 17px;
  max-width: 62%;
  box-shadow: var(--hundido);
}

.mensaje-error {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-left: 5px solid var(--peligro);
  border-radius: var(--radio-2);
  font-size: 15px;
  color: var(--peligro);
  background-color: var(--superficie-2);
  box-shadow: var(--hundido);
}

.ayuda { margin-top: 6px; font-size: 14px; color: var(--texto-suave); }

/* Cuando no hay nada que mostrar: un hueco hundido con borde de rayitas, como un espacio esperando su contenido. */
.vacio {
  margin: 12px 0;
  padding: 36px 16px;
  border: 2px dashed var(--borde-fuerte);
  border-radius: var(--radio-3);
  text-align: center;
  color: var(--texto-suave);
  background-color: var(--superficie-hundida);
  box-shadow: var(--hundido);
}
.vacio .boton { margin-top: 16px; }
.vacio-titulo { font-family: var(--fuente-titulo); font-size: 20px; font-weight: 700; color: var(--texto); }

/*
 * Interruptor tipo iOS (es una casilla): canal hundido y perilla con relieve; encendido, el canal se tiñe con un degradado verde.
 * Apagado, el borde del canal es el texto suave del tema (igual que el aro de la casilla vacía): con --borde-fuerte solo llegaba a 1,5–2,7:1
 * y en los temas claros la perilla blanca se distinguía casi solo por su sombra; el contrato pide 3:1 para los controles.
 */
.interruptor {
  position: relative;
  flex: none;
  width: 51px;
  height: 31px;
  margin: 0;
  border: 1px solid var(--texto-suave);
  border-radius: 16px;
  background-color: var(--superficie-hundida);
  box-shadow: var(--hundido);
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--transicion);
}
.interruptor::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background-color: var(--perilla);
  background-image: linear-gradient(180deg, var(--perilla) 0%, var(--perilla-2) 100%);
  /* La primera sombra (1 px, pegada) se queda siempre: es el canto que separa la perilla blanca de su canal, también con «Sin efectos». La difusa baja con los efectos. */
  box-shadow: 0 1px 1px rgb(0 0 0 / .22), 0 3px 6px rgb(0 0 0 / calc(.28 * var(--e)));
  transition: transform var(--transicion);
}
.interruptor:checked {
  border-color: var(--interruptor-on);
  background-color: var(--interruptor-on);
  background-image: linear-gradient(180deg, rgb(255 255 255 / calc(.22 * var(--e))), rgb(255 255 255 / 0));
}
.interruptor:checked::after { transform: translateX(20px); }

/*
 * Casilla circular de 44 px (círculo de 26 px + marca). El texto del botón se oculta: la etiqueta va en aria-label.
 * Vacía es un hueco hundido; marcada se vuelve una chapa verde con luz, y la marca ✓ es blanca (así no depende solo del color).
 */
.check {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  font-size: 0;
}
.check::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 9px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--texto-suave);
  background: transparent;
  box-shadow: var(--hundido);
  transition: transform var(--transicion);
}
.check::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  opacity: 0;
}
.check:active::before { transform: scale(.9); }
/* Marcada (también sobre el papel de las notas: la regla de abajo solo cambia la casilla VACÍA, así esta es la única definición de la chapa verde). */
.check.marcado::before {
  background-color: var(--check-on);
  background-image: linear-gradient(180deg, var(--check-on-2) 0%, var(--check-on-3) 100%);
  border-color: var(--check-on-3);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(.4 * var(--e))), 0 2px 6px -1px rgb(var(--check-on-rgb) / calc(.55 * var(--e)));
}
.check.marcado::after { opacity: 1; }
/* Sobre el papel de color de las notas y de los recordatorios la casilla vacía lleva un fondo claro y un borde oscuro: se ve en cualquier prioridad. */
.tarjeta .check:not(.marcado)::before, .agenda-item .check:not(.marcado)::before { border-color: rgba(0, 0, 0, .5); background: rgba(255, 255, 255, .5); box-shadow: inset 0 1px 2px rgb(0 0 0 / calc(.2 * var(--e))); }

/* Filas agrupadas (formularios de las hojas y ajustes): una tarjeta elevada con las filas separadas por una línea fina. */
.grupo {
  margin: 12px 0;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio-3);
  background-color: var(--superficie);
  background-image: var(--superficie-grad);
  box-shadow: var(--luz), var(--relieve-1);
}
.grupo > * + * { border-top: 1px solid var(--borde); }
.grupo :focus-visible { outline-offset: -3px; } /* dentro del grupo el borde de foco no se recorta */
.fila-campo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 4px 14px;
}
.fila-etiqueta { font-size: 16px; }
/*
 * Campo con la etiqueta ARRIBA (¿En qué gastaste?, Monto, Nota): es un <label>, así que tocar la etiqueta o el campo enfoca el campo
 * (Dom.bloque). El relleno es corto porque el campo ya mide 44 px: todo el bloque, etiqueta incluida, es zona de toque.
 */
.campo-bloque { display: flex; flex-direction: column; gap: 4px; padding: 4px 14px 2px; }
.campo-bloque .fila-etiqueta { font-size: 13px; color: var(--texto-suave); }
/*
 * Los campos de texto de un grupo son líneas planas sobre la tarjeta (la tarjeta ya es el relieve): sin fondo ni hundido propios.
 * Llevan 8 px de aire a cada lado y un margen negativo igual, así el texto queda exactamente donde estaba pero el contorno del foco
 * (esquinas redondeadas del tema, halo y el fondo hundido) no pisa las letras. Antes era un rectángulo recto pegado al texto.
 * Miden 44 px de alto, como todo lo que se toca con el dedo.
 */
.grupo .campo-texto { width: calc(100% + 16px); min-height: 44px; margin: 0 -8px; padding: 4px 8px; border: 0; border-radius: var(--radio-1); background: transparent; box-shadow: none; }
.grupo .campo-texto:focus-visible { outline: 2px solid var(--acento); outline-offset: 0; background-color: var(--superficie-hundida); box-shadow: var(--hundido), var(--halo); }
/* En una fila con etiqueta a la izquierda («Nombre», «Precio») el aire de la izquierda es de 4 px, para que el contorno no se pegue a la etiqueta. */
.grupo .fila-campo .campo-texto { width: calc(100% + 12px); margin-left: -4px; padding-left: 4px; }

/* ------------------------------ notas ------------------------------ */

.barra-busqueda { padding: 4px 0 8px; }

/*
 * Filtros: píldoras elevadas; la elegida se enciende con el degradado del acento. La fila llega hasta los bordes de la pantalla (los márgenes
 * negativos deshacen el aire de la página y el relleno lo devuelve), así las píldoras se deslizan «por debajo» del borde en lugar de cortarse
 * a 16 px. El aire de arriba y de abajo es para que no se corte su sombra.
 */
.filtros {
  display: flex;
  gap: 8px;
  margin: 0 calc(-16px - env(safe-area-inset-right)) -4px calc(-16px - env(safe-area-inset-left));
  padding: 4px calc(16px + env(safe-area-inset-right)) 16px calc(16px + env(safe-area-inset-left));
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.filtros::-webkit-scrollbar { display: none; }
/* Teléfono de lado: a la izquierda del contenido está la columna de pestañas (ella ya respeta la muesca), así que los filtros llegan hasta su borde sin más. */
@media (orientation: landscape) and (max-height: 500px) {
  .filtros { margin-left: -16px; padding-left: 16px; }
}
.filtro {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  background-color: var(--superficie);
  background-image: var(--superficie-grad);
  color: var(--texto);
  box-shadow: var(--luz), var(--relieve-1);
  transition: transform var(--transicion);
}
.filtro:active { transform: scale(.96); }
.filtro[aria-pressed="true"] {
  border-color: var(--acento-fuerte);
  background-color: var(--acento);
  background-image: var(--acento-grad);
  color: var(--acento-texto);
  font-weight: 700;
  box-shadow: var(--luz), inset 0 -1px 0 rgb(0 0 0 / calc(.16 * var(--e))), 0 4px 10px -3px rgb(var(--acento-rgb) / calc(.55 * var(--e)));
}
/* El aro claro y la sombra del punto son adorno: con «Sin efectos» (--e: 0) queda el punto liso de color, como antes. */
.filtro-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--color-pf); box-shadow: 0 0 0 1.5px rgb(255 255 255 / calc(.85 * var(--e))), 0 1px 2px rgb(0 0 0 / calc(.3 * var(--e))); }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 12px; }
/*
 * Nota adhesiva: papel del color de su prioridad con brillo en diagonal, una cinta fuerte arriba, canto de luz y sombra en capas.
 * Al tocarla se aplasta un poco (escala .975). El color de texto es fijo: el papel es claro en todos los temas.
 */
.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 140px;
  padding: 10px 6px 0 12px;
  border-top: 5px solid var(--color-pf);
  border-radius: var(--radio-1) var(--radio-1) var(--radio-3) var(--radio-1);
  background-color: var(--color-p);
  background-image: var(--brillo-nota);
  color: #2a2a2a;
  box-shadow: var(--sombra-nota);
  transition: transform var(--transicion);
}
.tarjeta:active { transform: scale(.975); }
/*
 * Una nota hecha se ve apagada (colores casi grises) y con el texto tachado, pero SIN volverla transparente: con opacity .6 el texto oscuro
 * bajaba a 3,2–4,2:1 sobre el papel (el contrato pide 4,5:1). Es lo mismo que hace el PC (panel.css).
 */
.tarjeta.hecha { filter: saturate(.45); }
.tarjeta.hecha .tarjeta-texto { text-decoration: line-through; opacity: .85; }
.tarjeta-cuerpo { display: block; flex: 1; width: 100%; padding: 0 6px 0 0; text-align: left; color: inherit; }
.tarjeta-texto {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 16px;
  line-height: 1.35;
}
/*
 * El aviso («⏰ Hoy 11:15 p. m.») no se parte por la mitad de la hora: si no cabe junto al ✓, el ✓ baja a otra línea.
 * El margen de arriba (6 px) garantiza un hueco entre el texto de la nota y el aviso: sin él, cuando el ✓ baja a su propia línea
 * el aviso quedaba pegado a la última línea del texto.
 */
.tarjeta-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; min-height: 44px; margin-top: 6px; }
.tarjeta-etiquetas { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.tarjeta-pie .check { margin-left: auto; }
/* Radio de 12 px y no de 999: con una línea es una píldora igual que antes, y si el aviso se parte en dos sigue siendo una etiqueta y no una pastilla gorda. */
.etiqueta {
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  background: rgba(0, 0, 0, .1);
  color: #2a2a2a;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / calc(.1 * var(--e)));
}
.etiqueta .sin-corte { white-space: nowrap; } /* la hora y la marca de repetición van juntas: nunca «p.» en una línea y «m.» en otra */
.etiqueta.vencida { background: var(--vencida); color: #fff; box-shadow: var(--luz-nota); }

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

/* El mes completo vive en una tarjeta elevada: cabecera con las flechas, nombres de los días y la rejilla. */
.cal-tarjeta {
  margin: 4px 0 8px;
  padding: 6px 6px 10px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-3);
  background-color: var(--superficie);
  background-image: var(--superficie-grad);
  box-shadow: var(--luz), var(--relieve-2);
}
.cal-cab { display: flex; align-items: center; gap: 3px; }
/* El título del mes se encoge un poco en pantallas angostas para que «Septiembre de 2026» quepa en una línea entre las flechas y «Hoy». */
.cal-titulo { flex: 1; min-width: 0; font-family: var(--fuente-titulo); font-size: clamp(16px, 4.9vw, 20px); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; text-align: center; }
.cal-nav, .cal-hoy {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  background-color: var(--superficie);
  background-image: var(--superficie-grad);
  color: var(--acento);
  box-shadow: var(--luz), var(--relieve-1);
  transition: transform var(--transicion);
}
.cal-nav:active, .cal-hoy:active { transform: scale(.94); background-image: none; background-color: var(--superficie-2); box-shadow: var(--hundido); }
.cal-nav { font-size: 28px; line-height: 1; }
.cal-hoy { padding: 0 9px; font-size: 16px; font-weight: 700; }
.cal-nombres {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding: 10px 0 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--texto-suave);
}
.cal-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.dia {
  position: relative;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 0;
  border: 2px solid transparent;
  border-radius: var(--radio-2);
  color: var(--texto);
}
.dia:active { background-color: var(--superficie-2); }
.dia-num { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-size: 16px; font-weight: 500; }
/* Días de otros meses: más suaves pero legibles (texto suave, sin transparencia). */
.dia.otro .dia-num { color: var(--texto-suave); font-weight: 400; }
.dia.hoy .dia-num {
  background-color: var(--acento);
  background-image: var(--acento-grad);
  color: var(--acento-texto);
  font-weight: 700;
  box-shadow: var(--luz), 0 3px 8px -2px rgb(var(--acento-rgb) / calc(.6 * var(--e)));
}
/* El día elegido queda hundido en la tarjeta, con el borde del acento. */
.dia.sel { border-color: var(--acento); background-color: var(--superficie-hundida); box-shadow: var(--hundido); }
.puntos { display: flex; gap: 3px; height: 6px; }
.punto { width: 6px; height: 6px; border-radius: 50%; background: var(--color-pf); box-shadow: 0 0 0 1px rgb(255 255 255 / calc(.55 * var(--e))), 0 1px 2px rgb(0 0 0 / calc(.3 * var(--e))); }
.punto.hecho { opacity: .35; }

/* Cintita de marcapáginas en los días que ya tienen hoja en el Cuaderno. */
.dia.con-pagina::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 5px;
  width: 6px;
  height: 10px;
  border-radius: 1px 1px 3px 3px;
  background-color: var(--p-urgente-fuerte);
  background-image: linear-gradient(90deg, rgb(255 255 255 / calc(.35 * var(--e))), rgb(255 255 255 / 0));
  box-shadow: 0 1px 2px rgb(0 0 0 / calc(.3 * var(--e)));
  opacity: .9;
}
.boton.abrir-pagina-dia { margin-top: 0; margin-bottom: 10px; }
.dia-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0 10px; }
.dia-titulo { font-family: var(--fuente-titulo); font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.dia-cab .boton { flex: none; white-space: nowrap; } /* «＋ Nuevo» nunca se parte en dos líneas, aunque el título del día sea largo */
.vacio-dia { padding: 8px 0 16px; color: var(--texto-suave); }
.agenda { margin: 0; padding: 0; list-style: none; }
/* Recordatorio del día: la misma nota adhesiva de la pestaña Notas, en tira horizontal con la cinta de color a la izquierda. */
.agenda-item {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 10px;
  padding: 4px 4px 4px 2px;
  border-left: 5px solid var(--color-pf);
  border-radius: var(--radio-2);
  background-color: var(--color-p);
  background-image: var(--brillo-nota);
  color: #2a2a2a;
  box-shadow: var(--sombra-nota);
  transition: transform var(--transicion);
}
.agenda-item:active { transform: scale(.985); }
/* Igual que en la lista de Notas: apagada con la saturación y tachada, sin volver transparente el texto (que bajaba de 4,5:1). */
.agenda-item.hecha { filter: saturate(.45); }
.agenda-item.hecha .agenda-texto { text-decoration: line-through; opacity: .85; }
.agenda-cuerpo {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 4px;
  text-align: left;
  color: inherit;
}
.agenda-hora { font-size: 13px; opacity: .8; }
/* En uno hecho el papel ya va apagado por el filtro (más claro y gris): la hora sube a .9 para no bajar de 4,5:1 sobre el papel rojo de «Urgente». */
.agenda-item.hecha .agenda-hora { opacity: .9; }
.agenda-texto {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}
.mas { flex: none; width: 44px; height: 44px; border-radius: 50%; font-size: 24px; line-height: 1; color: #2a2a2a; }
.mas:active { background-color: rgb(0 0 0 / .1); }

/* ------------------------------ compras ------------------------------ */

.agregar { display: flex; gap: 8px; margin: 8px 0 14px; }
.agregar .campo-texto { flex: 1; min-width: 0; }
/* Las listas son tarjetas elevadas; al tocar una fila se pinta de la superficie más clara/oscura del tema (feedback del dedo). */
.lista-compras, .lista-gastos {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  border: 1px solid var(--borde);
  border-radius: var(--radio-3);
  background-color: var(--superficie);
  background-image: var(--superficie-grad);
  box-shadow: var(--luz), var(--relieve-2);
}
.compra, .gasto-item { display: flex; align-items: center; }
.compra + .compra, .gasto-item + .gasto-item { border-top: 1px solid var(--borde); }
.compra { padding-left: 4px; }
.compra-cuerpo {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px 0 4px;
  text-align: left;
}
.compra-cuerpo:active, .gasto-cuerpo:active { background-color: var(--superficie-2); }
.compra-texto { overflow-wrap: anywhere; }
.compra.hecho .compra-texto { text-decoration: line-through; color: var(--texto-suave); }
.compra-precio { white-space: nowrap; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
/* Pie de la lista: tarjeta con el avance (barra hundida con relleno del acento), el total y el botón de quitar comprados. */
.compras-pie {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-3);
  background-color: var(--superficie);
  background-image: var(--superficie-grad);
  box-shadow: var(--luz), var(--relieve-1);
}
.compras-cuenta { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.compras-pie .boton { width: 100%; }
.compras-cuenta p { margin: 0; }
.compras-resumen { color: var(--texto-suave); font-size: 15px; }
.compras-total { font-family: var(--fuente-titulo); font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.compras-progreso {
  display: block;
  width: 100%;
  height: 10px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--superficie-hundida);
  box-shadow: var(--hundido);
  -webkit-appearance: none;
  appearance: none;
}
.compras-progreso::-webkit-progress-bar { background: transparent; }
.compras-progreso::-webkit-progress-value {
  border-radius: 999px;
  background-color: var(--acento);
  background-image: var(--acento-grad);
  box-shadow: var(--luz);
}
.compras-progreso::-moz-progress-bar { border-radius: 999px; background-color: var(--acento); background-image: var(--acento-grad); }

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

.resumen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 16px; }
.dato {
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-3);
  background-color: var(--superficie);
  background-image: var(--superficie-grad);
  box-shadow: var(--luz), var(--relieve-2);
}
.dato-etiqueta { display: block; font-size: 13px; font-weight: 600; color: var(--texto-suave); }
.dato-valor { display: block; margin-top: 2px; font-family: var(--fuente-titulo); font-size: 21px; font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }
/* La casilla «Gastado hoy» (.dato-hoy) es la protagonista: lleva el degradado del acento, con el texto del acento. */
.resumen .dato-hoy {
  border-color: var(--acento-fuerte);
  background-color: var(--acento);
  background-image: var(--acento-grad);
  box-shadow: var(--luz), inset 0 -1px 0 rgb(0 0 0 / calc(.16 * var(--e))), 0 10px 18px -8px rgb(var(--acento-rgb) / calc(.6 * var(--e)));
}
.resumen .dato-hoy .dato-etiqueta, .resumen .dato-hoy .dato-valor { color: var(--acento-texto); }
.gasto-cuerpo {
  flex: 1;
  min-width: 0;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 8px 10px 14px;
  text-align: left;
}
.gasto-concepto { overflow-wrap: anywhere; }
.gasto-detalle { font-size: 13px; color: var(--texto-suave); }
.gasto-monto { padding-right: 14px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Estado de envío: una píldora con el color del estado sobre la superficie del tema (antes eran colores fijos claros, que desentonaban de noche). */
.estado {
  margin-top: 3px;
  padding: 1px 10px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background-color: var(--superficie-2);
  color: var(--texto);
}
.estado.enviado { color: var(--ok); }
.estado.pendiente { color: var(--aviso); }
.estado.error { color: var(--peligro); }

/* ------------------------------ ajustes ------------------------------ */

.tarjeta-ajustes {
  margin: 12px 0;
  padding: 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-3);
  background-color: var(--superficie);
  background-image: var(--superficie-grad);
  box-shadow: var(--luz), var(--relieve-1);
}
.tarjeta-ajustes h2 { margin-bottom: 8px; font-family: var(--fuente-titulo); font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.tarjeta-ajustes .boton-peligro { margin-bottom: 0; }
.tarjeta-cuaderno .mensaje-error { margin-bottom: 0; }
.estado-conexion { font-weight: 600; }
/* Pasos numerados: cada número va en una chapita con el degradado del acento. */
.pasos { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos li { position: relative; margin: 8px 0; padding-left: 38px; min-height: 28px; counter-increment: paso; }
.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: -1px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
  background-color: var(--acento);
  background-image: var(--acento-grad);
  color: var(--acento-texto);
  box-shadow: var(--luz), 0 2px 5px -1px rgb(var(--acento-rgb) / calc(.5 * var(--e)));
}
.recuadro {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  background-color: var(--superficie-hundida);
  box-shadow: var(--hundido);
}
.plegable summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.form-codigo { margin-top: 10px; }

/* ------------------------------ hojas desde abajo ------------------------------ */

/*
 * Hoja de edición: sube desde abajo con el fondo de página del tema, una barrita para agarrar arriba y su sombra hacia arriba.
 * (Nada de «display» en dialog.hoja: rompería el cierre del <dialog>.)
 */
dialog.hoja {
  position: fixed;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 640px;
  max-height: calc(100% - env(safe-area-inset-top) - 12px);
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: calc(var(--radio-3) + 6px) calc(var(--radio-3) + 6px) 0 0;
  background-color: var(--fondo);
  background-image: var(--fondo-imagen);
  color: var(--texto);
  box-shadow: var(--luz), var(--relieve-hoja);
}
dialog.hoja[open] { display: flex; flex-direction: column; animation: subir .28s ease-out; }
dialog.hoja::backdrop { background: rgba(8, 12, 24, .5); animation: aparecer .2s ease-out; }

.hoja-barra {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 8px 6px;
  border-bottom: 1px solid var(--borde);
  background-color: var(--superficie);
  background-image: var(--superficie-grad);
  box-shadow: var(--luz);
}
.hoja-barra::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 38px;
  height: 5px;
  margin-left: -19px;
  border-radius: 3px;
  background: var(--borde-fuerte);
  box-shadow: var(--hundido);
}
.hoja-titulo { flex: 1; font-family: var(--fuente-titulo); font-size: 17px; font-weight: 700; text-align: center; }
.hoja-boton { min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: var(--radio-2); font-size: 17px; color: var(--acento); }
.hoja-boton:active:not(:disabled) { background-color: var(--superficie-2); }
.hoja-boton.fuerte { font-weight: 700; }
.hoja-boton:disabled { opacity: .45; }
.hoja-cuerpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px max(16px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.hoja-error {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: var(--radio-2);
  font-size: 15px;
  color: #fff;
  background-color: var(--vencida);
  background-image: linear-gradient(180deg, var(--vencida-2) 0%, var(--vencida) 100%);
  box-shadow: var(--luz), var(--relieve-1);
}

/* El papel donde se escribe una nota: la misma nota adhesiva, más grande, con renglones suaves que se mueven con el texto. */
.editor-papel {
  padding: 10px 12px;
  border-top: 5px solid var(--color-pf);
  border-radius: var(--radio-1) var(--radio-1) var(--radio-3) var(--radio-1);
  background-color: var(--color-p);
  background-image: var(--brillo-nota);
  box-shadow: var(--sombra-nota-2);
}
.editor-texto {
  display: block;
  width: 100%;
  min-height: 168px;
  padding: 0;
  border: 0;
  outline: 0;
  resize: none;
  background-color: transparent;
  background-image: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 0) 23px, rgb(0 0 0 / calc(.12 * var(--e))) 23px, rgb(0 0 0 / calc(.12 * var(--e))) 24px);
  background-attachment: local;
  color: #2a2a2a;
  font-size: 17px;
  line-height: 24px;
}
.editor-texto::placeholder { color: rgba(0, 0, 0, .68); } /* sobre el papel de cualquier prioridad (el rojo es el más oscuro) sigue por encima de 4,5:1 */

/* Prioridad: cuatro botones del color de cada una; el elegido queda hundido, con borde fuerte y letra en negrita. */
.prioridades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; }
.prioridad {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 2px;
  border: 2px solid transparent;
  border-radius: var(--radio-2);
  font-size: 14px;
  background-color: var(--color-p);
  background-image: var(--brillo-nota);
  color: #2a2a2a;
  box-shadow: var(--sombra-nota);
  transition: transform var(--transicion);
}
.prioridad:active { transform: scale(.96); }
.prioridad[aria-pressed="true"] { border-color: var(--texto); font-weight: 700; box-shadow: inset 0 2px 5px rgb(0 0 0 / calc(.2 * var(--e))); }
.prioridad-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--color-pf); border: 1px solid rgba(0, 0, 0, .35); }

.datos { display: block; margin: 12px 0; }
.dato-fila { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.dato-fila dt { color: var(--texto-suave); }
.dato-fila dd { margin: 0; text-align: right; overflow-wrap: anywhere; }

/* Menú de acciones (como el de iOS): dos tarjetas flotantes con la sombra grande del tema. */
dialog.hoja-accion { overflow: visible; background: transparent; box-shadow: none; padding-bottom: env(safe-area-inset-bottom); }
.accion-cabecera, .accion-grupo {
  margin: 0 8px 8px;
  overflow: hidden;
  border: 1px solid var(--menu-borde);
  border-radius: var(--radio-3);
  background-color: var(--superficie-alta);
  background-image: var(--menu-fondo);
  box-shadow: var(--luz), var(--relieve-3);
}
.accion-cabecera { padding: 14px 16px; text-align: center; }
.accion-titulo { font-weight: 600; overflow-wrap: anywhere; }
.accion-mensaje { margin-top: 4px; font-size: 14px; color: var(--texto-suave); }
.accion-boton { display: block; width: 100%; min-height: 56px; font-size: 19px; text-align: center; color: var(--acento); }
.accion-boton + .accion-boton { border-top: 1px solid var(--menu-borde); }
.accion-boton:active { background-color: var(--superficie-2); }
.accion-boton.peligro { color: var(--peligro); }
.accion-boton.cancelar {
  width: calc(100% - 16px);
  margin: 0 8px 8px;
  border: 1px solid var(--menu-borde);
  border-radius: var(--radio-3);
  font-weight: 700;
  background-color: var(--superficie-alta);
  background-image: var(--menu-fondo);
  box-shadow: var(--luz), var(--relieve-3);
}
.accion-boton.cancelar:active { background-image: none; background-color: var(--superficie-2); }

@keyframes subir { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes entrar { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------ botón flotante ------------------------------ */

/* Botón flotante (＋): una chapa del acento con luz, resplandor y sombra; al tocarlo se hunde un poco. */
.fab {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(var(--alto-pestanas) + env(safe-area-inset-bottom) + 18px);
  z-index: 5;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 30px;
  line-height: 1;
  background-color: var(--acento);
  background-image: var(--acento-grad);
  color: var(--acento-texto);
  box-shadow: var(--luz), inset 0 -2px 0 rgb(0 0 0 / calc(.16 * var(--e))), var(--relieve-2), 0 10px 22px -6px rgb(var(--acento-rgb) / calc(.6 * var(--e)));
  transition: transform var(--transicion);
}
.fab:active { transform: scale(.93); background-image: none; background-color: var(--acento-fuerte); box-shadow: var(--hundido); }
/* Teléfono de lado: ya no hay barra de pestañas debajo (están en la columna de la izquierda), así que el botón baja a la esquina y se achica un poco. */
@media (orientation: landscape) and (max-height: 500px) {
  .fab { bottom: calc(env(safe-area-inset-bottom) + 14px); width: 52px; height: 52px; font-size: 28px; }
  /*
   * Carril del botón ＋ (Notas y Gastos): de lado, con tan poca altura la esquina de abajo a la derecha siempre tenía una tarjeta debajo, y el
   * botón le tapaba la casilla «hecha» y el aviso (hasta con la lista sin desplazar). El contenido deja 64 px libres a la derecha (52 del botón
   * + 12 de aire): el botón vive en ese carril y nunca queda sobre una tarjeta. Los filtros siguen llegando al borde de la pantalla.
   */
  .con-fab > :not(.fab):not(.filtros) { margin-right: 64px; }
}