/**
 * reskin-patch.css — Override universal v248 Corporativo
 * Aplica el tema corporativo (Electric Blue / Light) a TODAS las páginas.
 * Cargar como ÚLTIMO stylesheet en todos los HTML admin/proveedor/cliente.
 * NO modifica selectores — sólo reemplaza colores y efectos glass con superficies claras.
 */

/* ══════════════════════════════════════════════════
   0. VARIABLES adicionales
   ══════════════════════════════════════════════════ */
:root {
  --shadow-big-dark:    0 4px 6px rgba(0,0,0,.05), 0 10px 24px rgba(0,0,0,.08);
  --glass-modal:        var(--color-surface);
  --radius-pill:        9999px;
  --gradient-primary:   linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-primary-text: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --marquee-duration:   25s;
}

/* ══════════════════════════════════════════════════
   1. BODY — fondo claro, sin radiales verdes
   ══════════════════════════════════════════════════ */
body {
  background-color: var(--color-bg) !important;
  background-image: none !important;
  background-attachment: unset !important;
  font-family: var(--font-family) !important;
  -webkit-font-smoothing: antialiased !important;
  color: var(--color-text) !important;
}

/* ══════════════════════════════════════════════════
   2. TOPBAR — blanco sólido, sin glassmorphism
   ──────────────────────────────────────────────────
   FIX DE RAÍZ (2026-09): este bloque forzaba fondo blanco
   con !important a TODO `.topbar` de la app, sin importar
   si la página definía su propio header oscuro/degradado
   con texto blanco (cliente y chofer). Cada página tenía
   que "pelear" ese !important agregando el suyo propio en
   el fondo — y si alguien se olvidaba (pasó en
   cliente/notificaciones.css, cliente/cuenta.html y las
   3 páginas de chofer), el resultado era un header
   invisible: texto e ícono de "volver" blancos sobre un
   fondo que este archivo pintaba blanco por encima.
   Solución: las páginas con header propio marcan su
   `.topbar` con el atributo `data-topbar-tema` y quedan
   afuera de esta regla, sin depender del orden en que se
   cargan los <link> ni de acordarse de un !important. */
header.topbar:not([data-topbar-tema]),
.topbar:not([data-topbar-tema]),
.main-header:not([data-topbar-tema]) {
  background: var(--color-surface) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.04) !important;
}

.topbar-title,
h1.topbar-title,
.page-title {
  letter-spacing: var(--letter-spacing-tight) !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
}

/* ══════════════════════════════════════════════════
   3. CARDS — superficie blanca plana, sin glass
   ══════════════════════════════════════════════════ */
.card,
.chart-section,
.ranking-section,
.tabla-container,
.tabla-wrapper,
.tabla-card-wrap,
.filtros-section,
.filtros-bar,
.superadmin-card,
.admin-card,
.motor-card, .regla-card, .trigger-card, .auto-card,
.info-section,
.detalle-section,
.panel-section,
.resumen-card,
.summary-card,
.widget-card,
.presupuesto-card,
.cheque-card,
.caja-card,
.cobro-card,
.vencimiento-card,
.anomalia-card,
.auditoria-card,
.ruta-card,
.zona-card,
.punto-card {
  background: var(--color-surface) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-fluffy) !important;
}
.card:hover,
.chart-section:hover,
.ranking-section:hover,
.motor-card:hover, .regla-card:hover, .trigger-card:hover, .auto-card:hover,
.resumen-card:hover, .summary-card:hover, .widget-card:hover {
  box-shadow: var(--shadow-big) !important;
  transform: translateY(-1px) !important;
  transition: box-shadow var(--transition-base), transform var(--transition-base) !important;
}

.card-header,
.chart-section-header,
.panel-header,
.section-header {
  background: var(--color-bg) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 14px 20px !important;
}
.card-header h3, .card-title,
.chart-section h2, .ranking-section h2,
.section-heading, .section-title,
.tabla-header h2 {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: var(--letter-spacing-tight) !important;
  color: var(--color-text) !important;
  border-bottom: none !important;
}

/* ══════════════════════════════════════════════════
   4. KPI CARDS — blanco plano
   ══════════════════════════════════════════════════ */
