/* Los temas y el puñado de reglas propias de Fast Sets (07-09-2026).

   Hasta hoy esto era un <style> de 566 líneas dentro de index.html. Se ha sacado a un archivo
   propio para poder quitar 'unsafe-inline' de style-src en la CSP (auditoría de seguridad A2,
   fase 3): para la política, un bloque <style> del documento es tan «inline» como un
   style="..." de un atributo, así que mientras estuviera ahí no había forma de cerrarla.
   Se descartó la otra salida, el nonce por petición: `/` lo sirve el service worker desde su
   caché (sw.js), así que el HTML guardado llevaría un nonce y la cabecera de una respuesta
   posterior otro, y la aplicación se vería sin un solo estilo sin que nada lo avisara.

   Este archivo NO lo genera Tailwind: se escribe a mano y se sirve tal cual (app/main.py,
   `/css/tema.css` con la huella en la URL y caché inmutable, igual que css/app.css y los js/).
   Por eso no hace falta recompilar nada para tocar un tema, que es lo que se toca.

   Va DESPUÉS de css/app.css en index.html, que es el orden que tenía el <style>: aquí se
   redefinen las utilidades de Tailwind en uso para que lean los tokens del tema, y para eso
   tienen que venir después.

   El bloque de paletas lo genera tools/temas.py y tools/probar_tema.py exige que sea
   exactamente el suyo, sin retoques a mano: si se cambia un color aquí, la medición de
   contraste de aquel script deja de valer. */

/* La portada viene visible en el marcado para quien no ejecuta JavaScript; con
   JavaScript, js/primero.js marca el documento desde el <head> y esta regla la
   esconde antes del primer pintado. La marca la quita navigateTo() (js/base.js) en
   cuanto el arranque decide qué pantalla toca. */
[data-arranque="pendiente"] #view-portada { display: none; }
/* Los enlaces a /privacidad y /condiciones (bloque C, 06-09-2026): solo se muestran
   cuando el servidor anuncia que las páginas legales están de verdad servidas
   (app/main.py::read_root, según settings.CONTACTO). Sin CONTACTO esas rutas dan 404
   -puerta_rgpd.md B.2-, y un enlace a un 404 es peor que no enlazar nada. */
#portada-legal, #delete-account-legal { display: none; }
html[data-papeles="1"] #portada-legal,
html[data-papeles="1"] #delete-account-legal { display: block; }
.touch-target { min-height: 48px; min-width: 48px; }
/* Pulsar dos veces seguidas un + o un − hacía zoom: el navegador móvil espera 300 ms
   a ver si el segundo toque llega, y si llega lo interpreta como doble toque para
   ampliar. `manipulation` le dice que en estos elementos no hay doble toque que
   esperar. No desactiva el pellizco para ampliar, que sí hace falta. */
button, input, select, textarea, label, [role="button"] { touch-action: manipulation; }
.dot { height: 10px; width: 10px; border-radius: 9999px; }

/* ---------------------------------------------------------------------------------
   TEMAS

   Dos ejes independientes: el tema (paleta, formas y tipografía) va en `data-tema`
   del <html>, y el modo (claro/oscuro) en la clase `.dark` de siempre. Cada tema
   define los mismos tokens para los dos modos, así que ningún tema se queda sin su
   versión oscura.

   El resto del archivo usa clases de Tailwind muy consistentes, así que en lugar de
   añadir una variante a cada elemento se redefinen abajo las utilidades en uso para
   que lean los tokens. Concentra el cambio en un sitio y no obliga a tocar 2.500
   líneas cada vez que se añade un tema.

   Las paletas y sus contrastes se generan y se miden en tools/temas.py: cada tema
   tiene tres alturas que se distinguen (página, filas, tarjetas) y todos los pares
   de texto y fondo llegan a 4,5:1.
   --------------------------------------------------------------------------------- */
