/* DGII-OFV · sistema de diseño (Swiss/Minimal oscuro, derivado de ui-ux-pro-max) */
:root{
  color-scheme:dark;
  --bg:#0F172A; --surface:#1B2336; --muted:#272F42; --border:#334155;
  --fg:#F8FAFC; --fg-muted:#94A3B8;
  --accent:#22C55E; --on-accent:#0F172A;
  --danger:#EF4444; --warn:#F59E0B; --info:#38BDF8;
  --ring:#FFFFFF;
  --r:10px; --r-sm:7px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --font:"Fira Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Fira Code",ui-monospace,SFMono-Regular,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 15px/1.5 var(--font)}
h1,h2,h3{margin:0;font-weight:600;line-height:1.25}
p{margin:0}
a{color:var(--info)}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:4px}

/* ---------- controles ---------- */
label,.label{display:block;font-size:13px;font-weight:500;color:var(--fg-muted);margin-bottom:6px}
.hint{font-size:12.5px;color:var(--fg-muted);margin-top:6px}
input,select,textarea{
  width:100%;min-height:42px;padding:9px 12px;font:inherit;color:var(--fg);
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
input:hover,select:hover{border-color:#475569}
input:focus-visible,select:focus-visible{outline:none;border-color:var(--info);box-shadow:0 0 0 3px rgb(56 189 248/.28)}
input::placeholder{color:#64748B}
input:disabled{opacity:.6;cursor:not-allowed}
input[aria-invalid="true"]{border-color:var(--danger)}
.mono{font-family:var(--mono)}
.field{margin-bottom:var(--sp-4)}
.pw{position:relative}
.pw input{padding-right:48px}
.pw .toggle{position:absolute;right:2px;top:2px;width:40px;height:38px;display:grid;place-items:center;
  background:none;border:0;color:var(--fg-muted);cursor:pointer;border-radius:var(--r-sm)}
.pw .toggle:hover{color:var(--fg)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:40px;padding:0 var(--sp-4);
  font:500 14px var(--font);color:var(--fg);background:var(--muted);border:1px solid var(--border);border-radius:var(--r-sm);
  cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease),transform .12s var(--ease)}
.btn:hover{background:#313b52}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.btn.primary:hover{background:#34d56f}
.btn.danger{color:#fca5a5}
.btn.danger:hover{background:rgb(239 68 68/.15);border-color:var(--danger)}
.btn.ghost{background:transparent}
.btn.sm{min-height:34px;padding:0 var(--sp-3);font-size:13px}
.btn.block{width:100%}
.btn[disabled],.btn[aria-busy="true"]{opacity:.7;cursor:progress}
.spin{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;display:none}
[aria-busy="true"] .spin{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
@media (pointer:coarse){.btn{min-height:44px}.btn.sm{min-height:44px}}

.alert{display:flex;gap:var(--sp-2);align-items:flex-start;padding:10px 12px;border-radius:var(--r-sm);font-size:13.5px;
  background:rgb(239 68 68/.12);border:1px solid rgb(239 68 68/.5);color:#fecaca}
.alert[hidden]{display:none}
.note{padding:10px 12px;border-radius:var(--r-sm);background:var(--muted);color:var(--fg-muted);font-size:13.5px;border:1px solid var(--border)}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;
  border:1px solid var(--border);background:var(--muted);color:var(--fg)}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.badge.ok{color:var(--accent);border-color:rgb(34 197 94/.4)}
.badge.bad{color:#fca5a5;border-color:rgb(239 68 68/.45)}
.badge.warn{color:var(--warn);border-color:rgb(245 158 11/.45)}
.badge.off{color:var(--fg-muted)}
.badge.plain::before{display:none}

/* ---------- login ---------- */
.auth{min-height:100dvh;display:grid;place-items:center;padding:var(--sp-5) var(--sp-4);
  background:radial-gradient(900px 400px at 50% -10%,rgb(34 197 94/.08),transparent 60%),var(--bg)}
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:var(--sp-6)}
.brand{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.brand-mark{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgb(34 197 94/.12);color:var(--accent);border:1px solid rgb(34 197 94/.35)}
.brand-mark svg{width:22px;height:22px}
.brand h1{font-size:18px}
.brand p{font-size:13px;color:var(--fg-muted)}
.auth-foot{margin-top:var(--sp-5);font-size:12.5px;color:var(--fg-muted);text-align:center}

/* ---------- app shell ---------- */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100dvh}
.side{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-4);
  background:var(--surface);border-right:1px solid var(--border)}
.side .brand{margin:0 0 var(--sp-2)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:var(--sp-3);min-height:42px;padding:0 var(--sp-3);border-radius:var(--r-sm);
  color:var(--fg-muted);text-decoration:none;font-weight:500;transition:background .18s var(--ease),color .18s var(--ease)}
.nav a:hover{background:var(--muted);color:var(--fg)}
.nav a[aria-current="page"]{background:rgb(34 197 94/.12);color:var(--accent)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--sp-2);font-size:13px;color:var(--fg-muted)}
.main{padding:var(--sp-5);max-width:1180px;width:100%}
.view[hidden]{display:none}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.page-head h2{font-size:22px}
.page-head p{color:var(--fg-muted);font-size:14px}
.tools{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.tools input[type=search],.tools select{width:auto;min-width:200px}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);margin-bottom:var(--sp-5)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--sp-4)}
.stat .k{font-size:12.5px;color:var(--fg-muted);font-weight:500;text-transform:uppercase;letter-spacing:.05em}
.stat .v{font:600 26px/1.2 var(--mono);margin-top:6px}
.stat .s{margin-top:8px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r)}
.panel>h3{font-size:14px;padding:var(--sp-4);border-bottom:1px solid var(--border)}
.check{list-style:none;margin:0;padding:var(--sp-2) var(--sp-4) var(--sp-4)}
.check li{display:flex;gap:var(--sp-3);align-items:flex-start;padding:10px 0;border-bottom:1px solid rgb(51 65 85/.5)}
.check li:last-child{border-bottom:0}
.check .dot{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--border);color:transparent;flex:none;margin-top:1px}
.check .dot svg{width:12px;height:12px}
.check li.done .dot{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.check .t{font-weight:500}.check .d{font-size:13px;color:var(--fg-muted)}

.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{position:sticky;top:0;text-align:left;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-muted);
  padding:10px var(--sp-4);border-bottom:1px solid var(--border);background:var(--surface);white-space:nowrap}
