/* Estilos propios de ZS Motor. No editar los archivos del theme (style*.css) */

/* ============================================================
   Rediseño "Taller" (2026-07): capa de diseño compartida.
   Antes vivía aislada en el <style> sin scope de productos.vue —
   con Vite eso significa que solo se inyectaba cuando se cargaba el
   chunk de esa ruta, invisible para el resto de la app. Se promueve
   acá para que cualquier página pueda reusar los mismos chips/precio/
   pill que ya estaban validados en productos.vue. Fuente de verdad
   única: no debe haber una segunda copia de estas reglas en ningún
   <style> de página (ver productos.vue, de donde se movieron).
   ============================================================ */

/* Paleta moderna: el theme original define sus propios colores semánticos
   pastel (turquesa/coral/celeste) que solo se veían tapados antes por el
   CSS de Bootstrap 4 que bootstrap-vue inyectaba de yapa (efecto secundario
   de un módulo que ya no usamos). En vez de restaurar ese parche accidental
   o dejar la paleta pastel del theme, reemplazamos los colores semánticos
   por la paleta cálida/grafito de "Taller" (la misma que ya se había
   validado en productos.vue vía las clases .zsm-*), sobrescribiendo las
   mismas variables CSS que ya consume el theme — así se propaga solo a
   botones, badges, textos y alerts en toda la app.
   Solo aplica a front-v4 — no se toca el custom.css de la app vieja. */
:root {
  /* Tokens propios "Taller" — mismos valores hex que ya usaban las
     clases .zsm-* en productos.vue, no una reinterpretación. */
  --zsm-ink: #2b2f38;
  --zsm-ink-soft: #6a7185;
  /* Un cálido más marcado (#f6f5f1) se leía rosado/beige cubriendo todo
     el fondo de página — a esa escala el matiz se nota mucho más que en
     un chip chico. Se deja un gris neutro (el calor de "Taller" sigue
     viviendo en el grafito y en los chips/pills, no en el fondo). */
  --zsm-bg: #f2f2f2;
  --zsm-surface: #ffffff;
  --zsm-surface-2: #eceae4;
  --zsm-border: #e3e1db;
  --zsm-success: #1f7a45;
  --zsm-success-bg: #e2f1e7;
  --zsm-warning: #b8722d;
  --zsm-warning-bg: #f7ecd9;
  --zsm-price: #c62f3d;
  --zsm-sidebar-bg: #1c1f26;
  --zsm-font-display: 'Oswald Display', sans-serif;

  --bs-secondary: #64748b;
  /* Antes #10b981/#f59e0b/#ef4444 (paleta "Tailwind" previa a Taller).
     .btn-success/.badge.bg-success/etc ya se habían alineado a mano,
     pero la variable raíz no -- .text-success/.text-warning/.text-danger
     (los números de KPI grandes en index.vue y notas_de_venta.vue)
     seguían mostrando el verde/ámbar/rojo viejo. */
  --bs-success: var(--zsm-success);
  --bs-info: #0ea5e9;
  --bs-warning: var(--zsm-warning);
  --bs-danger: var(--zsm-price);
  /* Variantes -rgb: las usan .text-*/.bg-*/.border-* con opacidad
     (ej. rgba(var(--bs-danger-rgb), var(--bs-text-opacity))) */
  --bs-secondary-rgb: 100, 116, 139;
  --bs-success-rgb: 31, 122, 69;
  --bs-info-rgb: 14, 165, 233;
  --bs-warning-rgb: 184, 114, 45;
  --bs-danger-rgb: 198, 47, 61;
}

/* Sin esto, body queda blanco por defecto. El sidebar y el header son
   position:fixed con su color puesto por style inline -- cuando Chrome
   descarta su capa compuesta al poner la pestaña en background, al volver
   se ve ese blanco de golpe por un frame antes de que se repinten encima
   (flicker "blanco" al cambiar de pestaña, no es una recarga real). */
html, body {
  background-color: var(--zsm-bg);
}

