/*
 * Aspecto de Orden del Día: los 10 temas de color de la app, el relieve (sombras en capas, luces, degradados y texturas),
 * los tres niveles de efectos y los estilos del selector de Ajustes (.as-*). Lo cargan las ventanas del PC y la app del iPhone.
 *
 * Quién decide qué tema se ve: src/comun/aspecto.js. Lee lo que elegiste y pone atributos en <html>:
 *   data-tema      auto no existe aquí: el motor lo resuelve a «claro» o «medianoche» según tu aparato
 *   data-esquema   «claro» u «oscuro» (del tema ya resuelto); aquí pone color-scheme
 *   data-efectos   completos | suaves | ninguno
 * (data-tapa, data-tono y data-mesa son del Cuaderno y viven en cuaderno-skins.css.)
 *
 * Orden de carga: la hoja de la app (comun.css o app.css, con valores de respaldo) → este archivo → el resto. Los bloques de aquí
 * llevan el atributo y NADA delante (no hay :root): así una vista previa con data-tema="uva" también tiene todos los tokens.
 *
 * ── TOKENS (todos los define cada tema) ────────────────────────────────────────────────────────────────────────────
 * Cómo se usa cada uno (importa: son de tipos distintos):
 *   COLOR (sirve en color, background-color, border-color…):
 *     --fondo --fondo-2 --superficie --superficie-2 --superficie-alta --superficie-hundida --texto --texto-suave --borde --borde-fuerte
 *     --borde-control      contorno de los CONTROLES (campos, casillas, interruptores, deslizadores, barra de desplazamiento): llega a 3:1
 *                          contra todas las superficies del tema, también con efectos «ninguno». --borde y --borde-fuerte son para separar
 *                          y adornar (tarjetas, líneas, botones con texto) y son más suaves a propósito.
 *     --acento --acento-2 --acento-fuerte --acento-texto --peligro --ok --aviso --interruptor-on --menu-borde
 *   IMAGEN (degradados; usar con «background» o «background-image», NO con background-color):
 *     --fondo-imagen        la página: degradado de --fondo a --fondo-2 más luces y, en Papel, la trama. Va con background-color: var(--fondo).
 *     --superficie-grad     tarjetas y cajas: luz arriba, un poco más oscuro abajo. Va con background-color: var(--superficie).
 *     --acento-grad         botón primario y casilla elegida (el texto va en --acento-texto).
 *     --menu-fondo          barra lateral y menús.   --menu-activo   ítem activo del menú (el texto va en --acento-texto).
 *   SOMBRA (lista para box-shadow; siempre válida dentro de una lista separada por comas):
 *     --luz        reborde de luz superior (inset 0 1px 0 …). Ponlo PRIMERO: box-shadow: var(--luz), var(--relieve-1);
 *     --relieve-1  tarjetas en reposo     --relieve-2  elevada o con el puntero encima     --relieve-3  menús y diálogos
 *     --hundido    sombra interior de campos y huecos
 *     --halo       aviso de foco: un anillo de 2 px del color de la superficie y otro de 2 px del acento pleno (se ve sobre cualquier
 *                  fondo, ≥ 3:1) más un resplandor suave que sí depende de --e. Con efectos «ninguno» queda solo el doble anillo.
 *     --sombra     la de siempre (igual a --relieve-1)
 *   OTROS:  --radio-1/2/3 (esquinas: chica, media y grande)   --fuente-titulo (solo fuentes del sistema)   --transicion (p. ej. 160ms ease; 0s sin efectos)
 *   AYUDAS (por si necesitas una sombra o un brillo propios con el mismo tono):
 *     --sombra-rgb  «r g b» de la sombra del tema → rgb(var(--sombra-rgb) / .2)      --acento-rgb  «r g b» del acento
 *     --e           fuerza de los efectos: 1 completos, .5 suaves, 0 ninguno → rgb(var(--sombra-rgb) / calc(.2 * var(--e)))
 *     --g           largo de los degradados: 100% completos, 200% suaves (a la mitad)
 * Los colores de prioridad (--p-*) NO están aquí: no cambian con ningún tema (son la identidad de las notas) y siguen en comun.css / app.css.
 *
 * ── NIVELES DE EFECTOS ─────────────────────────────────────────────────────────────────────────────────────────────
 *   completos  todo lo de cada tema.
 *   suaves     sombras y brillos a la mitad (--e) y degradados a la mitad (--g).
 *   ninguno    la app plana de antes: sin sombras en capas, sin degradados ni tramas, borde de 1 px, colores planos y sin transiciones.
 *
 * Contraste: en todos los temas el texto y el texto suave se leen (≥ 4,5:1) sobre fondo, superficies y menú; el texto del acento
 * sobre el acento y sus extremos; peligro, ok y aviso sobre las superficies; y el contorno de los controles (--borde-control) llega
 * a 3:1 contra todas ellas. Lo comprueba pruebas/aspecto.test.js leyendo este archivo.
 * Sin dependencias externas: nada de @import ni de imágenes; las texturas son degradados.
 */

/* ───────────── Fuerza de los efectos (--e y --g). Los lee cada tema; una vista previa puede llevar su propio data-efectos ───────────── */
:root { --e: 1; --g: 100%; }
[data-efectos="completos"] { --e: 1; --g: 100%; }
[data-efectos="suaves"] { --e: .5; --g: 200%; }
[data-efectos="ninguno"] { --e: 0; --g: 100%; }

/* ───────────── Modo claro u oscuro del tema (controles nativos, barras de desplazamiento) ───────────── */
[data-esquema="claro"] { color-scheme: light; }
[data-esquema="oscuro"] { color-scheme: dark; }

/* Las notas flotantes y la lista de compras flotante son de papel de color claro (el de su prioridad) aunque el tema sea oscuro:
   sus campos nativos (fecha, hora, barras) tienen que verse en claro. */
body.nota { color-scheme: light; }

/* ───────────── Página: el fondo con su degradado (:where no sube la prioridad: body.nota y las reglas de cada ventana ganan) ───────────── */
:where(html[data-tema]) body { background-color: var(--fondo); background-image: var(--fondo-imagen); }


/* ═══════════════════════════════════════════════ LOS TEMAS ═══════════════════════════════════════════════ */