.kpi-card,
.fkpi,
.kpi-box,
.metric-card,
.stat-card,
.small-box,
.info-box {
  background: var(--color-surface) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-fluffy) !important;
  transition: box-shadow var(--transition-base), transform var(--transition-base) !important;
  border-left: 1px solid var(--color-border) !important;
}
.kpi-card:hover, .fkpi:hover, .small-box:hover, .info-box:hover {
  box-shadow: var(--shadow-big) !important;
  transform: translateY(-1px) !important;
}

.small-box.bg-primary h3,   .small-box.bg-primary p,
.small-box.bg-info h3,      .small-box.bg-info p,
.small-box.bg-success h3,   .small-box.bg-success p,
.small-box.bg-secondary h3, .small-box.bg-secondary p,
.small-box.bg-danger h3,    .small-box.bg-danger p,
.small-box.bg-dark h3,      .small-box.bg-dark p {
  color: var(--color-text) !important;
}
.small-box.bg-primary p    { color: var(--color-primary-dark) !important; }
.small-box.bg-info p       { color: var(--nav-reportes) !important; }
.small-box.bg-success p    { color: var(--color-success-mid) !important; }
.small-box.bg-secondary p  { color: var(--color-text-muted) !important; }
.small-box.bg-danger p     { color: var(--color-danger-mid) !important; }

.small-box.bg-primary   { border-left: 3px solid var(--color-primary) !important; }
.small-box.bg-info      { border-left: 3px solid var(--color-info-mid) !important; }
.small-box.bg-success   { border-left: 3px solid var(--color-success-mid) !important; }
.small-box.bg-secondary { border-left: 3px solid var(--color-text-light) !important; }
.small-box.bg-danger    { border-left: 3px solid var(--color-danger-mid) !important; }
.small-box.bg-dark      { border-left: 3px solid var(--color-text) !important; }

.small-box .icon { color: rgba(0,0,0,.06) !important; }
.small-box > .small-box-footer {
  background: var(--color-bg) !important;
  color: var(--color-text-muted) !important;
}
.small-box > .small-box-footer:hover { color: var(--color-text) !important; }

.kpi-card { position: relative; overflow: hidden; }
.kpi-card::after {
  content: '';
  position: absolute; top: 16px; right: 16px;
  width: 7px; height: 7px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  opacity: .35;
}

.kpi-value, .fkpi-val, .kpi-number, .metric-value {
  font-size: 2rem !important;
  font-weight: 700 !important;
  letter-spacing: var(--letter-spacing-tight) !important;
  line-height: 1.1 !important;
  color: var(--color-text) !important;
}
.kpi-card h3, .fkpi-label, .kpi-label, .kpi-title, .metric-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--letter-spacing-wide) !important;
  color: var(--color-text-light) !important;
}
.kpi-change.positive, .kpi-delta.up   { color: var(--color-success-mid) !important; }
.kpi-change.negative, .kpi-delta.down { color: var(--color-danger-mid) !important; }

.fkpi-val.verde    { color: var(--color-success-mid) !important; }
.fkpi-val.rojo     { color: var(--color-danger-mid) !important; }
.fkpi-val.amarillo { color: var(--color-warning-mid) !important; }
.fkpi-sub { font-size: 12px !important; color: var(--color-text-light) !important; }

/* ══════════════════════════════════════════════════
   5. TABLAS — header gris claro, hover azul sutil
   ══════════════════════════════════════════════════ */
table th,
table.tabla th,
.ranking-table th,
.tabla-base th,
.table th {
  background: var(--color-bg) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--letter-spacing-wide) !important;
  color: var(--color-text-muted) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 10px 14px !important;
  white-space: nowrap !important;
}
table td,
table.tabla td,
.ranking-table td,
.tabla-base td,
.table td {
  border-bottom: 1px solid var(--color-border-soft) !important;
  padding: 12px 14px !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  color: var(--color-text) !important;
}
tbody tr:hover td,
table.tabla tr:hover td,
.ranking-table tbody tr:hover td {
  background: rgba(37,99,235,.04) !important;
  cursor: pointer;
}
tbody tr:nth-child(even) td { background: transparent !important; }

/* ══════════════════════════════════════════════════
   6. FILTROS — blanco plano
   ══════════════════════════════════════════════════ */
