/* Variables de theme, reset, layout y tipografía base. */
/* ============================================================
   PLATA CLARA — design system + 7 themes
   Fonts: Baloo 2 (display) · Nunito (body)
   Themes: Lila cute · Rosa · Celeste grid · Dark lime ·
           Pixel michi · Tinta · Marfil
   ============================================================ */
:root{
  /* default theme = Lila cute */
  --bg:#EDEAF6; --grid:#CBBFE8; --grid-op:.4;
  --cream:#FBFAFE; --cream2:#FFFFFF;
  --pink:#F6D2E6; --pink-dark:#E05A9B; --pink-soft:#FBEAF0;
  --lav:#A78BDB; --lav-light:#D7CDEE; --lav-soft:#E5DDF6;
  --purple:#8B6FC7; --purple-dark:#3D2E66;
  --mint:#CBEAD6; --mint-dark:#5BBF83; --peach:#F7DFC4; --peach-dark:#E39A56;
  --yellow:#FBF0C4; --blue-soft:#DCE6F9; --red:#F7C9D6; --red-dark:#C0396B;
  --ink:#3D2E66; --muted:#9A93B5;
  --radius:24px; --radius-sm:15px; --win-border:2.5px;
  --shadow:0 12px 30px rgba(61,46,102,.10);
  --shadow-hard:none;
  --grad:linear-gradient(90deg,#A78BDB,#7A63D8);
  --nav-bg:#FBFAFE; --nav-border:#D7CDEE; --fab:#3D2E66; --fab-ink:#fff;
  --font:'Nunito',sans-serif; --font-display:'Baloo 2',sans-serif;
  --pattern:dots;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  font-family:var(--font);
  background:var(--bg);
  min-height:100vh;
  color:var(--ink);
  transition:background-color .3s ease, color .3s ease;
  position:relative;
}
/* patterned backdrop */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:var(--grid-op);
  background-image:radial-gradient(var(--grid) 1.5px, transparent 1.5px);
  background-size:30px 30px;
}
body[data-pattern="grid"]::before{
  background-image:
    linear-gradient(var(--grid) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--grid) 1.5px, transparent 1.5px);
  background-size:28px 28px;
}
body[data-pattern="none"]::before{ background-image:none; }
#loadingScreen,#loginScreen,#appScreen{ position:relative; z-index:1; }

/* ---- layout shell (mobile-first phone column) ---- */
.appwrap{ max-width:460px; margin:0 auto; padding:16px 16px 108px; }
@media (min-width:900px){
  .appwrap{ max-width:760px; }
  .cols{ column-count:2; column-gap:16px; }
  .cols>*{ break-inside:avoid; }
}
.cols{ display:flex; flex-direction:column; gap:16px; }
@media (min-width:900px){ .cols{ display:block; } }

/* ---- misc ---- */
.chip{ display:inline-block; padding:3px 11px; border-radius:999px; font-size:11px; font-weight:800; }
h1,h2,h3{ margin:0 0 6px; color:var(--ink); font-family:var(--font-display); font-weight:800; }
a{ color:var(--purple); }
.center{ text-align:center; }
.muted{ color:var(--muted); font-size:12.5px; font-weight:600; }
.hidden{ display:none !important; }