:root{
  --bg:#05080f; --panel:#0a111f; --panel2:#0e1729; --line:#172238; --text:#f1f5f9; --muted:#8b98b3;
  --blue:#2563eb; --blue2:#1d4ed8; --green:#16a34a; --green2:#15803d; --amber:#d97706; --red:#dc2626;
  --cyan:#0891b2; --violet:#7c3aed; --slate:#334155; --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}
h2{font-size:24px}
h3{font-size:17px}
a{color:#60a5fa}
button,input,select,textarea{font:inherit;color:inherit}
.hidden{display:none!important}
.center{text-align:center}
.muted{color:var(--muted)}
.tiny{font-size:12px;color:var(--muted)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}

/* ---------- controles ---------- */
.input,input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{
  width:100%;padding:11px 13px;background:#060b16;border:1px solid var(--line);border-radius:12px;color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s}
textarea{resize:vertical;min-height:64px}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.25)}
select option{background:#0a111f}
label.f{display:block;text-align:left;font-size:13px;color:var(--muted);margin:0}
label.f>input,label.f>select,label.f>textarea{margin-top:5px;color:var(--text);font-size:15px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 16px;border:0;border-radius:12px;background:var(--blue);color:#fff;font-weight:600;cursor:pointer;transition:filter .15s,transform .05s;white-space:nowrap}
.btn:hover{filter:brightness(1.12)} .btn:active{transform:translateY(1px)}
.btn.green{background:var(--green)} .btn.red{background:var(--red)} .btn.amber{background:var(--amber)} .btn.gray{background:var(--slate)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn.sm{padding:6px 10px;font-size:13px;border-radius:9px}
.btn.lg{padding:14px 20px;font-size:16px;width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
:focus-visible{outline:2px solid #93c5fd;outline-offset:2px}

/* ---------- LOGIN ---------- */
body.login{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(900px 500px at 50% -10%,rgba(37,99,235,.35),transparent 60%),radial-gradient(700px 400px at 50% 110%,rgba(22,163,74,.18),transparent 60%),var(--bg)}
.login-card{width:min(420px,100%);background:rgba(10,17,31,.92);border:1px solid var(--line);border-radius:22px;padding:34px 28px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.login-card .logo{width:72px;height:72px;margin:0 auto 10px;display:block}
.login-card .welcome{font-size:30px;margin:6px 0 2px}
.login-card .brand{color:var(--muted);margin-bottom:18px;font-weight:600}
.login-card form{display:grid;gap:14px;margin-top:18px}
.pwwrap{position:relative}.pwwrap button{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;font-size:18px;padding:6px}
.msg{min-height:20px;color:#fca5a5;font-size:14px}
.langbar{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.langbar button{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;font-weight:700;font-size:13px}
.langbar button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.blocked{margin-top:18px;border:1px solid #7f1d1d;background:rgba(127,29,29,.25);border-radius:16px;padding:18px}
.blocked h3{color:#fecaca;margin-bottom:8px}
.contact-box{margin-top:12px;display:grid;gap:8px}
.contact-box a{display:block;padding:10px;border-radius:10px;background:var(--panel2);text-decoration:none;color:#fff;font-weight:600}

/* ---------- LAYOUT APP ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#070c18;border-bottom:1px solid var(--line);padding:10px 18px;position:sticky;top:0;z-index:20}
.top .left,.top .right{display:flex;align-items:center;gap:12px}
.top .name{font-weight:800;font-size:16px}
.top .co{color:var(--muted);font-size:13px}
.badge{padding:3px 11px;border-radius:999px;font-weight:700;font-size:12px;background:var(--blue);color:#fff}
.layout{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 57px)}
.sidebar{background:#070c18;border-right:1px solid var(--line);padding:14px 12px}
#side{display:flex;flex-direction:column;gap:6px}
#side button{display:flex;align-items:center;gap:10px;justify-content:flex-start;padding:11px 13px;border-radius:12px;border:0;background:transparent;color:#c7d2e6;cursor:pointer;font-weight:600;text-align:left}
#side button:hover{background:var(--panel2)}
#side button.active{background:var(--blue);color:#fff}
.content{padding:24px 18px 60px}
.page{max-width:1180px;margin:0 auto}
.page-head{text-align:center;margin-bottom:20px}
.page-head p{margin:4px 0 0;color:var(--muted)}
.menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:6px 10px;cursor:pointer;font-size:18px}
.banner{max-width:1180px;margin:0 auto 16px;padding:11px 16px;border-radius:12px;text-align:center;font-weight:600}
.banner.amber{background:rgba(217,119,6,.2);border:1px solid #92560a;color:#fcd34d}
.banner.blue{background:rgba(37,99,235,.2);border:1px solid #1e40af;color:#bfdbfe}
.banner .btn{margin-left:10px}

/* ---------- tarjetas KPI llenas y centradas ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:0 auto 20px;max-width:1180px}
.kpi{border-radius:var(--radius);padding:22px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:132px;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.kpi .ico{font-size:26px;line-height:1}
.kpi b{font-size:32px;line-height:1.1;letter-spacing:-.02em}
.kpi span{font-weight:600;opacity:.95;font-size:14px}
.kpi.blue{background:var(--blue)} .kpi.green{background:var(--green)} .kpi.dgreen{background:var(--green2)} .kpi.amber{background:var(--amber)}
.kpi.red{background:var(--red)} .kpi.cyan{background:var(--cyan)} .kpi.violet{background:var(--violet)} .kpi.slate{background:var(--slate)}
.kpi.click{cursor:pointer}

/* ---------- paneles / tablas ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:0 auto 18px;max-width:1180px}
.card>h3{text-align:center;margin-bottom:14px}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:0 auto 16px;max-width:1180px}
.toolbar .grow{flex:1 1 240px;max-width:420px}
.toolbar input,.toolbar select{width:auto;min-width:130px}
.toolbar .grow input{width:100%}
.tablewrap{overflow-x:auto;border-radius:12px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;background:var(--panel)}
th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
th{background:#0c1426;color:#9fb0cf;font-size:12.5px;font-weight:700}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#0c1528}
td.l,th.l{text-align:left}
td.actions{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.empty{padding:34px;text-align:center;color:var(--muted)}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;font-weight:700;font-size:12px;color:#fff}
.chip.green{background:var(--green)} .chip.amber{background:var(--amber)} .chip.red{background:var(--red)} .chip.blue{background:var(--blue)}
.chip.cyan{background:var(--cyan)} .chip.violet{background:var(--violet)} .chip.slate{background:var(--slate)}
.pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pill{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:#c7d2e6;cursor:pointer;font-weight:600}
.pill.on{background:var(--blue);border-color:var(--blue);color:#fff}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sect{margin:18px 0 8px;font-weight:700;color:#cbd5e1;text-align:center;border-top:1px solid var(--line);padding-top:14px}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.check{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:#060b16;text-align:left}
.check input{width:auto;margin:0}
.check:has(input:checked){border-color:var(--blue);background:rgba(37,99,235,.18)}

/* ---------- POS ---------- */
.pos{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;max-width:1180px;margin:0 auto}
.pos .card{margin:0;max-width:none}
.prodgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px;max-height:60vh;overflow:auto;padding:2px}
.prod{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px 8px;text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:3px;min-height:92px;justify-content:center}
.prod:hover{border-color:var(--blue)}
.prod .pn{font-weight:700;font-size:14px;line-height:1.2}
.prod .pp{color:#4ade80;font-weight:800}
.prod.out{opacity:.4;pointer-events:none}
.cartrow{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);text-align:left}
.qty{display:flex;align-items:center;gap:6px}.qty button{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:transparent;cursor:pointer;font-weight:800}
.totals{margin-top:12px;display:grid;gap:6px}
.totals div{display:flex;justify-content:space-between}
.totals .grand{font-size:26px;font-weight:800;color:#4ade80;border-top:1px solid var(--line);padding-top:8px;margin-top:4px}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(2,6,14,.78);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:24px 12px;z-index:50}
.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:20px;width:min(520px,100%);padding:22px;margin:auto}
.modal-box.wide{width:min(860px,100%)}
.modal-box h3{text-align:center;margin-bottom:14px;font-size:20px}
.modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.form{display:grid;gap:12px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);padding:12px 20px;border-radius:12px;font-weight:600;z-index:90;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:92vw;text-align:center}
.toast.ok{background:var(--green)} .toast.err{background:var(--red)}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
.thumbs .th{position:relative}
.thumbs img{width:86px;height:86px;object-fit:cover;border-radius:10px;border:1px solid var(--line);cursor:pointer;background:#000}
.thumbs .x{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:0;background:var(--red);color:#fff;cursor:pointer;font-weight:800;line-height:1}
canvas.sig{width:100%;height:150px;background:#fff;border-radius:12px;touch-action:none;display:block}
.bigimg{max-width:100%;max-height:78vh;border-radius:12px;display:block;margin:0 auto}
.tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:0 auto 18px}
.tabs button{padding:10px 20px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:#c7d2e6;font-weight:700;cursor:pointer}
.tabs button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.typegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.typeopt{border:1px solid var(--line);border-radius:12px;padding:10px 4px;text-align:center;cursor:pointer;background:#060b16;font-size:13px;font-weight:600}
.typeopt .e{font-size:24px;display:block}
.typeopt.on{border-color:var(--blue);background:rgba(37,99,235,.25)}
.planopt{border:1px solid var(--line);border-radius:12px;padding:12px 4px;text-align:center;cursor:pointer;background:#060b16;font-weight:700}
.planopt small{display:block;color:#4ade80;font-size:15px}
.planopt.on{border-color:var(--green);background:rgba(22,163,74,.22)}
.pwcell{cursor:pointer;font-family:ui-monospace,Menlo,Consolas,monospace;background:#060b16;border:1px dashed var(--line);border-radius:8px;padding:4px 9px;color:#fcd34d}

/* ---------- consola Super Admin ---------- */
body.console{background:radial-gradient(1000px 420px at 50% -120px,rgba(37,99,235,.28),transparent 70%),var(--bg)}
.console .top{background:transparent;border-bottom:0;position:static;padding:14px 22px}
.console .hero{text-align:center;margin:8px auto 4px}
.console .hero h2{font-size:28px}
.console .content{padding-top:6px}

@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:fixed;inset:57px auto 0 0;width:230px;z-index:30;transform:translateX(-100%);transition:transform .2s}
  .sidebar.open{transform:none}
  .menu-toggle{display:inline-block}
  .pos{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .top .co{display:none}
}
@media (max-width:560px){
  .grid2{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi b{font-size:25px}
  .top{flex-wrap:wrap;justify-content:center}
}
@media print{
  .top,.sidebar,.toolbar,.menu-toggle,.btn,.tabs,.banner{display:none!important}
  body{background:#fff;color:#000}.layout{display:block}
  .card,.kpi{box-shadow:none;border:1px solid #bbb;background:#fff!important;color:#000!important}
  th,td{color:#000}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* =====================================================================
   v2 — diseño según maqueta (sidebar de texto, tarjetas degradadas, etc.)
   ===================================================================== */
:root{--bg:#060a12;--panel:#0b111c;--panel2:#0f1726;--line:#18233a;--blue:#0b63e5;--amber:#f5a800;--orange:#ee4a1f;--green:#1f9d55;--green2:#0f6e32}
body{background:var(--bg)}
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.shell .sidebar{background:#0a0f19;border-right:1px solid #101a2c;padding:22px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:auto}
.brand{display:flex;align-items:center;gap:10px;padding:0 10px 26px;font-weight:800;font-size:19px;letter-spacing:-.01em}
.brand img{width:36px;height:36px;object-fit:contain}
.shell #side{gap:2px}
.shell #side button{padding:12px 14px;font-size:16px;font-weight:500;color:#d6deee;border-radius:10px}
.shell #side button:hover{background:#101a2c}
.shell #side button.active{background:rgba(11,99,229,.22);color:#fff;box-shadow:inset 3px 0 0 var(--blue)}
.side-foot{margin-top:auto;padding:14px 10px 0;border-top:1px solid #101a2c;display:grid;gap:8px;font-size:13px}
.side-foot .u{font-weight:700;font-size:14px}
.main{min-width:0;padding:26px 30px 70px}
.pagebar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.pagebar h1{font-size:34px;line-height:1.15;letter-spacing:-.02em;margin:0}
.pb-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.pb-row{display:flex;gap:14px;align-items:center}
#clock{font-variant-numeric:tabular-nums;font-size:17px;color:#e2e8f0}
.langsel{width:auto!important;min-width:128px;padding:10px 14px!important;border-radius:12px!important;background:#0b111c!important;font-weight:600}
.opendot{color:#22c55e;font-weight:700;display:flex;align-items:center;gap:7px}
.opendot:before{content:"";width:12px;height:12px;border-radius:50%;background:#22c55e}
.subline{color:#d3dcec;margin:-6px 0 20px;font-size:18px}
.subline b{color:#34d399;font-weight:500}
.page-head{display:none}
.menu-toggle{display:none}
.shell .content,.shell .page{max-width:none}
.main .card,.main .toolbar,.main .kpis,.main .banner,.main .pos,.main .tabs{max-width:none}
.main .card>h3{text-align:left}
.main .toolbar{justify-content:flex-start}
.main .tabs{justify-content:flex-start}
.main .pills{justify-content:flex-start}

/* tarjetas KPI degradadas, texto a la izquierda */
.kpis{grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:18px}
.kpi{align-items:flex-start;text-align:left;justify-content:flex-start;padding:22px;min-height:150px;gap:6px;border-radius:14px;border:1px solid rgba(255,255,255,.13);box-shadow:0 10px 28px rgba(0,0,0,.35)}
.kpi svg{width:34px;height:34px;margin-bottom:6px;stroke:none;fill:#fff}
.kpi b{font-size:34px;letter-spacing:-.02em}
.kpi span{font-size:16px;font-weight:600}
.kpi.blue{background:linear-gradient(160deg,#0b6bf0,#0a55cc)}
.kpi.amber{background:linear-gradient(160deg,#ffb700,#f39c00)}
.kpi.orange,.kpi.red{background:linear-gradient(160deg,#f2501f,#e03d10)}
.kpi.green{background:linear-gradient(160deg,#25a85d,#178a46)}
.kpi.dgreen{background:linear-gradient(160deg,#117a38,#0b5c28)}
.kpi.cyan{background:linear-gradient(160deg,#0aa0c4,#087f9c)}
.kpi.violet{background:linear-gradient(160deg,#8b4af0,#6a2fd0)}
.kpi.slate{background:linear-gradient(160deg,#3a475c,#2a3547)}
.card{background:var(--panel);border-radius:14px}
th{background:transparent;color:#e8eefb;font-size:14px;font-weight:700;padding:14px 12px}
td{padding:14px 12px}
.tablewrap{border:0}
table{background:transparent}
.legend{display:flex;gap:26px;margin-top:6px}
.legend span{display:flex;align-items:center;gap:8px;font-size:17px}
.legend i{width:16px;height:16px;border-radius:50%;display:inline-block}
.tk{font-weight:700}.tk.blue{color:#3b82f6}.tk.cyan{color:#22d3ee}.tk.amber{color:#facc15}.tk.violet{color:#a78bfa}.tk.green{color:#22c55e}.tk.slate{color:#94a3b8}.tk.red{color:#f97316}
.stx{font-weight:600}.stx.blue{color:#4ade80}.stx.cyan{color:#22d3ee}.stx.amber{color:#facc15}.stx.violet{color:#a78bfa}.stx.green{color:#22c55e}.stx.slate{color:#94a3b8}.stx.red{color:#f87171}
.btn.outline{background:transparent;border:1px solid var(--line);color:#e8eefb}
.btn svg,.inp svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
tr.sel{background:rgba(11,99,229,.16)}

/* ---------- LOGIN v2 ---------- */
body.login{background:radial-gradient(800px 480px at 15% 0%,rgba(11,99,229,.30),transparent 60%),radial-gradient(700px 460px at 90% 100%,rgba(124,58,237,.22),transparent 60%),#060a12}
.login-card{width:min(400px,100%);padding:38px 30px 26px;border-radius:24px;background:rgba(11,17,28,.94)}
.login-card .logo{width:92px;height:92px;object-fit:contain;margin:0 auto 6px;filter:drop-shadow(0 8px 24px rgba(59,99,246,.45))}
.login-card .welcome{font-size:28px;margin:6px 0 2px}
.login-card .brand{display:block;padding:0;margin-bottom:6px;font-size:15px;color:#9fb0cf;font-weight:600}
.inp{position:relative}
.inp>svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:none;stroke:#7b8aa8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.inp>input{padding-left:42px!important}
.pwwrap button{color:#9fb0cf}
.pwwrap button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#go{background:linear-gradient(90deg,#0b63e5,#3b5bf0);border-radius:12px;font-size:16px}
.login-foot{margin-top:18px;font-size:12px;color:#64738f}
.langbar button{padding:5px 11px;font-size:12px}
.notice{background:rgba(217,119,6,.18);border:1px solid #92560a;color:#fcd34d;border-radius:12px;padding:10px;font-size:14px;margin-top:14px}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .shell .sidebar{position:fixed;inset:0 auto 0 0;width:240px;z-index:40;transform:translateX(-100%);transition:transform .2s}
  .shell .sidebar.open{transform:none}
  .menu-toggle{display:inline-block}
  .main{padding:16px 14px 60px}
  .pagebar{flex-wrap:wrap}.pagebar h1{font-size:24px}
  .pb-right{align-items:flex-start}
}
@media (max-width:560px){.kpi{padding:16px;min-height:120px}.kpi b{font-size:26px}.kpi svg{width:26px;height:26px}}
@media print{.shell{display:block}.pagebar,.shell .sidebar{display:none!important}}

/* =====================================================================
   v3 — marca Misitu, tema naranja, login nuevo, responsive
   ===================================================================== */
:root{--o1:#f6933f;--o2:#ec6a1c;--accent:#f28b3c}
.btn:not(.green):not(.red):not(.amber):not(.gray):not(.ghost):not(.outline){background:linear-gradient(135deg,var(--o1),var(--o2));color:#fff}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(242,139,60,.25)}
.shell #side button.active{background:rgba(242,139,60,.17);box-shadow:inset 3px 0 0 var(--accent)}
.tabs button.on,.pill.on,.langbar button.on{background:linear-gradient(135deg,var(--o1),var(--o2));border-color:transparent;color:#fff}
.check:has(input:checked),.typeopt.on{border-color:var(--accent);background:rgba(242,139,60,.18)}
.badge{background:linear-gradient(135deg,var(--o1),var(--o2))}
.brand img.wm,.top .wm{height:22px;width:auto;object-fit:contain}
.brand{gap:9px}
.top .left{gap:10px}

/* ---------- LOGIN: tarjeta pequeña centrada con hoja naranja ---------- */
body.login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:20px;
  background:radial-gradient(700px 420px at 12% 0%,rgba(59,91,246,.28),transparent 60%),radial-gradient(640px 420px at 92% 100%,rgba(242,139,60,.22),transparent 60%),#060a12}
.lg-card{width:min(370px,100%);min-height:600px;border-radius:30px;overflow:hidden;display:flex;flex-direction:column;background:#080d1b;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lg-hero{position:relative;flex:none;height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding-bottom:34px;
  background:radial-gradient(240px 190px at 50% 38%,rgba(59,91,246,.5),transparent 70%),radial-gradient(200px 160px at 85% 8%,rgba(124,58,237,.38),transparent 70%),linear-gradient(160deg,#0e1736,#070b18)}
.lg-hero .mark{width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 10px 26px rgba(80,100,255,.55))}
.lg-hero .word{width:132px;height:auto}
.lg-sheet{position:relative;flex:1;margin-top:-44px;padding:40px 24px 18px;text-align:center;color:#fff;
  background:linear-gradient(180deg,var(--o1) 0%,var(--o2) 100%);border-radius:50% 50% 0 0 / 56px 56px 0 0;display:flex;flex-direction:column}
.lg-sheet h1{font-size:25px;margin:6px 0 4px;letter-spacing:-.02em;text-shadow:0 2px 10px rgba(0,0,0,.15)}
.lg-sub{margin:0 0 16px;font-size:13px;color:rgba(255,255,255,.88)}
.lg-sheet form{display:grid;gap:11px}
.pin{position:relative}
.pin>svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:none;stroke:rgba(255,255,255,.9);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.lg-sheet form .pin input:not([type=checkbox]):not([type=radio]):not([type=file]){width:100%;height:48px;padding:0 46px 0 44px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.2);color:#fff;font-size:15px;box-shadow:none}
.lg-sheet form .pin input::placeholder{color:rgba(255,255,255,.8)}
.lg-sheet form .pin input:focus{background:rgba(255,255,255,.3);border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.lg-sheet input:-webkit-autofill{-webkit-text-fill-color:#fff;transition:background-color 99999s}
.pin #eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;background:none;cursor:pointer;color:#fff;display:grid;place-items:center;padding:0}
.pin #eye svg{position:static;transform:none;width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lg-btn{height:48px;border:0;border-radius:999px;background:#fff;color:#d9560d;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 8px 22px rgba(120,40,0,.28);transition:transform .08s,filter .15s}
.lg-btn:hover{filter:brightness(.97)}.lg-btn:active{transform:translateY(1px)}.lg-btn:disabled{opacity:.6;cursor:wait}
.lg-sheet .msg{min-height:0;background:rgba(0,0,0,.3);color:#fff;border-radius:14px;padding:8px 12px;font-size:13px}
.lg-sheet .msg:empty{display:none}
.lg-sheet .notice{background:rgba(0,0,0,.28);border:0;color:#fff;border-radius:14px;margin:10px 0 0;font-size:13px}
.lg-sheet .blocked{background:rgba(0,0,0,.32);border:0;border-radius:16px;padding:14px;margin-top:12px;text-align:center}
.lg-sheet .blocked h3{color:#fff;font-size:15px}
.lg-sheet .blocked p{font-size:13px}
.lg-sheet .contact-box a{background:rgba(255,255,255,.2);border-radius:999px;font-size:14px;padding:9px}
.lg-sheet .langbar{margin-top:auto;padding-top:16px}
.lg-sheet .langbar button{border-color:rgba(255,255,255,.55);color:#fff;padding:4px 11px;font-size:12px}
.lg-sheet .langbar button.on{background:#fff;color:#d9560d;border-color:#fff}
.lg-foot{margin-top:10px;font-size:11px;color:rgba(255,255,255,.8)}
@media (max-width:440px){body.login{padding:0}.lg-card{width:100%;min-height:100vh;min-height:100dvh;border-radius:0;border:0}}
@media (max-height:700px) and (min-width:441px){.lg-card{min-height:0}.lg-hero{height:170px}.lg-hero .mark{width:70px;height:70px}}

/* ---------- responsive general (laptop, tablet, celular) ---------- */
html{-webkit-text-size-adjust:100%}
img,canvas{max-width:100%}
@media (max-width:900px){
  .toolbar input,.toolbar select{min-width:0}
  .tablewrap{-webkit-overflow-scrolling:touch}
  .top{padding:8px 12px}
}
@media (max-width:560px){
  .main{padding:14px 10px 60px}
  .pagebar h1{font-size:20px}
  .pb-row{gap:8px}#clock{font-size:14px}
  .langsel{min-width:100px;padding:8px 10px!important}
  .modal{padding:0}
  .modal-box,.modal-box.wide{border-radius:0;min-height:100vh;min-height:100dvh;width:100%;padding:18px 14px}
  .grid3,.grid2{grid-template-columns:1fr}
  .toolbar{flex-direction:column;align-items:stretch}.toolbar .grow{max-width:none}
  .toolbar .btn,.toolbar select,.toolbar input{width:100%}
  th,td{padding:10px 8px;font-size:13px}
  .kpis{grid-template-columns:repeat(2,1fr)}
}