/* ============================================================
   Agrovivas · tokens del panel, copiados de agrovivas-dashboard/src/styles/tokens.css (C-23).
   El sitio no tiene paleta propia: si cambia un token en el panel, copiarlo aquí.
   ============================================================ */
:root {
  /* ---------- Superficies ---------- */
  --av-bg:            #E6E5DF; /* fondo de la app (detrás de las cards) */
  --av-surface:       #F4F3EE; /* card estándar */
  --av-surface-sunk:  #FBFAF7; /* carriles, inputs, filas internas de una card */
  --av-surface-dark:  #10291A; /* card destacada (ruta de hoy, plan, CTA) y estado activo */
  --av-surface-dark-2:#1B3A27; /* sub-bloques dentro de una card oscura */
  --av-track-dark:    #264232; /* riel de barras de progreso sobre fondo oscuro */

  /* ---------- Texto ---------- */
  --av-text:          #14231A; /* principal · 14.7:1 sobre surface */
  --av-text-muted:    #5D6B60; /* secundario sobre surface · 5.1:1 */
  --av-text-muted-bg: #4F5C53; /* secundario sobre --av-bg · 5.6:1 */
  --av-text-on-dark:  #F4F3EE;
  --av-text-on-dark-muted: #9FB3A4;
  --av-ink:           #14231A; /* texto sobre fills de acento: igual en claro y oscuro */
  --av-raised:        #FFFFFF; /* menús, popovers, dropdowns */
  --av-btn-primary-bg:#10291A; /* botón primario, pestaña y nav activos (en oscuro se invierte) */
  --av-btn-primary-fg:#F4F3EE;

  /* ---------- Bordes ---------- */
  --av-border:        #DFDDD5; /* divisores de tabla y cabeceras */
  --av-border-soft:   #E7E5DE; /* divisores entre filas */
  --av-border-control:#CFCDC4; /* contorno de botones secundarios y pills de filtro */

  /* ---------- Marca ---------- */
  --av-brand-orange:  #F26B2A; /* "agro" del wordmark y logo */
  --av-brand-green:   #2E9A49; /* "vivas" del wordmark; enlaces y texto positivo grande */
  --av-link:          #1F7A36; /* enlaces y texto positivo pequeño · 4.9:1 */

  /* ---------- Acentos (fills de chips, segmentos, cards de color) ---------- */
  --av-green:   #5EE07E; /* al día · éxito · CTA sobre oscuro */
  --av-yellow:  #F3EE7C; /* vencido / pago pendiente · mes en curso */
  --av-peach:   #F8A784; /* muy vencido (16–30 días) */
  --av-coral:   #F4775A; /* crítico (+30 días) · acción destructiva suave */
  --av-lilac:   #CDBAF2; /* IA / comprobantes WA / información */
  --av-grey:    #D4D2CA; /* neutro de datos (barras "otros meses") */

  /* ---------- Colores de dominio (Figma "Exploración · colores de dominio", opción D) ----------
     Fondo del círculo del icono; el icono va en --av-text. No usar para estados de pago. */
  --av-dom-clientes:     #8FB8FF;
  --av-dom-recoleccion:  #4FD1C5;
  --av-dom-compost:      #F2C14E;
  --av-dom-pagos:        #A9DC7A;
  --av-dom-comprobantes: #CDBAF2;
  --av-dom-co2:          #9EDCF5;
  --av-dom-web:          #FFB3C7;
  --av-dom-fundas:       #B9C6D2;
  --av-dom-paradas:      #E5A8F5;

  /* Clientes fijados (C-20): estrella mostaza, fondo cálido y barra lateral */
  --av-pin:        #F2C14E;
  --av-pin-stroke: #C9921A;
  --av-pin-bg:     #FBF4DC;
  --av-dom-kits:         #FFB3C7;
  --av-dom-poposta:      #D4B483;
  --av-dom-neutral:      #E6E5DF;

  /* ---------- Semántica de texto ---------- */
  --av-danger:       #C8302F; /* montos críticos, errores · 4.8:1 */
  --av-warning-text: #B0441A; /* montos pendientes en texto pequeño · 5.1:1 */
  --av-warning-big:  #D9541E; /* montos pendientes en cifras ≥ 24px */
  --av-danger-soft-bg: #FCE3DA;
  --av-danger-soft-text: #8A2A12;

  /* ---------- Colores de ruta (mapa, calendario, chips) ---------- */
  --route-lunes:            #2E9A49;  --route-lunes-bg:            #E3F5E6; --route-lunes-head:            #C9EBD0;
  --route-martes-noche:     #3B6FD8;  --route-martes-noche-bg:     #E4EEFB; --route-martes-noche-head:     #CFE0F7;
  --route-martes-valle:     #E8742A;  --route-martes-valle-bg:     #FDEBDD; --route-martes-valle-head:     #FAD7BC;
  --route-martes-supermaxi: #7B4FD0;  --route-martes-supermaxi-bg: #EFE7FB; --route-martes-supermaxi-head: #DECFF6;
  --route-miercoles-puembo: #D63A7A;  --route-miercoles-puembo-bg: #FCE4EE; --route-miercoles-puembo-head: #F8C9DC;
  --route-miercoles-sur:    #1E9AA5;  --route-miercoles-sur-bg:    #DFF3F4; --route-miercoles-sur-head:    #C2E7EA;
  --route-jueves-nayon:     #B8860B;  --route-jueves-nayon-bg:     #FAF0D6; --route-jueves-nayon-head:     #F3E1AC;
  --route-jueves:           #4A5568;  --route-jueves-bg:           #ECEDEF; --route-jueves-head:           #DADDE1;
  --route-viernes:          #6BA81E;  --route-viernes-bg:          #EEF8DD; --route-viernes-head:          #DCF0BA;

  /* ---------- Tipografía ---------- */
  --av-font-ui:      "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --av-font-display: "Fraunces", Georgia, serif; /* SOLO títulos de página (h1) y nombre en detalle */

  --av-text-display: 44px;  /* h1 de página · Fraunces 600 · tracking -1px */
  --av-text-hero:    84px;  /* cifra protagonista · Outfit 300 · tracking -3px */
  --av-text-kpi:     34px;  /* cifra KPI · Outfit 300 · tracking -1px */
  --av-text-stat:    26px;  /* montos secundarios · Outfit 400 */
  --av-text-title:   20px;  /* título de card · Outfit 600 */
  --av-text-body:    15px;  /* texto base · Outfit 400/500 */
  --av-text-small:   14px;  /* subtítulos, celdas secundarias */
  --av-text-caption: 13px;  /* chips, encabezados de tabla */
  --av-text-micro:   12px;  /* metadatos, fechas en listas */

  /* ---------- Espaciado (base 4) ---------- */
  --av-space-1: 4px;  --av-space-2: 8px;  --av-space-3: 12px; --av-space-4: 16px;
  --av-space-5: 20px; --av-space-6: 24px; --av-space-7: 28px; --av-space-8: 32px;
  --av-gap-section: 20px; /* entre cards y filas de cards */
  --av-pad-card:    28px; /* padding de card estándar */
  --av-pad-page:    24px; /* padding exterior del layout */

  /* ---------- Radios ---------- */
  --av-radius-xs:   8px;   /* barras de color, mini chips de calendario */
  --av-radius-sm:   14px;  /* stats internos, items de lista pequeños */
  --av-radius-md:   18px;  /* items de lista, inputs dentro de cards */
  --av-radius-lg:   24px;  /* carriles, cards anidadas, imágenes */
  --av-radius-xl:   28px;  /* KPIs, pills grandes */
  --av-radius-2xl:  32px;  /* card estándar */
  --av-radius-full: 999px; /* pills, botones circulares, avatares */

  /* ---------- Controles ---------- */
  --av-control-lg: 52px; /* botón circular de rail / topbar */
  --av-control-md: 44px; /* botón circular dentro de card */
  --av-control-sm: 36px; /* acciones de fila */
  --av-rail-width: 72px;

  /* ---------- Elevación ---------- */
  --av-shadow-overlay: 0 8px 24px rgba(16, 41, 26, 0.08); /* solo overlays (mapa, menús) */
  --av-shadow-modal:   0 16px 48px rgba(16, 41, 26, 0.18);
  --av-overlay:        rgba(16, 41, 26, 0.45);

  /* ---------- Movimiento ---------- */
  --av-dur-instant: 100ms; /* press, check */
  --av-dur-fast:    150ms; /* hover, toggle, tooltip, popover */
  --av-dur-base:    220ms; /* tabs, expandir, toast, cambio de página */
  --av-dur-slow:    320ms; /* modal, drawer */
  --av-dur-data:    600ms; /* barras, progreso, contadores */
  --av-ease-out:    cubic-bezier(.2, .8, .2, 1);    /* entradas */
  --av-ease-in-out: cubic-bezier(.65, 0, .35, 1);   /* cambios de lugar */
  --av-ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* toggle, check, soltar */
}

