/* ============================================================================
   Direccion visual "copper" -- StockMaster (2026-08-05). Inspirado en mockup
   Figma Make aprobado por el usuario via maqueta HTML. Ver spec:
   docs/superpowers/specs/2026-08-05-direccion-visual-copper-inicio-inventario-design.md

   Mecanismo: cualquier seccion que deba verse copper lleva el atributo
   data-cw="1" en su <div id="sec-...">. Este archivo define los tokens
   --cw-* (propios) y remapea --sm-* (el sistema de theming que ya usan
   .dh-hero/.dh-panel/.gerencia-kpi-card/etc en styles.css) scopeados a
   [data-cw] -- asi cualquier componente generico que ya existe se ve
   copper automaticamente, sin escribir un override por componente.
   Contabilidad ([id^="sec-contabilidad-"]) y CRM ([id^="sec-clientes"])
   son la EXCEPCION: usan su propio bloque mas abajo porque conservan su
   propio acento (naranja/indigo) en vez de heredar --cw-accent.
   No se toca --sm-* ni --acc-* en :root (serian globales) ni ningun modulo
   que no tenga data-cw="1"/no matchee esos dos prefijos de id. Reversible:
   quitar el <link> de este archivo en index.html revierte todo.
   ============================================================================ */

[data-cw], [id^="sec-contabilidad-"], [id^="sec-clientes"] {
  --cw-bg: #0d0c0a;
  --cw-panel: #0f0e0c;
  --cw-panel-raised: #141310;
  --cw-border: #1e1c18;
  --cw-border-soft: #161511;
  --cw-text: #f2efe8;
  --cw-text-dim: #b8b3a8;
  --cw-text-mute: #6b6660;
  --cw-text-faint: #4a4840;
  --cw-accent: #c97c2e;
  --cw-accent-2: #e0952e;
  --cw-ok: #22c55e;
  --cw-warn: #f59e0b;
  --cw-info: #6366f1;
  --cw-bad: #ef4444;
  --cw-font-display: 'Fraunces', Georgia, serif;
  --cw-font-mono: 'JetBrains Mono', ui-monospace, 'DM Mono', monospace;
}

html[data-sm-theme="light"] [data-cw],
html[data-sm-theme="light"] [id^="sec-contabilidad-"],
html[data-sm-theme="light"] [id^="sec-clientes"] {
  --cw-bg: #f7f4ee;
  --cw-panel: #ffffff;
  --cw-panel-raised: #f0ece2;
  --cw-border: #e4ddcf;
  --cw-border-soft: #ece6d9;
  --cw-text: #241f18;
  --cw-text-dim: #52493c;
  --cw-text-mute: #7d7364;
  --cw-text-faint: #a49c8c;
  --cw-accent: #a8611f;
  --cw-accent-2: #c97c2e;
  --cw-ok: #16a34a;
  --cw-warn: #b45309;
  --cw-info: #4f46e5;
  --cw-bad: #dc2626;
}

/* Remapeo --sm-* generico para toda seccion con data-cw="1": .dh-hero,
   .dh-panel, .gerencia-kpi-card, .section-hero, etc ya leen estos tokens
   en styles.css, asi que se retematizan solos. Contabilidad/CRM tienen su
   propio bloque equivalente mas abajo (con --hino/pipeline preservados). */
[data-cw] {
  --sm-bg-root: #0d0c0a;
  --sm-bg-surface: #0f0e0c;
  --sm-bg-raised: #1c1914;
  --sm-bg-sunken: #0a0908;
  --sm-fill-card: rgba(13, 12, 10, 0.46);
  --sm-fill-panel: rgba(13, 12, 10, 0.72);
  --sm-fill-input: rgba(13, 12, 10, 0.92);
  --sm-border-soft: rgba(242, 239, 232, 0.08);
  --sm-border-medium: rgba(242, 239, 232, 0.14);
  --sm-border-strong: rgba(242, 239, 232, 0.22);
  --sm-text-primary: #f2efe8;
  --sm-text-secondary: #d9d3c4;
  --sm-text-muted: #6b6660;
  --sm-text-disabled: #4a4840;
}

