/**
 * Marina López Psicología - Accesibilidad Web
 * Frontend Styles — Version 1.0.6
 *
 * Paleta corporativa:
 *   Principal  → #683844  (marrón rosáceo)
 *   Secundario → #345552  (verde azulado)
 *   Claro      → #e9e8e6  (beige claro)
 *   Borde      → #d6d4d1  (beige medio)
 *   Texto      → #2D2D2D  (gris oscuro)
 *
 * Modo oscuro — tonos derivados de la paleta corporativa:
 *   Fondo oscuro   → #1e1318  (marrón muy oscuro, derivado del primario)
 *   Superficie     → #2c1d22  (marrón oscuro, un paso más claro)
 *   Tarjetas       → #3a2530  (marrón medio oscuro)
 *   Texto claro    → #f0eeec  (beige muy claro)
 *   Acento oscuro  → #a06070  (primario aclarado para legibilidad en oscuro)
 *
 * BUGS CORREGIDOS:
 *   1. Botón flotante: color del icono era igual al fondo → ahora siempre #FFFFFF
 *   2. Botón flotante invisible con grayscale/filter: usa isolation:isolate + z-index propio
 *   3. Desbordamiento en móvil con escala de grises: panel usa overflow:hidden + max-height:100dvh
 */

/* ========================================
   Variables CSS — Modo Normal
   ======================================== */
:root {
    --mlac-primary:      #683844;
    --mlac-secondary:    #345552;
    --mlac-background:   #FFFFFF;
    --mlac-surface:      #f7f6f5;
    --mlac-accent:       #8a5060;
    --mlac-text:         #2D2D2D;
    --mlac-text-light:   #6B7280;
    --mlac-border:       #d6d4d1;
    --mlac-light:        #e9e8e6;
    --mlac-shadow:       0 10px 40px rgba(104, 56, 68, 0.15);
    --mlac-transition:   all 0.3s ease;
    --mlac-icon-color:   #FFFFFF;
}

/* ========================================
   Variables CSS — Modo Oscuro
   Tonos derivados de la paleta corporativa
   ======================================== */
body.mlac-dark-mode {
    --mlac-primary:      #a06070;   /* primario aclarado para contraste en oscuro */
    --mlac-secondary:    #5a8a82;   /* secundario aclarado */
    --mlac-background:   #1e1318;   /* marrón muy oscuro derivado del primario */
    --mlac-surface:      #2c1d22;   /* un paso más claro */
    --mlac-accent:       #c08090;
    --mlac-text:         #f0eeec;   /* beige muy claro, no blanco puro */
    --mlac-text-light:   #b0a8a4;
    --mlac-border:       #4a3540;   /* borde oscuro con tono rosáceo */
    --mlac-light:        #3a2530;   /* superficie de tarjetas */
    --mlac-shadow:       0 10px 40px rgba(0, 0, 0, 0.6);
    --mlac-icon-color:   #FFFFFF;
}

/* ========================================
   Botón Flotante
   BUG FIX 1: color del icono siempre blanco
   BUG FIX 2: isolation:isolate evita que filters del body lo afecten
   ======================================== */
#mlac-floating-button,
.mlac-floating-button {
    position: fixed;
    z-index: 999997;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--mlac-primary);
    border: 3px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(104, 56, 68, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--mlac-transition);
    /* BUG FIX 2: isolation crea un nuevo contexto de apilamiento,
       evitando que filter:grayscale/contrast del body afecte al botón */
    isolation: isolate;
    /* El color del icono SVG siempre blanco, independiente del tema */
    color: #FFFFFF !important;
}

#mlac-floating-button svg,
.mlac-floating-button svg {
    color: #FFFFFF !important;
    fill: none;
    stroke: #FFFFFF !important;
}

#mlac-floating-button:hover,
.mlac-floating-button:hover {
    background: var(--mlac-secondary);
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.4);
}

#mlac-floating-button:focus,
.mlac-floating-button:focus {
    outline: 3px solid var(--mlac-primary);
    outline-offset: 4px;
}

/* Posiciones del botón flotante */
.mlac-position-bottom-right { bottom: 24px; right: 24px; }
.mlac-position-bottom-left  { bottom: 24px; left: 24px; }
.mlac-position-top-right    { top: 24px;    right: 24px; }
.mlac-position-top-left     { top: 24px;    left: 24px; }

/* ========================================
   Panel de Accesibilidad
   BUG FIX 3: max-height y overflow controlados para evitar
   desbordamiento en móvil al activar escala de grises u otros filtros
   ======================================== */

