/*
 * ============================================================================
 *  a11y_widget.css — Widget de accesibilidad de acceso rápido
 *  Quick-access accessibility widget
 * ============================================================================
 *
 * ES: Este archivo contiene DOS bloques bien separados:
 *
 *   BLOQUE A — Estilos del botón flotante y el panel modal.
 *   BLOQUE B — Reglas globales que se activan cuando el usuario
 *              hace toggle en cada opción del panel. Cada regla se
 *              engancha a una clase en <html> (no en body, para
 *              que aplique también a elementos absolutos que
 *              escapan del body en algunos themes de Moodle).
 *
 * EN: This file contains TWO clearly separated blocks:
 *
 *   BLOCK A — Floating button and modal panel styles.
 *   BLOCK B — Global rules activated when the user toggles each
 *             option in the panel. Each rule hooks to a class on
 *             <html> (not body, so it also applies to absolute
 *             elements escaping body in some Moodle themes).
 *
 * Convención de nombres / Naming convention:
 *   .casurid-a11y-*        → prefijo del widget para no colisionar
 *   html.casurid-a11y-<f>  → cada feature activa una clase en <html>
 *
 * Introducido en v1.2.0-alpha.
 * Introduced in v1.2.0-alpha.
 *
 * @package    local_inclusion_casurid
 * @copyright  2026 SUPERANDO Y EDUCANDO S.A.S.
 * @license    https://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

/* ============================================================
 * BLOQUE A: Botón flotante + panel modal.
 * BLOCK A: Floating button + modal panel.
 * ============================================================ */

/* ------------------------------------------------------------
 * [v1.2.2 NUEVO/NEW] Botón integrado en la navbar (default).
 * [v1.2.2 NEW]      Navbar-integrated button (default).
 *
 * ES: Este botón vive DENTRO de la barra superior de Moodle,
 *     al lado de la campana de notificaciones. Ventajas:
 *     - No compite por z-index con nada.
 *     - No tapa ningún elemento flotante del theme.
 *     - Se integra visualmente al color del theme (currentColor).
 *     - Es el patrón Moodle estándar (render_navbar_output).
 *
 * EN: This button lives INSIDE Moodle's top bar, next to the
 *     notification bell. Advantages:
 *     - Does not compete for z-index with anything.
 *     - Does not cover any theme floating element.
 *     - Visually integrates with theme color (currentColor).
 *     - It's the standard Moodle pattern (render_navbar_output).
 * ------------------------------------------------------------ */
.casurid-a11y-navbar-wrap {
    /* ES: Wrapper como `nav-item` para alineación con otros ítems de la
           navbar (campana, mensajes, avatar). Sin margen horizontal
           para dejar que Bootstrap/theme lo espacie.
       EN: Wrapper as `nav-item` for alignment with other navbar items
           (bell, messages, avatar). No horizontal margin, let
           Bootstrap/theme handle spacing. */
    padding: 0;
}
.casurid-a11y-navbar-btn {
    /* ES: Botón sin fondo, hereda color del theme. Padding cómodo para
           click en móvil (mínimo 44×44 según WCAG 2.1 AAA).
       EN: Button without background, inherits theme color. Comfortable
           padding for mobile click (minimum 44×44 per WCAG 2.1 AAA). */
    background: transparent;
    border: none;
    padding: 8px 12px;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.15s ease;
    /* ES: Sin z-index elevado — al vivir DENTRO de la navbar del theme,
           hereda el stacking context de esta y siempre queda visible.
       EN: No elevated z-index — living INSIDE theme's navbar, it
           inherits its stacking context and stays visible always. */
}
.casurid-a11y-navbar-btn:hover,
.casurid-a11y-navbar-btn:focus {
    /* ES: Fondo semi-transparente que respeta el color de la barra
           (funciona sobre navbars claras y oscuras).
       EN: Semi-transparent background respecting the bar color
           (works on light and dark navbars). */
    background: rgba(255, 255, 255, 0.15);
    outline: 2px solid #ffc107;
    outline-offset: 2px;
}
.casurid-a11y-navbar-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Botón flotante fijo. Esquina inferior derecha por defecto.
   Fixed floating button. Bottom-right corner by default.
   [v1.2.1 FIX] Reducido de 56×56 a 44×44 y desplazado 38px a la izquierda
                (aprox 1cm en 96dpi) para no chocar con el FAB del sistema
                de chat/messaging de Moodle 4.x que también se posiciona
                en bottom-right. El z-index se sube a INT_MAX (2147483647)
                para asegurar que queda ARRIBA del chat aunque compartan
                zona de clicks — muchos chats usan ese mismo valor y sin
                esto los clicks caían en la capa del chat.
   [v1.2.1 FIX] Reduced from 56×56 to 44×44 and shifted 38px left (approx
                1cm at 96dpi) so it doesn't clash with Moodle 4.x
                chat/messaging FAB which also positions in bottom-right.
                z-index raised to INT_MAX (2147483647) to ensure it stays
                ABOVE the chat even if they share a click zone — many
                chats use that same value and without this the clicks
                were falling into the chat layer. */
