/* ========================================
   IDENTIDAD VISUAL RS - PALETA CORPORATIVA
   ======================================== */

:root {
  /* COLORES PRIMARIOS */
  --color-primary: #1F5FA8;           /* Azul institucional - Headers, navbar, botones primarios */
  --color-primary-light: #2E7BC9;     /* Azul más claro para hover */
  --color-primary-dark: #194080;      /* Azul más oscuro para active */
  --color-primary-very-light: #E8F1F8; /* Azul muy claro para fondos */

  /* COLORES SECUNDARIOS */
  --color-success: #1FA34A;            /* Verde seguridad - Confirmaciones, éxito, acciones positivas */
  --color-success-light: #43B969;      /* Verde más claro para hover */
  --color-success-dark: #1A803B;       /* Verde más oscuro para active */
  --color-success-very-light: #E8F5F0; /* Verde muy claro para fondos */

  /* COLORES DE ALERTA Y ERROR */
  --color-error: #D32F2F;              /* Rojo alerta - Errores críticos, validaciones */
  --color-error-light: #E57373;        /* Rojo más claro para hover */
  --color-error-dark: #B71C1C;         /* Rojo más oscuro para active */
  --color-error-very-light: #FFEBEE;   /* Rojo muy claro para fondos */

  --color-warning: #F9B233;            /* Amarillo advertencia - Avisos, advertencias */
  --color-warning-light: #FCC74B;      /* Amarillo más claro para hover */
  --color-warning-dark: #E5A01B;       /* Amarillo más oscuro para active */
  --color-warning-very-light: #FFF8E1; /* Amarillo muy claro para fondos */

  /* COLORES DE INFORMACIÓN */
  --color-info: #0288D1;               /* Azul información - Datos, horarios, entradas/salidas */
  --color-info-light: #03A9F4;         /* Azul más claro para hover */
  --color-info-dark: #0277BD;          /* Azul más oscuro para active */
  --color-info-very-light: #E1F5FE;    /* Azul muy claro para fondos */

  /* ESCALA DE GRISES */
  --color-text-primary: #212121;       /* Texto principal - Alto contraste */
  --color-text-secondary: #6E6E6E;     /* Texto secundario - Etiquetas, descripciones */
  --color-text-light: #9E9E9E;         /* Texto deshabilitado */
  --color-border: #B5B5B5;             /* Bordes y separadores */
  --color-bg-light: #F5F5F5;           /* Fondos suaves */
  --color-white: #FFFFFF;              /* Blanco puro */
  --color-black: #000000;              /* Negro puro */

  /* SOMBRAS */
  --shadow-sm: 0 2px 4px rgba(31, 95, 168, 0.1);
  --shadow-md: 0 4px 8px rgba(31, 95, 168, 0.15);
  --shadow-lg: 0 8px 16px rgba(31, 95, 168, 0.2);

  /* ESPACIOS Y TRANSICIONES */
  --transition-fast: 0.2s ease-out;
  --transition-normal: 0.3s ease-out;
}

/* ==========================================
   CLASES AUXILIARES PARA APLICAR COLORES
   ========================================== */

/* Backgrounds */
.bg-primary {
  background-color: var(--color-primary);
}

.bg-primary-light {
  background-color: var(--color-primary-very-light);
}

.bg-success {
  background-color: var(--color-success);
}

.bg-success-light {
  background-color: var(--color-success-very-light);
}

.bg-error {
  background-color: var(--color-error);
}

.bg-error-light {
  background-color: var(--color-error-very-light);
}

.bg-warning {
  background-color: var(--color-warning);
}

.bg-warning-light {
  background-color: var(--color-warning-very-light);
}

.bg-light {
  background-color: var(--color-bg-light);
}

/* Text Colors */
.text-primary {
  color: var(--color-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-success {
  color: var(--color-success);
}

.text-error {
  color: var(--color-error);
}

.text-white {
  color: var(--color-white);
}

/* Borders */
.border-primary {
  border-color: var(--color-primary);
}

.border-light {
  border-color: var(--color-border);
}