:root{
  /* ---- Sistema Qivi (mockups aprobados) ---- */
  --bg:#0C0D11;
  --surface:#15171F;
  --raised:#1C1F29;
  --raised-2:#232733;
  --border:#2A2E3A;
  --border-soft:#22262F;
  --text:#ECEEF3;
  --muted:#8A90A0;
  --muted-dim:#646b7b;
  --violet:#8B6CFF;
  --violet-soft:#B29BFF;
  --teal:#34E0C4;

  /* ---- alias de compatibilidad (Auth / API / Plan, fuera de alcance del rediseño) ---- */
  --ink:var(--text);
  --ink-soft:var(--muted);
  --paper:var(--bg);
  --panel:var(--surface);
  --panel-2:var(--raised);
  --line:var(--border-soft);
  --line-strong:var(--border);
  --accent:var(--violet);
  --accent-ink:var(--violet-soft);
  --amber:#E7A33E;        /* ámbar: escaneos / actividad "viva" */
  --amber-bg:#3a2f18;
  --danger:#ff7a7a;
  --ok:#4fe3a6;
  --warn:#f4b73b;

  --radius:14px;
  --shadow:0 1px 0 rgba(0,0,0,.2), 0 12px 34px -18px rgba(0,0,0,.7);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:"Sora","Inter",system-ui,sans-serif;
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--sans);color:var(--text);
  background:
    radial-gradient(1200px 640px at 88% -12%, rgba(139,108,255,.09), transparent 60%),
    radial-gradient(900px 520px at 4% 108%, rgba(52,224,196,.05), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
a{color:var(--accent-ink)}
button{font-family:inherit}
.mono{font-family:var(--mono)}
.hidden{display:none !important}

/* module-grid texture used on auth + empty states */
.grid-bg{
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:22px 22px;
}

/* ---------- Auth ---------- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:32px}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.brand .mark{width:26px;height:26px;display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);gap:2px}
.brand .mark i{background:var(--ink);border-radius:2px}
.brand .mark i:nth-child(3),.brand .mark i:nth-child(5),.brand .mark i:nth-child(7){background:var(--accent)}
.brand b{font-family:var(--display);font-size:1.15rem;letter-spacing:-.02em}
/* Logo Qivi: PNG con fondo transparente real (degradado 3D + scatter tipo QR).
   Se compone directo sobre el panel oscuro, sin mix-blend-mode: el 'screen'
   anterior era para el logo viejo que traía fondo. */
.brand .brand-logo{height:48px;width:auto;display:block}
.topbar{padding-top:10px;padding-bottom:10px}
.auth-card .brand-logo{height:82px}
.auth-card .brand{margin:-6px 0 6px;justify-content:center}
.auth-card h1{font-family:var(--display);font-size:1.5rem;letter-spacing:-.03em;margin:18px 0 4px}
.auth-card p.sub{color:var(--ink-soft);margin:0 0 22px;font-size:.92rem}

label{display:block;font-size:.78rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink-soft);margin:14px 0 6px}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line-strong);border-radius:10px;
  font-size:.95rem;font-family:inherit;background:var(--panel-2);color:var(--ink)}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
input.mono{font-family:var(--mono)}

/* Contraseña con ojito para mostrar/ocultar (login y registro). */
.pw-field{position:relative}
.pw-field input{padding-right:42px}
.pw-eye{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:grid;place-items:center;border-radius:8px;
  background:none;border:none;cursor:pointer;color:var(--ink-soft);
}
.pw-eye:hover{color:var(--ink);background:var(--panel-3,rgba(255,255,255,.06))}
.pw-eye svg{width:19px;height:19px;pointer-events:none}

/* Divisor "o" + botón "Continuar con Google" (login/registro). */
.auth-or{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--ink-soft);font-size:.78rem}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.btn-google{
  background:#fff;color:#1f1f1f;border:1px solid var(--line-strong);gap:10px;text-decoration:none;
}
.btn-google:hover{background:#f7f7f7}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 16px;border-radius:10px;border:1px solid transparent;cursor:pointer;
  font-weight:600;font-size:.92rem;transition:transform .05s ease, background .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-ink)}