.filtros-section, .filtros-bar, .filter-bar, .search-bar,
.filtros-panel, .buscador-section {
  background: var(--color-surface) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-fluffy) !important;
}
.filtro-group label,
.filter-label,
.search-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--letter-spacing-wide) !important;
  color: var(--color-text-light) !important;
}
.filtro-group select,
.filtro-group input,
.filter-input,
.search-input {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  background: var(--color-surface) !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}
.filtro-group select:focus,
.filtro-group input:focus,
.filter-input:focus,
.search-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.10) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════
   7. FORMULARIOS — foco azul
   ══════════════════════════════════════════════════ */
.form-group input,
.form-group select,
.form-group textarea,
.form-control,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="password"],
select,
textarea {
  /* Antes sin padding propio: heredaban el padding mínimo del navegador
     (~1px), lo que los hacía ver angostos/apretados y dificultaba leer
     el contenido tipeado. Se define acá, en la regla global, para que
     quede parejo en todas las pantallas del admin que usan este mismo
     bloque (POS, pedidos, compras, prospección, etc.). */
  padding: 9px 12px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-family) !important;
  font-size: 13px !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-control:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.10) !important;
}
/* Sacar las flechitas (spinner) de todos los inputs numéricos del panel:
   no son prácticas para tipear montos/cantidades a mano. Regla global acá
   porque reskin-patch.css se carga en casi todas las pantallas del admin
   (POS, productos, pedidos, compras, etc.) — así se aplica en todos lados
   de una sola vez en vez de parchear cada CSS de sección. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}
/* Campos de login (línea inferior, sin caja): esta regla global de arriba les da
   borde+fondo de "input de formulario", pero el diseño del login pide un input
   desnudo con solo línea inferior. Se anula puntualmente aquí, para las 3
   pantallas de login (admin/cliente/chofer), en vez de parchear cada archivo. */
.login-field input,
.field-wrap input {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 17px !important;
  color: var(--login-text, var(--color-text)) !important;
}
.login-field input:focus,
.field-wrap input:focus {
  border: none !important;
  box-shadow: none !important;
}
input::placeholder, textarea::placeholder { color: var(--color-text-light) !important; }
.form-group label,
.form-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--letter-spacing-wide) !important;
  color: var(--color-text-light) !important;
}

/* ══════════════════════════════════════════════════
   8. BOTONES LEGACY — azul corporativo
   ══════════════════════════════════════════════════ */
.btn-primary, button.btn-primary,
.btn.btn--primary, button.btn.btn--primary,
.boton-primario, .boton-primary,
.btn-nuevo-pres, .btn-nuevo-pedido,
.btn-guardar, .btn-confirmar, .btn-aplicar {
  /* [a11y] --color-primary (#6A9873, 3.31:1) no llegaba a 4.5:1 con el texto blanco de este botón
     (es la regla que gana en pos.html sobre #btn-abrir-turno pese al fix ya aplicado en --ge-teal/
     --color-box-primary, porque esta hoja carga después y con !important). Se usa --color-primary-dark
     (5.66:1, ya usado en :hover) igual que se hizo con --ge-teal/--color-box-primary. */
  background: var(--color-primary-dark) !important;
  color: var(--color-surface) !important;
  border: 1px solid var(--color-primary-dark) !important;
  border-radius: var(--radius-md) !important;
  font-weight: var(--font-weight-semibold) !important;
  font-family: var(--font-family) !important;
  padding: 8px 18px !important;
  font-size: var(--font-size-sm) !important;
  transition: all var(--transition-base) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  letter-spacing: -.01em !important;
  box-shadow: 0 1px 2px rgba(37,99,235,.20) !important;
  white-space: nowrap !important;
}
.btn-primary:hover:not(:disabled),
button.btn-primary:hover:not(:disabled),
.btn.btn--primary:hover:not(:disabled),
button.btn.btn--primary:hover:not(:disabled) {
  /* :hover pasa a --color-primary-darker (antes también --color-primary-dark, igual que el estado
     base, con lo que el hover no cambiaba de color) */
  background: var(--color-primary-darker) !important;
  border-color: var(--color-primary-darker) !important;
  box-shadow: var(--shadow-glow), 0 4px 12px rgba(37,99,235,.20) !important;
  transform: translateY(-1px) !important;
}

