/* ============================================================
   vanheusen.css — Sistema de diseño Van Heusen
   Estilos compartidos por todas las páginas del proyecto
   ============================================================ */

/* ── Variables ───────────────────────────────────────────── */
:root {
  /* Colores de marca */
  --g-red:    #c0392b;
  --g-yellow: #e8a020;
  --g-blue:   #2471a3;
  --g-green:  #1e8449;

  /* Texto y fondo */
  --text:       #1a1a1a;
  --sub:        #888;
  --bg:         #f0ede8;
  --card:       #ffffff;
  --border:     #e0ddd8;

  /* Inputs */
  --inp-bg:  #fafaf8;
  --inp-bd:  #ddd;
  --tool-bg: #fafaf8;
  --tool-bd: #e8e5e0;

  /* Tabla */
  --th-bg:      #1a1a1a;
  --th-color:   #aaa;
  --row-hover:  #faf8f5;
  --row-sel:    rgba(192,57,43,0.07);
  --row-sel-bd: rgba(192,57,43,0.25);

  /* Secciones */
  --section-bg: #f7f5f2;

  /* ── Escala tipográfica (uso opt-in, sin romper código actual) ──
     Definida en :root para que cualquier página pueda usar las vars.
     Naming convention: --fs-{nivel} y --ls-{nivel} para letter-spacing
     consistentes con el estilo editorial VH. */
  --fs-hero:      24px;   /* Page title (h1) — VistaTraductor "TRADUCTOR" */
  --fs-title:     18px;   /* Section heading (h2) — "Datos del Pedido" */
  --fs-subtitle:  13px;   /* Subsection (h3) */
  --fs-body:      12px;   /* Body text por defecto */
  --fs-small:     11px;   /* Helper text, descripciones */
  --fs-xs:         9px;   /* Labels, badges, metadata */
  --fs-mono:      11px;   /* Códigos, SKUs, numeric */

  /* Letter-spacing por estilo */
  --ls-tight:     -0.02em;  /* Heroes (números grandes) */
  --ls-normal:     0;
  --ls-wide:       0.06em;  /* Labels uppercase */
  --ls-wider:      0.14em;  /* Buttons uppercase */
  --ls-widest:     0.22em;  /* Section labels editorial */
}

[data-dark="1"] {
  --text:       #e8e6e2;
  --sub:        #a8a6a2;
  --bg:         #0d0d0d;
  --card:       #1a1a1a;
  --border:     #2a2a2a;
  --inp-bg:     #222;
  --inp-bd:     #333;
  --tool-bg:    #252525;
  --tool-bd:    #333;
  --th-bg:      #111;
  --th-color:   #a8a6a2;
  --row-hover:  #1f1f1f;
  --row-sel:    rgba(192,57,43,0.13);
  --row-sel-bd: rgba(192,57,43,0.3);
  --section-bg: #161616;
}
[data-dark="1"] select option { background: var(--card); color: var(--text); }
[data-dark="1"] .vh-logo-text { color: #dddddd !important; }
[data-dark="1"] input::placeholder, [data-dark="1"] textarea::placeholder { color: #888; }

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

/* ── Body base ───────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background .4s, color .4s;
}

/* ── Topbar ──────────────────────────────────────────────── */
.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  height: 56px;
  min-height: 56px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  gap: 8px;
  transition: background .4s, border-color .4s;
}
.topbar-left  { display: flex; align-items: center; gap: 10px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
}
.vh-logo-svg { flex-shrink: 0; }
.vh-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 2px;
}
.vh-logo-text {
  font-family: 'Arial Black', Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 4px;
  color: #555555;
  font-size: 14px;
}
.vh-logo-subtitle {
  font-size: 8px;
  letter-spacing: 0.25em;
  color: #888;
  font-weight: 500;
  text-transform: uppercase;
}
.topbar-divider  { width: 1px; height: 20px; background: var(--border); }
.topbar-subtitle {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sub);
}

/* ── Banda de colores (Guacamaya) ────────────────────────── */
.topbar-stripe,
.macaw-stripe { display: flex; height: 3px; min-height: 3px; flex-shrink: 0; }
.topbar-stripe span,
.macaw-stripe span { flex: 1; }
.topbar-stripe .s1, .macaw-stripe .s1 { background: var(--g-red); }
.topbar-stripe .s2, .macaw-stripe .s2 { background: var(--g-yellow); }
.topbar-stripe .s3, .macaw-stripe .s3 { background: var(--g-blue); }
.topbar-stripe .s4, .macaw-stripe .s4 { background: var(--g-green); }

