/* ═══════════════════════════════════════════════════════════
   TOKENS DE DISEÑO — LA ESCALA  (Fase 2: paleta racionalizada)
   Todos los degradados eliminados. Un solo color de marca.
   ═══════════════════════════════════════════════════════════ */

:root {

  /* ── Marca ─────────────────────────────────────────────── */
  --color-marca: #5B4BC4;
  --marca-borde: var(--color-marca);
  --marca-suave: rgba(91, 75, 196, 0.12);

  /* ── Paleta de estado (semántica) ───────────────────────── */
  --estado-urgente:   #e74c3c;
  --estado-pendiente: #f39c12;
  --estado-curso:     #3498db;
  --estado-resuelta:  #27ae60;

  /* ── Escala de grises ───────────────────────────────────── */
  --gris-50:  #f8f9fa;
  --gris-100: #f4f6f8;
  --gris-200: #e9ecef;
  --gris-500: #95a5a6;
  --gris-700: #6c757d;
  --gris-900: #2c3e50;

  /* ── Superficies ────────────────────────────────────────── */
  --fondo-pagina: #F7F8FA;
  --fondo-card:   #ffffff;
  --borde:        #e1e5e9;

  /* ── Texto ──────────────────────────────────────────────── */
  --texto-principal:  #2c3e50;
  --texto-secundario: #7f8c8d;
  --texto-tenue:      #6c757d;

  /* ── Sombras ────────────────────────────────────────────── */
  --sombra-sm: 0 2px 10px rgba(0,0,0,0.1);
  --sombra-md: 0 5px 15px rgba(0,0,0,0.1);

  /* ── Alertas ────────────────────────────────────────────── */
  --alerta-error-fondo:  #fee;
  --alerta-error-texto:  #c33;
  --alerta-exito-fondo:  #efe;
  --alerta-exito-texto:  #363;
  --alerta-info-fondo:   #e3f2fd;
  --alerta-info-texto:   #1976d2;
  --alerta-info-borde:   #2196f3;
  --alerta-warn-fondo:   var(--badge-pend-fondo);  /* #fff3cd */
  --alerta-warn-texto:   var(--badge-pend-texto);  /* #856404 */
  --alerta-warn-borde:   var(--estado-pendiente);  /* #f39c12 */

  /* ── Badges de estado (panel admin / login) ─────────────── */
  --badge-pend-fondo: #fff3cd;
  --badge-pend-texto: #856404;
  --badge-ok-fondo:   #d4edda;
  --badge-ok-texto:   #155724;
  --badge-ok-borde:   #c3e6cb;
  --badge-err-fondo:  #f8d7da;
  --badge-err-texto:  #721c24;
  --badge-err-borde:  #f5c6cb;

  /* ── Marca de terceros ──────────────────────────────────── */
  --verde-whatsapp:       #25D366;
  --verde-whatsapp-hover: #128C7E;

  /* ── Overlays ───────────────────────────────────────────── */
  --overlay-modal-fuerte: rgba(0, 0, 0, 0.9); /* visor de imagen */
  --overlay-modal:        rgba(0, 0, 0, 0.5); /* diálogos        */
  --overlay-oscuro:   rgba(0,0,0,0.6);
  --overlay-moderado: rgba(0,0,0,0.3);
  --overlay-tenue:    rgba(0,0,0,0.1);

  /* ── Tipografía ─────────────────────────────────────────────────────── */
  /* Pila del sistema: sin dependencia de Google Fonts ni CDN externos.   */
  --fuente-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;

  /* Escala de 5 tamaños. rem relativo al root del navegador (por defecto
     16px, respeta la preferencia de accesibilidad del usuario).
     El body se establece a --texto-base en móvil y 1.0625rem en escritorio
     (mismo breakpoint 900px que el sidebar). Font Awesome usa su propio
     font-family funcional y no debe tocarse.                              */
  --texto-xs:    0.9375rem; /* 15px — mínimo absoluto de interfaz           */
  --texto-sm:    1rem;      /* 16px                                          */
  --texto-base:  1.125rem;  /* 18px — cuerpo en móvil                       */
  --texto-lg:    1.375rem;  /* 22px — subtítulos y encabezados de sección   */
  --texto-xl:    1.75rem;   /* 28px — títulos de página                     */
  --interlineado: 1.5;

  /* ── Breakpoints (solo documentación; var() no funciona en @media) ─── */
  /* Si se cambia, actualizar también el @media de layout.css.            */
  --breakpoint-sidebar: 900px; /* ≥ este ancho: sidebar fija, sin barra inferior */

  /* ── Pasteles de estado (fondos de thumb) ─────────────────── */
  --pastel-pendiente: rgba(243, 156, 18, 0.14);
  --pastel-urgente:   rgba(231, 76, 60, 0.12);
  --pastel-resuelta:  rgba(39, 174, 96, 0.14);
  --pastel-neutral:   #e5e7eb;

  /* ── Escala de espaciado ─────────────────────────────────────
     Base 4px. xs y sm no se comprimen en escritorio.
     ────────────────────────────────────────────────────────────*/
  --espacio-xs:  0.25rem;   /*  4px */
  --espacio-sm:  0.5rem;    /*  8px */
  --espacio-md:  0.75rem;   /* 12px */
  --espacio-lg:  1rem;      /* 16px */
  --espacio-xl:  1.5rem;    /* 24px */
  --espacio-2xl: 2rem;      /* 32px */
  --espacio-3xl: 3rem;      /* 48px */

}

/* ── Tamaños de texto +15% en móvil ─────────────────────────── */
@media (max-width: 899px) {
  :root {
    --texto-xs:    1.0781rem; /* 17.25px */
    --texto-sm:    1.15rem;   /* 18.4px  */
    --texto-base:  1.2938rem; /* 20.7px  */
    --texto-lg:    1.5813rem; /* 25.3px  */
    --texto-xl:    2.0125rem; /* 32.2px  */
  }
}

/* ── Compresión de espaciado en escritorio (~15%) ────────────── */
@media (min-width: 900px) {
  :root {
    --espacio-md:  0.625rem;
    --espacio-lg:  0.875rem;
    --espacio-xl:  1.25rem;
    --espacio-2xl: 1.625rem;
    --espacio-3xl: 2.5rem;
  }
}