/* ============================================================
   Frauval — Portal de Pedidos
   portal.css — base + 5 temas (CSS variables)
   ============================================================ */

/* ---- Tokens base (heredados por todos los temas) ---- */
:root {
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --blur: 16px;
  --gap: 16px;
  --maxw: 980px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow-1: 0 2px 8px rgba(0,0,0,.18);
  --shadow-2: 0 12px 40px rgba(0,0,0,.28);
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter Tight", "Segoe UI", system-ui, sans-serif;
}

/* ---- Tema: Oscuro (por defecto) ---- */
[data-theme="oscuro"], :root {
  --bg-0: #0d1117;
  --bg-1: #141b24;
  --glass: rgba(30, 41, 54, .55);
  --glass-brd: rgba(255,255,255,.08);
  --txt-0: #e9eef5;
  --txt-1: #9aa7b5;
  --accent: #4f9cff;
  --accent-2: #7cd6c0;
  --danger: #ff6b6b;
  --ok: #59d499;
  --grad: radial-gradient(1200px 600px at 80% -10%, rgba(79,156,255,.22), transparent 60%),
          radial-gradient(900px 500px at -10% 110%, rgba(124,214,192,.16), transparent 55%);
}

/* ---- Tema: Medianoche ---- */
[data-theme="medianoche"] {
  --bg-0: #070a18;
  --bg-1: #0d1230;
  --glass: rgba(20, 26, 64, .55);
  --glass-brd: rgba(160,180,255,.12);
  --txt-0: #eaf0ff;
  --txt-1: #93a0d0;
  --accent: #8b7bff;
  --accent-2: #4fd8ff;
  --danger: #ff7a9c;
  --ok: #66e0b0;
  --grad: radial-gradient(1200px 600px at 80% -10%, rgba(139,123,255,.30), transparent 60%),
          radial-gradient(900px 500px at -10% 110%, rgba(79,216,255,.18), transparent 55%);
}

/* ---- Tema: Cálido ---- */
[data-theme="calido"] {
  --bg-0: #1a120b;
  --bg-1: #241810;
  --glass: rgba(58, 38, 24, .55);
  --glass-brd: rgba(255,210,160,.12);
  --txt-0: #fdeede;
  --txt-1: #c9a888;
  --accent: #ff9f47;
  --accent-2: #ffd36b;
  --danger: #ff6b6b;
  --ok: #c6d65a;
  --grad: radial-gradient(1200px 600px at 80% -10%, rgba(255,159,71,.26), transparent 60%),
          radial-gradient(900px 500px at -10% 110%, rgba(255,211,107,.16), transparent 55%);
}

/* ---- Tema: Claro ---- */
[data-theme="claro"] {
  --bg-0: #eef2f7;
  --bg-1: #e2e8f1;
  --glass: rgba(255, 255, 255, .68);
  --glass-brd: rgba(20,30,50,.10);
  --txt-0: #16202e;
  --txt-1: #5b6877;
  --accent: #2f6fed;
  --accent-2: #18a999;
  --danger: #e0455e;
  --ok: #1fa463;
  --shadow-2: 0 12px 40px rgba(40,60,90,.16);
  --grad: radial-gradient(1200px 600px at 80% -10%, rgba(47,111,237,.14), transparent 60%),
          radial-gradient(900px 500px at -10% 110%, rgba(24,169,153,.10), transparent 55%);
}

/* ---- Tema: Esmeralda ---- */
[data-theme="esmeralda"] {
  --bg-0: #06140f;
  --bg-1: #0a2019;
  --glass: rgba(14, 46, 36, .55);
  --glass-brd: rgba(140,255,210,.12);
  --txt-0: #e6fff4;
  --txt-1: #8fc7b2;
  --accent: #2fd6a0;
  --accent-2: #7cf0c8;
  --danger: #ff7a7a;
  --ok: #5ee6a8;
  --grad: radial-gradient(1200px 600px at 80% -10%, rgba(47,214,160,.24), transparent 60%),
          radial-gradient(900px 500px at -10% 110%, rgba(124,240,200,.14), transparent 55%);
}

/* ============================================================
   Reset + base
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--txt-0);
  background: var(--bg-0);
  background-image: var(--grad);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s var(--ease), color .4s var(--ease);
  min-height: 100dvh;
}
h1,h2,h3,.display { font-family: var(--font-display); letter-spacing: -.01em; }
a { color: var(--accent); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---- Layout shell ---- */
.app-shell { max-width: var(--maxw); margin: 0 auto; padding: 18px 16px 96px; }
.hidden { display: none !important; }

