/* Tramia · tokens de diseño (DESIGN.md v4.1 §2). Única fuente de colores, tamaños y radios. */
:root {
  color-scheme: light;

  /* §2.1 Color de interfaz */
  --c-brand: #17483B;
  --c-brand-strong: #0F3329;
  --c-accent: #C7E36F;
  --c-ink: #1E2B26;
  --c-ink-muted: #5A6B63;
  --c-ink-subtle: #7F8D86;
  --c-line: #E1E7E3;
  --c-surface: #FFFFFF;
  --c-surface-alt: #F4F7F5;
  --c-canvas: #E8EDEA;
  --c-info: #1F5F8B;
  --c-info-bg: #EAF3FA;
  --c-warn: #8A5A00;
  --c-warn-bg: #FFF5DC;
  --c-error: #9B2C1F;
  --c-error-bg: #FDECEA;
  --c-ok: #2E7D4F;
  --c-line-strong: #C8D1CC;   /* borde de entradas y botones secundarios */
  --c-on-brand: #FFFFFF;
  --c-scrim: rgba(16, 40, 32, .45);
  --c-casing: rgba(255, 255, 255, .8);

  /* §2.2 Tipografía */
  --font: Inter, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --t-title-size: 18px;   --t-title-lh: 24px;   --t-title-weight: 650;
  --t-section-size: 13px; --t-section-lh: 18px; --t-section-weight: 650; --t-section-tracking: .06em;
  --t-body-size: 14px;    --t-body-lh: 20px;    --t-body-weight: 400;
  --t-small-size: 13px;   --t-small-lh: 18px;   --t-small-weight: 400;
  --t-micro-size: 12px;   --t-micro-lh: 16px;   --t-micro-weight: 500;
  --t-date-size: 16px;    --t-date-lh: 22px;    --t-date-weight: 650;

  /* §2.3 Escalas de datos. Mantener sincronizadas con js/scales.js y viewer/road_overview.py */
  --d-water-optical: #1565C0;  --d-water-optical-a: .90;
  --d-water-radar: #4DB6C4;    --d-water-radar-a: .70;
  --d-water-both: #0B4FA8;     --d-water-both-a: .95;
  --d-water-dry: #9AA7A0;      --d-water-dry-a: .22;
  --d-rain-0: #F3F0F8;
  --d-rain-1: #D8CCE9;
  --d-rain-2: #B39DD4;
  --d-rain-3: #8B6DBA;
  --d-rain-4: #5E3F96;
  --d-rain-fill-a: .55;
  --d-rain-border: #FFFFFF;
  --d-rain-border-a: .4;
  --d-rain-nodata-border: #B7BEC9;
  --d-road-zero: #34503F;      --d-road-zero-w: 2.5px;
  --d-road-1: #F6C27A;         --d-road-1-w: 2.5px;
  --d-road-2: #EE8D3A;         --d-road-2-w: 3px;
  --d-road-3: #D4581F;         --d-road-3-w: 3.5px;
  --d-road-4: #962D10;         --d-road-4-w: 4px;
  --d-road-unknown: #7D8A84;   --d-road-unknown-w: 1.5px;
  --d-road-paved: #3F4148;     --d-road-paved-center: #F4F1E8;
  --d-road-limited-a: .75;
  /* Mapa de una fecha (Hoy, Mis lugares, Viajes): caminos en gris fino; con agua en la fecha, gruesos y de color fuerte (igual en js/scales.js) */
  --d-road-day: #8C9690;       --d-road-wet: #D9480F;
  /* Anegamiento (docs/ANEGAMIENTO.md): contorno oscuro del tramo anegado, agua permanente punteada, señal débil en fechas */
  --d-road-outline: #1E2B26;   --d-road-outline-a: .9;
  --d-road-permanent: #6E86A0;
  --d-water-weak: #8FB8E3;
  --d-jrc-low: #D6E0E8;    /* histórico JRC: 10 % de frecuencia (igual en viewer/demo_api.py) */
  --d-jrc-high: #2E4A66;   /* histórico JRC: 100 % */
  /* Sitios: anillo de estado (el tipo va dentro). Se distinguen también por luminosidad y por el trazo del anillo. */
  --d-site-dry: #2E7D4F;       --d-site-dry-bg: #EAF5EE;
  --d-site-near: #8A5A00;      --d-site-near-bg: #FFF5DC;
  --d-site-flood: #9B2C1F;     --d-site-flood-bg: #FDECEA;
  --d-site-nodata: #7F8D86;    --d-site-nodata-bg: #F4F7F5;
  --d-site-catalog: #4F5A9E;   --d-site-catalog-bg: #EEF0FA;   /* destinos públicos de OpenStreetMap: anillo punteado, no son lugares propios */
  /* Recorridos comparados (Mis viajes): el más corto, angosto y arriba; el de menos agua, ancho y debajo */
  --d-route-shortest: #34503F; --d-route-shortest-w: 4px;
  --d-route-lower: #C46A1A;    --d-route-lower-w: 9px;
  --d-route-casing-extra: 4px;
  /* Lotes: contorno de marca, relleno tenue de color de agua según el % del lote; sin monitoreo, gris punteado (igual en js/scales.js) */
  --d-lot-line: #17483B;
  --d-lot-water: #1565C0;
  --d-lot-off: #7D8A84;
  /* Mapa base atenuado (topográfico e IGN) para que los datos dominen; el satélite no se atenúa. */
  --basemap-muted-filter: saturate(.3) contrast(.85) brightness(1.06);
  --d-network-pending: #7D8A84; --d-network-pending-a: .45; --d-network-pending-gap: 8px;
  --d-territory-line: #17483B; --d-territory-line-a: .6; --d-territory-line-w: 1.5px;
  --d-territory-mask: #FFFFFF; --d-territory-mask-a: .35;
  --d-zone-auto: #176753;
  --d-zone-extra: #408ED4;
  --d-zone-locked: #E3A542;
  --d-zone-available: #FFFFFF;
  --d-zone-nodata: #CCCCCC;
  --d-zone-border: #334455;

  /* §2.4 Espaciado, radios, elevación, capas */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;
  --r-sm: 6px; --r-md: 10px; --r-pill: 999px;
  --e-float: 0 2px 10px rgba(16, 40, 32, .16);
  --z-map-controls: 500; --z-timeline: 600; --z-panel: 700; --z-drawer: 710; --z-toast: 800; --z-dialog: 900;

  /* Medidas de estructura (§3) */
  --header-h: 60px;
  --panel-w: 330px;
  --conv-w: 380px;               /* columna de conversación (v4 §3) */
  --control-size: 40px;
  --touch-size: 44px;
  --timeline-max: 520px;
  --timeline-gap: 8px;
  --timeline-h: 48px;   /* ajustado por js/timeline.js con el alto real */
  --switch-w: 36px; --switch-h: 20px;
  --thumb: 20px;
  --assistant-input-max: 120px;
}

@media (min-width: 1680px) { :root { --panel-w: 360px; --conv-w: 420px; } }
@media (min-width: 768px) and (max-width: 1279px) { :root { --panel-w: 320px; --conv-w: 380px; } }
@media (max-width: 767px) { :root { --timeline-h: 52px; } }