@font-face {
  font-family: 'Oswald Display';
  src: url('/fonts/oswald-variable.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* Self-hosted (subset "latin", cubre tildes/ñ del español) para no
   depender de Google Fonts en tiempo de ejecución — mismo criterio que
   ya se usaba para Oswald. Variable, un solo archivo cubre 400-800. */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-variable-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* Esto es lo que realmente aplica la tipografía de "Taller" en toda la
   app: antes los tokens --zsm-font-display/Inter existían pero solo se
   usaban dentro de las clases .zsm-* de productos.vue (chips/precio) —
   el resto de las páginas seguía con el font stack default del theme.
   Todo el texto de cuerpo (incluidos títulos de página, que en este
   código son casi siempre <h1>-<h6>) pasa a Inter.

   Oswald queda reservado a precio/números grandes (.zsm-price-final,
   .zsm-chip, etc., ya usados en productos.vue) en vez de aplicarse a
   todos los encabezados — un h1-h6 genérico incluye tanto títulos de
   página ("Bienvenido...") como KPIs, y condensar los títulos no se
   sentía bien. Cuando se rediseñe cada página de KPIs (Home, Notas de
   Venta) se les suma una clase tipo .zsm-kpi-value con Oswald puntual,
   en vez de heredarlo de golpe por el tag <h4>. */
body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Inter', var(--bs-font-sans-serif);
}

/* Secundario como botón "quieto": fondo claro y texto oscuro, para que no
   compita visualmente con el navy de los botones primarios. */
.btn-secondary {
  --bs-btn-color: #334155;
  --bs-btn-bg: #e2e8f0;
  --bs-btn-border-color: #e2e8f0;
  --bs-btn-hover-color: #1e293b;
  --bs-btn-hover-bg: #cbd5e1;
  --bs-btn-hover-border-color: #cbd5e1;
  --bs-btn-focus-shadow-rgb: 100, 116, 139;
  --bs-btn-active-color: #1e293b;
  --bs-btn-active-bg: #cbd5e1;
  --bs-btn-active-border-color: #cbd5e1;
  --bs-btn-disabled-color: #64748b;
  --bs-btn-disabled-bg: #e2e8f0;
  --bs-btn-disabled-border-color: #e2e8f0;
}

/* Antes usaba el verde "Tailwind" (#10b981) que ya tenía el custom.css
   original, previo a Taller — quedaba en un verde distinto al de
   .badge.bg-success (--zsm-success, #1f7a45), notorio apenas aparecen
   los dos juntos (ver notificaciones_generadas.vue: badge "Enviado" +
   botón "Enviar"). Mismo verde para ambos. */
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--zsm-success);
  --bs-btn-border-color: var(--zsm-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #175c34;
  --bs-btn-hover-border-color: #175c34;
  --bs-btn-focus-shadow-rgb: 31, 122, 69;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #124a29;
  --bs-btn-active-border-color: #124a29;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--zsm-success);
  --bs-btn-disabled-border-color: var(--zsm-success);
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0ea5e9;
  --bs-btn-border-color: #0ea5e9;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0284c7;
  --bs-btn-hover-border-color: #0284c7;
  --bs-btn-focus-shadow-rgb: 14, 165, 233;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0369a1;
  --bs-btn-active-border-color: #0369a1;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0ea5e9;
  --bs-btn-disabled-border-color: #0ea5e9;
}

/* Alineado a --zsm-warning (#b8722d), el mismo ámbar que ya usa el chip
   de descuento en productos.vue — antes era un naranja más brillante
   y frío (#f59e0b), notorio apenas aparecen los dos juntos. */
.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--zsm-warning);
  --bs-btn-border-color: var(--zsm-warning);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #96601f;
  --bs-btn-hover-border-color: #96601f;
  --bs-btn-focus-shadow-rgb: 184, 114, 45;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #7c4c1c;
  --bs-btn-active-border-color: #7c4c1c;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--zsm-warning);
  --bs-btn-disabled-border-color: var(--zsm-warning);
}

