/* =====================================================
   Navbar Moderno — estilo lovable.dev
   Mejoras globales de contraste, accesibilidad y UX móvil.
   Se aplica como capa sobre las 45 plantillas sin reemplazar
   sus estilos específicos. Alta especificidad con [class*=].
   ===================================================== */

/* -----------------------------------------------------
   1) BOTÓN HAMBURGUESA — alto contraste y dimensión táctil
   ----------------------------------------------------- */
.navbar-toggler,
[class*="mobile-toggle"],
[class*="nav-toggle"],
[class*="menu-toggle"],
[class*="mobile-menu-btn"],
[class*="burger"],
[class*="hamburger"] {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1.5px solid color-mix(in srgb, currentColor 30%, transparent);
    background: color-mix(in srgb, currentColor 5%, transparent);
    color: inherit;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.navbar-toggler:hover,
[class*="mobile-toggle"]:hover,
[class*="nav-toggle"]:hover,
[class*="menu-toggle"]:hover,
[class*="mobile-menu-btn"]:hover,
[class*="burger"]:hover,
[class*="hamburger"]:hover {
    background: color-mix(in srgb, currentColor 12%, transparent);
    border-color: color-mix(in srgb, currentColor 50%, transparent);
}

.navbar-toggler:active,
[class*="mobile-toggle"]:active,
[class*="nav-toggle"]:active,
[class*="menu-toggle"]:active,
[class*="mobile-menu-btn"]:active,
[class*="burger"]:active,
[class*="hamburger"]:active {
    transform: scale(0.96);
}

.navbar-toggler:focus-visible,
[class*="mobile-toggle"]:focus-visible,
[class*="nav-toggle"]:focus-visible,
[class*="menu-toggle"]:focus-visible,
[class*="mobile-menu-btn"]:focus-visible,
[class*="burger"]:focus-visible,
[class*="hamburger"]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Asegurar que el icono Lucide/SVG dentro del toggle sea visible */
.navbar-toggler i,
.navbar-toggler svg,
[class*="mobile-toggle"] i,
[class*="mobile-toggle"] svg,
[class*="nav-toggle"] i,
[class*="nav-toggle"] svg,
[class*="menu-toggle"] i,
[class*="menu-toggle"] svg,
[class*="burger"] i,
[class*="burger"] svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}