:root[data-tema="clasico"] {
  --pagina: #f1f5f9;
  --fila: #f8fafc;
  --tarjeta: #ffffff;
  --borde: #e2e8f0;
  --texto: #0f172a;
  --texto-medio: #334155;
  --texto-suave: #64748b;
  --texto-tenue: #94a3b8;
  --acento: #2563eb;
  --acento-texto: #ffffff;
  --acento-suave: #eff6ff;
  --acento-fuerte: #1d4ed8;
  --aviso-fondo: #fffbeb;
  --aviso-fondo-fuerte: #fef3c7;
  --aviso-texto: #92400e;
  --peligro-fondo: #fef2f2;
  --peligro-texto: #b91c1c;
  --peligro-borde: #fecaca;
  --contraste: #0f172a;
  --contraste-texto: #f8fafc;
  --sombra: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
  --sombra-boton: none;
  --radio-tarjeta: 1.5rem;
  --radio-caja: 1rem;
  --radio-chip: 9999px;
  --fuente: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fuente-titulo: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --grosor-titulo: 600;
  --borde-grosor: 1px;
  --titulo-transform: none;
  --titulo-espaciado: normal;
  --boton-transform: none;
  --boton-espaciado: normal;
  --boton-peso: 600;
}
:root[data-tema="clasico"].dark {
  --pagina: #0B1120;
  --fila: #162034;
  --tarjeta: #1F2C44;
  --borde: #334155;
  --texto: #f1f5f9;
  --texto-medio: #cbd5e1;
  --texto-suave: #94a3b8;
  --texto-tenue: #64748b;
  --acento: #2563eb;
  --acento-texto: #ffffff;
  --acento-suave: #172554;
  --acento-fuerte: #93c5fd;
  --aviso-fondo: #422006;
  --aviso-fondo-fuerte: #78350f;
  --aviso-texto: #fcd34d;
  --peligro-fondo: #450a0a;
  --peligro-texto: #fca5a5;
  --peligro-borde: #7f1d1d;
  --contraste: #e2e8f0;
  --contraste-texto: #0f172a;
  --sombra: 0 0 0 1px #334155;
  --sombra-boton: none;
}
:root[data-tema="papel"] {
  --pagina: #EFE7D8;
  --fila: #F7F2E7;
  --tarjeta: #FFFDF7;
  --borde: #D9CDB6;
  --texto: #2A251E;
  --texto-medio: #4A4136;
  --texto-suave: #6B6052;
  --texto-tenue: #8F8474;
  --acento: #8A5A2B;
  --acento-texto: #FFFDF7;
  --acento-suave: #F2E6D4;
  --acento-fuerte: #6B4520;
  --aviso-fondo: #FBF0D5;
  --aviso-fondo-fuerte: #F3E0B0;
  --aviso-texto: #7A5310;
  --peligro-fondo: #F9E5DF;
  --peligro-texto: #A63423;
  --peligro-borde: #E4BCB2;
  --contraste: #2A251E;
  --contraste-texto: #FFFDF7;
  --sombra: 0 1px 2px 0 rgba(42, 37, 30, 0.12);
  --sombra-boton: none;
  --radio-tarjeta: 0.5rem;
  --radio-caja: 0.375rem;
  --radio-chip: 0.25rem;
  --fuente: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --fuente-titulo: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --grosor-titulo: 700;
  --borde-grosor: 1px;
  --titulo-transform: none;
  --titulo-espaciado: normal;
  --boton-transform: none;
  --boton-espaciado: normal;
  --boton-peso: 600;
}
:root[data-tema="papel"].dark {
  --pagina: #17130E;
  --fila: #241E16;
  --tarjeta: #302820;
  --borde: #4A3E2F;
  --texto: #F4EDDF;
  --texto-medio: #DBD0BB;
  --texto-suave: #B0A48E;
  --texto-tenue: #877C68;
  --acento: #C08A4A;
  --acento-texto: #17130E;
  --acento-suave: #3A2C18;
  --acento-fuerte: #E3B87C;
  --aviso-fondo: #3B2C0C;
  --aviso-fondo-fuerte: #5C4512;
  --aviso-texto: #F0CE7E;
  --peligro-fondo: #3B1712;
  --peligro-texto: #F0A292;
  --peligro-borde: #6B2A20;
  --contraste: #F4EDDF;
  --contraste-texto: #17130E;
  --sombra: 0 0 0 1px #4A3E2F;
  --sombra-boton: none;
}
:root[data-tema="terminal"] {
  --pagina: #E4EBE6;
  --fila: #F1F5F2;
  --tarjeta: #FFFFFF;
  --borde: #BFCEC4;
  --texto: #0F231A;
  --texto-medio: #24402F;
  --texto-suave: #4A6455;
  --texto-tenue: #6F8478;
  --acento: #0B6E44;
  --acento-texto: #FFFFFF;
  --acento-suave: #DCF0E5;
  --acento-fuerte: #075435;
  --aviso-fondo: #FBF3D8;
  --aviso-fondo-fuerte: #F3E4AE;
  --aviso-texto: #6E5406;
  --peligro-fondo: #FBE7E5;
  --peligro-texto: #B02218;
  --peligro-borde: #E8BDB8;
  --contraste: #0F231A;
  --contraste-texto: #F1F5F2;
  --sombra: 0 1px 0 0 #BFCEC4;
  --sombra-boton: none;
  --radio-tarjeta: 0.25rem;
  --radio-caja: 0.125rem;
  --radio-chip: 0.125rem;
  --fuente: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
  --fuente-titulo: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
  --grosor-titulo: 700;
  --borde-grosor: 1px;
  --titulo-transform: none;
  --titulo-espaciado: normal;
  --boton-transform: none;
  --boton-espaciado: normal;
  --boton-peso: 600;
}
:root[data-tema="terminal"].dark {
  --pagina: #04100A;
  --fila: #0C1D14;
  --tarjeta: #14291D;
  --borde: #255338;
  --texto: #D8F5E5;
  --texto-medio: #A9DCC0;
  --texto-suave: #79AE92;
  --texto-tenue: #568570;
  --acento: #10B981;
  --acento-texto: #04100A;
  --acento-suave: #062E1E;
  --acento-fuerte: #6EE7B7;
  --aviso-fondo: #3A3007;
  --aviso-fondo-fuerte: #57490D;
  --aviso-texto: #EBD97C;
  --peligro-fondo: #3B1110;
  --peligro-texto: #F5A29B;
  --peligro-borde: #6E2320;
  --contraste: #D8F5E5;
  --contraste-texto: #04100A;
  --sombra: 0 0 0 1px #255338;
  --sombra-boton: none;
}
:root[data-tema="oceano"] {
  --pagina: #E2EFF4;
  --fila: #F1F8FB;
  --tarjeta: #FFFFFF;
  --borde: #C4DCE6;
  --texto: #0B2733;
  --texto-medio: #17414F;
  --texto-suave: #446B7C;
  --texto-tenue: #7BA1B1;
  --acento: #0E7490;
  --acento-texto: #FFFFFF;
  --acento-suave: #DDF2F8;
  --acento-fuerte: #0A566C;
  --aviso-fondo: #FDF3DC;
  --aviso-fondo-fuerte: #F8E3B4;
  --aviso-texto: #7A5310;
  --peligro-fondo: #FCEBEA;
  --peligro-texto: #BE2A20;
  --peligro-borde: #F0C2BE;
  --contraste: #0B2733;
  --contraste-texto: #F1F8FB;
  --sombra: 0 1px 3px 0 rgba(11, 39, 51, 0.10);
  --sombra-boton: none;
  --radio-tarjeta: 2rem;
  --radio-caja: 1.25rem;
  --radio-chip: 9999px;
  --fuente: ui-rounded, 'SF Pro Rounded', 'Nunito', 'Segoe UI Variable', 'Trebuchet MS', sans-serif;
  --fuente-titulo: ui-rounded, 'SF Pro Rounded', 'Nunito', 'Segoe UI Variable', 'Trebuchet MS', sans-serif;
  --grosor-titulo: 700;
  --borde-grosor: 1px;
  --titulo-transform: none;
  --titulo-espaciado: normal;
  --boton-transform: none;
  --boton-espaciado: normal;
  --boton-peso: 600;
}
:root[data-tema="oceano"].dark {
  --pagina: #04141C;
  --fila: #0A2331;
  --tarjeta: #113243;
  --borde: #1F4D62;
  --texto: #E3F4FA;
  --texto-medio: #B7DEEB;
  --texto-suave: #84B6C8;
  --texto-tenue: #5B8595;
  --acento: #0891B2;
  --acento-texto: #04141C;
  --acento-suave: #05303F;
  --acento-fuerte: #67E8F9;
  --aviso-fondo: #3A2E0A;
  --aviso-fondo-fuerte: #584710;
  --aviso-texto: #F0D68A;
  --peligro-fondo: #3B1512;
  --peligro-texto: #F3A69C;
  --peligro-borde: #6D2822;
  --contraste: #E3F4FA;
  --contraste-texto: #04141C;
  --sombra: 0 0 0 1px #1F4D62;
  --sombra-boton: none;
}
:root[data-tema="hierro"] {
  --pagina: #D9DCE0;
  --fila: #E9EBEE;
  --tarjeta: #F4F5F7;
  --borde: #8F959D;
  --texto: #14171B;
  --texto-medio: #343A41;
  --texto-suave: #5C6470;
  --texto-tenue: #8A929C;
  --acento: #C2410C;
  --acento-texto: #FFFFFF;
  --acento-suave: #FBE4D8;
  --acento-fuerte: #9A3412;
  --aviso-fondo: #F7EFD6;
  --aviso-fondo-fuerte: #EDDFAE;
  --aviso-texto: #6E4C0C;
  --peligro-fondo: #F9E4E2;
  --peligro-texto: #B02218;
  --peligro-borde: #E3B7B2;
  --contraste: #14171B;
  --contraste-texto: #F4F5F7;
  --sombra: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(20, 23, 27, 0.18), 0 0 0 2px #8F959D, 4px 4px 0 0 #14171B;
  --sombra-boton: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 3px 3px 0 0 #14171B;
  --radio-tarjeta: 0.375rem;
  --radio-caja: 0.25rem;
  --radio-chip: 0.125rem;
  --fuente: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fuente-titulo: 'Avenir Next Condensed', 'Roboto Condensed', 'Arial Narrow', 'Helvetica Neue', system-ui, sans-serif;
  --grosor-titulo: 800;
  --borde-grosor: 2px;
  --titulo-transform: uppercase;
  --titulo-espaciado: 0.04em;
  --boton-transform: uppercase;
  --boton-espaciado: 0.06em;
  --boton-peso: 800;
}
:root[data-tema="hierro"].dark {
  --pagina: #0B0D10;
  --fila: #171A1E;
  --tarjeta: #22262B;
  --borde: #4A5058;
  --texto: #E9ECEF;
  --texto-medio: #C5CBD2;
  --texto-suave: #A0A8B2;
  --texto-tenue: #6E7680;
  --acento: #F97316;
  --acento-texto: #14171B;
  --acento-suave: #3A1C0A;
  --acento-fuerte: #FDBA74;
  --aviso-fondo: #3A2E0A;
  --aviso-fondo-fuerte: #584710;
  --aviso-texto: #F0D68A;
  --peligro-fondo: #3B1512;
  --peligro-texto: #F3A69C;
  --peligro-borde: #6D2822;
  --contraste: #E9ECEF;
  --contraste-texto: #0B0D10;
  --sombra: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.6), 0 0 0 2px #4A5058, 4px 4px 0 0 #000000;
  --sombra-boton: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 3px 3px 0 0 #000000;
}
:root[data-tema="tinta"] {
  --pagina: #EDEDED;
  --fila: #F6F6F6;
  --tarjeta: #FFFFFF;
  --borde: #111111;
  --texto: #111111;
  --texto-medio: #3D3D3D;
  --texto-suave: #616161;
  --texto-tenue: #8A8A8A;
  --acento: #111111;
  --acento-texto: #FFFFFF;
  --acento-suave: #EBEBEB;
  --acento-fuerte: #000000;
  --aviso-fondo: #EFEFEF;
  --aviso-fondo-fuerte: #DADADA;
  --aviso-texto: #1F1F1F;
  --peligro-fondo: #FDECEC;
  --peligro-texto: #B91C1C;
  --peligro-borde: #B91C1C;
  --contraste: #111111;
  --contraste-texto: #FFFFFF;
  --sombra: 0 0 0 1px #111111;
  --sombra-boton: none;
  --radio-tarjeta: 0.25rem;
  --radio-caja: 0.125rem;
  --radio-chip: 0.125rem;
  --fuente: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;
  --fuente-titulo: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;
  --grosor-titulo: 800;
  --borde-grosor: 1px;
  --titulo-transform: none;
  --titulo-espaciado: -0.02em;
  --boton-transform: none;
  --boton-espaciado: 0;
  --boton-peso: 700;
}
:root[data-tema="tinta"].dark {
  --pagina: #000000;
  --fila: #121212;
  --tarjeta: #1C1C1C;
  --borde: #D0D0D0;
  --texto: #F5F5F5;
  --texto-medio: #D0D0D0;
  --texto-suave: #9E9E9E;
  --texto-tenue: #6E6E6E;
  --acento: #F5F5F5;
  --acento-texto: #000000;
  --acento-suave: #262626;
  --acento-fuerte: #FFFFFF;
  --aviso-fondo: #262626;
  --aviso-fondo-fuerte: #383838;
  --aviso-texto: #EDEDED;
  --peligro-fondo: #3A1414;
  --peligro-texto: #F5A3A3;
  --peligro-borde: #F5A3A3;
  --contraste: #F5F5F5;
  --contraste-texto: #000000;
  --sombra: 0 0 0 1px #D0D0D0;
  --sombra-boton: none;
}
:root[data-tema="lila"] {
  --pagina: #EEEAF6;
  --fila: #F6F3FB;
  --tarjeta: #FFFFFF;
  --borde: #F6F3FB;
  --texto: #1E1533;
  --texto-medio: #3D3157;
  --texto-suave: #625780;
  --texto-tenue: #9187AC;
  --acento: #6D28D9;
  --acento-texto: #FFFFFF;
  --acento-suave: #EFE8FB;
  --acento-fuerte: #4C1D95;
  --aviso-fondo: #FBF1D6;
  --aviso-fondo-fuerte: #F3E1AD;
  --aviso-texto: #7A5310;
  --peligro-fondo: #FBE7E5;
  --peligro-texto: #B02218;
  --peligro-borde: #E8BDB8;
  --contraste: #1E1533;
  --contraste-texto: #F6F3FB;
  --sombra: 0 6px 18px rgba(76, 29, 149, 0.10);
  --sombra-boton: 0 4px 12px rgba(109, 40, 217, 0.22);
  --radio-tarjeta: 2.5rem;
  --radio-caja: 1.5rem;
  --radio-chip: 9999px;
  --fuente: 'Avenir Next', 'Century Gothic', Futura, 'Segoe UI Light', 'sans-serif-light', sans-serif;
  --fuente-titulo: 'Avenir Next', 'Century Gothic', Futura, 'Segoe UI Light', 'sans-serif-light', sans-serif;
  --grosor-titulo: 700;
  --borde-grosor: 1px;
  --titulo-transform: none;
  --titulo-espaciado: 0.01em;
  --boton-transform: none;
  --boton-espaciado: normal;
  --boton-peso: 700;
}
:root[data-tema="lila"].dark {
  --pagina: #0F0A1E;
  --fila: #1A1230;
  --tarjeta: #251A40;
  --borde: #251A40;
  --texto: #F1ECFB;
  --texto-medio: #CFC4E6;
  --texto-suave: #A296C4;
  --texto-tenue: #6F6490;
  --acento: #A78BFA;
  --acento-texto: #0F0A1E;
  --acento-suave: #2A1D4D;
  --acento-fuerte: #C4B5FD;
  --aviso-fondo: #3A2E0A;
  --aviso-fondo-fuerte: #584710;
  --aviso-texto: #F0D68A;
  --peligro-fondo: #3B1512;
  --peligro-texto: #F3A69C;
  --peligro-borde: #6D2822;
  --contraste: #F1ECFB;
  --contraste-texto: #0F0A1E;
  --sombra: 0 0 0 1px #3E2F63, 0 8px 22px rgba(167, 139, 250, 0.12);
  --sombra-boton: 0 4px 14px rgba(167, 139, 250, 0.22);
}

