/* ============================================================================
   ATRIA — SKIN ENGINE  (v0.8.0 · M1)
   CRM/calificador inmobiliario con IA · producto enlatado de Oficina de Jhonson.

   ARQUITECTURA EN 3 CAPAS
     (a) PRIMITIVOS  → escala cruda de color (--c-*). No se usan directo en la app.
     (b) SEMÁNTICOS  → --bg, --surface, --ink, --primary, --stage-* ... definidos
                       en términos de primitivos. ESTO es lo que consumen los .jsx.
     (c) TEMA        → :root[data-theme="light"] / [data-theme="dark"] redefinen (b).
                       Sin data-theme, prefers-color-scheme decide (fallback sin JS).

   ⚠️ CONTRATO CON LOS .JSX: los nombres semánticos NO se borran ni renombran
   (atria-console.jsx / atria-metrics.jsx / atria-admin.jsx / broker.html los usan
   via cv("--x") → var(--x)). Se pueden AGREGAR nuevos. Los tokens fósiles del
   viejo sistema de pedidos (--st-*, --ch-delivery) fueron eliminados: grep
   confirmó 0 usos en *.jsx / *.html / *.js.

   WHITE-LABEL: el skin activo (window.ATRIA_SKINS en raiz-config.js) pisa la capa
   semántica con document.documentElement.style.setProperty() desde atria-theme.js.
   ============================================================================ */

/* ============================ (a) PRIMITIVOS ============================== */
:root {
  /* Violeta eléctrico — marca base ATRIA */
  --c-violet-50:  #F7F3FF;
  --c-violet-100: #EDE6FE;
  --c-violet-200: #DCCCFD;
  --c-violet-300: #C4A8FB;
  --c-violet-400: #A78BFA;
  --c-violet-500: #8B5CF6;
  --c-violet-600: #6D28D9;
  --c-violet-700: #4C1D95;
  --c-violet-800: #2E1065;
  --c-violet-900: #1C1140;
  --c-violet-950: #0E0920;   /* wash de superficie en dark (primary-soft) */
  --c-violet-990: #0B0719;   /* wash aún más sutil en dark (primary-tint) */

  /* Cian / cielo — dato, información, "nuevo" */
  --c-cyan-100: #DDF4FA;
  --c-cyan-400: #38BDF8;
  --c-cyan-600: #0B6E86;
  --c-cyan-950: #0B2434;

  /* Teal — visita / verde agua */
  --c-teal-100: #D6F5F0;
  --c-teal-400: #2DD4BF;
  --c-teal-600: #0A6E68;
  --c-teal-950: #0A2E2C;

  /* Índigo — negociación */
  --c-indigo-100: #E6E7FE;
  --c-indigo-400: #818CF8;
  --c-indigo-600: #4338CA;
  --c-indigo-950: #1B1E45;

  /* Esmeralda — éxito / disponible / cerrado */
  --c-emerald-100: #D9F5EA;
  --c-emerald-400: #34D399;
  --c-emerald-500: #25A96A;
  --c-emerald-600: #067A55;
  --c-emerald-950: #0E2E24;

  /* Ámbar — acento de marca Oficina de Jhonson */
  --c-amber-100: #FDF0D0;
  --c-amber-400: #FBBF24;
  --c-amber-500: #F5B50A;
  --c-amber-700: #8A5200;
  --c-amber-950: #33260A;

  /* Rosa/rojo — alerta, stock comprometido, lead perdido */
  --c-rose-100: #FDE4EA;
  --c-rose-400: #E63E67;
  --c-rose-600: #C0104A;
  --c-rose-950: #2A0C17;

  /* Grises azulados (grafito) */
  --c-slate-0:   #FFFFFF;
  --c-slate-25:  #F6F7FB;
  --c-slate-50:  #EEF0F8;
  --c-slate-100: #E1E5F2;
  --c-slate-200: #E2E5F0;
  --c-slate-300: #C7CCDE;
  --c-slate-500: #686E8A;
  --c-slate-600: #464B66;
  --c-slate-900: #14162B;

  /* Grafito azulado (dark) */
  --c-graphite-950: #0A0C16;
  --c-graphite-900: #0D0F1C;
  --c-graphite-800: #151827;
  --c-graphite-700: #1E2233;
  --c-graphite-600: #262B3E;
  --c-graphite-500: #39405A;
  --c-graphite-300: #8B93AE;
  --c-graphite-200: #B6BCD4;
  --c-graphite-50:  #EDEFF9;

  /* — Forma — */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 26px;

  /* — Tipografía — */
  --font:  "Inter", system-ui, -apple-system, sans-serif;
  --serif: "Montserrat", Georgia, serif;
}

