/* ============================================================
   VALKSHIP — Estilos compartidos de paneles (admin/proveedor/aliado)
   y páginas de autenticación (login/registro/setup)

   Sistema de diseño "Tinta y Cielo"
   ─────────────────────────────────
   La marca es un lobo azul que corre con un paquete: velocidad, ruta,
   entrega. De ahí sale la regla que ordena toda la interfaz:

     • AZUL CIELO  (--accent) = todo lo que se HACE: botones, enlaces,
                                pestañas activas, foco, interruptores.
     • ÁMBAR       (--gold)   = solo donde hay DINERO: billetera, precios,
                                ganancias. Así el ámbar deja de ser
                                decoración y se vuelve una señal.
     • TINTA       (--black*) = superficies azul-marino profundas, no
                                negro muerto: descansan la vista en
                                jornadas largas.

   Se conservan los nombres de variable originales (--black*, --gold*,
   --white*) porque cientos de reglas y estilos en línea dependen de
   ellos — solo cambia su VALOR, no su nombre.

   Tipografía: Space Grotesk (títulos) + Inter (cuerpo) + JetBrains
   Mono (cifras, IDs). En oración normal: nada de mayúsculas sostenidas.
============================================================ */
:root{
  /* Tinta — superficies azul-marino, de más profunda a más elevada */
  --black:#0c1220; --black-2:#121a2c; --black-3:#182238; --black-4:#22304d;

  /* Ámbar — reservado para dinero */
  --gold:#f2b84a; --gold-rgb:242,184,74; --gold-2:#d99a2b; --gold-light:#ffd98a;

  /* Cielo — el azul del lobo, para todo lo accionable */
  --accent:#3d8bff; --accent-rgb:61,139,255; --accent-2:#2f6fd6; --accent-light:#8ec1ff;

  /* Texto: blanco frío con contraste real, y un atenuado que sigue siendo legible */
  --white:#eef2fb; --white-dim:#a3adc7;
  --green:#3ecf8e; --red:#ff6b6e; --blue:#3d8bff; --orange:#f2b84a;

  --font-display:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
  --font-body:'Inter','Helvetica Neue',Arial,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',Consolas,monospace;

  --radius:12px; --radius-sm:8px;
  --line:rgba(163,173,199,0.14);      /* hairline sobre tinta */
  --line-strong:rgba(163,173,199,0.26);
  --shadow-sm:0 1px 2px rgba(3,8,20,.45);
  --shadow-md:0 1px 2px rgba(3,8,20,.35), 0 12px 32px -14px rgba(3,8,20,.7);
  --shadow-lg:0 2px 6px rgba(3,8,20,.4), 0 28px 70px -24px rgba(3,8,20,.85);
  --shadow-gold:0 8px 24px -8px rgba(var(--gold-rgb),.35);
  --shadow-accent:0 8px 22px -8px rgba(var(--accent-rgb),.55);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:
    radial-gradient(ellipse 900px 600px at 8% -10%, rgba(var(--accent-rgb),0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(var(--gold-rgb),0.05), transparent 55%),
    var(--black);
  color:var(--white); font-family:var(--font-body); min-height:100vh; font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--white); letter-spacing:-0.015em; font-weight:600; }
a{ color:var(--accent-light); text-decoration:none; }
a:hover{ text-decoration:underline; }
::selection{ background:var(--accent); color:#fff; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--black-2); }
::-webkit-scrollbar-thumb{ background:var(--black-4); border-radius:8px; border:2px solid var(--black-2); }
::-webkit-scrollbar-thumb:hover{ background:rgba(var(--accent-rgb),.5); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ transition:none !important; animation:none !important; } }