html[data-sm-theme="light"] [data-cw] {
  --sm-bg-root: #f7f4ee;
  --sm-bg-surface: #ffffff;
  --sm-bg-raised: #f0ece2;
  --sm-bg-sunken: #ece6d9;
  --sm-fill-card: #ffffff;
  --sm-fill-panel: #f7f4ee;
  --sm-fill-input: #ffffff;
  --sm-border-soft: #ece6d9;
  --sm-border-medium: #e4ddcf;
  --sm-border-strong: #c4b8a3;
  --sm-text-primary: #241f18;
  --sm-text-secondary: #3d3427;
  --sm-text-muted: #7d7364;
  --sm-text-disabled: #a49c8c;
}

/* ---- Hero generico (.dh-hero, incluida la variante .dh-hero.gerencia-hero
   -- el selector .dh-hero solo ya la alcanza) ----
   .dh-hero tiene una definicion base (styles.css:7930) y otra que la pisa,
   con !important, en el bloque "NEON RED GOLD" agregado al final del
   archivo (styles.css:11899). Este override tambien necesita !important
   para ganar por especificidad ([data-cw] .dh-hero > .dh-hero sola). */
[data-cw] .dh-hero {
  background: linear-gradient(135deg, var(--cw-panel) 0%, color-mix(in srgb, var(--cw-bg) 88%, black) 100%) !important;
  border: 1px solid var(--cw-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
/* Orbes decorativos rojo/dorado del bloque NEON RED GOLD -- no encajan con
   la direccion copper, se apagan en estas secciones. */
[data-cw] .dh-hero::before,
[data-cw] .dh-hero::after {
  display: none !important;
}
[data-cw] .dh-hero-kicker {
  font-family: var(--cw-font-mono) !important;
  color: var(--cw-accent-2) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
[data-cw] .dh-hero-title {
  font-family: var(--cw-font-display) !important;
  font-weight: 400 !important;
  color: var(--cw-text) !important;
  letter-spacing: -.02em !important;
  /* El bloque NEON RED GOLD (styles.css:11965) pone un borde izquierdo rojo
     de 5px por defecto en TODO .dh-hero-title -- una regla vieja (
     styles.css:12125, previa a esta sesion) ya lo apagaba pero solo para
     #sec-home/#sec-nuevos/#sec-usados/#sec-transito. Encontrado en el pase
     de pulido: Historial (y probablemente el resto de secciones nuevas de
     hoy) lo tenian sin apagar. */
  border-left: none !important;
  padding-left: 0 !important;
  text-shadow: none !important;
}
[data-cw] .dh-hero-sub {
  color: var(--cw-text-mute) !important;
}

/* ---- Campos de formulario, toda seccion con data-cw ----
   Encontrado en el pase de pulido: styles.css:10824-10835 fija un azul
   marino hardcodeado (#2b3f59, no deriva de ningun token) en TODO
   input[type=text/number/date], .form-control, .search-box, .sel-filter y
   textarea de la app entera -- por eso los campos se veian de un tono
   distinto al panel copper que los rodea. select ya se salva solo via
   select:not([multiple]) (styles.css:30178, usa var(--sm-bg-root)). No se
   toca la regla global (afecta modulos que no llevan data-cw); esta
   scopeada le gana por especificidad + !important solo aca adentro. */
[data-cw] input[type="text"],
[data-cw] input[type="number"],
[data-cw] input[type="date"],
[data-cw] input[type="password"],
[data-cw] .form-control,
[data-cw] .search-box,
[data-cw] .sel-filter,
[data-cw] textarea {
  background: var(--cw-panel-raised) !important;
  border-color: var(--cw-border-soft) !important;
  color: var(--cw-text) !important;
}

/* .dh-panel/.gerencia-kpi-card/.gerencia-kpi-value/.gerencia-kpi-label ya
   quedan cubiertos por el remapeo --sm-* de arriba (no necesitan override
   propio); las excepciones puntuales (Inicio, Inventario) siguen abajo. */
#sec-home .dh-hero-alert-box {
  border: 1px solid color-mix(in srgb, var(--cw-bad) 35%, transparent) !important;
  background: color-mix(in srgb, var(--cw-bad) 8%, transparent) !important;
  border-radius: 8px !important;
}
#sec-home .dh-hero-alert-label {
  font-family: var(--cw-font-mono) !important;
  color: var(--cw-bad) !important;
}
#sec-home .dh-hero-alert-val {
  font-family: var(--cw-font-display) !important;
  color: var(--cw-text) !important;
}

