/* =============================================================================
   MÓDULO KYOSEI ACCESIBILIDAD — herramientasdeaccesibilidad.css
   Modelo Oficial Kyosei (WCAG 2.2 AA/AAA)
============================================================================= */

:root {
    --ka-primary: #155BA6; 
    --ka-bg: #ffffff;
    --ka-text: #121212;
    --focus-outline-color: #0d4d92;
}

body.dark-mode {
    --ka-primary: #4B9FF3;
    --ka-bg: #1A1A1A;
    --ka-text: #F8F9FA;
    --focus-outline-color: #FFD700;
}

/* 1. ESTRUCTURA DEL BOTÓN */
.accessibility-wrapper {
    position: relative;
    display: inline-block;
}

.btn-tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--ka-bg);
    border: 2px solid var(--ka-primary);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: bold;
    color: var(--ka-text);
    cursor: pointer;
    min-height: 44px; /* WCAG Target Size AAA */
    transition: all 0.2s ease;
}

.btn-tools:focus-visible,
.btn-tools[aria-expanded="true"] {
    outline: 3px solid var(--focus-outline-color);
    outline-offset: 3px;
    background-color: var(--ka-primary);
    color: #fff;
}

/* 2. DISEÑO DEL PANEL DESPLEGABLE */
.acc-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    background-color: var(--ka-bg);
    border: 3px solid var(--ka-primary);
    border-radius: 8px;
    padding: 3rem 1.5rem 1.5rem 1.5rem; /* Padding top para el botón de cierre */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    color: var(--ka-text);
}

.acc-panel[hidden] {
    display: none !important;
}

.acc-title {
    font-size: 1.2rem;
    text-align: center;
    margin: 0 0 0.5rem 0;
}

.acc-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: 2px solid transparent;
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--ka-text);
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.acc-close-btn:focus-visible {
    outline: 3px solid var(--focus-outline-color);
    background-color: rgba(0,0,0,0.1);
}

.acc-control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: none;
    padding: 0;
    margin: 0;
}

.acc-label {
    font-weight: bold;
    font-size: 0.9rem;
}

.acc-btn-row {
    display: flex;
    gap: 0.5rem;
}

.acc-btn-full, .acc-btn-row button {
    background-color: transparent;
    color: var(--ka-text);
    border: 2px solid var(--ka-primary);
    padding: 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    flex: 1;
    min-height: 44px;
}

.acc-btn-full:hover, .acc-btn-row button:hover {
    background-color: var(--ka-primary);
    color: #fff;
}

.acc-btn-full[aria-pressed="true"] {
    background-color: var(--ka-primary);
    color: #fff;
}

.acc-btn-full:focus-visible, .acc-btn-row button:focus-visible {
    outline: 3px solid var(--focus-outline-color);
    outline-offset: 2px;
}

/* 3. REGLA DE LECTURA (MÁSCARA KYOSEI) */
.reading-ruler-layer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* Crucial: no bloquea los clics */
    z-index: 9999;
    /* Efecto "máscara" que oscurece todo excepto una banda horizontal */
    background: linear-gradient(
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.5) calc(var(--mouse-y, 50vh) - 60px),
        transparent        calc(var(--mouse-y, 50vh) - 60px),
        transparent        calc(var(--mouse-y, 50vh) + 60px),
        rgba(0, 0, 0, 0.5) calc(var(--mouse-y, 50vh) + 60px),
        rgba(0, 0, 0, 0.5) 100%
    );
}

.reading-ruler-layer.active {
    display: block;
}

body.dark-mode .reading-ruler-layer {
    background: linear-gradient(
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.15) calc(var(--mouse-y, 50vh) - 60px),
        transparent              calc(var(--mouse-y, 50vh) - 60px),
        transparent              calc(var(--mouse-y, 50vh) + 60px),
        rgba(255, 255, 255, 0.15) calc(var(--mouse-y, 50vh) + 60px),
        rgba(255, 255, 255, 0.15) 100%
    );
}