/* ── Formularios ── */
label{ display:block; font-size:0.78rem; color:var(--white-dim); margin:0.9rem 0 0.35rem; font-weight:600; }
input[type=text], input[type=password], input[type=number], input[type=email], input[type=tel],
input[type=url], input[type=date], textarea, select{
  width:100%; background:var(--black); border:1px solid var(--line-strong); color:var(--white);
  padding:0.72rem 0.9rem; font-family:var(--font-body); font-size:0.9rem; outline:none; border-radius:var(--radius-sm);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder, textarea::placeholder{ color:rgba(163,173,199,0.55); }
input:focus, textarea:focus, select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.22); background:var(--black-2); }
input.error, select.error{ border-color:var(--red); }
textarea{ resize:vertical; min-height:70px; }
.field-hint{ font-size:0.74rem; color:var(--white-dim); margin-top:0.3rem; }
.optional{ color:var(--white-dim); font-weight:400; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:600px){ .form-row{ grid-template-columns:1fr; } }

/* ── Slots de subida de imágenes (Storage) ── */
.img-slot{ display:flex; align-items:center; gap:0.7rem; margin-bottom:0.5rem; background:var(--black-3); border:1px dashed var(--line-strong); border-radius:var(--radius); padding:0.6rem; }
.img-slot-preview{ width:52px; height:52px; border-radius:6px; overflow:hidden; background:var(--black-4); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.img-slot-preview img{ width:100%; height:100%; object-fit:cover; }
.img-slot-empty{ font-size:0.6rem; color:var(--white-dim); text-align:center; line-height:1.3; }
.img-slot-info{ flex:1; min-width:0; }
.img-slot-status{ font-size:0.75rem; color:var(--white-dim); }
.img-slot-progress{ display:none; height:4px; background:var(--black-4); border-radius:2px; overflow:hidden; margin-top:0.35rem; }
.img-slot-progress.show{ display:block; }
.img-slot-progress-bar{ height:100%; background:var(--accent); width:0%; transition:width .2s; }
.img-slot-pick{ flex-shrink:0; white-space:nowrap; }
.img-slot-remove{ flex-shrink:0; }

/* ── Botones ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.45rem;
  background:var(--accent);
  color:#fff; border:1px solid transparent; padding:0.7rem 1.3rem; font-family:var(--font-body); font-size:0.86rem;
  font-weight:600; letter-spacing:0; cursor:pointer; transition:transform .15s, box-shadow .15s, background .15s;
  border-radius:var(--radius-sm); box-shadow:var(--shadow-accent);
}
.btn:hover{ background:#4f97ff; transform:translateY(-1px); box-shadow:0 12px 26px -8px rgba(var(--accent-rgb),.65); }
.btn:active{ transform:translateY(0) scale(0.985); }
.btn:disabled{ opacity:0.4; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-secondary{
  background:transparent; color:var(--white); border:1px solid var(--line-strong);
  box-shadow:none;
}
.btn-secondary:hover{ background:rgba(var(--accent-rgb),.10); border-color:rgba(var(--accent-rgb),.55); color:var(--white); box-shadow:none; }
.btn-danger{ background:rgba(255,107,110,0.10); color:#ff9a9c; border:1px solid rgba(255,107,110,0.4); box-shadow:none; }
.btn-danger:hover{ background:rgba(255,107,110,0.18); box-shadow:none; transform:none; }
.btn-success{ background:rgba(62,207,142,0.10); color:#8ee8bd; border:1px solid rgba(62,207,142,0.4); box-shadow:none; }
.btn-success:hover{ background:rgba(62,207,142,0.18); box-shadow:none; transform:none; }
.btn-sm{ padding:0.42rem 0.8rem; font-size:0.76rem; }
.btn-block{ width:100%; }

/* ── Layout de paneles ── */
.vs-app{ display:flex; min-height:100vh; }
.vs-sidebar{
  width:272px; flex-shrink:0; background:var(--black-2); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.vs-sidebar-brand{ padding:1.3rem 1.3rem 1.1rem; display:flex; align-items:center; gap:0.65rem; border-bottom:1px solid var(--line); }
.vs-sidebar-brand img{
  width:40px; height:40px; object-fit:contain; flex-shrink:0; border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.22),transparent 70%);
  padding:2px;
}
.vs-sidebar-brand span{ font-family:var(--font-display); font-size:1.08rem; font-weight:700; letter-spacing:-0.01em; color:var(--white); }