/* Claro: azul limpio. Fondo gris azulado muy suave, superficies blancas con relieve en capas. */
[data-tema="claro"] {
  /* Colores base */
  --fondo: #f4f7fb;
  --fondo-2: #e6ecf5;
  --fondo-imagen: radial-gradient(1100px 520px at 10% -12%, rgb(255 255 255 / calc(.95 * var(--e))), transparent 62%), radial-gradient(900px 480px at 100% 0%, rgb(37 99 235 / calc(.07 * var(--e))), transparent 60%),
    linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) var(--g));
  --superficie: #ffffff;
  --superficie-2: #eef2f8;
  --superficie-alta: #ffffff;
  --superficie-hundida: #e9eef6;
  --superficie-grad: linear-gradient(180deg, #ffffff 0%, #f6f8fc var(--g));
  --texto: #162033;
  --texto-suave: #556178;
  --borde: #dbe2ee;
  --borde-fuerte: #bcc8db;
  --borde-control: #6e85aa;
  /* Acento */
  --acento: #1f5de2;
  --acento-2: #2b69ec;
  --acento-fuerte: #1a4bc8;
  --acento-texto: #ffffff;
  --acento-grad: linear-gradient(180deg, var(--acento-2) 0%, var(--acento) var(--g));
  --acento-rgb: 31 93 226;
  /* Estados */
  --peligro: #c4271b;
  --ok: #12783a;
  --aviso: #a84407;
  --interruptor-on: #1f9d4d;
  /* Relieve: sombras en capas teñidas del tono del tema, luz superior y hueco de los campos */
  --sombra-rgb: 22 40 84;
  --luz: inset 0 1px 0 rgb(255 255 255 / calc(.85 * var(--e)));
  --relieve-1: 0 1px 1px rgb(var(--sombra-rgb) / calc(.06 * var(--e))), 0 2px 5px rgb(var(--sombra-rgb) / calc(.07 * var(--e))), 0 8px 18px -8px rgb(var(--sombra-rgb) / calc(.14 * var(--e)));
  --relieve-2: 0 1px 2px rgb(var(--sombra-rgb) / calc(.07 * var(--e))), 0 6px 12px rgb(var(--sombra-rgb) / calc(.09 * var(--e))), 0 16px 32px -10px rgb(var(--sombra-rgb) / calc(.2 * var(--e)));
  --relieve-3: 0 2px 4px rgb(var(--sombra-rgb) / calc(.09 * var(--e))), 0 14px 28px rgb(var(--sombra-rgb) / calc(.15 * var(--e))), 0 34px 70px -14px rgb(var(--sombra-rgb) / calc(.32 * var(--e)));
  --hundido: inset 0 1px 2px rgb(var(--sombra-rgb) / calc(.15 * var(--e))), inset 0 0 0 1px rgb(var(--sombra-rgb) / calc(.05 * var(--e)));
  --halo: 0 0 0 2px var(--superficie), 0 0 0 4px var(--acento), 0 0 16px 4px rgb(var(--acento-rgb) / calc(.34 * var(--e)));
  --sombra: 0 1px 1px rgb(var(--sombra-rgb) / calc(.06 * var(--e))), 0 2px 5px rgb(var(--sombra-rgb) / calc(.07 * var(--e))), 0 8px 18px -8px rgb(var(--sombra-rgb) / calc(.14 * var(--e)));
  /* Menú lateral y menús emergentes */
  --menu-fondo: linear-gradient(180deg, #ffffff 0%, #f1f5fa var(--g));
  --menu-borde: #d5ddea;
  --menu-activo: var(--acento-grad);
  /* Forma, letra y movimiento */
  --radio-1: 6px;
  --radio-2: 10px;
  --radio-3: 16px;
  --fuente-titulo: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --transicion: 160ms ease;
}

/* Medianoche: azul noche. Más elevación = más claro; el foco brilla con un resplandor azul. */
[data-tema="medianoche"] {
  /* Colores base */
  --fondo: #0e1220;
  --fondo-2: #151a2d;
  --fondo-imagen: radial-gradient(900px 520px at 88% -14%, rgb(91 140 255 / calc(.16 * var(--e))), transparent 64%), radial-gradient(760px 420px at -6% 104%, rgb(130 96 255 / calc(.09 * var(--e))), transparent 62%),
    linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) var(--g));
  --superficie: #1a2038;
  --superficie-2: #232b4a;
  --superficie-alta: #2b345a;
  --superficie-hundida: #0b0f1c;
  --superficie-grad: linear-gradient(180deg, #212947 0%, #1a2038 var(--g));
  --texto: #e8ecf8;
  --texto-suave: #9ba8c8;
  --borde: #2a3354;
  --borde-fuerte: #3d4a76;
  --borde-control: #7481ad;
  /* Acento */
  --acento: #7ca6ff;
  --acento-2: #9bbcff;
  --acento-fuerte: #aec8ff;
  --acento-texto: #081020;
  --acento-grad: linear-gradient(180deg, var(--acento-2) 0%, var(--acento) var(--g));
  --acento-rgb: 124 166 255;
  /* Estados */
  --peligro: #ff7f78;
  --ok: #4fd98c;
  --aviso: #fbbf24;
  --interruptor-on: #34c46f;
  /* Relieve: sombras en capas teñidas del tono del tema, luz superior y hueco de los campos */
  --sombra-rgb: 2 4 16;
  --luz: inset 0 1px 0 rgb(170 190 255 / calc(.09 * var(--e)));
  --relieve-1: 0 1px 1px rgb(var(--sombra-rgb) / calc(.09 * var(--e))), 0 2px 5px rgb(var(--sombra-rgb) / calc(.105 * var(--e))), 0 8px 18px -8px rgb(var(--sombra-rgb) / calc(.21 * var(--e)));
  --relieve-2: 0 1px 2px rgb(var(--sombra-rgb) / calc(.105 * var(--e))), 0 6px 12px rgb(var(--sombra-rgb) / calc(.135 * var(--e))), 0 16px 32px -10px rgb(var(--sombra-rgb) / calc(.3 * var(--e)));
  --relieve-3: 0 2px 4px rgb(var(--sombra-rgb) / calc(.135 * var(--e))), 0 14px 28px rgb(var(--sombra-rgb) / calc(.225 * var(--e))), 0 34px 70px -14px rgb(var(--sombra-rgb) / calc(.48 * var(--e)));
  --hundido: inset 0 2px 5px rgb(var(--sombra-rgb) / calc(.51 * var(--e))), inset 0 0 0 1px rgb(var(--sombra-rgb) / calc(.3 * var(--e)));
  --halo: 0 0 0 2px var(--superficie), 0 0 0 4px var(--acento), 0 0 16px 4px rgb(var(--acento-rgb) / calc(.42 * var(--e)));
  --sombra: 0 1px 1px rgb(var(--sombra-rgb) / calc(.09 * var(--e))), 0 2px 5px rgb(var(--sombra-rgb) / calc(.105 * var(--e))), 0 8px 18px -8px rgb(var(--sombra-rgb) / calc(.21 * var(--e)));
  /* Menú lateral y menús emergentes */
  --menu-fondo: linear-gradient(180deg, #161c33 0%, #10152a var(--g));
  --menu-borde: #242d4d;
  --menu-activo: var(--acento-grad);
  /* Forma, letra y movimiento */
  --radio-1: 6px;
  --radio-2: 10px;
  --radio-3: 16px;
  --fuente-titulo: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --transicion: 160ms ease;
}

/* Papel: crema cálido, tinta marrón, títulos con letra de libro, trama de papel casi invisible y esquinas más cuadradas. */
[data-tema="papel"] {
  /* Colores base */
  --fondo: #f5efe0;
  --fondo-2: #eadfc6;
  --fondo-imagen: repeating-linear-gradient(0deg, rgb(110 80 40 / calc(.03 * var(--e))) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgb(110 80 40 / calc(.02 * var(--e))) 0 1px, transparent 1px 5px), radial-gradient(ellipse 1000px 500px at 50% -8%, rgb(255 251 238 / calc(.75 * var(--e))), transparent 70%),
    linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) var(--g));
  --superficie: #fbf7ec;
  --superficie-2: #f0e8d3;
  --superficie-alta: #fffdf6;
  --superficie-hundida: #e9dfc9;
  --superficie-grad: linear-gradient(180deg, #fffdf6 0%, #f7f1e1 var(--g));
  --texto: #3a2a1d;
  --texto-suave: #66543f;
  --borde: #dccfb0;
  --borde-fuerte: #bfae88;
  --borde-control: #8c7a52;
  /* Acento */
  --acento: #9f3f29;
  --acento-2: #b24b31;
  --acento-fuerte: #823120;
  --acento-texto: #fffaf0;
  --acento-grad: linear-gradient(180deg, var(--acento-2) 0%, var(--acento) var(--g));
  --acento-rgb: 159 63 41;
  /* Estados */
  --peligro: #a82418;
  --ok: #2f6b2f;
  --aviso: #8a5300;
  --interruptor-on: #3e8a3e;
  /* Relieve: sombras en capas teñidas del tono del tema, luz superior y hueco de los campos */
  --sombra-rgb: 84 54 22;
  --luz: inset 0 1px 0 rgb(255 252 240 / calc(.9 * var(--e)));
  --relieve-1: 0 1px 1px rgb(var(--sombra-rgb) / calc(.06 * var(--e))), 0 2px 5px rgb(var(--sombra-rgb) / calc(.07 * var(--e))), 0 8px 18px -8px rgb(var(--sombra-rgb) / calc(.14 * var(--e)));
  --relieve-2: 0 1px 2px rgb(var(--sombra-rgb) / calc(.07 * var(--e))), 0 6px 12px rgb(var(--sombra-rgb) / calc(.09 * var(--e))), 0 16px 32px -10px rgb(var(--sombra-rgb) / calc(.2 * var(--e)));
  --relieve-3: 0 2px 4px rgb(var(--sombra-rgb) / calc(.09 * var(--e))), 0 14px 28px rgb(var(--sombra-rgb) / calc(.15 * var(--e))), 0 34px 70px -14px rgb(var(--sombra-rgb) / calc(.32 * var(--e)));
  --hundido: inset 0 1px 2px rgb(var(--sombra-rgb) / calc(.15 * var(--e))), inset 0 0 0 1px rgb(var(--sombra-rgb) / calc(.05 * var(--e)));
  --halo: 0 0 0 2px var(--superficie), 0 0 0 4px var(--acento), 0 0 16px 4px rgb(var(--acento-rgb) / calc(.34 * var(--e)));
  --sombra: 0 1px 1px rgb(var(--sombra-rgb) / calc(.06 * var(--e))), 0 2px 5px rgb(var(--sombra-rgb) / calc(.07 * var(--e))), 0 8px 18px -8px rgb(var(--sombra-rgb) / calc(.14 * var(--e)));
  /* Menú lateral y menús emergentes */
  --menu-fondo: linear-gradient(180deg, #f8f2e2 0%, #efe6cf var(--g));
  --menu-borde: #d6c8a6;
  --menu-activo: var(--acento-grad);
  /* Forma, letra y movimiento */
  --radio-1: 4px;
  --radio-2: 6px;
  --radio-3: 10px;
  --fuente-titulo: Georgia, "Palatino Linotype", Palatino, "Book Antiqua", "Iowan Old Style", serif;
  --transicion: 200ms ease;
}

/* Bosque: verdes profundos, superficies verde grisáceo y acento esmeralda. */
[data-tema="bosque"] {
  /* Colores base */
  --fondo: #0f1a14;
  --fondo-2: #14231b;
  --fondo-imagen: radial-gradient(900px 500px at 92% -12%, rgb(52 211 153 / calc(.13 * var(--e))), transparent 64%), radial-gradient(700px 420px at -4% 106%, rgb(34 150 100 / calc(.10 * var(--e))), transparent 62%),
    linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) var(--g));
  --superficie: #1b2b23;
  --superficie-2: #24372d;
  --superficie-alta: #2d443a;
  --superficie-hundida: #0b140f;
  --superficie-grad: linear-gradient(180deg, #223629 0%, #1b2b23 var(--g));
  --texto: #e4f0e8;
  --texto-suave: #9fb9aa;
  --borde: #2c4337;
  --borde-fuerte: #41604f;
  --borde-control: #67977d;
  /* Acento */
  --acento: #34d399;
  --acento-2: #6ee7b7;
  --acento-fuerte: #86efc2;
  --acento-texto: #04201a;
  --acento-grad: linear-gradient(180deg, var(--acento-2) 0%, var(--acento) var(--g));
  --acento-rgb: 52 211 153;
  /* Estados */
  --peligro: #ff8c82;
  --ok: #7fe29a;
  --aviso: #f6c04a;
  --interruptor-on: #2fbf7c;
  /* Relieve: sombras en capas teñidas del tono del tema, luz superior y hueco de los campos */
  --sombra-rgb: 1 10 5;
  --luz: inset 0 1px 0 rgb(170 255 210 / calc(.08 * var(--e)));
  --relieve-1: 0 1px 1px rgb(var(--sombra-rgb) / calc(.09 * var(--e))), 0 2px 5px rgb(var(--sombra-rgb) / calc(.105 * var(--e))), 0 8px 18px -8px rgb(var(--sombra-rgb) / calc(.21 * var(--e)));
  --relieve-2: 0 1px 2px rgb(var(--sombra-rgb) / calc(.105 * var(--e))), 0 6px 12px rgb(var(--sombra-rgb) / calc(.135 * var(--e))), 0 16px 32px -10px rgb(var(--sombra-rgb) / calc(.3 * var(--e)));
  --relieve-3: 0 2px 4px rgb(var(--sombra-rgb) / calc(.135 * var(--e))), 0 14px 28px rgb(var(--sombra-rgb) / calc(.225 * var(--e))), 0 34px 70px -14px rgb(var(--sombra-rgb) / calc(.48 * var(--e)));
  --hundido: inset 0 2px 5px rgb(var(--sombra-rgb) / calc(.51 * var(--e))), inset 0 0 0 1px rgb(var(--sombra-rgb) / calc(.3 * var(--e)));
  --halo: 0 0 0 2px var(--superficie), 0 0 0 4px var(--acento), 0 0 16px 4px rgb(var(--acento-rgb) / calc(.42 * var(--e)));
  --sombra: 0 1px 1px rgb(var(--sombra-rgb) / calc(.09 * var(--e))), 0 2px 5px rgb(var(--sombra-rgb) / calc(.105 * var(--e))), 0 8px 18px -8px rgb(var(--sombra-rgb) / calc(.21 * var(--e)));
  /* Menú lateral y menús emergentes */
  --menu-fondo: linear-gradient(180deg, #15241c 0%, #0f1c15 var(--g));
  --menu-borde: #25392e;
  --menu-activo: var(--acento-grad);
  /* Forma, letra y movimiento */
  --radio-1: 6px;
  --radio-2: 10px;
  --radio-3: 16px;
  --fuente-titulo: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --transicion: 160ms ease;
}

/* Océano: aguas claras, acento verde azulado profundo y relieve azul verdoso. */
[data-tema="oceano"] {
  /* Colores base */
  --fondo: #e6f4f6;
  --fondo-2: #d9edf1;
  --fondo-imagen: radial-gradient(1100px 520px at 8% -12%, rgb(255 255 255 / calc(.9 * var(--e))), transparent 62%), radial-gradient(900px 500px at 100% 100%, rgb(14 140 150 / calc(.10 * var(--e))), transparent 62%),
    linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) var(--g));
  --superficie: #f7fcfd;
  --superficie-2: #e3f1f4;
  --superficie-alta: #ffffff;
  --superficie-hundida: #d7eaee;
  --superficie-grad: linear-gradient(180deg, #ffffff 0%, #eef8fa var(--g));
  --texto: #0f2e36;
  --texto-suave: #3f6069;
  --borde: #c3dde3;
  --borde-fuerte: #9fc6d0;
  --borde-control: #578894;
  /* Acento */
  --acento: #0e6f69;
  --acento-2: #0f8077;
  --acento-fuerte: #0a5a55;
  --acento-texto: #ffffff;
  --acento-grad: linear-gradient(180deg, var(--acento-2) 0%, var(--acento) var(--g));
  --acento-rgb: 14 111 105;
  /* Estados */
  --peligro: #bf2a21;
  --ok: #0d7336;
  --aviso: #9a4a06;
  --interruptor-on: #128f72;
  /* Relieve: sombras en capas teñidas del tono del tema, luz superior y hueco de los campos */
  --sombra-rgb: 8 60 78;
  --luz: inset 0 1px 0 rgb(255 255 255 / calc(.85 * var(--e)));
  --relieve-1: 0 1px 1px rgb(var(--sombra-rgb) / calc(.06 * var(--e))), 0 2px 5px rgb(var(--sombra-rgb) / calc(.07 * var(--e))), 0 8px 18px -8px rgb(var(--sombra-rgb) / calc(.14 * var(--e)));
  --relieve-2: 0 1px 2px rgb(var(--sombra-rgb) / calc(.07 * var(--e))), 0 6px 12px rgb(var(--sombra-rgb) / calc(.09 * var(--e))), 0 16px 32px -10px rgb(var(--sombra-rgb) / calc(.2 * var(--e)));
  --relieve-3: 0 2px 4px rgb(var(--sombra-rgb) / calc(.09 * var(--e))), 0 14px 28px rgb(var(--sombra-rgb) / calc(.15 * var(--e))), 0 34px 70px -14px rgb(var(--sombra-rgb) / calc(.32 * var(--e)));
  --hundido: inset 0 1px 2px rgb(var(--sombra-rgb) / calc(.15 * var(--e))), inset 0 0 0 1px rgb(var(--sombra-rgb) / calc(.05 * var(--e)));
  --halo: 0 0 0 2px var(--superficie), 0 0 0 4px var(--acento), 0 0 16px 4px rgb(var(--acento-rgb) / calc(.34 * var(--e)));
  --sombra: 0 1px 1px rgb(var(--sombra-rgb) / calc(.06 * var(--e))), 0 2px 5px rgb(var(--sombra-rgb) / calc(.07 * var(--e))), 0 8px 18px -8px rgb(var(--sombra-rgb) / calc(.14 * var(--e)));
  /* Menú lateral y menús emergentes */
  --menu-fondo: linear-gradient(180deg, #f2fafb 0%, #e1f0f3 var(--g));
  --menu-borde: #bcd9df;
  --menu-activo: var(--acento-grad);
  /* Forma, letra y movimiento */
  --radio-1: 8px;
  --radio-2: 12px;
  --radio-3: 20px;
  --fuente-titulo: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --transicion: 180ms ease;
}

/* Atardecer: durazno y coral; el acento se vuelve naranja en el degradado. */
[data-tema="atardecer"] {
  /* Colores base */
  --fondo: #fff1e6;
  --fondo-2: #ffe3d3;
  --fondo-imagen: radial-gradient(1100px 560px at 10% -14%, rgb(255 255 255 / calc(.9 * var(--e))), transparent 62%), radial-gradient(1000px 560px at 100% 104%, rgb(255 130 90 / calc(.20 * var(--e))), transparent 62%),
    linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) var(--g));
  --superficie: #fffaf6;
  --superficie-2: #fde7d8;
  --superficie-alta: #ffffff;
  --superficie-hundida: #fadcc9;
  --superficie-grad: linear-gradient(180deg, #ffffff 0%, #fff3ea var(--g));
  --texto: #3b2237;
  --texto-suave: #744d62;
  --borde: #f2d1ba;
  --borde-fuerte: #e0b093;
  --borde-control: #9d745c;
  /* Acento */
  --acento: #b53226;
  --acento-2: #c0560f;
  --acento-fuerte: #982a20;
  --acento-texto: #ffffff;
  --acento-grad: linear-gradient(135deg, var(--acento) 0%, var(--acento-2) var(--g));
  --acento-rgb: 181 50 38;
  /* Estados */
  --peligro: #b8261a;
  --ok: #17743a;
  --aviso: #964a05;
  --interruptor-on: #1f9a50;
  /* Relieve: sombras en capas teñidas del tono del tema, luz superior y hueco de los campos */
  --sombra-rgb: 120 50 40;
  --luz: inset 0 1px 0 rgb(255 255 255 / calc(.9 * var(--e)));
  --relieve-1: 0 1px 1px rgb(var(--sombra-rgb) / calc(.06 * var(--e))), 0 2px 5px rgb(var(--sombra-rgb) / calc(.07 * var(--e))), 0 8px 18px -8px rgb(var(--sombra-rgb) / calc(.14 * var(--e)));
  --relieve-2: 0 1px 2px rgb(var(--sombra-rgb) / calc(.07 * var(--e))), 0 6px 12px rgb(var(--sombra-rgb) / calc(.09 * var(--e))), 0 16px 32px -10px rgb(var(--sombra-rgb) / calc(.2 * var(--e)));
  --relieve-3: 0 2px 4px rgb(var(--sombra-rgb) / calc(.09 * var(--e))), 0 14px 28px rgb(var(--sombra-rgb) / calc(.15 * var(--e))), 0 34px 70px -14px rgb(var(--sombra-rgb) / calc(.32 * var(--e)));
  --hundido: inset 0 1px 2px rgb(var(--sombra-rgb) / calc(.15 * var(--e))), inset 0 0 0 1px rgb(var(--sombra-rgb) / calc(.05 * var(--e)));
  --halo: 0 0 0 2px var(--superficie), 0 0 0 4px var(--acento), 0 0 16px 4px rgb(var(--acento-rgb) / calc(.34 * var(--e)));
  --sombra: 0 1px 1px rgb(var(--sombra-rgb) / calc(.06 * var(--e))), 0 2px 5px rgb(var(--sombra-rgb) / calc(.07 * var(--e))), 0 8px 18px -8px rgb(var(--sombra-rgb) / calc(.14 * var(--e)));
  /* Menú lateral y menús emergentes */
  --menu-fondo: linear-gradient(180deg, #fff6ee 0%, #ffe9da var(--g));
  --menu-borde: #efcdb5;
  --menu-activo: var(--acento-grad);
  /* Forma, letra y movimiento */
  --radio-1: 8px;
  --radio-2: 12px;
  --radio-3: 18px;
  --fuente-titulo: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --transicion: 180ms ease;
}

/* Uva: violeta profundo con acento lavanda. */
[data-tema="uva"] {
  /* Colores base */
  --fondo: #15101f;
  --fondo-2: #1d1630;
  --fondo-imagen: radial-gradient(900px 520px at 90% -14%, rgb(167 139 250 / calc(.17 * var(--e))), transparent 64%), radial-gradient(760px 420px at -6% 106%, rgb(236 100 190 / calc(.08 * var(--e))), transparent 62%),
    linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) var(--g));
  --superficie: #221a37;
  --superficie-2: #2c2347;
  --superficie-alta: #372c58;
  --superficie-hundida: #110c1b;
  --superficie-grad: linear-gradient(180deg, #2a2043 0%, #221a37 var(--g));
  --texto: #ece6fa;
  --texto-suave: #aa9fc9;
  --borde: #352b54;
  --borde-fuerte: #4c3f76;
  --borde-control: #8578b0;
  /* Acento */
  --acento: #a78bfa;
  --acento-2: #c0adff;
  --acento-fuerte: #c9baff;
  --acento-texto: #140c28;
  --acento-grad: linear-gradient(180deg, var(--acento-2) 0%, var(--acento) var(--g));
  --acento-rgb: 167 139 250;
  /* Estados */
  --peligro: #ff8793;
  --ok: #58e0a0;
  --aviso: #fcd34d;
  --interruptor-on: #7c5ce0;
  /* Relieve: sombras en capas teñidas del tono del tema, luz superior y hueco de los campos */
  --sombra-rgb: 8 2 20;
  --luz: inset 0 1px 0 rgb(210 190 255 / calc(.09 * var(--e)));
  --relieve-1: 0 1px 1px rgb(var(--sombra-rgb) / calc(.09 * var(--e))), 0 2px 5px rgb(var(--sombra-rgb) / calc(.105 * var(--e))), 0 8px 18px -8px rgb(var(--sombra-rgb) / calc(.21 * var(--e)));
  --relieve-2: 0 1px 2px rgb(var(--sombra-rgb) / calc(.105 * var(--e))), 0 6px 12px rgb(var(--sombra-rgb) / calc(.135 * var(--e))), 0 16px 32px -10px rgb(var(--sombra-rgb) / calc(.3 * var(--e)));
  --relieve-3: 0 2px 4px rgb(var(--sombra-rgb) / calc(.135 * var(--e))), 0 14px 28px rgb(var(--sombra-rgb) / calc(.225 * var(--e))), 0 34px 70px -14px rgb(var(--sombra-rgb) / calc(.48 * var(--e)));
  --hundido: inset 0 2px 5px rgb(var(--sombra-rgb) / calc(.51 * var(--e))), inset 0 0 0 1px rgb(var(--sombra-rgb) / calc(.3 * var(--e)));
  --halo: 0 0 0 2px var(--superficie), 0 0 0 4px var(--acento), 0 0 16px 4px rgb(var(--acento-rgb) / calc(.42 * var(--e)));
  --sombra: 0 1px 1px rgb(var(--sombra-rgb) / calc(.09 * var(--e))), 0 2px 5px rgb(var(--sombra-rgb) / calc(.105 * var(--e))), 0 8px 18px -8px rgb(var(--sombra-rgb) / calc(.21 * var(--e)));
  /* Menú lateral y menús emergentes */
  --menu-fondo: linear-gradient(180deg, #1b1429 0%, #140f21 var(--g));
  --menu-borde: #2e2549;
  --menu-activo: var(--acento-grad);
  /* Forma, letra y movimiento */
  --radio-1: 8px;
  --radio-2: 12px;
  --radio-3: 18px;
  --fuente-titulo: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --transicion: 160ms ease;
}

/* Grafito: casi negro, grises cálidos y acento ámbar/cobre (distinto del azul de Medianoche). */
[data-tema="grafito"] {
  /* Colores base */
  --fondo: #131211;
  --fondo-2: #1c1a18;
  --fondo-imagen: radial-gradient(900px 500px at 90% -14%, rgb(224 149 74 / calc(.11 * var(--e))), transparent 64%), radial-gradient(700px 400px at -4% 106%, rgb(255 255 255 / calc(.025 * var(--e))), transparent 60%),
    linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) var(--g));
  --superficie: #252221;
  --superficie-2: #2f2b29;
  --superficie-alta: #3a3532;
  --superficie-hundida: #0e0d0c;
  --superficie-grad: linear-gradient(180deg, #2d2927 0%, #252221 var(--g));
  --texto: #ede9e3;
  --texto-suave: #aaa296;
  --borde: #38342f;
  --borde-fuerte: #4d4740;
  --borde-control: #92806a;
  /* Acento */
  --acento: #e0954a;
  --acento-2: #f0b06a;
  --acento-fuerte: #f5be80;
  --acento-texto: #1a1006;
  --acento-grad: linear-gradient(180deg, var(--acento-2) 0%, var(--acento) var(--g));
  --acento-rgb: 224 149 74;
  /* Estados */
  --peligro: #ff8b7b;
  --ok: #8fd67f;
  --aviso: #f0c24b;
  --interruptor-on: #b8702a;
  /* Relieve: sombras en capas teñidas del tono del tema, luz superior y hueco de los campos */
  --sombra-rgb: 16 9 2;
  --luz: inset 0 1px 0 rgb(255 236 214 / calc(.07 * var(--e)));
  --relieve-1: 0 1px 1px rgb(var(--sombra-rgb) / calc(.096 * var(--e))), 0 2px 5px rgb(var(--sombra-rgb) / calc(.112 * var(--e))), 0 8px 18px -8px rgb(var(--sombra-rgb) / calc(.224 * var(--e)));
  --relieve-2: 0 1px 2px rgb(var(--sombra-rgb) / calc(.112 * var(--e))), 0 6px 12px rgb(var(--sombra-rgb) / calc(.144 * var(--e))), 0 16px 32px -10px rgb(var(--sombra-rgb) / calc(.32 * var(--e)));
  --relieve-3: 0 2px 4px rgb(var(--sombra-rgb) / calc(.144 * var(--e))), 0 14px 28px rgb(var(--sombra-rgb) / calc(.24 * var(--e))), 0 34px 70px -14px rgb(var(--sombra-rgb) / calc(.512 * var(--e)));
  --hundido: inset 0 2px 5px rgb(var(--sombra-rgb) / calc(.544 * var(--e))), inset 0 0 0 1px rgb(var(--sombra-rgb) / calc(.32 * var(--e)));
  --halo: 0 0 0 2px var(--superficie), 0 0 0 4px var(--acento), 0 0 16px 4px rgb(var(--acento-rgb) / calc(.42 * var(--e)));
  --sombra: 0 1px 1px rgb(var(--sombra-rgb) / calc(.096 * var(--e))), 0 2px 5px rgb(var(--sombra-rgb) / calc(.112 * var(--e))), 0 8px 18px -8px rgb(var(--sombra-rgb) / calc(.224 * var(--e)));
  /* Menú lateral y menús emergentes */
  --menu-fondo: linear-gradient(180deg, #1d1b19 0%, #161412 var(--g));
  --menu-borde: #2f2b27;
  --menu-activo: var(--acento-grad);
  /* Forma, letra y movimiento */
  --radio-1: 5px;
  --radio-2: 8px;
  --radio-3: 14px;
  --fuente-titulo: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --transicion: 160ms ease;
}

/* Rosa: rosados suaves, rosa fuerte de acento y esquinas más redondeadas. */
[data-tema="rosa"] {
  /* Colores base */
  --fondo: #fdeef3;
  --fondo-2: #fbe3ec;
  --fondo-imagen: radial-gradient(1100px 540px at 12% -12%, rgb(255 255 255 / calc(.95 * var(--e))), transparent 62%), radial-gradient(900px 520px at 100% 100%, rgb(240 90 150 / calc(.12 * var(--e))), transparent 62%),
    linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) var(--g));
  --superficie: #fff8fb;
  --superficie-2: #fbe5ee;
  --superficie-alta: #ffffff;
  --superficie-hundida: #f8dbe6;
  --superficie-grad: linear-gradient(180deg, #ffffff 0%, #fff1f6 var(--g));
  --texto: #3a1a2b;
  --texto-suave: #764a5f;
  --borde: #f1ccda;
  --borde-fuerte: #dfa9bf;
  --borde-control: #a86c84;
  /* Acento */
  --acento: #c21f5b;
  --acento-2: #cf2e68;
  --acento-fuerte: #a3164a;
  --acento-texto: #ffffff;
  --acento-grad: linear-gradient(180deg, var(--acento-2) 0%, var(--acento) var(--g));
  --acento-rgb: 194 31 91;
  /* Estados */
  --peligro: #b3261e;
  --ok: #17743a;
  --aviso: #9a4806;
  --interruptor-on: #1f9a50;
  /* Relieve: sombras en capas teñidas del tono del tema, luz superior y hueco de los campos */
  --sombra-rgb: 130 40 80;
  --luz: inset 0 1px 0 rgb(255 255 255 / calc(.9 * var(--e)));
  --relieve-1: 0 1px 1px rgb(var(--sombra-rgb) / calc(.06 * var(--e))), 0 2px 5px rgb(var(--sombra-rgb) / calc(.07 * var(--e))), 0 8px 18px -8px rgb(var(--sombra-rgb) / calc(.14 * var(--e)));
  --relieve-2: 0 1px 2px rgb(var(--sombra-rgb) / calc(.07 * var(--e))), 0 6px 12px rgb(var(--sombra-rgb) / calc(.09 * var(--e))), 0 16px 32px -10px rgb(var(--sombra-rgb) / calc(.2 * var(--e)));
  --relieve-3: 0 2px 4px rgb(var(--sombra-rgb) / calc(.09 * var(--e))), 0 14px 28px rgb(var(--sombra-rgb) / calc(.15 * var(--e))), 0 34px 70px -14px rgb(var(--sombra-rgb) / calc(.32 * var(--e)));
  --hundido: inset 0 1px 2px rgb(var(--sombra-rgb) / calc(.15 * var(--e))), inset 0 0 0 1px rgb(var(--sombra-rgb) / calc(.05 * var(--e)));
  --halo: 0 0 0 2px var(--superficie), 0 0 0 4px var(--acento), 0 0 16px 4px rgb(var(--acento-rgb) / calc(.34 * var(--e)));
  --sombra: 0 1px 1px rgb(var(--sombra-rgb) / calc(.06 * var(--e))), 0 2px 5px rgb(var(--sombra-rgb) / calc(.07 * var(--e))), 0 8px 18px -8px rgb(var(--sombra-rgb) / calc(.14 * var(--e)));
  /* Menú lateral y menús emergentes */
  --menu-fondo: linear-gradient(180deg, #fff5f9 0%, #fce4ed var(--g));
  --menu-borde: #efc6d6;
  --menu-activo: var(--acento-grad);
  /* Forma, letra y movimiento */
  --radio-1: 8px;
  --radio-2: 14px;
  --radio-3: 22px;
  --fuente-titulo: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --transicion: 180ms ease;
}


/* ═══════════════ Niveles de efectos: «ninguno» deja todo plano (van DESPUÉS de los temas: misma prioridad, gana el último) ═══════════════ */
[data-efectos="ninguno"] {
  --fondo-2: var(--fondo);
  --fondo-imagen: none;
  --superficie-alta: var(--superficie);
  --superficie-grad: linear-gradient(var(--superficie), var(--superficie));
  --acento-2: var(--acento);
  --acento-grad: linear-gradient(var(--acento), var(--acento));
  --menu-fondo: linear-gradient(var(--superficie), var(--superficie));
  --luz: inset 0 0 0 0 transparent;
  --relieve-1: 0 0 0 0 transparent;
  --relieve-2: 0 0 0 0 transparent;
  --relieve-3: 0 8px 24px rgb(var(--sombra-rgb) / .3);
  --hundido: inset 0 0 0 0 transparent;
  --halo: 0 0 0 2px var(--superficie), 0 0 0 4px var(--acento); /* el aviso de foco NO es un adorno: sigue igual de fuerte, solo sin resplandor */
  --sombra: 0 0 0 0 transparent;
  --transicion: 0s;
}

/* Quien prefiere menos movimiento no ve ninguna transición nueva. */
@media (prefers-reduced-motion: reduce) {
  :root, [data-tema], [data-efectos] { --transicion: 0s; }
}

/* ═══════════════ Cambiar de tema sin tirones ═══════════════
 * aspecto.js pone data-cambiando en <html> unos 120 ms cada vez que cambia el tema, el esquema o los efectos. Con eso las transiciones se
 * apagan justo en ese instante: si no, el navegador arrancaba de golpe unas 340 transiciones de sombras y bordes y el cambio daba un tirón
 * en un equipo justo. Solo apaga transiciones (no hay animaciones en esta hoja); pasados esos milisegundos todo vuelve a la normalidad. */
html[data-cambiando], html[data-cambiando] *, html[data-cambiando] *::before, html[data-cambiando] *::after { transition: none !important; }

/* ═══════════════ Contorno de los controles (≥ 3:1) ═══════════════
 * Las hojas de cada ventana pintan el contorno de campos, casillas, interruptores y deslizadores con --borde-fuerte, que es un borde de
 * separación suave (de 1,7 a 2,1:1 sobre la superficie). Para un CONTROL eso no basta: tiene que verse (≥ 3:1) sobre cualquier superficie.
 * Por eso, DENTRO de los controles, --borde-fuerte pasa a valer --borde-control: así lo usan sin tocar sus hojas, mientras las tarjetas,
 * las líneas y los botones con texto siguen con su borde suave. Va con [data-tema] delante para que, si el motor no llegara a cargar,
 * los controles conserven el borde de respaldo en lugar de quedarse sin borde. Se aplica con cualquier nivel de efectos.
 * (.compras-caja .cp es la lista de compras del panel: su campo guarda el borde en --cp-borde, que se calcula a partir de --borde-fuerte.) */
[data-tema] input, [data-tema] select, [data-tema] textarea, [data-tema] .compras-caja .cp { --borde-fuerte: var(--borde-control); }
/* Los campos de la app del iPhone (app.css) pintan su contorno con el borde suave de las tarjetas (--borde, ~1,3:1): aquí pasan al de control.
   Con la misma prioridad que app.css y cargada después, gana en reposo; el foco y los errores de app.css (más específicos) siguen mandando. */
.campo-texto, .buscador, .campo-codigo, .campo-fila { border-color: var(--borde-control, var(--borde)); }
/* La pastilla de las barras de desplazamiento (comun.css la pinta con --borde-fuerte); al pasar el puntero se oscurece, como antes. */
[data-tema]::-webkit-scrollbar-thumb, [data-tema] ::-webkit-scrollbar-thumb { background-color: var(--borde-control); }
[data-tema]::-webkit-scrollbar-thumb:hover, [data-tema] ::-webkit-scrollbar-thumb:hover { background-color: var(--texto-suave); }

/* Las notas flotantes y la lista de compras flotante son de papel claro en cualquier tema: el aviso de foco usa la tinta del papel (si no,
   con un tema oscuro el acento, que es claro, casi no se vería sobre el papel). */
body.nota { --halo: 0 0 0 2px var(--papel-blanco), 0 0 0 4px var(--papel-tinta); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
 * Selector de aspecto (.as-*): lo arma src/comun/aspecto-ui.js dentro de Ajustes (PC y iPhone).
 * Solo usa tokens: cada vista previa lleva el atributo data-* de la opción que muestra y se pinta con las reglas REALES de esa opción.
 *
 * Estructura (una sección por cosa que se elige):
 *   div.as-selector
 *     section.as-seccion[data-seccion]
 *       header.as-cab > h3.as-titulo + span.as-elegido      el nombre de lo elegido (así no depende solo del color)
 *       p.as-ayuda
 *       div.as-rejilla[role=radiogroup]
 *         button.as-tarjeta[role=radio][aria-checked]       la tarjeta: tocarla elige
 *           span.as-prev.as-prev-<clave>[data-<clave>]       la vista previa (decorativa)
 *           span.as-pie > span.as-nombre + span.as-desc
 *           span.as-marca                                    la marca ✓ (solo se ve en la elegida)
 *
 * Vistas previas de tapa, tono y mesa: las pinta B desde cuaderno-skins.css con los tokens de cada opción. Esta hoja solo les da
 * tamaño y un fondo neutro, que B cubre. Marcación de cada miniatura (todos son <span>; B los vuelve display:block/flex):
 *   .as-prev-tapa[data-tapa]    .as-tapa-lomo (> 3 × .as-tapa-anilla)  .as-tapa-marco (> .as-tapa-titulo + .as-tapa-etiqueta)
 *                               .as-tapa-goma  .as-tapa-cinta
 *   .as-prev-tono[data-tono]    .as-hoja-mini (> .as-hoja-margen + 4 × .as-hoja-renglon)
 *   .as-prev-mesa[data-mesa]    .as-mesa-sombra  .as-mesa-hoja
 * ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* El selector es un «contenedor»: cuántas columnas lleva cada rejilla depende del ANCHO DEL SELECTOR (no del de la ventana), así reparte en
 * filas completas lo mismo en el PC, en una ventana chica, en el iPhone y en el panel del Cuaderno. */
.as-selector { display: flex; flex-direction: column; gap: 26px; color: var(--texto); container-type: inline-size; container-name: as-selector; }
.as-seccion { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.as-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.as-titulo { margin: 0; font-family: var(--fuente-titulo); font-size: 16px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: var(--texto); }
.as-elegido { font-size: 13px; font-weight: 700; color: var(--acento); }
.as-ayuda { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--texto-suave); }
.as-nota { margin: 0; font-size: 13px; line-height: 1.4; color: var(--texto-suave); }

/* Columnas por sección. Las cuentas están hechas para que NINGUNA fila quede a medias:
 *   colores de la app (10): 5 columnas en ancho (2 filas) · 3 en medio y en el teléfono, con «Automático» ocupando una fila entera y las 9 demás en 3 filas
 *   tapas (12): 4 columnas (3 filas) · 3 en el teléfono (4 filas)
 *   papel (8): 4 columnas (2 filas) · 2 en el teléfono (4 filas)
 *   mesa (7): 4 columnas con «Según el tema» ocupando 2 (2 filas) · 3 con «Según el tema» ocupando la fila entera y las 6 demás en 2 filas
 *   relieve (3): 3 columnas · 1 si el selector es muy angosto
 * «Automático» y «Según el tema» son las que más texto llevan: al ocupar más de una columna su descripción cabe en 2 renglones y no agranda toda la fila.
 * Sin soporte de @container (iOS anterior al 16) quedan los valores del teléfono, que sirven en cualquier ancho. */
.as-rejilla {
  --as-cols: 3;
  --as-span-auto: 3;
  display: grid;
  grid-template-columns: repeat(var(--as-cols), minmax(0, 1fr));
  gap: 12px;
}
.as-seccion[data-seccion="tema"] .as-tarjeta[data-valor="auto"],
.as-seccion[data-seccion="mesa"] .as-tarjeta[data-valor="auto"] { grid-column: span var(--as-span-auto); }
.as-seccion[data-seccion="tono"] .as-rejilla { --as-cols: 2; }
.as-compacto .as-rejilla { gap: 6px; }
.as-compacto.as-selector { gap: 18px; }
@container as-selector (min-width: 420px) {
  .as-seccion[data-seccion="tapa"] .as-rejilla,
  .as-seccion[data-seccion="tono"] .as-rejilla { --as-cols: 4; }
  .as-seccion[data-seccion="mesa"] .as-rejilla { --as-cols: 4; --as-span-auto: 2; }
}
@container as-selector (min-width: 620px) {
  .as-seccion[data-seccion="tema"] .as-rejilla { --as-cols: 5; --as-span-auto: 1; }
}
@container as-selector (max-width: 289px) {
  .as-seccion[data-seccion="tema"] .as-rejilla { --as-cols: 2; --as-span-auto: 1; }
  .as-seccion[data-seccion="tapa"] .as-rejilla { --as-cols: 2; }
  .as-seccion[data-seccion="mesa"] .as-rejilla { --as-cols: 2; --as-span-auto: 2; }
  .as-seccion[data-seccion="efectos"] .as-rejilla { --as-cols: 1; }
}

/* ── secciones plegables (Ajustes del PC y del iPhone) ──
 * vista-ajustes.js envuelve cada sección en un <details> para que el selector entero no mida varias pantallas. La fila del resumen
 * lleva el título (h3.as-titulo) y el nombre de lo elegido (span.as-elegido), que AspectoUI sigue actualizando solo.
 *   div.as-selector.as-selector-plegable
 *     details.as-plegable[open]
 *       summary.as-resumen > h3.as-titulo + span.as-elegido
 *       section.as-seccion[data-seccion] > p.as-ayuda + div.as-rejilla */
.as-selector.as-selector-plegable { gap: 10px; }
.as-selector-plegable > .as-nota { margin-top: 6px; }
.as-plegable {
  min-width: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio-3);
  background-color: var(--superficie-2);
  box-shadow: var(--luz);
}
.as-resumen {
  display: flex;
  align-items: center;
  gap: 4px 12px;
  min-height: 48px;
  padding: 8px 14px;
  border-radius: var(--radio-3);
  cursor: pointer;
  list-style: none;
  scroll-margin-top: 8px; /* al abrir una sección en el teléfono, la pantalla deja su fila arriba con un respiro (ver vista-ajustes.js del iPhone) */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.as-resumen::-webkit-details-marker { display: none; }
.as-resumen .as-titulo { flex: 1 1 auto; min-width: 0; font-size: 15.5px; }
.as-resumen .as-elegido { flex: 0 1 auto; min-width: 0; text-align: right; overflow-wrap: anywhere; }
/* la flechita de abrir y cerrar: dos bordes girados (decorativa; el estado lo dice el propio <details>) */
.as-resumen::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 3px 3px 2px;
  border-right: 2px solid var(--texto-suave);
  border-bottom: 2px solid var(--texto-suave);
  transform: rotate(45deg);
  transition: transform var(--transicion);
}
.as-plegable[open] > .as-resumen { border-bottom: 1px solid var(--borde); border-radius: var(--radio-3) var(--radio-3) 0 0; }
.as-plegable[open] > .as-resumen::after { margin: 3px 3px 0 2px; transform: rotate(-135deg); }
.as-resumen:focus-visible { outline: 3px solid var(--acento); outline-offset: -3px; }
.as-plegable > .as-seccion { padding: 12px 14px 16px; }
@media (hover: hover) {
  .as-resumen:hover { background-image: linear-gradient(rgb(var(--sombra-rgb) / calc(.06 * var(--e))), rgb(var(--sombra-rgb) / calc(.06 * var(--e)))); }
  /* El velo del hover oscurece el fondo y el nombre elegido (13 px, color del acento) bajaba de 4,5:1 en el tema Rosa (4,38:1) y rozaba el
   * límite en Claro (4,50:1). Con el velo puesto se pinta con el acento fuerte, que sobre el mismo fondo da de 5,7 a 9:1 en todos los temas. */
  .as-resumen:hover .as-elegido { color: var(--acento-fuerte); }
}

/* ── tarjeta ── */
.as-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px;
  text-align: left;
  font: inherit;
  color: var(--texto);
  border: 2px solid var(--borde);
  border-radius: var(--radio-3);
  background-color: var(--superficie);
  background-image: var(--superficie-grad);
  box-shadow: var(--luz), var(--relieve-1);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
/* El «levantar al pasar» solo existe donde hay un puntero que pasa (ratón): en el iPhone :hover se queda pegado tras el toque y la tarjeta
 * quedaría «levantada» por algo que no es la elección. Con relieve «ninguno» (--e: 0) tampoco se mueve. */
@media (hover: hover) {
  .as-tarjeta:hover { transform: translateY(calc(-2px * var(--e))); border-color: var(--borde-fuerte); box-shadow: var(--luz), var(--relieve-2); }
}
.as-tarjeta:active { transform: translateY(0); box-shadow: var(--hundido); }
.as-tarjeta:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.as-tarjeta[aria-checked="true"] { border-color: var(--acento); box-shadow: var(--luz), var(--relieve-2), var(--halo); }
.as-pie { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 0 2px 2px; }
.as-nombre { font-size: 14.5px; line-height: 1.25; font-weight: 700; color: var(--texto); overflow-wrap: anywhere; }
.as-desc { font-size: 12.5px; line-height: 1.3; color: var(--texto-suave); }
.as-compacto .as-desc { display: none; }
/* Compacto = el teléfono (3 columnas en ~300 px) y el panel del Cuaderno: el nombre más largo de una sola palabra («Medianoche») tiene que caber
 * sin partirse a media palabra, incluso en un iPhone de 375 px, así que el relleno y la letra son un poco menores. */
.as-compacto .as-tarjeta { padding: 6px; gap: 6px; }
.as-compacto .as-pie { padding: 0; }
.as-compacto .as-nombre { font-size: 12px; letter-spacing: -.01em; }

/* La marca ✓ de «elegido»: un círculo del color del acento con la palomita; solo aparece en la tarjeta elegida. */
.as-marca {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--superficie);
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  color: var(--acento-texto);
  background-color: var(--acento);
  background-image: var(--acento-grad);
  box-shadow: var(--relieve-1);
}
.as-tarjeta[aria-checked="true"] .as-marca { display: flex; }

