/* _content/Flygam/Pages/Shared/_Layout.cshtml.rz.scp.css */
html[b-db3bzb6zp8], body[b-db3bzb6zp8] {
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
    height: 100%;
    width: 100%;
    overflow-y:scroll;
}

/* Navbar escritorio (Bootstrap) */
.navbar[b-db3bzb6zp8] {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
}

/* Ajuste del main para escritorio */
main[b-db3bzb6zp8] {
    padding: 0px;
    overflow-y:auto;
    font-family: "Montserrat", sans-serif;
    margin-bottom: 0px; /* espacio para la tabbar */
}

.logo[b-db3bzb6zp8] {
    font-family: "Orbitron", sans-serif;
    font-weight:bold;
}

/* =========================
   Bottom Tabbar móvil
   ========================= */
.bottom-tabbar[b-db3bzb6zp8] {
    display: none; /* se muestra solo en móvil */
    position: fixed;
    bottom: 0;
    left: 0;
    font-family: "Montserrat", sans-serif;
    font-weight:bold;
    width: 100%;
    background-color: #000;
    color: #0dcaf0;
    display: flex;
    justify-content: space-around;
    padding: 0.5rem 0;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    z-index: 1000;
}

    /* Estilo de los enlaces */
    .bottom-tabbar a[b-db3bzb6zp8],
    .bottom-tabbar .dropdown-toggle[b-db3bzb6zp8] {
        color: #11d8ff;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0.8rem;
        gap: 2px;
        padding: 0.4rem 0.5rem;
        position: relative;
    }

        /* Íconos */
        .bottom-tabbar a i[b-db3bzb6zp8],
        .bottom-tabbar .dropdown-toggle i[b-db3bzb6zp8] {
            font-size: 20px;
            transition: transform 0.3s ease; /* transición suave del icono */
        }

        /* Hover */
        .bottom-tabbar a:hover[b-db3bzb6zp8],
        .bottom-tabbar .dropdown-toggle:hover[b-db3bzb6zp8] {
            color: #129bb5;
        }

        /* Tab activo */
        .bottom-tabbar a.active[b-db3bzb6zp8] {
            color: #129bb5;
            justify-content: center; /* centra el icono verticalmente */
        }

            /* Tab activo */
            .bottom-tabbar a.active span[b-db3bzb6zp8] {
                display: none;
            }

            /* Animación de salto suave al activarse */
            .bottom-tabbar a.active i[b-db3bzb6zp8] {
                transform: translateY(-4px); /* sube el icono ligeramente */
            }

    /* Dropdown menu sobre la barra */
    .bottom-tabbar .dropdown-menu[b-db3bzb6zp8] {
        position: absolute;
        bottom: 50px; /* justo encima de la barra */
        left: auto;
        right: 0;
        min-width: 150px;
        z-index: 1100;
    }

.nav-item[b-db3bzb6zp8] {
    font-family: "Montserrat", sans-serif;
    font-weight:bold;
}

/* Media queries: móvil */
@media (max-width: 768px) {
    main[b-db3bzb6zp8] {
        margin-bottom: 70px; /* espacio para la tabbar */
        padding: 0px;
        width: 100%;
    }

    .bottom-tabbar[b-db3bzb6zp8] {
        display: flex; /* mostrar tabbar en móvil */
    }

    /* Ocultar navbar de escritorio */
    .navbar.d-none.d-md-flex[b-db3bzb6zp8] {
        display: none !important;
    }

    #searchInput[b-db3bzb6zp8] {
        width:150px;
    }
}

.bottom-tabbar .dropup .dropdown-toggle[b-db3bzb6zp8]::after {
    display: none; /* Oculta el triángulo del dropdown */
}

.nav-item.dropdown .dropdown-toggle[b-db3bzb6zp8]::after {
    display: none; /* Oculta el triángulo del dropdown */
}

.nav-item .nav-link[b-db3bzb6zp8] {
    color: #11d8ff;
}

    .nav-item .nav-link:hover[b-db3bzb6zp8] {
        color: #129bb5;
    }

    .nav-item .nav-link.active[b-db3bzb6zp8] {
        color: #129bb5;
    }

/* Animación de salto para logo y texto */
@keyframes jump-logo-b-db3bzb6zp8 {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-8px);
    }

    50% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(-4px);
    }

    100% {
        transform: translateY(0);
    }
}

.animated-logo[b-db3bzb6zp8] {
    animation: jump-logo-b-db3bzb6zp8 0.5s ease;
}

    .animated-logo:hover img[b-db3bzb6zp8],
    .animated-logo:hover span[b-db3bzb6zp8] {
        animation: jump-logo-b-db3bzb6zp8 0.5s ease;
        display: inline-block; /* necesario para que funcione el transform */
    }

