/* =======================================================
   ESTILOS BASE: Modernos, Minimalistas y Accesibles (WCAG AA)
   ======================================================= */

/* 1. PALETA DE COLORES Y TIPOGRAFÍA */
/* Definición de variables de color: Basado en el azul actual, pero más limpio y con un acento. */
:root {
    --color-primary: #1e3a8a;       /* Azul Principal de la ONG (Confianza) */
    --color-primary-accent: #059669; /* Verde de Acento (Acción/CTA) - Alto Contraste */
    --color-text-dark: #212529;     /* Gris Oscuro para Cuerpo de Texto (Mejor legibilidad que el negro puro) */
    --color-light-background: #f8f9fa; /* Fondo muy claro y neutro */
}

/* Configuración de fuentes legibles (Se asume que estas fuentes están importadas en el head de header.ejs) */
body { 
    font-family: 'Open Sans', sans-serif; /* Alta legibilidad, buena opción para accesibilidad */
    line-height: 1.6; 
    color: var(--color-text-dark); 
    background-color: #ffffff; /* Blanco puro para maximalismo minimalista */
} 

h1, h2, h3, h4, h5, h6 { 
    font-family: 'Inter', sans-serif; /* Fuente moderna y geométrica para titulares */
    font-weight: 700; /* Negrita para mayor impacto visual y accesibilidad */
    color: var(--color-primary); 
}

/* 2. REGLAS DE ACCESIBILIDAD (FOCO) */
/* Mejora del foco visible para usuarios de teclado (WCAG AA) */
a:focus, button:focus, input:focus, .card:focus-within {
    outline: 3px solid var(--color-primary-accent) !important; /* Contorno de alto contraste con color de acento */
    outline-offset: 2px;
    border-radius: 0.5rem; 
}

/* Aplicación del color de acento a los botones de CTA principales */
.btn-primary-accent {
    background-color: var(--color-primary-accent) !important;
    border-color: var(--color-primary-accent) !important;
    color: #ffffff !important; /* Texto blanco en CTA para contraste (WCAG) */
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn-primary-accent:hover {
    background-color: #047857 !important; 
    border-color: #047857 !important;
}

/* Estilos de las tarjetas/elementos de contenido (Minimalista: Sombra y Borde sutil) */
.card-minimal {
    border: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease-in-out;
    border-radius: 0.75rem;
}

.card-minimal:hover {
    transform: translateY(-5px); 
}
/* Mantenemos la regla skip-link existente, ya que está bien implementada */
/* .skip-link:focus {} */

/* Estilo para suavizar el acordeón de Bootstrap */
.accordion-item {
    border: none;
    border-bottom: 1px solid #eee;
}

.accordion-button:not(.collapsed) {
    background-color: rgba(13, 110, 253, 0.05); /* Color suave al abrir */
    color: #0d6efd;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(13, 110, 253, 0.25);
}

.rounded-4 {
    border-radius: 1rem !important;
}

/* Admin dashboard */
body.dashboard { background-color: #f8f9fa; }
.dashboard .d-flex button { min-width: 220px; }