/* ── vista previa: marco común ── */
.as-prev {
  position: relative;
  display: block;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  background-color: var(--superficie-2);
}
.as-compacto .as-prev { height: 48px; }
.as-prev-tema, .as-prev-auto { height: 78px; }
.as-compacto .as-prev-tema, .as-compacto .as-prev-auto { height: 58px; }

/* ── maqueta de la app (temas): barra lateral + tarjetas, con los tokens reales del tema ── */
.as-prev-tema, .as-mq-mitad {
  display: flex;
  color: var(--texto);
  background-color: var(--fondo);
  background-image: var(--fondo-imagen);
}
.as-mq-menu {
  flex: 0 0 27%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 5px;
  border-right: 1px solid var(--menu-borde);
  background-image: var(--menu-fondo);
}
.as-mq-marca { display: block; width: 72%; height: 5px; margin-bottom: 3px; border-radius: 3px; background-color: var(--texto); opacity: .78; }
.as-mq-item { display: block; height: 7px; border-radius: 3px; background-color: var(--texto-suave); opacity: .38; }
.as-mq-item.as-mq-activo { background-color: var(--acento); background-image: var(--menu-activo); box-shadow: var(--luz); opacity: 1; }
.as-mq-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 6px 7px 6px; }
.as-mq-titulo { display: block; font: 700 11px/1 var(--fuente-titulo); color: var(--texto); letter-spacing: -.01em; }
.as-mq-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
  padding: 0 6px;
  height: 17px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-1);
  background-color: var(--superficie);
  background-image: var(--superficie-grad);
  box-shadow: var(--luz), var(--relieve-1);
}
.as-mq-linea { display: block; height: 3px; width: 70%; border-radius: 2px; background-color: var(--texto-suave); opacity: .5; }
.as-mq-linea.as-mq-corta { width: 42%; }
.as-mq-boton {
  display: block;
  width: 36%;
  height: 10px;
  margin-top: auto;
  border-radius: var(--radio-1);
  background-color: var(--acento);
  background-image: var(--acento-grad);
  box-shadow: var(--luz), 0 2px 4px rgb(var(--sombra-rgb) / calc(.3 * var(--e)));
}
/* «Automático»: dos mitades, una clara y una oscura. */
.as-prev-auto { display: grid; grid-template-columns: 1fr 1fr; }
.as-mq-mitad .as-mq-menu { flex-basis: 24%; }
.as-mq-mitad .as-mq-cuerpo { padding: 6px 5px; }
.as-mq-mitad + .as-mq-mitad { border-left: 1px solid var(--borde); }