/* ── Botones de topbar ───────────────────────────────────── */
.tbtn {
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
  height: 34px;
  color: var(--text);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.tbtn:hover     { background: var(--tool-bg); border-color: var(--text); }
.tbtn.icon-only { width: 34px; padding: 0; }
.tbtn.ico       { width: 34px; padding: 0; }
.tbtn svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
/* ── Ícono de tema: sol amarillo en modo oscuro ────────── */
/* Colorea el ícono (aplica a darkBtn y themeBtn) */
[data-dark="1"] #darkBtn  svg,
[data-dark="1"] #themeBtn svg { color: #e8a020; }

/* Rellena el círculo del sol (de hueco a sólido) */
[data-dark="1"] #darkBtn  svg circle,
[data-dark="1"] #themeBtn svg circle { fill: currentColor; stroke: none; }

/* ── Responsive: tablet ───────────────────────────────────── */
@media (max-width: 768px) {
  main { padding: 28px 14px 24px; }
  .card-body { padding: 16px; }
  .prenda-body { padding: 14px; }
  .form-actions { flex-wrap: wrap; }
  .form-actions .btn { flex: 1; min-width: 120px; justify-content: center; }
  .check-grid { grid-template-columns: 1fr 1fr; }
  .grid-wrapper table { min-width: 600px; }
  .modal-box { width: min(98vw, 1100px); height: min(90vh, 620px); }
}

/* ── Responsive: móvil ───────────────────────────────────── */
@media (max-width: 520px) {
  .topbar { padding: 0 14px; height: 48px; min-height: 48px; }
  .topbar-subtitle, .topbar-divider { display: none; }
  .topbar-brand { font-size: 14px; }
  .tbtn .lbl, .tbtn .btn-label { display: none; }
  .tbtn { padding: 0 8px; height: 30px; }
  .tbtn.icon-only, .tbtn.ico { width: 30px; padding: 0; }
  .tbtn svg { width: 14px; height: 14px; }

  main { padding: 20px 12px 20px; gap: 20px; }
  .page-title { font-size: 15px; }
  .page-sub { font-size: 9px; }

  .card-header { padding: 12px 14px; font-size: 9px; }
  .card-body { padding: 14px; }
  .prenda-header { padding: 8px 12px; }
  .prenda-body { padding: 12px; }

  .form-grid { gap: 12px; }
  .field label { font-size: 8px; }
  .field input, .field select, .field textarea { font-size: 13px; padding: 8px 10px; }
  .field textarea { min-height: 60px; }
  .field-note { font-size: 9px; }

  .check-grid { grid-template-columns: 1fr; gap: 6px; }
  .check-item { font-size: 11px; padding: 6px 8px; }

  .upload-area { padding: 16px 12px; }
  .upload-label { font-size: 10px; }

  .form-actions { gap: 8px; padding-top: 16px; }
  .form-actions .btn { flex: 1; min-width: 0; font-size: 9px; padding: 0 12px; height: 34px; }

  .btn-add-prenda { font-size: 9px; padding: 9px; }
  .btn-remove { font-size: 10px; }
  .btn-crear { font-size: 11px; padding: 12px 16px; }

  .grid-toolbar { gap: 8px; }
  .search-box { height: 34px; }
  .grid-wrapper table { min-width: 500px; }
  .badge { font-size: 8px; padding: 2px 6px; }
  .grid-loading { padding: 24px 12px; font-size: 11px; }

  .modal-box { width: 100vw; height: 100vh; }
  .modal-header { height: 40px; }

  footer { font-size: 9px; padding: 14px 12px; gap: 6px; }
}

/* ── Botones de acción ───────────────────────────────────── */
.btn {
  border: none;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: inherit;
  font-weight: 400;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity .15s;
  white-space: nowrap;
}
.btn svg {
  width: 13px; height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn:hover    { opacity: .82; }
.btn:disabled { opacity: .3; cursor: not-allowed; }

.btn-primary { background: var(--g-blue);   color: #fff; }
.btn-danger  { background: var(--g-red);    color: #fff; }
.btn-save    { background: var(--g-green);  color: #fff; }
.btn-process { background: var(--g-blue);   color: #fff; }
.btn-add     { background: var(--g-green);  color: #fff; }
.btn-ghost   { background: none; border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--inp-bg); border-color: var(--text); }
.btn-cancel  { background: var(--th-bg); color: #e8e6e2; }
.btn-print   { background: var(--th-bg); color: #e8e6e2; }
.btn-sm      { padding: 6px 12px; font-size: 9px; }

/* ── Tabla ───────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 12px; }
thead th {
  background: var(--th-bg);
  color: var(--th-color);
  padding: 8px 14px;
  text-align: left;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
thead th.sticky { position: sticky; top: 0; z-index: 2; }
tbody tr { border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s; }
tbody tr:last-child { border-bottom: 0; }
tbody tr:hover    { background: var(--row-hover); }
tbody tr.selected { background: var(--row-sel); outline: 1px solid var(--row-sel-bd); }
tbody td { padding: 8px 14px; color: var(--text); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--g-red);
  padding: 12px 18px 12px 14px;
  display: flex; align-items: center; gap: 12px;
  min-width: 260px; max-width: 90vw;
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
  z-index: 9998;
}
.toast.show { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); }
.toast-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.toast-icon.info { background: #e8f0fb; }
.toast-icon.info svg { fill: var(--g-blue); }
.toast-icon.warn { background: #fdecea; }
.toast-icon.warn svg { fill: var(--g-red); }
.toast-icon.ok   { background: #e6f4ec; }
.toast-icon.ok   svg { fill: var(--g-green); }
[data-dark="1"] .toast-icon.info { background: #1a2e3d; }
[data-dark="1"] .toast-icon.warn { background: #2e1a1a; }
[data-dark="1"] .toast-icon.ok   { background: #1a2e1a; }
.toast-icon svg  { width: 11px; height: 11px; }
.toast-msg   { font-size: 12px; color: var(--text); line-height: 1.4; flex: 1; }
.toast-close {
  background: none; border: none; cursor: pointer;
  color: var(--sub); font-size: 16px; padding: 0 0 0 8px;
  transition: color .2s;
}
.toast-close:hover { color: var(--text); }

/* ── Modal ───────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
  background: var(--card);
  border: 1px solid var(--border);
  width: min(92vw, 860px);
  height: min(85vh, 640px);
  display: flex; flex-direction: column;
  transform: translateY(16px); transition: transform .25s;
}
.modal-overlay.open .modal-box { transform: translateY(0); }
.modal-header {
  background: var(--th-bg);
  height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
}
.modal-title  { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--th-color); }
.modal-close  { background: none; border: none; cursor: pointer; color: var(--th-color); font-size: 20px; line-height: 1; padding: 0; transition: color .15s; }
.modal-close:hover { color: #fff; }
.modal-iframe { flex: 1; border: none; width: 100%; }

/* ── Franja guacamaya en TODOS los modales — identidad VH ─────
   Pseudo-element :before sobre los 5 patrones de contenedor de
   modal usados en el proyecto:
     - .modal-box (legado)
     - .mbox (nuevo)
     - .u-modal-box (Usuarios)
     - .modal-overlay > .modal (Inventario, CuentasPorCobrar)
     - .pw-modal-box (Cambiar contraseña en index.html)
   El padre necesita position:relative para anclar el pseudo.
   La franja queda sobre el borde superior. */
.modal-box,
.mbox,
.u-modal-box,
.modal-overlay > .modal,
.pw-modal-box { position: relative; }

.modal-box::before,
.mbox::before,
.u-modal-box::before,
.modal-overlay > .modal::before,
.pw-modal-box::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    var(--g-red)    0%  25%,
    var(--g-yellow) 25% 50%,
    var(--g-blue)   50% 75%,
    var(--g-green)  75% 100%);
  z-index: 2;
  pointer-events: none;
}

/* ── Accesibilidad — focus-visible global ─────────────────────
   Anillo de focus consistente para usuarios de teclado en TODOS los
   elementos interactivos. Solo aparece con :focus-visible (no con
   click del mouse). Cumple WCAG 2.4.7 (Focus Visible). */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
[role="button"]:focus-visible,
[role="option"]:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid var(--g-blue);
  outline-offset: 2px;
  border-radius: 1px;
}

/* ── Accesibilidad — prefers-reduced-motion ───────────────────
   Respetar la preferencia del SO de reducir movimiento (usuarios con
   vestibular issues, fotofobia, ansiedad). Apaga animaciones y
   transiciones que pueden causar mareo. Cumple WCAG 2.3.3. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Skeleton sin shimmer (solo bg estático) */
  .vh-skeleton { animation: none !important; background-image: none !important; }
  /* Modales aparecen instantáneos */
  .moverlay, .modal-overlay, .moverlay .mbox, .modal-overlay .modal-box {
    transition: none !important;
  }
}

/* ── Accesibilidad — skip link ──────────────────────────────
   Permite a usuarios de teclado saltar el topbar/nav e ir directo al
   contenido. Invisible hasta que recibe focus. WCAG 2.4.1. */
.vh-skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 99999;
  background: var(--text); color: var(--card);
  padding: 10px 16px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  text-decoration: none;
}
.vh-skip-link:focus { left: 8px; }

/* ── Accesibilidad — aria-invalid en inputs ──────────────────
   Cuando un form valida y marca un input con aria-invalid="true",
   se le da contorno rojo. Pareja con aria-describedby al mensaje. */
[aria-invalid="true"],
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--g-red) !important;
  background-color: rgba(192,57,43,0.04);
}
[aria-invalid="true"]:focus-visible {
  outline-color: var(--g-red);
}

/* ── vh-page-head — Header editorial unificado ───────────────
   Patrón estándar VH para el encabezado de cualquier página. Soporta:
   - Sub (label uppercase con letter-spacing) sobre el título
   - Título grande editorial (font-weight 300)
   - Acciones al lado derecho (botones, dropdowns)
   - Divider opcional con franja guacamaya pequeña

   Estructura:
     <div class="vh-page-head">
       <div class="vh-page-head-text">
         <div class="vh-page-sub">Mantenimiento</div>
         <div class="vh-page-title">Traductor</div>
         <div class="vh-page-divider"></div>   <!-- opcional, franja chiquita -->
       </div>
       <div class="vh-page-actions">
         <button>Acción</button>
       </div>
     </div>
*/
.vh-page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.vh-page-head-text { display: flex; flex-direction: column; gap: 2px; }
.vh-page-sub {
  font-size: 10px; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--sub);
}
.vh-page-title {
  font-size: 22px; font-weight: 300;
  letter-spacing: 0.08em; color: var(--text);
  line-height: 1.2;
}
.vh-page-divider {
  width: 64px; height: 3px; margin-top: 10px;
  background: linear-gradient(90deg,
    var(--g-red)    0%  25%,
    var(--g-yellow) 25% 50%,
    var(--g-blue)   50% 75%,
    var(--g-green)  75% 100%);
}
.vh-page-actions {
  display: flex; gap: 10px; flex-wrap: nowrap; flex-shrink: 0;
  align-self: center;
}
@media (max-width: 760px) {
  .vh-page-head { gap: 10px; }
  .vh-page-title { font-size: 18px; }
  .vh-page-actions { width: 100%; }
  .vh-page-actions > * { flex: 1; }
}