.casurid-a11y-fab {
    position: fixed;
    bottom: 20px;
    right: 58px;              /* [v1.2.1 FIX] antes / previously 20px */
    width: 44px;              /* [v1.2.1 FIX] antes / previously 56px */
    height: 44px;             /* [v1.2.1 FIX] antes / previously 56px */
    border-radius: 50%;
    background: #1a5490; /* Azul institucional CASURID / CASURID institutional blue. */
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 2147483646; /* [v1.2.1 FIX CRÍTICO/CRITICAL] antes / previously 999998.
                             Los widgets de chat (Moodle, terceros) usan INT_MAX
                             (2147483647). Sin subir esto, los clicks se los
                             tragaba el chat pese al posicionamiento.
                             Chat widgets (Moodle, third-party) use INT_MAX
                             (2147483647). Without raising this, clicks were
                             eaten by the chat despite positioning. */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background 0.15s ease;
}
.casurid-a11y-fab:hover,
.casurid-a11y-fab:focus {
    background: #0f3d6b;
    transform: scale(1.05);
    outline: 3px solid #ffc107;
    outline-offset: 2px;
}
.casurid-a11y-fab svg {
    width: 24px;              /* [v1.2.1 FIX] antes / previously 32px */
    height: 24px;             /* [v1.2.1 FIX] antes / previously 32px */
    fill: currentColor;
}

/* Panel modal. Oculto por defecto; se muestra con .is-open.
   Modal panel. Hidden by default; shown with .is-open.
   [v1.2.1 FIX] Reposicionado para alinearse al nuevo FAB:
   - bottom: 90px → 76px (FAB pasó de 56+20 a 44+20+12 respiración).
   - right:  20px → 58px (mismo desplazamiento que el FAB).
   [v1.2.1 FIX] Repositioned to align with new FAB:
   - bottom: 90px → 76px (FAB went from 56+20 to 44+20+12 breathing).
   - right:  20px → 58px (same shift as FAB). */
.casurid-a11y-panel {
    position: fixed;
    bottom: 76px;             /* [v1.2.1 FIX] antes / previously 90px */
    right: 58px;              /* [v1.2.1 FIX] antes / previously 20px */
    width: 320px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #2196f3;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 16px;
    z-index: 2147483647; /* [v1.2.1 FIX CRÍTICO/CRITICAL] antes / previously 999999.
                             INT_MAX estricto para estar sobre TODO — chat, tooltips,
                             modales de Moodle, popovers de Bootstrap.
                             Strict INT_MAX to stay above EVERYTHING — chat,
                             tooltips, Moodle modals, Bootstrap popovers. */
    /* ES: display:none por defecto; JS lo cambia a flex al abrir.
       EN: display:none by default; JS changes to flex on open. */
    display: none;
    flex-direction: column;
    gap: 10px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #1a1a1a;
}
.casurid-a11y-panel.is-open {
    display: flex;
}

/* [v1.2.2 NUEVO/NEW] Modificador cuando el panel abre desde el botón navbar.
   [v1.2.2 NEW]      Modifier when panel opens from navbar button.

   ES: El panel se reposiciona como dropdown debajo de la navbar
       (top: 60px) en vez de flotar sobre la esquina inferior derecha.
       60px cubre la altura típica de navbar Boost/Classic; el right
       se mantiene en 20px para no chocar con el borde de la ventana.
   EN: Panel repositions as dropdown below the navbar (top: 60px)
       instead of floating over the bottom-right corner. 60px covers
       typical Boost/Classic navbar height; right stays at 20px so
       it doesn't clash with window edge. */
.casurid-a11y-panel--from-navbar {
    top: 60px;
    bottom: auto;        /* Anula el bottom del bloque base. */
    right: 20px;         /* Alineado al borde derecho, no al FAB. */
    max-height: calc(100vh - 80px);
}