/* ── Cuaderno: tapa, tono y mesa (los pinta cuaderno-skins.css; aquí solo un marco neutro y legible mientras tanto) ── */
.as-prev-tapa, .as-prev-tono, .as-prev-mesa { background-color: var(--superficie-2); }
.as-prev-tono { background-color: var(--superficie-hundida); }

/* ── efectos: una tarjeta y un botón con el relieve de cada nivel, en el tema que estás usando ── */
.as-prev-efectos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 8px;
  color: var(--texto);
  background-color: var(--fondo);
  background-image: var(--fondo-imagen);
}
/* Las sombras de esta miniatura son a propósito MÁS marcadas que las de la app (con el relieve normal de una tarjeta, Completos, Suaves y
 * Ninguno se veían casi iguales en un teléfono): así hay un salto claro entre los tres niveles. Siguen multiplicadas por --e, que vale 1, .5 y 0,
 * así que «Ninguno» queda sin sombra y plano de verdad, como la app con ese nivel. */
.as-ef-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 7px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-1);
  background-color: var(--superficie);
  background-image: var(--superficie-grad);
  box-shadow: var(--luz),
    0 1px 2px rgb(var(--sombra-rgb) / calc(.3 * var(--e))),
    0 calc(4px * var(--e)) calc(8px * var(--e)) rgb(var(--sombra-rgb) / calc(.28 * var(--e))),
    0 calc(12px * var(--e)) calc(18px * var(--e)) calc(-4px * var(--e)) rgb(var(--sombra-rgb) / calc(.45 * var(--e)));
}
.as-ef-boton {
  display: block;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--radio-1);
  background-color: var(--acento);
  background-image: var(--acento-grad);
  box-shadow: var(--luz),
    0 1px 2px rgb(var(--sombra-rgb) / calc(.4 * var(--e))),
    0 calc(5px * var(--e)) calc(9px * var(--e)) rgb(var(--sombra-rgb) / calc(.42 * var(--e)));
}
/* En el teléfono (selector compacto) los tres niveles van uno bajo otro: la miniatura grande se distingue mejor y cada nivel enseña su frase
 * («Todo plano; ideal si tu equipo va justo»), que es lo que le dice a la persona qué cambia al elegir. En las demás secciones el modo
 * compacto sigue sin descripciones (tres columnas muy angostas). */