/* ================= (b)+(c) SEMÁNTICOS · TEMA CLARO (default) ==============
   Se declara dos veces (:root y :root[data-theme="light"]) para que el tema
   claro explícito gane siempre, incluso si el SO está en dark.               */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Fondos y superficies — limpio y vibrante (blanco azulado, NO beige) */
  --bg:        var(--c-slate-25);
  --surface:   var(--c-slate-0);
  --surface-2: var(--c-slate-50);
  --surface-3: var(--c-slate-100);
  --line:      var(--c-slate-200);
  --line-2:    var(--c-slate-300);

  /* Tinta */
  --ink:    var(--c-slate-900);
  --ink-2:  var(--c-slate-600);
  --ink-3:  var(--c-slate-500);
  --ink-on: #FFFFFF;

  /* Marca — violeta eléctrico */
  --primary:      var(--c-violet-600);
  --primary-600:  #5B21B6;
  --primary-700:  var(--c-violet-700);
  --primary-soft: var(--c-violet-100);
  --primary-tint: var(--c-violet-50);

  /* Acento — ámbar Oficina de Jhonson */
  --accent:      var(--c-amber-500);
  --accent-ink:  #5A4200;
  --accent-soft: var(--c-amber-100);

  /* Éxito / disponible (nombre histórico: wasabi) */
  --wasabi:      var(--c-emerald-600);
  --wasabi-soft: var(--c-emerald-100);

  /* Alerta (stock comprometido / doble venta / lead perdido) */
  --alert:    var(--c-rose-600);
  /* fills con texto blanco encima (broker header/chips): primary/alert bastante oscuros para AA */
  --primary-fill: var(--primary);
  --alert-fill:   var(--alert);
  --alert-bg: var(--c-rose-100);

  /* Etapas del lead (pipeline comercial) */
  --stage-nuevo:        var(--c-cyan-600);     --stage-nuevo-bg:        var(--c-cyan-100);
  --stage-calificado:   var(--c-violet-600);   --stage-calificado-bg:   var(--c-violet-100);
  --stage-derivado:     var(--c-amber-700);    --stage-derivado-bg:     var(--c-amber-100);
  --stage-visita:       var(--c-teal-600);     --stage-visita-bg:       var(--c-teal-100);
  --stage-negociacion:  var(--c-indigo-600);   --stage-negociacion-bg:  var(--c-indigo-100);
  --stage-cerrado:      var(--c-emerald-600);  --stage-cerrado-bg:      var(--c-emerald-100);
  --stage-perdido:      var(--c-rose-600);     --stage-perdido-bg:      var(--c-rose-100);

  /* Fuentes de lead (canal de origen) */
  --ch-whatsapp: #0B7A4A;  --ch-whatsapp-bg: #DBF3E6;
  --ch-web:      var(--c-violet-600);  --ch-web-bg:      var(--c-violet-100);
  --ch-telefono: #4C5473;  --ch-telefono-bg: var(--c-slate-50);
  --ch-email:    var(--c-cyan-600);    --ch-email-bg:    var(--c-cyan-100);
  --ch-referido: var(--c-amber-700);   --ch-referido-bg: var(--c-amber-100);

  /* Plano masterplan (SVG del console) — ver mapeo hex→var en el ticket M1 */
  --plano-verde:    #CFE6C0;  /* césped, tope del degradé */
  --plano-verde-2:  #A9D197;  /* césped, base del degradé */
  --plano-verde-3:  #9EC98C;  /* claros / manchones */
  --plano-agua:     #BFE3F2;  /* laguna, centro */
  --plano-agua-2:   #8FC4E0;  /* laguna, borde */
  --plano-asfalto:  #5C5F5A;  /* ruta, borde */
  --plano-asfalto-2:#8A8D86;  /* ruta, calzada */
  --plano-linea:    #F2EFE6;  /* línea discontinua de la ruta */
  --plano-arbol:    #3F6B31;  /* copa base */
  --plano-arbol-2:  #5A8A45;  /* copa luz */
  --plano-arbol-3:  #6FA557;  /* brillo */
  --plano-arbol-sh: #2F4A26;  /* sombra de copa */
  --plano-tierra:   #B7BDB0;  /* muro de la casa vendida */
  --plano-techo:    #8F5A45;  /* techo de la casa vendida */
  --plano-puerta:   #7D857A;
  --plano-hito:     var(--c-amber-500);  /* club house */
  --plano-hito-ink: #5A4A10;
  --plano-texto:    #2F4F26;  /* rótulos sobre el césped */
  --plano-sombra:   #22331F;  /* floodColor de los drop-shadows */

  /* Sombra */
  --sh-1:   0 1px 2px rgba(20,22,43,.06), 0 1px 1px rgba(20,22,43,.04);
  --sh-2:   0 4px 14px rgba(20,22,43,.09), 0 1px 3px rgba(20,22,43,.05);
  --sh-3:   0 18px 48px rgba(20,22,43,.16), 0 4px 14px rgba(20,22,43,.08);
  --sh-pop: 0 24px 60px rgba(20,22,43,.22);
  --glow:   0 0 0 rgba(0,0,0,0);            /* sin glow en light */
  --glow-accent: 0 0 0 rgba(0,0,0,0);
}