/* Uso de los tokens. Un solo bloque para los cuatro temas y los dos modos. */
html, body { font-family: var(--fuente); }
h1, h2, h3 { font-family: var(--fuente-titulo); font-weight: var(--grosor-titulo); }
body { background: var(--pagina); }
.bg-slate-100 { background-color: var(--pagina) !important; }   /* página */
.bg-slate-50 { background-color: var(--fila) !important; }      /* filas e inputs */
.bg-white { background-color: var(--tarjeta) !important; }      /* tarjetas */
/* La barra superior va translúcida donde el navegador entienda color-mix; donde no,
   se queda opaca, que es peor estéticamente pero nunca ilegible. */
.bg-white\/95 { background-color: var(--tarjeta) !important; }
.bg-white\/95 { background-color: color-mix(in srgb, var(--tarjeta) 95%, transparent) !important; }
/* En oscuro la sombra no se ve: cada tema decide si su `shadow-sm` es sombra o borde. */
.shadow-sm { box-shadow: var(--sombra) !important; }
.text-slate-900 { color: var(--texto) !important; }
.text-slate-800, .text-slate-700 { color: var(--texto-medio) !important; }
.text-slate-600, .text-slate-500 { color: var(--texto-suave) !important; }
.text-slate-400 { color: var(--texto-tenue) !important; }
.border-slate-200, .border-slate-100, .border-slate-300 { border-color: var(--borde) !important; }
/* El botón primario lleva su color de texto con él: en algunos temas el acento es
   demasiado claro para blanco encima y toca texto oscuro. */
