/* ============================================
   Import Hernandez — Design System Premium
   ============================================ */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
ul{list-style:none}
a{color:inherit;text-decoration:none}

/* ---------- Design tokens ---------- */
:root{
  /* Colores marca */
  --negro:#0a0a0a;
  --negro-2:#141414;
  --negro-3:#1f1f1f;
  --negro-4:#2a2a2a;
  --dorado:#c9a961;
  --dorado-claro:#e0c27b;
  --dorado-oscuro:#a88a47;
  --dorado-tenue:rgba(201,169,97,.12);
  --blanco:#ffffff;
  --off-blanco:#fafafa;

  /* Escala de grises */
  --gris-1:#f4f5f7;
  --gris-2:#e4e6eb;
  --gris-3:#cbd0d8;
  --gris-4:#9aa1ac;
  --gris-5:#6b7280;
  --gris-6:#4b5563;
  --gris-7:#374151;
  --gris-8:#1f2937;

  /* Semánticos */
  --exito:#10b981;
  --exito-suave:rgba(16,185,129,.1);
  --exito-borde:rgba(16,185,129,.25);
  --peligro:#ef4444;
  --peligro-suave:rgba(239,68,68,.1);
  --peligro-borde:rgba(239,68,68,.25);
  --info:#3b82f6;
  --alerta:#f59e0b;

  /* Sombras */
  --s-xs:0 1px 2px rgba(15,23,42,.04);
  --s-sm:0 2px 8px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --s-md:0 4px 16px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --s-lg:0 12px 32px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06);
  --s-oro:0 8px 24px rgba(201,169,97,.25);

  /* Radio */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-pill:999px;

  /* Layout */
  --sidebar-ancho:264px;
  --topbar-alto:64px;

  /* Transiciones */
  --t-rapida:.15s cubic-bezier(.4,0,.2,1);
  --t-media:.25s cubic-bezier(.4,0,.2,1);
}

/* ---------- Base ---------- */
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-feature-settings:'cv11','ss01','ss03';
  color:var(--gris-8);
  background:var(--gris-1);
  line-height:1.5;
  font-size:15px;
}

h1,h2,h3,h4,h5,h6{
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.25;
  color:var(--negro);
}
h1{font-size:24px;font-weight:700;letter-spacing:-.02em}
h2{font-size:19px}
h3{font-size:17px}
h4{font-size:15px}

p{color:var(--gris-6);line-height:1.6}
small{font-size:13px;color:var(--gris-5)}

/* ---------- Layout app: sidebar + topbar ---------- */
.app{
  display:grid;
  grid-template-columns:var(--sidebar-ancho) 1fr;
  min-height:100vh;
}

.sidebar{
  background:var(--negro);
  color:#e5e7eb;
  display:flex;flex-direction:column;
  padding:24px 0 16px;
  position:sticky;top:0;
  height:100vh;
  border-right:1px solid var(--negro-3);
}

.sidebar-brand{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:0 18px 24px;
  border-bottom:1px solid var(--negro-3);
  margin-bottom:18px;
  text-align:center;
}
.sidebar-brand img{
  width:110px;height:110px;border-radius:50%;
  background:#fff;padding:4px;
  box-shadow:0 6px 20px rgba(0,0,0,.5);
}
.sidebar-brand .brand-texto{
  display:flex;flex-direction:column;line-height:1.1;
}
.sidebar-brand .brand-texto strong{
  font-size:15px;font-weight:700;color:#fff;letter-spacing:.02em;
}
.sidebar-brand .brand-texto small{
  font-size:10.5px;color:var(--dorado-claro);letter-spacing:.18em;
  text-transform:uppercase;margin-top:3px;
}