/* Quitar bordes de todos los botones del panel */
.mlac-panel-container button,
.mlac-panel-container button:focus,
.mlac-panel-container button:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.mlac-panel-container .mlac-toggle input,
.mlac-panel-container .mlac-toggle-slider {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.mlac-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    /* BUG FIX 3: isolation evita que los filtros del body desborden el panel */
    isolation: isolate;
}

.mlac-panel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    animation: mlacFadeIn 0.3s ease-out;
}

@keyframes mlacFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.mlac-panel-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    /* BUG FIX 3: altura máxima explícita con dvh para evitar desbordamiento en móvil */
    height: 100%;
    max-height: 100dvh;
    max-height: 100vh; /* fallback para navegadores sin dvh */
    background: var(--mlac-background);
    box-shadow: var(--mlac-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* BUG FIX 3: contiene el scroll dentro del panel */
    animation: mlacSlideIn 0.3s ease-out;
}

@keyframes mlacSlideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* Header del Panel */
.mlac-panel-header {
    flex-shrink: 0; /* no se comprime aunque el body crezca */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid var(--mlac-border);
    background: var(--mlac-secondary);
}

.mlac-panel-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    line-height: 1.4 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.mlac-panel-title svg {
    color: #FFFFFF;
    stroke: #FFFFFF;
}

.mlac-panel-close {
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    transition: var(--mlac-transition);
    border-radius: 8px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mlac-panel-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
}

.mlac-panel-close:focus {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

/* Body del Panel — scroll interno */
.mlac-panel-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden; /* BUG FIX 3: evita scroll horizontal */
    padding: 24px;
    background: var(--mlac-background);
    /* BUG FIX 3: scroll suave en iOS */
    -webkit-overflow-scrolling: touch;
}

/* Secciones */
.mlac-section {
    margin-bottom: 32px;
}

.mlac-section:last-child {
    margin-bottom: 0;
}

.mlac-section-title {
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--mlac-secondary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    line-height: 1.4 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    border: none !important;
    background: none !important;
}

.mlac-section-title svg {
    color: var(--mlac-primary);
}

/* Opciones */
.mlac-option {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--mlac-border);
}

.mlac-option:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.mlac-option-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--mlac-text);
    margin-bottom: 6px;
}

.mlac-option-desc {
    margin: 6px 0 0 0;
    font-size: 12px;
    color: var(--mlac-text-light);
    line-height: 1.5;
}

/* Controles de Tamaño de Texto */
.mlac-text-size-controls {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.mlac-btn-icon {
    flex: 1;
    padding: 12px;
    background: var(--mlac-surface);
    border: 1px solid var(--mlac-border) !important;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--mlac-transition);
    font-weight: 600;
    color: var(--mlac-text);
}

.mlac-btn-icon:hover {
    background: var(--mlac-primary);
    border-color: var(--mlac-primary) !important;
    color: #FFFFFF;
}

.mlac-btn-icon:focus {
    outline: 2px solid var(--mlac-primary);
    outline-offset: 2px;
}

.mlac-text-size-label {
    font-size: 16px;
    font-weight: 700;
}

.mlac-text-size-indicator {
    margin-top: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--mlac-primary);
}

/* Toggle Switch */
.mlac-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    float: right;
}

.mlac-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mlac-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #D1D5DB;
    transition: 0.3s;
    border-radius: 26px;
}

.mlac-toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.mlac-toggle input:checked + .mlac-toggle-slider {
    background-color: var(--mlac-secondary);
}

.mlac-toggle input:checked + .mlac-toggle-slider:before {
    transform: translateX(22px);
}

.mlac-toggle input:focus + .mlac-toggle-slider {
    box-shadow: 0 0 0 3px rgba(52, 85, 82, 0.3);
}

/* Footer del Panel */
.mlac-panel-footer {
    flex-shrink: 0; /* no se comprime */
    padding: 20px 24px;
    border-top: 1px solid var(--mlac-border);
    background: var(--mlac-light);
}

.mlac-btn {
    width: 100%;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--mlac-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.mlac-btn-reset {
    background: transparent;
    border: 2px solid var(--mlac-border) !important;
    color: var(--mlac-text);
    margin-bottom: 12px;
}

.mlac-btn-reset:hover {
    background: var(--mlac-primary);
    border-color: var(--mlac-primary) !important;
    color: #FFFFFF;
}

.mlac-btn-reset:focus {
    outline: 2px solid var(--mlac-primary);
    outline-offset: 2px;
}

.mlac-declaration-link {
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--mlac-text-light);
    text-decoration: none;
}