/* ── vh-kpi — KPI card unificado ─────────────────────────────
   Reemplaza las 3 variantes que conviven hoy (Inventario, Catálogo,
   ArticuloTraductor, Traductor). Soporta border-left por color y
   variante con franja guacamaya arriba.

   Estructura:
     <div class="vh-kpis">
       <div class="vh-kpi vh-kpi--blue">
         <div class="vh-kpi-label">Total</div>
         <div class="vh-kpi-value">154</div>
         <div class="vh-kpi-sub">en SAP</div>
       </div>
       ...
     </div>
*/
.vh-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.vh-kpi {
  background: var(--card); border: 1px solid var(--border);
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.vh-kpi--blue   { border-left: 3px solid var(--g-blue);   padding-left: 15px; }
.vh-kpi--green  { border-left: 3px solid var(--g-green);  padding-left: 15px; }
.vh-kpi--yellow { border-left: 3px solid var(--g-yellow); padding-left: 15px; }
.vh-kpi--red    { border-left: 3px solid var(--g-red);    padding-left: 15px; }
.vh-kpi--amber  { border-left: 3px solid #b45309;         padding-left: 15px; }
/* Variante con franja guacamaya arriba (en lugar de border-left) */
.vh-kpi--stripe { padding-top: 17px; }
.vh-kpi--stripe::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    var(--g-red)    0%  25%,
    var(--g-yellow) 25% 50%,
    var(--g-blue)   50% 75%,
    var(--g-green)  75% 100%);
}
.vh-kpi-label {
  font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--sub); font-weight: 600;
}
.vh-kpi-value {
  font-size: 26px; font-weight: 600; color: var(--text);
  line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.vh-kpi-sub { font-size: 10px; color: var(--sub); }
@media (max-width: 699px) {
  .vh-kpi-value { font-size: 22px; }
  .vh-kpi { padding: 12px 14px; }
  .vh-kpi[class*="vh-kpi--"]:not(.vh-kpi--stripe) { padding-left: 11px; }
}

/* ── Select dropdowns — flecha SVG custom global ─────────────
   Reemplaza la flecha nativa del browser (que varía por OS) con una
   flecha consistente VH. Aplica a TODOS los <select> excepto los que
   ya tengan estilo propio o el atributo data-vh-noarrow. */
select:not([data-vh-noarrow]):not([multiple]):not([size]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
[data-dark="1"] select:not([data-vh-noarrow]):not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

/* ── Sticky thead — opt-in con .vh-sticky-thead en la tabla
   Por qué opt-in: algunas tablas existentes hacen scroll en un wrapper
   externo (Inventario, Traductor) y ya tienen sticky propio. Aplicar
   global rompería esos. Las páginas que lo quieran agregan la clase. */
.vh-sticky-thead thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--th-bg, #1a1a1a);
}

/* ── Skeleton (loading state) ────────────────────────────────
   Componente shimmer reutilizable para "está cargando" en cualquier
   página. Uso:
     <div class="vh-skeleton" style="width:120px; height:14px;"></div>
     <div class="vh-skeleton vh-skeleton-line"></div>          ← line por default
     <div class="vh-skeleton vh-skeleton-block"></div>         ← bloque alto
   Estructura típica:
     <div class="vh-skeleton-row">
       <div class="vh-skeleton vh-skeleton-line"></div>
       <div class="vh-skeleton vh-skeleton-line"></div>
     </div>
*/
@keyframes vhShimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.vh-skeleton {
  display: inline-block;
  background: var(--inp-bg);
  background-image: linear-gradient(
    90deg,
    var(--inp-bg) 0%,
    var(--border) 50%,
    var(--inp-bg) 100%
  );
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: vhShimmer 1.4s ease-in-out infinite;
  border: 1px solid transparent;
}
[data-dark="1"] .vh-skeleton {
  background-image: linear-gradient(
    90deg,
    var(--inp-bg) 0%,
    #3a3a3a 50%,
    var(--inp-bg) 100%
  );
}
.vh-skeleton-line  { height: 12px; width: 100%; margin: 4px 0; }
.vh-skeleton-block { height: 60px; width: 100%; margin: 6px 0; }
.vh-skeleton-circle { width: 32px; height: 32px; border-radius: 50%; }
.vh-skeleton-row {
  display: flex; gap: 14px; padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.vh-skeleton-row .vh-skeleton-line { flex: 1; }

/* ── Toast global (vh-toast.js) ──────────────────────────────
   Helper de notificaciones consistente en todo el sistema. Se auto-
   inyecta vía js/vh-toast.js. Tipos: info | ok | err | warn. */
.vh-toast {
  position: fixed; left: 50%; bottom: 32px;
  transform: translateX(-50%) translateY(20px);
  background: var(--card); border: 1px solid var(--border);
  border-left: 3px solid var(--g-blue);
  padding: 12px 16px 12px 14px;
  font-family: inherit; font-size: 12px; color: var(--text);
  display: flex; align-items: center; gap: 10px;
  min-width: 280px; max-width: 480px;
  opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s;
  z-index: 9500;
}
.vh-toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
  pointer-events: all;
}
.vh-toast[data-type="ok"]   { border-left-color: var(--g-green); }
.vh-toast[data-type="err"]  { border-left-color: var(--g-red); }
.vh-toast[data-type="warn"] { border-left-color: var(--g-yellow); }
.vh-toast-msg { flex: 1; min-width: 0; line-height: 1.4; }
.vh-toast-close {
  background: none; border: none; cursor: pointer;
  color: var(--sub); font-size: 18px; line-height: 1;
  margin-left: auto; padding: 0 4px;
  transition: color .15s;
}
.vh-toast-close:hover { color: var(--text); }
@media (max-width: 520px) {
  .vh-toast {
    left: 14px; right: 14px; bottom: 18px;
    transform: translateY(20px); min-width: 0; max-width: none;
  }
  .vh-toast.show { transform: translateY(0); }
}

/* ── Spinner ─────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes vhDotPulse { 0%,80%,100%{opacity:.2;transform:scale(.6);} 40%{opacity:1;transform:scale(1);} }
.spin-ring {
  width: 22px; height: 22px;
  border: 1.5px solid var(--border);
  border-top-color: var(--g-red);
  border-radius: 50%;
  animation: spin .9s linear infinite;
  flex-shrink: 0;
}
.spin { animation: spin .9s linear infinite; }

/* Spinner VH con puntos de colores + logo */
.vh-spinner {
  position: relative; width: 64px; height: 64px; display: inline-block;
}
.vh-spinner-dots {
  position: absolute; inset: 0; animation: spin 1.8s linear infinite;
}
.vh-spinner-dots span {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  animation: vhDotPulse 1.4s ease-in-out infinite;
}
.vh-spinner-dots span:nth-child(1) { background: #C0392B; top: 0; left: 50%; margin-left: -4px; animation-delay: 0s; }
.vh-spinner-dots span:nth-child(2) { background: #D4A017; top: 50%; right: 0; margin-top: -4px; animation-delay: 0.2s; }
.vh-spinner-dots span:nth-child(3) { background: #2563EB; bottom: 0; left: 50%; margin-left: -4px; animation-delay: 0.4s; }
.vh-spinner-dots span:nth-child(4) { background: #16A34A; top: 50%; left: 0; margin-top: -4px; animation-delay: 0.6s; }
.vh-spinner-logo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}

/* ── Main layout ─────────────────────────────────────────── */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 16px 32px;
  gap: 32px;
}

/* ── Page header ─────────────────────────────────────────── */
.page-header { text-align: center; }
.page-title {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.page-sub {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sub);
  margin-top: 5px;
}
.page-divider {
  width: 36px; height: 1px;
  background: var(--g-red);
  margin: 12px auto 0;
}

/* ── Empty state ─────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--sub);
}
.empty-state svg {
  width: 48px; height: 48px;
  fill: none;
  stroke: var(--border);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 16px;
}
.empty-title {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--text);
}
.empty-sub {
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* ── Search box ──────────────────────────────────────────── */
.search-box {
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 0 12px;
  height: 36px;
  transition: border-color .2s;
}
.search-box:focus-within { border-color: var(--g-blue); }
.search-box svg {
  width: 14px; height: 14px;
  fill: none;
  stroke: var(--sub);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.search-box input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  letter-spacing: 0.04em;
  width: 100%;
}
.search-box input::placeholder { color: var(--sub); }

/* ── Grid toolbar ────────────────────────────────────────── */
.grid-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.grid-info {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sub);
}

/* ── Grid wrapper ────────────────────────────────────────── */
.grid-wrapper {
  background: var(--card);
  border: 1px solid var(--border);
  overflow-x: auto;
  transition: background .4s, border-color .4s;
}
.grid-wrapper table { min-width: 700px; }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  font-weight: 400;
}
.badge-enviado    { background: rgba(30,132,73,0.1);  color: var(--g-green); }
.badge-borrador   { background: rgba(232,160,32,0.1); color: var(--g-yellow); }
.badge-incompleto { background: rgba(192,57,43,0.1);  color: var(--g-red); }

/* ── Grid loading ────────────────────────────────────────── */
.grid-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--sub);
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* ── Row actions ─────────────────────────────────────────── */
.row-actions {
  opacity: 0;
  transition: opacity .15s;
  display: flex;
  gap: 6px;
}
tbody tr:hover .row-actions { opacity: 1; }
.row-actions button {
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color .15s, background .15s;
}
.row-actions button:hover { border-color: var(--text); background: var(--tool-bg); }
.row-actions svg {
  width: 13px; height: 13px;
  fill: none;
  stroke: var(--sub);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.row-actions button:hover svg { stroke: var(--text); }

/* ── Btn crear (dashed) ──────────────────────────────────── */
.btn-crear {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--card);
  border: 2px dashed var(--border);
  color: var(--sub);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  text-decoration: none;
}
.btn-crear:hover {
  border-color: var(--g-red);
  color: var(--g-red);
  background: rgba(192,57,43,0.04);
}
.btn-crear svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ── Card ────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  transition: background .4s, border-color .4s;
}
.card-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--sub);
  transition: border-color .4s;
}
.card-body { padding: 20px; }