.as-compacto .as-seccion[data-seccion="efectos"] .as-rejilla { --as-cols: 1; gap: 8px; }
.as-compacto .as-seccion[data-seccion="efectos"] .as-tarjeta { flex-direction: row; align-items: center; gap: 12px; padding: 8px 8px 8px 8px; }
.as-compacto .as-seccion[data-seccion="efectos"] .as-prev { flex: 0 0 44%; height: 58px; }
.as-compacto .as-seccion[data-seccion="efectos"] .as-pie { flex: 1 1 auto; gap: 2px; padding: 0 22px 0 0; }
.as-compacto .as-seccion[data-seccion="efectos"] .as-nombre { font-size: 14.5px; letter-spacing: 0; }
.as-compacto .as-seccion[data-seccion="efectos"] .as-desc { display: block; font-size: 12.5px; }

/* ── frase de arriba de la tarjeta «🎨 Aspecto» de Ajustes (PC y iPhone) ── */
.as-intro, .caja .as-intro, .tarjeta-ajustes .as-intro { margin: 0 0 14px; font-size: 13.5px; line-height: 1.4; color: var(--texto-suave); }

/* ── Ajustes del PC (src/renderer/vista-ajustes.js): clases pequeñas que reemplazan los «style=» que tenía a mano ──
 * (la política de seguridad de la ventana no debe depender de estilos en línea). Llevan un selector más específico que .ayuda y
 * .fila-botones de panel.css, que se carga después de esta hoja. */