.mlac-declaration-link:hover {
    color: var(--mlac-primary);
    text-decoration: underline;
}

/* ========================================
   Funcionalidades de Accesibilidad
   ======================================== */

/* Tamaño de Texto */
body.mlac-text-size-110 { font-size: 110% !important; }
body.mlac-text-size-120 { font-size: 120% !important; }
body.mlac-text-size-130 { font-size: 130% !important; }
body.mlac-text-size-140 { font-size: 140% !important; }
body.mlac-text-size-150 { font-size: 150% !important; }

/* Espaciado de Texto */
body.mlac-text-spacing * {
    line-height: 2 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}

/* Fuente para Dislexia */
body.mlac-dyslexia-font * {
    font-family: 'OpenDyslexic', Arial, sans-serif !important;
}

/* Contraste Alto */
body.mlac-high-contrast {
    filter: contrast(1.5) !important;
}

body.mlac-high-contrast * {
    border-color: #000 !important;
}

/* BUG FIX 2: Proteger el botón flotante y el panel de los filtros del body.
   Todos los filtros (grayscale, contrast, dark-mode) deben excluir estos elementos.
   Se usa isolation:isolate en el propio elemento (ya definido arriba) y aquí
   se fuerza la restauración del filtro para los contenedores del plugin. */
#mlac-floating-button,
#mlac-accessibility-panel {
    isolation: isolate !important;
    filter: none !important;
}

/* ========================================
   Modo Oscuro — Paleta derivada de Marina
   ======================================== */

/* Fondo y texto base del body */
body.mlac-dark-mode {
    background-color: var(--mlac-background) !important;
    color: var(--mlac-text) !important;
}