/* ===================== (c) TEMA OSCURO — grafito azulado =================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:        var(--c-graphite-950);
  --surface:   var(--c-graphite-900);
  --surface-2: var(--c-graphite-800);
  --surface-3: var(--c-graphite-700);
  --line:      var(--c-graphite-600);   /* borde luminoso 1px */
  --line-2:    var(--c-graphite-500);

  --ink:    var(--c-graphite-50);
  --ink-2:  var(--c-graphite-200);
  --ink-3:  var(--c-graphite-300);
  --ink-on: #FFFFFF;

  /* Violeta claro: --primary se usa como TEXTO sobre superficie en 20+ lugares
     y como fondo con texto blanco en 5. #8B5CF6 es el punto de equilibrio:
     4.50:1 como texto sobre --surface (AA) y 4.23:1 con blanco encima (AA-large). */
  --primary:      var(--c-violet-500);
  --primary-600:  var(--c-violet-600);
  --primary-700:  var(--c-violet-700);   /* badge de versión: bg oscuro + tinta clara */
  --primary-soft: var(--c-violet-950);
  --primary-tint: var(--c-violet-990);

  --accent:      var(--c-amber-500);
  --accent-ink:  #2A1F04;
  --accent-soft: var(--c-amber-950);

  --wasabi:      var(--c-emerald-400);
  --wasabi-soft: var(--c-emerald-950);

  --alert:    var(--c-rose-400);
  /* en dark el primary/alert semánticos se aclaran (texto sobre superficie) → para FONDO con
     texto blanco usamos las versiones oscuras-saturadas: blanco encima ≥4.5:1 en ambos skins */
  --primary-fill: var(--primary-600);
  --alert-fill:   var(--c-rose-600);
  --alert-bg: var(--c-rose-950);

  --stage-nuevo:        var(--c-cyan-400);     --stage-nuevo-bg:        var(--c-cyan-950);
  --stage-calificado:   var(--c-violet-400);   --stage-calificado-bg:   #241C4A;
  --stage-derivado:     var(--c-amber-400);    --stage-derivado-bg:     var(--c-amber-950);
  --stage-visita:       var(--c-teal-400);     --stage-visita-bg:       var(--c-teal-950);
  --stage-negociacion:  var(--c-indigo-400);   --stage-negociacion-bg:  var(--c-indigo-950);
  --stage-cerrado:      var(--c-emerald-400);  --stage-cerrado-bg:      var(--c-emerald-950);
  --stage-perdido:      var(--c-rose-400);     --stage-perdido-bg:      var(--c-rose-950);

  --ch-whatsapp: #34D399;  --ch-whatsapp-bg: var(--c-emerald-950);
  --ch-web:      var(--c-violet-400);  --ch-web-bg:      #241C4A;
  --ch-telefono: var(--c-graphite-200); --ch-telefono-bg: var(--c-graphite-700);
  --ch-email:    var(--c-cyan-400);     --ch-email-bg:    var(--c-cyan-950);
  --ch-referido: var(--c-amber-400);    --ch-referido-bg: var(--c-amber-950);

  /* Plano en dark: mismos elementos, tonos apagados (ni fluo ni ilegible) */
  --plano-verde:    #2A3D2C;
  --plano-verde-2:  #1E2E20;
  --plano-verde-3:  #26382A;
  --plano-agua:     #1B3C4E;
  --plano-agua-2:   #122B3A;
  --plano-asfalto:  #23262F;
  --plano-asfalto-2:#33373F;
  --plano-linea:    #6C7280;
  --plano-arbol:    #2C4A2A;
  --plano-arbol-2:  #3B6236;
  --plano-arbol-3:  #4C7B44;
  --plano-arbol-sh: #101B0F;
  --plano-tierra:   #4A5057;
  --plano-techo:    #5C3B2E;
  --plano-puerta:   #3A4048;
  --plano-hito:     #C08F09;
  --plano-hito-ink: #1B1503;
  --plano-texto:    #A8C79A;
  --plano-sombra:   #05070A;

  /* Sombras más profundas + glow sutil en los acentos */
  --sh-1:   0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(139,92,246,.06);
  --sh-2:   0 6px 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
  --sh-3:   0 22px 54px rgba(0,0,0,.65), 0 6px 18px rgba(0,0,0,.45);
  --sh-pop: 0 28px 70px rgba(0,0,0,.75);
  --glow:        0 0 22px -6px rgba(139,92,246,.55);
  --glow-accent: 0 0 22px -6px rgba(245,181,10,.5);
}

