/* ==========================================================
   NUBO_MOBILE_NAV_PREMIUM_V1_START

   Modernización exclusivamente visual de .mobile-nav.
   No modifica rutas, eventos ni JavaScript.
   ========================================================== */

@media (max-width: 760px) {

  :root {
    --nubo-mobile-nav-height: 74px;
    --nubo-mobile-nav-bottom: 8px;
  }


  /* ========================================================
     ESPACIO PARA QUE LA BARRA NO TAPE EL CONTENIDO
     ======================================================== */

  .main-content {
    padding-bottom:
      calc(
        102px +
        env(safe-area-inset-bottom)
      ) !important;
  }


  /* ========================================================
     SUPERFICIE FLOTANTE
     ======================================================== */

  .mobile-nav {
    position:
      fixed !important;

    z-index:
      88 !important;

    right:
      max(
        9px,
        env(safe-area-inset-right)
      ) !important;

    bottom:
      max(
        var(--nubo-mobile-nav-bottom),
        env(safe-area-inset-bottom)
      ) !important;

    left:
      max(
        9px,
        env(safe-area-inset-left)
      ) !important;

    display:
      grid !important;

    grid-template-columns:
      repeat(
        5,
        minmax(0, 1fr)
      ) !important;

    align-items:
      center !important;

    width:
      auto !important;

    height:
      var(--nubo-mobile-nav-height) !important;

    padding:
      7px
      6px !important;

    overflow:
      visible !important;

    border:
      1px solid
      rgba(185, 210, 196, 0.78) !important;

    border-radius:
      24px !important;

    background:
      linear-gradient(
        150deg,
        rgba(255, 255, 255, 0.94),
        rgba(247, 252, 249, 0.90)
      ) !important;

    box-shadow:
      0 17px 42px
      rgba(16, 55, 36, 0.16),
      0 4px 13px
      rgba(16, 55, 36, 0.07),
      inset 0 1px 0
      rgba(255, 255, 255, 0.98) !important;

    backdrop-filter:
      blur(22px)
      saturate(145%) !important;

    -webkit-backdrop-filter:
      blur(22px)
      saturate(145%) !important;

    isolation:
      isolate;

    transform:
      translateZ(0);

    transition:
      opacity
      180ms
      ease,
      transform
      220ms
      cubic-bezier(
        0.2,
        0.8,
        0.2,
        1
      ) !important;

    animation:
      nubo-mobile-nav-enter
      310ms
      cubic-bezier(
        0.2,
        0.8,
        0.2,
        1
      );
  }


  /*
   * Línea de luz superior:
   * aporta volumen sin convertirla en una barra llamativa.
   */

  .mobile-nav::before {
    content:
      "";

    position:
      absolute;

    top:
      0;

    right:
      20px;

    left:
      20px;

    height:
      1px;

    border-radius:
      999px;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(49, 179, 112, 0.42),
        rgba(88, 139, 231, 0.28),
        transparent
      );

    pointer-events:
      none;
  }


  /* ========================================================
     BOTONES GENERALES
     ======================================================== */

  .mobile-nav
  > button {
    --mobile-accent:
      #4e7060;

    --mobile-soft:
      #eef5f1;

    position:
      relative !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    gap:
      4px !important;

    min-width:
      0 !important;

    width:
      100% !important;

    height:
      57px !important;

    margin:
      0 !important;

    padding:
      5px
      3px !important;

    border:
      0 !important;

    border-radius:
      17px !important;

    color:
      #66796f !important;

    background:
      transparent !important;

    box-shadow:
      none !important;

    font:
      inherit;

    cursor:
      pointer;

    -webkit-tap-highlight-color:
      transparent;

    touch-action:
      manipulation;

    transition:
      color
      170ms
      ease,
      background-color
      170ms
      ease,
      box-shadow
      170ms
      ease,
      transform
      150ms
      ease !important;
  }


  /* Colores discretos por sección */

  .mobile-nav
  > button:nth-child(1) {
    --mobile-accent:
      #08a663;

    --mobile-soft:
      #e7f8ef;
  }


  .mobile-nav
  > button:nth-child(2) {
    --mobile-accent:
      #397dd5;

    --mobile-soft:
      #eaf3fe;
  }


  .mobile-nav
  > button:nth-child(4) {
    --mobile-accent:
      #7256c9;

    --mobile-soft:
      #f0ecfc;
  }


  .mobile-nav
  > button:nth-child(5) {
    --mobile-accent:
      #287c68;

    --mobile-soft:
      #e9f6f1;
  }


  .mobile-nav
  > button
  svg,
  .mobile-nav
  > button
  .icon {
    width:
      21px !important;

    height:
      21px !important;

    color:
      var(--mobile-accent) !important;

    stroke-width:
      1.8;

    transition:
      transform
      170ms
      ease,
      color
      170ms
      ease !important;
  }


  .mobile-nav
  > button
  > span {
    display:
      block !important;

    max-width:
      100% !important;

    overflow:
      hidden;

    color:
      inherit !important;

    font-size:
      9px !important;

    font-weight:
      720 !important;

    letter-spacing:
      -0.015em;

    line-height:
      1.05 !important;

    text-align:
      center;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  /* ========================================================
     SECCIÓN ACTIVA
     ======================================================== */

  .mobile-nav
  > button:not(.mobile-add).is-active {
    color:
      var(--mobile-accent) !important;

    background: transparent !important;

    box-shadow: none !important;
  }


  .mobile-nav
  > button:not(.mobile-add).is-active
  svg,
  .mobile-nav
  > button:not(.mobile-add).is-active
  .icon {
    transform:
      translateY(-1px)
      scale(1.05);

    animation:
      nubo-mobile-icon-pop
      230ms
      cubic-bezier(
        0.2,
        0.85,
        0.25,
        1
      );
  }


  /*
   * Indicador inferior activo.
   */

  .mobile-nav
  > button:not(.mobile-add)::after {
    content:
      "";

    position:
      absolute;

    right:
      50%;

    bottom:
      3px;

    width:
      12px;

    height:
      3px;

    border-radius:
      999px;

    background:
      var(--mobile-accent);

    opacity:
      0;

    transform:
      translateX(50%)
      scaleX(0.35);

    transition:
      opacity
      170ms
      ease,
      transform
      170ms
      ease;
  }


  .mobile-nav
  > button:not(.mobile-add).is-active::after {
    opacity:
      0.9;

    transform:
      translateX(50%)
      scaleX(1);
  }


  /* ========================================================
     BOTÓN CENTRAL AÑADIR
     ======================================================== */

  .mobile-nav
  > .mobile-add {
    position:
      relative !important;

    align-self:
      start !important;

    justify-self:
      center !important;

    width:
      56px !important;

    min-width:
      56px !important;

    height:
      56px !important;

    min-height:
      56px !important;

    margin:
      -18px
      auto
      0 !important;

    padding:
      0 !important;

    overflow:
      visible !important;

    border:
      1px solid
      rgba(255, 255, 255, 0.82) !important;

    border-radius:
      19px !important;

    color:
      #ffffff !important;

    background:
      linear-gradient(
        145deg,
        #10ad68,
        #079657
      ) !important;

    box-shadow:
      0 14px 27px
      rgba(8, 151, 87, 0.28),
      0 5px 11px
      rgba(8, 151, 87, 0.17),
      inset 0 1px 0
      rgba(255, 255, 255, 0.34) !important;

    transform:
      none !important;

    transition:
      transform
      160ms
      ease,
      box-shadow
      160ms
      ease,
      filter
      160ms
      ease !important;
  }


  /*
   * Halo ligero detrás del botón central.
   */

  .mobile-nav
  > .mobile-add::before {
    content:
      "";

    position:
      absolute;

    z-index:
      -1;

    inset:
      -7px;

    border-radius:
      23px;

    background:
      rgba(15, 171, 103, 0.12);

    filter:
      blur(4px);

    pointer-events:
      none;
  }


  .mobile-nav
  > .mobile-add
  svg,
  .mobile-nav
  > .mobile-add
  .icon {
    width:
      23px !important;

    height:
      23px !important;

    color:
      #ffffff !important;

    stroke-width:
      1.7;
  }


  .mobile-nav
  > .mobile-add
  > span {
    position:
      absolute !important;

    top:
      61px !important;

    left:
      50% !important;

    display:
      block !important;

    overflow:
      visible !important;

    color:
      #168052 !important;

    font-size:
      8.7px !important;

    font-weight:
      820 !important;

    line-height:
      1 !important;

    white-space:
      nowrap !important;

    transform:
      translateX(-50%) !important;
  }


  /* ========================================================
     INTERACCIONES
     ======================================================== */

  .mobile-nav
  > button:not(.mobile-add):active {
    transform:
      translateY(1px)
      scale(0.96) !important;
  }


  .mobile-nav
  > .mobile-add:active {
    transform:
      translateY(2px)
      scale(0.94) !important;

    box-shadow:
      0 8px 17px
      rgba(8, 151, 87, 0.23),
      inset 0 1px 0
      rgba(255, 255, 255, 0.30) !important;
  }


  .mobile-nav
  > button:focus-visible {
    outline:
      3px solid
      rgba(43, 170, 108, 0.24) !important;

    outline-offset:
      2px;
  }


  /*
   * El teclado no debe dejar la navegación flotando
   * encima del formulario.
   */

  body.nubo-keyboard-open
  .mobile-nav {
    opacity:
      0 !important;

    pointer-events:
      none !important;

    transform:
      translateY(
        calc(
          120% +
          30px
        )
      ) !important;
  }


  /* ========================================================
     ANIMACIONES
     ======================================================== */

  @keyframes nubo-mobile-nav-enter {
    from {
      opacity:
        0;

      transform:
        translateY(18px)
        scale(0.985);
    }

    to {
      opacity:
        1;

      transform:
        translateY(0)
        scale(1);
    }
  }


  @keyframes nubo-mobile-icon-pop {
    0% {
      transform:
        translateY(1px)
        scale(0.91);
    }

    65% {
      transform:
        translateY(-2px)
        scale(1.09);
    }

    100% {
      transform:
        translateY(-1px)
        scale(1.05);
    }
  }


  /* ========================================================
     PANTALLAS MUY ESTRECHAS
     ======================================================== */

  @media (max-width: 365px) {
    .mobile-nav {
      right:
        6px !important;

      left:
        6px !important;

      padding-inline:
        3px !important;
    }


    .mobile-nav
    > button {
      padding-inline:
        1px !important;
    }


    .mobile-nav
    > button
    > span {
      font-size:
        8.2px !important;
    }


    .mobile-nav
    > .mobile-add {
      width:
        52px !important;

      min-width:
        52px !important;

      height:
        52px !important;

      min-height:
        52px !important;

      border-radius:
        17px !important;
    }


    .mobile-nav
    > .mobile-add
    > span {
      top:
        58px !important;
    }
  }


  /* ========================================================
     ORIENTACIÓN HORIZONTAL
     ======================================================== */

  @media (
    orientation: landscape
  )
  and (
    max-height: 520px
  ) {
    :root {
      --nubo-mobile-nav-height:
        62px;
    }


    .main-content {
      padding-bottom:
        calc(
          82px +
          env(safe-area-inset-bottom)
        ) !important;
    }


    .mobile-nav {
      border-radius:
        20px !important;

      padding:
        4px
        6px !important;
    }


    .mobile-nav
    > button:not(.mobile-add) {
      height:
        49px !important;
    }


    .mobile-nav
    > button
    svg,
    .mobile-nav
    > button
    .icon {
      width:
        18px !important;

      height:
        18px !important;
    }


    .mobile-nav
    > button
    > span {
      font-size:
        8px !important;
    }


    .mobile-nav
    > .mobile-add {
      width:
        48px !important;

      min-width:
        48px !important;

      height:
        48px !important;

      min-height:
        48px !important;

      margin-top:
        -13px !important;

      border-radius:
        16px !important;
    }


    .mobile-nav
    > .mobile-add
    > span {
      top:
        52px !important;

      font-size:
        8px !important;
    }
  }


  /* ========================================================
     MODO OSCURO
     ======================================================== */

  html[data-theme="dark"]
  .mobile-nav {
    border-color:
      rgba(87, 114, 99, 0.72) !important;

    background:
      linear-gradient(
        150deg,
        rgba(25, 37, 31, 0.95),
        rgba(20, 31, 25, 0.92)
      ) !important;

    box-shadow:
      0 18px 44px
      rgba(0, 0, 0, 0.32),
      inset 0 1px 0
      rgba(255, 255, 255, 0.055) !important;
  }


  html[data-theme="dark"]
  .mobile-nav
  > button {
    color:
      #aebdb5 !important;
  }


  html[data-theme="dark"]
  .mobile-nav
  > button:not(.mobile-add).is-active {
    color:
      var(--mobile-accent) !important;

    background: transparent !important;

    box-shadow: none !important;
  }


  /* ========================================================
     MOVIMIENTO REDUCIDO
     ======================================================== */

  @media (prefers-reduced-motion: reduce) {
    .mobile-nav,
    .mobile-nav
    > button,
    .mobile-nav
    > button
    svg,
    .mobile-nav
    > button
    .icon,
    .mobile-nav
    > button::after {
      animation:
        none !important;

      transition:
        none !important;
    }
  }
}

/* NUBO_MOBILE_NAV_PREMIUM_V1_END */