/* Cabecera con título y botón cerrar.
   Header with title and close button. */
.casurid-a11y-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}
.casurid-a11y-panel__title {
    font-size: 16px;
    font-weight: 600;
    color: #1a5490;
    margin: 0;
}
.casurid-a11y-panel__close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.casurid-a11y-panel__close:hover,
.casurid-a11y-panel__close:focus {
    background: #f1f5f9;
    color: #1a1a1a;
    outline: 2px solid #ffc107;
}
.casurid-a11y-panel__close svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Botón "Restablecer todo" — ancho completo, banner arriba.
   "Reset all" button — full width, top banner. */
.casurid-a11y-reset {
    width: 100%;
    padding: 12px;
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.casurid-a11y-reset:hover,
.casurid-a11y-reset:focus {
    background: #dbeafe;
    outline: 2px solid #ffc107;
    outline-offset: 2px;
}

/* Grilla 2 columnas para los toggles.
   2-column grid for toggles. */
.casurid-a11y-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Cada toggle es un botón cuadrado con ícono arriba y label abajo.
   Each toggle is a square button with icon on top and label below. */
.casurid-a11y-toggle {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 12px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 78px;
    font-size: 12px;
    color: #334155;
    text-align: center;
    transition: background 0.15s ease, border-color 0.15s ease;
    /* ES: line-height:1.2 evita que labels de 2 líneas empujen el ícono.
       EN: line-height:1.2 prevents 2-line labels from pushing the icon. */
    line-height: 1.2;
}
.casurid-a11y-toggle:hover,
.casurid-a11y-toggle:focus {
    background: #f8fafc;
    border-color: #93c5fd;
    outline: none;
}
/* Estado activo — resaltado azul institucional.
   Active state — institutional blue highlight. */
.casurid-a11y-toggle.is-active {
    background: #dbeafe;
    border-color: #1a5490;
    color: #0f3d6b;
    font-weight: 600;
}
.casurid-a11y-toggle svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    flex-shrink: 0;
}

/* ES: Regla anti-conflicto con el TTS: cuando estamos leyendo, el
       botón "Leer página" muestra un badge de pulso. */
/* EN: Anti-conflict with TTS: when reading, the "Read page" button
       shows a pulsing badge. */
.casurid-a11y-toggle[data-feature="readpage"].is-reading::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #dc2626;
    border-radius: 50%;
    animation: casurid-a11y-pulse 1s infinite;
}
.casurid-a11y-toggle[data-feature="readpage"] {
    position: relative;
}
@keyframes casurid-a11y-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

/* ------------------------------------------------------------
 * [v1.3.1 NUEVO/NEW] Footer del panel modal con link a la
 *                    pantalla dedicada de configuración.
 * [v1.3.1 NEW]      Modal panel footer with link to dedicated
 *                    settings screen.
 *
 * ES: Solo visible para usuarios logueados (el mustache lo
 *     envuelve en {{#is_logged_in}}). Cierra el ciclo de
 *     descubribilidad iniciado en v1.3.0: el link ofrece un
 *     camino claro para pasar de preferencias temporales
 *     (localStorage, solo esta sesión / navegador) a preferencias
 *     permanentes guardadas en el perfil (todas las sesiones,
 *     todos los dispositivos, sincronizadas por el orquestador
 *     con módulos IA como Lectura Fácil vía Gemini).
 *
 *     Separador visual: border-top gris para no confundirse con
 *     los toggles de arriba. Fondo sutil azulado para invitar
 *     al click sin robar protagonismo a los toggles.
 *
 * EN: Only visible for logged-in users (mustache wraps in
 *     {{#is_logged_in}}). Closes the discovery loop started in
 *     v1.3.0: link offers a clear path from temporary preferences
 *     (localStorage, only this session/browser) to permanent
 *     preferences saved in profile (all sessions, all devices,
 *     synced by orchestrator with AI modules like Easy Reading
 *     via Gemini).
 *
 *     Visual separator: gray border-top to not confuse with
 *     toggles above. Subtle bluish background to invite click
 *     without stealing spotlight from toggles.
 * ------------------------------------------------------------ */
