/**
 * WMS Mobile App Design System — capa de tema global
 * Aplica sobre Tailwind + custom.css sin reescribir cada pantalla.
 */

/* ── Botones con utilidades legacy brand-orange ── */
.bg-brand-orange.text-white,
button.bg-brand-orange,
a.bg-brand-orange {
  background-color: var(--wms-primary) !important;
  color: #fff !important;
  border-radius: var(--wms-radius);
  font-weight: 600;
}

.bg-brand-orange.text-white:hover,
button.bg-brand-orange:hover,
.hover\:bg-brand-dark:hover {
  background-color: var(--wms-primary-dark) !important;
  color: #fff !important;
}

.bg-brand-orange.text-white:active {
  background-color: var(--wms-primary-dark) !important;
}

/* Botones secundarios (borde naranja legacy → azul claro) */
.border-orange-200,
.border-orange-300,
.border-orange-200\/60,
.border-orange-200\/80 {
  border-color: #b8d4f5 !important;
}

.bg-orange-50,
.bg-orange-50\/90,
.hover\:bg-orange-50:hover,
.hover\:bg-orange-100:hover {
  background-color: var(--wms-primary-light) !important;
}

.text-brand-dark,
.text-orange-950,
.text-orange-900,
.text-amber-900,
.text-amber-950 {
  color: var(--wms-primary) !important;
}

/* ── Header app ── */
#tour-app-header {
  border-color: var(--wms-border) !important;
  background: var(--wms-surface) !important;
  border-radius: var(--wms-radius) !important;
  box-shadow: 0 1px 3px rgba(26, 59, 93, 0.08);
}

#tour-app-header h1 {
  color: var(--wms-primary);
  font-weight: 700;
}

#tour-app-header p {
  color: var(--wms-text-muted);
}

/* ── Paneles / cards RRHH y secciones ── */
.rounded-2xl.border-orange-200\/60,
.rounded-2xl.border-orange-200,
[id$='Pane'].rounded-2xl {
  border-color: var(--wms-border) !important;
  background: var(--wms-surface) !important;
  border-radius: var(--wms-radius) !important;
}

.bg-white\/90,
.bg-white\/95 {
  background-color: var(--wms-surface) !important;
}

/* ── Matriz evaluación: cabecera gradiente → azul WMS ── */
#matrixTable thead tr.bg-gradient-to-r,
#matrixTable thead th.bg-gradient-to-br,
#matrixTable thead th.bg-brand-orange,
#matrixTable thead tr.from-brand-orange {
  background: var(--wms-primary) !important;
  background-image: linear-gradient(135deg, #1a3b5d 0%, #2d5a87 100%) !important;
  color: #fff !important;
}

#matrixTable thead tr.bg-amber-50,
#matrixTable thead th.bg-amber-50 {
  background: var(--wms-primary-light) !important;
  color: var(--wms-primary) !important;
  border-color: #b8d4f5 !important;
}

#matrixTable thead tr.border-amber-300\/90 {
  border-color: #b8d4f5 !important;
}

/* ── Banner período / evaluación ── */
#evalMonthBanner .eval-month-banner-card,
.bg-gradient-to-r.from-brand-orange {
  background: var(--wms-primary-light) !important;
  background-image: none !important;
  border: 1px solid #b8d4f5 !important;
  color: var(--wms-primary) !important;
  border-radius: var(--wms-radius);
}

/* ── Carrito canje ── */
#canjeCartBar {
  border-color: #b8d4f5 !important;
  background: var(--wms-primary-light) !important;
  border-radius: var(--wms-radius);
}

/* ── Puntos extra fila matriz ── */
.border-violet-200,
.border-violet-300,
.bg-violet-50 {
  border-color: #b8d4f5 !important;
  background-color: #eef4fc !important;
}

.text-violet-900,
.text-violet-950 {
  color: var(--wms-primary) !important;
}

.bg-violet-600,
.hover\:bg-violet-700:hover {
  background-color: var(--wms-primary) !important;
}

/* ── Focus rings globales ── */
.focus\:ring-brand-orange\/25:focus,
.focus\:ring-brand-orange\/35:focus,
.focus\:ring-brand-orange\/50:focus {
  --tw-ring-color: rgba(26, 59, 93, 0.25) !important;
}

.focus\:border-brand-orange:focus {
  border-color: var(--wms-primary) !important;
}

/* ── Tablas listado (header row azul claro) ── */
thead.bg-stone-50,
thead tr.bg-stone-50 {
  background: var(--wms-primary-light) !important;
}

thead th {
  color: var(--wms-primary);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Paginación estilo WMS ── */
#btnMatrixPrev,
#btnMatrixNext,
#btnUsersPrev,
#btnUsersNext {
  background: var(--wms-primary-light) !important;
  color: var(--wms-primary) !important;
  border: 1px solid #b8d4f5 !important;
  border-radius: var(--wms-radius);
}

#btnMatrixPrev:hover:not(:disabled),
#btnMatrixNext:hover:not(:disabled) {
  background: var(--wms-primary) !important;
  color: #fff !important;
}

.bg-brand-orange.h-2\.5,
[data-matrix-page].bg-brand-orange {
  background-color: var(--wms-primary) !important;
}

/* ── Login ── */
body.min-h-screen.bg-gradient-to-br {
  background: var(--wms-bg) !important;
  background-image: none !important;
}

/* ── Switches / checkboxes accent ── */
.rrhh-checkbox,
input[type='checkbox'] {
  accent-color: var(--wms-primary);
}

/* ── Role pills (fallback) ── */
.role-pill--admin,
.role-pill--rrhh,
.role-pill--supervisor {
  border-radius: var(--wms-radius);
}