/* ==========================================================================
   ASODIB
   Archivo: assets/css/variables.css
   Variables globales del Portal Web.
   Contiene:
   - Colores institucionales.
   - Colores complementarios.
   - Escala de grises.
   - Fondos y textos.
   - Estados.
   - Tipografía.
   - Pesos y alturas de línea.
   - Tamaños de texto.
   - Tamaños de títulos.
   - Espaciados.
   - Bordes y radios.
   - Sombras.
   - Transiciones.
   - Iconos.
   - Contenedores.
   - Dimensiones estructurales.
   - Componentes.
   - Z-index.
   - Archivos y documentos.
   - Responsive.
   No colocar aquí estilos CSS.
   ========================================================================== */
:root {
  /* ==========================================================================
     COLORES INSTITUCIONALES
     ========================================================================== */
  --color-primario: #0a4e9b;
  --color-primario-hover: #083b73;
  --color-secundario: #2e75c5;
  --color-secundario-hover: #245f9f;
  --color-acento: #f4b400;
  --color-exito: #198754;
  --color-exito-hover: #146c43;
  --color-peligro: #dc3545;
  --color-peligro-hover: #b02a37;
  --color-advertencia: #ffc107;
  --color-advertencia-hover: #d39e00;
  --color-info: #0dcaf0;
  --color-info-hover: #0aa2c0;
  /* ==========================================================================
     COLORES INSTITUCIONALES COMPLEMENTARIOS
     ========================================================================== */
  --color-primario-claro: #eef5ff;
  --color-primario-suave: #e7f0fb;
  --color-documento: #6f42c1;
  --color-documento-hover: #59359a;
  --color-acento-verde: #20a67a;
  --color-acento-verde-hover: #17825f;
  --color-enlace: var(--color-primario);
  --color-enlace-hover: var(--color-primario-hover);
  /* ==========================================================================
     ESCALA DE GRISES
     ========================================================================== */
  --color-blanco: #ffffff;
  --color-negro: #000000;
  --color-gris-50: #f8f9fa;
  --color-gris-100: #f1f3f5;
  --color-gris-200: #e9ecef;
  --color-gris-300: #dee2e6;
  --color-gris-400: #ced4da;
  --color-gris-500: #adb5bd;
  --color-gris-600: #6c757d;
  --color-gris-700: #495057;
  --color-gris-800: #343a40;
  --color-gris-900: #212529;
  /* ==========================================================================
     FONDOS Y TEXTOS
     ========================================================================== */
  --color-fondo: #f5f7fa;
  --color-fondo-secundario: var(--color-gris-50);
  --color-fondo-suave: var(--color-primario-claro);
  --color-texto: var(--color-gris-800);
  --color-texto-secundario: var(--color-gris-600);
  --color-texto-muted: var(--color-gris-500);
  --color-texto-oscuro: var(--color-gris-900);
  --color-borde: #d9dee5;
  --color-borde-claro: var(--color-gris-200);
  --color-borde-oscuro: var(--color-gris-400);
  /* ==========================================================================
     COLORES PARA ESTADOS
     ========================================================================== */
  --color-exito-suave: #eaf7ef;
  --color-peligro-suave: #fcebec;
  --color-advertencia-suave: #fff8e1;
  --color-info-suave: #e8f8fc;
  /* ==========================================================================
     COLORES DE OVERLAY
     ========================================================================== */
  --color-overlay-blanco: rgba(255, 255, 255, 0.18);
  --color-overlay-blanco-suave: rgba(255, 255, 255, 0.08);
  --color-overlay-blanco-muy-suave: rgba(255, 255, 255, 0.05);
  --color-primario-overlay: rgba(10, 78, 155, 0.88);
  /* ==========================================================================
     OVERLAY DEL BANNER
     ========================================================================== */
  --banner-overlay-oscuro: rgba(0, 0, 0, 0.78);
  --banner-overlay-medio: rgba(0, 0, 0, 0.42);
  --banner-overlay-claro: rgba(0, 0, 0, 0.05);
  /* ==========================================================================
     TIPOGRAFÍA
     ========================================================================== */
  --fuente-principal:
    "Segoe UI",
    Roboto,
    Arial,
    Helvetica,
    sans-serif;
  --fuente-titulos:
    "Segoe UI",
    Roboto,
    Arial,
    Helvetica,
    sans-serif;
  --fuente-mono:
    Consolas,
    "Courier New",
    monospace;
  /* ==========================================================================
     PESOS TIPOGRÁFICOS
     ========================================================================== */
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semibold: 600;
  --peso-negrita: 700;
  --peso-extra-negrita: 800;
  /* ==========================================================================
     ALTURAS DE LÍNEA
     ========================================================================== */
  --linea-normal: 1.6;
  --linea-compacta: 1.3;
  --linea-titulos: 1.2;
  --linea-relajada: 1.8;
  /* ==========================================================================
     TAMAÑOS DE TEXTO
     ========================================================================== */
  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-md: 1rem;
  --texto-lg: 1.125rem;
  --texto-xl: 1.25rem;
  --texto-xxl: 1.5rem;
  /* ==========================================================================
     TAMAÑOS DE TÍTULOS
     ========================================================================== */
  --titulo-h1: 2.35rem;
  --titulo-h2: 2rem;
  --titulo-h3: 1.7rem;
  --titulo-h4: 1.45rem;
  --titulo-h5: 1.2rem;
  --titulo-h6: 1rem;
  /* ==========================================================================
     ESPACIADOS
     ========================================================================== */
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-5: 1.5rem;
  --espacio-6: 2rem;
  --espacio-7: 3rem;
  --espacio-8: 4rem;
  /* ==========================================================================
     ALIAS DE ESPACIADO PARA EL HOME
     ========================================================================== */
  --espaciado-xs: var(--espacio-1);
  --espaciado-sm: var(--espacio-2);
  --espaciado-md: var(--espacio-3);
  --espaciado-lg: var(--espacio-4);
  --espaciado-xl: var(--espacio-5);
  --espaciado-xxl: var(--espacio-7);
  --espaciado-section: var(--espacio-7);
  /* ==========================================================================
     DIMENSIONES DE BORDES
     ========================================================================== */
  --ancho-borde: 1px;
  --ancho-borde-grueso: 2px;
  --ancho-borde-destacado: 3px;
  /* ==========================================================================
     RADIOS
     ========================================================================== */
  --radio-sm: 4px;
  --radio-md: 8px;
  --radio-lg: 12px;
  --radio-xl: 20px;
  --radio-pill: 999px;
  /* ==========================================================================
     SOMBRAS
     ========================================================================== */
  --sombra-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --sombra-md: 0 4px 10px rgba(0, 0, 0, 0.10);
  --sombra-lg: 0 8px 18px rgba(0, 0, 0, 0.12);
  --sombra-xl: 0 12px 30px rgba(0, 0, 0, 0.15);
  --sombra-focus: 0 0 0 0.2rem rgba(10, 78, 155, 0.15);
  --sombra-texto: 0 2px 5px rgba(0, 0, 0, 0.35);
  /* ==========================================================================
     TRANSICIONES
     ========================================================================== */
  --transicion-rapida: 0.2s;
  --transicion-normal: 0.35s;
  --transicion-lenta: 0.5s;
  --transicion-suave:
    background-color var(--transicion-normal),
    border-color var(--transicion-normal),
    color var(--transicion-normal),
    box-shadow var(--transicion-normal),
    transform var(--transicion-normal);
  /* ==========================================================================
     ICONOS
     ========================================================================== */
  --ancho-icono-sm: 18px;
  --ancho-icono-md: 22px;
  --ancho-icono-lg: 28px;
  /* ==========================================================================
     CONTENEDORES
     ========================================================================== */
  --ancho-maximo: 1320px;
  --ancho-contenido: 1140px;
  --ancho-contenido-sm: 960px;
  /* ==========================================================================
     ESTRUCTURA DEL HEADER
     ========================================================================== */
  --altura-topbar: 36px;
  --altura-header: 120px;
  --altura-menu: 60px;
  --altura-navbar: var(--altura-menu);
  /* ==========================================================================
     BANNER
     ========================================================================== */
  --altura-banner: 420px;
  /* ==========================================================================
     FOOTER
     ========================================================================== */
  --altura-footer: 80px;
  /* ==========================================================================
     TARJETAS
     ========================================================================== */
  --altura-imagen-card: 220px;
  --radio-card: var(--radio-lg);
  /* ==========================================================================
     FORMULARIOS
     ========================================================================== */
  --altura-input: 38px;
  --radio-input: var(--radio-md);
  /* ==========================================================================
     BOTONES
     ========================================================================== */
  --radio-boton: var(--radio-md);
  --radio-boton-pill: var(--radio-pill);
  /* ==========================================================================
     MENÚ
     ========================================================================== */
  --radio-menu: var(--radio-md);
  --radio-dropdown: var(--radio-md);
  /* ==========================================================================
     Z-INDEX
     ========================================================================== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  /* ==========================================================================
     ARCHIVOS Y DOCUMENTOS
     ========================================================================== */
  --altura-portada-documento: 220px;
  --altura-preview-documento: 500px;
  --radio-archivo: var(--radio-md);
  /* ==========================================================================
     RESPONSIVE
     ========================================================================== */
  --breakpoint-xs: 576px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 992px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1400px;
}