.caja .ayuda.as-aj-pegada { margin-top: 0; }
.ayuda.as-aj-sin-margen { margin: 0; }
.fila-botones.as-aj-aire-abajo { margin-bottom: 8px; }
input.as-aj-mayusculas { text-transform: uppercase; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
 * Aspecto dentro del Cuaderno (lo arma src/comun/cuaderno-ui.js): el botón «🎨 Personalizar» de la portada y el diálogo con el selector.
 * Todo vive dentro de .cu-raiz, que lleva .cu-pc o .cu-iphone. Solo usa tokens, así sigue el tema que estés usando.
 *
 *   button.as-pers-btn > span.as-pers-ico + span.as-pers-txt        flota abajo a la derecha de la portada, en la mesa, fuera de la libreta.
 *                                                                   Si no hay sitio (ventana chica del PC, iPhone de pantalla corta) cuaderno-ui.js le
 *                                                                   pone .as-pers-solo-ico: queda solo el icono 🎨, en un círculo, y no tapa la tapa
 *   div.as-cu-fondo                                                 cubre el Cuaderno SIN oscurecerlo: ves el cambio detrás
 *     div.as-cu-dialogo[role=dialog]                                PC: panel a la derecha · iPhone: hoja que sube desde abajo
 *       div.as-cu-cab > div.as-cu-tit (h2.as-cu-titulo + p.as-cu-sub) + button.as-cu-cerrar
 *       div.as-cu-cuerpo > .as-selector (compacto)                  la única parte que se desplaza
 *       div.as-cu-pie > button.as-cu-listo
 * ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */

.as-pers-btn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  margin: 0;
  padding: 0 14px 0 11px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1;
  font-weight: 650;
  color: var(--texto);
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  background-color: var(--superficie);
  background-image: var(--superficie-grad);
  box-shadow: var(--luz), var(--relieve-2);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
@media (hover: hover) {
  .as-pers-btn:hover { transform: translateY(calc(-1px * var(--e))); border-color: var(--acento); box-shadow: var(--luz), var(--relieve-3); }
}
.as-pers-btn:active { transform: translateY(0); box-shadow: var(--hundido); }
.as-pers-btn:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.as-pers-ico { font-size: 16px; line-height: 1; }
.as-pers-txt { white-space: nowrap; }
.cu-iphone .as-pers-btn { right: 12px; bottom: 12px; min-height: 44px; padding: 0 16px 0 13px; font-size: 15px; }
/* Solo el icono (cuaderno-ui.js lo pone cuando la píldora con texto pisaría la libreta): un círculo del alto del botón. El texto sigue en el
 * DOM, recortado a 1 px, y el nombre accesible lo da el aria-label, así que el lector de pantalla dice lo mismo que antes. */
.as-pers-btn.as-pers-solo-ico { justify-content: center; width: 34px; padding: 0; }
.cu-iphone .as-pers-btn.as-pers-solo-ico { width: 44px; padding: 0; }
.as-pers-btn.as-pers-solo-ico .as-pers-ico { font-size: 17px; }
.as-pers-btn.as-pers-solo-ico .as-pers-txt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.as-cu-fondo { position: absolute; inset: 0; z-index: 2; display: flex; pointer-events: auto; }
.cu-pc .as-cu-fondo { justify-content: flex-end; align-items: stretch; padding: 10px; }
.cu-iphone .as-cu-fondo { justify-content: center; align-items: flex-end; }

.as-cu-dialogo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  color: var(--texto);
  border: 1px solid var(--borde-fuerte);
  background-color: var(--superficie-alta);
  box-shadow: var(--luz), var(--relieve-3);
}
.cu-pc .as-cu-dialogo { width: min(372px, 100%); border-radius: var(--radio-3); }
/* Ventana chica (cerca del tamaño mínimo): la libreta mide poco, así que el panel se angosta para dejar ver más de ella detrás */
@media (max-width: 1100px) {
  .cu-pc .as-cu-dialogo { width: min(304px, 100%); }
}
.cu-iphone .as-cu-dialogo { width: 100%; max-height: 56%; border-bottom: 0; border-radius: var(--radio-3) var(--radio-3) 0 0; }
.cu-iphone .as-cu-cab { align-items: center; padding: 10px 12px 10px 16px; }
.cu-iphone .as-cu-titulo { font-size: 17px; }
.cu-iphone .as-cu-sub { margin-top: 1px; }
.cu-iphone .as-cu-dialogo .as-cu-listo.cu-btn { min-width: 84px; }
/* Teléfono de lado (poca altura): la hoja sube más, porque a lo ancho la libreta se ve solo como una franja y las opciones necesitan lugar */
@media (max-height: 500px) {
  .cu-iphone .as-cu-dialogo { max-height: 82%; }
}

