/**
 * variables.css
 * 
 * Propósito: Paleta de colores global, espaciado, tipografía, breakpoints
 * Depende de: nada (base)
 * Usado en: todos los archivos CSS
 * 
 * Variables disponibles:
 * - --color-*: colores
 * - --spacing-*: espaciado (8px base)
 * - --font-*: tipografía
 * - --breakpoint-*: media queries
 * - --shadow-*: sombras
 * - --radius-*: border radius
 */

:root {
   /* ========================================
     COLORES
     ======================================== */
   /* ===== CAPA 1: Colores base (paleta) ===== */
   --color-primary: #266a8b;
   --color-primary-dark: #1f556e;
   --color-primary-light: #e7f0f4;
   
   --color-accent: #ffbb00;
   
   --color-white: #ffffff;
   --color-black: #1c1c1c;
   --color-gray: #809496;
   
   --color-neutral-bg: #f0f4f7;
   --color-neutral-border: #d6e0e6;
   --color-text-soft: #5b6b73;
   
   --color-danger: #e02d47;
   --color-success: #1f6e2e;
   --color-info: #268cd2;

   /* ===== CAPA 2: Colores funcionales (semántica de uso) ===== */
   
   /* Principales */
   --color-primary-btn: var(--color-primary);
   --color-primary-btn-hover: var(--color-primary-dark);
   
   --color-accent-btn: var(--color-accent);
   --color-accent-btn-hover: #e6a800;
   
   /* Texto */
   --color-text: var(--color-black);
   --color-text-light: var(--color-text-soft);
   --color-text-inverse: var(--color-white);
   
   /* Fondos */
   --color-bg: var(--color-white);
   --color-bg-alt: var(--color-neutral-bg);
   --color-bg-dark: var(--color-primary);

   /* Tintes de superficie: gradientes sutiles de paneles/intros (bloques home-*),
      derivados del primario sobre el fondo en lugar de hex sueltos. */
   --color-surface-tint: color-mix(in srgb, var(--color-primary) 7%, var(--color-bg));
   --color-surface-tint-strong: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg));

   /* Superficies de aviso (cajas de éxito/error de formularios), derivadas de
      --color-success/--color-danger en lugar de hex sueltos por caja. */
   --color-success-bg: color-mix(in srgb, var(--color-success) 8%, var(--color-bg));
   --color-success-border: color-mix(in srgb, var(--color-success) 35%, var(--color-bg));
   --color-danger-bg: color-mix(in srgb, var(--color-danger) 6%, var(--color-bg));
   --color-danger-border: color-mix(in srgb, var(--color-danger) 35%, var(--color-bg));
   
   /* Bordes y divisores */
   --color-border: var(--color-neutral-border);
   --color-divider: var(--color-neutral-border);

   /* ========================================
     ESPACIADO (base 8px, responsive con clamp)
     ======================================== */

   --spacing-xs: 0.25rem;
   /* 4px */
   --spacing-sm: 0.5rem;
   /* 8px */
   --spacing-md: clamp(0.75rem, 0.5rem + 1vw, 1rem);
   /* 12-16px */
   --spacing-lg: clamp(1rem, 0.75rem + 1.25vw, 1.5rem);
   /* 16-24px */
   --spacing-xl: clamp(1.5rem, 1rem + 2vw, 2rem);
   /* 24-32px */
   --spacing-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
   /* 32-48px */
   --spacing-3xl: clamp(3rem, 2rem + 4vw, 4rem);
   /* 48-64px */

   /* ========================================
     TIPOGRAFÍA
     ======================================== */

   --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --font-family-mono: "Fira Code", "Courier New", monospace;

   /* Font sizes (responsive con clamp) */
   --font-size-xs: 0.75rem;
   /* 12px */
   --font-size-sm: 0.875rem;
   /* 14px */
   --font-size-base: clamp(0.875rem, 0.8rem + 0.5vw, 1rem);
   /* 14-16px */
   --font-size-lg: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
   /* 16-18px */
   --font-size-xl: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
   /* 18-20px */
   --font-size-2xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
   /* 20-24px */
   --font-size-3xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
   /* 24-32px */
   --font-size-4xl: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem);
   /* 28-40px */

   /* Line heights */
   --line-height-tight: 1.25;
   --line-height-normal: 1.5;
   --line-height-loose: 1.75;

   /* Font weights */
   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;

   /* ========================================
     BORDER RADIUS
     ======================================== */
   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 12px;
   --radius-xl: 16px;
   --radius-full: 999px;

   /* ========================================
     SOMBRAS
     ======================================== */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
   --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
   --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);

   /* ========================================
     TRANSICIONES
     ======================================== */
   --transition-fast: 150ms ease-in-out;
   --transition-base: 250ms ease-in-out;
   --transition-slow: 350ms ease-in-out;

   /* ========================================
     BREAKPOINTS (mobile first)
     ======================================== */
   --breakpoint-sm: 640px;
   /* tablet pequeña */
   --breakpoint-md: 768px;
   /* tablet */
   --breakpoint-lg: 1024px;
   /* desktop pequeño */
   --breakpoint-xl: 1280px;
   /* desktop grande */
   --breakpoint-2xl: 1536px;
   /* ultra-wide */

   /* ========================================
     Z-INDEX (escala)
     ======================================== */
   --z-hide: -1;
   --z-auto: auto;
   --z-base: 0;
   --z-dropdown: 100;
   --z-sticky: 200;
   --z-fixed: 300;
   --z-modal: 1000;
   --z-modal-backdrop: 999;
   --z-tooltip: 1100;

   /* ========================================
     MAPA — dimensiones de paneles, controles y logos
     (movidas desde map.css en Fase 5 para fuente única)
     ======================================== */
   --panel-left-width: 300px;
   --panel-right-width: 320px;
   --control-btn-size: 56px;
   --control-btn-offset: 15px;
   --map-footer-clearance: 1.5rem;
   --map-controls-gap: 0.75rem;
   --map-brand-logo-height-mobile: 3.5rem;
   --map-brand-logo-height-desktop: 4rem;
   --map-brand-logo-max-width: 15rem;
   --map-brand-logo-padding: 0.35rem 0.6rem;

   /* ========================================
     PLAN DE EMPRESA — paleta del formulario (Anexo II)
     (movida desde form-plan-empresa.css: mismos valores, ahora centralizados)
     ======================================== */
   --plan-color-primary: #2c8fb1;
   --plan-color-primary-dark: #1d5f7d;
   --plan-color-primary-darker: #0f7ba4;
   --plan-color-primary-darker-hover: #0d6a8d;
   --plan-color-text-dark: #12455c;
   --plan-color-text-darkest: #1d3340;

   --plan-color-border: #e6edf1;
   --plan-color-border-strong: #bfd0d9;
   --plan-color-border-note: #c8dde6;
   --plan-color-border-table: #d4e4ed;
   --plan-color-border-subtotal: #c0d8e4;
   --plan-color-border-progress: #c4d4dd;
   --plan-color-border-progress-line: #d5e1e8;
   --plan-color-border-outline-btn: #9bb4c0;

   --plan-color-bg-section: #fbfdfe;
   --plan-color-bg-note: #f5fafc;
   --plan-color-bg-table-header: #edf4f8;
   --plan-color-bg-subtotal: #f0f7fb;
   --plan-color-bg-total: #deeef5;
   --plan-color-link-on-dark: #a8d8ef;

   --plan-color-text-muted: #6b8794;
   --plan-color-text-muted-2: #48606f;
   --plan-color-text-note: #2c4656;

   --plan-color-disabled-bg: #f0f4f6;
   --plan-color-disabled-text: #999999;
   --plan-color-disabled-border: #dde6eb;

   --plan-color-danger-border: #c92f2f;
   --plan-color-danger-bg: #fff8f8;
   --plan-color-danger-text: #b02121;
   --plan-color-danger-text-dark: #812020;
   --plan-color-danger-bg-alt: #fff3f3;
   --plan-color-danger-border-alt: #ebabab;
   --plan-color-danger-value: #b3261e;

   --plan-color-success-text: #20572d;
   --plan-color-success-bg: #ebf9ef;
   --plan-color-success-border: #8bd7a1;
   --plan-color-success-value: #1a6e2e;
}

/* Tablet+: botones de control (buscador, filtro) del mismo tamaño que el
   botón de capa base (3rem / 48px), en vez del tamaño táctil de móvil. */
@media (min-width: 48rem) {
   :root {
      --control-btn-size: 3rem;
   }
}

/* En móvil los paneles ocupan toda la viewport */
@media (max-width: 39.99rem) {
   :root {
      --panel-left-width: 100vw;
      --panel-right-width: 100vw;
   }
}