/* ===========================================================================
   TEMAS — CRM v2, Creative Socio

   Un tema redefine SOLO la capa de roles de tokens.css (--cs-bg, --cs-text,
   --cs-border…) y los nueve colores de estado. Ningún componente de app.css
   cambia, y por eso agregar un tema no puede romper una vista: los
   componentes nunca nombran un color crudo.

   El tema lo escribe el SERVIDOR en <html data-tema="…">, leyendo
   users.preferencias. No lo pone JavaScript después de cargar: eso haría
   que la página naciera clara y saltara a oscura medio segundo más tarde,
   en cada visita.

   > Los nueve colores de estado NO se eligen a ojo. Cada uno pasó por
   > `scripts/color.py`, que mide las tres comprobaciones del CLAUDE.md:
   > contraste 4.5:1 contra su propia píldora, distancia perceptual ΔE2000
   > contra los otros ocho, y ΔE otra vez bajo deuteranopia simulada.
   > Ese script LEE ESTE ARCHIVO, así que aquí están los valores de verdad
   > y no una copia. Si tocas un `--cs-est-*`, corre el script.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   LOS NUEVE ESTADOS — juego para fondo CLARO

   `-txt` es el color de la etiqueta, `-bg` el de su píldora y `-pt` el del
   punto en el mapa. El del mapa a veces no coincide con el del texto: sobre
   el gris de Google, un tono pensado para leerse a 12px queda demasiado
   apagado como punto.
   --------------------------------------------------------------------------- */
:root,
[data-tema="sobrio"],
[data-tema="sobrio-color"],
[data-tema="stripe"] {
  --cs-est-cantera-txt:      #545454;
  --cs-est-cantera-bg:       #F6F6F6;
  --cs-est-cantera-pt:       #AFAFAF;
  --cs-est-shortlist-txt:    #174EB6;
  --cs-est-shortlist-bg:     #EFF3FE;
  --cs-est-shortlist-pt:     #174EB6;
  --cs-est-auditado-txt:     #8F3EE0;
  --cs-est-auditado-bg:      #F2ECF9;
  --cs-est-auditado-pt:      #8F3EE0;
  --cs-est-contactado-txt:   #A06000;
  --cs-est-contactado-bg:    #FDF2E2;
  --cs-est-contactado-pt:    #A06000;
  --cs-est-conversacion-txt: #157C7F;
  --cs-est-conversacion-bg:  #ECF8F9;
  --cs-est-conversacion-pt:  #157C7F;
  --cs-est-propuesta-txt:    #CA2175;
  --cs-est-propuesta-bg:     #F9ECF2;
  --cs-est-propuesta-pt:     #CA2175;
  --cs-est-piloto-txt:       #417F15;
  --cs-est-piloto-bg:        #F1F9EC;
  --cs-est-piloto-pt:        #417F15;
  /* Cliente y cerrado van en relleno pleno: son los dos finales del
     embudo. Por eso su `-txt` es el color que va ENCIMA del relleno. */
  --cs-est-cliente-txt:      #FFFFFF;
  --cs-est-cliente-bg:       #047C42;
  --cs-est-cliente-pt:       #047C42;
  --cs-est-cerrado-txt:      #FFFFFF;
  --cs-est-cerrado-bg:       #1F1F1F;
  --cs-est-cerrado-pt:       #1F1F1F;
}

/* ---------------------------------------------------------------------------
   LOS NUEVE ESTADOS — juego para fondo OSCURO

   No son los de arriba aclarados: sobre un fondo oscuro hay que subir la
   luminosidad Y bajar la saturación, porque un color saturado sobre negro
   vibra y cansa. Los comparte todo tema oscuro a propósito — el verde es
   "cliente" en Linear y en GitHub por igual; el significado del color no
   puede depender del tema que tengas puesto.
   --------------------------------------------------------------------------- */