/* Alineado a --zsm-price (#c62f3d), el mismo rojo ladrillo que ya usa
   .zsm-price-final — antes era un rojo más frío/brillante (#ef4444). */
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--zsm-price);
  --bs-btn-border-color: var(--zsm-price);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #a4262f;
  --bs-btn-hover-border-color: #a4262f;
  --bs-btn-focus-shadow-rgb: 198, 47, 61;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #841f26;
  --bs-btn-active-border-color: #841f26;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--zsm-price);
  --bs-btn-disabled-border-color: var(--zsm-price);
}

/* El theme trae .btn-outline-secondary con un celeste hardcodeado
   (#49BEFF) sin relación con --bs-secondary ni con nada de Taller —
   mismo tratamiento neutro que ya usan los .zsm-filtro-chip (borde
   grafito, se rellena de grafito sólido al activarse/hover). */
.btn-outline-secondary {
  --bs-btn-color: var(--zsm-ink);
  --bs-btn-border-color: var(--zsm-border);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--zsm-ink);
  --bs-btn-hover-border-color: var(--zsm-ink);
  --bs-btn-focus-shadow-rgb: 43, 47, 56;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--zsm-ink);
  --bs-btn-active-border-color: var(--zsm-ink);
  --bs-btn-disabled-color: var(--zsm-ink-soft);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--zsm-border);
}

/* Misma familia de "leftover" pasteles fríos del theme que
   .btn-outline-secondary: .btn-light-primary (#ECF2FF, celeste pálido)
   y .btn-light-gray (#F6F9FC, casi blanco pero frío) se usan como
   botones ghost/ícono (administracion_usuarios.vue, productos.vue) sin
   ninguna relación con Taller. Se unifican al mismo gris cálido. */
.btn-light-primary,
.btn-light-gray {
  --bs-btn-color: var(--zsm-ink);
  --bs-btn-bg: var(--zsm-surface-2);
  --bs-btn-border-color: var(--zsm-surface-2);
  --bs-btn-hover-color: var(--zsm-ink);
  --bs-btn-hover-bg: #e3e0d8;
  --bs-btn-hover-border-color: #e3e0d8;
  --bs-btn-active-color: var(--zsm-ink);
  --bs-btn-active-bg: #d8d5cd;
  --bs-btn-active-border-color: #d8d5cd;
  --bs-btn-disabled-color: var(--zsm-ink-soft);
  --bs-btn-disabled-bg: var(--zsm-surface-2);
  --bs-btn-disabled-border-color: var(--zsm-surface-2);
}

/* .btn-light-warning (#FEF5E5) es el chip de % de descuento en la
   tarjeta "convenio" de productos.vue -- alineado al mismo ámbar que
   ya usa .zsm-price-discount en la tarjeta de producto principal. */
.btn-light-warning {
  --bs-btn-color: var(--zsm-warning);
  --bs-btn-bg: var(--zsm-warning-bg);
  --bs-btn-border-color: var(--zsm-warning-bg);
  --bs-btn-hover-color: var(--zsm-warning);
  --bs-btn-hover-bg: #f2e2c4;
  --bs-btn-hover-border-color: #f2e2c4;
  --bs-btn-active-color: var(--zsm-warning);
  --bs-btn-active-bg: #ecd7b1;
  --bs-btn-active-border-color: #ecd7b1;
  --bs-btn-disabled-color: var(--zsm-warning);
  --bs-btn-disabled-bg: var(--zsm-warning-bg);
  --bs-btn-disabled-border-color: var(--zsm-warning-bg);
}

.customize-table thead th {
  background-color: #f1f5f9;
  color: #1e293b;
  font-weight: 600;
  border-bottom: 2px solid #e2e8f0;
}

.customize-table thead th h6,
.customize-table thead th h4,
.customize-table thead th label {
  color: #1e293b !important;
}

.customize-table thead th .form-control {
  font-weight: 400;
  background-color: #fff;
  color: #1e293b;
  border-color: #cbd5e1;
}

.customize-table thead th .form-control::placeholder {
  color: #94a3b8;
}

.customize-table tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.02);
}

.customize-table tbody tr:hover {
  background-color: rgba(13, 110, 253, 0.08);
  cursor: pointer;
}

.customize-table td,
.customize-table th {
  vertical-align: middle;
}

