/* Fase 9.1 — wwwroot/css/vantastic-tokens.css verbatim (paleta --vt-* compartida: SmartReports y, más adelante, SmartProfit,
   Veterinaria, Instructivo). Se carga por pantalla con IRecursosService. Cambios: capas D-51 (modal 1060, toast 1090). */
/* ============================================================================
   VANTASTIC DESIGN TOKENS — paleta y componentes generales del ERP
   Archivo: wwwroot/css/vantastic-tokens.css
   Origen  : extraído del diseño de Vantastic SmartReports (Cobalt Elegante)
   Uso     : cargar PRIMERO, antes de cualquier CSS de página:
               <link rel="stylesheet" href="css/vantastic-tokens.css" />
               <link rel="stylesheet" href="css/smartreports.css" />
   Regla   : ninguna página define colores propios; todos salen de estas variables.
             Para rediseñar un reporte existente: envolverlo en .vt y usar las
             clases vt-* de abajo. No usar clases de color de Bootstrap.
   ============================================================================ */

:root {
  /* ------------------------------------------------------------- COBALTO --- */
  --vt-cobalt:          #1a4fba;   /* color de marca / acento principal        */
  --vt-cobalt-deep:     #0f3494;   /* hover de botón, inicio del degradado     */
  --vt-cobalt-light:    #2d6ae0;   /* foco de inputs, fin del degradado        */
  --vt-cobalt-pale:     #e8eef9;   /* fondo de chip / icono de grupo           */
  --vt-cobalt-subtle:   #f0f4fb;   /* hover de fila, fondo de caja informativa */
  --vt-cobalt-grad:     linear-gradient(100deg, var(--vt-cobalt-deep), var(--vt-cobalt) 60%, var(--vt-cobalt-light));

  /* ------------------------------------------- NEUTROS (sesgados a azul) --- */
  --vt-ground:          #f3f6fb;   /* fondo de la aplicación                   */
  --vt-surface:         #ffffff;   /* tarjetas, tablas, modales                */
  --vt-surface-2:       #f8fafd;   /* inputs, thead, pie de modal              */
  --vt-line:            #dde5f1;   /* borde estructural                        */
  --vt-line-soft:       #e9eef7;   /* separador interno                        */
  --vt-ink:             #16202f;   /* texto principal                          */
  --vt-ink-2:           #3f4d63;   /* texto secundario                         */
  --vt-muted:           #6c7c93;   /* texto terciario, etiquetas               */

  /* --------------------------------------------------------- SEMÁNTICOS --- */
  --vt-ok:              #11805a;   --vt-ok-bg:     rgba(17, 128, 90, .10);
  --vt-warn:            #9a6a08;   --vt-warn-bg:   rgba(154, 106, 8, .10);
  --vt-danger:          #dc2626;   --vt-danger-bg: rgba(220, 38, 38, .09);
  --vt-info:            var(--vt-cobalt);
  --vt-fav:             #e0245e;   /* favorito / corazón                       */

  /* Acciones estándar de botón (mismo código en todo el ERP) */
  --vt-act-save:        #1a56db;
  --vt-act-new:         #16a34a;
  --vt-act-del:         #dc2626;
  --vt-act-neutral:     #374151;   /* imprimir, adjuntar, exportar             */
  --vt-act-ai:          linear-gradient(100deg, var(--vt-cobalt), var(--vt-cobalt-light));

  /* -------------------------------------- SERIES PARA GRÁFICOS Y KPI ----- */
  --vt-serie-1:         #1a4fba;
  --vt-serie-2:         #2d9b8f;
  --vt-serie-3:         #c2611f;
  --vt-serie-4:         #6b4fbb;
  --vt-serie-5:         #1f7ab8;
  --vt-serie-6:         #a3345f;
  --vt-serie-7:         #4c7a1f;
  --vt-serie-8:         #8a6c12;

  /* ---------------------------------------------------------- GEOMETRÍA --- */
  --vt-r-ctrl:          5px;       /* inputs, selects, botones de texto        */
  --vt-r-icon:          6px;       /* botón de solo icono                      */
  --vt-r-chip:          8px;       /* icono contenedor, badge cuadrado         */
  --vt-r-card:          11px;      /* tarjeta, tabla, panel                    */
  --vt-r-modal:         14px;      /* contenedor de modal                      */
  --vt-r-pill:          999px;

  --vt-h-ctrl:          31px;      /* alto único de inputs y botones           */

  /* ------------------------------------------------------------ SOMBRAS --- */
  --vt-shadow:          0 1px 2px rgba(16, 32, 64, .07);
  --vt-shadow-btn:      0 1px 2px rgba(0, 0, 0, .08);
  --vt-shadow-lift:     0 10px 30px rgba(15, 52, 148, .13);
  --vt-shadow-modal:    0 24px 60px rgba(6, 20, 54, .34);

  /* ----------------------------------------------------------- ESPACIOS --- */
  --vt-sp-1: 4px;  --vt-sp-2: 6px;  --vt-sp-3: 9px;  --vt-sp-4: 12px;
  --vt-sp-5: 16px; --vt-sp-6: 22px; --vt-sp-7: 30px;

  /* ---------------------------------------------------------- TIPOGRAFÍA -- */
  --vt-font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --vt-font-mono: Consolas, "Courier New", monospace;

  --vt-fs-h1:    25px;   --vt-fw-h1: 700;
  --vt-fs-h2:    16.5px; --vt-fw-h2: 700;
  --vt-fs-base:  13.5px;
  --vt-fs-ctrl:  13px;
  --vt-fs-sm:    12.5px;
  --vt-fs-xs:    12px;
  --vt-fs-label: 11px;   /* mayúsculas + letter-spacing .7px                  */
  --vt-fs-micro: 10.5px; /* códigos, badges, contadores                       */
  --vt-ls-label: .7px;
  --vt-ls-eyebrow: 1px;

  /* ------------------------------------------------------------ MOVIMIENTO */
  --vt-t-fast:   .13s ease;
  --vt-t-base:   .2s ease;
  --vt-t-slow:   .22s ease;
}

