/* ==========================================================
   EOS UI — hoja de estilos del sistema
   Reglas de uso: ver DESIGN.md
   ========================================================== */
/* Tipografias servidas desde este dominio (Hanken Grotesk ya no se pide a Google)
   y en woff2, que pesa un tercio que el ttf. Mismas familias y pesos. */
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-latin.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-latin-ext.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"TT Interphases Pro";src:url("../fonts/TT_Interphases_Pro_Trial_DemiBold.woff2") format("woff2"),url("../fonts/TT_Interphases_Pro_Trial_DemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"TT Interphases Pro";src:url("../fonts/TT_Interphases_Pro_Trial_Black.woff2") format("woff2"),url("../fonts/TT_Interphases_Pro_Trial_Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap}

/* ==========================================================
   EOS — sistema base
   Luz única: arriba-izquierda (135° hacia abajo-derecha).
   Todas las sombras caen hacia abajo-derecha; los filos
   claros viven arriba-izquierda. Grises neutros puros.
   ========================================================== */
:root{
  --k0:#060606; --k1:#0a0a0a; --k2:#0e0e0e; --k3:#131313; --k4:#181818;
  --k5:#1e1e1e; --k6:#262626; --k7:#333333; --k8:#4a4a4a; --k9:#6b6b6b;
  --k10:#949494; --k11:#bdbdbd; --k12:#e2e2e2; --w:#f3f3f3;

  --ink:#ececec; --ink-2:rgba(236,236,236,.66); --ink-3:rgba(236,236,236,.40); --ink-4:rgba(236,236,236,.22);
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  --err:#e5534b; --err-t:rgba(229,83,75,.14); --ok:#6fcf97;

  --ease:cubic-bezier(.2,.7,.2,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --t-fast:160ms; --t:420ms; --t-slow:640ms; --stagger:90ms;

  --r-chip:8px; --r-btn:10px; --r-field:10px; --r-card:16px; --r-panel:16px;

  /* sombras: color tomado del fondo, nunca negro puro */
  --sc:4,4,4;
  --sh-0:1px 1px 2px rgba(var(--sc),.55);
  --sh-1:2px 3px 6px rgba(var(--sc),.55), 1px 1px 1px rgba(var(--sc),.5);
  --sh-2:6px 10px 22px rgba(var(--sc),.6), 2px 3px 6px rgba(var(--sc),.45);
  --sh-3:14px 24px 48px rgba(var(--sc),.65), 4px 6px 14px rgba(var(--sc),.4);
  --in-1:inset 2px 3px 6px rgba(var(--sc),.7), inset -1px -1px 0 rgba(255,255,255,.035);

  /* filo: luz arriba-izquierda, apagado abajo-derecha */
  --edge:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.035) 42%,rgba(255,255,255,0) 70%,rgba(255,255,255,.025));
  --edge-soft:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 45%,rgba(255,255,255,0) 75%);
  --edge-sunk:linear-gradient(145deg,rgba(0,0,0,.7),rgba(0,0,0,.2) 45%,rgba(255,255,255,.06));
  --edge-glass:linear-gradient(145deg,rgba(255,255,255,.38),rgba(255,255,255,.08) 38%,rgba(255,255,255,.02) 65%,rgba(255,255,255,.14));
}

*{box-sizing:border-box}
body{margin:0;background:var(--k1);color:var(--ink);font-family:'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}

/* barras de desplazamiento vestidas */
*{scrollbar-width:thin;scrollbar-color:var(--k7) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--k6);border-radius:8px;border:3px solid var(--k1)}
*::-webkit-scrollbar-thumb:hover{background:var(--k11)}

/* ---------- lienzo de artboard ---------- */
.sk{position:relative;overflow:hidden;
  background:
    radial-gradient(900px 620px at -6% -10%,rgba(255,255,255,.075),transparent 62%),
    radial-gradient(700px 500px at 110% 120%,rgba(0,0,0,.6),transparent 70%),
    var(--k1)}
.sk-pad{padding:64px 72px}