.sidebar-nav{display:flex;flex-direction:column;gap:2px;padding:0 12px;flex:1}
.sidebar-nav a{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:10px;
  color:#a8aab0;font-size:14.5px;font-weight:500;
  transition:background var(--t-rapida),color var(--t-rapida);
  position:relative;
}
.sidebar-nav a:hover{background:rgba(255,255,255,.04);color:#fff}
.sidebar-nav a.activo{
  background:rgba(201,169,97,.12);
  color:var(--dorado-claro);
}
.sidebar-nav a.activo::before{
  content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;
  background:var(--dorado);border-radius:0 3px 3px 0;
}
.sidebar-nav .icon{width:20px;height:20px;flex-shrink:0;opacity:.85}
.sidebar-nav a.activo .icon{opacity:1}
.sidebar-nav .nav-badge{
  margin-left:auto;
  background:var(--peligro);color:#fff;
  font-size:11px;font-weight:700;
  padding:1px 7px;border-radius:999px;
}

.sidebar-foot{
  padding:14px 18px 0;
  border-top:1px solid var(--negro-3);
  margin-top:14px;
}
.sidebar-user{
  display:flex;align-items:center;gap:11px;
  padding:10px;border-radius:10px;
  background:rgba(255,255,255,.04);
}
.sidebar-user-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--dorado),var(--dorado-claro));
  display:grid;place-items:center;
  color:var(--negro);font-weight:700;font-size:15px;
}
.sidebar-user-info{flex:1;min-width:0}
.sidebar-user-info strong{display:block;color:#fff;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-user-info small{color:var(--gris-4);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}
.sidebar-actions{display:flex;gap:6px;margin-top:8px}
.sidebar-actions a{
  flex:1;text-align:center;padding:8px;
  background:rgba(255,255,255,.04);border-radius:8px;
  font-size:12px;color:#a8aab0;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:background var(--t-rapida),color var(--t-rapida);
}
.sidebar-actions a:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar-actions a.logout:hover{background:var(--peligro);color:#fff}
.sidebar-actions svg{width:14px;height:14px}

/* Topbar móvil */
.topbar{
  display:none;
  background:#fff;
  border-bottom:1px solid var(--gris-2);
  min-height:78px;
  padding:10px 16px;
  align-items:center;gap:12px;
  position:sticky;top:0;z-index:50;
}
.topbar-toggle{
  display:grid;place-items:center;
  width:42px;height:42px;border-radius:10px;
  color:var(--gris-7);
}
.topbar-toggle:hover{background:var(--gris-1)}
.topbar-brand{display:flex;align-items:center;gap:12px;flex:1}
.topbar-brand img{width:60px;height:60px;border-radius:50%;background:#fff;padding:2px;box-shadow:var(--s-sm)}
.topbar-brand strong{font-size:15px;color:var(--negro);font-weight:700}

/* Main */
.contenido{padding:32px 36px 60px;max-width:1440px}

/* ---------- Botones ---------- */
.btn,button{
  font-family:inherit;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:var(--r-md);
  font-size:14px;font-weight:600;letter-spacing:.005em;
  border:1px solid transparent;cursor:pointer;
  transition:transform var(--t-rapida),background var(--t-rapida),box-shadow var(--t-rapida),border-color var(--t-rapida),color var(--t-rapida);
  white-space:nowrap;
}
.btn svg{width:16px;height:16px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn-primario,
.boton.btn-primario,
button[type=submit]{
  background:var(--negro);color:#fff;
  box-shadow:var(--s-sm);
}
.btn-primario:hover,
button[type=submit]:hover{background:var(--negro-3);box-shadow:var(--s-md)}

.btn-oro{
  background:linear-gradient(135deg,var(--dorado) 0%,var(--dorado-claro) 100%);
  color:var(--negro);box-shadow:var(--s-oro);
}
.btn-oro:hover{box-shadow:0 12px 32px rgba(201,169,97,.4)}

.btn-secundario{
  background:#fff;color:var(--gris-8);border:1px solid var(--gris-2);
}
.btn-secundario:hover{border-color:var(--gris-3);background:var(--gris-1)}

.btn-peligro{background:var(--peligro);color:#fff}
.btn-peligro:hover{background:#dc2626}

.btn-exito{background:var(--exito);color:#fff}
.btn-exito:hover{background:#0e9e6e}

.btn-grande{padding:14px 28px;font-size:15px;width:100%}
.btn-chico{padding:6px 12px;font-size:12.5px}

/* ---------- Tarjetas / Cards ---------- */
.caja,.tarjeta,section.caja{
  background:#fff;
  border:1px solid var(--gris-2);
  border-radius:var(--r-md);
  padding:24px;
  box-shadow:var(--s-xs);
  margin-bottom:18px;
}
.caja h2,.tarjeta h2{margin-bottom:14px}
.caja h3,.tarjeta h3{margin-bottom:10px}
section.caja{margin-bottom:24px}

/* Métrica grande (KPI) */
.metricas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;margin-bottom:24px;
}
.metrica{
  background:#fff;border:1px solid var(--gris-2);
  border-radius:var(--r-md);padding:20px 22px;
  box-shadow:var(--s-xs);
  transition:box-shadow var(--t-media),transform var(--t-media);
  display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;
}
.metrica::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--gris-3);
}
.metrica:hover{box-shadow:var(--s-md);transform:translateY(-2px)}
.metrica.m-oro::before{background:var(--dorado)}
.metrica.m-exito::before{background:var(--exito)}
.metrica.m-peligro::before{background:var(--peligro)}
.metrica.m-info::before{background:var(--info)}
.metrica.m-negro::before{background:var(--negro)}

.metrica-label{
  font-size:12px;font-weight:600;color:var(--gris-5);
  text-transform:uppercase;letter-spacing:.08em;
  display:flex;align-items:center;gap:6px;
}
.metrica-label svg{width:14px;height:14px}
.metrica-valor{font-size:26px;font-weight:700;color:var(--negro);letter-spacing:-.02em;line-height:1.15}
.metrica-extra{font-size:13px;color:var(--gris-5);margin-top:2px}
.metrica-extra.exito{color:var(--exito)}
.metrica-extra.peligro{color:var(--peligro)}

/* Tarjetas estilo dueño (mantenido por compat) */
.tarjetas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;margin-bottom:24px;
}
.tarjeta{padding:22px}
.tarjeta h3{color:var(--gris-7);font-size:14px;font-weight:600;letter-spacing:.02em;margin-bottom:14px;text-transform:uppercase}
.dato{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:7px 0;border-bottom:1px solid var(--gris-1);
}
.dato:last-child{border-bottom:none}
.dato span{font-size:13px;color:var(--gris-5)}
.dato strong{font-weight:600;color:var(--negro);font-size:14.5px}
.dato.grande{padding:8px 0 12px}
.dato.grande span{font-size:12.5px;color:var(--gris-5);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.dato.grande strong{font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--negro)}
.dato.chico span,.dato.chico strong{font-size:13px;color:var(--gris-5);font-weight:500}
.dato.destacado strong{color:var(--dorado-oscuro)}
.resaltado{color:var(--dorado-oscuro)}

/* ---------- Tablas ---------- */
.tabla-wrap{overflow-x:auto;border-radius:var(--r-md);border:1px solid var(--gris-2);background:#fff}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{
  padding:12px 16px;text-align:left;font-size:14px;
  border-bottom:1px solid var(--gris-1);vertical-align:middle;
}
th{
  background:var(--gris-1);color:var(--gris-6);
  font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  border-bottom-color:var(--gris-2);
}
tbody tr:hover{background:var(--gris-1)}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.acciones,th.acciones{text-align:right;white-space:nowrap}

/* ---------- Forms ---------- */
input,select,textarea{
  font-family:inherit;font-size:14px;
  padding:10px 14px;border:1px solid var(--gris-2);
  border-radius:var(--r-md);background:#fff;color:var(--negro);
  transition:border-color var(--t-rapida),box-shadow var(--t-rapida);
  width:100%;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--negro);
  box-shadow:0 0 0 3px rgba(0,0,0,.08);
}
input[type=date],input[type=number]{font-variant-numeric:tabular-nums}

label{
  display:flex;flex-direction:column;gap:6px;
  font-size:13px;font-weight:500;color:var(--gris-6);
}

.form-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;align-items:end;margin-bottom:8px;
}
.form-grid button{margin-top:0}

.fila-form{display:flex;gap:6px;align-items:center}
.fila-form input{width:80px;padding:7px 10px;font-size:13px}
.fila-form button{padding:7px 12px;font-size:12.5px}

/* ---------- Avisos / flash ---------- */
.aviso{
  display:flex;align-items:flex-start;gap:10px;
  padding:13px 16px;border-radius:var(--r-md);
  margin-bottom:18px;font-size:14px;
  border:1px solid;
}
.aviso.ok{background:var(--exito-suave);border-color:var(--exito-borde);color:#065f46}
.aviso.error{background:var(--peligro-suave);border-color:var(--peligro-borde);color:#991b1b}
.aviso a{color:inherit;text-decoration:underline;font-weight:600}

/* ---------- Badges / Pills ---------- */
.badge{
  display:inline-block;
  background:var(--peligro);color:#fff;
  font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:999px;
}
.pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:999px;
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
}
.pill-ok{background:var(--exito-suave);color:#065f46}
.pill-alerta{background:rgba(245,158,11,.12);color:#92400e}
.pill-peligro{background:var(--peligro-suave);color:#991b1b}
.pill-oro{background:var(--dorado-tenue);color:var(--dorado-oscuro)}
.agotado{color:var(--peligro);font-weight:600}
.pagado{color:var(--exito);font-weight:600}
tr.nueva{background:rgba(245,158,11,.06)}

/* Boton borrar */
button.borrar{
  padding:6px 10px;border-radius:8px;
  background:transparent;color:var(--gris-5);
  font-size:12px;font-weight:500;border:1px solid var(--gris-2);
}
button.borrar:hover{color:var(--peligro);border-color:var(--peligro)}

/* ---------- Sección encabezado (dueño/admin) ---------- */
.page-h{margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.page-h h1{display:flex;align-items:center;gap:10px}
.page-h-actions{display:flex;gap:10px}

/* ---------- Resumen por cuenta (cobros) ---------- */
.resumen-cuenta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;margin-bottom:18px;
}
.resumen-cuenta .dato{
  flex-direction:column;align-items:flex-start;gap:4px;
  padding:14px 16px;border-radius:var(--r-md);
  background:var(--gris-1);border:1px solid var(--gris-2);
}
.resumen-cuenta .dato span{font-size:11.5px;text-transform:uppercase;font-weight:600;letter-spacing:.06em;color:var(--gris-5)}
.resumen-cuenta .dato strong{font-size:18px;color:var(--negro);font-weight:700;letter-spacing:-.01em}
.resumen-cuenta .dato.destacado{background:var(--dorado-tenue);border-color:rgba(201,169,97,.3)}
.resumen-cuenta .dato.destacado strong{color:var(--dorado-oscuro)}

/* ---------- Servicios / Lista de items ---------- */
.lista-servicios{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:14px}
.item-servicio{
  background:var(--gris-1);border:1px solid var(--gris-2);
  border-radius:var(--r-md);padding:16px 18px;
}
.item-servicio h4{margin-bottom:5px;color:var(--negro)}
.item-servicio p{font-size:13.5px;color:var(--gris-6)}

/* ---------- Enlace dorado ---------- */
.link-oro,.enlace,.dato a{color:var(--dorado-oscuro);font-weight:600;font-size:14px}
.link-oro:hover,.enlace:hover{color:var(--negro)}
.dato.chico a{font-size:13px}

/* ---------- Enlace caja (copy) ---------- */
.enlace-caja{display:flex;gap:8px;margin-top:12px}
.enlace-caja input{flex:1;background:var(--gris-1);font-family:'JetBrains Mono','Courier New',monospace;font-size:13px}
.enlace-caja .boton,.boton{
  padding:10px 18px;background:var(--negro);color:#fff;
  border-radius:var(--r-md);font-weight:600;font-size:14px;
  display:inline-flex;align-items:center;gap:6px;
}
.enlace-caja .boton:hover{background:var(--negro-3)}

/* ---------- FAQ y detalles ---------- */
.faqs details{
  background:#fff;border:1px solid var(--gris-2);border-radius:var(--r-md);
  margin-bottom:8px;overflow:hidden;
}
.faqs details[open]{box-shadow:var(--s-sm)}
.faqs summary{
  list-style:none;cursor:pointer;
  padding:15px 50px 15px 18px;
  font-weight:600;color:var(--negro);font-size:14.5px;
  position:relative;
}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{
  content:"+";position:absolute;right:18px;top:50%;
  transform:translateY(-50%);
  width:24px;height:24px;border-radius:50%;
  background:var(--gris-1);color:var(--negro);
  display:grid;place-items:center;font-weight:700;font-size:16px;
  transition:transform var(--t-rapida),background var(--t-rapida),color var(--t-rapida);
}
.faqs details[open] summary::after{transform:translateY(-50%) rotate(45deg);background:var(--negro);color:#fff}

/* ---------- Vacío ---------- */
.vacio{color:var(--gris-5);font-size:14px;font-style:italic;text-align:center;padding:14px 0}

/* ---------- Acciones inline ---------- */
.acciones{display:flex;gap:6px;align-items:center;justify-content:flex-end}

/* ============================================
   LOGIN / SETUP / RECUPERAR (pantallas auth)
   ============================================ */
body.auth{
  background:
    radial-gradient(800px 500px at 80% 20%, rgba(201,169,97,.08), transparent 60%),
    radial-gradient(700px 400px at 10% 90%, rgba(201,169,97,.05), transparent 60%),
    var(--negro);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:24px 16px;
}
.auth-card{
  max-width:440px;width:100%;
  background:#fff;border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(201,169,97,.1);
  padding:42px 36px 36px;
  position:relative;
}
.auth-card.setup{max-width:540px}
.auth-brand{
  display:flex;flex-direction:column;align-items:center;
  margin-bottom:24px;
}
.auth-brand img{
  width:96px;height:96px;border-radius:50%;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  margin-bottom:14px;
}
.auth-brand h1{
  font-size:22px;color:var(--negro);font-weight:700;letter-spacing:-.01em;
  text-align:center;
}
.auth-brand .auth-tagline{
  font-size:11.5px;color:var(--dorado-oscuro);
  letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  margin-top:4px;
}
.auth-card .subtitulo{
  text-align:center;color:var(--gris-5);font-size:14px;margin-bottom:24px;
}
.auth-card form{display:flex;flex-direction:column;gap:14px}
.auth-card .form-extra{padding-top:14px;border-top:1px solid var(--gris-1)}
.auth-card h3{
  font-size:13px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--dorado-oscuro);margin:18px 0 4px;font-weight:700;
}
.auth-card .ayuda{font-size:12.5px;color:var(--gris-5);margin-top:-6px}
.auth-card button{width:100%;margin-top:6px;padding:13px;font-size:15px}
.auth-link{
  text-align:center;font-size:13px;color:var(--gris-5);margin-top:18px;
}
.auth-link a{color:var(--negro);font-weight:600;text-decoration:none}
.auth-link a:hover{color:var(--dorado-oscuro)}

/* ============================================
   VENDEDOR — Layout horizontal limpio
   ============================================ */
body.vendedor.v2{background:var(--gris-1)}
body.vendedor.v2 main{max-width:780px;margin:0 auto;padding:20px 16px 60px}
.vendedor-header{
  background:var(--negro);color:#fff;
  padding:14px 18px;
  position:sticky;top:0;z-index:30;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.vendedor-header .marca{
  display:flex;align-items:center;gap:14px;
  font-size:15px;font-weight:700;
  margin-bottom:14px;
  justify-content:center;
}
.vendedor-header .marca img{
  width:80px;height:80px;border-radius:50%;
  background:#fff;padding:3px;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.vendedor-header .marca-texto{display:flex;flex-direction:column;line-height:1.1}
.vendedor-header .marca-texto strong{font-size:16px;color:#fff;font-weight:700}
.vendedor-header .marca-texto small{font-size:10px;color:var(--dorado-claro);letter-spacing:.16em;text-transform:uppercase;margin-top:3px}

.vendedor-nav{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.vendedor-nav a{
  position:relative;
  padding:9px 14px;border-radius:10px;
  color:#a8aab0;text-decoration:none;
  font-size:14px;font-weight:500;
  display:inline-flex;align-items:center;gap:6px;
  transition:background var(--t-rapida),color var(--t-rapida);
}
.vendedor-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.vendedor-nav a.activo{
  background:#fff;color:var(--negro);font-weight:700;
}
.vendedor-nav .badge{margin-left:4px}
.vendedor-nav .icon{width:16px;height:16px}

.vendedor-usuario{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:#a8aab0;
  justify-content:center;
}
.vendedor-usuario a{
  color:#a8aab0;padding:5px 10px;border-radius:6px;
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.04);
}
.vendedor-usuario a:hover{background:rgba(255,255,255,.08);color:#fff}
.vendedor-usuario a.logout:hover{background:var(--peligro);color:#fff}
.vendedor-usuario svg{width:13px;height:13px}

.v-h2{
  font-size:13px;color:var(--gris-6);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  margin:26px 0 12px;
}

.v-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.v-card{
  background:#fff;border:1px solid var(--gris-2);
  border-radius:var(--r-md);padding:18px;
  box-shadow:var(--s-xs);
  display:flex;flex-direction:column;gap:4px;
  position:relative;overflow:hidden;
}
.v-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gris-3)}
.v-card-rojo::before{background:var(--peligro)}
.v-card-verde::before{background:var(--exito)}
.v-card-oro::before{background:var(--dorado)}
.v-card-azul::before{background:var(--info)}
.v-card-gris::before{background:var(--gris-4)}
.v-card .v-label{font-size:12px;color:var(--gris-5);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.v-card .v-num{font-size:24px;color:var(--negro);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:4px 0 2px}
.v-card small{font-size:12px;color:var(--gris-5)}

.v-cuentas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.v-cuenta{
  background:#fff;border:1px solid var(--gris-2);
  border-radius:var(--r-md);padding:18px;box-shadow:var(--s-xs);
}
.v-cuenta h3{color:var(--negro);margin-bottom:10px;font-size:15px;font-weight:700}
.v-fila{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;font-size:14px;border-bottom:1px solid var(--gris-1)}
.v-fila:last-child{border-bottom:none}
.v-fila span{color:var(--gris-5);font-size:13px}
.v-fila strong{color:var(--negro);font-weight:600}
.v-fila.destacado{padding-top:10px}
.v-fila.destacado strong{color:var(--peligro);font-size:16px;font-weight:700}

.v-acciones{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0 14px}
.v-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px;border-radius:var(--r-md);
  font-weight:600;font-size:14.5px;
  transition:transform var(--t-rapida),box-shadow var(--t-rapida);
}
.v-btn:hover{transform:translateY(-1px)}
.v-btn-primario{background:var(--negro);color:#fff;box-shadow:var(--s-sm)}
.v-btn-primario:hover{background:var(--negro-3);box-shadow:var(--s-md)}
.v-btn-secundario{background:#fff;color:var(--negro);border:1.5px solid var(--negro)}
.v-btn-secundario:hover{background:var(--negro);color:#fff}
.v-btn svg{width:16px;height:16px}

.v-lista{
  background:#fff;border:1px solid var(--gris-2);
  border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--s-xs);
}
.v-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:13px 16px;
  border-bottom:1px solid var(--gris-1);
}
.v-item:last-child{border-bottom:none}
.v-item-info{display:flex;flex-direction:column;gap:2px}
.v-item-info strong{color:var(--negro);font-size:14px;font-weight:600}
.v-meta{font-size:12.5px;color:var(--gris-5)}
.v-monto{font-weight:700;color:var(--negro);font-size:14.5px;font-variant-numeric:tabular-nums}
.v-pago .v-monto{color:var(--exito)}
.v-tag{padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:600}
.v-tag-ok{background:var(--exito-suave);color:#065f46}

/* form en vendedor v2 */
.form-vender{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.form-vender select,.form-vender input{padding:13px 14px;font-size:15px;background:#fff}
.form-vender button{padding:14px;font-size:15px;margin-top:4px}

/* Floating WA / wa-flotante (compat) */
.wa-flotante{display:none}

/* ============================================
   Imágenes / utilidades varias
   ============================================ */
.dato a{font-weight:600;font-size:13px}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 960px){
  .app{grid-template-columns:1fr}
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;
    width:280px;
    transform:translateX(-100%);
    transition:transform var(--t-media);
    z-index:80;
    box-shadow:0 0 40px rgba(0,0,0,.5);
  }
  .sidebar.abierto{transform:translateX(0)}
  .topbar{display:flex}
  .contenido{padding:20px 16px 60px}

  .sidebar-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.5);
    z-index:70;opacity:0;pointer-events:none;
    transition:opacity var(--t-media);
  }
  .sidebar-overlay.activo{opacity:1;pointer-events:auto}
}

@media (max-width: 640px){
  body{font-size:14.5px}
  h1{font-size:21px}
  h2{font-size:17px}

  .contenido{padding:18px 14px 50px}
  .caja,.tarjeta{padding:18px}
  .metricas{grid-template-columns:1fr;gap:12px}
  .metrica-valor{font-size:22px}

  .form-grid{grid-template-columns:1fr;gap:12px}
  .tarjetas{grid-template-columns:1fr;gap:12px}
  .v-acciones{grid-template-columns:1fr}

  th,td{padding:10px 12px;font-size:13.5px}
  .tabla-wrap{margin:0 -14px;border-radius:0;border-left:0;border-right:0}

  .vendedor-header{padding:12px 14px}
  .vendedor-nav a{padding:8px 11px;font-size:13.5px}
  .vendedor-nav a span:not(.badge){font-size:13.5px}
  .v-cards{grid-template-columns:1fr}

  .auth-card{padding:32px 22px 24px}
  .auth-brand img{width:84px;height:84px}

  .page-h{flex-direction:column;align-items:flex-start;gap:10px}
  .page-h-actions{width:100%}
  .page-h-actions .btn{flex:1}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

/* ===== Totales por categoría en inventario ===== */
tfoot .fila-total td{
  background:rgba(201,169,97,.08);
  border-top:2px solid rgba(201,169,97,.3);
  font-size:14px;
  padding-top:12px;padding-bottom:12px;
}
tfoot .fila-total td strong{color:#c9a961}
tfoot .fila-total td.num strong{font-size:16px}
.total-rama{
  margin:10px 0 0;
  font-size:14px;color:#4b5563;
}
.total-rama strong{
  color:#c9a961;font-size:16px;font-weight:700;
}

/* ============================================================
   COMPROBANTE DIARIO
   ============================================================ */
.comp-acciones{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  margin-bottom:18px;
}
.comp-filtro{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.comp-filtro label{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#4b5563}
.comp-filtro input[type=date]{
  padding:8px 10px;border:1px solid #e4e6eb;border-radius:8px;
  font-size:14px;background:#fff;
}
.btn-pri{
  background:linear-gradient(135deg,#c9a961,#e0c27b);color:#0a0a0a;
  border:0;padding:9px 18px;border-radius:8px;font-weight:700;cursor:pointer;font-size:14px;
}
.btn-pri:hover{box-shadow:0 6px 18px rgba(201,169,97,.3)}
.btn-sec{
  background:#fff;color:#0a0a0a;
  border:1px solid #e4e6eb;padding:9px 16px;border-radius:8px;font-weight:600;cursor:pointer;font-size:14px;
  text-decoration:none;display:inline-block;
}
.btn-sec:hover{border-color:#0a0a0a}

.comp-hoja{
  background:#fff;border:1px solid #e4e6eb;border-radius:14px;
  padding:34px 38px;box-shadow:0 4px 18px rgba(0,0,0,.04);
  max-width:920px;margin:0 auto;
}
.comp-head{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  padding-bottom:18px;border-bottom:2px solid #c9a961;margin-bottom:24px;
}
.comp-brand{display:flex;align-items:center;gap:14px}
.comp-logo{width:54px;height:54px;border-radius:50%;border:2px solid #c9a961;background:#0a0a0a;padding:4px}
.comp-brand h2{margin:0;font-size:22px;color:#0a0a0a;letter-spacing:-.01em}
.comp-brand small{display:block;font-size:12px;color:#6b7280;letter-spacing:.05em;text-transform:uppercase;margin-top:2px}
.comp-fecha{text-align:right}
.comp-fecha small{display:block;font-size:11px;color:#9ca3af;letter-spacing:.1em;text-transform:uppercase}
.comp-fecha strong{display:block;font-size:22px;color:#0a0a0a;font-variant-numeric:tabular-nums;margin-top:2px}

.comp-seccion{margin-bottom:26px}
.comp-seccion h3{
  font-size:14px;color:#c9a961;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid #f0f2f6;
}
.comp-tabla{width:100%;border-collapse:collapse;font-size:14px}
.comp-tabla th,.comp-tabla td{
  padding:9px 10px;border-bottom:1px solid #f0f2f6;text-align:left;
}
.comp-tabla th{
  background:#fafbfd;font-size:12px;color:#4b5563;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
}
.comp-tabla td.num,.comp-tabla th.num{text-align:right;font-variant-numeric:tabular-nums}
.comp-tabla tfoot td{
  background:#fdfaf2;border-top:2px solid #c9a961;border-bottom:0;
  padding-top:12px;padding-bottom:12px;font-size:14.5px;
}
.comp-tabla tfoot td strong{color:#c9a961}
.comp-vacio{
  padding:18px;background:#fafbfd;border:1px dashed #e4e6eb;border-radius:8px;
  text-align:center;color:#6b7280;font-style:italic;
}

.comp-resumen{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin:24px 0 26px;padding:18px;
  background:linear-gradient(180deg,#fdfaf2,#fff);
  border:1px solid rgba(201,169,97,.3);border-radius:12px;
}
.comp-resumen-item{text-align:center}
.comp-resumen-item small{display:block;font-size:11px;color:#6b7280;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.comp-resumen-item strong{display:block;font-size:22px;color:#0a0a0a;font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin-top:4px}
.comp-resumen-item.destacado strong{color:#c9a961;font-size:26px}

.comp-firmas{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;
  margin-top:46px;padding:0 24px;
}
.comp-firma{text-align:center}
.comp-firma-line{height:1px;background:#0a0a0a;margin-bottom:8px}
.comp-firma small{font-size:12px;color:#6b7280;letter-spacing:.04em}

.comp-pie{
  margin-top:24px;font-size:11px;color:#9ca3af;text-align:center;font-style:italic;
}

/* ===== Modo impresión ===== */
@media print{
  body{background:#fff !important}
  .no-print, header.barra-superior, nav.barra-nav, .barra-superior, footer, .flash, .nav-badge, .menu-toggle{display:none !important}
  .comp-acciones{display:none !important}
  .comp-hoja{
    box-shadow:none !important;border:0 !important;padding:0 !important;margin:0 !important;max-width:100% !important;
  }
  @page{margin:1.4cm}
}

@media (max-width:600px){
  .comp-hoja{padding:22px 18px}
  .comp-head{flex-direction:column;align-items:flex-start;gap:10px}
  .comp-fecha{text-align:left}
  .comp-resumen{grid-template-columns:1fr;gap:12px}
  .comp-firmas{grid-template-columns:1fr;gap:30px}
  .comp-tabla{font-size:13px}
  .comp-tabla th,.comp-tabla td{padding:8px 6px}
}

/* Link al comprobante de pago */
.link-comp{
  display:inline-block;padding:4px 10px;border-radius:6px;
  background:rgba(201,169,97,.1);color:#a88a47;
  font-size:12.5px;font-weight:600;text-decoration:none;
  border:1px solid rgba(201,169,97,.25);transition:.15s;
}
.link-comp:hover{background:rgba(201,169,97,.2);color:#0a0a0a}