/* ═══════════════════════════════════════════════════════════
   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-pagina: linear-gradient(135deg, #f8f8f8 0%, #f4f6f8 100%);
  --fondo-card: #ffffff;
  --borde: #e1e5e9;
  --borde-radio-xs: 4px;
  --borde-radio-sm: 8px;
  --borde-radio-md: 12px;
  --borde-radio-lg: 16px;
  --borde-radio-xl: 22px;

  /* ── 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: #e74c3c;
  --alerta-exito-fondo: #efe;
  --alerta-exito-texto: #363;
  --alerta-info-fondo: #e3f2fd;
  --alerta-info-texto: #1565c0;
  --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: #fdf3e4;
  --badge-pend-texto: var(--estado-pendiente);
  --badge-pend-borde: var(--estado-pendiente);
  --badge-ok-fondo: #e2f3e9;
  --badge-ok-texto: var(--estado-resuelta);
  --badge-ok-borde: var(--estado-resuelta);
  --badge-err-fondo: #fce9e8;
  --badge-err-texto: var(--estado-urgente);
  --badge-err-borde: var(--estado-urgente);
  --badge-curso-fondo: #e8f3fa;
  --badge-curso-texto: var(--estado-curso);
  --badge-curso-borde: var(--estado-curso);

  /* ── 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;
  }
}