/* 4. APLICACIÓN DE MODO OSCURO EN LA TABLA DEL CRUD */
body.dark-mode {
    background-color: var(--ka-bg);
    color: var(--ka-text);
}
body.dark-mode table {
    background-color: #222;
    color: #fff;
    border-color: #444;
}
body.dark-mode th {
    background-color: var(--ka-primary);
}
body.dark-mode td {
    border-color: #444;
}
body.dark-mode input, body.dark-mode select {
    background-color: #333;
    color: #fff;
    border-color: var(--ka-primary);
}
/* 3. REGLA DE LECTURA (MÁSCARA KYOSEI) */
.reading-ruler-layer {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none; 
    z-index: 9999;
    /* Opacidad aumentada a 0.85 (85% de negro) para ocultar el fondo casi por completo */
    background: linear-gradient(
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.85) calc(var(--mouse-y, 50vh) - 60px),
        transparent        calc(var(--mouse-y, 50vh) - 60px),
        transparent        calc(var(--mouse-y, 50vh) + 60px),
        rgba(0, 0, 0, 0.85) calc(var(--mouse-y, 50vh) + 60px),
        rgba(0, 0, 0, 0.85) 100%
    );
}

/* Modo oscuro de la regla */
body.dark-mode .reading-ruler-layer {
    background: linear-gradient(
        rgba(15, 15, 15, 0.95) 0%,
        rgba(15, 15, 15, 0.95) calc(var(--mouse-y, 50vh) - 60px),
        transparent              calc(var(--mouse-y, 50vh) - 60px),
        transparent              calc(var(--mouse-y, 50vh) + 60px),
        rgba(15, 15, 15, 0.95) calc(var(--mouse-y, 50vh) + 60px),
        rgba(15, 15, 15, 0.95) 100%
    );
}
/* =============================================================================
   FIX: KYOSEI DARK MODE (WCAG 2.2 AAA COMPLIANT)
   Fuerza la legibilidad, ajusta contrastes y domina fondos rebeldes.
============================================================================= */

/* 1. DOMINAR LOS FONDOS REBELDES */
/* Forzamos que todos los contenedores principales adopten el color oscuro */
body.dark-mode,
body.dark-mode header,
body.dark-mode main,
body.dark-mode section,
body.dark-mode footer,
body.dark-mode .seccion-fondo-claro,
body.dark-mode .hero-section {
    background-color: var(--ka-bg) !important;
    background-image: none !important; /* Elimina gradientes claros si los hay */
    color: var(--ka-text) !important;
}

/* 2. SUPERFICIES Y ELEVACIÓN (Cajas internas) */
/* Para que las tarjetas no se fundan con el fondo negro */
body.dark-mode .instrucciones-busqueda,
body.dark-mode .card-cafecito,
body.dark-mode .card-proposito,
body.dark-mode .search-form,
body.dark-mode .formulario-contacto {
    background-color: #222222 !important; /* Gris oscuro para elevar */
    border: 1px solid #444444 !important;
    box-shadow: none !important;
}

/* 3. FIX CRÍTICO DE CONTRASTE: EL AZUL SOBRE NEGRO */
/* Los textos generales y etiquetas de formulario DEBEN ser claros */
body.dark-mode p,
body.dark-mode li,
body.dark-mode span:not(.kyosei-badge),
body.dark-mode div,
body.dark-mode label,
body.dark-mode .nav-link {
    color: #E0E0E0 !important; /* Gris muy claro, evita el blanco puro que deslumbra */
}

/* Títulos: Cambiamos tu azul original por un Celeste Pastel de alto contraste */
body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode strong,
body.dark-mode .titulo-gigante {
    color: #8BB9E7 !important; /* Ratio WCAG AAA sobre fondos oscuros */
}

/* Enlaces y textos de ayuda (Disclaimer) */
body.dark-mode a,
body.dark-mode .disclaimer-importante p strong {
    color: #A9D0F5 !important;
    text-decoration-color: #A9D0F5 !important;
}
body.dark-mode a:visited {
    color: #C0A9F5 !important; /* Tono lila para enlaces visitados */
}