.bg-blue-600 { background-color: var(--acento) !important; color: var(--acento-texto) !important; }
.text-blue-600, .text-blue-700 { color: var(--acento-fuerte) !important; }
.bg-blue-50 { background-color: var(--acento-suave) !important; }
.border-blue-200 { border-color: var(--acento-suave) !important; }
.border-blue-400, .border-blue-600, .hover\:border-blue-400:hover { border-color: var(--acento) !important; }
.bg-amber-50 { background-color: var(--aviso-fondo) !important; }
.bg-amber-100 { background-color: var(--aviso-fondo-fuerte) !important; }
.text-amber-700, .text-amber-800 { color: var(--aviso-texto) !important; }
/* El chip «Sin conexión» de la cabecera: su borde es el fondo fuerte del aviso, para no
   estrenar un token por un solo elemento. */
/* El toast de estado -conexión y, como segunda línea, los cambios sin enviar-: discreto y
   semitransparente, con los colores del tema para que valga en claro y en oscuro. Fuera
   del flujo: aparecer y desaparecer no mueve nada de sitio. La primera línea de cada par
   es el fondo para navegadores sin color-mix. */
#estado-conexion {
  background: var(--tarjeta);
  background: color-mix(in srgb, var(--tarjeta) 74%, transparent);
  color: var(--texto-medio);
  border: 1px solid var(--borde);
  border-color: color-mix(in srgb, var(--borde) 70%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--sombra);
  border-radius: 1rem; padding: 0.45rem 0.85rem;
  font-size: 0.75rem; font-weight: 600; line-height: 1.1; white-space: nowrap;
}
#estado-conexion > #pending-ops-indicator { font-size: 0.68rem; font-weight: 500; color: var(--texto-suave); }
#rest-timer-badge { font-variant-numeric: tabular-nums; }
#exercise-fields input[type="checkbox"] { accent-color: var(--acento); }
.bg-red-50 { background-color: var(--peligro-fondo) !important; }
.text-red-600 { color: var(--peligro-texto) !important; }
.border-red-200 { border-color: var(--peligro-borde) !important; }
.bg-slate-900 { background-color: var(--contraste) !important; color: var(--contraste-texto) !important; }
/* La forma de los marcos, que es lo que más cambia la cara de un tema. */
.rounded-3xl { border-radius: var(--radio-tarjeta) !important; }
.rounded-2xl { border-radius: var(--radio-caja) !important; }
.rounded-full { border-radius: var(--radio-chip) !important; }
/* Y el carácter (2026-08-28): grosor de los bordes, títulos y botones en mayúsculas o
   no y con qué espaciado, peso de los botones, y una sombra propia para el botón
   primario. Los cuatro temas de siempre lo dejan todo «como hasta ahora». */