.btn-secondary, button.btn-secondary,
.btn.btn--secondary, button.btn.btn--secondary,
.btn-exportar, .btn-importar,
.btn-outline, .boton-secundario,
.btn-cancelar, .btn-limpiar {
  background: var(--color-surface) !important;
  color: var(--color-text-muted) !important;
  border: 1px solid var(--color-border-soft) !important;
  border-radius: var(--radius-md) !important;
  font-weight: var(--font-weight-semibold) !important;
  font-family: var(--font-family) !important;
  padding: 8px 18px !important;
  font-size: var(--font-size-sm) !important;
  transition: all var(--transition-base) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}
.btn-secondary:hover:not(:disabled),
button.btn-secondary:hover:not(:disabled),
.btn.btn--secondary:hover:not(:disabled),
button.btn.btn--secondary:hover:not(:disabled),
.btn-exportar:hover, .btn-importar:hover {
  background: var(--color-surface-2) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

.btn-danger, button.btn-danger,
.btn.btn--danger, button.btn.btn--danger,
.btn-peligro, .boton-peligro {
  background: transparent !important;
  color: var(--color-danger) !important;
  border: 1px solid rgba(220,38,38,.25) !important;
  border-radius: var(--radius-md) !important;
  font-weight: var(--font-weight-semibold) !important;
  padding: 8px 18px !important;
  font-size: var(--font-size-sm) !important;
  transition: all var(--transition-base) !important;
  cursor: pointer !important;
}
.btn-danger:hover:not(:disabled),
.btn.btn--danger:hover:not(:disabled) { background: var(--color-danger-bg) !important; }

.btn-sm { padding: 5px 12px !important; font-size: var(--font-size-xs) !important; }
.btn:disabled, button:disabled { opacity: .45 !important; cursor: not-allowed !important; }

/* ══════════════════════════════════════════════════
   9. MODAL — blanco sólido, sin glass
   ══════════════════════════════════════════════════ */
.modal,
.modal-box,
.modal-content,
.modal-overlay > div,
.dialog-panel {
  background: var(--color-surface) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 4px 6px rgba(0,0,0,.05), 0 20px 48px rgba(0,0,0,.10) !important;
}
.modal-overlay,
.modal-backdrop,
.overlay-fondo {
  background: rgba(15,23,42,.40) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
}
.modal-header {
  border-bottom: 1px solid var(--color-border) !important;
  background: transparent !important;
}
.modal-header h3, .modal-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: var(--letter-spacing-tight) !important;
  color: var(--color-text) !important;
}
.modal-footer {
  border-top: 1px solid var(--color-border) !important;
  background: var(--color-bg) !important;
}

/* ══════════════════════════════════════════════════
   10. PANEL LATERAL — blanco sólido
   ══════════════════════════════════════════════════ */
.detalle-panel,
.side-panel,
.panel-lateral,
.drawer-panel {
  background: var(--color-surface) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-left: 1px solid var(--color-border) !important;
  box-shadow: -4px 0 16px rgba(0,0,0,.06) !important;
}
.detalle-panel-header, .panel-header { border-bottom: 1px solid var(--color-border) !important; }
.detalle-panel-header h3, .panel-titulo {
  font-size: 15px !important; font-weight: 700 !important;
  letter-spacing: var(--letter-spacing-tight) !important;
  color: var(--color-text) !important;
}

/* ══════════════════════════════════════════════════
   11. CHIPS & BADGES — sello de estado (ver DESIGN_SYSTEM_HOJA_DE_RUTA.md)
   ══════════════════════════════════════════════════ */
.chip, .status-badge, .badge, .tag, .etiqueta,
.estado-chip, .tipo-badge {
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-family-display) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  padding: 1px 8px !important;
  border-width: 3px !important; border-style: double !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}
/* Un chip/badge que la página oculta (atributo hidden o style="display:none", p. ej. el contador del
   carrito en cliente/inicio.html cuando está vacío) tiene que seguir oculto: el `display: inline-flex !important`
   de arriba le ganaba al display:none en línea y mostraba un "0" fantasma. El selector solo matchea
   "display:none" / "display: none"; cuando el JS lo muestra (style.display = 'block') deja de matchear. */
