/* ==========================================================================
   KxxStudio-AI — Capa visual v3
   Se carga después del <style> interno, así que NO toca el HTML ni el JS.
   Solo cambia la piel: superficies, bordes, tipografía, elevación y acento.

   El problema que corrige, medido sobre las capturas reales:
     antes → fondo y tarjeta tenían una separación de 1,08:1  (invisible)
     ahora → 1,62:1 entre lienzo y tarjeta, 1,32:1 a la siguiente capa
   Y el rango tonal pasa de 4,4 % de píxeles claros a ~13 %.
   ========================================================================== */

:root{
  /* --- Superficies: 4 niveles con salto medido, no elegido a ojo --- */
  --bg:#06070C;
  --bg-elev:#0D1018;
  --surf:#1E2432;
  --surf-2:#2C3446;
  --surf-3:#3C465C;

  /* --- Texto: medido sobre --surf --- */
  --txt:#F6F8FC;          /* 11,7:1 */
  --dim:#BAC4D6;          /*  7,1:1 */
  --faint:#94A0B6;        /*  4,7:1  (antes 3,5:1, fallaba AA) */

  /* --- Bordes: en fondo oscuro separan más que cualquier sombra --- */
  --line:rgba(255,255,255,.11);
  --line2:rgba(255,255,255,.18);
  --line3:rgba(255,255,255,.30);

  /* --- Acento con tres tonos para dar profundidad --- */
  --blue:#6E8CFF;
  --violet:#A88CFF;
  --eblue:#A9BAFF;
  --accent:#6E8CFF;
  --accent-soft:rgba(110,140,255,.14);
  --accent-line:rgba(110,140,255,.42);
  --grad:linear-gradient(155deg,#A9BAFF,#6E8CFF 45%,#4059D8);

  /* --- Semánticos --- */
  --green:#3DDC97;
  --amber:#FFC24B;
  --red:#FF7A8A;
  --warn:#FFC24B;          /* faltaba: #hpWarn usaba una variable inexistente */

  /* --- Radios --- */
  --r-xs:8px;
  --r-sm:10px;
  --r:13px;
  --r-md:15px;
  --r-lg:19px;
  --r-xl:24px;
  --r-full:999px;

  /* --- Tipografía: 7 pasos con saltos claros --- */
  --fs-2xs:11px;
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-base:14px;
  --fs-md:15px;
  --fs-lg:17px;
  --fs-xl:21px;
  --fs-2xl:27px;
  --fs-3xl:36px;

  /* --- Elevación: tres capas por nivel (sombra + luz + oclusión) --- */
  --e1:0 1px 1px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.28);
  --e2:0 2px 4px rgba(0,0,0,.55),0 8px 20px rgba(0,0,0,.42),0 20px 44px rgba(0,0,0,.32);
  --e3:0 4px 8px rgba(0,0,0,.5),0 16px 40px rgba(0,0,0,.5),0 40px 90px rgba(0,0,0,.42);
  --inset:inset 0 1px 0 rgba(255,255,255,.16);
  --inset2:inset 0 1px 0 rgba(255,255,255,.09);
  --dark:inset 0 -1px 0 rgba(0,0,0,.55);

  /* --- Espaciado --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:36px;

  /* --- Movimiento --- */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.2s;
}

/* ------------------------------------------------------------------ Base */
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--txt);
  font-size:var(--fs-md);
  line-height:1.56;
  letter-spacing:-.011em;
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Cifras alineadas: saldos y cuotas no bailan al cambiar */
#balChip b,.mstat,.tag,.pend .diff,.verrow,.msg pre,.msg code,.mcard h3{
  font-variant-numeric:tabular-nums;
}

/* Foco visible y coherente en todo */
:is(button,a,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--eblue);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

/* Barra de desplazamiento discreta */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border:3px solid transparent;background-clip:content-box;border-radius:var(--r-full)}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26);background-clip:content-box}