/* ── Form grid ───────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-grid .span2 { grid-column: span 2; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sub);
}
.field input,
.field select,
.field textarea {
  background: var(--inp-bg);
  border: 1px solid var(--inp-bd);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 9px 12px;
  outline: none;
  border-radius: 0;
  transition: border-color .2s, background .4s;
  width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--g-red); }
.field input::placeholder,
.field textarea::placeholder { color: #bbb; }
.field textarea { resize: vertical; min-height: 80px; }

/* ── Foco visible por teclado en TODOS los botones ──────────
   Sin esto la navegación con Tab pierde el indicador de foco
   (especialmente notorio en Safari). Solo aparece con teclado
   gracias a :focus-visible — clicks con mouse no lo activan. */
.btn:focus-visible,
.tbtn:focus-visible,
.tool-btn:focus-visible,
.btn-crear:focus-visible,
.chip:focus-visible {
  outline: 2px solid var(--g-blue);
  outline-offset: 2px;
}

.field label .req { color: var(--g-red); margin-left: 2px; }
.field-note {
  font-size: 10px; color: var(--sub);
  letter-spacing: 0.04em; margin-top: 2px;
}

/* ── Form sub-section ────────────────────────────────────── */
.form-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.form-section-title {
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--g-red); margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.form-section-title::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ── Checkbox grid ───────────────────────────────────────── */
.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 2px;
}
.check-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text); cursor: pointer;
  padding: 7px 10px;
  border: 1px solid var(--inp-bd);
  background: var(--inp-bg);
  transition: border-color .2s, background .2s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.check-item:hover { border-color: var(--g-red); }