.chip[hidden], .status-badge[hidden], .badge[hidden], .tag[hidden], .etiqueta[hidden],
.estado-chip[hidden], .tipo-badge[hidden],
.chip[style*="display:none"], .status-badge[style*="display:none"], .badge[style*="display:none"],
.tag[style*="display:none"], .etiqueta[style*="display:none"], .estado-chip[style*="display:none"],
.tipo-badge[style*="display:none"],
.chip[style*="display: none"], .status-badge[style*="display: none"], .badge[style*="display: none"],
.tag[style*="display: none"], .etiqueta[style*="display: none"], .estado-chip[style*="display: none"],
.tipo-badge[style*="display: none"] {
  display: none !important;
}
.chip-verde, .status-badge.green, .badge-success, .estado-activo,
.chip-exito, .tag-activo {
  background: var(--color-success-bg) !important;
  color: var(--color-success) !important;
  border-color: var(--color-success) !important;
}
.chip-rojo, .status-badge.red, .badge-danger, .estado-inactivo,
.chip-peligro, .tag-cancelado {
  background: var(--color-danger-bg) !important;
  color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
}
.chip-amarillo, .status-badge.yellow, .badge-warning, .estado-pendiente,
.chip-advertencia {
  background: var(--color-warning-bg) !important;
  color: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
}
.chip-azul, .status-badge.blue, .badge-info, .estado-info {
  background: var(--color-info-bg) !important;
  color: var(--color-info) !important;
  border-color: var(--color-info) !important;
}
.chip-gris, .status-badge.gray, .badge-secondary, .estado-gris {
  background: var(--color-surface-2) !important;
  color: var(--color-text-muted) !important;
  border-color: var(--color-border) !important;
}
.chip-naranja, .status-badge.orange {
  background: rgba(143,95,0,.12) !important;
  color: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
}


/* ══════════════════════════════════════════════════
   12. TABS — subrayado azul
   ══════════════════════════════════════════════════ */
.tabs {
  background: var(--color-surface-2) !important;
  border-radius: var(--radius-xl) !important;
  padding: 4px !important;
  border: none !important;
}
.tab-btn {
  border-radius: var(--radius-lg) !important;
  font-family: var(--font-family) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-text-muted) !important;
  transition: all var(--transition-base) !important;
}
.tab-btn.active {
  background: var(--color-surface) !important;
  box-shadow: var(--shadow-fluffy) !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
}
.tab-btn-principal {
  font-family: var(--font-family) !important;
  font-size: 14px !important;
  transition: all var(--transition-base) !important;
  border-bottom: 2px solid transparent !important;
  color: var(--color-text-muted) !important;
}
.tab-btn-principal.active {
  color: var(--color-primary) !important;
  border-bottom-color: var(--color-primary) !important;
  font-weight: 700 !important;
}
.tab-btn-principal:hover { color: var(--color-text) !important; }

/* ══════════════════════════════════════════════════
   13. ANIMACIONES — fadeInUp y fadeIn (sin cambio)
   ══════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.kpi-card, .fkpi, .small-box, .info-box, .metric-card, .stat-card,
.motor-card, .regla-card, .auto-card, .widget-card, .resumen-card {
  animation: fadeInUp 0.3s ease-out both;
}
.kpi-card:nth-child(1), .fkpi:nth-child(1), .small-box:nth-child(1) { animation-delay: .04s; }
.kpi-card:nth-child(2), .fkpi:nth-child(2), .small-box:nth-child(2) { animation-delay: .09s; }
.kpi-card:nth-child(3), .fkpi:nth-child(3), .small-box:nth-child(3) { animation-delay: .14s; }
.kpi-card:nth-child(4), .fkpi:nth-child(4), .small-box:nth-child(4) { animation-delay: .19s; }
.kpi-card:nth-child(5)                                               { animation-delay: .24s; }
.kpi-card:nth-child(6)                                               { animation-delay: .29s; }

.chart-section, .ranking-section, .filtros-section, .filtros-bar,
.tabla-container, .tabla-wrapper {
  animation: fadeIn 0.35s ease-out both;
  animation-delay: .08s;
}

/* ══════════════════════════════════════════════════
   14. SCROLLBAR GLOBAL — minimalista
   ══════════════════════════════════════════════════ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-soft) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--color-border-soft);
  border-radius: var(--radius-full);
}
*::-webkit-scrollbar-thumb:hover { background: var(--color-text-light); }

/* ══════════════════════════════════════════════════
   15. COMPONENTES FINANCIEROS
   ══════════════════════════════════════════════════ */
