/* ============================================================
   Lechería App — Kondoo-style design system
   Dark, premium structure (Kondoo.io) · Lechería brand colors
   Manrope (display) · Inter (body) · JetBrains Mono (labels/numbers)
   ============================================================ */
:root {
  /* dark neutrals (navy-tinted near-black, Kondoo structure) */
  --bg:#070b18; --bg-elev:#0c1426; --surface:#101a31; --surface-2:#162340; --surface-3:#1d2c4d;
  --card:var(--surface);
  --ink:#eef2fb; --ink-soft:#c2cce0; --ink-muted:#8593b0; --ink-faint:#5a6788; --muted:var(--ink-muted);
  --line:#1d2742; --line-strong:#28365a;
  --blue-soft:rgba(46,107,245,.16); --gold-soft:rgba(46,157,205,.16);
  /* Lechería brand */
  --navy:#08122A; --navy2:#0c1a3a; --navy3:#11244d;
  --blue:#2E6BF5; --blue2:#1247C8; --gold:#2E9DCD; --gold2:#5BC4E8; --teal:#0ABFAB;
  --coral:#FF5757; --amber:#F5A623; --green:#2BD46F;
  --accent:var(--gold); --on-accent:#06101f;
  /* radii / shadow / type */
  --r-sm:9px; --r-md:13px; --r-lg:18px; --r-xl:24px; --r-full:999px; --radius:var(--r-lg);
  --shadow-sm:0 2px 8px rgba(0,0,0,.4);
  --shadow:0 18px 48px rgba(0,0,0,.5);
  --shadow-card:0 1px 0 rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.4);
  --glow:0 0 50px rgba(46,157,205,.28);
  --glow-blue:0 0 46px rgba(46,107,245,.4);
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --display:'Manrope',var(--font);
  --mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body {
  font-family:var(--font); color:var(--ink); letter-spacing:-.01em;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(46,157,205,.10), transparent 60%),
    radial-gradient(800px 560px at 10% 110%, rgba(46,107,245,.10), transparent 60%),
    var(--bg);
  min-height:100vh; display:flex; flex-direction:column;
}

/* ---------- Top bar ---------- */
.topbar {
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:14px 22px; color:var(--ink);
  border-bottom:1px solid var(--line);
  background:rgba(7,11,24,.72); backdrop-filter:blur(14px);
  position:sticky; top:0; z-index:50;
}
.brand { display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.03em; }
.brand strong { color:var(--gold2); font-weight:800; }
.brand-dot { width:11px; height:11px; border-radius:50%; background:linear-gradient(135deg,var(--gold2),var(--teal)); box-shadow:0 0 16px var(--gold); }
.brand-tag { font-family:var(--mono); font-weight:500; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-muted); border:1px solid var(--line-strong); padding:4px 9px; border-radius:var(--r-full); margin-left:4px; }
.mode-switch { display:flex; gap:4px; margin:0 auto; background:var(--surface); padding:4px; border-radius:var(--r-md); border:1px solid var(--line); }
.mode-switch button {
  display:flex; align-items:center; gap:7px; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:13.5px; color:var(--ink-muted);
  background:transparent; border:none; padding:9px 16px; border-radius:9px; transition:.18s; letter-spacing:-.01em;
}
.mode-switch button .m-emoji { font-size:15px; }
.mode-switch button:hover { color:var(--ink); }
.mode-switch button.active { background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#fff; box-shadow:var(--glow-blue); }
.lang-toggle { cursor:pointer; font-family:var(--mono); font-weight:700; font-size:11px; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line); padding:9px 12px; border-radius:var(--r-sm); transition:.18s; }
.lang-toggle span { color:var(--ink-faint); }
.lang-toggle:hover { color:var(--ink); border-color:var(--line-strong); }

/* ---------- Stage ---------- */
.stage { flex:1; display:flex; align-items:center; justify-content:center; padding:34px 22px; }
.stage-foot { text-align:center; color:var(--ink-faint); font-family:var(--mono); font-size:11px; letter-spacing:.04em; padding:0 0 18px; }

/* ---------- Phone frame ---------- */
.phone {
  width:390px; height:812px; max-height:calc(100vh - 150px);
  background:#000; border-radius:52px; padding:13px;
  box-shadow:var(--shadow), 0 0 0 1.5px rgba(255,255,255,.07), var(--glow);
  position:relative; flex:none;
}
.phone-screen {
  width:100%; height:100%; background:var(--bg-elev); border-radius:40px; overflow:hidden;
  display:flex; flex-direction:column; position:relative;
}
.notch { position:absolute; top:0; left:50%; transform:translateX(-50%); width:130px; height:30px; background:#000; border-radius:0 0 18px 18px; z-index:30; }
.statusbar { display:flex; justify-content:space-between; align-items:center; padding:11px 26px 4px; font-size:12px; font-weight:700; color:var(--ink); font-family:var(--mono); }
.statusbar .sb-right { display:flex; gap:6px; align-items:center; font-size:11px; }

/* App header inside phone */
.app-head { padding:6px 22px 14px; padding-right:100px; }
.app-head .greet { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-muted); }
.app-head .who { font-family:var(--display); font-weight:800; font-size:23px; letter-spacing:-.03em; }