/* ---------- Modo oscuro: los MISMOS valores del panel (DESIGN_SYSTEM §8) ----------
   En el panel el bloque va acotado a .av-admin; en el sitio aplica a toda la página.
   data-theme lo pone el script del <head> (av-theme: claro | oscuro | sistema). */
:root[data-theme="dark"] {
  /* Valores de DESIGN_SYSTEM §8 (handoff 23 oct) */
  --av-bg:            #0F1712;
  --av-surface:       #18221B;
  --av-surface-sunk:  #1F2B23;
  --av-surface-dark:  #1E3527;
  --av-surface-dark-2:#284634;
  --av-track-dark:    #335441;
  --av-text:          #E8ECE7;
  --av-text-muted:    #97A69B;
  --av-text-muted-bg: #A8B5AB;
  --av-text-on-dark:  #F4F3EE;
  --av-text-on-dark-muted: #B8CBBE;
  --av-border:        #2C3A31;
  --av-border-soft:   #2C3A31;
  --av-border-control:#3B4A40;
  --av-raised:        #222F27;
  --av-btn-primary-bg:#EEF1EC;
  --av-btn-primary-fg:#10291A;
  --av-link:          #6FDC8C;
  --av-brand-green:   #5CC777;
  --av-danger:        #FF7B6B;
  --av-warning-text:  #FFA46E;
  --av-warning-big:   #FF8A4C;
  --av-danger-soft-bg:#3A211A;
  --av-danger-soft-text:#FFB4A0;
  --av-grey:          #8C9188;
  --av-dom-neutral:   #2A3630;
  --av-pin-bg:        #262A1B;
  --av-shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.45);
  --av-shadow-modal:   0 16px 48px rgba(0, 0, 0, 0.6);
  --av-overlay:        rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}
:root[data-theme="dark"] body { background: #0F1712; }