/* ========================================================================== */
/*  BASE                                                                      */
/* ========================================================================== */
.vt {
  font-family: var(--vt-font);
  font-size: var(--vt-fs-base);
  line-height: 1.5;
  color: var(--vt-ink);
  background: var(--vt-ground);
  -webkit-font-smoothing: antialiased;
}
.vt *, .vt *::before, .vt *::after { box-sizing: border-box; }
.vt button { cursor: pointer; font: inherit; }
.vt :focus-visible { outline: 2px solid var(--vt-cobalt-light); outline-offset: 2px; border-radius: 4px; }
.vt code, .vt .vt-mono { font-family: var(--vt-font-mono); }
.vt .vt-num { font-variant-numeric: tabular-nums; text-align: right; }

/* -------------------------------------------------------------- títulos --- */
.vt-eyebrow {
  font-size: var(--vt-fs-label); letter-spacing: var(--vt-ls-eyebrow);
  text-transform: uppercase; color: var(--vt-muted); font-weight: 600;
}
.vt-h1 { font-size: var(--vt-fs-h1); font-weight: var(--vt-fw-h1); margin: 2px 0 3px; letter-spacing: -.1px; }
.vt-h2 { font-size: var(--vt-fs-h2); font-weight: var(--vt-fw-h2); margin: 0; letter-spacing: .1px; }
.vt-sub { margin: 0; color: var(--vt-muted); font-size: var(--vt-fs-ctrl); max-width: 66ch; }
.vt-cap { font-size: var(--vt-fs-xs); color: var(--vt-muted); }

/* ---------------------------------------------- cabecera de página ------- */
.vt-page-head { display: flex; align-items: flex-start; gap: var(--vt-sp-5); flex-wrap: wrap; margin-bottom: var(--vt-sp-5); }
.vt-page-head .vt-actions { margin-left: auto; display: flex; gap: 7px; align-items: center; }

/* ---------------------------------------------- barra de herramientas ---- */
.vt-toolbar {
  display: flex; gap: var(--vt-sp-3); align-items: center; flex-wrap: wrap;
  background: var(--vt-surface); border: 1px solid var(--vt-line);
  border-radius: 10px; padding: var(--vt-sp-3) 10px; box-shadow: var(--vt-shadow);
  margin-bottom: var(--vt-sp-5);
}