/* Secciones agrupadas: punto de color + etiqueta + caret colapsable */
.vs-nav{ flex:1; padding:0.7rem 0.7rem 1rem; display:flex; flex-direction:column; gap:0.2rem; }
.vs-nav-section{ display:flex; flex-direction:column; }
.vs-nav-section-header{
  display:flex; align-items:center; gap:0.55rem; width:100%; background:none; border:none; cursor:pointer;
  padding:0.7rem 0.5rem 0.4rem; font-family:var(--font-body);
}
.vs-nav-section-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.vs-nav-section-label{
  flex:1; text-align:left; font-size:0.72rem; font-weight:600; letter-spacing:0.01em;
  color:var(--white-dim);
}
.vs-nav-section-caret{ font-size:0.6rem; color:var(--white-dim); transition:transform .15s; }
.vs-nav-section:not(.open) .vs-nav-section-caret{ transform:rotate(-90deg); }
.vs-nav-section-body{ display:flex; flex-direction:column; gap:0.05rem; padding-bottom:0.4rem; }
.vs-nav-section:not(.open) .vs-nav-section-body{ display:none; }

.vs-nav a, .vs-nav button.vs-nav-item{
  display:flex; align-items:center; gap:0.65rem; padding:0.6rem 0.75rem; border-radius:8px;
  color:var(--white-dim); font-size:0.85rem; background:none; border:none; position:relative;
  text-align:left; cursor:pointer; width:100%; font-family:var(--font-body); transition:background .12s, color .12s;
}
.vs-nav a:hover, .vs-nav button.vs-nav-item:hover{ background:rgba(163,173,199,0.07); color:var(--white); text-decoration:none; }
.vs-nav a.active, .vs-nav button.vs-nav-item.active{
  background:rgba(var(--accent-rgb),0.14); color:var(--white); font-weight:600;
}
.vs-nav a.active::before, .vs-nav button.vs-nav-item.active::before{
  content:''; position:absolute; left:0; top:22%; height:56%; width:3px; border-radius:0 3px 3px 0; background:var(--accent);
}
.vs-nav a.active .vs-nav-icon, .vs-nav button.vs-nav-item.active .vs-nav-icon{ filter:none; }
.vs-nav-icon{ width:1.1em; text-align:center; flex-shrink:0; }
.vs-nav-item span:nth-child(2){ flex:1; }
.vs-nav-soon{
  font-size:0.62rem; letter-spacing:0; color:var(--white-dim);
  background:rgba(163,173,199,0.08); border:1px solid var(--line); border-radius:20px;
  padding:0.12rem 0.45rem; flex-shrink:0; font-weight:600;
}
.vs-nav-item.active .vs-nav-soon{ background:rgba(var(--accent-rgb),0.18); border-color:rgba(var(--accent-rgb),0.3); color:var(--accent-light); }
.vs-nav-off{
  font-size:0.62rem; letter-spacing:0; color:#ff9a9c;
  background:rgba(255,107,110,0.10); border:1px solid rgba(255,107,110,0.3); border-radius:20px;
  padding:0.12rem 0.45rem; flex-shrink:0; font-weight:600;
}
.vs-nav-group-toggle .vs-nav-caret{ margin-left:auto; font-size:0.65rem; transition:transform .15s; flex-shrink:0; }
.vs-nav-group.open .vs-nav-group-toggle .vs-nav-caret{ transform:rotate(180deg); }
.vs-nav-children{ display:none; flex-direction:column; padding-left:1.9rem; gap:0.05rem; }
.vs-nav-group.open .vs-nav-children{ display:flex; }
.vs-nav-sub{ font-size:0.8rem; padding:0.5rem 0.7rem; }
.vs-nav-sub::before{ content:''; display:inline-block; width:5px; height:5px; border-radius:50%; margin-right:0.5rem; background:rgba(163,173,199,0.35); }
.vs-nav-sub.active::before{ background:var(--accent); }