.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{background:var(--paper)}
.btn-block{width:100%}
.btn-sm{padding:7px 11px;font-size:.82rem;border-radius:8px}
.btn-danger{color:var(--danger);border-color:var(--line-strong);background:var(--panel-2)}
.link-btn{background:none;border:none;padding:0;color:var(--accent-ink);font-size:.82rem;cursor:pointer;text-decoration:underline}
.link-btn:hover{color:var(--accent)}
.btn-danger:hover{background:#3a2320;border-color:var(--danger)}

.switch-line{margin-top:18px;font-size:.88rem;color:var(--ink-soft);text-align:center}
.switch-line button{background:none;border:none;color:var(--accent-ink);font-weight:600;cursor:pointer;padding:0}
.err{color:var(--danger);font-size:.85rem;margin-top:12px;min-height:1em}

/* ---------- App shell: sidebar fijo + contenido ---------- */
#app{min-height:100vh;display:grid;grid-template-columns:236px 1fr}

.side{
  position:sticky;top:0;align-self:start;height:100vh;
  display:flex;flex-direction:column;gap:4px;padding:18px 14px;
  background:var(--panel);border-right:1px solid var(--line);
}
.side-brand{padding:2px 8px 16px}
.side-brand .brand-logo{height:34px;width:auto;display:block}
.side-nav{display:flex;flex-direction:column;gap:2px}
.nav-item{
  appearance:none;cursor:pointer;border:none;background:none;width:100%;text-align:left;
  display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;
  font-family:var(--sans);font-size:.86rem;font-weight:500;color:var(--ink-soft);transition:.13s;
}
.nav-item svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none}
.nav-item:hover{color:var(--ink);background:rgba(255,255,255,.03)}
.nav-item.active{color:#fff;background:rgba(139,108,255,.14);box-shadow:inset 2px 0 0 var(--accent)}

/* bloque de contexto: el breadcrumb del diseñador vive acá, dentro del sidebar */
.side-context{margin-top:10px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px}
.ctx-back{
  appearance:none;cursor:pointer;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  background:transparent;border:1px solid var(--line-strong);border-radius:9px;padding:6px 11px;
  color:var(--ink-soft);font-size:.75rem;font-weight:600;transition:.13s;
}
.ctx-back:hover{color:var(--ink);background:var(--panel-2)}
.ctx-crumb{padding:0 4px;font-family:var(--display);font-weight:600;font-size:.78rem;color:var(--ink)}
.ctx-crumb .sep{color:var(--muted-dim);margin:0 7px;font-weight:400}
.ctx-crumb .cur{color:var(--ink-soft)}

.side-spacer{flex:1}
.side-foot{display:flex;flex-direction:column;gap:8px;padding:12px 8px 2px;border-top:1px solid var(--line)}
.side-foot .who{font-size:.72rem;color:var(--muted-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-foot-row{display:flex;align-items:center;gap:8px}

.main{display:flex;flex-direction:column;min-width:0}
.main-top{display:flex;align-items:center;justify-content:flex-end;gap:14px;
  padding:12px 24px;border-bottom:1px solid var(--line);background:var(--panel);
  position:sticky;top:0;z-index:10}
.verify-banner{margin-right:auto;font-size:.82rem;color:var(--warn);display:flex;align-items:center;gap:8px}
.verify-banner .link-btn{color:var(--warn);font-weight:600}

.plan-pill{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:4px 9px;border-radius:999px;border:1px solid var(--line-strong);color:var(--ink-soft)}
.plan-pill.pro{background:var(--accent);color:#fff;border-color:var(--accent)}
.email-mini{font-size:.85rem;color:var(--ink-soft)}

@media(max-width:860px){
  #app{grid-template-columns:1fr}
  /* El sidebar se vuelve una barra superior compacta:
     fila 1 -> logo ......... plan-pill + Salir ; fila 2 -> nav ; fila 3 -> contexto */
  .side{position:sticky;top:0;z-index:15;height:auto;display:flex;flex-flow:row wrap;align-items:center;
    gap:8px 12px;padding:12px 16px;border-right:none;border-bottom:1px solid var(--line)}
  .side-brand{order:1;padding:0}
  .side-foot{order:2;margin-left:auto;border-top:none;padding:0;flex-direction:row;align-items:center;gap:12px}
  .side-foot .who{display:none}
  .side-nav{order:3;flex-basis:100%;flex-direction:row;flex-wrap:wrap;gap:4px}
  .nav-item{width:auto;padding:7px 10px}
  .nav-item.active{box-shadow:inset 0 -2px 0 var(--accent)}
  .side-context{order:4;flex-basis:100%;margin-top:2px;padding-top:10px}
  .side-spacer{display:none}
}

.container{max-width:1040px;margin:0 auto;padding:24px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.page-head h2{font-family:var(--display);font-size:1.4rem;letter-spacing:-.02em;margin:0}
.page-head .muted{color:var(--ink-soft);font-size:.88rem;margin:4px 0 0}

/* ---------- Mis QR: filas híbridas ---------- */
.qr-rows{display:flex;flex-direction:column;gap:10px}
.qr-row{
  position:relative;display:grid;
  grid-template-columns:64px minmax(0,1fr) 148px auto;
  align-items:center;gap:18px;
  padding:14px 18px 14px 16px;border-radius:14px;
  background:linear-gradient(180deg,var(--surface),#13151c);
  border:1px solid var(--border-soft);
  transition:border-color .16s ease, transform .16s ease;
}
.qr-row::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;
  background:var(--row-accent,var(--violet));opacity:.9;
}
.qr-row:hover{border-color:var(--border);transform:translateY(-1px)}

.qr-row .thumb{
  position:relative;width:64px;height:64px;border-radius:12px;padding:7px;background:#fff;cursor:pointer;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.6);
}
.qr-row .thumb img{width:100%;height:100%;display:block}
.qr-row .thumb .star{
  position:absolute;top:4px;right:4px;width:16px;height:16px;border-radius:5px;
  background:linear-gradient(135deg,var(--row-accent,var(--violet)),rgba(255,255,255,.8));
  display:grid;place-items:center;
}
.qr-row .thumb .star svg{width:9px;height:9px;color:#0b0c10}
.qr-row .thumb .over{
  position:absolute;inset:0;border-radius:12px;background:rgba(10,11,16,.72);
  display:grid;place-items:center;opacity:0;transition:opacity .15s;color:#fff;font-size:11px;
  font-family:var(--display);font-weight:600;
}
.qr-row .thumb:hover .over{opacity:1}
/* Link sin QR: la miniatura muestra un ícono de cadena en vez del QR. */
.qr-row .thumb.noqr{background:var(--raised);border:1px solid var(--border-soft);box-shadow:none;display:grid;place-items:center}
.qr-row .thumb.noqr .thumb-noqr{display:grid;place-items:center;color:var(--muted-dim)}
.qr-row .thumb.noqr .thumb-noqr svg{width:22px;height:22px}

.qr-row .main{min-width:0}
.qr-row .name-line{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.qr-row .name{font-family:var(--display);font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qr-row .state{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);flex:none}
.qr-row .state .d{width:7px;height:7px;border-radius:50%;background:var(--muted-dim)}
.qr-row .state.active{color:var(--ok)}   .qr-row .state.active .d{background:var(--ok)}
.qr-row .state.paused{color:var(--warn)} .qr-row .state.paused .d{background:var(--warn)}
.qr-row .state.plansusp{color:var(--danger)} .qr-row .state.plansusp .d{background:var(--danger)}

.plan-susp-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-bottom:16px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,122,122,.32);
  background:rgba(255,122,122,.08);color:#ffd7d2;font-size:13.5px}
.plan-susp-banner b{color:#fff}
.reactivate-modal{width:min(420px,92vw)}
.reactivate-list{max-height:44vh;overflow:auto;display:flex;flex-direction:column;gap:2px;margin:14px 0}
.reactivate-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-radius:8px}
.reactivate-row:hover{background:var(--panel-2)}
.reactivate-row label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.reactivate-room{font-size:12.5px;color:var(--muted);margin:0 0 4px}

.qr-row .dest{position:relative;display:flex;align-items:center;gap:6px;min-width:0;cursor:default}
.qr-row .dest > svg{width:13px;height:13px;color:var(--row-accent,var(--violet));flex:none}
.qr-row .dest .u{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qr-row .dest .tip{
  position:absolute;bottom:calc(100% + 8px);left:0;z-index:5;max-width:min(460px,60vw);
  background:#0b0c10;border:1px solid var(--border);border-radius:8px;padding:7px 11px;
  font-family:var(--mono);font-size:11.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.8);opacity:0;transform:translateY(3px);pointer-events:none;transition:.15s;
}
.qr-row .dest .tip::after{content:"";position:absolute;top:100%;left:16px;border:5px solid transparent;border-top-color:#0b0c10}
.qr-row .dest:hover .tip,.qr-row .dest:focus-visible .tip{opacity:1;transform:translateY(0)}

.qr-row .scans{display:flex;flex-direction:column;gap:4px}
.qr-row .scans .big{font-family:var(--display);font-weight:600;font-size:18px;display:flex;align-items:baseline;gap:6px}
.qr-row .scans .big small{font-family:var(--sans);font-size:11px;color:var(--muted-dim);font-weight:400}
.qr-row .spark{width:100%;height:22px;display:block}

.qr-row .acts{display:flex;align-items:center;gap:6px}
.qr-row .acts .icons{display:flex;align-items:center;gap:3px;margin-left:4px;padding-left:8px;border-left:1px solid var(--border-soft)}
.qr-row .ib{
  appearance:none;cursor:pointer;width:32px;height:32px;border-radius:8px;
  background:transparent;border:1px solid transparent;color:var(--muted-dim);
  display:grid;place-items:center;transition:.14s;position:relative;
}
.qr-row .ib:hover{background:var(--raised);color:var(--text)}
.qr-row .ib.danger:hover{color:#ff6b6b}
.qr-row .ib svg{width:15px;height:15px}
.qr-row .ib .lbl{
  position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:#0b0c10;border:1px solid var(--border);border-radius:6px;padding:4px 8px;
  font-size:10.5px;color:var(--text);white-space:nowrap;opacity:0;pointer-events:none;transition:.13s;
}
.qr-row .ib:hover .lbl{opacity:1}

@media(max-width:860px){
  .qr-row{grid-template-columns:56px minmax(0,1fr);row-gap:12px}
  .qr-row .scans,.qr-row .acts{grid-column:1 / -1}
  .qr-row .acts{flex-wrap:wrap}
}

/* ---------- Toggle Tabla / Cards ---------- */
.view-toggle{display:inline-flex;background:var(--surface);border:1px solid var(--border-soft);border-radius:11px;padding:3px;gap:2px;margin-left:auto}
.view-toggle button{appearance:none;border:none;background:transparent;color:var(--muted);font-family:var(--sans);font-size:.82rem;font-weight:600;padding:7px 13px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:7px;transition:.15s}
.view-toggle button svg{width:15px;height:15px}
.view-toggle button.on{background:var(--raised-2);color:var(--text);box-shadow:0 1px 0 rgba(255,255,255,.03) inset}
.view-toggle button:not(.on):hover{color:var(--text)}

/* ---------- Vista Cards: grid + carpetas + drag ---------- */
.qr-cards-hint{font-size:.78rem;color:var(--muted-dim);margin:0 0 14px}
.qr-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.group-modal-grid.qr-cards-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.qr-card-tile{position:relative;touch-action:none;user-select:none}
.qr-card-tile.armed .qr-card,.qr-card-tile.armed .qr-folder{animation:qr-card-wiggle .26s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.qr-card-tile.armed .qr-card,.qr-card-tile.armed .qr-folder{animation:none}}
@keyframes qr-card-wiggle{0%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}100%{transform:rotate(-1deg)}}

.qr-card{
  position:relative;cursor:pointer;
  background:linear-gradient(180deg,var(--surface),#13151c);
  border:1px solid var(--border-soft);border-radius:16px;padding:14px 14px 12px;
  display:flex;flex-direction:column;gap:8px;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.qr-card-tile:not(.armed):hover .qr-card{border-color:var(--border);transform:translateY(-2px);box-shadow:var(--shadow)}
.qr-card-tile.armed .qr-card{border-color:var(--accent);box-shadow:0 0 0 1px rgba(139,108,255,.35)}
.qr-card-tile.drop-target .qr-card,.qr-card-tile.drop-target .qr-folder{border-color:var(--teal);box-shadow:0 0 0 2px rgba(52,224,196,.35)}
.qr-card-tile.drop-before::before,.qr-card-tile.drop-after::before{
  content:"";position:absolute;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--teal);z-index:2;
}
.qr-card-tile.drop-before::before{left:-9px}
.qr-card-tile.drop-after::before{right:-9px}

.qr-card-accent{position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--row-accent,var(--accent));opacity:.9}
.qr-card-thumb{width:56%;max-width:104px;margin:0 auto;aspect-ratio:1;border-radius:11px;background:#fff;padding:9px;box-shadow:0 4px 14px -6px rgba(0,0,0,.6)}
.qr-card-thumb img{width:100%;height:100%;display:block}
.qr-card-thumb.noqr{background:var(--raised);border:1px solid var(--border-soft);box-shadow:none;display:grid;place-items:center;color:var(--muted-dim)}
.qr-card-thumb.noqr svg{width:20px;height:20px}
.qr-card-name{font-family:var(--display);font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.qr-card-url{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.qr-card-meta{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:2px}
.qr-card-meta .state{display:inline-flex;align-items:center;gap:5px}
.qr-card-meta .state .d{width:6px;height:6px;border-radius:50%;background:var(--muted-dim)}
.qr-card-meta .state.active{color:var(--ok)} .qr-card-meta .state.active .d{background:var(--ok)}
.qr-card-meta .state.paused{color:var(--warn)} .qr-card-meta .state.paused .d{background:var(--warn)}
.qr-card-scans{font-family:var(--mono)}

.qr-folder{
  cursor:pointer;background:linear-gradient(180deg,var(--raised),var(--raised-2));
  border:1px solid var(--border-soft);border-radius:16px;padding:14px;
  display:flex;flex-direction:column;gap:10px;transition:border-color .15s,transform .15s;
}
.qr-card-tile:not(.armed):hover .qr-folder{border-color:var(--accent-ink);transform:translateY(-2px)}
.qr-folder-grid{width:56%;max-width:104px;margin:0 auto;aspect-ratio:1;border-radius:11px;background:var(--raised-2);padding:7px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:5px}
.qr-folder-grid .mini{border-radius:6px;background:#fff;padding:2px;display:grid;place-items:center;overflow:hidden}
.qr-folder-grid .mini img{width:100%;height:100%;display:block}
.qr-folder-grid .mini.empty{background:var(--border-soft)}
.qr-folder-name{display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--display);font-weight:600;font-size:13px;text-align:center}
.qr-folder-name svg{width:13px;height:13px;color:var(--accent-ink);flex:none}
.qr-folder-name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qr-folder-count{font-size:11px;color:var(--muted);text-align:center}

.group-modal{width:min(560px,92vw)}
.group-name-input{font-family:var(--display);font-weight:600;font-size:1.05rem;background:transparent;border:1px solid transparent;border-radius:8px;padding:4px 8px;color:var(--ink);width:100%}
.group-name-input:hover,.group-name-input:focus{border-color:var(--line);outline:none}

/* empty state */
.empty{border:1px dashed var(--line-strong);border-radius:var(--radius);padding:48px 24px;text-align:center}
.empty h3{font-family:var(--display);margin:0 0 6px}
.empty p{color:var(--ink-soft);margin:0 0 18px}

/* ---------- Modal ---------- */
.modal-back{position:fixed;inset:0;background:rgba(6,7,10,.72);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:20px;z-index:40}
.modal{background:linear-gradient(180deg,var(--surface),#111319);border:1px solid var(--border);
  border-radius:18px;width:100%;max-width:460px;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.7);max-height:90vh;overflow:auto}
.modal-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.modal-head h3{font-family:var(--display);margin:0;font-size:1.15rem}
.modal-head button{background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--ink-soft);line-height:1}
.modal-body{padding:20px}
.modal-foot{padding:16px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{font-size:.8rem;color:var(--ink-soft);margin-top:6px}
.big-preview{display:grid;place-items:center;padding:8px 0 4px}
.big-preview img{width:170px;height:170px;border:1px solid var(--line);border-radius:10px;padding:8px;background:#fff}

/* analytics */
.stat-row{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.stat{flex:1;min-width:120px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.stat .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-weight:700}
.stat .v{font-family:var(--display);font-size:1.7rem;margin-top:2px}
.bars{display:flex;align-items:flex-end;gap:5px;height:120px;padding:10px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel)}
.bars .bar{flex:1;background:var(--accent);border-radius:4px 4px 0 0;min-height:3px;position:relative}
.bars .bar:hover{background:var(--accent-ink)}

/* keys / api */
.key-item,.list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:10px}
.key-item .kmeta .name{font-weight:700}
.key-item .kmeta .sub{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft)}
.codeblock{background:#0f0e12;color:#d7d5ce;font-family:var(--mono);font-size:.8rem;
  padding:12px 14px;border-radius:10px;overflow:auto;white-space:pre;line-height:1.6}
.callout{background:var(--amber-bg);border:1px solid #5c4a22;color:#f0c98a;border-radius:10px;
  padding:12px 14px;font-size:.85rem;margin-bottom:14px}
/* avisos apilables — neutro (default, look de siempre) / ok / error / info */
.toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:90;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;
  max-width:min(92vw,420px)}
.toast{display:flex;align-items:center;gap:9px;background:#33313c;color:var(--ink);
  padding:11px 16px;border-radius:10px;font-size:.88rem;line-height:1.35;box-shadow:var(--shadow);
  border-left:3px solid transparent;opacity:0;transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease;pointer-events:auto;cursor:default}
.toast.show{opacity:1;transform:translateY(0)}
.toast.hide{opacity:0;transform:translateY(6px)}
.toast--ok{border-left-color:var(--ok)}
.toast--error{border-left-color:var(--danger)}
.toast--info{border-left-color:var(--warn)}
.toast-ic{flex:none;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;
  font-size:.72rem;font-weight:700;color:#12131a}
.toast--ok .toast-ic{background:var(--ok)}
.toast--error .toast-ic{background:var(--danger)}
.toast--info .toast-ic{background:var(--warn)}

/* diálogo de confirmación (reemplaza confirm() nativo) — reusa .modal / .btn */
#dialog-root .modal-back{z-index:70}
.modal.modal-confirm{max-width:400px}
.modal-confirm .dlg-msg{margin:0;color:var(--ink);font-size:.92rem;line-height:1.5}
.btn-danger-solid{background:var(--danger);color:#2a0f0f;border-color:var(--danger)}
.btn-danger-solid:hover{background:#ff9a9a}

/* "Elegí tu diseño" — modal con las 2 variantes de IA grandes */
.modal.modal-pick{max-width:720px}
.pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pick-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:12px;
  border:1px solid var(--border);border-radius:14px;background:var(--raised)}
.pick-card.is-sugg{border-color:var(--violet);
  box-shadow:0 0 0 1px var(--violet) inset, 0 14px 34px -18px rgba(139,108,255,.55)}
.pick-card.is-bad{opacity:.72}
.pick-card img{width:100%;display:block;border-radius:10px;border:1px solid var(--border);background:#fff}
.pick-card.is-bad img{filter:grayscale(1) brightness(.6)}
.pick-card .btn{width:100%}
.pick-card .btn:disabled{opacity:.5;cursor:not-allowed}
.pick-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid transparent}
.pick-badge.ok{color:var(--ok);background:rgba(79,227,166,.12);border-color:rgba(79,227,166,.30)}
.pick-badge.bad{color:var(--danger);background:rgba(255,122,122,.10);border-color:rgba(255,122,122,.32)}
.pick-badge.unk{color:var(--muted);background:var(--raised-2);border-color:var(--border)}
.pick-sugg{position:absolute;top:-9px;right:12px;z-index:1;font-size:10px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#12131a;background:var(--violet);
  padding:3px 9px;border-radius:999px}
.pick-note{margin:0;font-size:11.5px;color:var(--danger);text-align:center}
.pick-allbad{margin:0;padding:14px 4px;text-align:center;color:var(--ink);font-size:.95rem}
@media(max-width:600px){
  .modal.modal-pick{max-width:440px}
  .pick-grid{grid-template-columns:1fr}
}

@media(max-width:520px){
  .container{padding:16px}
  .tabs,.topbar{padding-left:16px;padding-right:16px}
  .topbar .email-mini{display:none}
}

/* ---------- Diseñador de QR ---------- */
.dz{display:grid;grid-template-columns:220px 1fr;gap:20px}
.dz-preview{position:sticky;top:0}
.dz-canvas{width:200px;height:200px;border:1px solid var(--line);border-radius:12px;background:#fff;
  padding:10px;display:grid;place-items:center;overflow:hidden}
.dz-canvas svg{width:100%;height:100%;display:block}
.dz-dl{display:flex;gap:8px;margin-top:10px}
.dz-controls label{margin-top:12px}
.dz-controls label:first-child{margin-top:0}
.seg{display:flex;gap:6px}
/* Toggles del diseñador: mismo tratamiento dark/violeta que .dz2-desttype / .dz2-catpill. */
.seg button{flex:1;appearance:none;cursor:pointer;padding:8px 6px;border-radius:9px;
  border:1px solid var(--border);background:var(--raised);color:var(--muted);
  font-size:.82rem;font-weight:600;transition:.14s}
.seg button:hover:not(.on){color:var(--text)}
.seg button.on{border-color:var(--world-line);background:var(--world-soft);color:#fff}
/* muchos botones (p. ej. 5 skins): que envuelvan a 2 filas en vez de aplastarse */
.seg.seg-wrap{flex-wrap:wrap}
.seg.seg-wrap button{flex:1 1 84px}
/* selector de skin: solo el dibujo (nombre en el tooltip), botones compactos */
.seg.seg-icons{flex-wrap:wrap}
.seg.seg-icons button{flex:1 1 0;min-width:44px;max-width:70px;padding:7px 4px;display:grid;place-items:center}
.seg.seg-icons button svg{width:22px;height:22px;display:block}
.color-row{display:flex;gap:10px}
.color-row>div{flex:1}
input[type=color]{height:42px;padding:4px;cursor:pointer}
input[type=range]{width:100%;accent-color:var(--accent)}
.grad-panel{border:1px solid var(--border-soft);border-radius:10px;padding:10px 12px;margin-top:8px;background:var(--raised)}
.logo-row{display:flex;align-items:center;gap:10px;margin-top:6px}
.logo-thumb{width:40px;height:40px;border:1px solid var(--line);border-radius:8px;object-fit:contain;background:#fff}
.file-btn{position:relative;overflow:hidden;display:inline-flex}
.file-btn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
/* Mismo lenguaje visual que .dz2-desttype button.locked / .st-seg button.locked
   (candado + atenuado) — acá para el botón de subir logo/foto de fondo. */
.file-btn.locked{opacity:.5}
.file-btn.locked::after{content:" 🔒";font-size:9px}
@media(max-width:560px){ .dz{grid-template-columns:1fr} .dz-preview{position:static;justify-self:center} }

/* ---------- Mapa de calor ---------- */
.heat{display:grid;grid-template-columns:26px repeat(24,1fr);gap:2px;align-items:center}
.heat .hlabel{font-size:.62rem;color:var(--ink-soft);text-align:right;padding-right:4px}
.heat .hcell{aspect-ratio:1;border-radius:2px;background:var(--line)}
.heat .htick{font-size:.55rem;color:var(--ink-soft);text-align:center;grid-column:span 1}
.heat-legend{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--ink-soft);margin-top:8px}
.heat-legend .sw{width:12px;height:12px;border-radius:2px}
.mini-stats{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 16px}
.mini-stats .ms{flex:1;min-width:90px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.mini-stats .ms .k{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);font-weight:700}
.mini-stats .ms .v{font-family:var(--display);font-size:1.35rem;margin-top:1px}
.mini-stats .ms .v small{font-size:.7rem;color:var(--ink-soft);font-family:var(--sans);font-weight:600}

/* ---------- Badge de verificación de escaneo ---------- */
.scan-badge-dz{display:flex;align-items:center;gap:7px;margin-top:10px;padding:8px 10px;border-radius:9px;
  font-size:.82rem;font-weight:600;border:1px solid var(--line)}
.scan-badge-dz.ok{background:#16301f;border-color:#245b39;color:#5fdc93}
.scan-badge-dz.bad{background:#331c18;border-color:#5b2c24;color:#ff8f79}
.scan-badge-dz.wait{background:var(--paper);color:var(--ink-soft)}
.scan-badge-dz .dotpulse{width:9px;height:9px;border-radius:50%;background:currentColor}
.best-line{background:var(--amber-bg);border:1px solid #5c4a22;color:#f0c98a;border-radius:10px;
  padding:9px 12px;font-size:.85rem;margin-bottom:12px}
.best-line b{color:#ffd89a}

/* ---------- V1: toolbar, chips, estados ---------- */
.list-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.list-tools input[type=search]{max-width:340px;flex:1;min-width:200px}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:7px 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel);
  color:var(--ink-soft);font-weight:600;font-size:.82rem;cursor:pointer;font-family:inherit}
.chip.on{border-color:var(--accent);background:#2a2740;color:var(--accent-ink)}
.chip span{opacity:.7;font-weight:700;margin-left:2px}
.status-line{margin-top:8px;font-size:.8rem;color:var(--ink-soft)}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--ink-soft);vertical-align:middle}
.status-dot.active{background:var(--ok)}
.status-dot.paused{background:var(--amber)}
.status-dot.draft{background:var(--ink-soft)}
.status-dot.archived{background:var(--line-strong)}
/* generador IA */
.ai-box{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--panel-2);margin-top:6px}
.ai-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.ai-cat{padding:6px 10px;border-radius:8px;border:1px solid var(--line-strong);background:var(--panel);
  color:var(--ink);font-size:.8rem;font-weight:600;cursor:pointer;font-family:inherit}
.ai-cat.on{border-color:var(--accent);background:#2a2740;color:var(--accent-ink)}
textarea{min-height:64px;resize:vertical;line-height:1.4}
.ai-note{font-size:.8rem;color:var(--amber);background:var(--amber-bg);border:1px solid #5c4a22;border-radius:9px;padding:9px 11px;margin-top:10px}

/* ---------- Selector de idioma (topbar) ---------- */
.lang{display:flex;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:var(--surface)}
.lang button{appearance:none;border:none;background:transparent;cursor:pointer;
  padding:6px 10px;font-family:var(--mono);font-size:12px;color:var(--muted-dim);transition:.15s}
.lang button.on{background:var(--raised-2);color:var(--text)}

/* ---------- Modal de detalle del QR ---------- */
.modal.detail-modal{max-width:800px}
.detail-grid{display:grid;grid-template-columns:296px 1fr}
.detail-grid .d-left{
  padding:26px 22px;border-right:1px solid var(--border-soft);
  background:radial-gradient(320px 260px at 50% 4%, var(--d-soft,rgba(139,108,255,.14)), transparent 70%);
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.detail-grid .d-qr{width:216px;height:216px;border-radius:16px;padding:14px;background:#fff;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.8)}
.detail-grid .d-qr img,.detail-grid .d-qr svg{width:100%;height:100%;display:block}
/* Link sin QR: placeholder + CTA "Generar QR" en lugar de la imagen. */
.detail-grid .d-noqr{width:216px;height:216px;border-radius:16px;border:1.5px dashed var(--border);
  background:var(--raised);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;padding:20px}
.detail-grid .d-noqr .q{font-family:var(--display);font-size:38px;color:var(--muted-dim);opacity:.5;line-height:1}
.detail-grid .d-noqr .t{font-size:11.5px;color:var(--muted-dim);line-height:1.45}
.detail-grid .d-left > .btn-primary{width:100%;justify-content:center}
.d-qrbadge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;letter-spacing:.02em;
  padding:3px 9px;border-radius:999px;border:1px solid var(--border);vertical-align:middle;margin-left:8px}
.d-qrbadge.no{color:var(--muted-dim)}
.d-qrbadge.has{color:var(--ok);border-color:rgba(79,227,166,.32);background:rgba(79,227,166,.08)}
.detail-grid .d-dl{display:flex;gap:8px;width:100%}
.detail-grid .d-dl .btn{flex:1;justify-content:center}
/* "Regenerar imagen": congela el diseño actual en el PNG servido (jsQR gate) */
.detail-grid .d-regen{width:100%;margin-top:2px}
.detail-grid .d-regen > .btn{width:100%;justify-content:center;gap:8px}
.d-regen-note{font-size:11px;color:var(--muted-dim);margin:7px 0 0;line-height:1.55}
.d-regen-status{font-size:11.5px;margin-top:8px;display:flex;align-items:flex-start;gap:7px;line-height:1.5}
.d-regen-status .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none;margin-top:4px}
.d-regen-status.work{color:var(--muted)}
.d-regen-status.ok{color:var(--ok)}
.d-regen-status.bad{color:var(--danger)}
.detail-grid .d-right{padding:24px;min-width:0}
.d-block{margin-bottom:18px}
.d-block:last-child{margin-bottom:0}
.d-lbl{font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted-dim);margin-bottom:9px}
.d-redirect{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:11px;
  background:var(--raised);border:1px solid var(--border-soft);min-width:0}
.d-redirect > svg{width:15px;height:15px;color:var(--muted);flex:none}
.d-redirect .u{font-family:var(--mono);font-size:12.5px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-shortcode{margin-top:10px;padding:11px 13px;border-radius:11px;background:var(--raised);border:1px dashed var(--border)}
.d-shortcode .sc-top{display:flex;align-items:center;gap:8px}
.d-shortcode .sc-code{font-family:var(--mono);font-size:13px;color:var(--violet-soft);letter-spacing:.02em}
.d-shortcode .sc-copy{margin-left:auto}
.d-shortcode .sc-note{font-size:11px;color:var(--muted-dim);margin-top:8px;line-height:1.55}
.d-shortcode .sc-note b{color:var(--muted)}
.d-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.d-stat{padding:12px 14px;border-radius:11px;background:var(--raised);border:1px solid var(--border-soft)}
.d-stat .v{font-family:var(--display);font-weight:600;font-size:16px}
.d-stat .k{font-size:11px;color:var(--muted-dim);margin-top:3px}
.d-hist{display:flex;flex-direction:column}
.d-hrow{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--border-soft)}
.d-hrow:last-child{border-bottom:none}
.d-hrow .dot{width:8px;height:8px;border-radius:50%;background:var(--muted-dim);flex:none}
.d-hrow.now .dot{background:var(--ok)}
.d-hrow .hu{font-family:var(--mono);font-size:12px;color:var(--muted);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-hrow.now .hu{color:var(--text)}
.d-hrow .ht{margin-left:auto;font-size:11px;color:var(--muted-dim);flex:none}
@media(max-width:640px){
  .detail-grid{grid-template-columns:1fr}
  .detail-grid .d-left{border-right:none;border-bottom:1px solid var(--border-soft)}
}

/* ===================================================================
   Nuevo QR — diseñador como PÁGINA COMPLETA (antes: modal).
   Izquierda: preview viva, sticky en desktop. Derecha: el formulario
   actual con scroll normal de página. --world = color camaleón.
   =================================================================== */
/* barra de navegación de la página (reemplaza el header/× del modal) */
.designer-page{
  --world:var(--violet); --world-2:var(--violet-soft);
  --world-soft:rgba(139,108,255,.14); --world-line:rgba(139,108,255,.34);
  max-width:1480px;margin:0 auto;padding:16px 24px 24px;
  display:grid;grid-template-columns:440px 1fr;gap:28px;align-items:start;
}

/* ---- izquierda: vista previa viva ---- */
.dz2-preview{
  position:relative;padding:22px 22px 18px;display:flex;flex-direction:column;
  border-right:1px solid var(--border-soft);
  background:
    radial-gradient(400px 320px at 50% 6%, var(--world-soft), transparent 70%),
    linear-gradient(180deg,#0F1117,#0C0D11);
  transition:background .5s ease;
}
/* como página: recuadro propio y columna pegajosa bajo topbar + nav */
.designer-page .dz2-preview{
  border:1px solid var(--border-soft);border-radius:14px;overflow:hidden;
  position:sticky;top:76px;align-self:start;
}
.dz2-brand{display:flex;align-items:center;gap:9px;margin-bottom:16px;font-family:var(--display);font-weight:600;font-size:13px;color:var(--muted)}
.dz2-mark{
  width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--world),var(--world-2));
  color:#0b0c10;font-family:var(--display);font-weight:700;font-size:12px;transition:background .5s ease;
}
.dz2-logo{height:22px;width:auto;display:block}
.dz2-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:0}
.dz2-frame{
  width:min(360px,100%);aspect-ratio:1;border-radius:18px;padding:15px;background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 24px 60px -24px var(--world-line), 0 10px 30px -18px rgba(0,0,0,.8);
  transition:box-shadow .5s ease;
  position:relative;overflow:hidden;
}
.dz2-canvas{width:100%;height:100%;display:grid;place-items:center;overflow:hidden}
.dz2-canvas svg{width:100%;height:100%;display:block}
/* Línea de escaneo: mientras se genera con IA, cruza el preview de arriba a abajo en loop. */
.dz2-scanline{
  position:absolute;left:0;right:0;top:-64px;height:64px;
  background:linear-gradient(180deg,transparent 0%,var(--world-soft) 55%,var(--world) 100%);
  opacity:0;pointer-events:none;
}
.dz2-frame.is-scanning .dz2-scanline{opacity:1;animation:dzScanMove 1.6s ease-in-out infinite}
@keyframes dzScanMove{
  0%{transform:translateY(0)}
  100%{transform:translateY(380px)}
}
/* Spinner del botón "Generando…" */
.dz2-spinner{
  width:14px;height:14px;border-radius:50%;flex:none;
  border:2px solid currentColor;border-top-color:transparent;
  animation:dzSpin .7s linear infinite;
}
@keyframes dzSpin{to{transform:rotate(360deg)}}
.dz2-cap{text-align:center;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.12em;min-height:17px}
.dz2-cap b{color:var(--world);font-weight:600;transition:color .5s ease}
.dz2-scan{
  margin-bottom:14px;align-self:center;display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;border-radius:999px;font-size:12px;font-weight:500;border:1px solid var(--border-soft);
  color:var(--muted);background:var(--raised);
}
.dz2-scan .dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
.dz2-scan.ok{background:rgba(52,224,160,.10);border-color:rgba(52,224,160,.30);color:#4fe3a6}
.dz2-scan.bad{background:rgba(255,122,122,.10);border-color:rgba(255,122,122,.32);color:#ff8f79}
.dz2-dest{
  margin-top:12px;display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:11px;
  background:var(--raised);border:1px solid var(--border-soft);
}
.dz2-dest svg{width:14px;height:14px;color:var(--muted);flex:none}
.dz2-dest .u{font-family:var(--mono);font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.dz2-dest .code{font-family:var(--mono);font-size:11.5px;color:var(--world);flex:none;transition:color .5s ease}
.dz2-dl{margin-top:12px;display:flex;gap:8px}
.dz2-dl .btn{flex:1;justify-content:center}

/* ---- derecha: panel de controles ---- */
.dz2-panel{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
/* como página: recuadro propio, sin scroll interno (scrollea la página) */
.designer-page .dz2-panel{
  border:1px solid var(--border-soft);border-radius:14px;overflow:visible;
  background:linear-gradient(180deg,var(--surface),#13151c);
}
.dz2-title{font-family:var(--display);font-weight:600;font-size:19px;margin:0;padding:22px 26px 0;letter-spacing:-.01em}
/* Destino + Nombre: fijos arriba de las pestañas, aplican a las dos */
.dz2-head{display:flex;flex-direction:column;gap:12px;padding:14px 26px 12px}
.dz2-head .dz2-field{margin:0}
.dz2-desttype{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.dz2-desttype button{
  display:inline-flex;align-items:center;gap:6px;
  appearance:none;cursor:pointer;padding:7px 10px;border-radius:8px;
  border:1px solid var(--border);background:var(--raised);color:var(--muted);
  font-family:var(--sans);font-size:12px;font-weight:500;transition:.14s;
}
.dz2-desttype button svg{width:15px;height:15px;flex:none}
.dz2-desttype button:hover:not(.on){color:var(--text)}
.dz2-desttype button.on{border-color:var(--world-line);background:var(--world-soft);color:#fff}
#dz-destfields .dz2-two{display:grid;gap:8px}
/* Parámetros UTM: plegable al final del panel (solo destino Web), después de
   "Ajustes avanzados". */
.dz2-utm{margin-top:20px;border:1px solid var(--border-soft);border-radius:14px;background:var(--raised);overflow:hidden}
.dz2-utm > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;padding:11px 13px;
  font-size:12px;font-weight:600;color:var(--muted);user-select:none;transition:.14s;
}
.dz2-utm > summary::-webkit-details-marker{display:none}
.dz2-utm > summary:hover{color:var(--text)}
.dz2-utm > summary .chev{width:13px;height:13px;flex:none;transition:transform .18s ease;color:var(--muted-dim)}
.dz2-utm[open] > summary .chev{transform:rotate(90deg)}
.dz2-utm > summary .lbl{flex:1}
.dz2-utm > summary .lbl .sub{font-weight:400;color:var(--muted-dim)}
.dz2-utm[open] > summary{border-bottom:1px solid var(--border-soft);color:var(--text)}
.dz2-utmbody{padding:13px}
.dz2-utmbody .dz2-hint{margin:0 0 11px}
.dz2-utmbody .dz2-hint .mono{font-family:var(--mono)}
.dz2-utmbody .dz2-two{margin-bottom:0}
.dz2-utmrow{margin-bottom:9px}
.dz2-utmrow:last-child,.dz2-utmbody .dz2-two .dz2-utmrow{margin-bottom:0}
.dz2-utmrow label{
  display:block;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-dim);margin-bottom:4px;
}
.dz2-utmrow label .k{font-family:var(--mono);color:var(--muted);text-transform:none;letter-spacing:0}
/* vista previa del link final con los UTM aplicados */
.dz2-utmprev{margin-top:13px;padding:10px 11px;border-radius:8px;background:var(--bg);border:1px solid var(--border-soft)}
.dz2-utmprev .cap{
  margin:0 0 5px;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dim);
}
.dz2-utmprev code{font-family:var(--mono);font-size:11px;color:var(--violet-soft);word-break:break-all;line-height:1.55}
.dz2-utmprev code.empty{color:var(--muted-dim)}
.dz2-tabs{display:flex;gap:22px;padding:14px 26px 0;border-bottom:1px solid var(--border-soft)}
.dz2-tabhint{margin:8px 26px 0;font-size:11.5px;color:var(--muted-dim);line-height:1.4}
.dz2-tabhint b{color:var(--muted)}
.dz2-tabs button{
  appearance:none;border:none;background:transparent;cursor:pointer;position:relative;
  font-family:var(--sans);font-weight:500;font-size:13.5px;color:var(--muted);padding:9px 2px;transition:.16s;
}
.dz2-tabs button:hover{color:var(--text)}
.dz2-tabs button.on{color:var(--text)}
.dz2-tabs button.on::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--world),var(--world-2));transition:background .5s ease;
}
.dz2-body{flex:1;min-height:0;overflow:auto;padding:20px 26px}
.dz2-body::-webkit-scrollbar{width:8px}
.dz2-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
/* como página: sin scroll propio, fluye con la página */
.designer-page .dz2-body{flex:none;overflow:visible;min-height:0}
.dz2-pane[hidden]{display:none}

.dz2-field{margin-bottom:15px}
.dz2-field > label,.dz2-eyebrow{
  display:block;font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-dim);margin:0 0 8px;
}
.dz2-eyebrow{display:flex;align-items:center;gap:9px}
.dz2-eyebrow .n{
  width:17px;height:17px;border-radius:6px;background:var(--raised-2);display:grid;place-items:center;
  font-size:10px;color:var(--world);font-family:var(--mono);flex:none;transition:color .5s ease;
}
.dz2-eyebrow .hint{margin-left:auto;letter-spacing:0;text-transform:none;font-family:var(--sans);font-weight:400;color:var(--muted-dim);font-size:11px}
.dz2-req,.dz2-opt{font-family:var(--sans);letter-spacing:.02em;font-weight:600;font-size:10px}
.dz2-req{color:var(--danger)}
.dz2-opt{color:var(--muted-dim);font-weight:400;text-transform:none}
.dz2-inp{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);
  background:var(--raised);color:var(--text);font-family:var(--sans);font-size:13.5px;
}
.dz2-inp.mono{font-family:var(--mono);font-size:12.5px}
.dz2-inp:focus{outline:none;border-color:var(--world-line);box-shadow:0 0 0 3px var(--world-soft)}
.dz2-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* "Crear link": campo de alias (prefijo <host>/r/ + input) con chequeo en vivo */
.dz2-aliasrow{display:flex;align-items:stretch;border:1px solid var(--border);border-radius:10px;
  background:var(--raised);overflow:hidden;transition:.14s}
.dz2-aliasrow:focus-within{border-color:var(--world-line);box-shadow:0 0 0 3px var(--world-soft)}
.dz2-aliasrow.bad{border-color:var(--danger)}
.dz2-aliasrow.ok{border-color:rgba(79,227,166,.4)}
.dz2-aliasrow .pfx{display:flex;align-items:center;padding:0 2px 0 12px;white-space:nowrap;
  font-family:var(--mono);font-size:12.5px;color:var(--muted-dim);background:rgba(255,255,255,.02)}
.dz2-aliasrow input{flex:1;min-width:60px;border:none;background:none;outline:none;color:var(--text);
  font-family:var(--mono);font-size:12.5px;padding:10px 12px 10px 2px}
.dz2-aliaspen{width:13px;height:13px;align-self:center;margin-right:11px;color:var(--muted-dim);flex:none;transition:.14s}
.dz2-aliasrow:focus-within .dz2-aliaspen{color:var(--world)}
.dz2-aliasrow.ok .dz2-aliaspen,.dz2-aliasrow.bad .dz2-aliaspen{display:none}
.dz2-aliasspin{align-self:center;margin-right:10px;width:13px;height:13px;border-radius:50%;
  border:2px solid var(--border);border-top-color:var(--muted);animation:dz2spin .7s linear infinite}
@keyframes dz2spin{to{transform:rotate(360deg)}}
.dz2-aliasmsg{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:11.5px;font-weight:500;min-height:16px}
.dz2-aliasmsg.is-bad{color:var(--danger)}
.dz2-aliasmsg.is-ok{color:var(--ok)}
.dz2-aliasmsg.is-idle{color:var(--muted-dim);font-weight:400}
.dz2-aliasfixed{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;padding:10px 12px;border-radius:10px;
  border:1px solid var(--border-soft);background:var(--raised);font-family:var(--mono);font-size:12.5px;color:var(--muted-dim)}
.dz2-aliasfixed b{color:var(--text);font-weight:600}
.dz2-aliasfixed span{font-family:var(--sans);font-size:11px}

/* Flujo de un paso: encabezados numerados 1 Destino · 2 Diseño (panel) · 3 Compartí (preview) */
.dz2-panel > .dz2-step-eb{padding:16px 26px 0;margin:0}
.dz2-panel > .dz2-step-eb + .dz2-head{padding-top:8px}
/* Botón "copiar link" en el bloque de destino del preview (paso Compartí) */
.dz2-dest .dz2-copycode{appearance:none;border:none;background:none;cursor:pointer;color:var(--muted);
  padding:2px;display:grid;place-items:center;flex:none;transition:.14s}
.dz2-dest .dz2-copycode:hover{color:var(--world)}
.dz2-dest .dz2-copycode svg{width:14px;height:14px;display:block}
.dz2-hint{font-size:11px;color:var(--muted-dim);margin:6px 0 0;line-height:1.5}

/* color de marca */
.dz2-colorrow{display:flex;gap:10px;align-items:center}
/* Doble anillo (claro por dentro + oscuro por fuera) en vez de un solo borde
   fijo: `background` es el color que elige el usuario (puede ser cualquier
   cosa, incluido negro), así que un borde de un solo tono se pierde contra
   ese relleno en algún punto del espectro. El doble anillo se ve contra
   cualquier color de relleno, claro u oscuro. */
.dz2-swatch{width:42px;height:40px;border-radius:10px;border:1px solid var(--border);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 0 0 1px rgba(0,0,0,.35);flex:none;position:relative;overflow:hidden}
.dz2-swatch input[type=color]{position:absolute;inset:-8px;width:160%;height:160%;border:none;background:none;cursor:pointer;padding:0}
.dz2-hex{
  flex:1;padding:10px 12px;border-radius:10px;border:1px solid var(--border);
  background:var(--raised);color:var(--text);font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;
}
.dz2-hex:focus{outline:none;border-color:var(--world-line);box-shadow:0 0 0 3px var(--world-soft)}
.dz2-logopick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px}
.dz2-logopick .file-btn{position:relative;overflow:hidden}
.dz2-logopick .file-btn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.dz2-swatches{display:flex;gap:6px;margin-top:9px;align-items:center;flex-wrap:wrap}
.dz2-swatches .lbl{font-size:11px;color:var(--muted-dim)}
.dz2-swatches button{width:24px;height:24px;border-radius:7px;border:1px solid var(--border);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 0 0 1px rgba(0,0,0,.35);cursor:pointer;padding:0}
/* Íconos de marca como logo al centro (mismo lenguaje visual que .dz2-swatches,
   fondo blanco fijo: son SVG de color de marca sobre transparente, necesitan
   una base clara para verse bien sea cual sea el tema). */
.dz2-brandpick{display:flex;gap:6px;margin-top:9px;align-items:center;flex-wrap:wrap}
.dz2-brandpick .lbl{font-size:11px;color:var(--muted-dim)}
.dz2-brandpick button{
  width:28px;height:28px;border-radius:7px;border:1px solid var(--border);background:#fff;
  display:grid;place-items:center;cursor:pointer;padding:0;transition:.14s;
}
.dz2-brandpick button:hover{border-color:var(--world-line)}
.dz2-brandpick button.on{border-color:var(--world-line);box-shadow:0 0 0 2px var(--world-soft)}
.dz2-check{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-top:10px;cursor:pointer}
.dz2-check input{width:auto;margin:0}

/* foto de fondo: miniatura de encuadre (zoom + arrastre) */
.dz2-cropwrap{display:flex;gap:14px;align-items:flex-start}
.dz2-cropbox{
  width:88px;height:88px;flex:none;border-radius:10px;overflow:hidden;
  border:1px solid var(--border);background:#fff;touch-action:none;
}
.dz2-cropbox canvas{width:100%;height:100%;display:block}
.dz2-cropbox.draggable{cursor:grab}
.dz2-cropbox.draggable.dragging{cursor:grabbing}
.dz2-cropside{flex:1;min-width:0}
.dz2-cropside label{font-size:11.5px;color:var(--muted);font-weight:500}

/* recorrido de 3 pasos (pestaña Diseño) */
.dz2-step{margin-bottom:18px}
.dz2-step.locked{opacity:.4;pointer-events:none;filter:saturate(.4)}
.dz2-search{
  width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--border);background:var(--raised);
  color:var(--text);font-family:var(--sans);font-size:13px;margin-bottom:10px;
}
.dz2-search:focus{outline:none;border-color:var(--world-line);box-shadow:0 0 0 3px var(--world-soft)}
.dz2-chips{display:flex;flex-wrap:wrap;gap:8px}
/* lista de estilos: se muestran todos, con scroll propio si son muchos */
#dz-styles{max-height:172px;overflow:auto;padding-right:2px}
#dz-styles::-webkit-scrollbar{width:7px}
#dz-styles::-webkit-scrollbar-thumb{background:var(--border);border-radius:7px}
.dz2-chip{
  appearance:none;cursor:pointer;padding:8px 12px;border-radius:10px;background:var(--raised);
  border:1px solid var(--border);color:var(--text);font-family:var(--sans);font-weight:450;font-size:13px;
  display:inline-flex;align-items:center;gap:7px;transition:.15s ease;
}
.dz2-chip:hover{border-color:var(--muted-dim);transform:translateY(-1px)}
.dz2-chip .dot{width:8px;height:8px;border-radius:50%;flex:none}
.dz2-chip[aria-pressed="true"]{border-color:var(--world-line);background:var(--world-soft);color:#fff;box-shadow:0 0 0 1px var(--world-line) inset}
.dz2-chip.muted{color:var(--muted-dim);border-style:dashed}
.dz2-el{
  appearance:none;cursor:pointer;padding:9px 11px;border-radius:11px;background:var(--raised);
  border:1px solid var(--border);color:var(--text);font-family:var(--sans);font-weight:450;font-size:13px;
  display:inline-flex;align-items:center;gap:8px;transition:.15s ease;
}
.dz2-el:hover{border-color:var(--muted-dim);transform:translateY(-1px)}
.dz2-el .emo{font-size:15px;line-height:1}
.dz2-el[aria-pressed="true"]{border-color:var(--world-line);background:var(--world-soft);color:#fff;box-shadow:0 0 0 1px var(--world-line) inset}

/* "Detalles" para IA: input de tags (chips + X) + chips sugeridos por categoría */
.dz2-taginput{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--raised);min-height:44px;
}
.dz2-taginput:focus-within{border-color:var(--world-line);box-shadow:0 0 0 3px var(--world-soft)}
.dz2-taginput input{
  flex:1;min-width:120px;border:none;background:none;outline:none;color:var(--text);
  font-family:var(--sans);font-size:13.5px;padding:4px 2px;
}
.dz2-tag{
  display:inline-flex;align-items:center;gap:6px;padding:4px 5px 4px 11px;border-radius:999px;
  background:var(--world-soft);border:1px solid var(--world-line);color:#fff;font-size:12.5px;font-weight:500;
}
.dz2-tag button{
  appearance:none;border:none;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;
  width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:11px;line-height:1;padding:0;
}
.dz2-tag button:hover{background:rgba(255,255,255,.32)}
/* pestañas (pills) de categoría: solo una activa; debajo, sus 5 sugerencias */
.dz2-catpills{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.dz2-catpill{
  appearance:none;cursor:pointer;padding:7px 13px;border-radius:999px;background:var(--raised);
  border:1px solid var(--border);color:var(--muted);font-family:var(--sans);font-weight:500;font-size:12.5px;
  transition:.14s;
}
.dz2-catpill:hover{color:var(--text);border-color:var(--muted-dim)}
.dz2-catpill.on{background:var(--world-soft);border-color:var(--world-line);color:#fff}
.dz2-catpanel{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--border-soft);
}
.dz2-sugg{
  appearance:none;cursor:pointer;padding:6px 11px;border-radius:999px;background:var(--raised);
  border:1px solid var(--border);color:var(--text);font-family:var(--sans);font-size:12.5px;
  display:inline-flex;align-items:center;gap:5px;transition:.14s;
}
.dz2-sugg:hover{border-color:var(--muted-dim);transform:translateY(-1px)}
.dz2-sugg[aria-pressed="true"]{border-color:var(--world-line);background:var(--world-soft);color:#fff}
.dz2-sugg[aria-pressed="true"]::before{content:"✓";font-size:10px;opacity:.9}

.dz2-prompt{margin-top:4px;border:1px solid var(--border-soft);border-radius:14px;background:var(--raised);overflow:hidden}
.dz2-prompt-top{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--border-soft);background:rgba(255,255,255,.015)}
.dz2-prompt-top .lbl{font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dim)}
.dz2-prompt-top .auto{margin-left:auto;font-size:11px;color:var(--world);display:flex;align-items:center;gap:5px;transition:color .5s ease}
.dz2-prompt-top .auto span{width:6px;height:6px;border-radius:50%;background:var(--world);transition:background .5s ease}
.dz2-prompt-body{padding:12px;font-family:var(--mono);font-size:12.5px;line-height:1.6;color:#c7ccd8;min-height:52px}
.dz2-prompt-body .tok{color:var(--world);transition:color .5s ease}
.dz2-out{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px}
.dz2-variant{position:relative;width:calc(50% - 5px);margin:0}
.dz2-variant img{width:100%;display:block;border-radius:10px;border:1px solid var(--border);cursor:pointer}
.dz2-variant figcaption{font-size:11px;text-align:center;margin-top:4px}
.dz2-variant:not(.bad) figcaption{color:#4fe3a6}
.dz2-variant.sel img{outline:3px solid var(--world);outline-offset:1px}
/* variante que no escanea: gris, tachada, no clickeable */
.dz2-variant.bad img{cursor:not-allowed;filter:grayscale(1) brightness(.55)}
.dz2-variant.bad figcaption{color:#ff7a7a}
.dz2-variant.bad::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:22px;border-radius:10px;pointer-events:none;
  background:linear-gradient(to top right,transparent calc(50% - 1.5px),#ff7a7a calc(50% - 1.5px),#ff7a7a calc(50% + 1.5px),transparent calc(50% + 1.5px));
}
.dz2-note{font-size:12px;color:var(--amber);background:var(--amber-bg);border:1px solid #5c4a22;border-radius:9px;padding:9px 11px;margin-top:12px;line-height:1.5}

/* Personalización en dos bloques: "Contenido" (módulos de datos) y "Cuadros de
   enfoque" (los 3 finder patterns). Cada bloque tiene su forma y su color;
   ambos escriben en el mismo `style` -> mismo preview -> misma verificación jsQR. */
.dz2-section{
  border:1px solid var(--border-soft);border-radius:14px;padding:15px 15px 4px;
  margin-bottom:16px;background:var(--raised);
}
/* Bloque recién agregado (p. ej. "Foto de fondo"): mismo borde que .on, para que
   se note al entrar al skin la primera vez. */
.dz2-section.is-new{border-color:var(--world-line);box-shadow:0 0 0 1px var(--world-line) inset}
.dz2-sec-head{display:flex;align-items:center;gap:10px;margin:0 0 13px}
.dz2-sec-head .tag-new{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#0b0c10;background:var(--world);padding:3px 8px;border-radius:999px}
.dz2-paidtag{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--warn);background:rgba(244,183,59,.12);border:1px solid rgba(244,183,59,.32);
  padding:3px 8px;border-radius:999px;cursor:default}
.dz2-sec-head .dz2-paidtag{margin-left:auto}
.dz2-sec-head .ic{
  width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:var(--world-soft);color:var(--world);transition:background .5s ease,color .5s ease;
}
.dz2-sec-head .ic svg{width:16px;height:16px}
.dz2-sec-head h4{margin:0;font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--text);letter-spacing:.01em}
.dz2-sec-head .sub{margin-left:auto;font-size:11px;color:var(--muted-dim)}
.dz2-locknote{
  display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted-dim);
  margin:6px 0 0;padding:7px 9px;border:1px dashed var(--border);border-radius:8px;
}
.dz2-locknote svg{flex:none}
.dz2-section .seg button[disabled]{opacity:.35;cursor:not-allowed}

/* ajustes avanzados */
.dz2-adv{margin-top:6px;border-top:1px solid var(--border-soft);padding-top:12px}
.dz2-adv > summary{cursor:pointer;font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dim);list-style:none}
.dz2-adv > summary::-webkit-details-marker{display:none}
.dz2-adv > summary::before{content:"▸ ";color:var(--muted-dim)}
.dz2-adv[open] > summary::before{content:"▾ "}
.dz2-adv .seg{margin-bottom:10px}

/* "Destino" ya completo: pastilla resumen + Editar, en vez del formulario fijo. */
.dz2-donepill{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:var(--raised);border:1px solid var(--border-soft);border-radius:11px;
  padding:10px 13px;font-size:12.5px;
}
.dz2-donepill .l{display:flex;align-items:center;gap:7px;color:var(--muted);min-width:0}
.dz2-donepill .l b{color:var(--text);font-weight:700}
.dz2-donepill .l .mono{font-family:var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz2-donepill .ok{color:var(--ok);font-weight:800;flex:none}
.dz2-donepill .edit{
  appearance:none;border:none;background:none;cursor:pointer;flex:none;
  color:var(--world);font-family:var(--sans);font-size:12px;font-weight:700;padding:2px;
}
.dz2-donepill .edit:hover{text-decoration:underline}

/* "Más ajustes de diseño": mismo patrón visual que Parámetros UTM (dz2-utm),
   pero para forma de los módulos, degradado, esquinas y texto debajo del QR. */
.dz2-more{margin:4px 0 16px;border:1px solid var(--border-soft);border-radius:14px;background:var(--raised);overflow:hidden}
.dz2-more > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;padding:12px 15px;
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--text);user-select:none;transition:.14s;
}
.dz2-more > summary::-webkit-details-marker{display:none}
.dz2-more > summary:hover{color:var(--world)}
.dz2-more > summary .chev{width:13px;height:13px;flex:none;transition:transform .18s ease;color:var(--muted-dim)}
.dz2-more[open] > summary .chev{transform:rotate(90deg)}
.dz2-more > summary .lbl{flex:1}
.dz2-more[open] > summary{border-bottom:1px solid var(--border-soft)}
.dz2-morebody{padding:15px 15px 2px}
.dz2-morebody .dz2-section{background:var(--raised-2)}

/* Resaltadores del preview del QR: overlays fijos (posición aproximada, no
   depende del QR real dibujado) que se prenden al pasar el mouse/foco por
   Estilo, Color, Logo/foto o Esquinas — ver wireHoverHighlights() en app.js. */
.dz2-hl,.dz2-hl-body,.dz2-hl-logo{
  position:absolute;border:3px solid var(--world);border-radius:10px;opacity:0;pointer-events:none;
  box-shadow:0 0 0 4px var(--world-soft);transition:opacity .18s ease;
}
.dz2-hl{width:19%;height:19%;border-radius:50%;transform:translate(-50%,-50%)}
.dz2-hl-tl{left:19%;top:19%} .dz2-hl-tr{left:81%;top:19%} .dz2-hl-bl{left:19%;top:81%}
.dz2-hl-body{inset:6%}
.dz2-hl-logo{left:50%;top:50%;width:26%;height:26%;transform:translate(-50%,-50%);border-radius:9px}
.dz2-hl.active,.dz2-hl-body.active,.dz2-hl-logo.active{opacity:1;animation:dzHlPulse 1.1s ease-in-out infinite}
@keyframes dzHlPulse{
  0%,100%{box-shadow:0 0 0 4px var(--world-soft)}
  50%{box-shadow:0 0 0 9px rgba(139,108,255,.08)}
}

/* footer */
.dz2-foot{
  padding:14px 26px 18px;border-top:1px solid var(--border-soft);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
/* como página: acciones siempre a la vista, pegadas al borde inferior del panel */
.designer-page .dz2-foot{
  position:sticky;bottom:0;border-radius:0 0 16px 16px;
  background:linear-gradient(180deg,rgba(21,23,31,.55),var(--surface) 42%);
  backdrop-filter:blur(4px);border-top:1px solid var(--border);
}
.dz2-foot .meta{font-size:11px;color:var(--muted-dim);line-height:1.5}
.dz2-foot .grow{margin-left:auto}
/* contenedor de los botones de acción: flex real con separación, sin superponerse */
#dz-footbtns{display:inline-flex;align-items:center;gap:10px;flex:none}
#dz-footbtns .btn,#dz-footbtns .dz2-gen{white-space:nowrap}
.dz2-gen{
  appearance:none;border:none;cursor:pointer;padding:0 20px;height:42px;border-radius:11px;
  background:linear-gradient(135deg,var(--world),var(--world-2));color:#0b0c10;
  font-family:var(--display);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 10px 30px -12px var(--world-line);transition:.16s;
}
.dz2-gen:hover{transform:translateY(-1px);filter:brightness(1.06)}
.dz2-gen[disabled]{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
/* contador de espera de la IA: ancho fijo (mono, en `ch` = ancho de un dígito)
   para que el botón no "respire" ni un pixel tick a tick, ni "pop" al aparecer
   el primer segundo. " (M:SS)" = 7 caracteres en el botón; "M:SS" = 4 en el panel. */
#dz-gentimer,#dz-outtimer{display:inline-block;text-align:center;font-variant-numeric:tabular-nums}
#dz-gentimer{width:7ch}
#dz-outtimer{width:4ch}
.dz2-err{color:var(--danger);font-size:12px;margin-top:8px;min-height:1em}

/* mobile: preview ARRIBA (no fija), formulario debajo con scroll normal */
@media(max-width:920px){
  .designer-page{grid-template-columns:1fr;gap:18px;padding:16px}
  .designer-page .dz2-preview{position:static;top:auto;border-right:1px solid var(--border-soft)}
  .designer-page .dz2-foot{position:static;backdrop-filter:none}
}

/* ===================================================================
   Estadísticas (mockup qivi-estadisticas) — vista completa, camaleón por QR.
   =================================================================== */
#panel-stats{--st-accent:var(--violet);--st-accent-soft:rgba(139,108,255,.14)}

.st-controls{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.st-seg{display:flex;background:var(--surface);border:1px solid var(--border-soft);border-radius:11px;padding:3px}
.st-seg button{appearance:none;border:none;background:transparent;cursor:pointer;padding:8px 14px;border-radius:8px;
  font-family:var(--sans);font-size:13px;font-weight:500;color:var(--muted);transition:.15s}
.st-seg button.on{background:var(--raised-2);color:var(--text)}
.st-pick{padding:8px 12px;border-radius:11px;background:var(--surface);border:1px solid var(--border-soft);
  color:var(--text);font-family:var(--sans);font-size:13px;font-weight:500;max-width:220px}
.st-pick.hidden{display:none}
.st-range{margin-left:auto;display:flex;gap:5px}
.st-range button{appearance:none;cursor:pointer;padding:8px 13px;border-radius:9px;background:var(--surface);
  border:1px solid var(--border-soft);color:var(--muted);font-family:var(--sans);font-size:12.5px;transition:.15s}
.st-range button.on{background:var(--raised-2);border-color:var(--muted-dim);color:var(--text)}

/* Las 4 métricas usan el componente compartido .stat-card.
   Sólo el margen inferior es más ajustado en este contexto. */
#st-metrics{margin-bottom:14px}

.st-card{padding:20px 22px;border-radius:14px;background:linear-gradient(180deg,var(--surface),#13151c);
  border:1px solid var(--border-soft);margin-bottom:14px}
.st-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.st-card-head h3{font-family:var(--display);font-weight:600;font-size:15px;margin:0}
.st-card-head .note{font-size:12px;color:var(--muted-dim)}

.st-chart{position:relative;width:100%;height:200px}
.st-chart svg{width:100%;height:100%;display:block;overflow:visible}
.st-chart .gl{stroke:var(--border-soft);stroke-width:1}
.st-chart .glabel{fill:var(--muted-dim);font-size:10px;font-family:var(--mono)}
.st-cursor{fill:var(--st-accent);transition:fill .4s}
.st-tip{position:absolute;pointer-events:none;background:#0b0c10;border:1px solid var(--border);border-radius:9px;
  padding:7px 10px;opacity:0;transition:opacity .12s;transform:translate(-50%,-100%);white-space:nowrap;z-index:5}
.st-tip .tv{font-family:var(--display);font-weight:600;font-size:13px}
.st-tip .td{font-size:11px;color:var(--muted-dim);margin-top:2px}
/* comparativa multi-línea: tooltip con una fila por QR + línea vertical de cursor */
.st-tip.multi{transform:translate(-50%,0)}
.st-tip.multi .td{margin:0 0 5px}
.st-tip .tr{display:flex;align-items:center;gap:7px;font-size:12px;line-height:1.5}
.st-tip .tr .dot{width:8px;height:8px;border-radius:2px;flex:none}
.st-tip .tr b{margin-left:auto;padding-left:12px;font-family:var(--display);font-weight:600}
.st-vline{stroke:var(--muted-dim);stroke-width:1;stroke-dasharray:3 3}

.st-two{display:grid;grid-template-columns:1fr 320px;gap:12px}
.st-two.one{grid-template-columns:1fr}
.st-two .st-card{margin-bottom:0}
.st-two .st-card[hidden]{display:none}

.st-heat-wrap{display:flex;gap:12px}
.st-heat-days{display:flex;flex-direction:column;gap:4px;padding-top:18px}
.st-heat-days span{height:20px;display:flex;align-items:center;font-size:10.5px;color:var(--muted-dim);font-family:var(--mono)}
.st-heat-main{flex:1;min-width:0}
.st-heat-hours{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;margin-bottom:5px}
.st-heat-hours span{font-size:9px;color:var(--muted-dim);font-family:var(--mono);text-align:center}
.st-heat-grid{display:grid;grid-template-rows:repeat(7,20px);gap:4px}
.st-heat-row{display:grid;grid-template-columns:repeat(24,1fr);gap:3px}
.st-cell{border-radius:3px;background:var(--raised);transition:transform .1s}
.st-cell:hover{transform:scale(1.3);z-index:2}
.st-heat-legend{display:flex;align-items:center;gap:8px;margin-top:14px;justify-content:flex-end;font-size:11px;color:var(--muted-dim)}
.st-heat-legend .scale{display:flex;gap:3px}
.st-heat-legend .scale i{width:15px;height:11px;border-radius:3px;display:block}

.st-rank{display:flex;flex-direction:column}
.st-rank-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border-soft)}
.st-rank-row:last-child{border-bottom:none}
label.st-rank-row{cursor:pointer;transition:opacity .12s}
.st-rank-row.off{opacity:.42}
.st-rank-cb{width:14px;height:14px;flex:none;margin:0;accent-color:var(--violet);cursor:pointer}
.st-rank-row .sw{width:9px;height:9px;border-radius:3px;flex:none}
.st-rank-row .rn{font-family:var(--sans);font-size:13px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-rank-row .bar{width:64px;height:5px;border-radius:3px;background:var(--raised);overflow:hidden;flex:none}
.st-rank-row .bar i{display:block;height:100%;border-radius:3px}
.st-rank-row .rv{font-family:var(--display);font-weight:600;font-size:13px;width:34px;text-align:right}

.st-empty{padding:40px 20px;text-align:center;color:var(--muted-dim);font-size:13px}

@media(max-width:880px){
  .st-two{grid-template-columns:1fr}
  .st-range{margin-left:0}
}

/* ===================================================================
   Tab "Cuenta" — perfil + facturación + planes + cancelar
   =================================================================== */
.acc-sec{background:linear-gradient(180deg,var(--surface),#13151c);border:1px solid var(--border-soft);
  border-radius:14px;padding:18px 20px;margin-bottom:14px}
.acc-sec h3{font-family:var(--display);font-weight:600;font-size:15px;margin:0 0 12px}
.acc-sec .stat-cards{margin-bottom:14px}
.acc-sec label{margin-top:12px}
.acc-sec label:first-of-type{margin-top:0}
.acc-sec .row2{margin-top:0}
.acc-sec input:disabled{opacity:.6;cursor:not-allowed}

.acc-banner{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:12px;margin-bottom:14px;font-size:13px}
.acc-banner.danger{background:rgba(255,122,122,.10);border:1px solid rgba(255,122,122,.32);color:#ffb4b4}
.acc-banner .btn{flex:none}

.acc-warn{color:var(--warn)}
.acc-note{font-size:11.5px;margin-top:10px}

/* ---------- Stat cards (fila compartida: Links y QRs · Configuración · Analíticas) ----------
   Número grande arriba · cap "de N" (donde aplica) · etiqueta al pie, alineada
   en las 4. Mismos colores/tipografía que el resto de la app. */
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
@media(max-width:820px){.stat-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.stat-cards{grid-template-columns:1fr}}
.stat-card{display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--surface),#13151c);border:1px solid var(--border-soft);
  border-radius:14px;padding:16px 16px 14px}
.stat-card .num{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.02em;line-height:1.15;color:var(--text)}
.stat-card .num small{font-family:var(--sans);font-weight:400;font-size:12px;color:var(--muted-dim);margin-left:4px}
.stat-card .sub{font-size:11.5px;color:var(--muted-dim);margin-top:3px}
.stat-card .sub.up{color:#4fe3a6}
.stat-card .sub.down{color:#ff7a7a}
.stat-card .lbl{font-size:11.5px;color:var(--muted-dim);margin-top:auto;padding-top:10px}

.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
/* misma familia de card que .stat-card / .acc-sec / .qr-row */
.plan-card{border:1px solid var(--border-soft);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(180deg,var(--surface),#13151c)}
.plan-card.current{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet) inset}
.plan-card-top{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.plan-name{font-family:var(--display);font-weight:600;font-size:14px}
.plan-price{font-family:var(--display);font-weight:600;font-size:15px}
.plan-price small{font-family:var(--sans);font-size:10.5px;color:var(--muted-dim);font-weight:400}
.plan-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;flex:1}
.plan-card li{font-size:11.5px;color:var(--muted);padding-left:15px;position:relative;line-height:1.35}
.plan-card li::before{content:"✓";position:absolute;left:0;color:var(--teal)}
.plan-badge{text-align:center;font-size:11.5px;font-weight:600;color:var(--violet-soft);
  border:1px solid var(--violet-line,rgba(139,108,255,.34));border-radius:8px;padding:7px}

.danger-zone{border-color:rgba(255,122,122,.28)}
.danger-zone h3{color:#ff9a9a}

@media(max-width:820px){ .plan-grid{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .plan-grid{grid-template-columns:1fr} }

/* ---------- Candados por plan ---------- */
.dz2-desttype button.locked{opacity:.5}
.dz2-desttype button.locked::after{content:" 🔒";font-size:9px}

/* Estadísticas bloqueadas en Free: métricas avanzadas borrosas + cartel */
.st-card.st-locked,.stat-card.st-locked{position:relative;overflow:hidden}
.st-locked > *:not(.st-lock){filter:blur(6px);pointer-events:none;user-select:none}
.stat-card.st-locked > *:not(.st-lock){filter:blur(5px)}
.st-lock{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center;padding:18px;background:rgba(12,13,17,.35)}
.st-lock strong{font-family:var(--display);font-size:14px}
.st-lock span{font-size:12px;color:var(--muted);max-width:280px;line-height:1.4}
.st-seg button.locked{opacity:.55}
.st-seg button.locked::after{content:" 🔒";font-size:10px}