[data-tema="linear"],
[data-tema="github"] {
  --cs-est-cantera-txt:      #A8AEB8;
  --cs-est-cantera-bg:       #1C2028;
  --cs-est-cantera-pt:       #9BA3AF;
  --cs-est-shortlist-txt:    #6EA8FE;
  --cs-est-shortlist-bg:     #132239;
  --cs-est-shortlist-pt:     #6EA8FE;
  --cs-est-auditado-txt:     #C79BF5;
  --cs-est-auditado-bg:      #241B35;
  --cs-est-auditado-pt:      #C79BF5;
  --cs-est-contactado-txt:   #E8A33D;
  --cs-est-contactado-bg:    #2C2113;
  --cs-est-contactado-pt:    #E8A33D;
  --cs-est-conversacion-txt: #4ECDC7;
  --cs-est-conversacion-bg:  #11292C;
  --cs-est-conversacion-pt:  #4ECDC7;
  --cs-est-propuesta-txt:    #F87BB4;
  --cs-est-propuesta-bg:     #301827;
  --cs-est-propuesta-pt:     #F87BB4;
  --cs-est-piloto-txt:       #93D659;
  --cs-est-piloto-bg:        #1B2A15;
  --cs-est-piloto-pt:        #93D659;
  --cs-est-cliente-txt:      #0B1410;
  --cs-est-cliente-bg:       #3FB37F;
  --cs-est-cliente-pt:       #3FB37F;
  /* Cerrado al gris OSCURO y no a otro gris medio: contra cantera daban
     ΔE 2.1 normal y 1.0 en deuteranopia, o sea el mismo punto en el mapa.
     En claro no chocaban porque cerrado es casi negro; al subir los dos
     para el fondo oscuro se encontraron a mitad de camino. */
  --cs-est-cerrado-txt:      #D8DDE4;
  --cs-est-cerrado-bg:       #3A4048;
  --cs-est-cerrado-pt:       #4B525C;
}

/* ===========================================================================
   SOBRIO — el de siempre, y el que sale si no hay preferencia.
   No redefine nada: es exactamente la capa de roles de tokens.css. Existe
   como nombre para poder elegirlo de vuelta.
   =========================================================================== */

/* ===========================================================================
   SOBRIO + COLOR
   El mismo esqueleto claro, pero el cromo deja de ser gris: el menú lateral
   se tiñe, el activo se marca en azul y los enlaces pesan más. Para quien
   quiere orientarse por color sin cambiar de mundo.
   =========================================================================== */
[data-tema="sobrio-color"] {
  --cs-accion:         #276EF1;
  --cs-accion-hover:   #174EB6;
  --cs-accion-texto:   #FFFFFF;
  --cs-bg-subtle:      #F4F7FE;
  --cs-bg-active:      #E4ECFD;
  --cs-border:         #DCE4F5;
  --cs-border-strong:  #BECDEE;
  --cs-text-link:      #174EB6;
  --cs-menu-bg:        #F7F9FE;
  --cs-menu-activo-bg: #E4ECFD;
  --cs-menu-activo-marca: #276EF1;
  --cs-tope-bg:        #101010;
}

/* ===========================================================================
   STRIPE — claro, índigo y con aire.
   Fondo blanco puro, texto azul-tinta en vez de negro, y bordes muy suaves
   apoyados en sombra en lugar de línea. El acento es el índigo de Stripe.
   =========================================================================== */
[data-tema="stripe"] {
  --cs-accion:         #635BFF;
  --cs-accion-hover:   #5145CD;
  --cs-accion-texto:   #FFFFFF;
  --cs-tope-texto:     #FFFFFF;
  --cs-bg:             #FFFFFF;
  --cs-bg-subtle:      #F6F9FC;
  --cs-bg-active:      #EDF2F7;
  --cs-text:           #1A1F36;
  --cs-text-secondary: #3C4257;
  --cs-text-muted:     #697386;
  --cs-text-link:      #5145CD;
  --cs-border:         #E3E8EE;
  --cs-border-strong:  #C1C9D2;
  --cs-focus:          #635BFF;
  --cs-menu-bg:        #FFFFFF;
  --cs-menu-activo-bg: #F0EFFE;
  --cs-menu-activo-marca: #635BFF;
  --cs-tope-bg:        #1A1F36;
  --cs-shadow-popover: 0 4px 16px rgba(26, 31, 54, 0.10), 0 0 0 1px rgba(26, 31, 54, 0.04);
  --cs-shadow-modal:   0 16px 48px rgba(26, 31, 54, 0.18);
}