/* Tarjeta de perfil + salir, al pie de la sidebar */
.vs-nav-footer{ padding:1rem 1.1rem 1.2rem; border-top:1px solid var(--line); }
.vs-profile-card{
  display:flex; align-items:center; gap:0.7rem; padding:0.7rem; margin-bottom:0.7rem;
  background:var(--black-3); border:1px solid var(--line); border-radius:10px;
}
.vs-profile-avatar{
  width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg,var(--accent-light),var(--accent-2)); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:0.85rem; box-shadow:var(--shadow-sm);
}
.vs-profile-info{ min-width:0; flex:1; }
.vs-profile-info strong{ display:block; font-size:0.82rem; color:var(--white); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vs-profile-info span{ display:block; font-size:0.7rem; color:var(--white-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.vs-content-col{ flex:1; min-width:0; display:flex; flex-direction:column; }
.vs-topbar-bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0.95rem 1.6rem; border-bottom:1px solid var(--line); background:rgba(12,18,32,0.82);
  backdrop-filter:blur(12px); position:sticky; top:0; z-index:5;
}
.vs-topbar-bar-title{ font-family:var(--font-display); font-size:1rem; color:var(--white); letter-spacing:-0.01em; font-weight:600; }
.vs-topbar-bar-right{ display:flex; align-items:center; gap:0.8rem; }
/* Chip de billetera: aquí sí ámbar — es dinero */
.vs-wallet-chip{
  background:rgba(var(--gold-rgb),0.10); border:1px solid rgba(var(--gold-rgb),0.35); color:var(--gold-light);
  padding:0.42rem 0.9rem; border-radius:20px; font-size:0.8rem; font-weight:600; white-space:nowrap;
  font-family:var(--font-mono); cursor:pointer; transition:background .15s, border-color .15s;
}
.vs-wallet-chip:hover{ background:rgba(var(--gold-rgb),0.18); border-color:rgba(var(--gold-rgb),0.55); }
.vs-user-chip{
  width:34px; height:34px; border-radius:50%; background:linear-gradient(155deg,var(--accent-light),var(--accent-2));
  color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:0.82rem;
  font-weight:700; box-shadow:var(--shadow-sm);
}
.vs-main{ flex:1; min-width:0; padding:1.8rem 2.2rem 4rem; }
@media (max-width:860px){
  .vs-app{ flex-direction:column; }
  .vs-sidebar{ width:100%; height:auto; position:relative; }
  .vs-main{ padding:1.4rem; }
  .vs-topbar-bar{ padding:0.8rem 1.1rem; }
}

.vs-topbar{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.vs-topbar h1{ font-size:1.45rem; font-weight:700; }
.vs-topbar-sub{ color:var(--white-dim); font-size:0.88rem; margin-top:0.25rem; }

/* ── Próximamente ── */
.vs-coming-soon{ text-align:center; padding:4rem 1.5rem; max-width:460px; margin:2rem auto; }
.vs-coming-soon-icon{ font-size:2.6rem; margin-bottom:1rem; }
.vs-coming-soon h2{ font-size:1.1rem; margin-bottom:0.6rem; }

/* ── Proveedores (grid estilo Dropi) ── */
.provider-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; }
.provider-card{ background:var(--black-2); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem; text-align:center; transition:border-color .15s, transform .15s; }
.provider-card:hover{ border-color:rgba(var(--accent-rgb),.5); transform:translateY(-2px); }
.provider-avatar{
  width:48px; height:48px; border-radius:50%; margin:0 auto 0.6rem; background:rgba(var(--accent-rgb),0.14);
  color:var(--accent-light); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.1rem; font-weight:700;
}
.provider-card strong{ display:block; font-size:0.85rem; color:var(--white); margin-bottom:0.2rem; }
.provider-card .prov-count{ color:var(--accent-light); font-size:0.75rem; }
.provider-card .prov-cats{ color:var(--white-dim); font-size:0.7rem; margin-top:0.3rem; }

/* ── Grid de productos estilo Dropi (perfil de proveedor) ── */
.prod-grid-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; }
.prod-card-grid{ background:var(--black-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:border-color .15s, transform .15s; }
.prod-card-grid:hover{ border-color:rgba(var(--accent-rgb),.55); transform:translateY(-2px); }
.prod-card-img{ width:100%; aspect-ratio:1/1; background:var(--black-3); overflow:hidden; }
.prod-card-img img{ width:100%; height:100%; object-fit:cover; }
.prod-card-body{ padding:0.8rem; }
.prod-card-body strong{ display:block; font-size:0.8rem; color:var(--white); margin-bottom:0.3rem; line-height:1.3; }
/* Precio: dinero → ámbar */
.prod-card-price{ font-family:var(--font-mono); font-size:0.92rem; color:var(--gold); margin-bottom:0.2rem; font-weight:600; }

/* ── Modal grande (detalle de producto / crear orden) ── */
.vs-modal-lg{ width:min(880px,94vw); }
.prod-detalle-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:1.6rem; }
@media (max-width:700px){ .prod-detalle-grid, .crear-orden-grid{ grid-template-columns:1fr; } }
.prod-detalle-mainimg{ width:100%; aspect-ratio:1/1; background:var(--black-3); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.prod-detalle-mainimg img{ width:100%; height:100%; object-fit:cover; }
.prod-detalle-thumbs{ display:flex; gap:0.5rem; margin-top:0.6rem; flex-wrap:wrap; }
.pd-thumb{ width:52px; height:52px; object-fit:cover; border:1px solid var(--line); cursor:pointer; border-radius:6px; }
.pd-thumb.active{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(var(--accent-rgb),.3); }

/* ── Crear Orden ── */
.crear-orden-grid{ display:grid; grid-template-columns:1.2fr 0.95fr 0.95fr; gap:1.3rem; margin-top:1rem; align-items:start; }
@media (max-width:1000px){ .crear-orden-grid{ grid-template-columns:1fr; } }
.carrier-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0.5rem; }
.carrier-card{
  background:var(--black-3); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:0.6rem 0.7rem; cursor:pointer; text-align:center; transition:border-color .15s, background .15s;
}
.carrier-card span{ display:block; font-size:0.78rem; color:var(--white); font-weight:600; }
.carrier-card small{ display:block; font-size:0.7rem; color:var(--white-dim); margin-top:0.15rem; }
.carrier-card:hover{ border-color:var(--accent); }
.carrier-card.selected{ border-color:var(--accent); background:rgba(var(--accent-rgb),0.12); }
.carrier-card.selected small{ color:var(--accent-light); }
.carrier-card.disabled{ opacity:0.35; cursor:not-allowed; }

/* ── Gráfico simple de rendimiento ── */
.chart-wrap{ width:100%; height:220px; position:relative; }
.chart-bars{ display:flex; align-items:flex-end; gap:0.4rem; height:100%; padding:0 0.5rem; }
.chart-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:0.3rem; }
.chart-bar{ width:60%; background:linear-gradient(180deg,var(--accent-light),var(--accent)); border-radius:4px 4px 0 0; min-height:2px; }
.chart-bar-label{ font-size:0.64rem; color:var(--white-dim); white-space:nowrap; }