/* Encabezados */
body.mlac-dark-mode h1:not(#mlac-accessibility-panel *),
body.mlac-dark-mode h2:not(#mlac-accessibility-panel *),
body.mlac-dark-mode h3:not(#mlac-accessibility-panel *),
body.mlac-dark-mode h4:not(#mlac-accessibility-panel *),
body.mlac-dark-mode h5:not(#mlac-accessibility-panel *),
body.mlac-dark-mode h6:not(#mlac-accessibility-panel *) {
    color: var(--mlac-text) !important;
}

/* Párrafos y texto general */
body.mlac-dark-mode p:not(#mlac-accessibility-panel *),
body.mlac-dark-mode span:not(#mlac-accessibility-panel *),
body.mlac-dark-mode li:not(#mlac-accessibility-panel *) {
    color: var(--mlac-text) !important;
}

/* Contenedores estructurales — fondo oscuro derivado del primario */
body.mlac-dark-mode header:not(#mlac-accessibility-panel *),
body.mlac-dark-mode footer:not(#mlac-accessibility-panel *),
body.mlac-dark-mode nav:not(#mlac-accessibility-panel *),
body.mlac-dark-mode main:not(#mlac-accessibility-panel *),
body.mlac-dark-mode section:not(#mlac-accessibility-panel *):not([style*="background-image"]),
body.mlac-dark-mode article:not(#mlac-accessibility-panel *) {
    background-color: var(--mlac-background) !important;
    color: var(--mlac-text) !important;
}

/* Divs sin imagen de fondo inline */
body.mlac-dark-mode div:not(#mlac-accessibility-panel):not(#mlac-accessibility-panel *):not([style*="background-image"]):not([style*="background:"]) {
    background-color: var(--mlac-background) !important;
    color: var(--mlac-text) !important;
}

/* Tarjetas y cajas — superficie más clara */
body.mlac-dark-mode [class*="card"]:not(#mlac-accessibility-panel *),
body.mlac-dark-mode [class*="box"]:not(#mlac-accessibility-panel *),
body.mlac-dark-mode [class*="widget"]:not(#mlac-accessibility-panel *) {
    background-color: var(--mlac-light) !important;
    color: var(--mlac-text) !important;
    border-color: var(--mlac-border) !important;
}

/* Inputs y formularios */
body.mlac-dark-mode input:not(#mlac-accessibility-panel *):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
body.mlac-dark-mode textarea:not(#mlac-accessibility-panel *),
body.mlac-dark-mode select:not(#mlac-accessibility-panel *) {
    background-color: var(--mlac-light) !important;
    color: var(--mlac-text) !important;
    border-color: var(--mlac-border) !important;
}

/* Botones generales */
body.mlac-dark-mode button:not(#mlac-accessibility-panel *):not(#mlac-floating-button):not([style*="background"]),
body.mlac-dark-mode .button:not(#mlac-accessibility-panel *):not([style*="background"]) {
    background-color: var(--mlac-light) !important;
    color: var(--mlac-text) !important;
    border-color: var(--mlac-border) !important;
}

/* Enlaces */
body.mlac-dark-mode a:not(#mlac-accessibility-panel *):not(#mlac-floating-button) {
    color: var(--mlac-primary) !important;
}

/* Tablas */
body.mlac-dark-mode table:not(#mlac-accessibility-panel *) {
    background-color: var(--mlac-light) !important;
    color: var(--mlac-text) !important;
}

body.mlac-dark-mode th:not(#mlac-accessibility-panel *) {
    background-color: var(--mlac-secondary) !important;
    color: #FFFFFF !important;
    border-color: var(--mlac-border) !important;
}

body.mlac-dark-mode td:not(#mlac-accessibility-panel *) {
    background-color: var(--mlac-light) !important;
    color: var(--mlac-text) !important;
    border-color: var(--mlac-border) !important;
}

/* Imágenes — reducir brillo ligeramente */
body.mlac-dark-mode img:not(#mlac-accessibility-panel *),
body.mlac-dark-mode video:not(#mlac-accessibility-panel *) {
    opacity: 0.88 !important;
    filter: brightness(0.88) !important;
}

/* BUG FIX 2: El panel y el botón NO se ven afectados por ningún filtro del body */
#mlac-accessibility-panel,
#mlac-accessibility-panel *,
#mlac-floating-button,
#mlac-floating-button * {
    filter: none !important;
    opacity: 1 !important;
}

/* ========================================
   Escala de Grises
   BUG FIX 3: el panel usa isolation:isolate para no desbordarse
   ======================================== */
body.mlac-grayscale {
    filter: grayscale(100%) !important;
}

/* BUG FIX 2+3: el panel y botón quedan fuera del filtro grayscale */
body.mlac-grayscale #mlac-accessibility-panel,
body.mlac-grayscale #mlac-floating-button,
.mlac-floating-button {
    filter: none !important;
}

/* Resaltar Enlaces */
body.mlac-highlight-links a {
    text-decoration: underline 3px !important;
    text-decoration-color: var(--mlac-primary) !important;
    background: rgba(104, 56, 68, 0.12) !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
}

/* Cursor Grande */
body.mlac-large-cursor,
body.mlac-large-cursor * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="%23683844" stroke="white" stroke-width="2" d="M2 2 L2 28 L12 20 L18 30 L22 28 L16 18 L28 18 Z"/></svg>') 2 2, auto !important;
}

/* Guía de Lectura */
.mlac-reading-guide {
    position: fixed;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--mlac-primary);
    box-shadow: 0 0 10px rgba(104, 56, 68, 0.5);
    pointer-events: none;
    z-index: 999998;
}

/* Pausar Animaciones */
body.mlac-pause-animations *,
body.mlac-pause-animations *:before,
body.mlac-pause-animations *:after {
    animation-play-state: paused !important;
    animation-duration: 0s !important;
    transition: none !important;
}

/* Navegación por Teclado */
body.mlac-keyboard-nav *:focus {
    outline: 3px solid var(--mlac-primary) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px rgba(104, 56, 68, 0.25) !important;
}

/* ========================================
   Skip Link
   ======================================== */
.mlac-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--mlac-primary);
    color: #FFFFFF;
    padding: 8px 16px;
    text-decoration: none;
    font-weight: 600;
    z-index: 1000000;
    border-radius: 0 0 8px 0;
    transition: top 0.2s ease;
}

.mlac-skip-link:focus {
    top: 0;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
    .mlac-panel-container {
        max-width: 100%;
        /* BUG FIX 3: en móvil usar dvh para respetar la barra del navegador */
        max-height: 100dvh;
        max-height: 100vh;
    }

    #mlac-floating-button,
.mlac-floating-button {
        width: 50px;
        height: 50px;
    }

    #mlac-floating-button svg,
.mlac-floating-button svg {
        width: 22px;
        height: 22px;
    }

    .mlac-position-bottom-right,
    .mlac-position-bottom-left {
        bottom: 20px;
    }

    .mlac-position-bottom-right { right: 20px; }
    .mlac-position-bottom-left  { left: 20px; }
}

@media (max-width: 480px) {
    .mlac-panel-header {
        padding: 18px 16px;
    }

    .mlac-panel-body {
        padding: 18px 16px;
    }

    .mlac-panel-footer {
        padding: 14px 16px;
    }

    .mlac-panel-title {
        font-size: 16px !important;
    }
}