/* ---- Inicio: tarjetas de stock ----
   Base sin !important (styles.css:2390); pero .home-stock-card-sub y
   .home-stock-card-title tienen una segunda definicion con !important en
   el bloque NEON RED GOLD (styles.css:12343/12346), asi que esas dos si
   necesitan !important aqui. */
#sec-home .home-stock-card {
  background: var(--cw-panel) !important;
  border: 1px solid var(--cw-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
#sec-home .home-stock-card-title {
  font-family: var(--cw-font-display) !important;
  color: var(--cw-text) !important;
}
#sec-home .home-stock-card-sub {
  color: var(--cw-text-mute) !important;
}
#sec-home .home-stock-card-count {
  font-family: var(--cw-font-mono) !important;
  color: var(--cw-accent-2) !important;
}

/* ---- Paneles y KPIs, toda seccion con data-cw ----
   El fondo/borde de .dh-panel y .gerencia-kpi-card ya sale gratis del
   remapeo --sm-* de mas arriba (ambos leen var(--sm-*) en styles.css) --
   aca solo hace falta la tipografia (Fraunces en titulos/valores grandes),
   que --sm-* no controla. .dh-panel-title tambien tiene una segunda
   definicion !important en el bloque NEON RED GOLD (styles.css:12361/12364),
   asi que necesita !important aqui tambien. */
[data-cw] .dh-panel-title {
  font-family: var(--cw-font-display) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  color: var(--cw-text) !important;
}
[data-cw] .dh-panel-head {
  border-bottom-color: var(--cw-border) !important;
}
[data-cw] .gerencia-kpi-value {
  font-family: var(--cw-font-display) !important;
  color: var(--cw-text) !important;
}
[data-cw] .gerencia-kpi-label {
  color: var(--cw-text-mute) !important;
}

/* ---- Inventario: toolbar y filtros ----
   .inventory-toolbar-copy y .filter-chip-title tienen una segunda
   definicion con !important en el bloque NEON RED GOLD
   (styles.css:12373/12372), asi que esas dos necesitan !important aqui. */
#sec-nuevos .inventory-toolbar,
#sec-usados .inventory-toolbar,
#sec-transito .inventory-toolbar {
  background: var(--cw-panel) !important;
  border: 1px solid var(--cw-border) !important;
  border-radius: 10px !important;
}
#sec-nuevos .inventory-toolbar-title,
#sec-usados .inventory-toolbar-title,
#sec-transito .inventory-toolbar-title {
  font-family: var(--cw-font-display) !important;
  color: var(--cw-text) !important;
}
#sec-nuevos .inventory-toolbar-copy,
#sec-usados .inventory-toolbar-copy,
#sec-transito .inventory-toolbar-copy {
  color: var(--cw-text-mute) !important;
}
#sec-nuevos .sel-filter,
#sec-usados .sel-filter,
#sec-transito .sel-filter {
  background: var(--cw-panel-raised) !important;
  border: 1px solid var(--cw-border-soft) !important;
  color: var(--cw-text-dim) !important;
  border-radius: 6px !important;
}
#sec-nuevos .filter-chip-block,
#sec-usados .filter-chip-block,
#sec-transito .filter-chip-block {
  background: var(--cw-panel-raised) !important;
  border: 1px solid var(--cw-border) !important;
  border-radius: 8px !important;
}
#sec-nuevos .filter-chip-title,
#sec-usados .filter-chip-title,
#sec-transito .filter-chip-title {
  color: var(--cw-text-mute) !important;
}
#sec-nuevos .inv-count-pill,
#sec-usados .inv-count-pill,
#sec-transito .inv-count-pill {
  font-family: var(--cw-font-mono) !important;
  background: var(--cw-panel-raised) !important;
  color: var(--cw-text-mute) !important;
}

