/* Custom styles beyond Tailwind */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--base-font-size, 16px);
}

/* ================================================
   BARRA DE ACCESIBILIDAD
   ================================================ */
#accessibility-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #1e293b;
    color: #f8fafc;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
}

#accessibility-bar span.label {
    color: #94a3b8;
    margin-right: 4px;
    font-size: 12px;
}

.acc-btn {
    background: #334155;
    color: #f1f5f9;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background 0.2s;
    font-family: 'Inter', sans-serif;
}

.acc-btn:hover, .acc-btn:focus {
    background: #475569;
    outline: 2px solid #60a5fa;
}

.acc-btn.active {
    background: #005baa;
    color: #fff;
}

/* Empujar el nav hacia abajo cuando la barra esté visible */
body.has-acc-bar nav {
    top: 36px;
}

/* ================================================
   MODO ALTO CONTRASTE (Dark Mode elegante)
   ================================================ */
body.high-contrast {
    background: #0f172a !important;
    color: #f1f5f9 !important;
}

body.high-contrast nav {
    background: #0f172a !important;
    border-bottom-color: #334155 !important;
}

body.high-contrast header.main-header,
body.high-contrast .bg-gradient-to-r {
    background: #1e293b !important;
}

body.high-contrast section,
body.high-contrast main {
    background: #0f172a !important;
}

body.high-contrast .bg-white,
body.high-contrast [class*="bg-white"] {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body.high-contrast .bg-slate-50,
body.high-contrast .bg-slate-100,
body.high-contrast .bg-slate-200,
body.high-contrast [class*="bg-slate-"],
body.high-contrast [class*="bg-blue-"],
body.high-contrast [class*="bg-green-"],
body.high-contrast [class*="bg-purple-"],
body.high-contrast [class*="bg-red-"],
body.high-contrast [class*="bg-orange-"],
body.high-contrast [class*="bg-teal-"],
body.high-contrast [class*="bg-sky-"],
body.high-contrast [class*="bg-indigo-"],
body.high-contrast [class*="bg-amber-"],
body.high-contrast [class*="bg-pink-"],
body.high-contrast [class*="bg-yellow-"] {
    background: #1e293b !important;
    border-color: #475569 !important;
}

body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast h4,
body.high-contrast h5,
body.high-contrast h6 {
    color: #ffffff !important;
}

body.high-contrast p,
body.high-contrast span:not(.acc-btn *),
body.high-contrast li,
body.high-contrast label,
body.high-contrast td,
body.high-contrast th {
    color: #e2e8f0 !important;
}

body.high-contrast a {
    color: #60a5fa !important;
    text-decoration: underline;
}

body.high-contrast a:hover {
    color: #93c5fd !important;
}

body.high-contrast .text-transparent {
    color: #60a5fa !important;
    -webkit-text-fill-color: #60a5fa !important;
    background: none !important;
}

body.high-contrast img:not(#accessibility-bar img) {
    filter: brightness(0.85) contrast(1.1);
}

body.high-contrast .bg-cesfam-blue,
body.high-contrast [class*="bg-cesfam"] {
    background: #1e3a5f !important;
}

body.high-contrast footer {
    background: #020617 !important;
    border-top-color: #334155 !important;
}

body.high-contrast .border-slate-200,
body.high-contrast .border-slate-100 {
    border-color: #334155 !important;
}

body.high-contrast .shadow-sm,
body.high-contrast .shadow-lg,
body.high-contrast .shadow-xl,
body.high-contrast .shadow-2xl {
    box-shadow: 0 0 0 1px #334155 !important;
}

/* Botones en contraste */
body.high-contrast .acc-btn {
    background: #1e3a5f !important;
    color: #93c5fd !important;
    border: 1px solid #3b82f6 !important;
}
body.high-contrast .acc-btn.active {
    background: #3b82f6 !important;
    color: #ffffff !important;
}


/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9; 
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; 
}