/* ==============================
   TOKENS GLOBALES COMPARTIDOS
   Este archivo interactúa con:
   - :root
   - .top-navbar
   - .bottom-nav
   - .site-logo
   - .bottom-nav-item

   Función:
   - Definir variables reutilizadas por la navbar móvil.
============================== */
:root{
  --c-bg:#151515;
  --c-border-soft:rgba(255,255,255,.08);
  --c-primary:#0d6efd;

  --shadow-md:0 2px 10px rgba(0,0,0,.25);

  --topbar-h:60px;
  --bottombar-h:65px;
  --logo-mobile:56px;
}

/* ==============================
   Accesibilidad para reducir animaciones.
   Interactúa con:
   - todos los elementos de la navbar móvil
============================== */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ==============================
   Logo móvil.
   Interactúa con:
   - .site-logo img dentro de .top-navbar
============================== */
@media (max-width: 767.98px){
  .site-logo img{
    width: var(--logo-mobile);
    height:auto;
    object-fit:contain;
  }
}

/* ==============================
   Iconos compartidos para móvil.
   Interactúa con:
   - .ti
   - .ti-xl
   - .nav-icon-link
============================== */
.ti{
  width:20px;
  height:20px;
  display:inline-block;
  vertical-align:middle;
  flex-shrink:0;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ti-xl{
  width:26px;
  height:26px;
  flex-shrink:0;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nav-icon-link{
  position:relative;
  padding:.5rem .72rem;
  border-radius:999px;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.nav-icon-link:hover{
  background:rgba(255,255,255,.06);
  transform:translateY(-1px);
}

.nav-icon-link:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(13,110,253,.30);
  background:rgba(255,255,255,.08);
}

/* ==============================
   Barra superior móvil.
   Interactúa con:
   - .top-navbar
============================== */
.top-navbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height: var(--topbar-h);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    var(--c-bg);
  z-index:1050;
  display:flex;
  align-items:center;
  box-shadow: var(--shadow-md);
  border-bottom:1px solid var(--c-border-soft);
}

/* ==============================
   Barra inferior móvil.
   Interactúa con:
   - .bottom-nav
============================== */
.bottom-nav{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:rgba(21,21,21,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top:1px solid var(--c-border-soft);
  z-index:1050;
  display:flex;
  justify-content:space-around;
  align-items:center;
  box-sizing:border-box;
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(var(--bottombar-h) + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(0,0,0,.18);
}

/* ==============================
   Items internos de la barra inferior.
   Interactúa con:
   - .bottom-nav .nav-link
   - .bottom-nav-item
   - .bottom-nav-icon-wrap
   - .bottom-nav-icon
   - .bottom-nav .nav-link small
============================== */
.bottom-nav .nav-link{
  flex:1 1 20%;
  max-width:20%;
  min-width:0;
  color:rgba(255,255,255,.78);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.22rem;
  height:100%;
  font-size:.72rem;
  padding:.22rem 0;
  line-height:1.05;
  position:relative;
  transition: color .2s ease, transform .2s ease;
}

.bottom-nav .nav-link::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:42px;
  height:42px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  transform:translate(-50%,-58%);
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
  z-index:0;
}

.bottom-nav .nav-link > *{
  position:relative;
  z-index:1;
}

.bottom-nav .nav-link .ti,
.bottom-nav .nav-link .ti-xl{
  display:block;
  width:23px;
  height:23px;
  min-width:23px;
  min-height:23px;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.bottom-nav .nav-link small{
  display:block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.01em;
}

/* ==============================
   Estados interactivos de la barra inferior.
   Interactúa con:
   - .bottom-nav .nav-link:hover
   - .bottom-nav .nav-link:focus-visible
   - .bottom-nav .nav-link.active
============================== */
.bottom-nav .nav-link:hover{
  color:#fff;
}

.bottom-nav .nav-link:hover::before,
.bottom-nav .nav-link:focus-visible::before,
.bottom-nav .nav-link.active::before{
  background:rgba(13,110,253,.16);
  box-shadow:0 8px 18px rgba(13,110,253,.14);
  transform:translate(-50%,-58%) scale(1.02);
}

.bottom-nav .nav-link.active{
  color:#fff;
}

/* ==============================
   Ocultamiento en escritorio.
   Interactúa con:
   - .top-navbar
   - .bottom-nav
============================== */
@media (min-width: 768px){
  .top-navbar,
  .bottom-nav{
    display:none;
  }
}

/* ==============================
   Compensación del body en móvil.
   Interactúa con:
   - body
   - alturas de .top-navbar y .bottom-nav
============================== */
@media (max-width: 767.98px){
  body{
    padding-top: calc(var(--topbar-h) + env(safe-area-inset-top));
    padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom));
  }
}