.casurid-a11y-panel__footer {
    /* ES: Padding cómodo (16 px) y separador visual explícito
           del bloque de toggles.
       EN: Comfortable padding (16 px) and explicit visual
           separator from toggles block. */
    padding: 12px 16px;
    margin-top: 8px;
    border-top: 1px solid #e0e0e0;
    background: #f5f9ff;
}
.casurid-a11y-panel__settings-link {
    /* ES: Link estilo "call to action suave" — no botón agresivo,
           pero claramente clickeable.
       EN: "Soft call to action" link style — not aggressive
           button, but clearly clickable. */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: #0056b3;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease;
}
.casurid-a11y-panel__settings-link:hover,
.casurid-a11y-panel__settings-link:focus {
    /* ES: Hover más visible + outline amarillo para accesibilidad
           por teclado (WCAG 2.4.7 Focus Visible).
       EN: More visible hover + yellow outline for keyboard
           accessibility (WCAG 2.4.7 Focus Visible). */
    background: #e3f2fd;
    color: #003d80;
    text-decoration: none;
    outline: 2px solid #ffc107;
    outline-offset: 2px;
}
.casurid-a11y-panel__settings-link .casurid-a11y-icon {
    /* ES: Ícono más pequeño que en los toggles principales
           (18 px vs 24 px) para no competir visualmente.
       EN: Icon smaller than in main toggles (18 px vs 24 px)
           to avoid visual competition. */
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex-shrink: 0;
}
.casurid-a11y-panel__settings-label {
    flex: 1;
    line-height: 1.3;
}

/* ============================================================
 * BLOQUE B: Reglas globales activadas por toggle.
 * BLOCK B: Global rules activated by toggle.
 * Cada bloque se activa cuando <html> recibe la clase indicada.
 * Each block activates when <html> receives the indicated class.
 * ============================================================ */

/* --- Toggle 2: Contraste alto (amarillo sobre negro estilo WCAG AAA) --- */
/* --- Toggle 2: High contrast (yellow on black WCAG AAA style)       --- */
html.casurid-a11y-hicontrast,
html.casurid-a11y-hicontrast body {
    background: #000000 !important;
    color: #ffeb3b !important;
}
html.casurid-a11y-hicontrast * {
    background-color: transparent !important;
    color: #ffeb3b !important;
    border-color: #ffeb3b !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
html.casurid-a11y-hicontrast a,
html.casurid-a11y-hicontrast a * {
    color: #00e5ff !important;
    text-decoration: underline !important;
}
/* Widget del plugin no debe cambiar de color — usa su propio ámbito.
   Plugin's own widget must not change color — uses its own scope. */
html.casurid-a11y-hicontrast .casurid-a11y-fab,
html.casurid-a11y-hicontrast .casurid-a11y-panel,
html.casurid-a11y-hicontrast .casurid-a11y-panel * {
    background-color: initial !important;
    color: initial !important;
    border-color: initial !important;
}
html.casurid-a11y-hicontrast .casurid-a11y-fab {
    background: #ffeb3b !important;
    color: #000000 !important;
}

/* --- Toggle 3: Escala de grises --- */
/* --- Toggle 3: Grayscale        --- */
html.casurid-a11y-grayscale {
    /* ES: Se aplica al <html> completo. El widget está por encima
           pero también se ve en grises — es aceptable.
       EN: Applied to whole <html>. Widget is on top but also renders
           in grayscale — that's acceptable. */
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

/* --- Toggle 4: Agrandar texto — 3 niveles progresivos --- */
/* --- Toggle 4: Enlarge text — 3 progressive levels    --- */
html.casurid-a11y-textsize-1 body { font-size: 125% !important; }
html.casurid-a11y-textsize-2 body { font-size: 150% !important; }
html.casurid-a11y-textsize-3 body { font-size: 200% !important; }
/* ES: El widget del plugin debe mantener su tamaño base.
   EN: The plugin's own widget must keep its base size. */
html[class*="casurid-a11y-textsize"] .casurid-a11y-fab,
html[class*="casurid-a11y-textsize"] .casurid-a11y-panel {
    font-size: 14px !important;
}

/* --- Toggle 5: Espaciado de texto --- */
/* --- Toggle 5: Text spacing      --- */
html.casurid-a11y-textspacing * {
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
    line-height: 1.8 !important;
}

/* --- Toggle 6: Resaltar enlaces --- */
/* --- Toggle 6: Highlight links  --- */
html.casurid-a11y-highlightlinks a,
html.casurid-a11y-highlightlinks a * {
    background: #ffeb3b !important;
    color: #000000 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    padding: 1px 2px !important;
    border-radius: 2px !important;
}

/* --- Toggle 7: Lectura fácil (marca los <p> para el módulo cognitivo) --- */
/* --- Toggle 7: Easy reading (marks <p> for cognitive module)          --- */
/* ES: No aplica CSS visible propio — el módulo cognitivo (v1.1) es quien
       reemplaza el texto por la versión simplificada vía Gemini.
   EN: No visible CSS of its own — the cognitive module (v1.1) is the one
       replacing text with the simplified version via Gemini. */
html.casurid-a11y-easyread [data-casurid-original-hash] {
    background: #fff8e7;
    padding: 4px 8px;
    border-left: 3px solid #0f6e56;
    border-radius: 4px;
}

/* --- Toggle 8: Detener animaciones --- */
/* --- Toggle 8: Stop animations    --- */
html.casurid-a11y-noanim *,
html.casurid-a11y-noanim *::before,
html.casurid-a11y-noanim *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}
/* Videos y GIFs en pausa cuando se detienen animaciones.
   Videos and GIFs paused when animations are stopped. */
html.casurid-a11y-noanim video[autoplay] {
    /* No podemos pausar desde CSS; el JS lo hace.
       We can't pause from CSS; JS does it. */
}

/* --- Toggle 9: Ocultar imágenes --- */
/* --- Toggle 9: Hide images     --- */
html.casurid-a11y-noimg img,
html.casurid-a11y-noimg picture,
html.casurid-a11y-noimg video,
html.casurid-a11y-noimg svg:not(.casurid-a11y-icon) {
    /* ES: :not(.casurid-a11y-icon) para no romper los íconos del propio widget.
       EN: :not(.casurid-a11y-icon) so we don't break our own widget icons. */
    display: none !important;
}
/* Placeholder que muestra el alt cuando ocultamos imágenes.
   Placeholder showing alt text when images are hidden. */
html.casurid-a11y-noimg .casurid-a11y-imgalt {
    display: inline-block;
    padding: 4px 8px;
    background: #f1f5f9;
    border: 1px dashed #94a3b8;
    color: #475569;
    font-size: 0.9em;
    font-style: italic;
    border-radius: 4px;
}

/* --- Toggle 10: Alinear texto a la izquierda --- */
/* --- Toggle 10: Align text left               --- */
html.casurid-a11y-alignleft * {
    text-align: left !important;
}

/* --- Toggle 11: Cursor grande --- */
/* --- Toggle 11: Large cursor  --- */
/* ES: SVG inline como data URI = cero peticiones extra.
   EN: Inline SVG as data URI = zero extra requests. */
html.casurid-a11y-bigcursor,
html.casurid-a11y-bigcursor * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="%23000" stroke="%23fff" stroke-width="2" d="M4 4l12 32 5-14 14-5z"/></svg>') 4 4, auto !important;
}
html.casurid-a11y-bigcursor a,
html.casurid-a11y-bigcursor button,
html.casurid-a11y-bigcursor [role="button"],
html.casurid-a11y-bigcursor input,
html.casurid-a11y-bigcursor select {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="%230f3d6b" stroke="%23fff" stroke-width="2" d="M14 4v24l6-6 4 12 6-2-4-12 8 2z"/></svg>') 8 4, pointer !important;
}

