@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/nunito-v32-latin-regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  src: url('../assets/fonts/nunito-v32-latin-500.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  src: url('../assets/fonts/nunito-v32-latin-600.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  src: url('../assets/fonts/nunito-v32-latin-800.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  src: url('../assets/fonts/nunito-v32-latin-900.woff2') format('woff2');
  font-display: swap;
}
/* --- VARIABLES BASE (Design Tokens) --- 
   :root selecciona el elemento raíz (<html>). 
   Las variables definidas aquí (--nombre) se pueden usar en cualquier otro archivo CSS. 
   Centralizar esto permite crear temas oscuros (Dark Mode) muy fácilmente cambiando solo este archivo. */
:root {
   /* Fuente actualizada a la local */
  --font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
/* Fondos generales más luminosos y limpios */
   --bg-app: #C3CDD2; /* Gris tiza súper sutil. Fondo de menu tableros */
   --bg-sidebar: #FFFFFF;
   --bg-card: #FFFFFF;
   --bg-column: #f7f9fd;
  
  /* Textos (Tonos pizarra/marino en lugar de negro puro) */
  --text-main: #1E293B; /* Color principal de lectura */
  --text-dark: #121828;
  --text-muted: #3b4047; /* Gris para textos secundarios */
  
  --accent-color: #004b6e; /* Color de acento corporativo (Azul oscuro) */
  --accent-light: #D6F2FF; /* Fondo verde muy sutil para elementos activos */
  --danger-color: #FF1A55; /* Rojo fucsia para emergencias */
  --dangerdate-color: #ff537e; /* Rojo fucsia para emergencias */
  --important-color: #f5e50b; /* Color urgencia media ficha*/
  --short-color: #0bf50b; /* Color urgencia baja ficha */
  --text-subtitle: #00A676;
  
  /* Colores de Alerta y Semántica */
  --urgency-high: #F9114D; /* Rojo vivo (Modo Hipo) */
  --urgency-high-bg: #FDE8ED;
  --urgency-medium: #F59E0B; /* Naranja/Ámbar */
  --urgency-medium-bg: #FEF3C7;
  
  /* Elementos estructurales */
  --border-color: #E2E8F0; /* Bordes suaves para separar tarjetas y paneles */
  
  /* Radios un poco más pronunciados para un look amigable */
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-pill: 9999px; /* Para los botones completamente redondeados */
  
  /* Sombras mucho más sutiles y clínicas */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.03);
  --shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.06);
  
  /* Paleta de colores para columnas */
  --col-blue: #579DFF; /* Azul cielo */
  --col-green: #4BCE97; /* Verde menta */
  --col-yellow: #E2B203; /* Amarillo ocre */
  --col-orange: #FAA53D; /* Naranja suave */
  --col-red: #F87462; /* Rojo coral */
  --col-white: #FFFFFF;
  --col-gray: #091E420F; /* Gris */
  --col-purple: #9F8FEF; /* Morado claro */
  --col-pink: #FF9CE6; /* Rosa pastel */
}