/* .inv-view-toggle vive en web/erp-ux-system.css:1321 (archivo aparte, sin
   !important). copper-inicio-inventario.css se carga despues de
   erp-ux-system.css en index.html, y el selector scopeado por #sec-nuevos
   ya tiene mas especificidad que la clase sola, asi que gana sin necesitar
   !important. */
#sec-nuevos .inv-view-toggle.active,
#sec-usados .inv-view-toggle.active,
#sec-transito .inv-view-toggle.active {
  background: var(--cw-panel-raised) !important;
  color: var(--cw-accent-2) !important;
  border-color: var(--cw-accent) !important;
}

/* ---- Inventario: tarjeta de vehiculo ----
   Base en styles.css:34077 ya usa !important para border/background. El
   acento de estado es una franja arriba via ::after leyendo la variable
   --status-accent (seteada inline por tarjeta en app.js) -- NO se toca
   ese mecanismo, ni se vuelve a un borde izquierdo (fue removido a
   proposito, ver comentario en styles.css:34092-34093). El hover en
   styles.css:34512 tambien fija border-color con !important, se sobreescribe
   para que no vuelva a gris al pasar el mouse. */
#sec-nuevos .smv-card.card-professional,
#sec-usados .smv-card.card-professional,
#sec-transito .smv-card.card-professional {
  background: var(--cw-panel) !important;
  border: 1px solid var(--cw-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
#sec-nuevos .smv-card.card-professional:hover,
#sec-usados .smv-card.card-professional:hover,
#sec-transito .smv-card.card-professional:hover {
  border-color: var(--cw-accent) !important;
}
#sec-nuevos .smv-marca,
#sec-usados .smv-marca,
#sec-transito .smv-marca {
  font-family: var(--cw-font-mono) !important;
  color: var(--cw-text-mute) !important;
}
#sec-nuevos .smv-card .smv-modelo,
#sec-usados .smv-card .smv-modelo,
#sec-transito .smv-card .smv-modelo {
  font-family: var(--cw-font-display) !important;
  color: var(--cw-text) !important;
}
#sec-nuevos .smv-vin-label,
#sec-usados .smv-vin-label,
#sec-transito .smv-vin-label {
  font-family: var(--cw-font-mono) !important;
  color: var(--cw-text-faint) !important;
}
#sec-nuevos .smv-vin-valor,
#sec-usados .smv-vin-valor,
#sec-transito .smv-vin-valor {
  font-family: var(--cw-font-mono) !important;
  color: var(--cw-text-dim) !important;
}

/* ============================================================================
   Contabilidad + CRM (fase 2, 2026-08-05) -- decision del usuario: fondo y
   tipografia copper, pero cada modulo conserva SU PROPIO acento (naranja
   --hino en Contabilidad, indigo/paleta de pipeline en CRM). No se toca
   --hino, --hino2, --crm-col-accent ni ningun color semantico de estado.

   A diferencia de Inicio/Inventario (que usaban hex directo), Contabilidad
   (contabilidad-redesign.css) y los paneles genericos que CRM reutiliza
   (.dh-panel, .gerencia-kpi-card, .section-hero) ya leen sus colores de los
   tokens --sm-bg-, --sm-fill-, --sm-text- y --sm-border- definidos en
   styles.css :root. Alcanza con REDEFINIR esos mismos tokens, scopeados a
   estas secciones, para que todo lo que ya existe se vea copper sin escribir
   un override por componente ni pelear con los !important de
   contabilidad-redesign.css (los tokens no llevan !important ahi, así que
   el que carga despues -- este archivo -- gana por orden de cascada).
   ============================================================================ */