.border { border-width: var(--borde-grosor) !important; }
h1, h2, h3 { text-transform: var(--titulo-transform); letter-spacing: var(--titulo-espaciado); }
/* Con !important: el preflight de Tailwind pone `text-transform: none` en button y se carga después. */
button { text-transform: var(--boton-transform) !important; letter-spacing: var(--boton-espaciado) !important; }
button.font-semibold { font-weight: var(--boton-peso) !important; }
/* La barra superior queda fuera: son iconos y «Salir», y en inglés «LOG OUT» en
   mayúsculas espaciadas no cabía en 400 px y partía la fila. */
.fixed.top-0 button { text-transform: none !important; letter-spacing: normal !important; border-width: 1px !important; font-weight: 600 !important; }
#estado-conexion, #rest-timer-badge { text-transform: none !important; letter-spacing: normal !important; }
.bg-blue-600 { box-shadow: var(--sombra-boton); }
.dark .shadow-lg, .dark .shadow-2xl { --tw-shadow-color: rgba(0, 0, 0, 0.6); }
input, select, textarea { color: var(--texto); }
.dark input, .dark select, .dark textarea { color-scheme: dark; }
/* Los input[type=number] pintan sus propias flechas arriba/abajo, que sobran
   ahora que peso y reps tienen botones +/- grandes. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
/* Va después del bloque de tokens a propósito: `.shadow-sm` pinta ahí su propia
   sombra y, con la misma especificidad, gana la última declarada. Sin esto la tarjeta
   seleccionada no se distinguía en oscuro. */