/* Búsqueda siempre visible */
.search-wrapper[b-db3bzb6zp8] {
    width: 100%;
}

/* Desktop grande (>1024px) */
@media (min-width: 1025px) {
    .search-wrapper[b-db3bzb6zp8] {
        max-width: 400px;
    }
}

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .search-wrapper[b-db3bzb6zp8] {
        max-width: 300px;
    }
}

/* Móvil (<768px) */
@media (max-width: 767px) {
    .search-wrapper[b-db3bzb6zp8] {
        max-width: 150px; /* más pequeño para que quepa al lado del logo */
        flex-grow: 0; /* no crece */
        margin-left: 0.5rem;
    }

    #searchInput[b-db3bzb6zp8] {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem; /* más pequeño */
    }

    #speechBtn[b-db3bzb6zp8] {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
    }
}

/* Wrapper de búsqueda */
.search-wrapper[b-db3bzb6zp8] {
    display: flex;
    align-items: center;
    position: relative;
}

/* Form oculto inicialmente */
.search-form[b-db3bzb6zp8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: width 0.4s ease, opacity 0.4s ease;
}

/* Form visible al activar */
.search-wrapper.active .search-form[b-db3bzb6zp8] {
    opacity: 1;
    width: 200px; /* desktop */
}

/* Ajuste responsive */
@media (max-width: 1024px) {
    .search-wrapper.active .search-form[b-db3bzb6zp8] {
        width: 150px; /* tablet */
    }
}

@media (max-width: 767px) {
    .search-wrapper.active .search-form[b-db3bzb6zp8] {
        width: 120px; /* móvil */
    }

    #searchInput[b-db3bzb6zp8] {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    #speechBtn[b-db3bzb6zp8] {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
    }
}

/* Botón lupa animado */
#searchToggle[b-db3bzb6zp8] {
    transition: transform 0.3s;
}

    #searchToggle:hover[b-db3bzb6zp8] {
        transform: scale(1.1);
    }

/* Input */
#searchInput[b-db3bzb6zp8] {
    flex: 1;
}
#suggestions[b-db3bzb6zp8] {
    position: absolute;
    top: 100%; /* Debajo del input */
    left: 0;
    width: 100%;
    background: white;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ccc;
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}

    #suggestions li[b-db3bzb6zp8] {
        cursor: pointer;
        padding: 5px 10px;
    }

        #suggestions li:hover[b-db3bzb6zp8] {
            background-color: #f0f0f0;
        }

/* ===========================
   COMPATIBILIDAD - 240 x 320
   (Navbar + Tabbar + Search)
=========================== */
@media (max-width: 320px), screen and (max-device-width: 320px) {
    html[b-db3bzb6zp8], body[b-db3bzb6zp8] {
        font-size: 11px;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
    }

    /* Navbar */
    .navbar[b-db3bzb6zp8] {
        box-shadow: none; /* menos carga en móviles básicos */
        padding: 0.2rem 0.4rem;
    }

    .logo[b-db3bzb6zp8] {
        font-size: 0.8rem;
    }

    /* Main */
    main[b-db3bzb6zp8] {
        font-size: 0.75rem;
        padding-bottom: 100px; /* igual a la altura de la tabbar */
    }

    /* Bottom tabbar */
    .bottom-tabbar[b-db3bzb6zp8] {
        padding: 0.25rem 0;
    }

        .bottom-tabbar a[b-db3bzb6zp8],
        .bottom-tabbar .dropdown-toggle[b-db3bzb6zp8] {
            font-size: 0.65rem;
            padding: 0.2rem 0.3rem;
            gap: 1px;
        }

            .bottom-tabbar a i[b-db3bzb6zp8],
            .bottom-tabbar .dropdown-toggle i[b-db3bzb6zp8] {
                font-size: 16px; /* íconos compactos */
            }

        .bottom-tabbar .dropdown-menu[b-db3bzb6zp8] {
            bottom: 35px;
            min-width: 90px;
            font-size: 0.7rem;
        }

    /* Search */
    .search-wrapper[b-db3bzb6zp8] {
        max-width: 90px;
    }

        .search-wrapper.active .search-form[b-db3bzb6zp8] {
            width: 85px; /* input más pequeño */
        }

    #searchInput[b-db3bzb6zp8] {
        font-size: 0.65rem;
        padding: 0.2rem 0.3rem;
    }

    #speechBtn[b-db3bzb6zp8] {
        padding: 0.2rem 0.3rem;
        font-size: 0.65rem;
    }

    /* Sugerencias */
    #suggestions[b-db3bzb6zp8] {
        max-height: 100px;
        font-size: 0.7rem;
    }

        #suggestions li[b-db3bzb6zp8] {
            padding: 3px 5px;
        }
}