.saldo-resumen {
  background: rgba(37,99,235,.04) !important;
  border: 1px solid rgba(37,99,235,.12) !important;
  border-radius: var(--radius-xl) !important;
}
.movimiento-icono { border-radius: var(--radius-md) !important; }
.alerta-inline { border-radius: var(--radius-xl) !important; font-size: 13px !important; }
.nota-tipo-btn { border-radius: var(--radius-xl) !important; transition: all var(--transition-base) !important; }
.semaforo-dot { border-radius: 50% !important; }

/* ══════════════════════════════════════════════════
   16b. COLUMNA ACCIONES STICKY — evita que quede
   cortada por el scroll horizontal de .tabla-wrap.
   Aplicar clase .col-sticky-end al <th> y al <td>
   de la última columna (acciones/candado/etc).
   ══════════════════════════════════════════════════ */
.tabla-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.col-sticky-end {
  position: sticky !important;
  right: 0;
  z-index: 2;
  background: var(--color-surface);
  box-shadow: -6px 0 8px -6px rgba(0,0,0,.15);
}
thead .col-sticky-end {
  /* Cubre todas las tablas, incluida clientes.html tras su migración a
     .tabla-admin (Fase 3, PLAN_UNIFICACION_UX_ADMIN.md §20) — el selector
     .tabla-clientes que estaba acá era redundante con este mismo desde
     antes (misma regla, sin scope), no hacía falta reemplazarlo por
     .tabla-admin. */
  background: var(--color-bg, var(--color-surface-2));
  z-index: 3;
}
tbody tr:hover .col-sticky-end {
  background: var(--color-bg);
}
tbody tr.fila-inactiva .col-sticky-end {
  background: var(--color-surface);
}

/* En modo tarjetas (mobile) la tabla deja de ser tabla:
   la columna sticky vuelve a fluir normal para no romper el layout */
@media (max-width: 768px) {
  .table-responsive-cards .col-sticky-end {
    position: static !important;
    box-shadow: none;
    background: transparent;
  }
}

/* ══════════════════════════════════════════════════
   16. TOAST — superficie blanca con borde de acento
   ══════════════════════════════════════════════════ */
.toast {
  background: var(--color-surface) !important;
  /* [Fix — aviso "Seleccioná un chofer" pasaba desapercibido] Este archivo
     se carga con !important DESPUÉS de tokens.css en las ~78 páginas que lo
     incluyen, así que pisaba el ajuste de tokens.css si solo se tocaba ahí.
     Mismo criterio acá: el tipo "default" (sin color explícito) es el que
     usan los avisos de validación en toda la app — se sube de tamaño y
     pasa a rojo para que se note. */
  color: var(--color-danger) !important;
  border: 1px solid var(--color-border) !important;
  border-left: 4px solid var(--color-danger-mid) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-family) !important;
  font-size: 17px !important;
  font-weight: var(--font-weight-bold) !important;
  box-shadow: var(--shadow-big) !important;
  letter-spacing: .01em !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.toast--success, .toast.exito {
  border-left-color: var(--color-success-mid) !important;
  color: var(--color-success) !important;
}
.toast--danger, .toast.error {
  border-left-color: var(--color-danger-mid) !important;
  color: var(--color-danger) !important;
}
.toast--warning {
  border-left-color: var(--color-warning-mid) !important;
  color: var(--color-warning) !important;
}

/* ══════════════════════════════════════════════════
   17. EMPTY STATES
   ══════════════════════════════════════════════════ */
.empty-state, .empty-row, .tabla-empty, .vacio, .grilla-empty {
  color: var(--color-text-light) !important;
  font-size: 14px !important;
  font-family: var(--font-family) !important;
}

/* ══════════════════════════════════════════════════
   18. SIDEBAR NAV — texto claro sobre fondo blanco
   ══════════════════════════════════════════════════ */
.sidebar-sep {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--color-text-light) !important;
}