/* ========================================================================== */
/*  CONTROLES DE FORMULARIO                                                   */
/* ========================================================================== */
.vt-field { display: flex; flex-direction: column; gap: 5px; }
.vt-field > label {
  font-size: var(--vt-fs-label); font-weight: 600; letter-spacing: var(--vt-ls-label);
  text-transform: uppercase; color: var(--vt-muted);
}
.vt-input, .vt-select, .vt-textarea {
  border: 1px solid var(--vt-line); border-radius: var(--vt-r-ctrl);
  background: var(--vt-surface-2); padding: 7px 10px;
  font-size: var(--vt-fs-ctrl); color: var(--vt-ink); width: 100%; font-family: inherit;
}
.vt-input, .vt-select { height: var(--vt-h-ctrl); padding-top: 0; padding-bottom: 0; }
.vt-input:focus, .vt-select:focus, .vt-textarea:focus {
  border-color: var(--vt-cobalt-light); background: var(--vt-surface); outline: none;
}
.vt-input:disabled, .vt-select:disabled { background: var(--vt-line-soft); color: var(--vt-muted); }
.vt-textarea { resize: vertical; min-height: 58px; line-height: 1.5; }
.vt-hint { font-size: var(--vt-fs-sm); color: var(--vt-muted); }
.vt-check { display: inline-flex; align-items: center; gap: 7px; font-size: var(--vt-fs-ctrl); color: var(--vt-ink-2); }
.vt-check input { width: 15px; height: 15px; accent-color: var(--vt-cobalt); }

.vt-search { position: relative; flex: 1; min-width: 200px; }
.vt-search .vt-input { padding-left: 30px; }
.vt-search > svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--vt-muted); }

.vt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vt-sp-4); }
.vt-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vt-sp-4); }

/* ========================================================================== */
/*  BOTONES                                                                   */
/* ========================================================================== */
.vt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--vt-sp-2);
  padding: 5px var(--vt-sp-4); height: var(--vt-h-ctrl);
  font-size: var(--vt-fs-ctrl); font-weight: 600; border: none;
  border-radius: var(--vt-r-ctrl); color: #fff; white-space: nowrap;
}
.vt-btn svg { width: 14px; height: 14px; }
.vt-btn:hover { filter: brightness(1.08); }
.vt-btn:disabled { opacity: .6; cursor: not-allowed; filter: none; }

.vt-btn-primary { background: var(--vt-cobalt); }
.vt-btn-primary:hover { background: var(--vt-cobalt-deep); filter: none; }
.vt-btn-save    { background: var(--vt-act-save); }
.vt-btn-new     { background: var(--vt-act-new); }
.vt-btn-del     { background: var(--vt-act-del); }
.vt-btn-neutral { background: var(--vt-act-neutral); }
.vt-btn-ai      { background: var(--vt-act-ai); }
.vt-btn-ghost   { background: transparent; color: var(--vt-ink-2); box-shadow: inset 0 0 0 1px var(--vt-line); }
.vt-btn-ghost:hover { background: var(--vt-surface); color: var(--vt-ink); filter: none; }

/* botón de solo icono — 31×31 */
.vt-ibtn {
  width: var(--vt-h-ctrl); height: var(--vt-h-ctrl); border: none; border-radius: var(--vt-r-icon);
  display: inline-grid; place-items: center; color: #fff;
  box-shadow: var(--vt-shadow-btn); vertical-align: middle;
}
.vt-ibtn svg { width: 14px; height: 14px; }
.vt-ibtn:hover { filter: brightness(1.1); }
.vt-ibtn-save    { background: var(--vt-act-save); }
.vt-ibtn-new     { background: var(--vt-act-new); }
.vt-ibtn-del     { background: var(--vt-act-del); }
.vt-ibtn-neutral { background: var(--vt-act-neutral); }
.vt-ibtn-ai      { background: var(--vt-act-ai); }

