@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Patrick+Hand&family=Permanent+Marker&display=swap");
/* Base compartida (login + app). Lenguaje (8-nov-2026): boceto a mano — papel, tinta y rotulador rojo; Permanent Marker en títulos y cifras,
   Caveat en etiquetas, Patrick Hand en el texto. Los nombres de siempre (--bg, --fg, --ac…) apuntan a estos tokens: app.css los usa así.
   Sin secretos: se sirve sin sesión. */
:root{
  color-scheme:light dark;
  --paper:light-dark(#f7f7f4,#151514);
  --page:light-dark(#fff,#211f1d);              /* hoja: tarjetas, popovers, la libreta */
  --ink:light-dark(#1a1a1a,#f1f0ea);
  --pen:light-dark(#5b5b55,#a9a8a0);            /* lápiz: texto secundario (6:1 sobre el papel) */
  --rule:light-dark(#d6d5cc,#3b3a36);           /* renglones y separadores */
  --rojo:#e2231a;--rojo-ink:#fff;               /* rotulador rojo; lo que va encima, en blanco (4,7:1) */
  --rojo-mark:light-dark(rgba(226,35,26,.24),rgba(226,35,26,.45));
  --rojo-soft:light-dark(rgba(226,35,26,.12),rgba(226,35,26,.18));
  --marker:"Permanent Marker","Marker Felt",cursive;
  --script:"Caveat","Bradley Hand",cursive;
  --hand:"Patrick Hand","Chalkboard SE",system-ui,sans-serif;
  --font:var(--hand);
  --round:var(--marker);                        /* cifras grandes */
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --bg:var(--paper);
  --fg:var(--ink);
  --mut:var(--pen);
  --mut2:light-dark(#8a8981,#77766f);
  --line:var(--rule);
  --glass:var(--page);
  --glass2:var(--page);
  --fill:light-dark(rgba(26,26,26,.05),rgba(241,240,234,.07));
  --fill2:light-dark(rgba(26,26,26,.1),rgba(241,240,234,.14));
  --ac:var(--rojo);
  --ac-ink:var(--rojo-ink);
  --ac2:var(--fg);
  --watch:var(--rojo);
  --ok:light-dark(#2b8a3e,#69db7c);
  --bad:light-dark(#b42318,#ff8a80);
  --s0:var(--mut2);--s1:var(--ac);--s2:var(--ok);--s3:var(--rule);
  --sh:none;
  --out:cubic-bezier(.23,1,.32,1);
  --spring:cubic-bezier(.32,.72,0,1);
  --r:16px 22px 14px 24px/22px 14px 20px 16px; /* esquinas a mano: ninguna igual */
  --gut:clamp(16px,4vw,40px);
}
:root[data-theme=light]{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark}
*,::before,::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* font-synthesis: Patrick Hand y Permanent Marker no traen negrita; mejor la letra tal cual que una negrita falsa */
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--fg);font:400 18px/1.45 var(--font);letter-spacing:0;font-synthesis-weight:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
button{font:inherit;color:inherit;letter-spacing:inherit}
:focus-visible{outline:2.5px dashed var(--ink);outline-offset:3px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Tarjeta: una hoja con borde a mano */
.glass{background:var(--page);border:2px solid var(--ink);border-radius:var(--r);box-shadow:none}

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