/* ============================================================
   LOBO · SKIN FULL BLACK — "Lobo nocturno + agua glacial"
   Se carga DESPUÉS de app.css y re-skinea por tokens: redefine las
   variables de :root (todo componente viejo adopta la paleta nueva)
   y pule los componentes clave. Cero cambios de lógica.
   Rollback: quitar el <link> de este archivo en layout.php.
   Isotipo: lobo "Brutal" (elegido 2026-08-18) via lobo_mark() en PHP.
   ============================================================ */

:root{
  /* Columna de agua → ahora columna de NOCHE (negro con bias frío) */
  --abisal:     #060708;
  --fosa:       #0A0C10;
  --media:      #0D1015;
  --fotica:     #10141A;
  --superficie: #141922;

  /* Marca intacta */
  --deep: #023C7F;
  --cel:  #6FA8DC;
  --aqua: #4FC3F7;

  /* Luz */
  --caustica: #9FE9FF;
  --sol:      #E9F9FF;
  --ink:      #EAF2FF;
  --mut:      #7E8DA2;
  --linea-luz:   rgba(159,233,255,.16);
  --linea-tenue: rgba(255,255,255,.055);

  /* Semánticos idénticos */
  --ok:   #43E5A0;
  --warn: #FFC94F;
  --bad:  #FF8B8B;

  /* Forma: de gota a arista limpia */
  --r-depth: 18px;
  --r-pool:  13px;
  --r-gota:  16px;

  /* Luz y sombra */
  --luz-top:  inset 0 1px 0 var(--linea-luz);
  --hundido:  0 30px 60px -32px rgba(0,0,0,.9);
  --brillo-bio: 0 0 44px -10px rgba(79,195,247,.5);
  --focus: 0 0 0 2px var(--abisal), 0 0 0 4px var(--aqua);

  --display: 'Sora','Poppins',system-ui,sans-serif;
  --texto:   'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:    'Sora','Poppins',system-ui,sans-serif;

  --rail-w: 242px;
}