/* Sin preferencia guardada y sin JS: seguimos al sistema. atria-theme.js siempre
   escribe data-theme, así que esto solo aplica en el primer paint / JS off. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0A0C16; --surface: #0D0F1C; --surface-2: #151827; --surface-3: #1E2233;
    --line: #262B3E; --line-2: #39405A;
    --ink: #EDEFF9; --ink-2: #B6BCD4; --ink-3: #8B93AE;
    --primary: #8B5CF6; --primary-soft: #0E0920; --primary-tint: #0B0719;
    --wasabi: #34D399; --wasabi-soft: #0E2E24;
    --alert: #E63E67; --alert-bg: #2A0C17;
  }
}

/* ============================== BASE ====================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; }
::selection { background: var(--primary-soft); color: var(--ink); }

/* Scrollbars discretas */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); border: 3px solid transparent; background-clip: padding-box; }

/* ===================== TRANSICIÓN DE TEMA (200ms) =========================
   Solo mientras atria-theme.js pone .atria-theming en <html>. No transiciona
   layout (nunca width/height/transform), solo color/fondo/borde/fill/stroke.  */
:root.atria-theming,
:root.atria-theming * ,
:root.atria-theming *::before,
:root.atria-theming *::after {
  transition: background-color .2s ease, background .2s ease, color .2s ease,
              border-color .2s ease, fill .2s ease, stroke .2s ease,
              box-shadow .2s ease !important;
}

/* ======================= UTILIDADES DE ANIMACIÓN ========================== */
@keyframes maki-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes maki-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes maki-slide-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes maki-pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes maki-spin { to { transform: rotate(360deg); } }
@keyframes maki-alert-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(230,62,103,.55); } 50% { box-shadow: 0 0 0 7px rgba(230,62,103,0); } }
@keyframes maki-alert-bg { 0%,100% { background: var(--alert-bg); } 50% { background: var(--surface-3); } }
@keyframes maki-vip-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes atria-paint { from { opacity: 0; transform: translateY(6px); background: var(--primary-soft); } to { opacity: 1; transform: none; } }
@keyframes lh-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes lh-sheen { from { background-position: -120% 0; } to { background-position: 220% 0; } }

/* ==================== PULIDO FINO · MICRO-INTERACCIONES =================== */
.lh-display { font-family: var(--serif); letter-spacing: -0.02em; }

.lh-row { transition: transform .15s cubic-bezier(.22,1,.36,1), box-shadow .15s ease, background .15s ease, border-color .15s ease; }
.lh-row:hover { transform: translateY(-1px); box-shadow: var(--sh-2); background: var(--surface) !important; border-color: var(--line-2) !important; }
.lh-row:active { transform: translateY(0); }

.lh-card { transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease; }
.lh-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2), var(--glow); }

input, select, textarea { transition: border-color .14s ease, background .14s ease, box-shadow .14s ease; }
input:focus, select:focus, textarea:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-soft); background: var(--surface) !important; }
::placeholder { color: var(--ink-3); opacity: 1; }