.check-item input[type="checkbox"] { accent-color: var(--g-red); width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }
.check-item.checked { border-color: var(--g-red); background: rgba(192,57,43,0.05); }

/* ── Conditional field ───────────────────────────────────── */
.cond-field { display: none; }

/* ── Repeatable entry (prendas, logos) ────────────────────── */
.prenda-list { display: flex; flex-direction: column; gap: 16px; }

.prenda-entry {
  border: 1px solid var(--border);
  background: var(--inp-bg);
  transition: background .4s, border-color .4s;
}
.prenda-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: var(--th-bg, #f7f5f2);
  border-bottom: 1px solid var(--border);
  transition: background .4s;
}
[data-dark="1"] .prenda-header { background: #1a1a1a; }
.prenda-num {
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--sub);
}
.btn-remove {
  background: none; border: none; cursor: pointer;
  color: var(--sub); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  font-family: inherit; display: flex; align-items: center; gap: 5px;
  padding: 4px 8px; transition: color .2s;
}
.btn-remove:hover { color: var(--g-red); }
.btn-remove svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.prenda-body { padding: 16px; }

.btn-add-prenda {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px;
  border: 1px dashed var(--inp-bd); background: none; cursor: pointer;
  font-family: inherit; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sub);
  transition: border-color .2s, color .2s; margin-top: 4px;
}
.btn-add-prenda:hover { border-color: var(--g-red); color: var(--g-red); }
.btn-add-prenda svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* ── Upload area ─────────────────────────────────────────── */
.upload-area {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 24px 16px;
  border: 1px dashed var(--inp-bd); background: var(--inp-bg);
  cursor: pointer; transition: border-color .2s;
  text-align: center; position: relative;
}
.upload-area:hover { border-color: var(--g-red); }
.upload-area input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-area svg { width: 24px; height: 24px; fill: none; stroke: var(--sub); stroke-width: 1.5; stroke-linecap: round; }
.upload-label { font-size: 11px; color: var(--sub); letter-spacing: 0.08em; }
.upload-label strong { color: var(--g-red); }
.upload-preview { font-size: 11px; color: var(--g-green); margin-top: 2px; }