/* NAV rail — reemplazar dark por claro */
.nav-rail, .nav-sidebar, .sidebar,
.nav-ws-panel, .nav-panel {
  background: var(--color-surface) !important;
  border-right: 1px solid var(--color-border) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
/* Items del nav — texto oscuro, hover azul sutil */
.nav-section-item, .nav-ws-btn, .sidebar-item, .nav-item {
  color: var(--color-text-muted) !important;
}
.nav-section-item:hover, .nav-ws-btn:hover, .sidebar-item:hover, .nav-item:hover {
  background: rgba(37,99,235,.06) !important;
  color: var(--color-text) !important;
}
.nav-section-item.active, .nav-ws-btn.active, .sidebar-item.active,
.nav-item.active, .nav-section-item[aria-current="page"] {
  background: rgba(37,99,235,.10) !important;
  color: var(--color-primary-dark) !important;
  font-weight: 600 !important;
}
/* Tooltip del nav — blanco con borde */
.nav-ws-btn::after {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
}

/* ══════════════════════════════════════════════════
   19. LOGIN — card blanca limpia
   ══════════════════════════════════════════════════ */
.login-card, .login-box, .login-container,
.auth-card, .auth-container {
  background: var(--color-surface) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 4px 6px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.08) !important;
}

/* ══════════════════════════════════════════════════
   20. POS — punto de venta
   ══════════════════════════════════════════════════ */
.pos-panel, .pos-cart, .pos-productos,
.pos-header, .pos-sidebar, .pos-total {
  border-radius: var(--radius-xl) !important;
}
.pos-panel, .pos-cart {
  background: var(--color-surface) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-fluffy) !important;
}
.pos-item-card {
  border-radius: var(--radius-lg) !important;
  transition: all var(--transition-base) !important;
  border: 1px solid var(--color-border) !important;
  background: var(--color-surface) !important;
}
.pos-item-card:hover {
  box-shadow: var(--shadow-big) !important;
  transform: translateY(-1px) !important;
  border-color: var(--color-primary) !important;
}

/* ══════════════════════════════════════════════════
   21. RUTAS
   ══════════════════════════════════════════════════ */
.ruta-item, .chofer-card, .orden-card,
.parada-card, .entrega-card, .cliente-ruta-item {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-fluffy) !important;
  transition: all var(--transition-base) !important;
}
.ruta-item:hover, .chofer-card:hover {
  box-shadow: var(--shadow-big) !important;
  transform: translateY(-1px) !important;
}
.map-container, #map {
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-fluffy) !important;
  border: 1px solid var(--color-border) !important;
}

/* ══════════════════════════════════════════════════
   22. AUTOMATIZACIÓN
   ══════════════════════════════════════════════════ */
.motor-card, .regla-card, .trigger-card, .auto-card,
.condicion-card, .accion-card, .ciclo-card {
  padding: 20px !important;
  transition: box-shadow var(--transition-base), transform var(--transition-base) !important;
}
.motor-activo .motor-status,
.regla-activa .regla-status {
  color: var(--color-success-mid) !important;
}
.motor-inactivo .motor-status,
.regla-inactiva .regla-status {
  color: var(--color-text-light) !important;
}

/* ══════════════════════════════════════════════════
   23. REPORTES — grids de KPIs
   ══════════════════════════════════════════════════ */
.kpis-grid, .kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}
.finanzas-kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}

/* ══════════════════════════════════════════════════
   24. PRESUPUESTOS / CHEQUES / VENCIMIENTOS
   ══════════════════════════════════════════════════ */
.presupuesto-row, .cheque-row, .vencimiento-row,
.cobro-row, .factura-row, .remito-row {
  transition: background var(--transition-fast) !important;
}
.presupuesto-row:hover td,
.cheque-row:hover td,
.vencimiento-row:hover td {
  background: rgba(37,99,235,.04) !important;
}

/* ══════════════════════════════════════════════════
   25. SUPERADMIN / CONFIG
   ══════════════════════════════════════════════════ */
.superadmin-card, .admin-card, .setup-card,
.config-card, .empresa-card {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-fluffy) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: all var(--transition-base) !important;
}
.superadmin-card:hover, .admin-card:hover,
.config-card:hover, .empresa-card:hover {
  box-shadow: var(--shadow-big) !important;
  transform: translateY(-1px) !important;
}

/* ══════════════════════════════════════════════════
   26. DASHBOARD — widgets y actividad
   ══════════════════════════════════════════════════ */
.dashboard-widget, .actividad-item,
.feed-card, .resumen-ventas, .resumen-cobros {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-fluffy) !important;
}

/* ══════════════════════════════════════════════════
   27. TEXTO DE TOTALES — azul corporativo (reemplaza gradiente verde)
   ══════════════════════════════════════════════════ */