/* ===========================================================================
   LINEAR — oscuro, violeta frío, bordes casi invisibles.
   El fondo es casi negro con una pizca de azul, y la jerarquía se construye
   con capas de luminosidad, no con líneas: el borde apenas se insinúa.
   =========================================================================== */
[data-tema="linear"] {
  --cs-accion:         #5E6AD2;
  --cs-accion-hover:   #6E79E0;
  --cs-accion-texto:   #FFFFFF;
  --cs-tope-texto:     #F7F8F8;
  --cs-bg:             #0F1011;
  --cs-bg-subtle:      #08090A;
  --cs-bg-active:      #1C1D21;
  --cs-text:           #F7F8F8;
  --cs-text-secondary: #B4BCD0;
  --cs-text-muted:     #8A8F98;
  --cs-text-inverse:   #08090A;
  --cs-text-link:      #9A9EF5;
  --cs-border:         #23252A;
  --cs-border-strong:  #34363C;
  --cs-focus:          #5E6AD2;
  --cs-menu-bg:        #08090A;
  --cs-menu-activo-bg: #1C1D21;
  --cs-menu-activo-marca: #5E6AD2;
  --cs-tope-bg:        #08090A;
  /* En oscuro una sombra negra no se ve: la separación la da el borde y un
     halo muy tenue, no el desenfoque. */
  --cs-shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.55), 0 0 0 1px #2A2C31;
  --cs-shadow-modal:   0 16px 48px rgba(0, 0, 0, 0.70);
}

/* ===========================================================================
   GITHUB — oscuro azulado, denso, bordes nítidos.
   Lo contrario de Linear: aquí el borde SÍ se ve y es el que ordena. Pensado
   para sesiones largas de Lista y Triage, donde la retícula ayuda a no
   perder la fila.
   =========================================================================== */
[data-tema="github"] {
  /* El verde de GitHub para la acción: es su botón primario y la firma
     visual del sitio. */
  --cs-accion:         #238636;
  --cs-accion-hover:   #2EA043;
  --cs-accion-texto:   #FFFFFF;
  --cs-tope-texto:     #E6EDF3;
  --cs-bg:             #0D1117;
  --cs-bg-subtle:      #010409;
  --cs-bg-active:      #21262D;
  --cs-text:           #E6EDF3;
  --cs-text-secondary: #C9D1D9;
  --cs-text-muted:     #8B949E;
  --cs-text-inverse:   #0D1117;
  --cs-text-link:      #4493F8;
  --cs-border:         #30363D;
  --cs-border-strong:  #484F58;
  --cs-focus:          #2F81F7;
  --cs-menu-bg:        #010409;
  --cs-menu-activo-bg: #21262D;
  --cs-menu-activo-marca: #F78166;
  --cs-tope-bg:        #010409;
  --cs-shadow-popover: 0 4px 16px rgba(1, 4, 9, 0.85), 0 0 0 1px #30363D;
  --cs-shadow-modal:   0 16px 48px rgba(1, 4, 9, 0.90);
}

/* ---------------------------------------------------------------------------
   Los dos temas oscuros le dicen al navegador que lo son. Sin esto, los
   controles nativos —el selector de fecha, la barra de scroll, el
   autocompletado— siguen pintándose en claro y quedan como parches
   blancos en medio de la interfaz.
   --------------------------------------------------------------------------- */
[data-tema="linear"],
[data-tema="github"] {
  color-scheme: dark;
}