/* -----------------------------------------------------
   2) MENÚS MÓVILES — fondo sólido con contraste FIJO
   Corrige menús semitransparentes que no se leen.
   Usa un panel blanco con texto oscuro para garantizar legibilidad
   independiente del tema de la plantilla.
   ----------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Bootstrap collapse */
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        background: #ffffff !important;
        color: #1f2937 !important;
        border-radius: 14px;
        margin-top: 10px;
        padding: 14px 16px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18),
                    0 2px 8px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(0, 0, 0, 0.08);
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .navbar-collapse.show .nav-link,
    .navbar-collapse.collapsing .nav-link {
        color: #1f2937 !important;
        padding: 12px 14px !important;
        border-radius: 10px;
        font-weight: 500;
        transition: background 0.18s ease, color 0.18s ease;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .navbar-collapse.show .nav-link i,
    .navbar-collapse.collapsing .nav-link i,
    .navbar-collapse.show .nav-link svg,
    .navbar-collapse.collapsing .nav-link svg {
        color: var(--muro-accent, #c8a45a);
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .navbar-collapse.show .nav-link:hover,
    .navbar-collapse.collapsing .nav-link:hover,
    .navbar-collapse.show .nav-link:focus-visible,
    .navbar-collapse.collapsing .nav-link:focus-visible {
        background: color-mix(in srgb, var(--muro-accent, #c8a45a) 14%, #ffffff);
        color: color-mix(in srgb, var(--muro-accent, #c8a45a) 70%, #000000) !important;
    }

    /* Menús custom de xv_anos / cumpleanos / aniversario (abiertos con .active) */
    [class*="nav-menu"].active,
    [class*="nav-menu"].open,
    [class*="nav-menu"].show,
    [class*="nav-links"].active,
    [class*="nav-links"].open,
    [class*="nav-links"].show,
    .tpl-cp1-nav.active,
    .tpl-cp2-nav.active,
    .tpl-bz1-menu.active,
    .tpl-bz2-nav.active {
        background: #ffffff !important;
        color: #1f2937 !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
        border-radius: 14px;
        padding: 12px !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 1px solid rgba(0, 0, 0, 0.08);
    }

    [class*="nav-menu"].active a,
    [class*="nav-menu"].open a,
    [class*="nav-menu"].show a,
    [class*="nav-links"].active a,
    [class*="nav-links"].open a,
    [class*="nav-links"].show a {
        color: #1f2937 !important;
        padding: 12px 14px !important;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 500;
        text-decoration: none;
    }

    [class*="nav-menu"].active a i,
    [class*="nav-menu"].active a svg,
    [class*="nav-links"].active a i,
    [class*="nav-links"].active a svg {
        color: var(--muro-accent, #c8a45a);
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    [class*="nav-menu"].active a:hover,
    [class*="nav-menu"].open a:hover,
    [class*="nav-menu"].show a:hover,
    [class*="nav-links"].active a:hover,
    [class*="nav-links"].open a:hover,
    [class*="nav-links"].show a:hover {
        background: color-mix(in srgb, var(--muro-accent, #c8a45a) 14%, #ffffff);
        color: color-mix(in srgb, var(--muro-accent, #c8a45a) 70%, #000000) !important;
    }
}

/* -----------------------------------------------------
   3) NAVBAR CONTENEDOR — spacing y altura consistentes
   ----------------------------------------------------- */
.navbar,
[class*="navbar-"] {
    min-height: 56px;
}

/* Quitar icono Home solo en el item izquierdo (brand/logo del navbar) */
nav .navbar-brand [data-lucide="house"],
nav .navbar-brand .lucide-house,
nav .navbar-brand .fa-home,
nav .navbar-brand .fas.fa-home,
nav [class*="nav-brand"] [data-lucide="house"],
nav [class*="nav-brand"] .lucide-house,
nav [class*="nav-brand"] .fa-home,
nav [class*="nav-brand"] .fas.fa-home,
nav [class*="nav-logo"] [data-lucide="house"],
nav [class*="nav-logo"] .lucide-house,
nav [class*="nav-logo"] .fa-home,
nav [class*="nav-logo"] .fas.fa-home {
    display: none !important;
}

/* Brand vacío (sin texto ni icono) tras limpieza: asegurar que no rompa layout */
.navbar-brand:empty,
[class*="nav-logo"]:empty,
[class*="nav-brand"]:empty,
[class*="-brand"]:empty,
[class*="-logo"]:empty,
.navbar-brand[aria-label="Inicio"]:empty,
[class*="topnav__brand"]:empty {
    width: 32px;
    height: 32px;
    display: inline-block;
    position: relative;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background: transparent;
}

/* -----------------------------------------------------
   4) ANIMACIÓN SUAVE DE APERTURA
   ----------------------------------------------------- */
@media (max-width: 991.98px) {
    .navbar-collapse.collapsing,
    [class*="nav-menu"].active,
    [class*="nav-links"].active,
    [class*="nav-menu"].open,
    [class*="nav-links"].open {
        animation: muroMenuSlideIn 0.24s ease-out;
    }
}

@keyframes muroMenuSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -----------------------------------------------------
   5) REDUCIR MOVIMIENTO (accesibilidad)
   ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .navbar-toggler,
    [class*="mobile-toggle"],
    [class*="nav-toggle"],
    [class*="menu-toggle"],
    [class*="burger"],
    [class*="hamburger"],
    .navbar-collapse.collapsing,
    [class*="nav-menu"],
    [class*="nav-links"] {
        animation: none !important;
        transition: none !important;
    }
}