/* ── Tarjetas / stats ── */
.vs-grid{ display:grid; gap:1.2rem; }
.vs-grid-4{ grid-template-columns:repeat(4,1fr); }
.vs-grid-3{ grid-template-columns:repeat(3,1fr); }
.vs-grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .vs-grid-4, .vs-grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .vs-grid-4, .vs-grid-3, .vs-grid-2{ grid-template-columns:1fr; } }

/* Dos niveles de elevación: .card = superficie de trabajo (plana),
   .stat-card = cifra destacada (flota un poco más). */
.card{ background:var(--black-2); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; }
.stat-card{
  background:linear-gradient(165deg,var(--black-3),var(--black-2)); border:1px solid var(--line-strong);
  border-radius:var(--radius); padding:1.25rem 1.4rem; box-shadow:var(--shadow-md); position:relative; overflow:hidden;
}
.stat-card::before{
  content:''; position:absolute; top:0; left:0; width:3px; height:100%;
  background:linear-gradient(180deg,var(--accent-light),var(--accent-2)); opacity:0.9;
}
.stat-card .stat-label{ font-size:0.78rem; color:var(--white-dim); letter-spacing:0; font-weight:600; }
.stat-card .stat-value{ font-family:var(--font-mono); font-weight:700; font-size:1.6rem; color:var(--white); margin-top:0.4rem; letter-spacing:-0.02em; }
.stat-card .stat-sub{ font-size:0.74rem; color:var(--white-dim); margin-top:0.3rem; }