.valor-total, .monto-total, .saldo-total-val,
.total-grand, .gran-total {
  color: var(--color-primary) !important;
  -webkit-text-fill-color: var(--color-primary) !important;
  background: none !important;
  font-weight: 800 !important;
}

/* ══════════════════════════════════════════════════
   28. BOTONES ICONO
   ══════════════════════════════════════════════════ */
.btn-icon, .action-btn, .icon-btn,
.btn-accion, .boton-icono {
  border-radius: var(--radius-md) !important;
  transition: all var(--transition-base) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.btn-icon:hover, .action-btn:hover, .icon-btn:hover {
  background: var(--color-surface-2) !important;
}

/* ══════════════════════════════════════════════════
   29. FIDELIZACIÓN
   ══════════════════════════════════════════════════ */
.nivel-card, .punto-card, .fidelizacion-card,
.nivel-badge, .tier-badge {
  border-radius: var(--radius-xl) !important;
  transition: all var(--transition-base) !important;
}
.nivel-card:hover, .punto-card:hover {
  box-shadow: var(--shadow-big) !important;
  transform: translateY(-1px) !important;
}

/* ══════════════════════════════════════════════════
   30. PORTAL PROVEEDOR / CLIENTE
   ══════════════════════════════════════════════════ */
.portal-header, .portal-nav,
.portal-card, .portal-section,
.cliente-header, .cliente-section {
  border-radius: var(--radius-xl) !important;
}
.portal-card, .portal-section {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-fluffy) !important;
}

/* ══════════════════════════════════════════════════
   31. FOCUS RING — azul corporativo en todos los controles
   ══════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}
button:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}

/* ══════════════════════════════════════════════════
   32. MICRO-INTERACCIONES
   ══════════════════════════════════════════════════ */
a { color: var(--color-primary); transition: color var(--transition-fast) !important; }
a:hover { color: var(--color-primary-dark); }
button { transition: all var(--transition-base) !important; }

/* ══════════════════════════════════════════════════
   33. PRELOADER — sin fondo oscuro verde
   ══════════════════════════════════════════════════ */
#app-preloader {
  background: var(--color-bg) !important;
}
#app-preloader .preloader-logo {
  color: var(--color-primary) !important;
  background: var(--color-surface, #fff) !important;
}
#app-preloader .preloader-text { color: var(--color-text-muted) !important; }
.preloader-bar {
  background: var(--color-border) !important;
}
.preloader-bar::after {
  background: var(--color-primary) !important;
}

/* ══════════════════════════════════════════════════
   34. MOBILE — iOS auto-zoom fix en inputs
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  input, select, textarea,
  .form-input, .form-select, .form-textarea {
    font-size: 16px !important;
  }
  .btn-icon, .btn-tool, .icon-btn, .accion-icon {
    min-width: 40px; min-height: 40px;
  }
}

/* ══════════════════════════════════════════════════
   35. IMPRESIÓN
   ══════════════════════════════════════════════════ */
@media print {
  body { background: white !important; }
  .topbar, .sidebar, nav { display: none !important; }
  .card, .kpi-card {
    box-shadow: none !important;
    border: 1px solid var(--color-border) !important;
    background: white !important;
    backdrop-filter: none !important;
  }
}

/* ══════════════════════════════════════════════════
   36. UTILIDADES (hallazgo 4.1 auditoría v254)
   Reemplazo progresivo de style="" inline por clases
   reutilizables. No bloqueante: usar en código nuevo y
   migrar los existentes de a poco.
   ══════════════════════════════════════════════════ */
.texto-chico  { font-size: var(--font-size-sm); }
.texto-mini   { font-size: 11px; }
.oculto       { display: none; }

/* Lo oculto desde JS (style.display='none' o [hidden]) tiene que seguir oculto: reglas
   como `.btn.btn--secondary { display:inline-flex !important }` lo pisaban y dejaban
   visibles botones que no correspondían (ej. "Cargar más" sin más páginas). */
/* Especificidad subida (.btn.btn.btn / button.btn.btn.btn) para ganarle a `button.btn.btn--secondary`. */
.btn.btn.btn[hidden],
.btn.btn.btn[style*="display:none"],
.btn.btn.btn[style*="display: none"],
button.btn.btn.btn[hidden],
button.btn.btn.btn[style*="display:none"],
button.btn.btn.btn[style*="display: none"] { display: none !important; }