/* --- Toggle 12: Leer página --- */
/* --- Toggle 12: Read page   --- */
/* ES: El elemento leído se resalta suavemente para dar feedback visual.
   EN: The element being read is softly highlighted for visual feedback. */
.casurid-a11y-reading-now {
    background: #fef3c7 !important;
    outline: 2px solid #f59e0b !important;
    outline-offset: 2px;
    scroll-margin-top: 100px; /* Deja aire cuando se hace scroll automático. */
}

/* ============================================================
 * Modo móvil / Mobile mode
 * [v1.2.1 FIX] Ajustado para no chocar con el FAB del chat de Moodle,
 *              que también aparece en bottom-right en móvil.
 * [v1.2.1 FIX] Adjusted to avoid clashing with Moodle chat FAB,
 *              which also appears bottom-right on mobile.
 * ============================================================ */
@media (max-width: 480px) {
    .casurid-a11y-fab {
        width: 40px;          /* [v1.2.1 FIX] antes / previously 48px */
        height: 40px;         /* [v1.2.1 FIX] antes / previously 48px */
        bottom: 16px;
        right: 52px;          /* [v1.2.1 FIX] antes / previously 16px */
    }
    .casurid-a11y-fab svg {
        width: 22px;
        height: 22px;
    }
    .casurid-a11y-panel {
        left: 8px;
        right: 8px;
        width: auto;
        bottom: 64px;         /* [v1.2.1 FIX] antes / previously 76px */
    }
}