.card h2, .card h3{ font-size:1.02rem; margin-bottom:1rem; font-weight:600; }

/* ── Pestañas de Configuración de tienda ── */
.tienda-tabs{ display:flex; gap:0.4rem; flex-wrap:wrap; margin-bottom:1.4rem; border-bottom:1px solid var(--line); padding-bottom:0.8rem; }
.tienda-tab-btn{
  background:none; border:1px solid var(--line-strong); color:var(--white-dim); font-family:var(--font-body);
  font-size:0.82rem; padding:0.55rem 1rem; border-radius:20px; cursor:pointer; transition:all .15s; font-weight:500;
}
.tienda-tab-btn:hover{ border-color:rgba(var(--accent-rgb),.5); color:var(--white); }
.tienda-tab-btn.active{
  background:var(--accent); color:#fff; border-color:transparent; font-weight:600; box-shadow:var(--shadow-accent);
}

/* ── Interruptor visual: visible / oculto en la tienda ── */
.vis-switch{ display:inline-flex; align-items:center; gap:0.55rem; cursor:pointer; user-select:none; }
.vis-switch-track{
  width:42px; height:22px; border-radius:20px; background:rgba(163,173,199,0.22);
  position:relative; transition:background .18s; flex-shrink:0;
}
.vis-switch-track::after{
  content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; transition:transform .18s; box-shadow:0 1px 3px rgba(3,8,20,.5);
}
.vis-switch.on .vis-switch-track{ background:var(--accent); }
.vis-switch.on .vis-switch-track::after{ transform:translateX(20px); }
.vis-switch-label{ font-size:0.78rem; font-weight:600; }
.vis-switch.on .vis-switch-label{ color:var(--green); }
.vis-switch:not(.on) .vis-switch-label{ color:var(--white-dim); }

/* ── Tabs ── */
.vs-tabs{ display:flex; gap:0.2rem; margin-bottom:1.4rem; flex-wrap:wrap; border-bottom:1px solid var(--line); }
.vs-tab{
  background:none; border:none; color:var(--white-dim); padding:0.7rem 1rem; font-family:var(--font-body);
  font-size:0.86rem; font-weight:500; letter-spacing:0; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .15s, border-color .15s;
}
.vs-tab:hover{ color:var(--white); }
.vs-tab.active{ color:var(--white); border-bottom-color:var(--accent); font-weight:600; }
.vs-tab-panel{ display:none; }
.vs-tab-panel.active{ display:block; }

/* ── Tablas ── */
.vs-table-wrap{ overflow-x:auto; }
table.vs-table{ width:100%; border-collapse:collapse; font-size:0.86rem; }
table.vs-table th{ text-align:left; color:var(--white-dim); font-size:0.74rem; letter-spacing:0; font-weight:600; padding:0.75rem 0.8rem; border-bottom:1px solid var(--line-strong); white-space:nowrap; }
table.vs-table td{ padding:0.75rem 0.8rem; border-bottom:1px solid var(--line); vertical-align:middle; }
table.vs-table code{ font-family:var(--font-mono); }
table.vs-table tr:hover td{ background:rgba(var(--accent-rgb),0.04); }
.table-img{ width:38px; height:38px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--line); }
.empty-state{ text-align:center; padding:3rem 1rem; color:var(--white-dim); font-size:0.9rem; }