/* Scroll area */
.screen-scroll { flex:1; overflow-y:auto; padding:0 18px 96px; }
.screen-scroll::-webkit-scrollbar { width:0; }

/* ---------- Bottom nav ---------- */
.tabbar {
  position:absolute; bottom:0; left:0; right:0; height:78px;
  background:rgba(10,17,33,.86); backdrop-filter:blur(16px);
  border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-around;
  padding-bottom:10px; z-index:20;
}
.tabbar button { background:none; border:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--ink-muted); font-family:var(--display); font-weight:600; font-size:10.5px; transition:.15s; flex:1; }
.tabbar button .t-ic { font-size:20px; line-height:1; opacity:.8; }
.tabbar button.active { color:var(--gold2); }
.tabbar button.active .t-ic { opacity:1; }

/* SOS button (citizen) — small, top-right */
.sos-fab {
  position:absolute; right:18px; top:46px; z-index:32;
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:radial-gradient(circle at 30% 30%, #ff8a8a, var(--coral)); color:#fff;
  font-family:var(--display); font-weight:800; font-size:11px; letter-spacing:.04em;
  box-shadow:0 6px 18px rgba(255,87,87,.5); animation:pulse 2.4s infinite;
}
@keyframes pulse { 0%,100%{ box-shadow:0 5px 14px rgba(255,87,87,.45);} 50%{ box-shadow:0 7px 22px rgba(255,87,87,.8);} }

/* ---------- Cards & primitives ---------- */
.card { background:var(--surface); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow-card); border:1px solid var(--line); margin-bottom:13px; }
.section-label { font-family:var(--mono); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-muted); margin:16px 4px 9px; }
.row { display:flex; align-items:center; gap:12px; }
.row.between { justify-content:space-between; }
.pill { display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:var(--r-full); font-family:var(--mono); text-transform:uppercase; letter-spacing:.04em; }
.pill.green { background:rgba(43,212,111,.15); color:#5be89a; }
.pill.red { background:rgba(255,87,87,.16); color:#ff8f8f; }
.pill.amber { background:rgba(245,166,35,.16); color:#f7c46b; }
.pill.blue { background:var(--blue-soft); color:#7aa3ff; }

.btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; cursor:pointer; font-family:var(--display); font-weight:700; font-size:15px; padding:15px; border-radius:var(--r-md); border:none; transition:.15s; letter-spacing:-.01em; }
.btn-primary { background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#fff; box-shadow:var(--glow-blue); }
.btn-primary:hover { transform:translateY(-1px); }
.btn-ghost { background:var(--surface-2); color:var(--ink); border:1px solid var(--line); }
.btn-danger { background:linear-gradient(135deg,#ff8a8a,var(--coral)); color:#fff; }
.btn-dark { background:var(--surface-3); color:var(--ink); border:1px solid var(--line-strong); }
.btn-sm { padding:10px 14px; font-size:13px; width:auto; border-radius:var(--r-sm); }

/* Balance hero card */
.balance-card { background:linear-gradient(135deg,var(--blue2),var(--gold)); color:#fff; border-radius:var(--r-xl); padding:20px; position:relative; overflow:hidden; box-shadow:0 16px 40px rgba(18,71,200,.45), var(--glow); }
.balance-card::after { content:''; position:absolute; right:-50px; top:-50px; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle,var(--gold2),transparent 70%); opacity:.45; }
.balance-card .lbl { font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; opacity:.85; }
.balance-card .amt { font-family:var(--mono); font-weight:700; font-size:33px; letter-spacing:-.02em; margin:5px 0 14px; }
.balance-card .amt small { font-size:15px; opacity:.7; }

/* Quick actions */
.qa-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.qa { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:13px 6px; text-align:center; cursor:pointer; transition:.15s; }
.qa:hover { transform:translateY(-2px); border-color:var(--line-strong); box-shadow:var(--shadow-sm); }
.qa .qa-ic { font-size:21px; }
.qa .qa-t { font-size:10.5px; font-weight:600; color:var(--ink-soft); margin-top:5px; line-height:1.2; }

/* Active session card */
.session-card { background:linear-gradient(135deg,#0ABFAB,#0a7f93); color:#fff; border-radius:var(--r-xl); padding:18px; box-shadow:0 14px 34px rgba(10,191,171,.4); }
.session-card .countdown { font-family:var(--mono); font-weight:700; font-size:30px; letter-spacing:.02em; }
.live-dot { width:8px; height:8px; border-radius:50%; background:#7CFFB2; box-shadow:0 0 10px #7CFFB2; display:inline-block; animation:blink 1.4s infinite; }
@keyframes blink { 50%{ opacity:.3; } }

/* List item */
.li { display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--line); }
.li:last-child { border-bottom:none; }
.li-ic { width:40px; height:40px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:18px; background:var(--surface-2); border:1px solid var(--line); flex:none; }
.li-main { flex:1; min-width:0; }
.li-title { font-weight:700; font-size:14px; }
.li-sub { font-size:12px; color:var(--ink-muted); }
.li-amt { font-family:var(--mono); font-weight:700; font-size:14px; }

/* Inputs / options */
.field { margin-bottom:12px; }
.field label { display:block; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:600; color:var(--ink-muted); margin:0 0 7px 2px; }
.field input { width:100%; padding:14px; border-radius:var(--r-md); border:1.5px solid var(--line-strong); font-family:var(--mono); font-size:16px; font-weight:600; outline:none; transition:.15s; background:var(--surface); color:var(--ink); letter-spacing:.06em; }
.field input::placeholder { color:var(--ink-faint); }
.field input:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.opt { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--r-md); margin-bottom:9px; cursor:pointer; background:var(--surface); transition:.15s; }
.opt:hover { border-color:var(--line-strong); }
.opt.sel { border-color:var(--gold); background:var(--gold-soft); }
.opt .opt-t { font-weight:700; font-size:14px; }
.opt .opt-s { font-size:12px; color:var(--ink-muted); }

/* Mock map (dark) */
.mock-map { height:150px; border-radius:var(--r-lg); position:relative; overflow:hidden; background:
  linear-gradient(rgba(46,107,245,.06),rgba(46,107,245,.06)),
  repeating-linear-gradient(0deg, #16223e 0 1px, transparent 1px 28px),
  repeating-linear-gradient(90deg, #16223e 0 1px, transparent 1px 28px), #0c1730; border:1px solid var(--line); margin-bottom:13px; }
.map-pin { position:absolute; top:50%; left:50%; transform:translate(-50%,-100%); font-size:30px; filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.map-pin.ping::after { content:''; position:absolute; left:50%; bottom:2px; width:26px; height:26px; transform:translateX(-50%); border-radius:50%; background:rgba(46,157,205,.35); animation:ping 1.8s infinite; }
@keyframes ping { 0%{ transform:translateX(-50%) scale(.4); opacity:.8;} 100%{ transform:translateX(-50%) scale(2.4); opacity:0;} }

/* Result banner (police plate check) */
.result { border-radius:var(--r-lg); padding:20px; text-align:center; color:#fff; margin-bottom:14px; }
.result.paid { background:linear-gradient(135deg,#2BD46F,#15a04e); box-shadow:0 14px 34px rgba(43,212,111,.35); }
.result.unpaid { background:linear-gradient(135deg,#ff8a8a,var(--coral)); box-shadow:0 14px 34px rgba(255,87,87,.35); }
.result .r-ic { font-size:42px; }
.result .r-status { font-family:var(--display); font-weight:800; font-size:24px; margin-top:6px; letter-spacing:-.02em; }
.result .r-plate { display:inline-block; margin-top:8px; background:rgba(0,0,0,.22); padding:6px 16px; border-radius:var(--r-sm); font-family:var(--mono); font-weight:700; letter-spacing:.16em; }

/* Emergency feed item */
.emg { border-left:3px solid var(--coral); background:var(--surface); border:1px solid var(--line); border-left-width:3px; border-radius:var(--r-md); padding:13px 14px; margin-bottom:10px; }
.emg.resolved { border-left-color:var(--green); opacity:.55; }
.emg .emg-top { display:flex; justify-content:space-between; align-items:center; }
.emg .emg-type { font-family:var(--display); font-weight:800; font-size:14px; display:flex; align-items:center; gap:7px; }
.emg .emg-time { font-family:var(--mono); font-size:10.5px; color:var(--ink-muted); }
.emg .emg-meta { font-size:12.5px; color:var(--ink-muted); margin-top:5px; }

/* Toast */
.toast { position:absolute; left:50%; bottom:96px; transform:translateX(-50%) translateY(20px); background:var(--surface-3); border:1px solid var(--line-strong); color:#fff; padding:12px 20px; border-radius:var(--r-md); font-weight:600; font-size:13.5px; z-index:40; opacity:0; transition:.3s; box-shadow:var(--shadow); white-space:nowrap; max-width:90%; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Modal sheet (phone) */
.sheet-bg { position:absolute; inset:0; background:rgba(3,6,14,.66); z-index:35; display:flex; align-items:flex-end; opacity:0; pointer-events:none; transition:.25s; }
.sheet-bg.show { opacity:1; pointer-events:auto; }
.sheet { background:var(--bg-elev); border:1px solid var(--line); border-bottom:none; width:100%; border-radius:26px 26px 0 0; padding:22px 20px 28px; transform:translateY(100%); transition:.28s; max-height:80%; overflow-y:auto; }
.sheet-bg.show .sheet { transform:translateY(0); }
.sheet h3 { font-family:var(--display); font-size:19px; margin-bottom:4px; letter-spacing:-.02em; }
.sheet .grab { width:42px; height:5px; border-radius:99px; background:var(--line-strong); margin:0 auto 16px; }

/* Police accent tweaks (base already dark) */
.police .tabbar button.active { color:var(--gold2); }
.police .app-head .who { color:var(--ink); }

/* ============================================================
   ADMIN — City Command Center (Kondoo-structured dashboard)
   ============================================================ */
.dash { width:100%; max-width:1200px; background:var(--bg-elev); border-radius:var(--r-xl); border:1px solid var(--line); box-shadow:var(--shadow), var(--glow); overflow:hidden; color:var(--ink); max-height:calc(100vh - 150px); display:flex; flex-direction:column; }
.dash-head { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.015); }
.dash-head .dh-title { font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.02em; }
.dash-head .dh-sub { font-family:var(--mono); font-size:11px; color:var(--ink-muted); letter-spacing:.02em; margin-top:3px; }
.dash-live { display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em; color:#7CFFB2; }
.dash-body { padding:20px 24px; overflow-y:auto; flex:1; min-width:0; }

/* sidebar + tabs */
.dash-split { display:flex; flex:1; min-height:0; }
.dash-side { width:212px; flex:none; border-right:1px solid var(--line); padding:14px 12px 20px; overflow-y:auto; background:rgba(255,255,255,.012); }
.dash-side::-webkit-scrollbar { width:0; }
.nav-group { font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.11em; color:var(--ink-faint); margin:15px 10px 6px; }
.nav-group:first-child { margin-top:2px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:10px; cursor:pointer; color:var(--ink-muted); font-family:var(--display); font-weight:600; font-size:13.5px; transition:.13s; margin-bottom:2px; }
.nav-item:hover { background:var(--surface); color:var(--ink); }
.nav-item.active { background:var(--blue-soft); color:#9bbcff; }
.nav-item .ni-ic { display:flex; opacity:.85; }
.kpi-grid.kpi-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:860px){
  .dash-split { flex-direction:column; }
  .dash-side { width:auto; display:flex; gap:6px; overflow-x:auto; border-right:none; border-bottom:1px solid var(--line); padding:10px 12px; }
  .dash-side .nav-group { display:none; }
  .nav-item { white-space:nowrap; margin-bottom:0; }
  .kpi-grid.kpi-3 { grid-template-columns:repeat(2,1fr); }
}
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.kpi { background:linear-gradient(160deg,var(--surface),var(--bg-elev)); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; transition:.15s; }
.kpi:hover { border-color:var(--line-strong); }
.kpi .k-lbl { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted); font-weight:600; }
.kpi .k-val { font-family:var(--mono); font-weight:700; font-size:26px; letter-spacing:-.02em; margin:7px 0 3px; }
.kpi .k-val small { font-size:13px; opacity:.55; }
.kpi .k-delta { font-family:var(--mono); font-size:11px; font-weight:700; }
.kpi .k-delta.up { color:#5be89a; } .kpi .k-delta.down { color:#ff9b9b; }
.kpi .k-ic { float:right; font-size:21px; opacity:.85; }

.dash-cols { display:grid; grid-template-columns:1.4fr 1fr; gap:14px; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; margin-bottom:14px; }
.panel h4 { font-family:var(--display); font-weight:800; font-size:14px; margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; letter-spacing:-.01em; }
.panel h4 .h-tag { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:500; }

/* Bars chart */
.bars { display:flex; align-items:flex-end; gap:10px; height:130px; padding-top:8px; }
.bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; height:100%; justify-content:flex-end; }
.bar { width:100%; max-width:34px; border-radius:7px 7px 0 0; background:linear-gradient(var(--gold2),var(--blue)); transition:height .6s cubic-bezier(.2,.8,.2,1); }
.bar-lbl { font-family:var(--mono); font-size:10px; color:var(--ink-faint); }

/* Donut + legend */
.donut-wrap { display:flex; align-items:center; gap:18px; }
.donut { width:130px; height:130px; border-radius:50%; flex:none; position:relative; }
.donut::after { content:''; position:absolute; inset:22px; background:var(--surface); border-radius:50%; }
.donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2; }
.donut-center .dc-v { font-family:var(--mono); font-weight:700; font-size:17px; }
.donut-center .dc-l { font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted); }
.legend { flex:1; }
.legend .lg { display:flex; align-items:center; gap:9px; font-size:13px; margin-bottom:9px; color:var(--ink-soft); }
.legend .lg .dot { width:11px; height:11px; border-radius:4px; flex:none; }
.legend .lg .lg-v { margin-left:auto; font-weight:700; font-family:var(--mono); color:var(--ink); }

/* Progress (registration) */
.prog-wrap { margin-top:6px; }
.prog-bar { height:14px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.prog-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--teal),var(--gold2)); transition:width 1s; }
.prog-meta { display:flex; justify-content:space-between; font-family:var(--mono); font-size:11.5px; margin-top:8px; color:var(--ink-muted); }

/* Zone occupancy */
.zone-row { display:flex; align-items:center; gap:12px; margin-bottom:13px; }
.zone-row .z-name { width:130px; font-size:12.5px; font-weight:600; flex:none; color:var(--ink-soft); }
.zone-row .z-track { flex:1; height:10px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.zone-row .z-fill { height:100%; border-radius:99px; }
.zone-row .z-pct { width:42px; text-align:right; font-family:var(--mono); font-size:12px; font-weight:700; }

/* Integrations / generic dash list row */
.integ { display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid var(--line); }
.integ:last-child { border:none; }
.integ .ig-logo { width:38px; height:38px; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:18px; flex:none; }
.integ .ig-name { font-weight:700; font-size:13.5px; }
.integ .ig-desc { font-size:11.5px; color:var(--ink-muted); }

/* ---------- Citizen Registry (admin) ---------- */
.reg-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.reg-search { flex:1; display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-md); padding:11px 14px; }
.reg-search input { flex:1; background:none; border:none; outline:none; color:var(--ink); font-family:var(--font); font-size:14px; }
.reg-search input::placeholder { color:var(--ink-faint); }
.reg-count { font-family:var(--mono); font-size:11px; color:var(--ink-muted); white-space:nowrap; }
.reg-table { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.reg-head, .reg-row { display:grid; grid-template-columns:2.2fr 1.2fr 1fr 1fr 1fr 28px; gap:10px; align-items:center; padding:12px 16px; }
.reg-head { background:var(--surface-2); font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted); }
.reg-row { border-top:1px solid var(--line); cursor:pointer; transition:.13s; }
.reg-row:hover { background:var(--surface); }
.reg-id { display:flex; align-items:center; gap:11px; min-width:0; }
.reg-avatar { width:36px; height:36px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:15px; font-family:var(--display); font-weight:800; color:#06101f; }
.reg-name { font-weight:700; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reg-ced { font-family:var(--mono); font-size:11px; color:var(--ink-muted); }
.reg-cell { font-size:12.5px; color:var(--ink-soft); }
.reg-cell.mono { font-family:var(--mono); font-size:12px; letter-spacing:.04em; }
.reg-chev { color:var(--ink-faint); text-align:right; font-size:16px; }

/* Centered modal (dashboard) */
.modal-bg { position:fixed; inset:0; background:rgba(3,6,14,.74); backdrop-filter:blur(4px); z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:.2s; }
.modal-bg.show { opacity:1; pointer-events:auto; }
.modal { width:100%; max-width:460px; background:var(--bg-elev); border:1px solid var(--line-strong); border-radius:var(--r-xl); box-shadow:var(--shadow); transform:translateY(12px) scale(.98); transition:.22s; max-height:88vh; overflow-y:auto; }
.modal-bg.show .modal { transform:none; }
.modal-hero { padding:24px; background:linear-gradient(135deg,var(--blue2),var(--gold)); position:relative; }
.modal-hero .m-close { position:absolute; top:16px; right:18px; cursor:pointer; color:rgba(255,255,255,.85); font-size:20px; background:rgba(0,0,0,.2); width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.modal-hero .m-av { width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:800; font-size:24px; color:#fff; margin-bottom:12px; }
.modal-hero .m-name { font-family:var(--display); font-weight:800; font-size:21px; color:#fff; letter-spacing:-.02em; }
.modal-hero .m-ced { font-family:var(--mono); font-size:12px; color:rgba(255,255,255,.85); }
.modal-body { padding:20px 24px 24px; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:8px; }
.detail { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; }
.detail .d-l { font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted); }
.detail .d-v { font-weight:700; font-size:14px; margin-top:4px; }
.detail .d-v.mono { font-family:var(--mono); font-size:13px; letter-spacing:.04em; }
.detail.full { grid-column:1 / -1; }

/* ---------- Kondoo-style mobile primitives ---------- */
svg { display:block; }
.tabbar button .t-ic { display:flex; align-items:center; justify-content:center; height:22px; }
.li-ic { color:var(--gold2); }
.eyebrow { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-muted); margin-bottom:6px; }
.screen-title { font-family:var(--display); font-weight:800; font-size:25px; letter-spacing:-.03em; line-height:1.08; }
.screen-sub { font-size:13px; color:var(--ink-muted); line-height:1.5; margin-top:7px; }

/* status hero (à la "Estás al día") */
.status-hero { border-radius:var(--r-xl); padding:24px 20px; text-align:center; margin-bottom:13px; border:1px solid; }
.status-hero.ok { background:linear-gradient(160deg,rgba(43,212,111,.14),rgba(43,212,111,.03)); border-color:rgba(43,212,111,.32); }
.status-hero.idle { background:linear-gradient(160deg,var(--surface),var(--bg-elev)); border-color:var(--line); }
.status-hero .sh-badge { width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 13px; }
.status-hero.ok .sh-badge { background:rgba(43,212,111,.18); color:var(--green); }
.status-hero.idle .sh-badge { background:var(--gold-soft); color:var(--gold2); }
.status-hero .sh-title { font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-.02em; }
.status-hero .sh-sub { font-size:12.5px; color:var(--ink-muted); margin-top:6px; line-height:1.5; }

/* 2-col action cards */
.act-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.act { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:15px; cursor:pointer; transition:.15s; }
.act:hover { border-color:var(--line-strong); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.act-ic { width:38px; height:38px; border-radius:11px; background:var(--gold-soft); color:var(--gold2); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.act.blue .act-ic { background:var(--blue-soft); color:#7aa3ff; }
.act.coral .act-ic { background:rgba(255,87,87,.14); color:#ff8f8f; }
.act.teal .act-ic { background:rgba(10,191,171,.14); color:#3fe0cf; }
.act-t { font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:-.01em; }
.act-s { font-size:11.5px; color:var(--ink-muted); margin-top:3px; line-height:1.3; }

/* primary (accent-filled) KPI for admin */
.kpi.primary { background:linear-gradient(150deg,var(--blue2),#0f3a9e); border-color:transparent; box-shadow:var(--glow-blue); }
.kpi.primary .k-lbl, .kpi.primary .k-val small { color:rgba(255,255,255,.7); }
.kpi.primary .k-val { color:#fff; } .kpi.primary .k-delta.up { color:#bcd3ff; }
.kpi .k-ic svg { display:inline-block; }

/* Responsive */
@media (max-width:1000px){ .dash-cols{ grid-template-columns:1fr; } .kpi-grid{ grid-template-columns:repeat(2,1fr); } .reg-head, .reg-row{ grid-template-columns:2fr 1fr 1fr 24px; } .reg-hide{ display:none; } }
@media (max-width:680px){
  .mode-switch button span:not(.m-emoji){ display:none; }
  .mode-switch button{ padding:9px 12px; }
  .brand-tag{ display:none; }
  .phone{ width:100%; max-width:390px; height:760px; }
}
.fade { animation:fade .35s ease; }
@keyframes fade { from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }

/* ---------- Logo ---------- */
.city-logo { mix-blend-mode:screen; display:block; }
.topbar .city-logo { width:30px; }

/* ---------- Onboarding ---------- */
.ob-wrap { flex:1; display:flex; flex-direction:column; min-height:0; }
.ob-splash { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px 30px 40px; }
.ob-logo { margin-bottom:18px; }
.ob-splash-title { font-family:var(--display); font-weight:800; font-size:26px; letter-spacing:-.03em; }
.ob-splash-sub { color:var(--ink-muted); font-size:14px; max-width:24ch; margin-top:9px; line-height:1.55; }
.ob-splash-cta { width:100%; display:flex; flex-direction:column; gap:10px; margin-top:34px; }
.ob-splash-cta .btn { width:100%; }
.ob-head { display:flex; align-items:center; gap:12px; padding:8px 20px 6px; }
.ob-back { background:var(--surface); border:1px solid var(--line); color:var(--ink); width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
.ob-prog { flex:1; height:6px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.ob-prog-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--teal),var(--gold2)); transition:width .4s; }
.ob-step-n { font-family:var(--mono); font-size:11px; color:var(--ink-muted); flex:none; }
.ob-body { flex:1; overflow-y:auto; padding:20px 22px 12px; }
.ob-body::-webkit-scrollbar { width:0; }
.ob-eyebrow { font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--gold2); }
.ob-title { font-family:var(--display); font-weight:800; font-size:24px; letter-spacing:-.03em; line-height:1.1; margin:8px 0 6px; }
.ob-sub { color:var(--ink-muted); font-size:13.5px; line-height:1.5; margin-bottom:20px; }
.ob-foot { padding:14px 20px 22px; border-top:1px solid var(--line); }
.ob-foot .btn { width:100%; }
.id-card { background:linear-gradient(135deg,var(--navy2),var(--surface-3)); border:1px solid var(--line-strong); border-radius:16px; padding:18px; margin-bottom:18px; }
.id-flag { height:6px; border-radius:3px; background:linear-gradient(90deg,#ffd200 33%,#0033a0 33% 66%,#cf142b 66%); margin-bottom:12px; width:62px; }
.id-rb { font-size:9px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.06em; }
.id-no { font-family:var(--mono); font-weight:700; font-size:22px; letter-spacing:.08em; margin:10px 0 4px; color:var(--gold2); }
.id-nm { font-family:var(--display); font-weight:700; font-size:14px; color:var(--ink); }
.otp { display:flex; gap:9px; justify-content:center; margin:18px 0 4px; }
.otp-box { width:46px; height:56px; border-radius:13px; border:1.5px solid var(--line-strong); background:var(--surface); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:22px; color:var(--ink-faint); }
.otp-box.filled { border-color:var(--gold); color:var(--gold2); background:var(--gold-soft); }
.ob-plate { background:#fff; border-radius:12px; padding:12px; text-align:center; margin-bottom:16px; border:3px solid #1a1a1a; }
.ob-plate-lbl { font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:#666; }
.ob-plate-no { font-family:var(--mono); font-weight:700; font-size:30px; letter-spacing:.16em; color:#111; }
.ob-priv { text-align:center; padding:10px 0; }
.ob-priv-ic { width:62px; height:62px; border-radius:18px; background:var(--gold-soft); color:var(--gold2); display:flex; align-items:center; justify-content:center; margin:6px auto 16px; }
.ob-priv p { color:var(--ink-soft); font-size:14px; line-height:1.6; margin-bottom:20px; }
.ob-check { display:flex; align-items:center; gap:11px; text-align:left; font-size:13px; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px; }
.ob-box { width:24px; height:24px; border-radius:7px; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.ob-chips { display:flex; gap:8px; flex-wrap:wrap; }
.ob-chip { font-family:var(--display); font-weight:600; font-size:13px; padding:10px 14px; border-radius:11px; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink-soft); cursor:pointer; transition:.14s; }
.ob-chip:hover { border-color:var(--gold); }
.ob-chip.sel { border-color:var(--gold); background:var(--gold-soft); color:var(--gold2); }

/* Onboarding carousel */
.ob-carousel { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:26px 30px 34px; text-align:center; }
.ob-slide { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; }
.ob-cIcon { width:96px; height:96px; border-radius:28px; background:var(--gold-soft); color:var(--gold2); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.ob-dots { display:flex; gap:8px; margin:22px 0 18px; }
.ob-dot { width:8px; height:8px; border-radius:99px; background:var(--line-strong); transition:.25s; cursor:pointer; }
.ob-dot.on { width:22px; background:var(--gold2); }
.ob-carousel .ob-splash-cta { width:100%; display:flex; flex-direction:column; gap:10px; margin-top:0; }
/* Resident / tourist choice */
.type-card { display:flex; align-items:center; gap:13px; padding:16px; border:1.5px solid var(--line-strong); border-radius:var(--r-lg); margin-bottom:12px; cursor:pointer; background:var(--surface); transition:.15s; }
.type-card:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.type-ic { width:46px; height:46px; border-radius:13px; background:var(--gold-soft); color:var(--gold2); display:flex; align-items:center; justify-content:center; flex:none; }
.type-main { flex:1; text-align:left; }
.type-t { font-family:var(--display); font-weight:700; font-size:15px; }
.type-s { font-size:11.5px; color:var(--ink-muted); margin-top:3px; line-height:1.35; }
.type-arrow { color:var(--ink-faint); flex:none; }

/* Login + demo accounts */
.login-sep { display:flex; align-items:center; gap:12px; margin:18px 0 14px; color:var(--ink-faint); font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.login-sep::before, .login-sep::after { content:''; flex:1; height:1px; background:var(--line); }
.demo-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.demo-acc { display:flex; align-items:center; gap:9px; justify-content:center; padding:12px; border:1.5px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface); color:var(--ink-soft); font-family:var(--display); font-weight:600; font-size:13px; cursor:pointer; transition:.14s; }
.demo-acc:hover { border-color:var(--gold); color:var(--ink); transform:translateY(-1px); }
.demo-ic { color:var(--gold2); display:flex; }

/* Completar perfil card + back bar */
.profile-cta { background:linear-gradient(135deg,var(--surface-2),var(--surface)); border:1px solid var(--line-strong); border-radius:var(--r-lg); padding:16px; margin-bottom:13px; }
.profile-cta .pc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.profile-cta .pc-t { font-family:var(--display); font-weight:700; font-size:14px; }
.profile-cta .pc-pct { font-family:var(--mono); font-weight:700; font-size:13px; color:var(--gold2); }
.scr-backbar { display:flex; align-items:center; padding:4px 20px 0; }
.scr-backbar button { display:flex; align-items:center; gap:6px; background:none; border:none; color:var(--ink-muted); font-family:var(--display); font-weight:600; font-size:13.5px; cursor:pointer; padding:6px 0; }
.scr-backbar button:hover { color:var(--ink); }

/* Pago Móvil top-up + pending banner */
.pm-card { background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-md); padding:4px 14px; margin-bottom:13px; }
.pm-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; }
.pm-row:last-child { border-bottom:none; }
.pm-l { color:var(--ink-muted); flex:none; }
.pm-v { font-weight:600; text-align:right; }
.pm-v.mono { font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; }
.upload { display:flex; align-items:center; justify-content:center; gap:9px; padding:18px; border:1.5px dashed var(--line-strong); border-radius:var(--r-md); color:var(--ink-soft); font-family:var(--display); font-weight:600; font-size:13.5px; cursor:pointer; transition:.14s; }
.upload:hover { border-color:var(--gold); }
.upload.done { border-style:solid; border-color:rgba(43,212,111,.4); background:rgba(43,212,111,.07); color:#5be89a; }
.pending-banner { display:flex; align-items:center; gap:9px; padding:12px 14px; border-radius:var(--r-md); background:rgba(245,166,35,.12); border:1px solid rgba(245,166,35,.3); color:#f7c46b; font-size:12.5px; font-weight:600; margin-bottom:13px; }
.pending-banner svg { flex:none; }

/* ---------- Header bell + avatar (replaces SOS fab) ---------- */
.app-top-icons { position:absolute; top:44px; right:16px; z-index:32; display:flex; align-items:center; gap:9px; }
.app-ic-btn { position:relative; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.app-ic-btn.avatar { border:none; background:none; width:34px; height:34px; }
.app-ic-btn .ic-dot { position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--coral); border:2px solid var(--bg-elev); }
.avatar-circle { border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:800; color:#fff; }

/* ---------- utils + parking ---------- */
.mono { font-family:var(--mono); }
.info-note { display:flex; align-items:flex-start; gap:8px; font-size:11.5px; color:var(--ink-muted); line-height:1.5; padding:0 2px; }
.info-note svg { flex:none; margin-top:1px; color:var(--gold2); }
.zone-opt { display:flex; align-items:center; gap:12px; padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--r-md); margin-bottom:9px; cursor:pointer; background:var(--surface); transition:.15s; }
.zone-opt:hover { border-color:var(--line-strong); }
.zone-opt.sel { border-color:var(--gold); background:var(--gold-soft); }
.zone-opt-main { flex:1; min-width:0; }
.zone-occ { display:flex; align-items:center; gap:8px; margin-top:6px; }
.zone-occ-bar { flex:1; max-width:96px; height:5px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.zone-occ-bar span { display:block; height:100%; border-radius:99px; }
.park-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-md); padding:14px 16px; margin:14px 0 12px; }
.park-total { font-family:var(--mono); font-weight:800; font-size:22px; color:var(--gold2); }

/* ---------- Profile / settings ---------- */
.profile-hero { text-align:center; padding:8px 0 18px; }
.profile-av { position:relative; width:78px; height:78px; margin:0 auto 12px; cursor:pointer; }
.profile-av .av-edit { position:absolute; bottom:0; right:0; width:24px; height:24px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg-elev); }
.profile-name { font-family:var(--display); font-weight:800; font-size:19px; }
.profile-sub { font-family:var(--mono); font-size:12px; color:var(--ink-muted); margin-top:3px; }
.set-list { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.set-row { display:flex; align-items:center; gap:13px; padding:13px 15px; border-bottom:1px solid var(--line); cursor:pointer; transition:.12s; }
.set-row:last-child { border-bottom:none; }
.set-row:hover { background:var(--surface-2); }
.set-ic { width:34px; height:34px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); color:var(--gold2); display:flex; align-items:center; justify-content:center; flex:none; }
.set-main { flex:1; min-width:0; }
.set-l { font-weight:600; font-size:14px; }
.set-v { font-size:12.5px; color:var(--ink-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.set-chev { color:var(--ink-faint); flex:none; }
.toggle { width:42px; height:24px; border-radius:99px; background:var(--surface-3); position:relative; flex:none; }
.toggle.on { background:var(--green); }
.toggle::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; transition:.2s; }
.toggle.on::after { left:20px; }
.av-swatch { width:50px; height:50px; border-radius:50%; border:2px solid var(--line-strong); cursor:pointer; transition:.15s; }
.av-swatch:hover { transform:scale(1.08); border-color:var(--gold); }

/* Restaurant reviews + rating */
.rest-rate { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:15px; }
.rate-star { background:none; border:none; cursor:pointer; padding:0; display:flex; transition:transform .1s; }
.rate-star:not([disabled]):hover { transform:scale(1.12); }
.rate-star[disabled] { cursor:default; }
.rev-row { padding:12px 14px; border-bottom:1px solid var(--line); }
.rev-row:last-child { border-bottom:none; }
.rev-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.rev-name { font-weight:700; font-size:13.5px; }
.rev-text { font-size:12.5px; color:var(--ink-soft); margin-top:5px; line-height:1.5; }
.rev-date { font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); margin-top:5px; }

/* ---------- Timeline (Libro de Vida) ---------- */
.timeline { position:relative; }
.tl-item { display:flex; gap:14px; position:relative; }
.tl-item::before { content:''; position:absolute; left:17px; top:32px; bottom:-2px; width:2px; background:var(--line); }
.tl-item:last-child::before { display:none; }
.tl-dot { width:36px; height:36px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; flex:none; z-index:1; }
.tl-card { flex:1; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:11px 14px; margin-bottom:10px; }

/* ---------- Admin screenshot (browser window) ---------- */
.shot { width:100%; max-width:1180px; border-radius:16px; overflow:hidden; border:1px solid var(--line-strong); box-shadow:var(--shadow),var(--glow); background:var(--bg-elev); }
.shot-bar { display:flex; align-items:center; gap:8px; padding:12px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.shot-dot { width:11px; height:11px; border-radius:50%; flex:none; }
.shot-url { margin-left:14px; font-family:var(--mono); font-size:12px; color:var(--ink-muted); background:var(--bg-elev); border:1px solid var(--line); border-radius:8px; padding:5px 14px; display:flex; align-items:center; gap:7px; }
.shot-content { padding:20px 22px; }

/* ---------- Installed PWA — full-screen native feel on the device ---------- */
@media (display-mode: standalone) {
  .topbar, .stage-foot { display:none !important; }
  .stage { padding:0; align-items:stretch; }
  .phone { width:100vw; height:100vh; max-height:none; max-width:none; border-radius:0; padding:0; box-shadow:none; }
  .phone-screen { border-radius:0; padding-top:env(safe-area-inset-top); }
  .notch, .statusbar { display:none; }
  .tabbar { padding-bottom:calc(10px + env(safe-area-inset-bottom)); height:calc(78px + env(safe-area-inset-bottom)); }
  .sos-fab { top:calc(env(safe-area-inset-top) + 12px); }
  .sheet { padding-bottom:calc(28px + env(safe-area-inset-bottom)); }
}

/* ---------- Embed mode (real screens inside landing iframes) ---------- */
body.embed .topbar, body.embed .stage-foot { display:none !important; }
body.embed .stage { padding:0; align-items:stretch; min-height:100vh; }
body.embed .phone { width:100vw; height:100vh; max-width:none; max-height:none; border-radius:0; padding:0; box-shadow:none; }
body.embed .phone-screen { border-radius:0; }
body.embed .notch { display:none; }
body.embed .dash { max-width:none; max-height:none; height:100vh; border-radius:0; border:none; box-shadow:none; }