/* ---------- tipografía ---------- */
.disp{margin:0;font-family:'TT Interphases Pro','Hanken Grotesk',sans-serif;font-weight:900;letter-spacing:-.03em;line-height:.9;
  background:linear-gradient(155deg,#f6f6f6 12%,#c9c9c9 55%,#8d8d8d 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(3px 5px 5px rgba(4,4,4,.7))}
.h2{margin:0;font-family:'TT Interphases Pro','Hanken Grotesk',sans-serif;font-weight:900;font-size:28px;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.h3{margin:0;font-family:'TT Interphases Pro','Hanken Grotesk',sans-serif;font-weight:600;font-size:18px;letter-spacing:-.005em;line-height:1.2;color:var(--ink)}
.body{font-size:15px;line-height:1.55;color:var(--ink-2)}
.small{font-size:13px;line-height:1.45;color:var(--ink-3)}
.lbl{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.big{font-family:'TT Interphases Pro','Hanken Grotesk',sans-serif;font-weight:900;letter-spacing:-.02em;line-height:.9;color:var(--ink)}

/* encabezado de artboard: título grande, meta debajo */
.bh{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.bh-meta{display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-bottom:6px}
.col-h{display:flex;align-items:center;gap:12px}
.col-h::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- botones ---------- */
.btn{--fill:var(--k5);--edgeC:var(--edge);appearance:none;border:1px solid transparent;border-radius:var(--r-btn);
  height:48px;padding:0 28px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:15px;font-weight:600;letter-spacing:.005em;color:var(--ink);cursor:pointer;white-space:nowrap;
  background:linear-gradient(var(--fill),var(--fill)) padding-box,var(--edgeC) border-box;
  box-shadow:var(--sh-1);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),color var(--t) var(--ease),opacity var(--t) var(--ease)}
.btn svg{width:18px;height:18px;flex:none;transition:transform var(--t) var(--ease)}
.btn:hover,.btn.is-hover{--fill:var(--k6);transform:translate(-1px,-2px);box-shadow:var(--sh-2)}
.btn:hover svg.go,.btn.is-hover svg.go{transform:translateX(3px)}
.btn:active,.btn.is-active{transform:translate(0,0) scale(.96);box-shadow:var(--sh-0);transition-duration:90ms,120ms,var(--t),var(--t)}
.btn:focus-visible{outline:none;box-shadow:var(--sh-1),0 0 0 3px var(--k1),0 0 0 4px rgba(255,255,255,.6)}
.btn:disabled,.btn.is-disabled{--fill:var(--k3);--edgeC:var(--edge-soft);color:var(--ink-4);box-shadow:none;transform:none;cursor:not-allowed}

.btn--primary{--fill:#ededed;--edgeC:linear-gradient(145deg,#ffffff,#d9d9d9 45%,#bcbcbc);color:#0b0b0b}
.btn--primary:hover,.btn--primary.is-hover{--fill:#fafafa}
.btn--primary:disabled,.btn--primary.is-disabled{--fill:#3a3a3a;--edgeC:linear-gradient(#3a3a3a,#3a3a3a);color:rgba(255,255,255,.35)}

.btn--ghost{--fill:transparent;--edgeC:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04));box-shadow:none;color:var(--ink-2)}
.btn--ghost:hover,.btn--ghost.is-hover{--fill:rgba(255,255,255,.05);color:var(--ink);box-shadow:var(--sh-1)}
.btn--ghost:active,.btn--ghost.is-active{--fill:rgba(255,255,255,.08);box-shadow:none}
.btn--ghost:disabled,.btn--ghost.is-disabled{--fill:transparent;--edgeC:linear-gradient(rgba(255,255,255,.04),rgba(255,255,255,.04))}

.btn--glass{color:#f5f5f5;text-shadow:0 1px 2px rgba(0,0,0,.35);
  background:linear-gradient(150deg,rgba(255,255,255,.17),rgba(255,255,255,.05) 55%,rgba(255,255,255,.09)) padding-box,
    linear-gradient(145deg,rgba(255,255,255,.6),rgba(255,255,255,.14) 32%,rgba(255,255,255,.03) 62%,rgba(255,255,255,.24)) border-box;
  -webkit-backdrop-filter:blur(14px) saturate(1.25) brightness(1.08);backdrop-filter:blur(14px) saturate(1.25) brightness(1.08);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.16),inset -6px -8px 16px rgba(0,0,0,.16),8px 14px 28px rgba(var(--sc),.45),2px 3px 6px rgba(var(--sc),.3)}
.btn--glass:hover,.btn--glass.is-hover{
  background:linear-gradient(150deg,rgba(255,255,255,.26),rgba(255,255,255,.09) 55%,rgba(255,255,255,.13)) padding-box,
    linear-gradient(145deg,rgba(255,255,255,.75),rgba(255,255,255,.18) 32%,rgba(255,255,255,.05) 62%,rgba(255,255,255,.3)) border-box;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),inset -6px -8px 16px rgba(0,0,0,.14),14px 22px 40px rgba(var(--sc),.5),3px 5px 10px rgba(var(--sc),.3)}
.btn--glass:active,.btn--glass.is-active{
  background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.04) 55%,rgba(255,255,255,.06)) padding-box,
    linear-gradient(145deg,rgba(255,255,255,.4),rgba(255,255,255,.1) 32%,rgba(255,255,255,.03) 62%,rgba(255,255,255,.16)) border-box;
  box-shadow:inset 2px 3px 8px rgba(0,0,0,.28),2px 3px 6px rgba(var(--sc),.35)}
.btn--glass:disabled,.btn--glass.is-disabled{color:rgba(255,255,255,.34);text-shadow:none;
  background:linear-gradient(rgba(255,255,255,.04),rgba(255,255,255,.04)) padding-box,linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.03)) border-box;
  box-shadow:none}
