/* ==========================================================================
   ESTILOS DEL ASISTENTE VISUAL - H. AYUNTAMIENTO DE PURÉPERO, MICHOACÁN
   ========================================================================== */

/* Variables de Color Institucional */
:root {
    --prd-amarillo: #FFCC00;
    --prd-amarillo-hover: #E6B800;
    --prd-gris-oscuro: #2A2A2A;
    --prd-negro: #121212;
}

/* Contenedor del Widget */
.accessibility-widget-wrapper {
    position: fixed;
    bottom: 25px;
    left: 25px;
    z-index: 1090 !important;
}

/* Botón flotante redondo */
.btn-accessibility-main {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--prd-amarillo) !important;
    color: var(--prd-gris-oscuro) !important;
    border: 2px solid var(--prd-gris-oscuro) !important;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.btn-accessibility-main:hover {
    background-color: var(--prd-amarillo-hover) !important;
    color: #000000 !important;
    border-color: #000000 !important;
    box-shadow: 0 6px 20px rgba(255, 204, 0, 0.5);
}

/* Panel desplegable */
.accessibility-panel-box {
    position: absolute;
    bottom: 65px;
    left: 0;
    width: 280px;
    z-index: 1095 !important;
    background-color: var(--prd-gris-oscuro) !important;
    border: 2px solid var(--prd-amarillo) !important;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    animation: accessSlideUp 0.25s ease-out;
}

/* Asegurar visibilidad de textos DENTRO del panel de accesibilidad */
.accessibility-panel-box,
.accessibility-panel-box * {
    color: #FFFFFF !important;
}

.accessibility-panel-box .text-warning,
.accessibility-panel-box .btn-outline-warning {
    color: var(--prd-amarillo) !important;
}

.accessibility-panel-box .btn-outline-warning:hover {
    background-color: var(--prd-amarillo) !important;
    color: var(--prd-gris-oscuro) !important;
}

/* ==========================================================================
   MODIFICADORES DINÁMICOS SOBRE EL BODY
   ========================================================================== */

/* 1. TAMAÑOS DE FUENTE */
body.acc-font-size-lg,
body.acc-font-size-lg p,
body.acc-font-size-lg span,
body.acc-font-size-lg a,
body.acc-font-size-lg li {
    font-size: 115% !important;
}

body.acc-font-size-xl,
body.acc-font-size-xl p,
body.acc-font-size-xl span,
body.acc-font-size-xl a,
body.acc-font-size-xl li {
    font-size: 130% !important;
}

/* 2. MODO ALTO CONTRASTE (Garantiza lectura en todo el sitio) */
body.mode-high-contrast,
body.acc-contrast-mode {
    background-color: #000000 !important;
    color: #FFCC00 !important;
}

body.mode-high-contrast *:not(.accessibility-widget-wrapper *):not(#accessibility-panel *),
body.acc-contrast-mode *:not(.accessibility-widget-wrapper *):not(#accessibility-panel *) {
    background-color: #000000 !important;
    color: #FFCC00 !important;
    border-color: #FFCC00 !important;
}

body.mode-high-contrast a:not(.accessibility-widget-wrapper *),
body.acc-contrast-mode a:not(.accessibility-widget-wrapper *) {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

/* 3. ESCALA DE GRISES */
body.mode-monochrome,
body.acc-grayscale-mode {
    filter: grayscale(100%) !important;
}

/* 4. RESALTAR ENLACES */
body.mode-highlight-links a,
body.acc-links-mode a {
    background-color: var(--prd-amarillo) !important;
    color: var(--prd-gris-oscuro) !important;
    font-weight: 800 !important;
    padding: 0 4px !important;
    border-radius: 3px !important;
    text-decoration: underline !important;
}

/* 5. FUENTE LEGIBLE */
body.mode-readable-font *,
body.acc-readable-mode * {
    font-family: Arial, Helvetica, sans-serif !important;
    letter-spacing: 0.5px !important;
}

@keyframes accessSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}