/* NexDesk Inventory — sistema visual "papel + barra oscura".
   Estructura inspirada en el panel del taller (papel claro, barra lateral
   oscura, tarjetas KPI, "el color solo avisa", numeros monoespaciados,
   radios de 10px y animaciones escalonadas) con la PALETA NexDesk:
   morado #B04CF0 como accion, naranja #FF7A2F como senal. */
/* Fuentes servidas por el propio panel (variables, subconjunto latino: cubre el español).
   Antes se pedían a Google Fonts: dependencia externa, IP de cada usuario enviada a un
   tercero y una excepción más en la CSP. Licencia SIL OFL 1.1 (fonts/LICENCIAS.txt). */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/inter-latin.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url('fonts/jetbrainsmono-latin.woff2') format('woff2');}

:root{
  /* Papel y tinta (neutros frios, ni negro ni blanco puros) */
  --bg:#f2f3f6; --panel:#ffffff; --panel2:#f6f7f9; --panel3:#eef0f3;
  --border:#e6e8ec; --border2:#dfe2e7;
  --text:#171a20; --sub:#5a6069; --sub2:#959ba6;
  /* Barra lateral (tinta NexDesk) */
  --bar:#0e0f14; --bar2:#15171e; --bar-line:#20232c; --bar-tx:#a4aab4; --bar-mut:#6b7280;
  /* Acentos NexDesk — el color avisa, no decora */
  --neon:#b04cf0; --neon2:#8b2fd6; --neon-soft:rgba(176,76,240,.12);
  --orange:#ff7a2f; --orange2:#e0561f; --orange-soft:rgba(255,122,47,.14);
  --green:#12a150; --green-dot:#2fbf71; --green-soft:rgba(18,161,80,.13);
  --red:#df3f4b; --red-soft:rgba(223,63,75,.12);
  --amber:#b7791f; --amber-soft:rgba(240,161,32,.16);
  --radius:10px;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --sans:"Inter",system-ui,"Segoe UI",sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 14px 30px -18px rgba(20,22,30,.4);
  color-scheme:light;
}

/* ===================== Modo oscuro ===================== */
:root[data-theme="dark"]{
  --bg:#0a0b10; --panel:#14151d; --panel2:#1a1c25; --panel3:#22242f;
  --border:#262933; --border2:#333744;
  --text:#e8eaf0; --sub:#a2a9b6; --sub2:#6e7686;
  --bar:#0d0e13; --bar2:#171922; --bar-line:#242732; --bar-tx:#aab0bc; --bar-mut:#6e7686;
  --neon-soft:rgba(176,76,240,.20); --orange-soft:rgba(255,122,47,.18);
  --green-soft:rgba(47,191,113,.16); --red-soft:rgba(223,63,75,.18); --amber-soft:rgba(240,161,32,.16);
  --amber:#e0a63a; --green:#2fbf71; --neon2:#c081f5;
  --shadow:0 16px 34px -20px rgba(0,0,0,.75);
  color-scheme:dark;
}
:root[data-theme="dark"] .dnode.off,
:root[data-theme="dark"] .dot.off{background:#3a3f4c}
.theme-anim,.theme-anim *{transition:background-color .3s var(--ease), border-color .3s var(--ease), color .2s var(--ease) !important}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:14px; -webkit-font-smoothing:antialiased}
a{color:var(--neon2); text-decoration:none}
a:hover{color:var(--orange2)}

/* ===================== Animaciones ===================== */
@keyframes riseIn{from{opacity:0; transform:translateY(11px)} to{opacity:1; transform:none}}
@keyframes blurIn{from{opacity:0; filter:blur(7px); transform:translateY(6px)} to{opacity:1; filter:blur(0); transform:none}}
@keyframes slideIn{from{opacity:0; transform:translateX(-10px)} to{opacity:1; transform:none}}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(47,191,113,.5)} 70%{box-shadow:0 0 0 6px rgba(47,191,113,0)} 100%{box-shadow:0 0 0 0 rgba(47,191,113,0)}}

/* ===================== Estructura ===================== */
.app{display:flex; min-height:100vh}

/* Barra lateral */
.side{width:250px; flex:none; background:var(--bar); color:var(--bar-tx);
  border-right:1px solid var(--bar-line); display:flex; flex-direction:column;
  padding:20px 0; position:sticky; top:0; height:100vh}