/* 4. REDUCIR FATIGA VISUAL EN FORMULARIOS */
/* Inputs y textareas oscurecidos pero distinguibles */
body.dark-mode input, 
body.dark-mode textarea, 
body.dark-mode select {
    background-color: #121212 !important;
    color: #FFFFFF !important;
    border: 2px solid #555555 !important;
}

/* Anillo de foco (Focus visible) impecable */
body.dark-mode input:focus-visible, 
body.dark-mode textarea:focus-visible,
body.dark-mode select:focus-visible,
body.dark-mode button:focus-visible {
    border-color: var(--focus-outline-color) !important;
    outline: 3px solid var(--focus-outline-color) !important;
    outline-offset: 2px !important;
}

/* Fix para el badge de Kyosei para que no se pierda */
body.dark-mode .kyosei-badge {
    background-color: #333 !important;
    color: #FFD700 !important;
    border: 1px solid #FFD700 !important;
}
/* =============================================================================
   FIX: ALERTA DE MEDICAMENTO NO ENCONTRADO (Contraste WCAG AAA)
============================================================================= */

/* 1. ESTILO BASE (MODO CLARO) */
.alerta-no-encontrado {
    background-color: #FFF3CD !important; /* Fondo ámbar suave */
    border: 2px solid #D39E00 !important; /* Borde ámbar oscuro para delimitar */
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.alerta-no-encontrado p {
    color: #121212 !important; /* Texto casi negro para legibilidad absoluta */
    margin: 0;
    font-size: 1.1rem;
}

.alerta-no-encontrado strong {
    color: #854D0E !important; /* Marrón oscuro para resaltar sin perder contraste */
    font-weight: 800;
}

/* Agrandamos un poco el emoji de advertencia */
.alerta-no-encontrado span[aria-hidden="true"] {
    font-size: 1.5rem;
}

/* 2. ADAPTACIÓN AL MODO OSCURO */
body.dark-mode .alerta-no-encontrado {
    background-color: #2C220F !important; /* Fondo marrón/ámbar muy oscuro */
    border-color: #B45309 !important; /* Borde naranja quemado */
}

body.dark-mode .alerta-no-encontrado p {
    color: #F8F9FA !important; /* Texto casi blanco */
}

body.dark-mode .alerta-no-encontrado strong {
    color: #FBBF24 !important; /* Amarillo brillante para resaltar sobre el fondo oscuro */
}

/* =============================================================================
   ALERTA DE ERROR DE SERVIDOR (Contraste WCAG AAA)
============================================================================= */

/* Modo Claro */
.alerta-error-servidor {
    background-color: #F8D7DA !important; /* Rojo muy suave */
    border: 2px solid #842029 !important; /* Rojo muy oscuro para el borde */
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.alerta-error-servidor p {
    color: #2C0B0E !important; /* Bordó casi negro, contraste brutal */
    margin: 0;
    font-size: 1.1rem;
}

.alerta-error-servidor span[aria-hidden="true"] {
    font-size: 1.5rem;
}

/* Modo Oscuro */
body.dark-mode .alerta-error-servidor {
    background-color: #2C0B0E !important; /* Fondo bordó muy oscuro */
    border-color: #EA868F !important; /* Borde rosado/rojo claro */
}

body.dark-mode .alerta-error-servidor p {
    color: #F8F9FA !important; /* Blanco tiza para legibilidad máxima */
}
/* Estilo para mensajes de error de conexión */
.alerta-error-sistema {
    background-color: #F8D7DA !important;
    border: 3px solid #842029 !important;
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.alerta-error-sistema p {
    color: #2C0B0E !important; /* Contraste máximo sobre fondo claro */
    margin: 0;
    font-size: 1.1rem;
}

/* Adaptación para modo oscuro */
body.dark-mode .alerta-error-sistema {
    background-color: #2C0B0E !important;
    border-color: #EA868F !important;
}

body.dark-mode .alerta-error-sistema p {
    color: #F8F9FA !important; /* Contraste máximo sobre fondo oscuro */
}