/* ==========================================================================
   tokens-brand.css
   Única fuente de verdad para color de marca y tipografía compartible.
   Consumidores actuales: back-office [ADMIN].
   Si [CLIENTE] o [APP] adoptan este sistema, añadir bloque CONSUMIDORES
   y promover a contexto propio (ver plan_rediseno_backoffice.md §2).

   REGLA DURA: ningún valor literal de color o font-family en otros archivos.
   Si aparece un #00CCA9 en components.css, es un bug.

   Paleta verificada 2026-07-28 contra logoarbol.png.
   Ratios de contraste con --ink (16,76:1 sobre blanco) o sobre blanco indicados.
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     Paleta de marca — NO usar brand-500 como color de texto sobre blanco.
     brand-500 sobre blanco = 2,06:1 (falla WCAG AA). Texto sobre brand-500
     SIEMPRE en --ink (8,15:1). Ver §3 del plan.
     ------------------------------------------------------------------ */
  --brand-050: #E8F5F5;  /* Fondos sutiles, fila seleccionada, badge positivo — 15,01:1 con --ink */
  --brand-500: #4BA5A5;  /* Fondo de botón primario, acentos, barras — 5,77:1 con --ink */
  --brand-700: #357878;  /* Texto de marca, enlaces, iconos sobre blanco — 5,11:1 */
  --brand-900: #1E4646;  /* Hover/pressed de primario, encabezados — 10,40:1 sobre blanco */
  --ink:        #14201C; /* Texto principal — 16,76:1 sobre blanco */

  /* ------------------------------------------------------------------
     Semánticos de estado — usados por el sistema de badges (§4)
     Todos los pares verificados WCAG AA.
     ------------------------------------------------------------------ */
  --color-positive-bg:  #E8F5F5;  /* = brand-050 */
  --color-positive-fg:  #357878;  /* = brand-700 — 5,11:1 sobre blanco, 4,53:1 sobre positive-bg */
  --color-attention-bg: #FEF3E2;
  --color-attention-fg: #8A5200;  /* 5,82:1 sobre attention-bg */
  --color-negative-bg:  #FDECEC;
  --color-negative-fg:  #A5231D;  /* 6,43:1 sobre negative-bg — badges */
  --btn-danger:         #C0392B;  /* rojo botón — más natural que el badge */
  --btn-danger-hover:   #A93226;
  --color-neutral-bg:   #F1F3F2;
  --color-neutral-fg:   #4A5754;  /* 6,77:1 sobre neutral-bg */
  --color-category-bg:  #FFFFFF;
  --color-category-fg:  #3D4A46;  /* 9,27:1 sobre blanco — badge de contorno */
  --color-category-bd:  #3D4A46;

  /* ------------------------------------------------------------------
     Colores por tipo de seguro
     Dos juegos: --seg-* para UI (badges, etiquetas) y --seg-*-chart para gráficos.
     Fuente canónica: buscador.php + adminResumenSeguros.php (2026-07-28).
     Cambiar aquí propaga a toda la web.
     ------------------------------------------------------------------ */

  /* UI — fondos de badge/etiqueta (usar texto blanco o --ink encima) */
  --seg-coche:      #E67E22;
  --seg-hogar:      #E74C3C;
  --seg-salud:      #16A085;
  --seg-vida:       #F72B64;
  --seg-moto:       #F39C12;
  --seg-empresa:    #2980B9;
  --seg-resp-civil: #8E44AD;
  --seg-agro:       #27AE60;
  --seg-otros:      #95A5A6;

  /* Gráficos — versión pastelizada (mezcla 50% con blanco del color UI) */
  --seg-coche-chart:      #F2BE90;
  --seg-hogar-chart:      #F3A59D;
  --seg-salud-chart:      #8ACFC2;
  --seg-vida-chart:       #FB95B1;
  --seg-moto-chart:       #F9CD88;
  --seg-empresa-chart:    #94BFDC;
  --seg-resp-civil-chart: #C6A1D6;
  --seg-agro-chart:       #93D6AF;
  --seg-otros-chart:      #CAD2D2;

  /* ------------------------------------------------------------------
     Colores de botones de acción del back-office
     Fuente canónica: botones.css (migrado a tokens 2026-07-28).
     Cada color identifica una acción concreta — no son intercambiables.
     El nombre del token = nombre semántico de la acción, no del componente.
     ------------------------------------------------------------------ */

  /* Inversión */
  --btn-editar:          #13C9BA;  /* Editar cliente / Ver inversión */
  --btn-editar-hover:    #0DAFA2;
  --btn-cambios:         #56B3E2;  /* Arreglar fondos / Crear cambios / Cambiar plan */
  --btn-cambios-hover:   #91C6EC;
  --btn-aportaciones:    #F85E22;  /* Ver recomendaciones / Aportaciones */
  --btn-aportaciones-hover: #FA7C4A;
  --btn-optimizacion:    #65CA06;  /* Ver optimización */
  --btn-optimizacion-hover: #B3DE69;

  /* Seguros */
  --btn-seguros:         #4BA5A5;  /* Ver seguros / Nuevo seguro / Seguro anterior */
  --btn-seguros-hover:   #357878;
  --btn-ganado:          #0064AD;  /* Seguro ganado */
  --btn-ganado-hover:    #2475AE;

  /* Cobros y pagos */
  --btn-pagos:           #F727B2;  /* Ver pagos */
  --btn-pagos-hover:     #F77FBD;
  --btn-supercuenta:     #FFA514;  /* Supercuenta */
  --btn-supercuenta-hover: #FFB71C;
  --btn-mailautopilot:   #EC0868;  /* Mail renovación autopilot */
  --btn-mailautopilot-hover: #E44E8C;

  /* Documentos y opciones */
  --btn-docs:            #7982D1;  /* Subir DNI / Ver póliza / Documentos */
  --btn-docs-hover:      #9FA4CE;
  --btn-contardesasignar: #B97E24; /* Dejar de contar / Desasignar póliza */
  --btn-contardesasignar-hover: #BD8D46;

  /* Comentarios y promos */
  --btn-promocomentario:       #F366F8;  /* Añadir promo / Nuevo comentario */
  --btn-promocomentario-hover: #FCA9FF;

  /* Herramientas internas */
  --btn-victor:          #9F38A2;  /* Victor (scripts automáticos) */
  --btn-victor-hover:    #BB71BD;
  --btn-magia:           #4C37D3;  /* Magia (PanelClientesController) */
  --btn-magia-hover:     #AFA8DA;
  --btn-warningironia:   #FC3D28;  /* Warning ironía */
  --btn-warningironia-hover: #FB8072;
  --btn-flanks:          #858585;  /* Ver Flanks / Ver Ironía */
  --btn-flanks-hover:    #B3B3B3;
  --btn-notion:          #160233;  /* Notion */
  --btn-notion-hover:    #2D2835;

  /* ------------------------------------------------------------------
     Tipografía de marca
     Decisión tomada: sin webfonts en back-office (carga instantánea).
     Raleway se usa solo en adminResumen/adminResumenSeguros (ya cargado).
     font-variant-numeric: tabular-nums — crítico para columnas numéricas.
     ------------------------------------------------------------------ */
  --font-brand:  'Raleway', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-system: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono:   ui-monospace, Menlo, Monaco, 'Cascadia Code', monospace;

}