/* En el PC la libreta se corre a la izquierda mientras el panel está abierto (lo calcula cuaderno-ui.js; ver corrimientoParaElPanel) */
.cu-pc .cu-mesa { transition: transform var(--transicion); }
.cu-pc .as-cu-corrida .cu-mesa { transform: translateX(var(--as-corrimiento, 0px)); }

.as-cu-cab { flex: none; display: flex; align-items: flex-start; gap: 8px; padding: 14px 8px 10px 16px; }
.as-cu-tit { flex: 1; min-width: 0; }
.as-cu-titulo { margin: 0; font-family: var(--fuente-titulo); font-size: 18px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: var(--texto); }
.as-cu-sub { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: var(--texto-suave); }
.as-cu-dialogo .as-cu-cerrar { flex: none; color: var(--texto-suave); }

.as-cu-cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--borde);
  background-color: var(--superficie-2);
  box-shadow: var(--hundido);
}
.as-cu-pie { flex: none; display: flex; justify-content: flex-end; padding: 10px 16px 12px; border-top: 1px solid var(--borde); }
.as-cu-dialogo .as-cu-listo.cu-btn {
  flex: none;
  min-width: 104px;
  color: var(--acento-texto);
  border: 1px solid var(--acento-fuerte);
  background-color: var(--acento);
  background-image: var(--acento-grad);
  box-shadow: var(--luz), 0 2px 5px rgb(var(--sombra-rgb) / calc(.3 * var(--e)));
}
@media (hover: hover) {
  .as-cu-dialogo .as-cu-listo.cu-btn:hover:not(:disabled) { background-color: var(--acento-fuerte); background-image: none; }
}

@media (forced-colors: active) {
  .as-tarjeta[aria-checked="true"] { outline: 3px solid Highlight; }
  .as-pers-btn, .as-cu-dialogo { border: 1px solid CanvasText; }
  /* En contraste forzado (Windows) las sombras no se dibujan y el color de los bordes lo fija el sistema: el aviso de foco de los campos, las
     casillas, los interruptores y los deslizadores (que son un anillo de sombra) vuelve a ser un contorno de verdad. El «html» delante
     sube la prioridad por encima de los «outline: none» de las hojas de cada ventana. */
  html input:focus-visible, html select:focus-visible, html textarea:focus-visible,
  html input[type="checkbox"]:focus-visible, html input[type="range"]:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}