/* segmentado (vistas, ámbitos) */
.vt-seg { display: inline-flex; background: var(--vt-surface-2); border: 1px solid var(--vt-line); border-radius: var(--vt-r-ctrl); padding: 2px; gap: 2px; }
.vt-seg button {
  border: none; background: transparent; color: var(--vt-muted);
  font-size: var(--vt-fs-sm); font-weight: 600; padding: 0 10px; height: 25px; border-radius: 3px;
}
.vt-seg button.vt-on { background: var(--vt-cobalt); color: #fff; }
.vt-seg button:not(.vt-on):hover { color: var(--vt-ink); }

/* pestañas */
.vt-tabs { display: flex; gap: var(--vt-sp-1); border-bottom: 1px solid var(--vt-line); margin-bottom: var(--vt-sp-5); }
.vt-tabs button {
  border: none; background: transparent; color: var(--vt-muted); font-weight: 600;
  font-size: var(--vt-fs-ctrl); padding: 8px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.vt-tabs button:hover { color: var(--vt-ink); }
.vt-tabs button.vt-on { color: var(--vt-cobalt-deep); border-bottom-color: var(--vt-cobalt); }

/* ========================================================================== */
/*  ETIQUETAS Y ESTADOS                                                       */
/* ========================================================================== */
.vt-badge {
  display: inline-flex; align-items: center; gap: var(--vt-sp-1);
  font-size: var(--vt-fs-micro); font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--vt-r-pill);
  background: var(--vt-surface-2); color: var(--vt-muted); border: 1px solid var(--vt-line-soft);
}
.vt-badge svg { width: 10px; height: 10px; }
.vt-badge-ok     { background: var(--vt-ok-bg);     color: var(--vt-ok);     border-color: transparent; }
.vt-badge-warn   { background: var(--vt-warn-bg);   color: var(--vt-warn);   border-color: transparent; }
.vt-badge-danger { background: var(--vt-danger-bg); color: var(--vt-danger); border-color: transparent; }
.vt-badge-info   { background: rgba(26, 79, 186, .09); color: var(--vt-cobalt); border-color: transparent; }
.vt-badge-fav    { background: rgba(224, 36, 94, .10); color: var(--vt-fav); border-color: transparent; }
.vt-badge-ai     { background: var(--vt-act-ai); color: #fff; border-color: transparent; }

/* chip de filtro removible */
.vt-chip {
  display: inline-flex; align-items: center; gap: var(--vt-sp-2); height: 24px; padding: 0 6px 0 9px;
  border-radius: var(--vt-r-pill); background: var(--vt-cobalt-pale); color: var(--vt-cobalt-deep);
  font-size: var(--vt-fs-xs); font-weight: 600;
}
.vt-chip button { border: none; background: transparent; color: inherit; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; padding: 0; }
.vt-chip button:hover { background: rgba(26, 79, 186, .16); }
.vt-chip svg { width: 10px; height: 10px; }

/* semáforo de indicador */
.vt-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.vt-dot-ok { background: var(--vt-ok); } .vt-dot-warn { background: var(--vt-warn); } .vt-dot-danger { background: var(--vt-danger); }

/* ========================================================================== */
/*  SUPERFICIES                                                               */
/* ========================================================================== */
.vt-card {
  background: var(--vt-surface); border: 1px solid var(--vt-line);
  border-radius: var(--vt-r-card); padding: var(--vt-sp-4) 13px;
}
.vt-card-hover { transition: border-color var(--vt-t-fast), box-shadow var(--vt-t-fast), transform var(--vt-t-fast); }
.vt-card-hover:hover { border-color: var(--vt-cobalt-light); box-shadow: var(--vt-shadow-lift); transform: translateY(-1px); }

/* icono contenedor (grupo, reporte, fila) */
.vt-ico {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--vt-cobalt-subtle); color: var(--vt-cobalt); border: 1px solid var(--vt-line-soft);
}
.vt-ico svg { width: 17px; height: 17px; }
.vt-ico-sm { width: 28px; height: 28px; flex-basis: 28px; border-radius: var(--vt-r-chip); background: var(--vt-cobalt-pale); border: none; }
.vt-ico-sm svg { width: 16px; height: 16px; }

/* tile de KPI — usar solo cuando la cifra ES el contenido de la página */
.vt-kpi { background: var(--vt-surface); border: 1px solid var(--vt-line); border-radius: var(--vt-r-card); padding: var(--vt-sp-4) var(--vt-sp-5); }
.vt-kpi .vt-kpi-label { font-size: var(--vt-fs-label); letter-spacing: var(--vt-ls-label); text-transform: uppercase; color: var(--vt-muted); font-weight: 600; }
.vt-kpi .vt-kpi-value { font-size: 26px; font-weight: 700; letter-spacing: -.4px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.vt-kpi .vt-kpi-delta { font-size: var(--vt-fs-xs); font-weight: 600; }
.vt-kpi .vt-kpi-delta.vt-up { color: var(--vt-ok); } .vt-kpi .vt-kpi-delta.vt-down { color: var(--vt-danger); }

/* ========================================================================== */
/*  TABLA DE REPORTE                                                          */
/* ========================================================================== */
.vt-table-wrap { border: 1px solid var(--vt-line); border-radius: var(--vt-r-card); overflow-x: auto; background: var(--vt-surface); }
.vt-table { width: 100%; border-collapse: collapse; font-size: var(--vt-fs-ctrl); }
.vt-table thead th {
  text-align: left; font-size: var(--vt-fs-micro); letter-spacing: .9px; text-transform: uppercase;
  color: var(--vt-muted); font-weight: 700; padding: 9px var(--vt-sp-4);
  background: var(--vt-surface-2); border-bottom: 1px solid var(--vt-line); white-space: nowrap;
}
.vt-table thead th.vt-num { text-align: right; }
.vt-table tbody td { padding: 8px var(--vt-sp-4); border-bottom: 1px solid var(--vt-line-soft); vertical-align: middle; }
.vt-table tbody tr:last-child td { border-bottom: none; }
.vt-table tbody tr:hover { background: var(--vt-cobalt-subtle); }
.vt-table tbody td.vt-num { text-align: right; font-variant-numeric: tabular-nums; }
.vt-table .vt-acc { text-align: right; white-space: nowrap; }
.vt-table .vt-acc button { margin-left: 5px; }
/* fila de totales */
.vt-table tfoot td, .vt-table tr.vt-total td {
  background: var(--vt-cobalt-subtle); font-weight: 700; border-top: 1px solid var(--vt-line);
  font-variant-numeric: tabular-nums;
}
/* cabecera de grupo dentro de la tabla */
.vt-table tr.vt-group td {
  background: var(--vt-surface-2); font-weight: 700; color: var(--vt-cobalt-deep);
  font-size: var(--vt-fs-sm); letter-spacing: .2px;
}
.vt-code { font-size: var(--vt-fs-sm); color: var(--vt-muted); font-family: var(--vt-font-mono); }

/* ========================================================================== */
/*  MODAL — "Cobalt Elegante" (estándar de todo el ERP)                       */
/* ========================================================================== */
.vt-backdrop {
  position: fixed; inset: 0; background: rgba(11, 24, 48, .48); backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center; z-index: var(--z-modal); /* D-51 (era 1060) */
  padding: 26px var(--vt-sp-5); overflow-y: auto; animation: vtFade .16s ease;
}
@keyframes vtFade { from { opacity: 0; } to { opacity: 1; } }

.vt-modal {
  background: var(--vt-surface); border-radius: var(--vt-r-modal); width: 100%; max-width: 660px;
  box-shadow: var(--vt-shadow-modal); overflow: hidden; position: relative; animation: vtRise var(--vt-t-base);
}
@keyframes vtRise { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }

.vt-modal-head { background: var(--vt-cobalt-grad); color: #fff; padding: 13px var(--vt-sp-5); display: flex; align-items: center; gap: 10px; }
.vt-modal-head .vt-mh-ico {
  width: var(--vt-h-ctrl); height: var(--vt-h-ctrl); flex: 0 0 var(--vt-h-ctrl); border-radius: var(--vt-r-chip);
  background: rgba(255, 255, 255, .16); display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.vt-modal-head .vt-mh-ico svg { width: 16px; height: 16px; }
.vt-modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .2px; }
.vt-modal-head p { margin: 0; font-size: var(--vt-fs-sm); opacity: .82; }
.vt-modal-head .vt-x {
  margin-left: auto; width: var(--vt-h-ctrl); height: var(--vt-h-ctrl); border: none; border-radius: var(--vt-r-icon);
  background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.vt-modal-head .vt-x:hover { background: rgba(255, 255, 255, .28); }
.vt-modal-head .vt-x svg { width: 13px; height: 13px; }

.vt-modal-body { padding: var(--vt-sp-5); display: flex; flex-direction: column; gap: var(--vt-sp-5); }
.vt-modal-foot {
  padding: 11px var(--vt-sp-5); border-top: 1px solid var(--vt-line-soft); background: var(--vt-surface-2);
  display: flex; gap: 7px; justify-content: flex-end; align-items: center; flex-wrap: wrap;
}
.vt-modal-foot .vt-foot-note { margin-right: auto; font-size: var(--vt-fs-sm); color: var(--vt-muted); }

/* overlay bloqueante con spinner (obligatorio en guardar/procesar) */
.vt-busy {
  position: absolute; inset: 0; background: rgba(255, 255, 255, .74); backdrop-filter: blur(1px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--vt-sp-3); z-index: 5;
}
.vt-busy .vt-sp {
  width: 30px; height: 30px; border: 3px solid var(--vt-cobalt-pale); border-top-color: var(--vt-cobalt);
  border-radius: 50%; animation: vtSpin .75s linear infinite;
}
.vt-busy span { font-size: var(--vt-fs-sm); color: var(--vt-cobalt-deep); font-weight: 600; }
@keyframes vtSpin { to { transform: rotate(360deg); } }

/* ========================================================================== */
/*  MENSAJES                                                                  */
/* ========================================================================== */
.vt-note {
  display: flex; gap: var(--vt-sp-3); align-items: flex-start; border-radius: var(--vt-r-chip);
  padding: 10px var(--vt-sp-4); font-size: var(--vt-fs-sm);
  background: var(--vt-cobalt-subtle); border: 1px solid var(--vt-cobalt-pale);
  border-left: 3px solid var(--vt-cobalt); color: var(--vt-ink-2);
}
.vt-note svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; color: var(--vt-cobalt); }
.vt-note-ok     { background: #f0fdf4; border-color: #bbf7d0; border-left-color: var(--vt-ok);     color: #14532d; }
.vt-note-warn   { background: #fffbeb; border-color: #fde68a; border-left-color: var(--vt-warn);   color: #78350f; }
.vt-note-danger { background: #fff5f5; border-color: #f5c2c2; border-left-color: var(--vt-danger); color: #7f1d1d; }
.vt-note-ok svg, .vt-note-warn svg, .vt-note-danger svg { color: currentColor; }

.vt-empty {
  text-align: center; padding: 52px var(--vt-sp-6); color: var(--vt-muted);
  border: 1px dashed var(--vt-line); border-radius: var(--vt-r-card); background: var(--vt-surface);
}
.vt-empty svg { width: 30px; height: 30px; color: var(--vt-cobalt-light); opacity: .6; margin-bottom: 8px; }
.vt-empty b { display: block; color: var(--vt-ink); font-size: 14px; margin-bottom: 3px; }

.vt-skeleton {
  height: 92px; border-radius: var(--vt-r-card); border: 1px solid var(--vt-line);
  background: linear-gradient(100deg, var(--vt-surface) 30%, var(--vt-surface-2) 50%, var(--vt-surface) 70%);
  background-size: 300% 100%; animation: vtShimmer 1.2s linear infinite;
}
@keyframes vtShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.vt-toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(14px);
  background: var(--vt-ink); color: #fff; padding: 8px 14px; border-radius: var(--vt-r-chip);
  font-size: var(--vt-fs-sm); font-weight: 500; opacity: 0; pointer-events: none;
  transition: all var(--vt-t-slow); z-index: var(--z-toast); /* D-51 (era 1090) */ box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  display: flex; align-items: center; gap: 7px;
}
.vt-toast.vt-show { opacity: 1; transform: translateX(-50%); }

/* ========================================================================== */
/*  RESPONSIVE / ACCESIBILIDAD                                                */
/* ========================================================================== */
@media (max-width: 560px) {
  .vt-grid-2, .vt-grid-3 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .vt *, .vt-backdrop, .vt-modal, .vt-toast { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================================
   CHECKLIST PARA REDISEÑAR UN REPORTE EXISTENTE
   1. Envolver la página en <div class="vt"> y cargar este archivo primero.
   2. Cabecera: .vt-eyebrow (módulo) + .vt-h1 (título) + .vt-sub (qué muestra).
   3. Filtros dentro de .vt-toolbar, con .vt-input / .vt-select / .vt-seg;
      los filtros aplicados se muestran como .vt-chip removibles.
   4. Datos en .vt-table-wrap > .vt-table; cifras con class="vt-num";
      totales en tfoot o tr.vt-total; subtotales por grupo en tr.vt-group.
   5. Estado en forma y color: .vt-badge-ok / -warn / -danger, nunca solo número.
   6. Acciones: .vt-ibtn-* para iconos (31×31) y .vt-btn-* para texto+icono.
      Nada de btn-primary/btn-success de Bootstrap.
   7. Modales siempre .vt-modal con .vt-modal-head en degradado y .vt-busy
      durante el guardado.
   8. Gráficos: series en orden --vt-serie-1..8; el acento cobalto se reserva
      para la serie principal.
   9. Sin estados vacíos en blanco: usar .vt-empty; mientras carga, .vt-skeleton.
   ============================================================================ */