td{padding:12px var(--sp-4);border-bottom:1px solid rgb(51 65 85/.55);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .15s var(--ease)}
tbody tr:hover{background:rgb(39 47 66/.55)}
td .sub{display:block;font-size:12.5px;color:var(--fg-muted)}
td.actions{white-space:nowrap;text-align:right}
td.actions .btn+.btn{margin-left:6px}
.empty{padding:var(--sp-6) var(--sp-4);text-align:center;color:var(--fg-muted)}
.empty h3{color:var(--fg);margin-bottom:6px;font-size:16px}
.empty .btn{margin-top:var(--sp-4)}

/* ---------- logs ---------- */
.logbox{height:calc(100dvh - 210px);min-height:320px;overflow:auto;background:#0a101e;border:1px solid var(--border);border-radius:var(--r);
  padding:var(--sp-2) 0;font:12.5px/1.6 var(--mono)}
.logrow{display:grid;grid-template-columns:78px 62px 1fr;gap:var(--sp-3);padding:1px var(--sp-4)}
.logrow:hover{background:rgb(255 255 255/.03)}
.logrow .ts{color:#64748B}.logrow .lv{font-weight:500}
.logrow.INFO .lv{color:var(--info)}.logrow.WARNING .lv{color:var(--warn)}.logrow.ERROR .lv,.logrow.CRITICAL .lv{color:var(--danger)}
.logrow .m{white-space:pre-wrap;word-break:break-word}.logrow .m small{color:#64748B}

/* ---------- diálogos ---------- */
dialog{width:min(680px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;color:var(--fg);background:var(--surface);
  border:1px solid var(--border);border-radius:14px;overflow:hidden}
dialog[open]{display:flex;flex-direction:column;animation:pop .2s var(--ease)}
dialog::backdrop{background:rgb(2 6 23/.7);backdrop-filter:blur(2px)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.985)}}
dialog form{display:flex;flex-direction:column;min-height:0}
.d-head{display:flex;justify-content:space-between;align-items:center;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)}
.d-head h3{font-size:17px}
.d-body{padding:var(--sp-5);overflow:auto}
.d-foot{display:flex;justify-content:flex-end;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--border);background:rgb(15 23 42/.4)}
.icon-btn{display:grid;place-items:center;width:38px;height:38px;border:0;background:none;color:var(--fg-muted);border-radius:var(--r-sm);cursor:pointer}
.icon-btn:hover{background:var(--muted);color:var(--fg)}
fieldset{border:0;padding:0;margin:0 0 var(--sp-4)}
legend{font-size:13px;font-weight:500;color:var(--fg-muted);margin-bottom:8px;padding:0}
.methods{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-2)}
.method{position:relative}
.method input{position:absolute;opacity:0;inset:0;min-height:0;cursor:pointer}
.method .box{display:flex;flex-direction:column;justify-content:center;gap:2px;height:100%;min-height:64px;padding:12px 14px;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.method .box b{display:block;font-weight:600;font-size:14px}
.method .box span{display:block;font-size:12.5px;color:var(--fg-muted);margin-top:2px}
.method:hover .box{border-color:#475569}
.method input:checked+.box{border-color:var(--accent);background:rgb(34 197 94/.08)}
.method input:checked+.box b{color:var(--accent)}
.method input:focus-visible+.box{outline:2px solid var(--ring);outline-offset:2px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.sect{border-top:1px solid var(--border);margin-top:var(--sp-4);padding-top:var(--sp-4)}
.sect[hidden]{display:none}
.sect h4{margin:0 0 var(--sp-3);font-size:14px}

.cardgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.cell{position:relative}
.cell span{position:absolute;left:8px;top:4px;font:500 10px/1 var(--mono);color:#64748B;pointer-events:none}
.cell input{padding:15px 6px 5px;min-height:46px;text-align:center;font:500 14px var(--mono);letter-spacing:.06em}
.cell input.filled{border-color:rgb(34 197 94/.55)}
.progress{height:6px;background:var(--muted);border-radius:99px;overflow:hidden;margin:8px 0 4px}
.progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s var(--ease)}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3)}

/* ---------- token en vivo ---------- */
.token-acc{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:var(--sp-4)}
.token-acc .mono{font-size:15px;font-weight:600}
.gauge-wrap{position:relative;width:148px;height:148px;margin:0 auto var(--sp-2)}
.gauge{width:148px;height:148px;transform:rotate(-90deg)}
.gauge-track{fill:none;stroke:var(--muted);stroke-width:9}
.gauge-arc{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:326.73;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear,stroke .3s var(--ease)}
.gauge-arc.warn{stroke:var(--warn)}.gauge-arc.danger{stroke:var(--danger)}
.gauge-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.gauge-mid span{font-size:38px;font-weight:600;line-height:1}
.gauge-mid small{font-size:12px;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.08em}
.token-code{text-align:center;font-size:40px;font-weight:600;letter-spacing:.14em;margin-top:var(--sp-3);
  color:var(--fg);transition:opacity .15s var(--ease)}
.token-code.changing{animation:codepop .4s var(--ease)}
@keyframes codepop{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:none}}
#tk-sync[hidden]{display:none}

/* ---------- toasts ---------- */
.toasts{position:fixed;right:var(--sp-4);bottom:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);z-index:60;max-width:min(420px,calc(100vw - 32px))}
.toast{display:flex;gap:var(--sp-3);align-items:flex-start;padding:12px 14px;border-radius:var(--r-sm);background:var(--surface);
  border:1px solid var(--border);border-left:3px solid var(--info);box-shadow:0 8px 24px rgb(0 0 0/.35);animation:pop .2s var(--ease);font-size:14px}
.toast.ok{border-left-color:var(--accent)}.toast.err{border-left-color:var(--danger)}.toast.warn{border-left-color:var(--warn)}

/* ---------- responsive ---------- */
@media (max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--border);padding:var(--sp-3) var(--sp-4)}
  .side .brand{margin:0}.nav{flex-direction:row;order:3;width:100%;overflow-x:auto}
  .side-foot{margin:0 0 0 auto;flex-direction:row;align-items:center}
  .main{padding:var(--sp-4)}
  .methods,.row2{grid-template-columns:1fr}
  .cardgrid{grid-template-columns:repeat(4,1fr)}
  .logbox{height:calc(100dvh - 290px)}
}
@media (max-width:420px){.cards{grid-template-columns:1fr}.cardgrid{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}