/* Override para cambiar tonos azules a rojos en Portal Huila */
:root{
  /* Mapear la paleta "blue" usada por Mantine a tonos rojos */
  --mantine-color-blue-0: #fff5f5;
  --mantine-color-blue-1: #ffe3e3;
  --mantine-color-blue-2: #ffc9c9;
  --mantine-color-blue-3: #ffa8a8;
  --mantine-color-blue-4: #ff6b6b;
  --mantine-color-blue-5: #ef4444; /* red-500 */
  --mantine-color-blue-6: #dc2626; /* red-600 */
  --mantine-color-blue-7: #b91c1c; /* red-700 */
  --mantine-color-blue-8: #991b1b; /* red-800 */
  --mantine-color-blue-9: #7f1d1d; /* red-900 */
  /* Asegurar primary uses apunten a la nueva "paleta azul" (ahora roja) */
  --mantine-primary-color-0: var(--mantine-color-blue-0);
  --mantine-primary-color-1: var(--mantine-color-blue-1);
  --mantine-primary-color-2: var(--mantine-color-blue-2);
  --mantine-primary-color-3: var(--mantine-color-blue-3);
  --mantine-primary-color-4: var(--mantine-color-blue-4);
  --mantine-primary-color-5: var(--mantine-color-blue-5);
  --mantine-primary-color-6: var(--mantine-color-blue-6);
  --mantine-primary-color-7: var(--mantine-color-blue-7);
  --mantine-primary-color-8: var(--mantine-color-blue-8);
  --mantine-primary-color-9: var(--mantine-color-blue-9);
}

/* Sobrescribir utilidades más comunes de Tailwind usadas en los bundles */
.text-blue-500{ color: #ef4444 !important; }
.bg-primary{ background-color: #ef4444 !important; }
.peer\:checked\:bg-blue-600{ background-color: #dc2626 !important; }
.peer:checked ~ .peer-checked\:bg-blue-600{ background-color: #dc2626 !important; }
.focus\:border-blue-500:focus{ border-color: #ef4444 !important; }
.focus\:border-primary:focus{ border-color: #ef4444 !important; }
.hover\:text-primary:hover{ color: #ef4444 !important; }
.hover\:bg-primary\/:hover{ background-color: #ef4444 !important; }
.hover\:bg-primary\/90:hover{ background-color: #ef4444e6 !important; }
.active\:bg-primary\/80:active{ background-color: #ef4444cc !important; }
.focus\:ring-blue-300:focus{ box-shadow: 0 0 0 4px rgba(239,68,68,0.15) !important; }

/* Links y botones principales */
a.text-blue-500{ color: #ef4444 !important; }
.btn-primary, .btn.btn-primary, button.bg-primary{ background-color: #ef4444 !important; border-color: #dc2626 !important; }

/* TinyMCE content color hints */
.mce-content-body .mce-mergetag{ color: #ef4444 !important; }

/* Ajuste adicional para iconos/gradients que usan stops azules */
svg stop[stop-color="#0062E0"], svg stop[stop-color="#19AFFF"]{ stop-color: #ef4444 !important; }

/* Fallback: reemplazar cualquier elemento con color inline azul frecuente */
[style*="#0078ff"]{ color:#ef4444 !important; }
[style*="rgb(0 120 255)"]{ color:#ef4444 !important; background-color:#ef4444 !important; }

/* Estilos específicos para los botones de acciones (evento) */
/* Botón secundario / acción: por defecto NEGRO con texto blanco, al hover ROJO con texto blanco */
.btn {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}
.btn:hover, .btn:focus {
  background-color: #ef4444 !important; /* red-500 */
  color: #fff !important;
  border-color: #dc2626 !important; /* red-600 */
}

/* Botón primario: por defecto ROJO con texto blanco, al hover rojo más oscuro */
.btn-primary {
  background-color: #ef4444 !important;
  color: #fff !important;
  border-color: #dc2626 !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #dc2626 !important; /* red-600 */
  color: #fff !important;
  border-color: #b91c1c !important; /* red-700 */
}

/* Si hay variantes outline (ej: btn-outline) forzarlas a mantener el borde negro y texto adecuado */
.btn-outline, .btn-outline-secondary {
  background-color: transparent !important;
  color: #000 !important;
  border-color: #000 !important;
}
.btn-outline:hover, .btn-outline:focus, .btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background-color: #ef4444 !important;
  color: #fff !important;
  border-color: #dc2626 !important;
}

/* Marcos y títulos: cambiar franja superior y títulos de azul a rojo */
/* Franja superior de tarjetas/paneles */
.card, .panel, .box, .event-card, .event-panel {
  border-top: 4px solid #ef4444 !important;
}
.card .card-header, .panel .panel-heading, .box .box-header {
  border-top: 4px solid #ef4444 !important;
}

/* Títulos en encabezados de tarjeta y bloques */
.card .card-title, .card-title, .panel .panel-title, .panel-title, .box .box-title,
.event-card .title, .event-title, h1, h2, h3 {
  color: #ef4444 !important;
}

/* Si la franja se dibuja con pseudo-elementos, forzarlos también */
.card:before, .panel:before, .box:before {
  background-color: #ef4444 !important;
}

/* Afinar: evitar que algunos títulos globales cambien si están fuera de tarjetas */
.site-header h1, .site-header h2, .site-header h3 { color: inherit !important; }