.side-brand{display:flex; align-items:center; gap:11px; padding:0 20px 22px;
  font-weight:700; font-size:16px; color:#fff; letter-spacing:-.2px}
.side-brand b{color:var(--bar-mut); font-weight:500}
.side-brand .logo{display:inline-grid; place-items:center; width:34px; height:34px;
  border-radius:9px; background:linear-gradient(135deg,var(--neon),#7c22c9);
  color:#fff; font-weight:800; font-size:18px; box-shadow:0 6px 18px -6px rgba(176,76,240,.8)}
.side-sec{padding:0 20px 8px; font-size:10px; letter-spacing:1.4px; color:var(--bar-mut); text-transform:uppercase}
.side-search{padding:0 12px 14px}
.side-search input{width:100%; box-sizing:border-box; background:var(--bar2); border:1px solid var(--bar-line); color:var(--bar-tx); border-radius:9px; padding:8px 11px; font-size:13px}
.side-search input::placeholder{color:var(--bar-mut)}
.side-search input:focus{outline:none; border-color:var(--neon); box-shadow:0 0 0 3px rgba(176,76,240,.15)}
.side-nav{display:flex; flex-direction:column; gap:2px; padding:0 12px}
.navlink{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px;
  color:var(--bar-tx); font-size:14px; font-weight:500;
  animation:slideIn .45s var(--ease) backwards; transition:background .18s, color .18s, transform .18s}
.navlink svg{width:17px; height:17px; flex:none; stroke:currentColor}
.navlink:hover{background:var(--bar2); color:#fff; transform:translateX(3px)}
.navlink.on{background:linear-gradient(90deg,rgba(176,76,240,.22),rgba(176,76,240,.04));
  color:#e9d7fb; font-weight:600; box-shadow:inset 2px 0 0 var(--neon)}
.side-nav .navlink:nth-child(1){animation-delay:.04s}
.side-nav .navlink:nth-child(2){animation-delay:.08s}
.side-nav .navlink:nth-child(3){animation-delay:.12s}
.side-nav .navlink:nth-child(4){animation-delay:.16s}
.side-nav .navlink:nth-child(5){animation-delay:.20s}
.side-nav .navlink:nth-child(6){animation-delay:.24s}
.side-nav .navlink:nth-child(7){animation-delay:.28s}
.side-nav .navlink:nth-child(8){animation-delay:.32s}
.side-foot{margin-top:auto; padding:14px 12px 0}
.side-foot .me{display:flex; align-items:center; gap:11px; padding:11px; border-radius:12px;
  background:var(--bar2); border:1px solid var(--bar-line)}
.side-foot .av{width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--neon),#7c22c9); color:#fff; font-weight:800; font-size:15px;
  box-shadow:0 6px 16px -8px rgba(176,76,240,.8)}
.side-foot .who{display:flex; flex-direction:column; line-height:1.3; min-width:0}
.side-foot .who b{color:#fff; font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.side-foot .who small{color:var(--bar-mut); font-size:11.5px; font-family:var(--mono);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.side-foot .who small em{font-style:normal; color:#c9b6ee; font-weight:600}
.me-actions{display:flex; gap:6px; margin-top:8px}
.me-btn{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 6px; border-radius:9px; border:1px solid var(--bar-line); background:transparent;
  color:var(--bar-tx); font-size:12px; font-weight:600; font-family:var(--sans); cursor:pointer;
  transition:background .16s, color .16s, border-color .16s, transform .16s}
.me-btn svg{width:15px; height:15px; stroke:currentColor; fill:none}
.me-btn:hover{background:var(--bar2); color:#fff; transform:translateY(-1px)}
.me-btn.danger:hover{color:#ff8f6b; border-color:rgba(223,63,75,.5)}
#themeBtn{flex:none; width:38px; padding:8px 0}
#themeBtn .moon{display:none} :root[data-theme="dark"] #themeBtn .sun{display:none}
:root[data-theme="dark"] #themeBtn .moon{display:inline}

/* Contenido */
.content{flex:1; min-width:0; display:flex; flex-direction:column}
.wrap{width:100%; max-width:1240px; margin:0 auto; padding:30px 34px}
.foot{color:var(--sub2); text-align:center; padding:10px 24px 28px; font-size:12px}
.flash{background:var(--green-soft); border:1px solid rgba(18,161,80,.3); color:var(--green);
  padding:11px 15px; border-radius:var(--radius); margin-bottom:18px; font-weight:600;
  animation:riseIn .4s var(--ease) both}

/* Titulos */
h1{font-size:23px; font-weight:800; letter-spacing:-.4px; margin:0 0 20px; color:var(--text);
  animation:blurIn .55s var(--ease) both}
h1::after{content:""; display:block; width:44px; height:3px; border-radius:3px; margin-top:9px;
  background:linear-gradient(90deg,var(--neon),var(--orange))}
h2{font-size:15px; font-weight:700; margin:0 0 14px; color:var(--text)}
h2 svg{width:18px; height:18px; vertical-align:-3px; stroke:var(--neon2); fill:none}

/* ===================== Tarjetas KPI ===================== */
.grid{display:grid; gap:16px}
.cards{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.card{position:relative; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px 20px; overflow:hidden;
  animation:riseIn .5s var(--ease) backwards;
  transition:transform .22s var(--ease), box-shadow .22s, border-color .22s}
.card:hover{transform:translateY(-3px); border-color:var(--border2);
  box-shadow:0 14px 30px -18px rgba(20,22,30,.4)}
.cards .card:nth-child(1){animation-delay:.06s}
.cards .card:nth-child(2){animation-delay:.12s}
.cards .card:nth-child(3){animation-delay:.18s}
.cards .card:nth-child(4){animation-delay:.24s}
.cards .card:nth-child(5){animation-delay:.30s}
.card .k{color:var(--sub); font-size:12px; text-transform:uppercase; letter-spacing:.6px; font-weight:600}
.card .v{font-family:var(--mono); font-size:30px; font-weight:700; margin-top:8px; letter-spacing:-1px; color:var(--text)}
.card .v.green{color:var(--green)} .card .v.orange{color:var(--orange2)} .card .v.neon{color:var(--neon2)}

/* ===================== Modulos y tablas ===================== */
.panel{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 22px; margin-bottom:18px; animation:riseIn .5s var(--ease) both}
/* Nada de marcos dentro de marcos: sub-bloques sin marco propio */
.panel .panel{border:0; padding:0; margin:0; background:transparent; animation:none}
table{width:100%; border-collapse:collapse}
th,td{text-align:left; padding:12px 12px; border-bottom:1px solid var(--border)}
th{color:var(--sub); font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; font-weight:600}
tbody tr{transition:background .16s}
tbody tr:hover td{background:var(--panel2)}
tbody tr:last-child td{border-bottom:0}
tbody tr{animation:riseIn .45s var(--ease) both}
tbody tr:nth-child(1){animation-delay:.05s} tbody tr:nth-child(2){animation-delay:.10s}
tbody tr:nth-child(3){animation-delay:.15s} tbody tr:nth-child(4){animation-delay:.20s}
tbody tr:nth-child(5){animation-delay:.25s} tbody tr:nth-child(6){animation-delay:.30s}
tbody tr:nth-child(7){animation-delay:.35s} tbody tr:nth-child(8){animation-delay:.40s}
.mono{font-family:var(--mono)}

/* Estado en vivo */
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:middle}
.dot.on{background:var(--green-dot); animation:pulseDot 2s ease-out infinite}
.dot.off{background:#c3c8d1}

/* Insignias — el color avisa */
.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; font-family:var(--mono)}
.badge.active{background:var(--green-soft); color:var(--green)}
.badge.pending{background:var(--amber-soft); color:var(--amber)}
.badge.open{background:var(--neon-soft); color:var(--neon2)}
.badge.in_progress{background:var(--amber-soft); color:var(--amber)}
.badge.closed{background:var(--panel3); color:var(--sub2)}
.badge.high{background:var(--red-soft); color:var(--red)}
.badge.med{background:var(--amber-soft); color:var(--amber)}
.badge.low{background:var(--panel3); color:var(--sub2)}

/* ===================== Botones (accion = morado) ===================== */
.btn{display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:var(--radius);
  border:0; cursor:pointer; font-weight:600; font-family:var(--sans); font-size:13px; color:#fff;
  background:var(--neon); box-shadow:0 6px 16px -8px rgba(176,76,240,.7);
  transition:transform .16s var(--spring), box-shadow .18s, background .18s, filter .18s}
.btn:hover{background:var(--neon2); transform:translateY(-1px); color:#fff;
  box-shadow:0 10px 22px -8px rgba(176,76,240,.75)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent; border:1px solid var(--border2); color:var(--text); box-shadow:none}
.btn.ghost:hover{background:var(--panel2); border-color:#cfd3da; color:var(--text)}
.btn.orange{background:var(--orange); box-shadow:0 6px 16px -8px rgba(255,122,47,.7)}
.btn.orange:hover{background:var(--orange2)}
.btn.sm{padding:6px 12px; font-size:12px}

/* ===================== Formularios ===================== */
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.spacer{flex:1}
input,select,textarea{background:var(--panel); border:1px solid var(--border2); color:var(--text);
  border-radius:9px; padding:9px 12px; font-family:var(--sans); font-size:14px; width:100%;
  transition:border-color .18s, box-shadow .18s}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--neon);
  box-shadow:0 0 0 3px var(--neon-soft)}
label{display:block; color:var(--sub); font-size:12px; margin:12px 0 5px; font-weight:600}
.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.search{max-width:320px}

/* ===================== Login ===================== */
.login{max-width:380px; margin:9vh auto; background:var(--panel); border:1px solid var(--border);
  border-radius:16px; padding:32px; box-shadow:0 30px 60px -30px rgba(20,22,30,.25);
  animation:riseIn .5s var(--ease) both}
.login .brand{justify-content:center; margin-bottom:20px; display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:18px}
.login .brand .logo{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:9px;
  background:linear-gradient(135deg,var(--neon),#7c22c9); color:#fff; font-weight:800;
  box-shadow:0 6px 18px -6px rgba(176,76,240,.8)}
.login .brand .sub{color:var(--sub); font-weight:500; font-size:13px}

/* Ficha de equipo */
.detail-head{display:flex; align-items:center; gap:14px; margin-bottom:18px; animation:blurIn .5s var(--ease) both}
.detail-head .idnum{font-family:var(--mono); font-size:26px; font-weight:700; color:var(--text); letter-spacing:-.5px}
kbd{font-family:var(--mono); background:var(--panel3); border:1px solid var(--border2);
  border-radius:6px; padding:2px 8px; color:var(--text)}

/* ===================== Barra de empresa (impersonación, solo admin) ===================== */
.imp-bar{position:sticky; top:0; z-index:950; display:flex; align-items:center; gap:12px;
  padding:10px 34px; font-size:13px; color:#fff;
  background:linear-gradient(90deg,#7c22c9,#b04cf0);
  box-shadow:0 8px 22px -14px rgba(176,76,240,.9); animation:riseIn .35s var(--ease) both}
.imp-bar .imp-ico{width:18px; height:18px; flex:none; stroke:#fff; fill:none; opacity:.9}
.imp-bar b{font-weight:700}
.imp-bar .imp-exit{margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); color:#fff;
  padding:7px 14px; border-radius:9px; font-weight:700; font-size:12.5px; cursor:pointer;
  transition:background .16s, transform .16s}
.imp-bar .imp-exit svg{width:15px; height:15px; stroke:currentColor; fill:none}
.imp-bar .imp-exit:hover{background:rgba(255,255,255,.28); color:#fff; transform:translateY(-1px)}

/* ===================== Notificaciones flotantes (toasts, abajo derecha) ===================== */
.nx-toasts{position:fixed; bottom:20px; right:20px; z-index:1200; display:flex; flex-direction:column-reverse;
  gap:12px; width:340px; max-width:calc(100vw - 32px); pointer-events:none}
.nx-toast{pointer-events:auto; position:relative; display:flex; align-items:flex-start; gap:12px;
  background:var(--panel); border:1px solid var(--border2); border-radius:14px; padding:13px 14px 13px 16px;
  box-shadow:0 20px 44px -20px rgba(10,12,20,.6), 0 2px 6px -4px rgba(10,12,20,.4);
  font-size:13px; overflow:hidden; animation:nxToastIn .42s var(--spring) both}
.nx-toast::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--sub2)}
.nx-toast.ok::before{background:var(--green)} .nx-toast.info::before{background:var(--neon)}
.nx-toast.warn::before{background:var(--red)}
.nx-toast.hide{animation:nxToastOut .3s var(--ease) forwards}
.nx-toast-ico{width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center;
  background:var(--panel3); color:var(--sub)}
.nx-toast-ico svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2}
.nx-toast.ok .nx-toast-ico{background:var(--green-soft); color:var(--green)}
.nx-toast.info .nx-toast-ico{background:var(--neon-soft); color:var(--neon2)}
.nx-toast.warn .nx-toast-ico{background:var(--red-soft); color:var(--red)}
.nx-toast-body{flex:1; color:var(--text); line-height:1.4; padding-top:1px}
.nx-toast-body b{color:var(--text); font-weight:700}
.nx-toast-body a{display:inline-block; margin-top:3px; font-weight:700; color:var(--neon2); white-space:nowrap}
.nx-toast-body a:hover{color:var(--orange2)}
.nx-toast-x{background:none; border:0; color:var(--sub2); font-size:18px; line-height:1; cursor:pointer;
  padding:0 2px; align-self:flex-start; transition:color .16s, transform .16s}
.nx-toast-x:hover{color:var(--text); transform:scale(1.15)}
@keyframes nxToastIn{from{opacity:0; transform:translateX(30px) scale(.96)} to{opacity:1; transform:none}}
@keyframes nxToastOut{to{opacity:0; transform:translateX(30px) scale(.96)}}

/* ===================== Analítica (gráficas simples) ===================== */
@keyframes hgrow{from{transform:scaleX(0)}}
.bars{display:flex; align-items:flex-end; gap:6px; height:170px; margin-top:8px}
.bars .bar{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%}
.bars .bar span{width:100%; max-width:24px; background:linear-gradient(180deg,var(--neon),var(--neon2)); border-radius:5px 5px 0 0; transition:height .6s var(--ease)}
.bars .bar small{color:var(--sub2); font-size:10px; margin-top:6px}
.hbar{display:grid; grid-template-columns:140px 1fr 42px; align-items:center; gap:10px; margin:8px 0; font-size:13px}
.hbar-l{color:var(--sub); text-transform:capitalize; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hbar-t{height:10px; background:var(--panel3); border-radius:6px; overflow:hidden}
.hbar-t i{display:block; height:100%; background:linear-gradient(90deg,var(--orange),#ffb07a); border-radius:6px; transform-origin:left; animation:hgrow .9s var(--ease)}
.hbar-n{text-align:right; font-family:var(--mono); color:var(--sub)}

/* ===================== Componentes agrupados ===================== */
.comp-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.comp-grp h3{font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--sub); margin:0 0 8px; display:flex; align-items:center; gap:8px}
.comp-grp h3 span{background:var(--panel3); color:var(--sub); border-radius:999px; padding:1px 8px; font-size:11px}
.comp-item{padding:8px 0; border-bottom:1px solid var(--border); font-size:13px}
.comp-item:last-child{border-bottom:0}
.comp-item b{font-weight:600; display:block}
.comp-item span{color:var(--sub2); font-size:12px}

/* ===================== Alertas ===================== */
.panel-alerts{border:0; padding:0; background:transparent; margin-bottom:18px}
.alerts-head{display:flex; align-items:center; gap:9px; margin:0 0 12px}
.alerts-head h2{margin:0}
.alerts-head .cnt{font-family:var(--mono); font-size:11px; font-weight:700; color:var(--red);
  background:var(--red-soft); border-radius:999px; padding:2px 9px}
.alerts{display:flex; flex-direction:column; gap:10px}
.alert-row{display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:12px; font-size:13.5px;
  background:var(--panel); border:1px solid var(--border); border-left:4px solid var(--sub2);
  box-shadow:var(--shadow); animation:riseIn .45s var(--ease) backwards;
  transition:transform .18s var(--ease), box-shadow .18s}
.alert-row:hover{transform:translateX(3px)}
.alert-ico{width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; color:var(--sub)}
.alert-ico svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2}
.alert-tx{flex:1; color:var(--text); font-weight:500}
.alert-row.danger{border-left-color:var(--red)} .alert-row.danger .alert-ico{background:var(--red-soft); color:var(--red)}
.alert-row.warn{border-left-color:var(--amber)} .alert-row.warn .alert-ico{background:var(--amber-soft); color:var(--amber)}
.alert-row.info{border-left-color:var(--neon)} .alert-row.info .alert-ico{background:var(--neon-soft); color:var(--neon2)}

/* ===================== Vista árbol (tablas y subtablas) ===================== */
.tree-suc{border-top:1px solid var(--border); margin-top:6px}
.tree-suc:first-of-type{border-top:0}
.tree-suc>summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  padding:12px 4px; font-weight:600; color:var(--text); user-select:none}
.tree-suc>summary::-webkit-details-marker{display:none}
.tree-suc>summary::before{content:""; width:0; height:0; border-left:6px solid var(--sub2);
  border-top:5px solid transparent; border-bottom:5px solid transparent; transition:transform .2s}
.tree-suc[open]>summary::before{transform:rotate(90deg)}
.tree-suc>summary .tree-suc-name{margin-right:auto}
.tree-suc table{margin:0 0 8px}
.tree-suc td,.tree-suc th{padding:9px 12px}

/* ===================== Vista diagrama de flujo ===================== */
.suc-inline{margin:0}
.suc-inline select{padding:6px 8px; font-size:12px; width:auto; min-width:118px}
details.panel>summary{list-style:none}
details.panel>summary::-webkit-details-marker{display:none}

.diag-toolbar{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--panel)}
.diag-toolbar span{color:var(--sub2); font-size:13px}
.diag-canvas{position:relative; height:72vh; min-height:520px; overflow:hidden; cursor:grab;
  background: radial-gradient(1100px 560px at 28% -5%, rgba(176,76,240,.18), transparent 60%), #08070e}
.diag-canvas.grabbing{cursor:grabbing}
.diag-wrap:fullscreen{background:#08070e; border-radius:0; display:flex; flex-direction:column; border:0}
.diag-wrap:fullscreen .diag-toolbar{background:#0e0f14}
.diag-wrap:fullscreen .diag-canvas{flex:1; height:auto; min-height:0}
.diag-wrap:-webkit-full-screen{display:flex; flex-direction:column}
.diag-wrap:-webkit-full-screen .diag-canvas{flex:1; height:auto}
/* Mapa a pantalla completa por defecto: cubre el viewport, sin barra blanca; los
   controles flotan SOBRE el mapa. */
.diag-fullpage{position:fixed; inset:0; z-index:900; margin:0; border:0; border-radius:0; background:#08070e}
.imp-bar ~ .wrap .diag-fullpage{top:46px}
.diag-fullpage .diag-canvas{position:absolute; inset:0; height:auto; min-height:0}
.diag-fullpage .diag-toolbar{position:absolute; top:0; left:0; right:0; z-index:5; background:transparent; border:0; padding:14px 16px; pointer-events:none}
.diag-fullpage .diag-toolbar > *{pointer-events:auto}
.diag-fullpage .diag-toolbar span{pointer-events:none; color:#8b8fa3; text-shadow:0 1px 3px #000}
.diag-fullpage .diag-toolbar .btn{background:rgba(18,18,26,.8); color:#e7e9ee; border:1px solid #2c2542; box-shadow:0 6px 16px -8px #000}
.diag-fullpage .diag-toolbar .btn:hover{border-color:var(--neon); color:#fff}
.diag-fullpage .diag-toolbar #diagFull{background:var(--neon); border-color:transparent; color:#fff}
.diag-world{position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform}
.diag-svg{position:absolute; top:0; left:0; overflow:visible; pointer-events:none}
.diag-svg path{fill:none}
/* Conectores estáticos (sin animación ni glow, por rendimiento) */
.diag-svg path.diag-edge{stroke:rgba(176,76,240,.55); stroke-width:2; stroke-linecap:round}
.dwrap{position:absolute; transform:translate(-50%,-50%)}
.dnode{box-sizing:border-box; border-radius:12px; padding:10px 15px; text-align:center;
  animation:nodeIn .5s var(--spring) both}
@keyframes nodeIn{from{opacity:0; transform:scale(.4)}to{opacity:1; transform:scale(1)}}
.dnode .t{white-space:nowrap} .dnode .s{white-space:nowrap}
.dnode.sucursal{position:relative; min-width:150px; color:#fff;
  background:linear-gradient(135deg,#7c22c9,#b04cf0);
  box-shadow:0 0 0 6px rgba(176,76,240,.14), 0 14px 34px -12px rgba(176,76,240,.75)}
.dnode.sucursal .t{font-weight:800; font-size:15px}
.dnode.sucursal .s{font-size:11px; opacity:.85; margin-top:2px}
.dnode.sucursal::after{content:""; position:absolute; inset:-5px; border-radius:15px;
  border:1px solid rgba(176,76,240,.4); pointer-events:none} /* anillo estático, sin animación */
.dnode.computer{min-width:142px; cursor:pointer; color:#e7e9ee; background:#14131d;
  border:1px solid #2c2542; box-shadow:0 10px 24px -16px #000; transition:border-color .16s, box-shadow .16s, transform .16s}
.dnode.computer:hover{border-color:var(--neon); box-shadow:0 0 0 3px rgba(176,76,240,.3)}
.dnode.computer.sel{border-color:var(--neon); box-shadow:0 0 0 3px rgba(176,76,240,.5)}
.dnode.computer .t{font-weight:700; font-size:13px; color:#fff}
.dnode.computer .s{font-size:11px; color:#9aa1ad; margin-top:2px}
.dnode .cdot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px}
.dnode .cdot.on{background:#2fbf71; box-shadow:0 0 8px #2fbf71}
.dnode .cdot.off{background:#5a5570}
.diag-panel{position:absolute; top:14px; right:14px; width:290px; max-height:calc(100% - 28px); overflow:auto;
  background:#14131d; border:1px solid #2c2542; color:#e7e9ee; border-radius:12px; padding:18px;
  box-shadow:0 24px 60px -24px #000; z-index:5; animation:riseIn .28s var(--ease) both}
.diag-panel h3{margin:0 0 3px; font-size:17px; color:#fff}
.diag-panel .idsub{font-family:var(--mono); font-size:12px; color:#8b8fa3; margin-bottom:12px}
.diag-panel .kv{display:grid; grid-template-columns:74px 1fr; gap:2px 10px; font-size:13px; margin-bottom:3px}
.diag-panel .kv b{color:#8b8fa3; font-weight:600; font-size:11px; text-transform:uppercase; align-self:center}
.diag-panel .actions{display:flex; gap:8px; margin-top:14px}
.diag-panel .x{position:absolute; top:10px; right:12px; cursor:pointer; color:#8b8fa3; font-size:18px; line-height:1}
.diag-panel .btn.ghost{color:#e7e9ee; border-color:#3a3350}
.diag-panel .btn.ghost:hover{background:#1d1b28; border-color:var(--neon); color:#fff}
.diag-empty{position:absolute; inset:0; display:grid; place-items:center; color:#8b8fa3}
.diag-hover{position:absolute; width:270px; background:#14131d; border:1px solid #2c2542; color:#e7e9ee;
  border-radius:12px; padding:16px; box-shadow:0 24px 60px -24px #000; z-index:6; animation:riseIn .18s var(--ease) both}
.diag-hover h3{margin:0 0 3px; font-size:16px; color:#fff}
.diag-hover .idsub{font-family:var(--mono); font-size:11px; color:#8b8fa3; margin-bottom:10px}
.diag-hover .kv{display:grid; grid-template-columns:66px 1fr; gap:2px 10px; font-size:12.5px; margin-bottom:2px}
.diag-hover .kv b{color:#8b8fa3; font-weight:600; font-size:10px; text-transform:uppercase; align-self:center}
.diag-hover .mini2{display:flex; gap:8px; margin:8px 0 2px}
.diag-hover .mini2 span{font-size:11px; background:#211d33; color:#c9b6ee; border-radius:6px; padding:3px 8px; font-family:var(--mono)}
.diag-hover .actions{display:flex; gap:8px; margin-top:12px}
.diag-hover .btn.ghost{color:#e7e9ee; border-color:#3a3350}
.diag-hover .btn.ghost:hover{background:#1d1b28; border-color:var(--neon); color:#fff}

/* ===================== Estado vacío ===================== */
.empty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  padding:44px 20px; animation:riseIn .5s var(--ease) both}
.empty .empty-ico{width:60px; height:60px; border-radius:16px; display:grid; place-items:center;
  background:var(--neon-soft); color:var(--neon2); margin-bottom:6px}
.empty .empty-ico svg{width:30px; height:30px; stroke:currentColor; fill:none; stroke-width:1.6}
.empty b{font-size:16px; color:var(--text)}
.empty p{margin:0; color:var(--sub2); max-width:380px; line-height:1.5}
.empty .btn{margin-top:12px}

/* ===================== Árbol de usuarios (empresa → sucursal → usuario) ===================== */
.utree{display:flex; flex-direction:column; gap:12px}
.tree-emp{border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--panel);
  animation:riseIn .45s var(--ease) both}
.tree-emp>summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:11px;
  padding:14px 16px; font-weight:700; color:var(--text); user-select:none; background:var(--panel2)}
.tree-emp>summary::-webkit-details-marker{display:none}
.tree-emp>summary .chev{width:0; height:0; border-left:6px solid var(--sub2);
  border-top:5px solid transparent; border-bottom:5px solid transparent; transition:transform .2s; flex:none}
.tree-emp[open]>summary .chev{transform:rotate(90deg)}
.tree-emp>summary .emp-ico{width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:var(--neon-soft); color:var(--neon2)}
.tree-emp>summary .emp-ico svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2}
.tree-emp>summary .count{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--sub);
  background:var(--panel3); border-radius:999px; padding:3px 10px; font-weight:700}
.tree-body{padding:6px 16px 14px}
.tree-sub{margin-top:6px}
.tree-sub>summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px;
  padding:9px 4px 9px 6px; font-weight:600; color:var(--sub); font-size:12.5px; user-select:none;
  text-transform:uppercase; letter-spacing:.4px}
.tree-sub>summary::-webkit-details-marker{display:none}
.tree-sub>summary .chev{width:0; height:0; border-left:5px solid var(--sub2);
  border-top:4px solid transparent; border-bottom:4px solid transparent; transition:transform .2s; flex:none}
.tree-sub[open]>summary .chev{transform:rotate(90deg)}
.tree-sub>summary .count{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--sub2); letter-spacing:0}
.tree-grp-lbl{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--sub2);
  font-weight:700; padding:8px 6px 4px}
.urow{display:flex; align-items:center; gap:12px; padding:10px 6px 10px 10px; border-top:1px solid var(--border)}
.urow:first-child{border-top:0}
.urow .uav{width:32px; height:32px; flex:none; border-radius:9px; display:grid; place-items:center;
  color:#fff; font-weight:700; font-size:13px; background:linear-gradient(135deg,var(--sub),#8a90a0)}
.urow.r-admin .uav{background:linear-gradient(135deg,var(--neon),#7c22c9)}
.urow.r-soporte .uav{background:linear-gradient(135deg,var(--orange),#e0561f)}
.urow.r-empleado .uav{background:linear-gradient(135deg,#4a94e0,#2f6fbf)}
.urow .uinfo{min-width:0; display:flex; flex-direction:column; line-height:1.3}
.urow .uinfo b{font-size:13.5px; color:var(--text)}
.urow .uinfo small{font-family:var(--mono); font-size:11.5px; color:var(--sub2)}
.urow .badge{margin-left:4px}
.urow .uact{margin-left:auto; display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.urow .uact input{width:150px}
.urow{flex-wrap:wrap}
.urow .uedit > summary{list-style:none; cursor:pointer}
.urow .uedit > summary::-webkit-details-marker{display:none}
.urow .uedit[open]{flex-basis:100%; display:flex; flex-direction:column; align-items:flex-end}
.urow .uedit select{width:auto; max-width:220px}
.badge.role-admin{background:var(--neon-soft); color:var(--neon2)}
.badge.role-soporte{background:var(--orange-soft); color:var(--orange2)}
.badge.role-empleado{background:var(--panel3); color:var(--sub)}

/* ===================== Tickets ===================== */
.tk-stats{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.tk-chip{display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:11px;
  border:1px solid var(--border); background:var(--panel); font-size:13px; font-weight:600; color:var(--sub);
  animation:riseIn .45s var(--ease) both}
.tk-chip b{font-family:var(--mono); font-size:17px; color:var(--text)}
.tk-chip .d{width:9px; height:9px; border-radius:50%; background:var(--sub2)}
.tk-chip.open .d{background:var(--neon)} .tk-chip.prog .d{background:var(--amber)} .tk-chip.closed .d{background:var(--green)}
.tk-list{display:flex; flex-direction:column}
.tk-item{display:flex; align-items:center; gap:14px; padding:14px 12px; border-bottom:1px solid var(--border);
  transition:background .16s; animation:riseIn .4s var(--ease) both}
.tk-item:last-child{border-bottom:0}
.tk-item:hover{background:var(--panel2)}
.tk-pri{width:6px; align-self:stretch; border-radius:6px; flex:none; background:var(--sub2)}
.tk-pri.high{background:var(--red)} .tk-pri.med{background:var(--amber)} .tk-pri.low{background:var(--green-dot)}
.tk-main{flex:1; min-width:0}
.tk-main .tk-title{font-weight:700; color:var(--text); font-size:14.5px}
.tk-main .tk-sub{color:var(--sub2); font-size:12.5px; margin-top:2px}
.tk-meta{text-align:right; white-space:nowrap; display:flex; flex-direction:column; align-items:flex-end; gap:5px}
.tk-meta .tk-time{font-family:var(--mono); font-size:11.5px; color:var(--sub2)}
/* Conversación del ticket */
.tk-msg{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px 16px;
  margin-bottom:12px; animation:riseIn .4s var(--ease) both}
.tk-msg .tk-msg-head{display:flex; align-items:center; gap:8px; margin-bottom:7px}
.tk-msg .tk-msg-head .uav{width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--neon),#7c22c9); color:#fff; font-weight:700; font-size:11px; flex:none}
.tk-msg .tk-msg-head b{font-size:13px; color:var(--text)}
.tk-msg .tk-msg-head small{font-family:var(--mono); font-size:11px; color:var(--sub2); margin-left:auto}
.tk-msg .tk-msg-body{color:var(--text); line-height:1.5; font-size:13.5px}
.tk-desc{background:var(--panel2); border:1px dashed var(--border2); border-radius:12px; padding:16px;
  color:var(--text); line-height:1.55; margin-bottom:16px}

/* ===================== Responsive ===================== */
/* Hamburguesa + backdrop (ocultos en escritorio) */
.nav-burger{display:none; position:fixed; top:calc(env(safe-area-inset-top,0px) + 10px); left:12px; z-index:1001;
  width:42px; height:42px; border:1px solid var(--border2); border-radius:11px; background:var(--panel);
  color:var(--text); cursor:pointer; align-items:center; justify-content:center; box-shadow:var(--shadow)}
.nav-burger svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2}
.nav-backdrop{display:none; position:fixed; inset:0; z-index:999; background:rgba(6,7,12,.5);
  opacity:0; transition:opacity .25s var(--ease)}

@media (max-width:860px){
  .app{flex-direction:column}
  /* Barra lateral como cajón deslizante (off-canvas) */
  .side{position:fixed; top:0; left:0; height:100vh; width:270px; max-width:84vw; z-index:1000;
    transform:translateX(-100%); transition:transform .28s var(--ease); overflow-y:auto;
    padding:20px 0; flex-direction:column}
  body.nav-open .side{transform:none; box-shadow:0 0 60px -10px rgba(0,0,0,.6)}
  body.nav-open .nav-backdrop{display:block; opacity:1}
  .nav-burger{display:inline-flex}
  .side-sec{display:block}
  .navlink span{display:inline}
  .side-foot{width:auto; margin-top:auto; padding:14px 12px 0}
  .content{width:100%}
  .wrap{padding:64px 16px 22px}
  .imp-bar{position:sticky; padding:10px 16px 10px 62px; font-size:12.5px}
  /* Tablas: scroll horizontal en vez de aplastarse */
  .panel table{display:block; width:100%; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch}
  .two{grid-template-columns:1fr}
  /* Mapa de red: paneles a ancho de pantalla, no cortados */
  .diag-panel,.diag-hover{width:auto; left:8px; right:8px; max-width:none}
  .diag-fullpage .diag-toolbar{padding-left:66px; flex-wrap:wrap}
  .urow{flex-wrap:wrap}
  .urow .uact{width:100%; margin-left:44px}
  .urow .uact input{flex:1; width:auto; min-width:0}
}
@media (max-width:560px){
  h1{font-size:20px}
  .wrap{padding:60px 12px 20px}
  .tk-item{gap:10px}
  .tk-meta{gap:3px}
  .nx-toasts{right:12px; left:12px; width:auto}
  .imp-bar{flex-wrap:wrap; gap:8px}
  .imp-bar .imp-exit{margin-left:0}
  .imp-bar ~ .wrap .diag-fullpage{top:84px}
  .me-actions{flex-wrap:wrap}
}

/* ===================== Cortina de transición entre páginas ===================== */
.tp-wipe{position:fixed; inset:0; z-index:9990; pointer-events:none; display:none;
  color:var(--tp-wipe-ink,#fff); grid-template-columns:auto minmax(0,auto);
  grid-template-rows:auto auto auto; align-content:center; justify-content:center;
  column-gap:clamp(.9rem,1.8vw,1.4rem); row-gap:.7rem; padding:0 4vw; overflow:hidden}
.tp-wipe::before,.tp-wipe::after{content:''; position:absolute; inset:0; will-change:clip-path;
  clip-path:polygon(0 0, 0 0, -22% 100%, 0 100%)}
.tp-wipe::before{background:var(--tp-wipe-ink2,#0e0f14)}
.tp-wipe::after{background:var(--tp-wipe,#b04cf0)}
.tp-wipe>*{position:relative; z-index:1}
.tp-wipe.in, html.tp-arriving .tp-wipe{display:grid}
.tp-wipe b{grid-column:2; grid-row:1; display:block; transform:translateY(16px); opacity:0;
  font:800 clamp(2.2rem,6vw,4.6rem)/1 var(--sans); letter-spacing:-.04em; text-transform:uppercase;
  white-space:nowrap; padding-bottom:.22em; max-width:84vw; overflow:hidden; text-overflow:ellipsis}
.tp-wipe b::after{content:''; position:absolute; left:0; bottom:0; height:.09em; width:34%;
  background:currentColor; transform:scaleX(0); transform-origin:left}
.tp-wipe b:empty{display:none}
.tp-wipe .tiles{grid-column:1; grid-row:1; align-self:center; display:grid;
  grid-template-columns:18px 18px; gap:4px; margin-bottom:.32em}
.tp-wipe .tiles s{display:block; width:18px; height:18px; opacity:0; transform:translateY(-12px);
  background:currentColor; clip-path:polygon(0 0,100% 0,100% 68%,68% 100%,0 100%)}
.tp-wipe small{grid-column:2; grid-row:2; display:block; opacity:0; transform:translateY(10px);
  font:600 clamp(.66rem,1.1vw,.86rem)/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tp-wipe small:empty{display:none}
.tp-wipe .bar{grid-column:2; grid-row:3; display:block; height:3px; width:100%;
  background:currentColor; opacity:.55; transform:scaleX(0); transform-origin:left; margin-top:.3rem}
.tp-wipe .idx{position:absolute; right:2.4vw; bottom:-.17em; z-index:0;
  font:700 18vw/1 var(--mono); letter-spacing:-.07em; color:currentColor; opacity:0;
  transform:translateY(.12em); pointer-events:none}
.tp-wipe .idx:empty{display:none}
.tp-wipe .tp-wipe-ico{grid-column:1; grid-row:1; align-self:center; display:none; line-height:1;
  color:currentColor; opacity:0; transform:translateY(-16px) scale(.88); margin-bottom:.22em}
.tp-wipe .tp-wipe-ico svg{width:clamp(2.6rem,6.4vw,4.6rem); height:clamp(2.6rem,6.4vw,4.6rem);
  stroke:currentColor; fill:none; stroke-width:2}
.tp-wipe.con-ico .tp-wipe-ico{display:block}
.tp-wipe.con-ico .tiles{display:none}
/* Salida */
.tp-wipe.in::before{animation:tpCurtainIn 115ms cubic-bezier(.65,0,.25,1) forwards}
.tp-wipe.in::after{animation:tpCurtainIn 115ms cubic-bezier(.65,0,.25,1) 18ms forwards}
.tp-wipe.in b{animation:tpLabelIn 150ms var(--ease) 70ms forwards}
.tp-wipe.in b::after{animation:tpLabelBar 160ms var(--ease) 120ms forwards}
.tp-wipe.in small{animation:tpLabelIn 150ms var(--ease) 110ms forwards}
.tp-wipe.in .bar{animation:tpBarFill 150ms linear 40ms forwards}
.tp-wipe.in .idx{animation:tpIdxIn 180ms var(--ease) 40ms forwards}
.tp-wipe.in .tiles s{animation:tpTileIn 140ms var(--ease) forwards}
.tp-wipe.in .tiles s:nth-child(1){animation-delay:50ms}.tp-wipe.in .tiles s:nth-child(2){animation-delay:80ms}
.tp-wipe.in .tiles s:nth-child(3){animation-delay:110ms}.tp-wipe.in .tiles s:nth-child(4){animation-delay:140ms}
.tp-wipe.in .tp-wipe-ico{animation:tpIcoIn 190ms var(--ease) 40ms forwards}
/* Llegada */
html.tp-arriving .tp-wipe::before,html.tp-arriving .tp-wipe::after{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
html.tp-arriving .tp-wipe::after{animation:tpCurtainOut 165ms cubic-bezier(.7,0,.2,1) 40ms forwards}
html.tp-arriving .tp-wipe::before{animation:tpCurtainOut 165ms cubic-bezier(.7,0,.2,1) 58ms forwards}
html.tp-arriving .tp-wipe b{opacity:1; transform:none; animation:tpLabelOut 150ms ease-in 60ms forwards}
html.tp-arriving .tp-wipe small{opacity:1; transform:none; animation:tpLabelOut 150ms ease-in 80ms forwards}
html.tp-arriving .tp-wipe .bar{transform:scaleX(1); animation:tpFadeOut 130ms ease-in 90ms forwards}
html.tp-arriving .tp-wipe .idx{opacity:.08; transform:none; animation:tpIdxOut 160ms ease-in 50ms forwards}
html.tp-arriving .tp-wipe .tiles s{opacity:1; transform:none; animation:tpTileOut 130ms ease-in forwards}
html.tp-arriving .tp-wipe .tiles s:nth-child(1){animation-delay:30ms}html.tp-arriving .tp-wipe .tiles s:nth-child(2){animation-delay:60ms}
html.tp-arriving .tp-wipe .tiles s:nth-child(3){animation-delay:90ms}html.tp-arriving .tp-wipe .tiles s:nth-child(4){animation-delay:120ms}
html.tp-arriving .tp-wipe .tp-wipe-ico{opacity:1; transform:none; animation:tpIcoOut 150ms ease-in 40ms forwards}
html.tp-arriving .content{animation:tpPageIn 210ms var(--ease) 70ms both}
html.tp-arriving .content:has(.diag-fullpage){animation:none}
@keyframes tpCurtainIn{to{clip-path:polygon(0 0, 122% 0, 100% 100%, 0 100%)}}
@keyframes tpCurtainOut{to{clip-path:polygon(100% 0, 122% 0, 122% 100%, 122% 100%)}}
@keyframes tpLabelIn{to{opacity:1; transform:none}}
@keyframes tpLabelBar{to{transform:scaleX(1)}}
@keyframes tpLabelOut{to{opacity:0; transform:translateY(-10px)}}
@keyframes tpBarFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tpFadeOut{to{opacity:0}}
@keyframes tpIdxIn{to{opacity:.08; transform:none}}
@keyframes tpIdxOut{to{opacity:0; transform:translateY(-.1em)}}
@keyframes tpTileIn{to{opacity:1; transform:none}}
@keyframes tpTileOut{to{opacity:0; transform:translateY(-12px)}}
@keyframes tpIcoIn{to{opacity:1; transform:none}}
@keyframes tpIcoOut{to{opacity:0; transform:translateY(-14px) scale(.9)}}
@keyframes tpPageIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  .navlink,.dnode{opacity:1 !important}
  .card:hover,.btn:hover,.navlink:hover{transform:none !important}
  .tp-wipe{display:none !important}
  html.tp-arriving .content{opacity:1 !important; transform:none !important}
}
@media print{ .tp-wipe{display:none !important} }

/* --- Login más tech (mejora de diseño 2026-10-11) --- */
body:has(.login){background:
  radial-gradient(1100px 620px at 50% -10%, rgba(176,76,240,.18), transparent 60%),
  radial-gradient(800px 500px at 90% 110%, rgba(255,122,47,.08), transparent 60%),
  var(--bg);}
.login{position:relative; overflow:hidden;
  box-shadow:0 28px 70px -28px rgba(20,8,45,.5), 0 2px 10px rgba(0,0,0,.06);}
.login::before{content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,#C95CFF,#8B2FE0 55%,#FF7A2F);}
.login .brand .logo{background:linear-gradient(135deg,#C95CFF,#6D28D9);
  box-shadow:0 10px 24px -8px rgba(176,76,240,.85);}
.login .btn{background:linear-gradient(135deg,#9A3CF0,#7C22C9); border:0;
  box-shadow:0 10px 24px -10px rgba(124,34,201,.9);}

/* --- Refinamientos de diseño 2026-10-11: botones con degradado --- */
.btn{background:linear-gradient(135deg,var(--neon),var(--neon2));}
.btn:hover{background:linear-gradient(135deg,#bb55f5,#7c22c9);}
.btn.orange{background:linear-gradient(135deg,var(--orange),var(--orange2));}
.btn.orange:hover{background:linear-gradient(135deg,#ff8a45,#cf4e1b);}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(176,76,240,.16);}

/* --- Interfaz interna: refinamientos 2026-10-11 --- */
.card{box-shadow:0 1px 2px rgba(20,22,30,.03), 0 10px 26px -20px rgba(20,22,30,.30);}
.card:hover{box-shadow:0 2px 4px rgba(20,22,30,.04), 0 18px 36px -20px rgba(176,76,240,.38);}
tbody tr{transition:background .12s;}
tbody tr:hover{background:var(--neon-soft);}
.badge{box-shadow:inset 0 0 0 1px rgba(0,0,0,.03);}

/* --- Toque de marca en páginas internas 2026-10-11 --- */
h1::after{background:linear-gradient(90deg,var(--neon),var(--orange)) !important; width:52px !important;}
.card{overflow:hidden;}
.card::before{content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--neon),var(--neon2)); opacity:0; transition:opacity .2s;}
.card:hover::before{opacity:1;}
.panel{box-shadow:0 1px 2px rgba(20,22,30,.03), 0 12px 30px -22px rgba(20,22,30,.3);}

/* --- Logo de marca (insignia monitor+N) en barra y login --- */
.side-brand img.logo, .login .brand img.logo{
  background:none !important; padding:0; border-radius:8px; object-fit:contain;
  box-shadow:0 8px 20px -10px rgba(176,76,240,.55);}