/* ── Badges ── */
.badge{ display:inline-flex; align-items:center; gap:0.35rem; padding:0.28rem 0.7rem; border-radius:20px; font-size:0.72rem; font-weight:600; letter-spacing:0; }

/* ── Modal ── */
.vs-modal-overlay{ position:fixed; inset:0; background:rgba(4,8,18,0.72); backdrop-filter:blur(3px); z-index:9998; display:none; }
.vs-modal-overlay.show{ display:block; }
.vs-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999;
  background:var(--black-2); border:1px solid var(--line-strong); border-radius:14px;
  width:min(520px,92vw); max-height:88vh; overflow-y:auto; padding:1.7rem; display:none; box-shadow:var(--shadow-lg);
}
.vs-modal.show{ display:block; }
.vs-modal-close{ position:absolute; top:0.9rem; right:1rem; background:rgba(163,173,199,0.1); border:none; color:var(--white-dim); width:30px; height:30px; border-radius:50%; font-size:1rem; cursor:pointer; transition:background .15s,color .15s; }
.vs-modal-close:hover{ background:rgba(163,173,199,0.2); color:var(--white); }

/* ── Login / registro / setup ── */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem;
  background:
    radial-gradient(ellipse 800px 520px at 12% 6%, rgba(var(--accent-rgb),0.16), transparent 60%),
    radial-gradient(ellipse 600px 500px at 100% 100%, rgba(var(--gold-rgb),0.08), transparent 55%),
    var(--black);
}
.auth-box{
  background:var(--black-2); border:1px solid var(--line-strong); border-radius:16px;
  padding:2.6rem 2.2rem; max-width:420px; width:100%; box-shadow:var(--shadow-lg);
  position:relative;
}
.auth-box::before{
  content:''; position:absolute; top:0; left:16px; right:16px; height:3px; border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.auth-mascot{ display:block; width:120px; height:auto; margin:-0.6rem auto 0.6rem; filter:drop-shadow(0 10px 24px rgba(var(--accent-rgb),.35)); }
.auth-box h1{ font-family:var(--font-display); font-size:1.45rem; font-weight:700; text-align:center; margin-bottom:0.35rem; letter-spacing:-0.02em; color:var(--white); }
.auth-box p.sub{ text-align:center; color:var(--white-dim); font-size:0.88rem; margin-bottom:1.5rem; }
.auth-error{ color:#ff9a9c; font-size:0.8rem; text-align:center; margin-top:0.8rem; display:none; }
.auth-error.show{ display:block; }
.auth-switch{ text-align:center; margin-top:1.3rem; font-size:0.84rem; color:var(--white-dim); }
.role-picker{ display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; margin-bottom:1rem; }
.role-card{ background:var(--black-3); border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:1.1rem 0.8rem; text-align:center; cursor:pointer; transition:border-color .15s, background .15s; }
.role-card:hover{ border-color:rgba(var(--accent-rgb),0.5); }
.role-card.selected{ border-color:var(--accent); background:rgba(var(--accent-rgb),0.10); box-shadow:0 0 0 1px var(--accent); }
.role-card .ri{ font-size:1.6rem; margin-bottom:0.4rem; }
.role-card strong{ display:block; font-size:0.84rem; color:var(--white); font-weight:600; }
.role-card small{ color:var(--white-dim); font-size:0.72rem; }

/* ── Estado de espera (pendiente/suspendido) ── */
.state-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem; text-align:center; }
.state-screen .icon{ font-size:2.6rem; margin-bottom:1rem; }
.state-screen h2{ margin-bottom:0.6rem; }
.state-screen p{ color:var(--white-dim); max-width:420px; margin:0 auto; }

/* ── Toast ── */
#vsToast{ font-family:var(--font-body); }

/* ── Utilidades ── */
.flex{ display:flex; align-items:center; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.gap-sm{ gap:0.5rem; } .gap-md{ gap:1rem; }
.text-dim{ color:var(--white-dim); }
.text-gold{ color:var(--gold); }
.text-right{ text-align:right; }
.mt-1{ margin-top:1rem;} .mt-2{ margin-top:2rem;} .mb-1{ margin-bottom:1rem;}
.w-100{ width:100%; }

/* ── Loader de panel (pantalla de carga con estilo) ── */
.vs-loader{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem; background:radial-gradient(1100px 560px at 50% -5%, rgba(61,139,255,0.12), transparent 62%); }
.vs-loader-ring{ position:relative; width:108px; height:108px; display:grid; place-items:center; }
.vs-loader-ring::before{ content:""; position:absolute; inset:0; border-radius:50%; padding:3px; background:conic-gradient(from 0deg, transparent 0 28%, var(--accent,#3d8bff) 88%, #8fbaff 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:vsSpin 1.05s linear infinite; }
.vs-loader-ring::after{ content:""; position:absolute; inset:-8px; border-radius:50%; background:radial-gradient(closest-side, rgba(61,139,255,0.22), transparent 70%); filter:blur(7px); animation:vsGlow 2.2s ease-in-out infinite; }
.vs-loader-logo{ width:62px; height:62px; object-fit:contain; animation:vsFloat 2.6s ease-in-out infinite; filter:drop-shadow(0 6px 18px rgba(61,139,255,0.40)); }
.vs-loader-text{ font-family:'Space Grotesk','Inter',sans-serif; font-weight:600; font-size:0.98rem; letter-spacing:0.4px; background:linear-gradient(90deg, #66718c 0%, #e6ecff 50%, #66718c 100%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:vsShimmer 1.9s linear infinite; }
.vs-loader-dots{ display:flex; gap:6px; }
.vs-loader-dots span{ width:7px; height:7px; border-radius:50%; background:var(--accent,#3d8bff); opacity:0.35; animation:vsDot 1.2s ease-in-out infinite; }
.vs-loader-dots span:nth-child(2){ animation-delay:0.2s; }
.vs-loader-dots span:nth-child(3){ animation-delay:0.4s; }
@keyframes vsSpin{ to{ transform:rotate(360deg); } }
@keyframes vsFloat{ 0%,100%{ transform:translateY(-4px); } 50%{ transform:translateY(4px); } }
@keyframes vsGlow{ 0%,100%{ opacity:0.45; } 50%{ opacity:1; } }
@keyframes vsShimmer{ to{ background-position:-200% 0; } }
@keyframes vsDot{ 0%,100%{ opacity:0.35; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-4px); } }

/* ── Catálogo en tarjetas (estilo Dropi) ── */
.cat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:1rem; }
.cat-card { background:var(--black-2, #131a2b); border:1px solid rgba(255,255,255,.07); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:transform .15s ease, border-color .15s ease; }
.cat-card:hover { transform:translateY(-3px); border-color:var(--accent,#3d8bff); }
.cat-card-img { position:relative; aspect-ratio:1/1; background-color:#0c1220; background-size:cover; background-position:center; }
.cat-card-badge { position:absolute; top:8px; left:8px; background:var(--accent,#3d8bff); color:#fff; font-size:0.64rem; font-weight:700; padding:3px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.3px; }
.cat-card-tienda { position:absolute; top:8px; right:8px; background:#3ac96a; color:#04210f; font-size:0.62rem; font-weight:700; padding:3px 8px; border-radius:999px; }
.cat-card-body { padding:0.8rem; display:flex; flex-direction:column; gap:0.3rem; flex:1; }
.cat-card-name { font-weight:600; font-size:0.9rem; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cat-card-prov { font-size:0.72rem; color:var(--white-dim,#8a93a6); }
.cat-card-precios { display:flex; justify-content:space-between; align-items:baseline; margin-top:0.15rem; }
.cat-card-costo { font-size:0.72rem; color:var(--white-dim,#8a93a6); }
.cat-card-sugerido { font-size:1rem; font-weight:800; color:var(--gold,#f2b84a); font-family:var(--font-mono, monospace); }
.cat-card-stock { font-size:0.72rem; color:var(--white-dim,#8a93a6); margin-bottom:0.2rem; }
.cat-card-body .btn { margin-top:auto; }