/* ── Critical banner ─────────────────────────────────────── */
.critical-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(232,160,32,0.08);
  border: 1px solid rgba(232,160,32,0.3);
  border-left: 3px solid var(--g-yellow);
  padding: 10px 14px;
  margin-bottom: 20px;
  font-size: 11px; color: var(--text); line-height: 1.5;
}
.critical-banner svg {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px;
  fill: var(--g-yellow);
}

/* ── Form actions ────────────────────────────────────────── */
.form-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* ── Toast variants ──────────────────────────────────────── */
.toast.ok   { border-left-color: var(--g-green); }
.toast.warn { border-left-color: var(--g-yellow); }
.toast.info { border-left-color: var(--g-blue); }

/* ── Footer ──────────────────────────────────────────────── */
footer {
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sub);
  padding: 20px 16px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
  transition: color .4s, border-color .4s;
}
.footer-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--g-red); display: inline-block; }

/* ── Utilidades globales (shared across pages) ──────────── */
.u-hidden           { display: none !important; }
.u-text-right       { text-align: right; }
.u-text-center      { text-align: center; }
.u-flex-1           { flex: 1; }
.u-mt-10            { margin-top: 10px; }
.u-mt-20            { margin-top: 20px; }
.u-mb-12            { margin-bottom: 12px; }
.u-flex-between     { display: flex; align-items: center; justify-content: space-between; }
.u-flex-col         { display: flex; flex-direction: column; }
.u-bg-red           { background: var(--g-red); }
.u-bg-yellow        { background: var(--g-yellow); }
.u-bg-blue          { background: var(--g-blue); }
.u-bg-green         { background: var(--g-green); }
.u-text-sub-11      { font-size: 11px; color: var(--sub); }
.u-text-13          { font-size: 13px; color: var(--text); margin-bottom: 4px; }
.u-modal-footer     { padding: 0 20px 20px; display: flex; gap: 8px; justify-content: flex-end; }
.u-modal-body-pad   { padding: 24px 20px; text-align: center; }
.u-border-top-text  { border-top: 2px solid var(--text); }