/* ------------------------------------------------------- Fondo con luz */
/* Un foco frío arriba (coherente con el filo claro de las tarjetas)
   y otro cálido abajo-derecha. Antes eran dos halos gigantes que teñían
   todo de azul y aplanaban la escena. */
.aurora::before{
  width:130vw;height:88vh;left:50%;top:-42vh;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(110,140,255,.20),rgba(110,140,255,.07) 38%,transparent 66%);
  filter:blur(10px);
  border-radius:0;
}
.aurora::after{
  width:70vw;height:70vw;right:-22vw;top:auto;bottom:-24vh;
  background:radial-gradient(circle,rgba(168,120,255,.13),transparent 62%);
  filter:blur(30px);
}

/* --------------------------------------------------------------- Cristal */
.glass{
  background:linear-gradient(180deg,var(--surf-2),var(--surf) 62%,#1A2030);
  border:1px solid var(--line2);
  border-radius:var(--r-lg);
  box-shadow:var(--e2),var(--inset),var(--dark);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
}
.glass-strong{
  background:linear-gradient(180deg,var(--surf-3),var(--surf-2) 45%,var(--surf));
  border:1px solid var(--line3);
  border-radius:var(--r-xl);
  box-shadow:var(--e3),var(--inset),var(--dark);
  backdrop-filter:blur(24px) saturate(155%);
  -webkit-backdrop-filter:blur(24px) saturate(155%);
}

/* --------------------------------------------------------------- Cabecera */
header{
  border-radius:var(--r-lg);
  border-color:var(--line2);
  background:linear-gradient(180deg,rgba(44,52,70,.96),rgba(20,25,38,.94));
  box-shadow:var(--inset),0 6px 26px rgba(0,0,0,.45);
}
.brand h1{font-size:var(--fs-lg);letter-spacing:-.02em;font-weight:700}
.mark{
  border-radius:var(--r-sm);
  box-shadow:0 4px 14px rgba(110,140,255,.40),var(--inset);
}
.hstat{font-size:var(--fs-2xs);color:var(--faint)}

#balChip{
  background:rgba(110,140,255,.10);
  border:1px solid var(--accent-line);
  border-radius:var(--r-md);
  padding:6px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
#balChip b{font-size:var(--fs-base);font-weight:700;letter-spacing:-.02em}
#balChip em{font-size:9px;letter-spacing:.16em;color:var(--eblue);font-weight:800}

#modelPill{
  border-radius:var(--r-md);
  font-size:var(--fs-sm);
  border-color:var(--line2);
  background:linear-gradient(180deg,var(--surf-2),var(--surf));
  box-shadow:var(--e1),var(--inset2);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
#modelPill:hover{border-color:var(--line3)}
#curModelTop{font-weight:650}

#newBtnTop{
  border-radius:var(--r-md);
  font-size:var(--fs-sm);
  font-weight:650;
  border:1px solid var(--accent-line);
  background:rgba(110,140,255,.14);
  color:#E0E7FF;
  box-shadow:var(--inset2);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
#newBtnTop:hover{background:rgba(110,140,255,.22)}
#newBtnTop:active{transform:scale(.97)}

.iconbtn{
  border-radius:var(--r-sm);
  border-color:var(--line);
  background:rgba(255,255,255,.05);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.iconbtn:hover{background:rgba(255,255,255,.09);border-color:var(--line2)}
.iconbtn:active{transform:scale(.94)}

/* ------------------------------------------------------- Barra lateral */
aside{
  background:linear-gradient(180deg,#101420,#0A0D14);
  border-right:1px solid var(--line2);
  box-shadow:8px 0 32px rgba(0,0,0,.35);
}
@media(min-width:900px){
  aside{
    border:1px solid var(--line2);
    border-radius:var(--r-xl);
    background:linear-gradient(180deg,#121724,#0B0E16);
    box-shadow:var(--e2),var(--inset2),var(--dark);
  }
}

.side-mark{border-radius:var(--r-sm);box-shadow:var(--inset2)}
.side-brand-tx b{font-size:var(--fs-base);letter-spacing:-.014em;font-weight:650}
.side-state{font-size:var(--fs-2xs);color:var(--faint)}

.side-h{
  font-size:9.5px;
  letter-spacing:.16em;
  color:var(--faint);
  font-weight:800;
  margin:var(--sp-4) 9px var(--sp-1);
}

.search{
  height:36px;
  border-radius:var(--r-sm);
  border-color:var(--line);
  background-color:rgba(0,0,0,.44);
  font-size:var(--fs-xs);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.35);
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.search:focus{border-color:rgba(110,140,255,.62);background-color:rgba(0,0,0,.58);box-shadow:inset 0 2px 5px rgba(0,0,0,.35),0 0 0 3px rgba(110,140,255,.13)}

.btn{
  height:42px;
  border-radius:var(--r);
  font-size:var(--fs-sm);
  font-weight:660;
  background:var(--grad);
  box-shadow:0 4px 16px rgba(110,140,255,.34),var(--inset);
  transition:filter var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn:hover{filter:brightness(1.09)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.ghost{
  background:rgba(255,255,255,.055);
  border:1px solid var(--line);
  color:var(--txt);
  box-shadow:var(--inset2);
}
.btn.ghost:hover{background:rgba(255,255,255,.10);border-color:var(--line2)}
.btn.danger{border-color:rgba(255,122,138,.40);color:var(--red)}

.conv{
  position:relative;
  border-radius:var(--r-sm);
  font-size:var(--fs-xs);
  min-height:42px;
  padding:8px 10px;
  border-left:0;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.conv:hover{background:rgba(255,255,255,.055)}
.conv.on{
  background:linear-gradient(90deg,rgba(110,140,255,.18),rgba(110,140,255,.06));
  box-shadow:inset 0 0 0 1px rgba(110,140,255,.26),inset 0 1px 0 rgba(255,255,255,.07);
}
/* Indicador luminoso: el detalle que hace que se sienta pulido */
.conv.on::before{
  content:"";
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--eblue),var(--blue));
  box-shadow:0 0 10px rgba(110,140,255,.65);
}
.conv.on .sico{color:var(--eblue);background:rgba(110,140,255,.20)}
.conv small{font-size:10px;color:var(--faint)}
.conv .sico{border-radius:var(--r-xs);background:rgba(255,255,255,.055)}

/* ------------------------------------------------------------- Mensajes */
.welcome .wm{
  font-size:var(--fs-xs);
  letter-spacing:.30em;
  color:var(--faint);
  font-weight:700;
}
.welcome h2{
  font-size:var(--fs-3xl);
  line-height:1.05;
  letter-spacing:-.042em;
  font-weight:740;
}
.welcome p{
  color:var(--dim);
  font-size:var(--fs-md);
  line-height:1.55;
  margin:14px auto 26px;
  max-width:40ch;
}
.qa button{
  border-radius:var(--r-full);
  font-size:var(--fs-xs);
  padding:10px 16px;
  border-color:var(--line);
  background:linear-gradient(180deg,var(--surf-2),var(--surf));
  box-shadow:var(--e1),var(--inset2);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.qa button:hover{border-color:var(--accent-line);background:linear-gradient(180deg,var(--surf-3),var(--surf-2));transform:translateY(-1px)}
.qa button:active{transform:translateY(0) scale(.985)}

.msg{font-size:var(--fs-md);line-height:1.62}
.msg.u{
  background:linear-gradient(155deg,rgba(110,140,255,.24),rgba(110,140,255,.12));
  border:1px solid rgba(110,140,255,.30);
  border-radius:var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg);
  padding:11px 15px;
  box-shadow:var(--e1),inset 0 1px 0 rgba(255,255,255,.10);
}
.msg.a{padding:2px 4px;max-width:96%}
.msg .who{
  font-size:10px;
  letter-spacing:.10em;
  color:var(--faint);
  font-weight:800;
}
.msg h3{font-size:var(--fs-lg);letter-spacing:-.018em;margin:14px 0 6px}
.msg h4{font-size:var(--fs-md);margin:12px 0 4px}
.msg a{color:var(--eblue);text-underline-offset:2px}
.msg li{margin:5px 0}
.msg li::marker{color:var(--blue)}

.codewrap{
  border-radius:var(--r-md);
  border-color:var(--line);
  background:#030409;
  box-shadow:var(--e1),var(--inset2);
}
.codewrap .codebar{
  font-size:var(--fs-2xs);
  color:var(--faint);
  padding:9px 13px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent);
}
.msg pre{font-size:12.5px;line-height:1.66;padding:13px}
.msg code{
  font-size:.88em;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  padding:1px 5px;
  border-radius:var(--r-xs);
}

/* Acciones de mensaje: el "apagado" se hace con color, no con opacidad
   (con opacidad .55 el contraste caía a 3,06:1, por debajo de AA). */
.msgbar{opacity:1}
.msgbar .mini{color:var(--dim)}
.msg:hover .msgbar .mini,.msg.sel .msgbar .mini{color:var(--txt)}

.mini{
  border-radius:var(--r-xs);
  font-size:var(--fs-2xs);
  border-color:var(--line);
  background:rgba(255,255,255,.05);
  padding:5px 9px;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.mini:hover{color:var(--txt);border-color:var(--line2);background:rgba(255,255,255,.09)}
.mini.on{
  color:var(--eblue);
  border-color:var(--accent-line);
  background:var(--accent-soft);
}

/* ----------------------------------------------------------- Compositor */
.comp{
  border-radius:var(--r-xl);
  border:1px solid var(--line2);
  background:linear-gradient(180deg,var(--surf-3),var(--surf-2) 52%,var(--surf));
  box-shadow:var(--e3),var(--inset),var(--dark);
  padding:7px 7px 7px 14px;
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.comp:focus-within{
  border-color:rgba(110,140,255,.68);
  box-shadow:var(--e3),0 0 0 4px rgba(110,140,255,.12),var(--inset),var(--dark);
}
.comp textarea{font-size:var(--fs-md);line-height:1.55}
.comp textarea::placeholder{color:var(--faint)}
.sendbtn{
  width:40px;height:40px;
  border-radius:50%;
  background:var(--grad);
  box-shadow:0 4px 16px rgba(110,140,255,.42),var(--inset);
  transition:filter var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.sendbtn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.sendbtn:active{transform:scale(.91)}
.compfoot .st{font-size:var(--fs-2xs);color:var(--faint)}
.compfoot select{
  border-radius:var(--r-full);
  font-size:var(--fs-2xs);
  border-color:var(--line);
  background-color:rgba(255,255,255,.05);
  padding:7px 30px 7px 12px;
}

/* ------------------------------------------------------------ Catálogo */
.cattitle{font-size:var(--fs-xl);font-weight:730;letter-spacing:-.03em}
.catsub{font-size:var(--fs-xs);color:var(--dim);line-height:1.5}
.catcount{
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  color:var(--green);
  background:rgba(61,220,151,.10);
  border:1px solid rgba(61,220,151,.30);
  border-radius:var(--r-full);
  padding:3px 9px;
}
.chip{
  border-radius:var(--r-full);
  font-size:var(--fs-2xs);
  font-weight:650;
  border-color:var(--line);
  background:linear-gradient(180deg,var(--surf-2),var(--surf));
  box-shadow:var(--e1),var(--inset2);
  padding:6px 13px;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.chip:hover{border-color:var(--line3)}
.chip.on{
  background:linear-gradient(155deg,var(--blue),#4059D8);
  border-color:rgba(110,140,255,.55);
  color:#fff;
  box-shadow:0 3px 12px rgba(110,140,255,.32),var(--inset);
}

/* La tarjeta: aquí está el cambio grande. Antes era casi del color del fondo. */
.mcard{
  border-radius:var(--r-lg);
  padding:16px;
  border:1px solid var(--line2);
  background:linear-gradient(180deg,var(--surf-2),var(--surf) 62%,#1A2030);
  box-shadow:var(--e2),var(--inset),var(--dark);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.mcard:hover{
  border-color:var(--line3);
  background:linear-gradient(180deg,var(--surf-3),var(--surf-2) 62%,#232A3B);
  transform:translateY(-3px);
  box-shadow:var(--e3),var(--inset),var(--dark);
}
.mcard.sel{
  border-color:rgba(110,140,255,.75);
  background:linear-gradient(180deg,rgba(110,140,255,.24),var(--surf) 62%,#1A2030);
  box-shadow:0 0 0 1px rgba(110,140,255,.40),0 0 34px rgba(110,140,255,.18),var(--e2),var(--inset);
}
.mcard h3{font-size:var(--fs-md);letter-spacing:-.014em;font-weight:670}
.mcard p{font-size:var(--fs-xs);color:var(--dim);line-height:1.5}
.mico{
  border-radius:var(--r-sm);
  background:linear-gradient(150deg,rgba(110,140,255,.26),rgba(110,140,255,.08));
  border:1px solid rgba(110,140,255,.28);
  color:var(--eblue);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.mcat2{font-size:10px;color:var(--faint);letter-spacing:.07em;font-weight:700}
.mstat{font-size:var(--fs-2xs);color:var(--dim)}
.usebtn2{
  border-radius:var(--r-sm);
  font-size:var(--fs-xs);
  font-weight:660;
  background:linear-gradient(155deg,var(--blue),#4059D8);
  box-shadow:0 3px 12px rgba(110,140,255,.30),var(--inset);
  transition:filter var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.usebtn2:hover{filter:brightness(1.1)}
.usebtn2:active{transform:scale(.975)}
.detbtn{
  border-radius:var(--r-sm);
  font-size:var(--fs-xs);
  font-weight:620;
  border-color:var(--line);
  background:rgba(255,255,255,.055);
  box-shadow:var(--inset2);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.detbtn:hover{background:rgba(255,255,255,.10);border-color:var(--line2)}
.tag{
  font-size:10px;
  border-radius:var(--r-full);
  border-color:var(--line);
  color:var(--dim);
  padding:3px 8px;
  background:rgba(255,255,255,.04);
}

/* ----------------------------------------------------- Ajustes / Studio */
.sethead h2{font-size:var(--fs-xl);letter-spacing:-.03em;font-weight:730}
.sethead p{font-size:var(--fs-xs);color:var(--dim);line-height:1.5}
.setcat{
  border-radius:var(--r-md);
  padding:14px;
  border-color:var(--line);
  background:linear-gradient(180deg,var(--surf-2),var(--surf));
  box-shadow:var(--e1),var(--inset2);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.setcat:hover{border-color:var(--line3);background:linear-gradient(180deg,var(--surf-3),var(--surf-2))}
.setcat:active{transform:scale(.995)}
.setic{
  width:40px;height:40px;
  border-radius:var(--r-sm);
  background:rgba(110,140,255,.14);
  border:1px solid rgba(110,140,255,.34);
  color:#C6CFFF;
}
.settx b{font-size:var(--fs-sm);letter-spacing:-.012em;font-weight:650}
.settx span{font-size:var(--fs-2xs);color:var(--dim);line-height:1.45}
.setst{font-size:var(--fs-2xs);color:var(--green)}

.set-card{
  border-radius:var(--r-lg);
  border:1px solid var(--line2);
  background:linear-gradient(180deg,var(--surf-2),var(--surf) 70%,#1A2030);
  box-shadow:var(--e2),var(--inset),var(--dark);
  padding:17px;
}
.set-card h3{font-size:var(--fs-md);font-weight:690;letter-spacing:-.02em}
.set-card .sub{font-size:var(--fs-2xs);color:var(--dim);line-height:1.5}

.field label{
  font-size:10px;
  letter-spacing:.13em;
  color:var(--faint);
  font-weight:800;
}
.field input,.field select,.field textarea{
  border-radius:var(--r);
  border-color:var(--line2);
  background:rgba(0,0,0,.46);
  font-size:var(--fs-sm);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.35);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(110,140,255,.62);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.35),0 0 0 3px rgba(110,140,255,.13);
}
.status{
  border-radius:var(--r-md);
  font-size:var(--fs-xs);
  border-color:var(--line);
  background:rgba(255,255,255,.045);
  box-shadow:var(--inset2);
}
.note{font-size:var(--fs-2xs);color:var(--dim);line-height:1.6}

.stabs{
  border-radius:var(--r-full);
  background:rgba(0,0,0,.42);
  border-color:var(--line);
  padding:4px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35);
}
.stabs button{
  border-radius:var(--r-full);
  font-size:var(--fs-xs);
  color:var(--dim);
  padding:8px 15px;
  transition:all var(--dur) var(--ease);
}
.stabs button.on{
  color:#fff;
  background:linear-gradient(155deg,var(--blue),#4059D8);
  box-shadow:0 3px 12px rgba(110,140,255,.32),var(--inset);
}

.pend{
  border-radius:var(--r-md);
  border-color:rgba(255,194,75,.34);
  background:linear-gradient(180deg,rgba(255,194,75,.09),rgba(255,194,75,.03));
  box-shadow:var(--inset2);
}
.pend .diff{
  border-radius:var(--r-xs);
  font-size:11px;
  background:#030409;
  border:1px solid var(--line);
}
.verrow{font-size:var(--fs-2xs);border-bottom:1px solid var(--line)}
.verrow span{color:var(--dim)}
#editor{
  border-radius:var(--r-md);
  background:#030409;
  border:1px solid var(--line);
  font-size:12.5px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.5);
}
.filebtn{
  border-radius:var(--r-xs);
  font-size:var(--fs-xs);
  border-color:var(--line);
  transition:all var(--dur) var(--ease);
}
.filebtn:hover{border-color:var(--line2);background:rgba(255,255,255,.07)}
#setBackBtn{
  border-radius:var(--r-sm);
  font-size:var(--fs-xs);
  border-color:var(--line2);
  background:rgba(255,255,255,.05);
  box-shadow:var(--inset2);
}

/* -------------------------------------------------------- Acceso (gate) */
#authGate{
  background:
    radial-gradient(90% 60% at 85% -5%,rgba(110,140,255,.16),transparent 58%),
    radial-gradient(80% 55% at 8% 108%,rgba(168,120,255,.14),transparent 58%),
    var(--bg);
}
.gate-mark{
  border-radius:var(--r-md);
  background:linear-gradient(155deg,#A9BAFF,var(--blue) 45%,#4059D8);
  border:1px solid rgba(169,186,255,.45);
  box-shadow:0 10px 30px rgba(110,140,255,.42),inset 0 1px 0 rgba(255,255,255,.30);
  color:#fff;
}
.gate-title{font-size:var(--fs-lg);letter-spacing:-.022em;font-weight:720}
.gate-tag{font-size:var(--fs-xs);color:var(--dim)}
.gate-h{
  font-size:var(--fs-2xl);
  line-height:1.12;
  letter-spacing:-.038em;
  font-weight:740;
}
.gate-sub{font-size:var(--fs-sm);line-height:1.6;color:var(--dim);max-width:42ch}
.gate-card2{
  border-radius:var(--r-xl);
  background:linear-gradient(180deg,var(--surf-3),var(--surf-2) 45%,var(--surf));
  border:1px solid var(--line3);
  box-shadow:var(--e3),var(--inset),var(--dark);
  padding:19px;
}
.gate-tabs{
  border-radius:var(--r-md);
  background:rgba(0,0,0,.42);
  border-color:var(--line);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35);
}
.gate-tabs button{
  border-radius:var(--r-sm);
  font-size:var(--fs-xs);
  color:var(--dim);
  font-weight:650;
}
.gate-tabs button.on{
  background:linear-gradient(155deg,var(--blue),#4059D8);
  border-color:rgba(110,140,255,.55);
  color:#fff;
  box-shadow:0 3px 12px rgba(110,140,255,.34),var(--inset);
}
.gfield{
  border-radius:var(--r-md);
  border-color:var(--line2);
  background:rgba(0,0,0,.46);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.35);
}
.gfield:focus-within{
  border-color:rgba(110,140,255,.68);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.35),0 0 0 3px rgba(110,140,255,.13);
}
.gfield label{font-size:9.5px;letter-spacing:.15em;color:var(--faint);font-weight:800}
#authGo{height:46px;border-radius:var(--r-md);font-size:var(--fs-base)}
.gate-fine{font-size:var(--fs-2xs);color:var(--faint);line-height:1.6;max-width:58ch;margin-left:auto;margin-right:auto}

.gprev{
  border-radius:var(--r-lg);
  border-color:var(--line2);
  background:linear-gradient(180deg,var(--surf-2),var(--surf));
  box-shadow:var(--e2),var(--inset),var(--dark);
}
.gp-model{
  font-size:10px;
  color:var(--eblue);
  border-color:rgba(110,140,255,.32);
  background:var(--accent-soft);
  border-radius:var(--r-full);
  font-weight:700;
}
.gp-bal{font-size:10px;color:var(--faint)}
.gp-u{
  border-radius:var(--r) var(--r) var(--r-xs) var(--r);
  font-size:var(--fs-xs);
  background:linear-gradient(155deg,rgba(110,140,255,.22),rgba(110,140,255,.10));
  border-color:rgba(110,140,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
}
.gp-a{font-size:var(--fs-xs);color:var(--dim);line-height:1.55}
.gp-code{border-radius:var(--r-xs);border-color:var(--line);background:#030409}
.gp-chip{
  border-radius:var(--r-sm);
  font-size:var(--fs-xs);
  font-weight:650;
  color:var(--eblue);
  border-color:rgba(110,140,255,.36);
  background:linear-gradient(155deg,rgba(110,140,255,.18),rgba(110,140,255,.07));
  box-shadow:var(--inset2);
}
.gp-cap{font-size:10px;color:var(--faint)}
#htmlPrev{border-top:1px solid var(--line)}
.hphead{border-bottom:1px solid var(--line)}
#hpWarn{
  background:rgba(255,194,75,.12);
  color:var(--warn);
  border-bottom:1px solid rgba(255,194,75,.24);
}
.webcard{
  border-radius:var(--r-md);
  border-color:rgba(110,140,255,.38);
  background:linear-gradient(155deg,rgba(110,140,255,.18),rgba(110,140,255,.06));
  box-shadow:var(--e1),inset 0 1px 0 rgba(255,255,255,.10);
  transition:all var(--dur) var(--ease);
}
.webcard:hover{border-color:rgba(110,140,255,.62);transform:translateY(-1px);box-shadow:var(--e2),inset 0 1px 0 rgba(255,255,255,.13)}

/* --------------------------------------------------------- Utilidades */
.hidden{display:none}

/* --------------------------------------------------------- Movimiento */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* Objetivos táctiles cómodos */
@media (pointer:coarse){
  .iconbtn{min-width:44px;min-height:44px}
  .conv{min-height:46px}
  .mini{min-height:38px}
  .chip{min-height:34px}
  .qa button{min-height:42px}
}