.btn--glass.is-loading{color:transparent;text-shadow:none}
/* escena para vidrio: esferas iluminadas arriba-izq */
.orb{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 30% 26%,#d6d6d6 0%,#7c7c7c 15%,#3a3a3a 40%,#171717 70%,#0b0b0b 100%);
  box-shadow:inset -6px -8px 14px rgba(0,0,0,.55),3px 5px 12px rgba(0,0,0,.5)}

.btn--danger{--fill:#2a1413;--edgeC:linear-gradient(145deg,rgba(229,83,75,.55),rgba(229,83,75,.12) 55%);color:#f3b2ad}
.btn--danger:hover,.btn--danger.is-hover{--fill:#351715}

.btn--sm{height:36px;padding:0 18px;font-size:13px;border-radius:8px}
.btn--lg{height:56px;padding:0 34px;font-size:16px}
.btn--icon{width:48px;padding:0}
.btn--sm.btn--icon{width:36px}
.btn.is-loading{color:transparent;pointer-events:none;position:relative}
.btn.is-loading::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.18);border-top-color:var(--ink);animation:spin .8s linear infinite}
.btn--primary.is-loading::after{border-color:rgba(0,0,0,.15);border-top-color:#0b0b0b}

/* ---------- superficies ---------- */
.surf{--fill:var(--k4);border:1px solid transparent;border-radius:var(--r-card);
  background:linear-gradient(var(--fill),var(--fill)) padding-box,var(--edge) border-box;box-shadow:var(--sh-2)}
.card{--fill:var(--k4);position:relative;border:1px solid transparent;border-radius:var(--r-card);overflow:hidden;
  background:linear-gradient(var(--fill),var(--fill)) padding-box,var(--edge) border-box;box-shadow:var(--sh-2);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.card.is-live{cursor:pointer}
.card.is-live:hover,.card.is-hover{transform:translate(-2px,-5px);box-shadow:var(--sh-3)}
.card.is-live:active,.card.is-active{transform:scale(.985);box-shadow:var(--sh-1);transition-duration:120ms}
.card.is-selected{--fill:var(--k5);background:linear-gradient(var(--fill),var(--fill)) padding-box,linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.12) 50%,rgba(255,255,255,.2)) border-box}
.card.is-disabled{opacity:.42;filter:grayscale(1);box-shadow:var(--sh-0);cursor:not-allowed}
.card .media{transition:transform var(--t-slow) var(--ease)}
.card.is-live:hover .media,.card.is-hover .media{transform:scale(1.035)}

.hair{height:1px;background:var(--line)}
.vhair{width:1px;align-self:stretch;background:var(--line)}

