/* Bottom Navigation Bar Styles - Premium Custom Nav */
.bottom-nav {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    /* Altura fija exacta a 60px */
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    z-index: 100;
    padding: 0 16px;
    padding-bottom: 0;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Variables de diseño por defecto (Tema Blanco) */
    --nav-bg: #ffffff;
    --nav-color-inactive: rgba(70, 117, 104, 0.5);
    /* Verde semitransparente para inactivos */
    --nav-color-active: #467568;
    /* El verde principal solicitado */
    --nav-shadow: 0 -8px 24px rgba(70, 117, 104, 0.05), 0 -1px 0px rgba(70, 117, 104, 0.08);

    background-color: var(--nav-bg);
    box-shadow: var(--nav-shadow);
    border-top: 1px solid rgba(70, 117, 104, 0.1);
    /* Línea superior sutil */
}

/* Temas configurables */
.bottom-nav.theme-white {
    --nav-bg: #ffffff;
    --nav-color-inactive: rgba(70, 117, 104, 0.5);
    --nav-color-active: #467568;
    --nav-shadow: 0 -8px 24px rgba(70, 117, 104, 0.05), 0 -1px 0px rgba(70, 117, 104, 0.08);
    border-top: 1px solid rgba(70, 117, 104, 0.1);
}

.bottom-nav.theme-green {
    --nav-bg: #467568;
    --nav-color-inactive: rgba(255, 255, 255, 0.5);
    --nav-color-active: #ffffff;
    --nav-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Tema Translúcido Premium (Compartido entre Home y Lobby de Partidos) */
.bottom-nav.theme-home,
.bottom-nav.theme-partidos {
    --nav-bg: rgb(42 90 77);
    /* Fondo translúcido blanco sutil (#ffffff12) */
    --nav-color-inactive: rgba(255, 255, 255, 0.61);
    /* Iconos no seleccionados (blanco translúcido) */
    --nav-color-active: rgba(255, 255, 255, 0.85);
    /* Icono seleccionado (blanco destacado) */
    --nav-shadow: none;
    /* Sin sombra dura para máxima integración */
    border-top: none;
    /* Sin borde duro superior */
    /* backdrop-filter: blur(10px); */
    -webkit-backdrop-filter: blur(10px);
}



/* Items individuales */
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Centrado vertical absoluto del icono SVG en relación al alto */
    flex: 1;
    height: 100%;
    text-decoration: none;
    color: var(--nav-color-inactive);
    position: relative;
    /* Clave para posicionar el label absoluto debajo */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Contenedor del Icono (Perfectamente centrado en el nav-item) */
.nav-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: none;
}

/* Estilo general del icono SVG (Mismo tamaño para los 4) */
.nav-icon {
    width: 24px;
    height: 24px;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Asegurar transiciones suaves en elementos internos del SVG */
.nav-icon path,
.nav-icon circle,
.nav-icon rect,
.nav-icon polyline,
.nav-icon g {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Etiquetas */
.nav-label {
    position: absolute;

    /* ==========================================================================
       DISTANCIA DE LAS PALABRAS CON EL SVG
       Cambia este valor para acercar o alejar el texto de la base del SVG de forma
       totalmente independiente, sin interferir con el centrado vertical del icono.
       ========================================================================== */
    --label-distance-to-svg: 6px;

    /* 
       Cálculo de posición independiente:
       - 50% representa el centro vertical de la barra de 60px (a los 30px).
       - 12px representa la mitad de la altura del SVG (que mide 24px), llevándonos a su base.
       - var(--label-distance-to-svg) aplica la separación exacta desde la base del SVG.
    */
    top: calc(50% + 12px + var(--label-distance-to-svg));

    font-size: 8px;
    /* Font size de palabras a 8px */
    font-weight: 400;
    /* Font weight de todas a 400 */
    letter-spacing: 0.02em;
    line-height: 1;
    opacity: 1;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    white-space: nowrap;
    display: none;
    /* Agregado temporalmente para ocultar las palabras debajo de los SVG */
}

/* ── ESTADO ACTIVO ── */
.nav-item.active {
    color: var(--nav-color-active);
}

/* Cuando el item está activo: el icono aumenta de tamaño en su mismo centro horizontal y vertical */
.nav-item.active .nav-icon-wrapper {
    transform: none;
    /* Se mantiene centrado verticalmente in-place */
    width: 24px;
    height: 24px;
}

.nav-item.active .nav-icon {
    transform: scale(1.25);
    /* Se escala en su mismo eje de forma simétrica */
}

/* Ajustes de stroke-width específicos para los iconos de trazo activo */
.nav-item.active .nav-icon[stroke] {
    stroke-width: 2.0;
}

/* Cuando el item está activo: desaparece la palabra que tiene debajo sin alterar el centrado del SVG */
.nav-item.active .nav-label {
    opacity: 0;
    transform: translateY(4px);
    /* Suave deslizamiento hacia abajo */
    pointer-events: none;
}

/* Trazo más fino y premium para el icono de usuario (user-round) */
.nav-item-user .nav-icon {
    width: 29px !important;
    height: 29px !important;
    stroke-width: 1.15 !important;
    /* Más fino que el valor general de 1.5 */
}

/* Ajustar el contenedor para el icono de 29px */
.nav-item-user .nav-icon-wrapper {
    width: 29px !important;
    height: 29px !important;
}

/* Mantener el tamaño de 29px en el contenedor cuando está activo */
.nav-item-user.active .nav-icon-wrapper {
    width: 29px !important;
    height: 29px !important;
}

/* Grosor activo más suave para el icono de usuario */
.nav-item-user.active .nav-icon[stroke] {
    /*stroke-width: 1.35 !important;
    /* Más elegante y sutil en estado activo */
}

/* Dropdown flotante del nav (para no logueados) */
.nav-dropdown {
    position: absolute;
    bottom: 66px;
    /* 6px por encima de la barra nav de 60px */
    right: 16px;
    /* Alineado al margen derecho del nav */
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08), 0 4px 14px rgba(0, 0, 0, 0.12);
    /* Sombra premium adaptada */
    border: 1px solid rgba(0, 0, 0, 0.06);
    min-width: 106px;
    z-index: 200;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transform-origin: bottom right;
    animation: fadeInDropdownNav 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-dropdown.hidden {
    display: none !important;
}

.nav-dropdown .nav-dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    text-align: center;
    font-size: 11.5px;
    color: #333333;
    text-decoration: none;
    background-color: #ffffff;
    transition: background-color 0.15s ease, color 0.15s ease;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-weight: 400;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
}

.nav-dropdown .nav-dropdown-item:last-child {
    border-bottom: none;
}

.nav-dropdown .nav-dropdown-item:hover {
    background-color: #f5f5f5;
    color: #111111;
}

.nav-dropdown .nav-dropdown-item:active {
    background-color: #e9e9e9;
}

@keyframes fadeInDropdownNav {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.96);
    }

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