/* El sidebar y la barra superior del dashboard quedan por encima del fondo
   oscurecido de los modales nativos de Bootstrap; forzamos el modal y su
   backdrop por encima de cualquier z-index que use el theme, y bajamos el
   sidebar/topbar mientras haya un modal abierto (Bootstrap agrega la clase
   "modal-open" al body). */
.modal-backdrop {
  z-index: 2000 !important;
}

.modal {
  z-index: 2010 !important;
}

/* SweetAlert2 usa z-index 1060 por defecto -- muy por debajo del 2010 de
   arriba, así que cualquier Swal.fire() disparado mientras hay un
   AppModal abierto (ej. la confirmación de un cambio dentro de un modal)
   quedaba atrás en vez de encima. */
.swal2-container {
  z-index: 2020 !important;
}

body.modal-open .left-sidebar,
body.modal-open .app-header {
  z-index: 1 !important;
}

/* El theme original expande el sidebar colapsado (mini-sidebar) al pasar el
   mouse por encima -- confuso junto con el toggle manual, el usuario espera
   que se quede colapsado hasta que lo abra de nuevo a propósito. Se anula
   ese hover manteniendo el ancho/estado "mini" (ver dashboard.vue mounted()
   para el toggle propio que reemplaza el del theme). */
@media (min-width: 992px) {
  #main-wrapper[data-sidebartype=mini-sidebar] .left-sidebar:hover {
    width: 87px !important;
  }

  #main-wrapper[data-sidebartype=mini-sidebar] .left-sidebar:hover .logo-img {
    width: 40px !important;
  }

  #main-wrapper[data-sidebartype=mini-sidebar] .left-sidebar:hover .nav-small-cap {
    text-align: center !important;
  }

  #main-wrapper[data-sidebartype=mini-sidebar] .left-sidebar:hover .nav-small-cap .nav-small-cap-icon {
    display: inline-block !important;
  }

  #main-wrapper[data-sidebartype=mini-sidebar] .left-sidebar:hover .hide-menu,
  #main-wrapper[data-sidebartype=mini-sidebar] .left-sidebar:hover .sidebar-nav .has-arrow::after,
  #main-wrapper[data-sidebartype=mini-sidebar] .left-sidebar:hover .sidebar-ad {
    display: none !important;
  }

  #main-wrapper[data-sidebartype=mini-sidebar] .left-sidebar:hover .sidebar-nav ul .sidebar-item .sidebar-link {
    padding: 11px 9px !important;
  }

  #main-wrapper[data-sidebartype=mini-sidebar] .left-sidebar:hover .sidebar-nav .sidebar-list .sidebar-list-item {
    text-align: center !important;
  }
}

/* ============================================================
   "Taller" — chips, precio y pills. Promovidas 1:1 desde el <style>
   sin scope de productos.vue (única copia ahora; no duplicar en
   ningún <style> de página).
   ============================================================ */
.zsm-ghost-btn {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 999px;
  border: 1px solid #e3e1db;
  background: transparent;
  color: #9aa4b8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color .15s ease, color .15s ease;
}
.zsm-ghost-btn:hover {
  background: #f2f1ee;
  color: #5b6b85;
}