/* escena de placeholder de foto: gradiente con luz arriba-izquierda */
.scene{position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 18% 8%,rgba(255,255,255,.32),rgba(255,255,255,0) 55%),
    radial-gradient(80% 60% at 90% 110%,rgba(0,0,0,.8),transparent 70%),
    linear-gradient(165deg,#3d3d3d,#1a1a1a 60%,#0c0c0c)}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0) 45%,rgba(10,10,10,.85) 100%)}
.ph-tag{position:absolute;left:16px;top:14px;z-index:1;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600}

/* ---------- campos ---------- */
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field>label,.flabel{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.hint{font-size:12px;color:var(--ink-3)}
.hint.err{color:var(--err)}
.inp{--fill:var(--k2);width:100%;height:48px;padding:0 16px;border-radius:var(--r-field);border:1px solid transparent;outline:none;
  background:linear-gradient(var(--fill),var(--fill)) padding-box,var(--edge-sunk) border-box;
  box-shadow:var(--in-1);font-size:15px;color:var(--ink);
  transition:box-shadow var(--t) var(--ease),background var(--t) var(--ease)}
.inp::placeholder{color:var(--ink-4)}
.inp:hover,.inp.is-hover{--fill:#101010}
/* foco: sin anillo; el campo se aclara apenas y el filo inferior-derecho toma luz */
.inp:focus,.inp.is-focus{--fill:#141414;
  background:linear-gradient(var(--fill),var(--fill)) padding-box,linear-gradient(145deg,rgba(0,0,0,.6),rgba(255,255,255,.04) 45%,rgba(255,255,255,.16)) border-box;
  box-shadow:inset 1px 2px 5px rgba(var(--sc),.55),0 0 22px rgba(255,255,255,.025)}
/* error: sin anillo; tinte rojo muy bajo en el filo y el fondo, el mensaje hace el resto */
.inp.is-error{--fill:#140f0f;
  background:linear-gradient(var(--fill),var(--fill)) padding-box,linear-gradient(145deg,rgba(0,0,0,.6),rgba(229,83,75,.08) 45%,rgba(229,83,75,.3)) border-box}
.inp:disabled,.inp.is-disabled{--fill:var(--k3);color:var(--ink-4);box-shadow:none;cursor:not-allowed;
  background:linear-gradient(var(--fill),var(--fill)) padding-box,linear-gradient(var(--line),var(--line)) border-box}
textarea.inp{height:auto;min-height:104px;padding:14px 16px;line-height:1.5;resize:none;field-sizing:content;overflow:hidden}
.inp-wrap{position:relative;display:flex;align-items:center}
.inp-wrap>svg{position:absolute;left:15px;width:18px;height:18px;color:var(--ink-3);pointer-events:none}
.inp-wrap>.inp{padding-left:44px}
.inp-wrap>.trail{position:absolute;right:14px;display:flex;color:var(--ink-3);pointer-events:none}
.inp-wrap>.trail svg{width:18px;height:18px}

.sel{appearance:none;cursor:pointer;padding-right:44px;text-align:left;display:flex;align-items:center}

.menu{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:5;padding:6px;border-radius:12px;border:1px solid transparent;
  background:linear-gradient(rgba(28,28,28,.82),rgba(28,28,28,.82)) padding-box,var(--edge-glass) border-box;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--sh-3);
  animation:menuIn var(--t) var(--ease) both;transform-origin:top left}
.opt{appearance:none;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;height:40px;padding:0 12px;border:0;border-radius:8px;background:transparent;
  font-size:14px;color:var(--ink-2);cursor:pointer;text-align:left;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.opt:hover,.opt.is-hover{background:rgba(255,255,255,.06);color:var(--ink)}
.opt.is-on{color:var(--ink)}
.opt svg{width:16px;height:16px}

/* check / radio */
.chk{appearance:none;margin:0;width:20px;height:20px;flex:none;border-radius:6px;border:1px solid transparent;cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(var(--k2),var(--k2)) padding-box,var(--edge-sunk) border-box;box-shadow:var(--in-1);transition:background var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.chk::after{content:"";width:9px;height:5px;border-left:2px solid #0b0b0b;border-bottom:2px solid #0b0b0b;transform:translateY(-1px) rotate(-45deg) scale(.4);opacity:0;transition:all var(--t-fast) var(--ease)}
.chk:checked{background:linear-gradient(#ededed,#ededed) padding-box,linear-gradient(145deg,#fff,#bdbdbd) border-box;box-shadow:var(--sh-1)}
.chk:checked::after{opacity:1;transform:translateY(-1px) rotate(-45deg) scale(1)}
.chk.rad{border-radius:50%}
.chk.rad::after{width:8px;height:8px;border:0;border-radius:50%;background:#0b0b0b;transform:scale(.3)}
.chk.rad:checked::after{transform:scale(1)}
.chk:disabled{opacity:.35;cursor:not-allowed}
.chk-row{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-2);cursor:pointer}

/* switch: pista rectangular suave, no píldora */
.sw{appearance:none;margin:0;flex:none;width:46px;height:26px;border-radius:8px;border:1px solid transparent;cursor:pointer;position:relative;
  background:linear-gradient(var(--k2),var(--k2)) padding-box,var(--edge-sunk) border-box;box-shadow:var(--in-1);transition:background var(--t) var(--ease)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:5px;background:#6a6a6a;box-shadow:var(--sh-1);
  transition:transform var(--t) var(--ease),background var(--t) var(--ease)}
.sw:checked{background:linear-gradient(#d9d9d9,#d9d9d9) padding-box,linear-gradient(145deg,#fff,#aaa) border-box;box-shadow:inset 1px 2px 4px rgba(0,0,0,.25)}
.sw:checked::after{transform:translateX(20px);background:#0e0e0e}
.sw:disabled{opacity:.35;cursor:not-allowed}

/* control segmentado */
.seg{display:inline-flex;padding:4px;gap:2px;border-radius:12px;border:1px solid transparent;
  background:linear-gradient(var(--k2),var(--k2)) padding-box,var(--edge-sunk) border-box;box-shadow:var(--in-1)}
.seg button{appearance:none;border:1px solid transparent;border-radius:8px;height:36px;padding:0 18px;background:transparent;font-size:13px;font-weight:600;color:var(--ink-3);cursor:pointer;
  transition:color var(--t) var(--ease),background var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t-fast) var(--ease)}
.seg button:hover{color:var(--ink)}
.seg button:active{transform:scale(.96)}
.seg button.on{color:var(--ink);background:linear-gradient(var(--k6),var(--k6)) padding-box,var(--edge) border-box;box-shadow:var(--sh-1)}

/* chips de filtro (rectángulo suave) */
.chip{appearance:none;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:var(--r-chip);border:1px solid transparent;cursor:pointer;
  font-size:13px;font-weight:550;color:var(--ink-2);background:linear-gradient(var(--k3),var(--k3)) padding-box,var(--edge-soft) border-box;
  transition:all var(--t) var(--ease)}
.chip:hover{color:var(--ink);background:linear-gradient(var(--k5),var(--k5)) padding-box,var(--edge) border-box}
.chip.on{color:#0b0b0b;background:linear-gradient(#e6e6e6,#e6e6e6) padding-box,linear-gradient(145deg,#fff,#bbb) border-box;box-shadow:var(--sh-1)}
.chip svg{width:14px;height:14px}
.chip .x{opacity:.6}

.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--ink-2);background:rgba(255,255,255,.06)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
.dot.ok{background:var(--ok)}.dot.err{background:var(--err)}.dot.on{background:#f1f1f1}

/* vidrio esmerilado */
.glass{border:1px solid transparent;border-radius:var(--r-card);
  background:linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.035)) padding-box,var(--edge-glass) border-box;
  -webkit-backdrop-filter:blur(26px) saturate(1.1);backdrop-filter:blur(26px) saturate(1.1);
  box-shadow:12px 22px 44px rgba(var(--sc),.5),inset 1px 1px 0 rgba(255,255,255,.06)}

/* ---------- carga ---------- */
.skel{position:relative;overflow:hidden;border-radius:6px;background:var(--k5)}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.07) 50%,transparent 80%);animation:shimmer 1.6s var(--ease-io) infinite}
.spin{width:28px;height:28px;border-radius:50%;border:2.5px solid rgba(255,255,255,.1);border-top-color:var(--ink);animation:spin .9s linear infinite}
.bar{height:6px;border-radius:4px;background:var(--k2);box-shadow:var(--in-1);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#8a8a8a,#f0f0f0)}
.bar.indet>i{width:34%;animation:indet 1.4s var(--ease-io) infinite}

/* ---------- movimiento ---------- */
.in{animation:fadeUp var(--t-slow) var(--ease) both;animation-delay:calc(var(--i,0) * var(--stagger))}
.fade{animation:fade var(--t-slow) var(--ease) both;animation-delay:calc(var(--i,0) * var(--stagger))}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{to{transform:translateX(100%)}}
@keyframes indet{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.85;transform:scale(1.06)}}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-8px)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
}

/* ---------- tabla densa ---------- */
.tbl{--cols:44px 40px minmax(0,2.3fr) minmax(0,1fr) minmax(0,.7fr) minmax(0,.9fr) minmax(0,.9fr) 118px minmax(0,1fr) 44px;display:flex;flex-direction:column}
.tr{display:grid;grid-template-columns:var(--cols);align-items:center;column-gap:16px;padding:0 20px;min-height:52px;border-top:1px solid var(--line);
  font-size:14px;color:var(--ink-2);transition:background var(--t-fast) var(--ease)}
.tr:hover{background:rgba(255,255,255,.028)}
.tr.sel{background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.035))}
.tr.sel .nm{color:var(--ink)}
.th{min-height:44px;border-top:0;background:transparent!important}
.thb{appearance:none;border:0;background:transparent;padding:0;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);transition:color var(--t-fast) var(--ease)}
.thb:hover{color:var(--ink-2)}
.thb.on{color:var(--ink)}
.thb svg{width:13px;height:13px}
.r{text-align:right;justify-content:flex-end}
.tfoot{border-top:1px solid var(--line-2);background:rgba(255,255,255,.02)!important;color:var(--ink);font-weight:600}
.av{width:30px;height:30px;border-radius:8px;flex:none}
.iconbtn{appearance:none;border:0;background:transparent;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--ink-3);cursor:pointer;transition:all var(--t-fast) var(--ease)}
.iconbtn:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.iconbtn:active{transform:scale(.92)}
.iconbtn svg{width:18px;height:18px}
.pg{appearance:none;border:0;min-width:32px;height:32px;padding:0 8px;border-radius:8px;background:transparent;color:var(--ink-3);font-size:13px;cursor:pointer;transition:all var(--t-fast) var(--ease)}
.pg:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.pg.on{color:#0b0b0b;background:#e6e6e6;box-shadow:var(--sh-1)}
.thb.r{justify-self:end}

/* ---------- chasis de panel ---------- */
.dash{--chassis:#161616;--content:#0c0c0c;position:relative;overflow:hidden;background:var(--chassis)}
.dash-top{position:absolute;left:0;right:0;top:0;height:68px;display:flex;align-items:center;gap:20px;padding:0 28px 0 24px}
.dash-side{position:absolute;left:0;top:68px;bottom:0;width:232px;display:flex;flex-direction:column;gap:4px;padding:28px 0 24px 16px}
.dash-main{position:absolute;left:232px;top:68px;right:0;bottom:0;background:var(--content);border-top-left-radius:16px;
  box-shadow:inset 5px 6px 18px rgba(0,0,0,.6),inset 1px 1px 0 rgba(0,0,0,.8);overflow:hidden}
.nav-i{appearance:none;position:relative;border:0;background:transparent;height:44px;display:flex;align-items:center;gap:12px;padding:0 16px;
  border-radius:10px 0 0 10px;font-size:14px;font-weight:550;color:var(--ink-3);cursor:pointer;text-align:left;
  transition:color var(--t) var(--ease),background var(--t) var(--ease)}
.nav-i svg{width:19px;height:19px}
.nav-i:hover{color:var(--ink);background:rgba(255,255,255,.035)}
.nav-i:active{transform:scale(.98)}
.nav-i.on{color:var(--ink);background:var(--content);box-shadow:inset 4px 2px 10px rgba(0,0,0,.45)}
.nav-i.on::before,.nav-i.on::after{content:"";position:absolute;right:0;width:14px;height:14px;pointer-events:none}
.nav-i.on::before{top:-14px;background:radial-gradient(circle at 0 0,transparent 13.5px,var(--content) 14px)}
.nav-i.on::after{bottom:-14px;background:radial-gradient(circle at 0 100%,transparent 13.5px,var(--content) 14px)}
.nav-i .cnt{margin-left:auto;margin-right:14px;font-size:11px;color:var(--ink-3)}

/* ---------- segmentado con indicador que se desliza ---------- */
.seg2{position:relative;display:inline-flex;padding:4px;border-radius:12px;border:1px solid transparent;
  background:linear-gradient(var(--k2),var(--k2)) padding-box,var(--edge-sunk) border-box;box-shadow:var(--in-1)}
.seg2 .ind{position:absolute;top:4px;left:4px;height:36px;width:104px;border-radius:8px;border:1px solid transparent;
  background:linear-gradient(var(--k6),var(--k6)) padding-box,var(--edge) border-box;box-shadow:var(--sh-1);transition:transform 520ms var(--ease)}
.seg2 button{appearance:none;position:relative;z-index:1;width:104px;height:36px;border:0;background:transparent;font-size:13px;font-weight:600;color:var(--ink-3);cursor:pointer;transition:color var(--t) var(--ease)}
.seg2 button.on{color:var(--ink)}

/* sin líneas: la separación la hacen el aire y los tonos */
.bh{border-bottom:0!important}
.col-h::after{display:none}
.hair{display:none}
.vhair{background:transparent!important}
.tr{border-top:0!important}
.tbl .tr:not(.th):not(.tfoot):nth-child(even){background:rgba(255,255,255,.018)}
.tfoot{border-top:0!important;background:rgba(255,255,255,.04)!important}
.tr.sel{background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.035))!important}