[id^="sec-contabilidad-"], [id^="sec-clientes"] {
  --sm-bg-root: #0d0c0a;
  --sm-bg-surface: #0f0e0c;
  --sm-bg-raised: #1c1914;
  --sm-bg-sunken: #0a0908;
  --sm-fill-card: rgba(13, 12, 10, 0.46);
  --sm-fill-panel: rgba(13, 12, 10, 0.72);
  --sm-fill-input: rgba(13, 12, 10, 0.92);
  --sm-border-soft: rgba(242, 239, 232, 0.08);
  --sm-border-medium: rgba(242, 239, 232, 0.14);
  --sm-border-strong: rgba(242, 239, 232, 0.22);
  --sm-text-primary: #f2efe8;
  --sm-text-secondary: #d9d3c4;
  --sm-text-muted: #6b6660;
  --sm-text-disabled: #4a4840;
  /* --c-line/--c-line2 son propias de contabilidad-redesign.css (no forman
     parte del sistema --sm-*); se redefinen aca tambien, mismo mecanismo. */
  --c-line: rgba(242, 239, 232, 0.1);
  --c-line2: rgba(242, 239, 232, 0.16);
}

html[data-sm-theme="light"] [id^="sec-contabilidad-"],
html[data-sm-theme="light"] [id^="sec-clientes"] {
  --sm-bg-root: #f7f4ee;
  --sm-bg-surface: #ffffff;
  --sm-bg-raised: #f0ece2;
  --sm-bg-sunken: #ece6d9;
  --sm-fill-card: #ffffff;
  --sm-fill-panel: #f7f4ee;
  --sm-fill-input: #ffffff;
  --sm-border-soft: #ece6d9;
  --sm-border-medium: #e4ddcf;
  --sm-border-strong: #c4b8a3;
  --sm-text-primary: #241f18;
  --sm-text-secondary: #3d3427;
  --sm-text-muted: #7d7364;
  --sm-text-disabled: #a49c8c;
  --c-line: #e4ddcf;
  --c-line2: #d8cfba;
}

/* Titulos: el resto del texto de Contabilidad/CRM se queda en Inter/DM Mono
   (son pantallas densas en datos, no hace falta serif ahi) -- solo los
   titulos grandes de hero pasan a la tipografia display, igual que en
   Inicio/Inventario. Necesitan !important porque .dh-hero-title generico
   (styles.css ~11965, bloque NEON RED GOLD) ya fija font-family Oswald con
   !important y tiene mas especificidad que dejar la regla sin marcar. */
[id^="sec-contabilidad-"] .dh-hero.contabilidad-hero .dh-hero-title {
  font-family: var(--cw-font-display) !important;
}
[id^="sec-clientes"] .section-hero-title {
  /* erp-ux-system.css trae un reset masivo (h1..td, .section-hero-title
     incluido en la lista) con font-family Inter !important -- hace falta
     igualar la importancia; la especificidad ya gana por el atributo. */
  font-family: var(--cw-font-display) !important;
}

/* ============================================================================
   Documentos (fase 3), Operaciones/Centro Gerencial/Furgones (fase 4)
   (2026-08-05). #sec-dash, #sec-conduces, #sec-doc-editables, #sec-gerencia,
   #sec-operaciones y #sec-furgones llevan data-cw="1" -- ya quedan cubiertos
   por el bloque [data-cw] de arriba (tokens + remapeo --sm-* + hero + panel).
   #sec-dash y #sec-conduces no tenian .dh-hero -- se agrego en index.html
   (mismo componente ya usado en Inicio/Contabilidad, no una plantilla
   nueva). #sec-gerencia/#sec-operaciones/#sec-furgones ya tenian
   .dh-hero.gerencia-hero + .gerencia-kpi-grid/.dh-panel, sin necesitar
   ningun cambio de HTML. No se toca ningun color semantico (verde/ambar/
   rojo de estado, azul de accion). */