.zsm-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 2px 0 4px;
}
.zsm-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Oswald Display', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 2px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.zsm-chip-codigo {
  background: #2b2f38;
  color: #fbfbfa;
  cursor: pointer;
}
.zsm-chip-bodega-none {
  background: #eceae4;
  color: #6a7185;
}
.zsm-chip-bodega-stock {
  background: #e2f1e7;
  color: #1f7a45;
}
.zsm-chip-catalogo {
  background: #e8f0fc;
  color: #2461c9;
  cursor: pointer;
  border: none;
}
.zsm-chip-catalogo:hover {
  background: #d7e6fb;
}
.zsm-chip-netrivals-winners {
  background: #e2f1e7;
  color: #1f7a45;
}
.zsm-chip-netrivals-equals {
  background: #e8f0fc;
  color: #2461c9;
}
.zsm-chip-netrivals-losers {
  background: #fbe3e3;
  color: var(--zsm-price);
}
.zsm-lista-destacada {
  background: var(--zsm-surface-2);
  border: 2px solid var(--zsm-warning) !important;
}
.zsm-filtro-brecha-banner {
  display: inline-flex;
  align-items: center;
  background: var(--zsm-sidebar-bg);
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
}
.zsm-foto-wrap {
  position: relative;
}
.zsm-chip-netrivals-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 2;
  font-size: 0.78rem;
  padding: 2px 8px;
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.zsm-netrivals-dot {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 2;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.zsm-netrivals-dot-winners {
  background: #1f7a45;
}
.zsm-netrivals-dot-equals {
  background: #2461c9;
}
.zsm-netrivals-dot-losers {
  background: var(--zsm-price);
}
.zsm-tecnico-caption {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9aa4b8;
  display: block;
  margin: 0 0 6px;
}

.zsm-price-block {
  margin: 10px 0 6px;
}
.zsm-price-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.zsm-price-strike {
  color: #9aa4b8;
  text-decoration: line-through;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.zsm-price-discount {
  border: none;
  font-size: 0.72rem;
  font-weight: 700;
  color: #b8722d;
  background: #f7ecd9;
  padding: 2px 9px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.zsm-price-final {
  display: block;
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  font-family: 'Oswald Display', sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.05;
  color: #c62f3d;
  font-variant-numeric: tabular-nums;
}
.zsm-price-final:hover {
  text-decoration: underline;
}
.zsm-price-list {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9aa4b8;
}

.zsm-footer {
  display: flex;
  gap: 8px;
}
.zsm-stock-group {
  display: flex;
  gap: 4px;
  background: #f2f1ee;
  border-radius: 999px;
  padding: 3px;
  flex: 1.35;
}
.zsm-pedido-group {
  display: flex;
  gap: 4px;
  flex: 1;
}
.zsm-pill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  border: none;
  background: transparent;
  color: #2b2f38;
}
.zsm-stock-group .zsm-pill:hover {
  background: #ffffff;
}
.zsm-pedido-group .zsm-pill {
  border: 1px dashed #d8d5cd;
  color: #9aa4b8;
  font-weight: 400;
}

.zsm-filtro-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid #d8d5cd;
  background: #ffffff;
  color: #4a5568;
  border-radius: 999px;
  /* Más chico que la v1 (0.4rem 0.95rem / 0.85rem) — el usuario pidió
     puntualmente reducir el espacio que ocupa esta sección. */
  padding: 0.25rem 0.65rem;
  font-size: 0.74rem;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.zsm-filtro-chip:hover {
  border-color: #9aa4b8;
}
.zsm-filtro-chip.active {
  background: #2b2f38;
  border-color: #2b2f38;
  color: #ffffff;
}
.zsm-filtro-chip-toggle.active {
  background: #1f7a45;
  border-color: #1f7a45;
}
.zsm-filtro-check {
  font-weight: 700;
}

/* Label chico de cada grupo de chips ("Ordenar por" / "Configuración")
   en vez del <label> grande en negrita que traía la v1 — mismo
   tratamiento discreto que .zsm-tecnico-caption/.zsm-kpi-label. */
.zsm-filtro-group-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--zsm-ink-soft);
}

/* Header liviano para colapsar/expandir la sección de filtros -- a
   propósito NO reusa .accordion-button del theme (padding pensado
   para acordeones grandes, 1.25rem/2rem incluso ya reducido en la
   Fase 0.5): esto tiene que verse chico. Se apoya en el collapse
   nativo de Bootstrap (data-bs-toggle="collapse"), que ya alterna la
   clase .collapsed en cualquier trigger sin JS propio. */
.zsm-filtros-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--zsm-ink);
  cursor: pointer;
}
.zsm-filtros-toggle-icon {
  display: inline-block;
  font-size: 0.65rem;
  color: var(--zsm-ink-soft);
  transition: transform .15s ease;
}
.zsm-filtros-toggle.collapsed .zsm-filtros-toggle-icon {
  transform: rotate(-90deg);
}

