/* ============================================================
   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:var(--mut); 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:var(--mut); 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:var(--mut); }
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; }
}


/* ═══ Auditoría UX/UI 2026-08-21 — hallazgos del equipo de revisión ═══ */

/* Tablas: el indicador de scroll era negro sobre negro (1.08:1, invisible). Sombras aqua
   + scrollbar visible + headers pegados para tablas largas. */
body.lobo-black .tablewrap{
  max-height:75vh;overflow:auto;
  background:
    linear-gradient(90deg,var(--fotica) 40%,transparent) left/32px 100% no-repeat local,
    linear-gradient(270deg,var(--fotica) 40%,transparent) right/32px 100% no-repeat local,
    linear-gradient(90deg,rgba(79,195,247,.22),transparent) left/16px 100% no-repeat scroll,
    linear-gradient(270deg,rgba(79,195,247,.22),transparent) right/16px 100% no-repeat scroll;
  scrollbar-color:rgba(159,233,255,.5) rgba(255,255,255,.06);
}
body.lobo-black .tablewrap th{position:sticky;top:0;z-index:2;background:var(--fotica)}

/* El "hundimiento" de brightness por tile venía del tema viejo y bajaba los labels
   por debajo de AA en las últimas tarjetas. */
body.lobo-black .grid-stats>*{filter:none}

/* .who acompañaba a los avatares de las tablas pero nunca existió en ningún CSS. */
.who{display:flex;align-items:center;gap:10px}

/* h2 sin escala definida empataba con el h1 de página. */
body.lobo-black main h2{font-size:1.05rem;font-weight:600}

/* Inputs chicos inline (% propio, nueva clave): con el padding global cortaban su placeholder. */
.input-mini{width:110px;padding:7px 10px;font-size:.82rem}

/* Columnas ordenables: la flecha era invisible sin hover (en touch no hay hover). */
.th-sort span{opacity:.3}

@media (max-width:900px){
  /* La barra amarilla de impersonación (z-30) tapaba el rail sticky (z-20). */
  .impersonate-bar{position:static;top:auto}
  /* El nav horizontal escondía la mitad de los ítems sin ninguna señal de overflow. */
  .railnav{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 20px),transparent);
           mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 20px),transparent)}
}


/* ═══ Rail en acordeón por área (2026-08-24) ═══ */
.navgroup{margin-top:8px}
.navgroup summary{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:11px;
  /* Mismo lenguaje que los navlinks (pedido 2026-08-24): el título de área pesa
     como "Resumen" — tipografía de navlink, sin versalitas ni tracking de rótulo. */
  font-size:.9rem;font-weight:600;letter-spacing:-.01em;
  color:var(--ink);
  transition: color .18s, background .18s;
}
/* Ícono de cada área en la cabecera del acordeón (tamaño navlink, acento cel) */
.navgroup summary .gico{
  width:18px;height:18px;flex:0 0 auto;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  color:var(--cel);
}
.navgroup summary::-webkit-details-marker{display:none}
.navgroup summary:hover{color:#fff;background:rgba(255,255,255,.03)}
.navgroup summary:focus-visible{outline:none;box-shadow:var(--focus);border-radius:8px}
.navgroup summary .chev{margin-left:auto;opacity:.65;transition:transform .22s ease}
.navgroup[open]>summary .chev{transform:rotate(90deg)}
.navgroup .navgroup-links{display:flex;flex-direction:column}
/* Al abrir, los links entran con un fade corto — mismo lenguaje que el resto del skin */
.navgroup[open] .navgroup-links{animation:nav-abrir .22s ease}
@keyframes nav-abrir{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .navgroup[open] .navgroup-links{animation:none}
  .navgroup summary .chev{transition:none}
}
/* En móvil el rail es una tira horizontal: los grupos se aplanan (el JS los abre todos)
   y las cabeceras desaparecen — un acordeón vertical no tiene sentido ahí. */
@media (max-width:900px){
  .navgroup, .navgroup .navgroup-links{display:contents}
  .navgroup summary{display:none}
}

/* ═══ TOUR guiado (tour.js — spotlight de onboarding, estética Facturer) ═══ */
/* Agujero: la sombra 0 0 0 9999px oscurece todo menos el rect del target.
   pointer-events:none → el target de abajo queda clickeable. */
.tour-spot{
  position:fixed; z-index:6000; pointer-events:none; border-radius:14px;
  box-shadow:
    0 0 0 2px rgba(79,195,247,.6),
    0 0 26px 2px rgba(79,195,247,.28),
    0 0 0 9999px rgba(3,5,8,.78);
  transition: top .16s ease, left .16s ease, width .16s ease, height .16s ease;
}
/* Bloqueadores transparentes alrededor del agujero: frenan clicks fuera del target */
.tour-block{ position:fixed; z-index:6001; }
/* Sombra completa para pasos sin target (card centrada) */
.tour-shade{ position:fixed; inset:0; z-index:6000; background:rgba(3,5,8,.78); }

.tour-card{
  position:fixed; z-index:6002; width:min(330px, calc(100vw - 24px));
  background:linear-gradient(180deg, var(--fotica) 0%, var(--media) 92%);
  border:1px solid var(--linea-luz); border-radius:16px;
  box-shadow: var(--luz-top), 0 0 36px -8px rgba(79,195,247,.5), var(--hundido);
  padding:16px 16px 12px;
}
.tour-card-centrada{ top:50%; left:50%; transform:translate(-50%,-50%); }
/* Flechita indicadora (cuadrado rotado sobre el borde de la card) */
.tour-flecha{ position:absolute; width:13px; height:13px; transform:rotate(45deg); }
.tour-flecha[data-dir="arriba"]{
  top:-7px; background:var(--fotica);
  border-left:1px solid var(--linea-luz); border-top:1px solid var(--linea-luz);
}
.tour-flecha[data-dir="abajo"]{
  bottom:-7px; background:var(--media);
  border-right:1px solid var(--linea-luz); border-bottom:1px solid var(--linea-luz);
}
.tour-texto{ margin:0 0 12px; font-size:.9rem; line-height:1.55; color:var(--ink); }
.tour-foot{ display:flex; align-items:center; gap:12px; min-height:30px; }
.tour-contador{
  font-family:var(--display); font-weight:700; font-size:.7rem; letter-spacing:.12em;
  color:var(--caustica);
}
.tour-saltar{
  background:none; border:0; padding:2px 4px; cursor:pointer;
  color:var(--mut); font-family:var(--texto); font-size:.74rem; text-decoration:underline;
}
.tour-saltar:hover{ color:var(--caustica); }
.tour-avanzar{ margin-left:auto; }

/* Botón ✨ replay en el railuser (hereda .railout; hover aqua en vez de rojo) */
button.tour-replay{ border:0; background:none; font-size:.95rem; line-height:1; }
button.tour-replay:hover{ color:var(--aqua); background:rgba(79,195,247,.1); }
.tour-replay + .railout{ margin-left:0; }