/* ════════════════════════════════════════════════════════════════════
   STANDARD · Highlight de filtros activos
   Cualquier <select> que tenga la clase `.is-active` (porque su value !== '')
   se resalta en ROJO (--g-red): borde rojo, fondo rosado sutil, texto rojo bold.
   Standard del producto: cuando un filtro está aplicado, el usuario ve
   inmediatamente cuáles están encendidos.
   Las páginas individuales solo necesitan hacer el toggle en JS:
     selectEl.classList.toggle('is-active', !!selectEl.value);
   `!important` en todas las propiedades porque varias páginas tienen reglas
   `.toolbar select { background, color, ... }` en sus <style> locales (cargados
   después de este CSS), y queremos que el standard gane sin necesidad de
   override por página.
   ════════════════════════════════════════════════════════════════════ */
select.is-active {
  border-color: var(--g-red) !important;
  color: var(--g-red) !important;
  font-weight: 600 !important;
  background-color: rgba(192, 57, 43, 0.08) !important;
}
[data-dark="1"] select.is-active {
  background-color: rgba(192, 57, 43, 0.18) !important;
}

/* ════════════════════════════════════════════════════════════════════
   STANDARD · Atributo [hidden]
   Cualquier elemento con `display:flex`, `display:grid` o cualquier valor de
   display que no sea `inline`/`block` PISA la regla user-agent default
   `[hidden] { display:none }` — los elementos no se ocultan aunque tengan
   el atributo. Este !important garantiza que el atributo `hidden` SIEMPRE
   funcione, sin importar el display que tenga la clase del elemento.

   Es el mismo patrón que ya estaba aplicado puntualmente en Articulos.html
   (.art-filter-bar[hidden]) y Catalogo.html (.filter-bar[hidden]) — esto
   lo hace global para que las páginas nuevas no tengan que repetirlo.
   ════════════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }