/* Knock Knock — tema Moderno (oscuro) */

:root{
  /* ---- Paleta Oboria (por defecto) ---- */
  --bg:#0c0f15; --bg-glow:#1a2130;
  --sfc:#141a24; --sfc-deep:#10151d; --sfc2:#1b2330; --input-bg:#0d1219;
  --line:rgba(255,255,255,.09);
  --txt:#eaf0f8; --mut:#8794a8;
  --accent:#8a5cf6; --accent-2:#a984ff; --on-accent:#fff;
  --ok:#3ad07f; --work:#f4b740; --err:#f26d66;
  --ring-track:rgba(255,255,255,.18);
  /* Declara el esquema para que el WebView de Android NO aplique su modo
     oscuro forzado (que lavaba el morado de Oboria). */
  color-scheme: dark;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, Consolas, monospace;
}

/* ---- Paleta Saco: rojo y negro puros ---- */
:root[data-company="saco"]{
  --bg:#000000; --bg-glow:#2a0000;
  --sfc:#141414; --sfc-deep:#0a0a0a; --sfc2:#1c1c1c; --input-bg:#0d0d0d;
  --line:rgba(255,255,255,.10);
  --txt:#f5f5f5; --mut:#9a9a9a;
  --accent:#ff0000; --accent-2:#ff3b3b; --on-accent:#fff;
}

/* ---- Paleta Vubari: azul #0063be sobre blanco puro (claro) ---- */
:root[data-company="vubari"]{
  --bg:#ffffff; --bg-glow:#e8f1fb;
  --sfc:#ffffff; --sfc-deep:#f3f6fa; --sfc2:#eef3f9; --input-bg:#ffffff;
  --line:rgba(0,0,0,.12);
  --txt:#0f172a; --mut:#5b6472;
  --accent:#0063be; --accent-2:#2a86e0; --on-accent:#fff;
  --ok:#12a150; --work:#b26a00; --err:#d13c3c;
  --ring-track:rgba(0,0,0,.14);
  color-scheme: light;   /* Vubari es tema claro */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:var(--font-ui); color:var(--txt);
  background:radial-gradient(120% 80% at 50% -10%, var(--bg-glow), var(--bg) 70%);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ---------- Layout puerta ---------- */
.wrap{
  min-height:100dvh; max-width:460px; margin:0 auto;
  display:flex; flex-direction:column;
  padding:max(28px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom));
}
.topbar{ display:flex; align-items:center; justify-content:space-between; }
.hello{ font-size:14px; color:var(--mut); }
.hello b{ color:var(--txt); font-weight:700; }
.cos{ display:flex; align-items:center; gap:6px; }
.co{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:var(--mut);
  border:1px solid var(--line); border-radius:6px; padding:2px 6px; opacity:.55; transition:.2s; }
.co.is-active{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, var(--line));
  opacity:1; font-weight:700; letter-spacing:.02em; }
/* Easter egg: siglas pulsables para cambiar el tema en vivo */
.cos.switchable .co{ cursor:pointer; user-select:none; }
.cos.switchable .co:hover{ opacity:1; border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); }
.cos.switchable .co:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Banner de cumpleaños */
.bday{ margin-top:16px; display:flex; align-items:center; justify-content:center; gap:11px;
  padding:12px 16px; border-radius:16px; text-align:center; font-size:13.5px; line-height:1.45; color:var(--txt);
  border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background:color-mix(in srgb, var(--accent) 12%, transparent); }
.bday .cake{ font-size:20px; line-height:1; flex:none; }
.bday b{ color:var(--accent); font-weight:700; }

.hero{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:20px; }
.lead{ text-align:center; }
.lead h1{ font-size:25px; font-weight:780; letter-spacing:-.02em; margin:0; }
.lead p{ font-size:13.5px; color:var(--mut); margin:6px 0 0; }

.card{
  position:relative; border:1px solid var(--line); border-radius:26px; padding:24px 22px 26px;
  background:linear-gradient(180deg, var(--sfc), var(--sfc-deep));
  display:flex; flex-direction:column; gap:18px; overflow:hidden;
  transition:border-color .3s, box-shadow .3s;
}
.card::before{ content:""; position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .4s;
  background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 55%); }
.card[data-state="working"]{ border-color:color-mix(in srgb,var(--work) 55%,var(--line)); }
.card[data-state="open"]{ border-color:color-mix(in srgb,var(--ok) 60%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ok) 30%,transparent), 0 20px 50px -24px color-mix(in srgb,var(--ok) 60%,transparent); }
.card[data-state="open"]::before{ opacity:1; background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--ok) 18%,transparent), transparent 55%); }
.card[data-state="error"]{ border-color:color-mix(in srgb,var(--err) 55%,var(--line)); }

.card-head{ display:flex; align-items:center; gap:14px; }
.ico{ width:52px; height:52px; border-radius:16px; flex:none; display:grid; place-items:center;
  background:var(--sfc2); border:1px solid var(--line); color:var(--accent-2); }
.ico svg{ width:27px; height:27px; }
.card-name{ font-size:18px; font-weight:730; letter-spacing:-.01em; }
.card-sub{ font-size:12.5px; color:var(--mut); margin-top:1px; }
.chip{ margin-left:auto; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; padding:6px 11px;
  border-radius:999px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  background:var(--sfc2); border:1px solid var(--line); color:var(--mut); }
.chip .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.card[data-state="working"] .chip{ color:var(--work); border-color:color-mix(in srgb,var(--work) 40%,var(--line)); }
.card[data-state="open"] .chip{ color:var(--ok); border-color:color-mix(in srgb,var(--ok) 45%,var(--line)); }
.card[data-state="error"] .chip{ color:var(--err); border-color:color-mix(in srgb,var(--err) 45%,var(--line)); }

.press{
  position:relative; appearance:none; border:0; cursor:pointer; font-family:inherit; width:100%; height:64px;
  border-radius:18px; font-size:16px; font-weight:700; letter-spacing:.01em; color:#fff;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  box-shadow:0 12px 30px -12px var(--accent), inset 0 1px 0 rgba(255,255,255,.25);
  display:inline-flex; align-items:center; justify-content:center; gap:10px; overflow:hidden;
  transition:transform .12s ease, filter .2s, background .3s; color:var(--on-accent);
}
.press:active{ transform:translateY(1px) scale(.995); filter:brightness(1.05); }
.press:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.card[data-state="working"] .press{ background:linear-gradient(180deg,var(--sfc2),var(--sfc-deep)); box-shadow:none; color:var(--work); cursor:default; }
.card[data-state="open"] .press{ background:linear-gradient(180deg,#1c8d54,#149a58); box-shadow:0 12px 30px -14px var(--ok); cursor:default; }
.card[data-state="error"] .press{ background:linear-gradient(180deg,#7a3b38,#5f2c2a); color:#ffd9d6; }
.press .ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,.45);
  transform:translate(-50%,-50%) scale(0); pointer-events:none; animation:rip .6s ease-out forwards; }
@keyframes rip{ to{ transform:translate(-50%,-50%) scale(9); opacity:0; } }

.ring{ width:20px; height:20px; display:none; }
.card[data-state="working"] .ring{ display:block; }
.ring circle{ fill:none; stroke-width:3.5; }
.ring .trk{ stroke:var(--ring-track); }
.ring .bar{ stroke:var(--work); stroke-linecap:round; stroke-dasharray:54; stroke-dashoffset:54;
  transform:rotate(-90deg); transform-origin:center; animation:spin 1.1s linear infinite; }
@keyframes spin{ to{ transform:rotate(-90deg) rotate(360deg); } }

.note{ margin:0; text-align:center; font-size:12.5px; line-height:1.45; color:var(--mut); }
.note:empty{ display:none; }
.card[data-state="open"] .note{ color:var(--ok); }
.card[data-state="error"] .note{ color:var(--err); }

.foot{ padding-top:14px; text-align:center; color:var(--mut); font-size:11.5px; }
.foot b{ color:var(--txt); font-weight:600; }
.foot a{ color:inherit; }

/* ---------- Layout login ---------- */
.screen-login{ display:flex; }
.login{
  width:min(360px, 92vw); margin:auto; padding:0 4px;
  display:flex; flex-direction:column; gap:14px; text-align:center;
}
.lock{ width:64px; height:64px; border-radius:20px; margin:0 auto 4px; display:grid; place-items:center;
  background:linear-gradient(180deg,var(--sfc2),var(--sfc-deep)); border:1px solid var(--line); color:var(--accent-2); }
.lock svg{ width:30px; height:30px; }
.login h1{ font-size:24px; font-weight:770; letter-spacing:-.02em; margin:0; }
.login-sub{ color:var(--mut); font-size:13.5px; margin:0 0 6px; }
.login-error{ color:var(--err); font-size:13px; margin:0; }
.login form{ display:flex; flex-direction:column; gap:12px; margin-top:4px; }
.field{ position:relative; text-align:left; }
.field svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--mut); }
.field input{ width:100%; height:52px; border-radius:14px; border:1px solid var(--line); background:var(--input-bg);
  color:var(--txt); padding:0 14px 0 44px; font-size:16px; font-family:inherit; }
.field input::placeholder{ color:#5c6675; }
.field input:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent); }
.go{ height:52px; border-radius:14px; border:0; cursor:pointer; font-family:inherit; font-size:16px; font-weight:700; color:var(--on-accent);
  background:linear-gradient(180deg,var(--accent-2),var(--accent)); box-shadow:0 12px 30px -12px var(--accent); margin-top:2px; }
.go:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.login-foot{ color:var(--mut); font-size:11px; letter-spacing:.03em; margin-top:10px; }

.shake{ animation:shake .5s ease-in-out; }
@keyframes shake{
  10%,90%{ transform:translateX(-2px); } 20%,80%{ transform:translateX(4px); }
  30%,50%,70%{ transform:translateX(-8px); } 40%,60%{ transform:translateX(8px); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .ring .bar{ animation:none; stroke-dashoffset:14; }
}