/* ---- Glass card ---- */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow-1);
}

/* ============================================================
   Login
   ============================================================ */
.login-wrap {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 380px;
  padding: 32px 28px;
  animation: rise .6s var(--ease) both;
}
.brand { text-align: center; margin-bottom: 24px; }
.brand .logo {
  font-family: var(--font-display);
  font-weight: 800; font-size: 28px;
  letter-spacing: -.02em;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand .sub { color: var(--txt-1); font-size: 13px; margin-top: 4px; }

.field { margin-bottom: 14px; }
.field label { display:block; font-size: 12px; color: var(--txt-1); margin-bottom: 6px; }
.field input {
  width: 100%; padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-brd);
  background: rgba(255,255,255,.04);
  color: var(--txt-0); font-size: 15px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.btn {
  width: 100%; padding: 13px;
  border: none; border-radius: var(--radius-md);
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #fff; font-weight: 700; font-size: 15px;
  transition: transform .15s var(--ease), filter .2s var(--ease);
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .55; cursor: wait; }
.btn-ghost {
  background: transparent; color: var(--txt-1);
  border: 1px solid var(--glass-brd);
}

.alert {
  font-size: 13px; padding: 10px 12px;
  border-radius: var(--radius-sm); margin-bottom: 12px;
}
.alert-err { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.alert-ok  { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }

/* ============================================================
   Onboarding
   ============================================================ */
.onb-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 24px;
}
.onb-card { width: 100%; max-width: 420px; padding: 30px 26px; text-align: center; animation: rise .5s var(--ease) both; }
.onb-emoji { font-size: 46px; margin-bottom: 10px; }
.onb-title { font-size: 22px; margin-bottom: 8px; }
.onb-body { color: var(--txt-1); font-size: 14px; line-height: 1.55; margin-bottom: 22px; }
.onb-dots { display:flex; gap:7px; justify-content:center; margin-bottom: 20px; }
.onb-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--glass-brd); transition: all .3s var(--ease); }
.onb-dots i.on { background: var(--accent); width: 22px; border-radius: 4px; }
.onb-actions { display:flex; gap:10px; }
.onb-skip { position:absolute; top:16px; right:18px; color: var(--txt-1); font-size:13px; background:none; border:none; }

/* ---- Top bar (app) ---- */
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom: 20px; }
.topbar .hi { font-size: 14px; color: var(--txt-1); }
.topbar .hi b { color: var(--txt-0); }
.topbar .row { display:flex; gap:10px; align-items:center; }
.iconbtn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--glass-brd); background: var(--glass);
  color: var(--txt-0); font-size: 17px; display:grid; place-items:center;
  transition: transform .15s var(--ease);
}
.iconbtn:active { transform: scale(.9); }

/* ---- Bottom nav ---- */
.nav {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
  display:flex; gap: 4px; padding: 6px;
  border-radius: 999px; z-index: 30;
}
.nav button {
  border: none; background: transparent; color: var(--txt-1);
  padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition: all .2s var(--ease);
}
.nav button.active { background: var(--accent); color: #fff; }
.nav button .ic { font-size: 17px; }

/* ---- Generic view + stub ---- */
.view { animation: fade .35s var(--ease) both; }
.stub {
  text-align:center; padding: 60px 24px; color: var(--txt-1);
}
.stub .e { font-size: 40px; margin-bottom: 12px; }

/* ---- Station selector ---- */
.stations { display:flex; flex-wrap:wrap; gap:10px; margin: 14px 0; }
.station-chip {
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--glass-brd); background: var(--glass);
  color: var(--txt-1); font-size: 13px; transition: all .2s var(--ease);
}
.station-chip.active { border-color: var(--accent); color: var(--txt-0); }

/* ---- Settings panel ---- */
.settings-grid { display:grid; gap: 18px; margin-top: 16px; }
.theme-swatches { display:flex; gap: 10px; flex-wrap:wrap; }
.swatch {
  width: 44px; height: 44px; border-radius: 12px; cursor:pointer;
  border: 2px solid transparent; transition: transform .15s var(--ease), border-color .2s;
}
.swatch:hover { transform: translateY(-2px); }
.swatch.active { border-color: var(--txt-0); }

/* ============================================================
   Animations
   ============================================================ */
@keyframes rise { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}