@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root {
  --autotia-font: 'Plus Jakarta Sans', sans-serif;
  --autotia-primary: #2563eb;
  --autotia-secondary: #f3f4f6;
  --autotia-accent: #10b981;
  --autotia-action: #facc15;

  /* Neutros */
  --autotia-neutral-0:   #ffffff;
  --autotia-neutral-50:  #f9fafb;
  --autotia-neutral-100: #f3f4f6;
  --autotia-neutral-200: #e5e7eb;
  --autotia-neutral-300: #d1d5db;
  --autotia-neutral-400: #9ca3af;
  --autotia-neutral-500: #6b7280;
  --autotia-neutral-600: #4b5563;
  --autotia-neutral-700: #374151;
  --autotia-neutral-800: #1f2937;
  --autotia-neutral-900: #111827;

  /* Escala primaria */
  --autotia-primary-50:  #eff6ff;
  --autotia-primary-100: #dbeafe;
  --autotia-primary-600: var(--autotia-primary);
  --autotia-primary-700: #1d4ed8;
  --autotia-primary-800: #1e40af;

  /* Superficies */
  --autotia-surface:         var(--autotia-neutral-0);
  --autotia-surface-canvas:  var(--autotia-secondary);
  --autotia-surface-sunken:  var(--autotia-neutral-50);
  --autotia-scrim:           rgb(17 24 39 / 0.5);

  /* Texto */
  --autotia-text-primary:    var(--autotia-neutral-900);
  --autotia-text-secondary:  var(--autotia-neutral-600);
  --autotia-text-muted:      var(--autotia-neutral-500);
  --autotia-text-disabled:   var(--autotia-neutral-400);
  --autotia-text-link:       var(--autotia-primary-700);
  --autotia-text-on-primary: var(--autotia-neutral-0);
  --autotia-on-accent:       var(--autotia-neutral-900);
  --autotia-on-action:       var(--autotia-neutral-900);

  /* Bordes */
  --autotia-border-width: 1px;
  --autotia-border-subtle:   var(--autotia-neutral-200);
  --autotia-border:          var(--autotia-neutral-300);
  --autotia-border-strong:   var(--autotia-neutral-500);

  /* Interacción */
  --autotia-hover-bg:        var(--autotia-neutral-100);
  --autotia-pressed-bg:      var(--autotia-neutral-200);
  --autotia-focus-ring:      var(--autotia-primary-700);
  --autotia-focus-ring-width: 2px;
  --autotia-focus-ring-offset: 2px;

  /* Selección: dos niveles, dos tratamientos */
  --autotia-selected-module-bg:    var(--autotia-primary-50);
  --autotia-selected-module-fg:    var(--autotia-primary-700);
  --autotia-selected-module-label: var(--autotia-primary-700);
  --autotia-selected-module-accent: var(--autotia-primary-700);
  --autotia-sidebar-modules-bg:      var(--autotia-neutral-50);
  --autotia-selected-item-bg:        var(--autotia-neutral-100);
  --autotia-selected-item-fg:        var(--autotia-text-primary);
  --autotia-selected-item-indicator: var(--autotia-neutral-900);

  /* Destacados informativos (dato, no estado) */
  --autotia-highlight:        #b45309;
  --autotia-highlight-subtle: #fef3c7;

  /* Estados de feedback */
  --autotia-success:        #047857;
  --autotia-success-subtle: #d1fae5;
  --autotia-warning:        #b45309;
  --autotia-warning-subtle: #fef3c7;
  --autotia-danger:         #b91c1c;
  --autotia-danger-subtle:  #fee2e2;
  --autotia-info:           var(--autotia-primary-700);
  --autotia-attention:      var(--autotia-warning);
  --autotia-skeleton:       var(--autotia-neutral-200);
  --autotia-avatar-bg:      var(--autotia-primary-100);
  --autotia-avatar-fg:      var(--autotia-primary-700);

  /* Tipografía */
  --autotia-font-size-2xs: 11px;  --autotia-line-height-2xs: 16px;
  --autotia-font-size-xs:  12px;  --autotia-line-height-xs:  16px;
  --autotia-font-size-sm:  14px;  --autotia-line-height-sm:  20px;
  --autotia-font-size-md:  16px;  --autotia-line-height-md:  24px;
  --autotia-font-size-lg:  18px;  --autotia-line-height-lg:  28px;
  --autotia-font-size-xl:  20px;  --autotia-line-height-xl:  28px;
  --autotia-font-size-2xl: 24px;  --autotia-line-height-2xl: 32px;
  --autotia-font-size-3xl: 30px;  --autotia-line-height-3xl: 38px;
  --autotia-font-size-4xl: 36px;  --autotia-line-height-4xl: 44px;
  --autotia-font-size-5xl: 44px;  --autotia-line-height-5xl: 52px;
  --autotia-font-weight-regular:   400;
  --autotia-font-weight-medium:    500;
  --autotia-font-weight-semibold:  600;
  --autotia-font-weight-bold:      700;
  --autotia-font-weight-extrabold: 800;

  /* Tipografía de lectura / prosa */
  --autotia-prose-font-size:   18px;
  --autotia-prose-line-height: 30px;

  /* Espaciado (base 4) */
  --autotia-space-0-5: 2px;
  --autotia-space-1: 4px;
  --autotia-space-2: 8px;
  --autotia-space-3: 12px;
  --autotia-space-4: 16px;
  --autotia-space-5: 20px;
  --autotia-space-6: 24px;
  --autotia-space-8: 32px;
  --autotia-space-10: 40px;
  --autotia-space-12: 48px;
  --autotia-space-16: 64px;
  --autotia-space-20: 80px;

  /* Radios */
  --autotia-radius-sm: 4px;
  --autotia-radius-md: 8px;
  --autotia-radius-lg: 12px;
  --autotia-radius-xl: 16px;
  --autotia-radius-full: 9999px;

  /* Sombras */
  --autotia-shadow-sm: 0 1px 2px rgb(17 24 39 / 0.06);
  --autotia-shadow-md: 0 4px 12px rgb(17 24 39 / 0.10);
  --autotia-shadow-lg: 0 12px 32px rgb(17 24 39 / 0.18);

  /* Movimiento */
  --autotia-duration-fast: 120ms;
  --autotia-duration-base: 200ms;
  --autotia-ease-out: cubic-bezier(0.2, 0, 0, 1);

  /* Dimensiones del shell */
  /* Ancho máximo para bloques de texto de lectura */
  --autotia-content-max-width: 42rem;
  --autotia-header-height: 60px;
  --autotia-sidebar-rail-width: 72px;
  --autotia-sidebar-panel-width: 256px;
  --autotia-row-height: 36px;
  --autotia-row-height-touch: 44px;
  --autotia-target-min: 44px;
  --autotia-z-header: 100;
  --autotia-z-drawer: 200;
  --autotia-z-popover: 300;

  /* ================================================================
   * PROPUESTO (aditivo, v1) — visualización de datos de informes.
   * Ninguno cambia un token existente; todos apuntan a valores de la paleta.
   * ================================================================ */

  /* Serie 1: precios entre particulares. Azul de marca. 5,17:1 sobre surface. */
  --autotia-chart-series-1: var(--autotia-primary);
  /* Serie 2: precios en automotoras. Distinta en tono Y luminosidad de la serie 1. 14,7:1. */
  --autotia-chart-series-2: var(--autotia-neutral-800);
  /* Rangos (50 % central) de cada serie, como relleno translúcido. */
  --autotia-chart-band-1: color-mix(in srgb, var(--autotia-primary) 22%, transparent);
  --autotia-chart-band-2: color-mix(in srgb, var(--autotia-neutral-800) 16%, transparent);
  /* Rango amplio (80 % central) de una sola serie (uso por edad). */
  --autotia-chart-band-wide: color-mix(in srgb, var(--autotia-primary) 9%, transparent);
  /* Líneas de guía del gráfico (decorativas). */
  --autotia-chart-grid: var(--autotia-neutral-200);
  /* «Este auto»: relleno amarillo de acción con contorno oscuro; siempre el mismo
     marcador en todos los gráficos. Texto encima: on-action (11,58:1). */
  /* Zona recomendada (rango para negociar): relleno verde de marca, sin texto encima. */
  --autotia-chart-zone: color-mix(in srgb, var(--autotia-accent) 35%, transparent);
  --autotia-chart-zone-stroke: var(--autotia-accent);
  --autotia-chart-marker: var(--autotia-action);
  --autotia-chart-marker-stroke: var(--autotia-on-action);
}
/* Puntos de quiebre oficiales: 680px y 1024px. Las custom properties no funcionan dentro de @media;
   se documentan como constantes y se repite el literal solo en la media query. */