/* ============================================================
   PATYTA R7.6.41 — BOTTOM NAV EXPANDIBLE CANÓNICO
   ============================================================ */

@media (max-width:820px){

  /* ==========================================================
     1. CONTENEDOR COMPLETO = PASTILLA REAL
     ========================================================== */
  html body .bottom-nav{
    display:flex!important;
    grid-template-columns:none!important;
    grid-auto-flow:unset!important;

    align-items:center!important;
    justify-content:stretch!important;

    width:calc(100% - 16px)!important;

    height:65px!important;
    min-height:65px!important;

    padding:6px!important;
    gap:3px!important;

    box-sizing:border-box!important;

    border-radius:999px!important;
    overflow:hidden!important;

    /*
     * Refuerzo para que Safari/iOS recorte también las capas
     * translúcidas con la misma forma exterior.
     */
    background-clip:padding-box!important;
  }

  /* Ya no usamos la lente/slider móvil anterior. */
  html body .bottom-nav .patyta-liquid-active-slider,
  html body .bottom-nav > .patyta-liquid-active-slider{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  /* ==========================================================
     2. TODOS LOS BOTONES COMPARTEN EL ANCHO DISPONIBLE
     ========================================================== */
  html body .bottom-nav > [data-nav]{
    position:relative!important;

    /*
     * Todos parten de la misma base.
     * El activo sólo aumenta flex-grow.
     * Así nunca queda el espacio muerto al final del menú.
     */
    flex:1 1 0!important;

    width:auto!important;
    min-width:0!important;
    max-width:none!important;

    height:53px!important;
    min-height:53px!important;

    padding:0!important;
    margin:0!important;

    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;

    align-items:center!important;
    justify-content:center!important;

    gap:0!important;

    border:0!important;
    border-radius:999px!important;

    background:transparent!important;
    background-color:transparent!important;
    background-image:none!important;

    color:#052F5E!important;

    overflow:hidden!important;

    /*
     * No transformamos el botón ni el SVG.
     * La animación ocurre únicamente en el reparto de espacio
     * y en la aparición del título.
     */
    transform:none!important;

    transition:
      flex-grow .38s cubic-bezier(.22,1,.36,1),
      background-color .24s ease,
      color .24s ease!important;

    -webkit-tap-highlight-color:transparent!important;
  }

  /* Neutraliza placas activas antiguas. */
  html body .bottom-nav > [data-nav]::before,
  html body .bottom-nav > [data-nav]::after,
  html body .bottom-nav > [data-nav].is-active::before,
  html body .bottom-nav > [data-nav].is-active::after,
  html body .bottom-nav > [data-nav][aria-current="page"]::before,
  html body .bottom-nav > [data-nav][aria-current="page"]::after{
    content:none!important;
    display:none!important;
  }

  /* ==========================================================
     3. ICONOS — MISMA ALTURA Y MISMO CENTRO SIEMPRE
     ========================================================== */
  html body .bottom-nav > [data-nav] > svg,
  html body .bottom-nav > [data-nav] > .pet-nav-paw{
    display:block!important;

    flex:0 0 22px!important;

    width:22px!important;
    height:22px!important;

    min-width:22px!important;
    min-height:22px!important;
    max-width:22px!important;
    max-height:22px!important;

    margin:0!important;
    padding:0!important;

    align-self:center!important;

    color:currentColor!important;

    transform:none!important;
    translate:none!important;
    scale:none!important;

    transition:color .22s ease!important;
  }

  /* Outline inactivo. */
  html body .bottom-nav > [data-nav]:not(.is-active):not([aria-current="page"])
  > svg:not(.pet-nav-paw),
  html body .bottom-nav > [data-nav]:not(.is-active):not([aria-current="page"])
  > svg:not(.pet-nav-paw) *{
    color:#052F5E!important;
    stroke:#052F5E!important;
  }

  /* Outline no se rellena. */
  html body .bottom-nav > [data-nav] > svg:not(.pet-nav-paw),
  html body .bottom-nav > [data-nav] > svg:not(.pet-nav-paw) path,
  html body .bottom-nav > [data-nav] > svg:not(.pet-nav-paw) circle,
  html body .bottom-nav > [data-nav] > svg:not(.pet-nav-paw) ellipse,
  html body .bottom-nav > [data-nav] > svg:not(.pet-nav-paw) rect,
  html body .bottom-nav > [data-nav] > svg:not(.pet-nav-paw) polygon{
    fill:none!important;
  }

  /* Huella inactiva: SVG de relleno. */
  html body .bottom-nav > [data-nav="mascotas"]:not(.is-active):not([aria-current="page"])
  > .pet-nav-paw,
  html body .bottom-nav > [data-nav="mascotas"]:not(.is-active):not([aria-current="page"])
  > .pet-nav-paw *{
    color:#052F5E!important;
    fill:#052F5E!important;
    stroke:none!important;
  }

  /* ==========================================================
     4. TEXTO INACTIVO = 0 ESPACIO
     ========================================================== */
  html body .bottom-nav > [data-nav] > span{
    display:block!important;
    position:static!important;

    flex:0 0 auto!important;

    width:auto!important;
    min-width:0!important;
    max-width:0!important;

    height:auto!important;

    margin:0!important;
    padding:0!important;

    overflow:hidden!important;

    white-space:nowrap!important;
    text-overflow:clip!important;

    color:currentColor!important;

    font-size:14px!important;
    font-weight:400!important;
    line-height:1!important;
    letter-spacing:0!important;

    opacity:0!important;
    transform:translateX(5px)!important;

    pointer-events:none!important;

    transition:
      max-width .34s cubic-bezier(.22,1,.36,1),
      opacity .16s ease,
      transform .34s cubic-bezier(.22,1,.36,1)!important;
  }

  /* ==========================================================
     5. ACTIVO
     ========================================================== */
  html body .bottom-nav > [data-nav].is-active,
  html body .bottom-nav > [data-nav][aria-current="page"]{
    /*
     * 5 inactivos = 1 unidad cada uno
     * activo = 2.25 unidades.
     *
     * Esto da espacio al texto sin dejar el hueco enorme que
     * generaba width:max-content.
     */
    flex-grow:2.25!important;
    flex-basis:0!important;

    gap:8px!important;

    padding:0 10px!important;

    align-items:center!important;
    justify-content:center!important;

    background:#C4F5B4!important;
    background-color:#C4F5B4!important;
    background-image:none!important;

    color:#008C4F!important;

    border-radius:999px!important;

    transform:none!important;
  }

  html body .bottom-nav > [data-nav].is-active > svg,
  html body .bottom-nav > [data-nav].is-active > .pet-nav-paw,
  html body .bottom-nav > [data-nav][aria-current="page"] > svg,
  html body .bottom-nav > [data-nav][aria-current="page"] > .pet-nav-paw{
    color:#008C4F!important;
    transform:none!important;
    translate:none!important;
    scale:none!important;
  }

  /* Outline activo verde. */
  html body .bottom-nav > [data-nav].is-active > svg:not(.pet-nav-paw),
  html body .bottom-nav > [data-nav][aria-current="page"] > svg:not(.pet-nav-paw),
  html body .bottom-nav > [data-nav].is-active > svg:not(.pet-nav-paw) *,
  html body .bottom-nav > [data-nav][aria-current="page"] > svg:not(.pet-nav-paw) *{
    color:#008C4F!important;
    stroke:#008C4F!important;
  }

  /* Huella activa verde. */
  html body .bottom-nav > [data-nav="mascotas"].is-active > .pet-nav-paw,
  html body .bottom-nav > [data-nav="mascotas"].is-active > .pet-nav-paw *,
  html body .bottom-nav > [data-nav="mascotas"][aria-current="page"] > .pet-nav-paw,
  html body .bottom-nav > [data-nav="mascotas"][aria-current="page"] > .pet-nav-paw *{
    color:#008C4F!important;
    fill:#008C4F!important;
    stroke:none!important;
  }

  /* Texto activo a la derecha del icono. */
  html body .bottom-nav > [data-nav].is-active > span,
  html body .bottom-nav > [data-nav][aria-current="page"] > span{
    flex:0 1 auto!important;

    width:auto!important;
    min-width:0!important;
    max-width:84px!important;

    margin:0!important;
    padding:0!important;

    color:#008C4F!important;

    font-size:14px!important;
    font-weight:400!important;
    line-height:1!important;

    opacity:1!important;
    transform:none!important;

    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }

  /* ==========================================================
     6. iPHONE / MÓVILES ESTRECHOS
     ========================================================== */
  @media (max-width:360px){

    html body .bottom-nav{
      gap:1px!important;
      padding:5px!important;
    }

    html body .bottom-nav > [data-nav].is-active,
    html body .bottom-nav > [data-nav][aria-current="page"]{
      flex-grow:2.65!important;
      gap:6px!important;
      padding:0 7px!important;
    }

    html body .bottom-nav > [data-nav] > svg,
    html body .bottom-nav > [data-nav] > .pet-nav-paw{
      flex-basis:21px!important;
      width:21px!important;
      height:21px!important;
      min-width:21px!important;
      min-height:21px!important;
      max-width:21px!important;
      max-height:21px!important;
    }

    html body .bottom-nav > [data-nav].is-active > span,
    html body .bottom-nav > [data-nav][aria-current="page"] > span{
      max-width:72px!important;
      font-size:12px!important;
      font-weight:400!important;
    }
  }

  /* ==========================================================
     7. ACCESIBILIDAD
     ========================================================== */
  @media (prefers-reduced-motion:reduce){
    html body .bottom-nav > [data-nav],
    html body .bottom-nav > [data-nav] > svg,
    html body .bottom-nav > [data-nav] > .pet-nav-paw,
    html body .bottom-nav > [data-nav] > span{
      transition:none!important;
    }
  }
}