/* ===== Lienzo ===== */
body.lobo-black{
  background: var(--abisal);
  background-image:
    radial-gradient(900px 500px at 84% -8%, rgba(79,195,247,.09), transparent 60%),
    radial-gradient(760px 620px at -12% 112%, rgba(2,60,127,.15), transparent 55%);
  background-attachment: fixed;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
body.lobo-black .caustics{ display:none; } /* la atmósfera vieja ya no hace falta */

body.lobo-black h1, body.lobo-black h2, body.lobo-black h3{
  font-family: var(--display); letter-spacing:-.02em; text-wrap: balance;
}
body.lobo-black ::selection{ background: rgba(79,195,247,.28); color:#fff; }

/* ============================================================
   SHELL: rail lateral + columna principal
   ============================================================ */
.shell{ display:flex; min-height:100vh; }
.rail{
  width: var(--rail-w); flex:none; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; padding:20px 14px 14px;
  background: linear-gradient(180deg, var(--fosa), var(--abisal));
  border-right:1px solid var(--linea-tenue);
  z-index: 20;
}
.rail .brand{ display:flex; align-items:center; gap:11px; padding:4px 8px 18px; }
.rail .brand .wolf{ filter: drop-shadow(0 0 10px rgba(79,195,247,.45)); }
.rail .brand .logo-img{ height:17px; width:auto; opacity:.96; }
.brand-sep{ width:1px; height:20px; background: var(--linea-luz); flex:none; }
.brand-sub{
  font-family: var(--display); font-weight:600; font-size:.62rem; letter-spacing:.4em;
  text-transform:uppercase; color:var(--caustica);
}
.railnav{ display:flex; flex-direction:column; gap:3px; overflow-y:auto; }
.navsep{ height:1px; background:var(--linea-tenue); margin:9px 6px; }
.navlink{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:11px;
  color:var(--mut); font-size:.9rem; font-weight:500; letter-spacing:-.01em;
  text-decoration:none; transition: color .18s, background .18s;
}
.navlink svg{ width:18px; height:18px; flex:none; stroke-width:1.7; }
.navlink:hover{ color:#cdd9ea; background:rgba(255,255,255,.03); text-decoration:none; }
.navlink.on{
  color:var(--ink);
  background:linear-gradient(90deg, rgba(79,195,247,.15), rgba(79,195,247,.03));
  box-shadow: inset 0 0 0 1px var(--linea-luz);
}
.navlink.on svg{ color:var(--aqua); }
.railspacer{ flex:1; }
.railuser{
  display:flex; align-items:center; gap:10px; padding:12px 8px 4px;
  border-top:1px solid var(--linea-tenue);
}
.railavatar{
  width:34px; height:34px; border-radius:11px; flex:none; overflow:hidden;
  display:grid; place-items:center; font-family:var(--display); font-weight:600; font-size:.82rem;
  color:var(--abisal); background:linear-gradient(140deg, var(--caustica), var(--aqua));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.railavatar img{ width:100%; height:100%; object-fit:cover; }
.railwho{ min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.railwho strong{ font-size:.83rem; color:var(--ink); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.railwho em{ font-style:normal; font-size:.7rem; color:var(--mut); }
.railout{ margin-left:auto; color:var(--mut); padding:7px; border-radius:9px; display:grid; place-items:center; }
.railout svg{ width:17px; height:17px; }
.railout:hover{ color:var(--bad); background:rgba(255,139,139,.08); text-decoration:none; }

.maincol{ flex:1; min-width:0; display:flex; flex-direction:column; }
body.lobo-black .wrap{ padding:30px 34px 56px; max-width:1180px; width:100%; margin:0; }
body.lobo-black .foot{
  margin-top:auto; padding:24px 34px; color:#56626F; font-size:.76rem;
  border-top:1px solid var(--linea-tenue); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}

.impersonate-bar{
  position:sticky; top:0; z-index:30; padding:9px 16px; text-align:center; font-size:.82rem; color:var(--warn);
  background:rgba(255,201,79,.1); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,201,79,.3);
}
.impersonate-bar strong{ color:var(--ink); }
.impersonate-bar a{ color:var(--warn); text-decoration:underline; font-weight:600; }

/* ============================================================
   MODO PÚBLICO (login / recuperar / reset): héroe con el Lobo
   ============================================================ */
.authstage{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px; padding:40px 18px 22px;
}
.authbrand{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.wolfhero{ filter: drop-shadow(0 0 54px rgba(79,195,247,.5)); }
.brandline{ display:flex; align-items:center; gap:12px; }
.brandline .logo-img{ height:20px; width:auto; }
.authtag{ margin:0; color:var(--mut); font-size:.88rem; letter-spacing:.01em; }
.authmain{ width:100%; max-width:400px; display:flex; flex-direction:column; gap:14px; }
.authfoot{ color:#56626F; font-size:.74rem; margin-top:6px; }

body.lobo-black .auth{ margin:0 auto; width:100%; max-width:400px; }
body.lobo-black .auth h1{ font-size:1.4rem; }

/* ============================================================
   COMPONENTES — pulido al look del mockup aprobado
   ============================================================ */

/* Cards */
body.lobo-black .card{
  background: linear-gradient(180deg, var(--fotica), var(--media));
  border:1px solid var(--linea-tenue);
  border-radius: var(--r-depth);
  box-shadow: var(--hundido), var(--luz-top);
}

/* Stat tiles */
body.lobo-black .stat .n,
body.lobo-black .saldo-big{
  font-family: var(--display); font-weight:600; letter-spacing:-.03em;
  font-variant-numeric: tabular-nums;
}
body.lobo-black .stat .l{ letter-spacing:.13em; }
body.lobo-black .stat.accent .n{
  background:linear-gradient(180deg,#fff,var(--caustica));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
body.lobo-black .stat.accent{ border-color: var(--linea-luz); box-shadow: var(--hundido), var(--brillo-bio); }

/* Page head */
body.lobo-black .pagehead h1{ font-size:1.5rem; }
body.lobo-black .pagehead .sub{ color:var(--mut); }

/* Botones */
body.lobo-black .btn{
  border-radius:11px; font-weight:600;
  background:linear-gradient(135deg, var(--caustica), var(--aqua));
  color:#04121f; border:1px solid transparent;
  box-shadow: var(--brillo-bio);
  transition: transform .12s, box-shadow .2s, background .2s, color .2s;
}
body.lobo-black .btn:hover{ transform:translateY(-1px); }
body.lobo-black .btn-ghost{
  background:rgba(255,255,255,.02); border-color:var(--linea-tenue); color:#B7C6DA; box-shadow:none;
}
body.lobo-black .btn-ghost:hover{ color:var(--ink); border-color:var(--linea-luz); }

/* Inputs */
body.lobo-black input[type=text],
body.lobo-black input[type=email],
body.lobo-black input[type=password],
body.lobo-black input[type=number],
body.lobo-black input[type=url],
body.lobo-black input[type=date],
body.lobo-black input[type=search],
body.lobo-black select,
body.lobo-black textarea{
  background: rgba(255,255,255,.03);
  border:1px solid var(--linea-tenue);
  border-radius:11px; color:var(--ink);
}
body.lobo-black input:focus, body.lobo-black select:focus, body.lobo-black textarea:focus{
  border-color: var(--linea-luz);
  box-shadow: 0 0 0 3px rgba(79,195,247,.14);
  outline:none;
}

/* Tablas */
body.lobo-black thead th{
  font-size:.68rem; letter-spacing:.1em; color:var(--mut);
  border-bottom:1px solid var(--linea-tenue);
}
body.lobo-black tbody td{ border-bottom:1px solid var(--linea-tenue); }
body.lobo-black tbody tr:hover{ background: rgba(79,195,247,.035); }
body.lobo-black td strong{ color:var(--ink); }
body.lobo-black .num{ font-variant-numeric: tabular-nums; }

/* Tags de estado (pendiente/aprobada/pagada/rechazada…) */
body.lobo-black .tag{
  border-radius:999px; font-weight:600; letter-spacing:.01em;
  border:1px solid var(--linea-tenue); background:rgba(255,255,255,.02);
}
body.lobo-black .tag-pendiente{ color:var(--warn); border-color:rgba(255,201,79,.3); background:rgba(255,201,79,.08); }
body.lobo-black .tag-aprobada{ color:var(--ok); border-color:rgba(67,229,160,.3); background:rgba(67,229,160,.08); }
body.lobo-black .tag-pagada{ color:var(--caustica); border-color:var(--linea-luz); background:rgba(79,195,247,.08); }
body.lobo-black .tag-rechazada,
body.lobo-black .tag-baja{ color:var(--bad); border-color:rgba(255,139,139,.3); background:rgba(255,139,139,.08); }
body.lobo-black .tag-activo{ color:var(--ok); border-color:rgba(67,229,160,.3); background:rgba(67,229,160,.08); }
body.lobo-black .tag-pausado{ color:var(--warn); border-color:rgba(255,201,79,.3); background:rgba(255,201,79,.08); }

/* Linkbox del vendedor */
body.lobo-black .linkbox{
  border:1px dashed var(--linea-luz);
  background: rgba(79,195,247,.045);
  border-radius:14px;
}
body.lobo-black .linkbox code{ font-family:var(--display); color:var(--caustica); }

/* Flash */
body.lobo-black .flash{ border-radius:13px; border:1px solid var(--linea-tenue); }
body.lobo-black .flash-ok{ background:rgba(67,229,160,.08); border-color:rgba(67,229,160,.3); color:var(--ok); }
body.lobo-black .flash-err{ background:rgba(255,139,139,.08); border-color:rgba(255,139,139,.3); color:var(--bad); }

/* Avatares existentes (vistas) */
body.lobo-black .avatar{
  border-radius:11px;
  background:linear-gradient(140deg, var(--caustica), var(--aqua));
  color:var(--abisal); font-family:var(--display); font-weight:600;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

/* Filterbar */
body.lobo-black .filterbar a{ border-radius:9px; color:var(--mut); }
body.lobo-black .filterbar a.on{ color:var(--ink); background:rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--linea-tenue); }

/* Charts (contenedores del app.js existente) */
body.lobo-black .vgrid{ stroke: var(--linea-tenue); }
body.lobo-black .vaxis{ fill:#56626F; }
body.lobo-black .chartcard, body.lobo-black .chartbox{ border-radius: var(--r-depth); }

/* Snippets / código */
body.lobo-black pre.code, body.lobo-black .code{
  background: var(--fosa); border:1px solid var(--linea-tenue); border-radius:13px; color:#B7C6DA;
}

/* Paginador */
body.lobo-black .pager-info{ color:var(--mut); }

/* El contador de filas del admin (01/02/03 flotando sobre cada fila) era del
   look viejo — en el negro pleno ensucia la tabla. Fuera. */
body.lobo-black.is-admin tbody td:first-child:not([colspan])::before{ content:none; }

/* ============================================================
   Responsive: el rail se vuelve barra superior en mobile
   ============================================================ */
@media (max-width: 900px){
  .shell{ flex-direction:column; }
  .rail{
    position:sticky; top:0; width:100%; height:auto; flex-direction:row; align-items:center;
    gap:6px; padding:10px 12px;
    border-right:none; border-bottom:1px solid var(--linea-tenue);
    background: rgba(6,7,8,.9); backdrop-filter: blur(14px);
  }
  .rail .brand{ padding:0 6px 0 2px; }
  .rail .brand .logo-img{ display:none; }         /* en mobile manda el lobo */
  .rail .brand .brand-sep{ display:none; }
  .railnav{
    flex-direction:row; overflow-x:auto; overflow-y:hidden; gap:2px; flex:1;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .railnav::-webkit-scrollbar{ display:none; }
  .navlink{ padding:8px 11px; font-size:.82rem; white-space:nowrap; }
  .navlink svg{ display:none; }
  .navsep{ display:none; }
  .railspacer{ display:none; }
  .railuser{ border-top:none; padding:0; }
  .railwho{ display:none; }
  .railavatar{ width:30px; height:30px; border-radius:9px; }
  body.lobo-black .wrap{ padding:20px 16px 44px; }
  body.lobo-black .foot{ padding:20px 16px; }
}

@media (prefers-reduced-motion: reduce){
  body.lobo-black *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}