/* ============================================================
   "Taller" — reestilo de elementos base de Bootstrap (card, table,
   badge, accordion). Al tocar acá en vez de en cada página, la
   mayoría de las 14 páginas hereda el look nuevo sin que haga falta
   editar su template — quedan pendientes solo los colores/estilos
   que cada página hardcodea inline (ver plan de implementación).
   ============================================================ */
.card {
  background-color: var(--zsm-surface);
  border: 1px solid var(--zsm-border);
  border-radius: 16px;
  /* El theme trae .card con 30px de padding interno + 30px de margen
     inferior por default (--bs-card-spacer-*, --bs-card-cap-padding-*,
     y un margin-bottom literal) — con varias cards apiladas (ver
     productos.vue: banner + buscador + filtro + resultados) eso solo
     ya suma >200px de aire antes de llegar al contenido. Se achica acá,
     una sola vez, para toda la app. */
  --bs-card-spacer-y: 16px;
  --bs-card-spacer-x: 18px;
  --bs-card-cap-padding-y: 12px;
  --bs-card-cap-padding-x: 18px;
  margin-bottom: 16px;
}

.table {
  --bs-table-color: var(--zsm-ink);
  --bs-table-bg: var(--zsm-surface);
  --bs-table-border-color: var(--zsm-border);
}
.table thead th {
  background-color: var(--zsm-surface-2);
  color: var(--zsm-ink);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--zsm-border);
  padding: 10px 14px;
}
/* Celdas de body: el theme trae 16px 16px parejo (padding fijo, no
   variable) en .table > :not(caption) > * > * — se achica el alto de
   fila sin tocar el contenido de cada celda. */
.table > :not(caption) > * > * {
  padding: 9px 14px;
}

.accordion {
  --bs-accordion-btn-padding-y: 0.75rem;
  --bs-accordion-btn-padding-x: 1.1rem;
  --bs-accordion-body-padding-y: 0.85rem;
  --bs-accordion-body-padding-x: 1.1rem;
}

.badge {
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 999px;
}
.badge.bg-success {
  background-color: var(--zsm-success-bg) !important;
  color: var(--zsm-success) !important;
}
.badge.bg-danger {
  background-color: #fbe6e3 !important;
  color: var(--zsm-price) !important;
}
.badge.bg-warning {
  background-color: var(--zsm-warning-bg) !important;
  color: var(--zsm-warning) !important;
}

.accordion-item {
  background-color: var(--zsm-surface);
  border: 1px solid var(--zsm-border);
  border-radius: 16px;
  overflow: hidden;
}
.accordion-button {
  background-color: var(--zsm-surface);
  color: var(--zsm-ink);
}
.accordion-button:not(.collapsed) {
  background-color: var(--zsm-surface-2);
  color: var(--zsm-ink);
  box-shadow: none;
}
.accordion-button:focus {
  box-shadow: none;
  border-color: var(--zsm-border);
}

/* ============================================================
   Primer pase de página (dashboard/index.vue, adelantado fuera de
   orden a pedido del usuario): números de KPI en Oswald + label
   "Hoy" discreto en mayúsculas — mismo tratamiento que ya usaba
   .zsm-price-final en productos.vue, aplicado acá vía dos clases
   nuevas en vez de heredarlo de golpe por <h4>/<p>.
   ============================================================ */
.zsm-kpi-value {
  font-family: var(--zsm-font-display);
  font-variant-numeric: tabular-nums;
}
.zsm-kpi-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  color: var(--zsm-ink-soft);
}

/* .alert-info (usado en productos.vue, flujo de Repuestos/Fastmech al
   mostrar los datos del vehículo) traía el mismo celeste frío de
   --bs-info-bg-subtle/--bs-info-text-emphasis del theme -- son valores
   pre-calculados en el build de Bootstrap, no siguieron el cambio de
   --bs-info en :root. Alineado a neutro cálido en vez de inventar un
   azul "Taller" que todavía no existe en ningún otro lado de la app. */
.alert-info {
  --bs-alert-color: var(--zsm-ink);
  --bs-alert-bg: var(--zsm-surface-2);
  --bs-alert-border-color: var(--zsm-border);
}