/*
 * StockMaster — Modo claro "Editorial Gray"
 * Scope: html[data-sm-theme="light"]
 * Carga: despues de erp-ux-system.css (index.html)
 */

html[data-sm-theme="light"] {
  color-scheme: light;

  --u-bg:             #f4f3f1;
  --u-surface:        #fbfaf9;
  --u-surface-soft:   #efece7;
  --u-line:           #e6e4e0;
  --u-line-strong:    #d8d5cf;
  --u-text:           #37352f;
  --u-text-bright:    #1f1e1b;
  --u-muted:          #8a8578;
  --u-faint:          #b5b0a3;
  --u-blue:           #2563eb;
  --u-blue-dark:      #1d4ed8;
  --u-blue-border:    rgba(37, 99, 235, 0.28);
  --u-blue-hover:     rgba(37, 99, 235, 0.08);
  --u-cyan:           #0e7490;
  --u-cyan-hover:     rgba(14, 116, 144, 0.10);
  --u-green:          #15803d;
  --u-yellow:         #b45309;
  --u-red:            #dc2626;
  --u-shadow-sm:      0 1px 3px rgba(16, 24, 32, 0.06);
  --u-shadow-md:      0 4px 14px rgba(16, 24, 32, 0.08);
}

/* Fondo base — la regla original en erp-ux-system.css usa un gradiente
   hardcodeado con !important que no referencia --u-bg en sus extremos. */
html[data-sm-theme="light"] html,
html[data-sm-theme="light"] body,
html[data-sm-theme="light"] {
  background: var(--u-bg) !important;
}

/* Superficies compartidas (cards, modales, SweetAlert2) — la regla original
   en erp-ux-system.css hardcodea un gradiente oscuro con !important en vez
   de usar var(--u-surface). */
html[data-sm-theme="light"] .card,
html[data-sm-theme="light"] .section .card,
html[data-sm-theme="light"] .card-professional,
html[data-sm-theme="light"] .dh-panel,
html[data-sm-theme="light"] .surface-card,
html[data-sm-theme="light"] .dashboard-card,
html[data-sm-theme="light"] .dashboard-card-soft,
html[data-sm-theme="light"] .brand-group,
html[data-sm-theme="light"] .modal-content,
html[data-sm-theme="light"] .section-filters,
html[data-sm-theme="light"] .section-filters-transito,
html[data-sm-theme="light"] .filter-row,
html[data-sm-theme="light"] .filter-row-prov,
html[data-sm-theme="light"] .gerencia-exec-card,
html[data-sm-theme="light"] .gerencia-kpi-card,
html[data-sm-theme="light"] .home-mesa-aprobaciones,
html[data-sm-theme="light"] .home-role-detail .card,
html[data-sm-theme="light"] .home-role-kpis .card,
html[data-sm-theme="light"] .inventory-toolbar,
html[data-sm-theme="light"] .av3-card,
html[data-sm-theme="light"] .swal2-popup {
  background: var(--u-surface) !important;
  border-color: var(--u-line) !important;
  box-shadow: var(--u-shadow-sm) !important;
}

html[data-sm-theme="light"] .card:hover,
html[data-sm-theme="light"] .card-professional:hover,
html[data-sm-theme="light"] .section .card:hover,
html[data-sm-theme="light"] .dashboard-card:hover,
html[data-sm-theme="light"] .surface-card:hover {
  border-color: var(--u-line-strong) !important;
  box-shadow: var(--u-shadow-md) !important;
}

html[data-sm-theme="light"] ::placeholder {
  color: var(--u-faint) !important;
  opacity: 1 !important;
}

/* Sidebar / menu de navegación (.drawer) — misma razón: la regla original
   hardcodea el fondo oscuro con !important en vez de usar var(--u-surface).
   Sidebar blanco con borde, confirmado sobre mockup con el usuario. */
html[data-sm-theme="light"] .drawer,
html[data-sm-theme="light"] .drawer-content,
html[data-sm-theme="light"] .mobile-bottom-nav,
html[data-sm-theme="light"] .menu {
  background: var(--u-surface) !important;
  border-color: var(--u-line) !important;
}

