/* DynamicDNSPro Vault — base: reset, tipografía, controles y capas flotantes. */
*,*::before,*::after{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font:var(--t-md)/1.5 var(--font);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-weight:600;line-height:1.25;letter-spacing:-.01em}
a{color:var(--accent-text)}
code,kbd{font-family:var(--mono)}
::selection{background:var(--accent-soft)}

/* Iconos del sprite: <svg class="ic"><use href="assets/icons.svg#i-key-round"/></svg> */
.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.ic-lg{width:20px;height:20px}

/* ── Botones ── un solo sistema: base · primary · ghost · danger · mini · icon */
button,.btn{font:500 var(--t-sm)/1 var(--font);color:var(--text);background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:8px 14px;min-height:34px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;text-decoration:none;transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
button:hover,.btn:hover{border-color:var(--line-strong);background:var(--surface)}
.primary,.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.primary:hover,.btn.primary:hover{background:var(--accent);border-color:var(--accent);filter:brightness(1.08)}
.ghost{background:transparent}
.danger,.ghost.danger{color:var(--danger)}
.danger:hover{border-color:var(--danger);background:var(--danger-soft)}
.primary.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.mini{min-height:26px;padding:4px 10px;font-size:var(--t-xs);border-radius:var(--r-sm)}
.mini.primary{color:var(--on-accent)}
.icon-btn{min-height:30px;width:30px;padding:0;background:transparent;border-color:transparent;color:var(--muted)}
.icon-btn:hover{color:var(--text);background:var(--surface-2);border-color:transparent}
button:disabled{opacity:.45;cursor:not-allowed;filter:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Campos ── todos los tipos con la misma estética, sin controles nativos */
input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{font:var(--t-md)/1.4 var(--font);color:var(--text);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 11px;min-height:36px;outline:none;
  width:100%;transition:border-color .15s var(--ease),box-shadow .15s var(--ease);appearance:none;-webkit-appearance:none}
textarea{min-height:84px;resize:vertical;line-height:1.5}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder,textarea::placeholder{color:var(--muted)}
input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button,input::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}
input[type=number]{-moz-appearance:textfield}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:16px;height:16px}
input[type=range]{accent-color:var(--accent);width:100%}

/* ── Modal ── */
#modal{position:fixed;inset:0;z-index:100;background:var(--overlay);display:flex;align-items:center;justify-content:center;padding:var(--s-4)}
.mbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  width:min(520px,100%);max-height:88vh;overflow:auto;padding:var(--s-5);animation:mIn .2s var(--ease)}
@keyframes mIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mbox h3{font-size:var(--t-lg);margin-bottom:var(--s-3)}
.mrow{margin:0 0 var(--s-3)}
.mrow>label{display:block;font-size:var(--t-sm);font-weight:500;color:var(--muted);margin-bottom:6px}
.macts{display:flex;justify-content:flex-end;gap:var(--s-2);margin-top:var(--s-5);flex-wrap:wrap}
.mwarn{color:var(--danger);font-size:var(--t-sm);margin:var(--s-1) 0 var(--s-3)}
#mcontent.drag{outline:2px dashed var(--accent);outline-offset:-8px;background:var(--accent-soft)}

/* ── Aviso (toast) ── */
#toast{position:fixed;bottom:var(--s-5);left:50%;transform:translateX(-50%);z-index:200;max-width:min(560px,calc(100vw - 32px));
  background:var(--surface);color:var(--text);border:1px solid var(--line-strong);border-radius:var(--r-md);
  padding:10px 16px;font-size:var(--t-sm);box-shadow:var(--shadow)}

/* ── Menú contextual ── */
#ctx{position:fixed;z-index:400;min-width:248px;max-width:300px;max-height:calc(100vh - 16px);overflow:auto;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:6px;animation:ctxIn .12s var(--ease)}
@keyframes ctxIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
#ctx .ci{display:flex;align-items:center;gap:10px;min-height:32px;padding:6px 10px;border-radius:var(--r-sm);cursor:pointer;font-size:var(--t-sm);outline:none}
#ctx .ci .ic{width:16px;height:16px;color:var(--muted);flex:none}
#ctx .ci .cl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ctx .ci kbd{font:inherit;font-size:var(--t-xs);color:var(--muted);min-width:20px;text-align:center;padding:0 5px;border:1px solid var(--line);border-radius:5px}
#ctx .ci:hover,#ctx .ci:focus-visible,#ctx .ci:focus{background:var(--surface-2)}
#ctx .ci:hover .ic,#ctx .ci:focus .ic{color:var(--text)}
#ctx .ci.danger,#ctx .ci.danger .ic{color:var(--danger)}
#ctx .ci.danger:hover,#ctx .ci.danger:focus{background:color-mix(in srgb,var(--danger) 10%,transparent)}
#ctx .ci.plan .cl::after{content:"Pro";margin-left:6px;font-size:10px;font-weight:600;color:var(--accent-text);background:var(--accent-soft);padding:1px 6px;border-radius:999px}
#ctx .chd{display:flex;flex-direction:column;gap:1px;padding:6px 10px 8px;border-bottom:1px solid var(--line);margin:-2px -2px 4px}
#ctx .chd b{font-size:var(--t-sm);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ctx .chd span{font-size:var(--t-xs);color:var(--muted)}
#ctx .csep{height:1px;background:var(--line);margin:4px 6px}
#ctx .cgl{font-size:var(--t-xs);color:var(--muted);padding:4px 10px 2px}
@media (prefers-reduced-motion:reduce){#ctx{animation:none}}

/* ── Acceso rápido ⌘K ── */
#quick{position:fixed;inset:0;z-index:150;background:var(--overlay);display:flex;justify-content:center;padding:14vh var(--s-4) 0}
.qbox{width:min(600px,100%);height:fit-content;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);overflow:hidden}
#qInput{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:14px 16px;font-size:var(--t-lg);background:var(--surface);box-shadow:none}
#qRes{max-height:50vh;overflow:auto;padding:4px}
.qr{display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:var(--r-md);cursor:pointer}
.qr:hover,.qr.sel{background:var(--accent-soft)}

/* ── Bloqueo ── */
#lockScr{position:fixed;inset:0;z-index:300;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:var(--s-4)}
.lockbox{width:min(340px,100%);text-align:center}
.lockbox .lk{color:var(--muted);margin-bottom:var(--s-3)}
.lockbox h2{font-size:var(--t-xl);margin-bottom:var(--s-4)}
.lockbox input{margin-bottom:var(--s-2)}
.lockbox button{width:100%}
#lkErr{color:var(--danger);font-size:var(--t-sm);min-height:20px;margin-bottom:var(--s-2)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
#ctx .ci.on{color:var(--accent-text);font-weight:500}
.lockbox .pkmain{margin:0 0 var(--s-3)}
.lockbox .pkalt{width:auto;margin:var(--s-2) auto 0;color:var(--muted)}