.card-selected { border-color: var(--acento) !important; box-shadow: 0 0 0 3px var(--acento) !important; }
/* Hoy, en el calendario: borde de acento y el número en un círculo, para saber en qué
   día estás sin contar casillas. Distinto del seleccionado, que lleva el anillo de 3 px. */
.celda-hoy { border-color: var(--acento) !important; border-width: 2px; }
.celda-hoy-numero { background: var(--acento); color: var(--acento-texto); }
/* Los campos de fecha: iOS les pone un ancho propio que ignora el de la caja y los sacaba
   de la tarjeta; sin el aspecto nativo obedecen al ancho, y el valor va a la izquierda. */
input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; min-height: 3rem; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
/* Todo lo que responde a mantener pulsado. Sin esto, el navegador móvil interpreta
   el gesto como «selecciona esta palabra» y saca el menú de copiar o buscar encima de
   las acciones que se acaban de abrir. */
.pulsacion-larga {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* El marco de las capturas de la portada (bloque E, 06-09-2026): ancho máximo de
   móvil, centrado. El borde, el radio y la sombra los ponen las propias utilidades de
   Tailwind de la línea de abajo (`rounded-3xl`, `border border-slate-200`, `shadow-sm`,
   `bg-white`), que ya leen los tokens del tema más arriba -no hay que repetirlos aquí, y
   así el marco cambia de color y de grosor con el resto de tarjetas. Solo el ancho
   máximo y el recorte de las esquinas son propios: no hay una utilidad de Tailwind ya
   compilada para "300px" y añadir una de arbitrio exigiría recompilar css/app.css
   (tools/compilar_css.py) por tres líneas de CSS. */
.clip-marco { display: block; max-width: 300px; margin: 0 auto; overflow: hidden; }
.clip-imagen { display: block; width: 100%; height: auto; }