/* Chips de estatus (DISPONIBLE/SEPARADO/VENDIDO):
   Diferido — verificado que no existen clases reutilizables
   (.badge-success/.status-disponible/etc.) en web/styles.css. Los colores
   de estos chips se pintan inline desde JS (ver statusAccent() y el
   armado de "esBadge"/"badgeDias" en web/app.js), por lo que un bloque
   CSS aquí no tendría efecto. Queda pendiente para el rollout
   pantalla-por-pantalla (Task 6, fuera de este plan). */

/* Pantalla de login (#login/.lw-*) — erp-ux-system.css tiene su propio
   bloque "LOGIN" (lineas 643-756) con varios valores hardcodeados en
   !important que web/styles.css ya resuelve correctamente por tema via
   --sm-*, pero erp-ux-system.css carga despues y gana por !important.
   Se sobreescribe aqui solo lo que queda oscuro/illegible en claro; el
   resto de ese bloque (tipografia, tamaños, radios via --u-radius-*, el
   acento rosa de --lw-eyebrow) ya es neutral entre temas y no se toca. */
html[data-sm-theme="light"] #login {
  background: var(--u-bg) !important;
}

html[data-sm-theme="light"] .lw-card {
  background: var(--u-surface) !important;
}

/* Especificidad extra necesaria: styles.css tiene un bloque #login .lw-input
   duplicado y desactualizado (linea ~22815) que hardcodea background:
   #0b0f1a !important directo (no usa var(--sm-bg-root) como el bloque
   original de la linea ~4649) y gana por el ID #login en el selector. */
html[data-sm-theme="light"] #login .lw-input {
  background: var(--u-surface-soft) !important;
  border-color: var(--u-line-strong) !important;
}

html[data-sm-theme="light"] #login .lw-input::placeholder {
  color: var(--u-faint) !important;
}

html[data-sm-theme="light"] #login .lw-toggle {
  color: var(--u-muted) !important;
}

html[data-sm-theme="light"] #login .lw-help {
  color: var(--u-muted) !important;
}

/* Inputs globales — erp-ux-system.css tiene un bloque "INPUTS" (linea ~231)
   que aplica background hardcodeado (rgba(2,6,23,.36)) con !important a
   TODO input/select/textarea de la app (incluye .swal-input, .lw-input,
   .card input, etc). Es el hallazgo de mayor alcance de este parche: sin
   esto, cualquier campo de formulario en toda la app queda ilegible en
   claro, no solo en login. */
html[data-sm-theme="light"] input,
html[data-sm-theme="light"] select,
html[data-sm-theme="light"] textarea,
html[data-sm-theme="light"] .swal2-input,
html[data-sm-theme="light"] .swal2-textarea,
html[data-sm-theme="light"] .swal-input,
html[data-sm-theme="light"] .sel-filter,
html[data-sm-theme="light"] .lw-input,
html[data-sm-theme="light"] .drawer-search input,
html[data-sm-theme="light"] .menu input,
html[data-sm-theme="light"] .card input,
html[data-sm-theme="light"] .card textarea {
  background: var(--u-surface-soft) !important;
  border-color: var(--u-line-strong) !important;
}

html[data-sm-theme="light"] label,
html[data-sm-theme="light"] .swal2-popup label,
html[data-sm-theme="light"] .lw-label {
  color: var(--u-muted) !important;
}

/* Badge de estado de sincronizacion/API (visible en login y en el drawer
   post-login) — mismo patron: fondo hardcodeado, y el estado de error usa
   #fecaca (rosa pensado para texto sobre fondo oscuro, ilegible en claro). */
html[data-sm-theme="light"] .sm-sync-status {
  background: var(--u-surface-soft) !important;
}

html[data-sm-theme="light"] .sm-sync-status--error,
html[data-sm-theme="light"] .sm-sync-status--down {
  color: var(--u-red) !important;
}