/* sin tags: las etiquetas son texto común, sin mayúsculas espaciadas */
.lbl{font-size:13px!important;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.field>label,.flabel{font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.thb{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none}
.badge,.ph-tag,.col-h{display:none}

/* ---------- tarjetas con identidad ---------- */
.cw{position:relative;transition:transform var(--t) var(--ease),filter var(--t) var(--ease);
  filter:drop-shadow(6px 10px 12px rgba(4,4,4,.6)) drop-shadow(2px 3px 3px rgba(4,4,4,.5));cursor:pointer}
.cw.is-live:hover,.cw.is-hover{transform:translate(-2px,-6px);filter:drop-shadow(14px 24px 26px rgba(4,4,4,.7)) drop-shadow(3px 5px 6px rgba(4,4,4,.45))}
.cw.is-live:active,.cw.is-active{transform:scale(.985);filter:drop-shadow(2px 3px 4px rgba(4,4,4,.6))}
.cw.is-disabled{opacity:.4;filter:grayscale(1);cursor:not-allowed}
/* corte de kicktail: esquina superior derecha en chanfle */
.kick{position:relative;overflow:hidden;border-radius:16px;clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,0 100%)}
.kick-sm{clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
/* lija: textura de grip */
.grip{background:
  radial-gradient(rgba(255,255,255,.075) .8px,transparent 1.3px) 0 0/4px 4px,
  radial-gradient(rgba(255,255,255,.04) .8px,transparent 1.4px) 2px 1px/7px 7px,
  radial-gradient(120% 90% at 0% 0%,#232323,#0f0f0f 60%)}
/* ticket con muescas */
.ticket{border-radius:16px;
  -webkit-mask:radial-gradient(circle at 118px 0,transparent 13px,#000 13.5px) top/100% 51% no-repeat,radial-gradient(circle at 118px 100%,transparent 13px,#000 13.5px) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle at 118px 0,transparent 13px,#000 13.5px) top/100% 51% no-repeat,radial-gradient(circle at 118px 100%,transparent 13px,#000 13.5px) bottom/100% 51% no-repeat}
.kick .media,.ticket .media{transition:transform var(--t-slow) var(--ease)}
.cw.is-live:hover .media,.cw.is-hover .media{transform:scale(1.04)}
.cw.is-selected .kick,.cw.is-selected .edge-in{box-shadow:inset 1px 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.18)}
.edge-in{box-shadow:inset 1px 1px 0 rgba(255,255,255,.14),inset -1px -1px 0 rgba(0,0,0,.4)}

/* tarjetas simples: una sombra suave, sin brillos ni texturas */
.cw{filter:drop-shadow(0 6px 14px rgba(4,4,4,.35))!important}
.cw.is-live:hover,.cw.is-hover{transform:translateY(-3px);filter:drop-shadow(0 10px 20px rgba(4,4,4,.4))!important}
.cw.is-live:active,.cw.is-active{transform:scale(.99)}
.cw.is-disabled{filter:grayscale(1)!important}
.cw .disp{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#f2f2f2;filter:none}
.cw .scene::after{background:linear-gradient(180deg,rgba(10,10,10,0) 50%,rgba(10,10,10,.75) 100%)}
.cw .media{transition:none}
.cw.is-live:hover .media,.cw.is-hover .media{transform:none}
.grip{background:#151515!important}
.cw.is-selected .kick{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}

/* sin bordes recortados y letras un poco más abiertas */
.kick,.kick-sm{clip-path:none!important}
.ticket{-webkit-mask:none!important;mask:none!important}
.disp{letter-spacing:.005em}
.big,.h2{letter-spacing:.015em}
.h3{letter-spacing:.01em}

/* tarjeta única: mismo radio, mismo fondo, misma sombra, franja-rampa abajo */
.cbox{position:relative;overflow:hidden;border-radius:16px;background:#161616;box-shadow:none}
.cbox .band path{fill:#242424;transition:fill var(--t) var(--ease)}
.cbox .scene::after{display:none}
.cw.is-live:hover .band path,.cw.is-hover .band path{fill:#2c2c2c}
.cw.is-selected .band path{fill:#4a4a4a}
.cw.is-selected .cbox{box-shadow:none}

/* sombra sutil detrás del texto en tarjetas */
.cbox .disp,.cbox .big,.cbox .h3{text-shadow:2px 3px 14px rgba(4,4,4,.72),1px 1px 3px rgba(4,4,4,.4)}
.cbox .small,.cbox .num{text-shadow:1px 2px 7px rgba(4,4,4,.65)}

/* activo: forma apenas más clara, número encendido */
.cw.is-selected .band path{fill:#2c2c2c!important}
.cbox .rank{color:#f2f2f2!important}
.cw.is-selected .cbox{background:#1e1e1e}

/* deshabilitado: el mismo campo, con transparencia */
.inp:disabled,.inp.is-disabled{--fill:var(--k2);opacity:.38;color:var(--ink-2);cursor:not-allowed;
  background:linear-gradient(var(--fill),var(--fill)) padding-box,var(--edge-sunk) border-box;box-shadow:var(--in-1)}
.inp-wrap:has(.inp:disabled) .trail,.inp-wrap:has(.is-disabled) .trail{opacity:.38}

/* carga: las formas del sistema moviéndose como olas */
.wave{position:absolute;left:0;bottom:0;width:200%;display:block;animation:waveX 5s linear infinite}
.wave path{fill:#232323}
.wave.w2{animation-duration:6s;animation-direction:reverse}
.wave.w2 path{fill:#1c1c1c}
@keyframes waveX{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* carga: entra subiendo, queda viva mientras carga, sale hundiéndose */
.wfill{position:absolute;inset:0;animation:wIn .9s cubic-bezier(.2,.7,.2,1) both}
.wfill.out{animation:wOut .7s cubic-bezier(.65,0,.35,1) both!important}
.wtide{position:absolute;inset:0;animation:wTide 3.2s ease-in-out infinite alternate}
.wswell{position:absolute;inset:0;transform-origin:50% 100%;animation:wSwell 1.6s ease-in-out infinite alternate}
@keyframes wIn{from{transform:translateY(60%);opacity:0}to{transform:none;opacity:1}}
@keyframes wOut{from{transform:none;opacity:1}to{transform:translateY(60%);opacity:0}}
@keyframes wTide{from{transform:translateY(0)}to{transform:translateY(-16%)}}
@keyframes wSwell{from{transform:scaleY(.82)}to{transform:scaleY(1.16)}}

/* botón cargando: la misma ola del sistema, dentro del botón, con el texto visible */
.btn.is-loading{color:var(--ink);overflow:hidden;isolation:isolate;pointer-events:none}
.btn--primary.is-loading{color:#0b0b0b}
.btn--glass.is-loading{color:#f5f5f5}
.btn.is-loading::after{display:none}
.btn.is-loading::before{content:"";position:absolute;z-index:-1;left:-70%;top:58%;width:240%;aspect-ratio:1;border-radius:43%;
  background:rgba(255,255,255,.09);animation:spin 5s linear infinite,btnTide 2.4s ease-in-out infinite alternate}
.btn--primary.is-loading::before{background:rgba(0,0,0,.13)}
@keyframes btnTide{from{top:66%}to{top:44%}}
/* más presencia: ola más marcada y puntos que avanzan */
.btn--primary.is-loading::before{background:rgba(0,0,0,.2)}
.btn.is-loading:not(.btn--primary)::before{background:rgba(255,255,255,.14)}
.btn.is-loading::after{display:none!important}
/* el texto respira suave junto con la ola */
.btn.is-loading{animation:txtBreath 2.4s ease-in-out infinite alternate}
@keyframes txtBreath{from{color:currentColor;opacity:1}to{opacity:.72}}
/* cargando: solo el efecto, el texto queda oculto (mantiene el ancho y sigue para lectores de pantalla) */
.btn.is-loading,.btn--primary.is-loading,.btn--glass.is-loading{color:transparent!important;text-shadow:none}
.btn.is-loading svg{opacity:0}

/* tabla: todas las celdas centradas */
.tr>*{justify-self:center;text-align:center!important}
.tr>span[style*="display: flex"]{justify-content:center}
.tr .thb,.thb.r{justify-self:center;justify-content:center}
.tr .r{justify-content:center}
/* columnas de texto: bloque centrado, todas las filas arrancan en el mismo punto */
.tr>*:nth-child(3){width:220px;text-align:left!important;justify-content:flex-start!important}
.tr>*:nth-child(4){width:72px;text-align:left!important;justify-content:flex-start!important}
.tr>*:nth-child(9){width:118px;text-align:left!important;justify-content:flex-start!important}

/* menú lateral: el ítem activo es una pieza propia, separada del contenido */
.nav-i{border-radius:10px;margin-right:16px}
.nav-i.on{background:#232323;box-shadow:none}
.nav-i.on::before,.nav-i.on::after{display:none}

/* vidrio del artboard Vidrio: poco desenfoque, más distorsión (refracción) */
.sk-glass .glass,.sk-glass .btn--glass{
  -webkit-backdrop-filter:blur(3px) saturate(1.15);backdrop-filter:blur(3px) saturate(1.15);
  backdrop-filter:url(#sk-lens) blur(2px) saturate(1.15)}
.sk-glass .glass{background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02)) padding-box,var(--edge-glass) border-box;
  box-shadow:inset 2px 2px 8px rgba(255,255,255,.1),inset -4px -6px 14px rgba(0,0,0,.28),12px 22px 44px rgba(var(--sc),.5)}
/* detalle del vidrio curvo: brillo especular en el canto y reflejo suave */
.sk-glass .glass{position:relative}
.sk-glass .glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.16),transparent 42%),radial-gradient(90% 60% at 100% 100%,rgba(255,255,255,.07),transparent 55%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.38),inset 1.5px 0 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(255,255,255,.1),inset -1px 0 0 rgba(255,255,255,.06),inset 0 0 18px rgba(255,255,255,.05)}
/* más vidrio: el cristal aclara lo de atrás, tiene espesor visible y un reflejo diagonal */
.sk-glass .glass,.sk-glass .btn--glass{backdrop-filter:url(#sk-lens) blur(1.5px) brightness(1.14) contrast(1.06) saturate(1.2)}
.sk-glass .glass{background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.03) 60%,rgba(255,255,255,.06)) padding-box,var(--edge-glass) border-box;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 0 0 5px rgba(255,255,255,.02),inset 3px 3px 10px rgba(255,255,255,.12),inset -6px -8px 18px rgba(0,0,0,.3),14px 24px 46px rgba(var(--sc),.55),3px 5px 10px rgba(var(--sc),.35)}
.sk-glass .glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,transparent 22%,rgba(255,255,255,.09) 30%,rgba(255,255,255,.02) 36%,transparent 44%)}
/* barra de navegación: el ítem activo usa exactamente el mismo vidrio que las piezas grandes */
.sk-glass .lens-pill{position:relative;color:#f2f2f2;
  background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.03) 60%,rgba(255,255,255,.06)) padding-box,var(--edge-glass) border-box;
  -webkit-backdrop-filter:blur(3px) saturate(1.15);backdrop-filter:url(#sk-lens) blur(1.5px) brightness(1.14) contrast(1.06) saturate(1.2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 3px 3px 10px rgba(255,255,255,.12),inset -6px -8px 18px rgba(0,0,0,.3),4px 8px 16px rgba(var(--sc),.35)}
.sk-glass .lens-pill:hover{background:linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.04) 60%,rgba(255,255,255,.08)) padding-box,var(--edge-glass) border-box}
.sk-glass .lens-pill::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.16),transparent 42%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.38),inset 1.5px 0 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(255,255,255,.1)}

/* bordes sin brillo: un filo parejo y apenas visible en todo el sistema */
:root{
  --edge:linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07));
  --edge-soft:linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.05));
}
.btn--primary{--edgeC:linear-gradient(#e4e4e4,#e4e4e4)}
.btn--ghost{--edgeC:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1))}
.btn--danger{--edgeC:linear-gradient(rgba(229,83,75,.3),rgba(229,83,75,.3))}