button, a, .lh-row { -webkit-tap-highlight-color: transparent; }
*:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.lh-enter { animation: lh-enter .32s cubic-bezier(.22,1,.36,1) both; }
.lh-header { box-shadow: 0 1px 0 var(--line), 0 6px 18px -12px rgba(0,0,0,.35); }

/* ===================== PLANO MASTERPLAN (SVG tokenizable) =================
   El SVG de atria-console.jsx todavía trae los hex hardcodeados. Estas clases
   son el enganche para el swap (agregar la clase en el nodo SVG y borrar el
   atributo fill/stroke): el color pasa a salir del token, que ya está resuelto
   para light y dark.                                                         */
.plano-lote { transform-box: fill-box; transform-origin: center; cursor: pointer; }

.pl-fill-verde     { fill: var(--plano-verde); }
.pl-fill-verde-2   { fill: var(--plano-verde-2); }
.pl-fill-verde-3   { fill: var(--plano-verde-3); }
.pl-fill-agua      { fill: var(--plano-agua); }
.pl-fill-agua-2    { fill: var(--plano-agua-2); }
.pl-fill-arbol     { fill: var(--plano-arbol); }
.pl-fill-arbol-2   { fill: var(--plano-arbol-2); }
.pl-fill-arbol-3   { fill: var(--plano-arbol-3); }
.pl-fill-arbol-sh  { fill: var(--plano-arbol-sh); }
.pl-fill-tierra    { fill: var(--plano-tierra); }
.pl-fill-techo     { fill: var(--plano-techo); }
.pl-fill-puerta    { fill: var(--plano-puerta); }
.pl-fill-hito      { fill: var(--plano-hito); }
.pl-fill-hito-ink  { fill: var(--plano-hito-ink); }
.pl-fill-texto     { fill: var(--plano-texto); }
.pl-stroke-asfalto   { stroke: var(--plano-asfalto); }
.pl-stroke-asfalto-2 { stroke: var(--plano-asfalto-2); }
.pl-stroke-linea     { stroke: var(--plano-linea); }

/* Estado del pin del lote (opt-in por clase; hoy va por atributo fill) */
.pl-pin-a { fill: var(--pl-a, currentColor); }
.pl-pin-b { fill: var(--pl-b, currentColor); }
.pl-disp      { --pl-a: var(--stage-cerrado);      --pl-b: var(--wasabi); }
.pl-reservado { --pl-a: var(--stage-derivado);     --pl-b: var(--accent); }
.pl-vendido   { --pl-a: var(--plano-puerta);       --pl-b: var(--plano-tierra); }

/* En dark el plano no debe quedar fluorescente: si el SVG aún trae hex crudos,
   este ajuste lo asienta sin tocar el JSX. */
:root[data-theme="dark"] svg .plano-lote { filter: saturate(.86) brightness(.92); }
/* ...sin matar el feedback de hover (brightness) del componente: .92 x 1.06 = .975 */
:root[data-theme="dark"] svg .plano-lote:hover { filter: saturate(.86) brightness(.975); }

/* =========================== REDUCED MOTION ============================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  :root.atria-theming,
  :root.atria-theming * { transition: none !important; }
  .plano-lote, .pl-disp { animation: none !important; transition: none !important; }
  .lh-row:hover, .lh-card:hover { transform: none; }
}

/* ==================== BOTÓN DE TEMA (monta atria-theme.js) ================= */
.atria-theme-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  /* Encima del contenido normal (.lh-header = 2) pero DEBAJO de todos los overlays
     (toast 80 - presentador 90 - visor Odoo 95 - modales 100/110 - FAB 120 - TV 9000+):
     con 9999 el boton flotante quedaba sobre los modales y les robaba clicks. */
  z-index: 60;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: var(--sh-2);
  transition: transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s ease,
              color .16s ease, border-color .16s ease, background-color .16s ease;
}
.atria-theme-toggle:hover {
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: var(--sh-2), var(--glow);
  transform: translateY(-1px);
}
.atria-theme-toggle:active { transform: translateY(0); }
.atria-theme-toggle svg { width: 18px; height: 18px; display: block; }
@media (max-width: 560px) {
  .atria-theme-toggle { width: 34px; height: 34px; top: 10px; right: 10px; }
  .atria-theme-toggle svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .atria-theme-toggle, .atria-theme-toggle:hover { transition: none; transform: none; }
}