/* ============================================================
   NutriClub — Botón de navegación principal
   CMP · Mayo 2026
   ============================================================ */

/* ---- Botón base (compartido desktop + mobile) ------------- */
.nutriclub-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1a3005;
    color: #ffffff;
    text-decoration: none;
    border-radius: 20px;
    padding: 6px 14px 6px 9px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.15s ease;
    border: 2px solid transparent;
}

.nutriclub-nav-btn:hover {
    background: #2a4d09;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
}

.nutriclub-nav-btn:active {
    transform: translateY(0);
}

.nutriclub-nav-btn .nutriclub-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(200, 240, 106, 0.2);
    border-radius: 50%;
    flex-shrink: 0;
}

.nutriclub-nav-btn .nutriclub-icon svg {
    width: 12px;
    height: 12px;
    stroke: #c8f06a;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Desktop: el botón del header ------------------------
   Estas reglas colgaban de `.header-page-link`, un wrapper que emite la PLANTILLA DEL TEMA
   Petio. Este proyecto cambia de tema: el día del switch ese wrapper deja de existir, la
   regla deja de aplicar y el fallo NO da error ni test rojo — solo se ve mal. Por eso ahora
   cuelgan de `.nutriclub-wrapper`, que lo emite na-core y viaja con el plugin.

   OJO con el ámbito: NO se puede usar `.nutriclub-nav-btn` a secas. Esa clase la llevan DOS
   botones, el de escritorio y el de la sub-barra móvil, y el móvil tiene su propio tamaño
   (11px / 4px 10px 4px 7px). Sin acotar al wrapper, el tamaño de escritorio se filtraría al
   móvil. */
.nutriclub-wrapper .nutriclub-nav-btn {
    font-size: 12px;
    padding: 5px 12px 5px 8px;
}

/* Separador visual antes del botón.

   La clase va DUPLICADA a propósito: `.nutriclub-wrapper.nutriclub-wrapper` es el mismo
   elemento que `.nutriclub-wrapper`, pero mantiene la especificidad (0,2,0) que tenía el
   selector original `.header-page-link .nutriclub-wrapper`. Sin duplicar bajaría a (0,1,0) y
   cualquier regla del tema con dos clases pasaría a ganarle, cambiando el render. No lo
   "simplifiques" a una sola clase sin volver a medir el estilo computado. */
.nutriclub-wrapper.nutriclub-wrapper {
    display: flex;
    align-items: center;
    padding-left: 10px;
    margin-left: 4px;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

/* ---- Sub-barra mobile ------------------------------------ */
.nutriclub-mobile-bar {
    display: none; /* oculto en desktop */
    background: #6e940f;
    padding: 5px 16px;
    align-items: center;
    justify-content: center;
}

.nutriclub-mobile-bar .nutriclub-nav-btn {
    font-size: 12px;
    padding: 5px 14px 5px 8px;
}

/* ---- Dentro del menú móvil (drawer) ---------------------- */
.menu-mobile-nutriclub {
    margin: 16px 0 8px;
    display: block;
}

.menu-mobile-nutriclub a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #1a3005;
    border-radius: 10px;
    text-decoration: none;
}

.menu-mobile-nutriclub a:hover {
    background: #2a4d09;
    text-decoration: none;
}

.menu-mobile-nutriclub .nc-label {
    display: flex;
    flex-direction: column;
}

.menu-mobile-nutriclub .nc-label .nc-sub {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.65);
    display: block;
    line-height: 1.2;
}

.menu-mobile-nutriclub .nc-label .nc-main {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
}

.menu-mobile-nutriclub .nutriclub-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(200, 240, 106, 0.15);
    border-radius: 50%;
    flex-shrink: 0;
}

.menu-mobile-nutriclub .nutriclub-icon svg {
    width: 14px;
    height: 14px;
    stroke: #c8f06a;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

/* Tablet / móvil: ocultar botón desktop, mostrar sub-barra */
@media (max-width: 991px) {
    /* LA REGLA MAS IMPORTANTE DEL FICHERO: es la que evita que en móvil se vean A LA VEZ el
       botón de escritorio y la sub-barra. Colgaba de `.header-page-link` (wrapper del tema
       Petio): al activar VamTam habría dejado de aplicar y el botón habría aparecido
       duplicado en móvil, sin ningún error que lo delatara.
       Clase duplicada para conservar la especificidad (0,2,0) del selector original. */
    .nutriclub-wrapper.nutriclub-wrapper {
        display: none;
    }

    .nutriclub-mobile-bar {
        display: flex;
    }
}

/* Móvil pequeño: reducir padding de la sub-barra */
@media (max-width: 480px) {
    .nutriclub-mobile-bar .nutriclub-nav-btn {
        font-size: 11px;
        padding: 4px 10px 4px 7px;
    }
}

/* Ocultar sub-barra en la página de registro para evitar redundancia.

   OJO: el selector original era `body.page-id-registro-miembros`, que NUNCA existió.
   WordPress emite `page-id-<ID numérico>`, no el slug: la regla llevaba muerta desde
   que se escribió (verificado en dev, donde .nutriclub-wrapper y .nutriclub-mobile-bar
   seguían presentes en /registro-miembros/). El ID real de la página es 52357.
   (mismo ID en produccion y en dev). */
body.page-id-52357 .nutriclub-mobile-bar,
body.page-id-52357 .nutriclub-wrapper {
    display: none !important;
}

@media (max-width: 991px) {
    .nutriclub-mobile-bar {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Espejo invisible a la izquierda = mismo ancho que el ícono.
       Compensa el ícono de la derecha → el botón queda centrado de verdad. */
    .nutriclub-mobile-bar::before {
        content: "";
        flex: 0 0 auto;
        width: 60px;          /* = width del ícono (abajo) */
        margin-right: 8px;    /* = margin-left del ícono */
    }

    .nutriclub-mobile-bar .nutriclub-mobile-icon {
        flex: 0 0 auto;
        width: 60px;          /* fija el ancho para que el espejo lo iguale */
        margin-left: 8px;     /* separación con el botón; baja a 4px para más pegado */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .nutriclub-mobile-bar .nutriclub-mobile-icon img.logo-pets {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* Evitar duplicado del ícono del header en mobile */
    .header-custom-image { display: none; }
}
/* ============================================================
   POSICIONAMIENTO DEL ICONO DE ESPECIES
   ============================================================

   Estas 3 reglas vivian en el CSS adicional del Personalizador (post 52585, custom_css del
   tema petio-child) con el selector `.bwp-header .header-custom-image`. Dos problemas:

   1. `.bwp-header` lo emite la PLANTILLA de Petio. El dia del switch a VamTam desaparece, la
      regla deja de aplicar y el icono queda descolocado. Sin error, sin test rojo.
   2. Vivian en la BASE DE DATOS, invisibles en el repo: nadie que leyera el codigo sabia que
      existian.

   Ahora cuelgan de `.header-custom-image`, que lo emite na-core (NA_Header::custom_image()),
   y viajan con el plugin. La clase va DUPLICADA para conservar la especificidad (0,2,0) del
   selector original: sin duplicar bajaria a (0,1,0) y reglas del tema con dos clases pasarian
   a ganarle. No lo "simplifiques" a una sola clase sin volver a medir el estilo computado.

   ⚠ AVISO PARA EL DIA DEL SWITCH: `position:absolute` se resuelve contra el ancestro
   posicionado mas cercano. Hoy lo aporta el header de Petio. Si el header de VamTam no tiene
   `position:relative`, el icono se posicionara respecto a otro ancestro y aparecera en otro
   sitio — aunque estas reglas si apliquen. Hay que comprobarlo en la maquetacion, no darlo
   por hecho.

   Los valores son los del Personalizador, byte a byte. Por debajo de 991px el elemento ya
   esta en `display:none` (mas arriba en este fichero), asi que las dos ultimas reglas no se
   ven hoy; se conservan para no alterar el estilo computado y por si ese ocultado cambia. */

.header-custom-image.header-custom-image {
    position: absolute;
    bottom: 0px;
    right: 50px;
    max-width: 8%;
    width: 100%;
    height: auto;
}

@media (max-width: 990px) {
    .header-custom-image.header-custom-image {
        position: absolute;
        bottom: 38px;
        right: 80px;
        max-width: 14%;
        width: 100%;
        height: auto;
    }
}

@media (max-width: 480px) {
    .header-custom-image.header-custom-image {
        position: absolute;
        bottom: 38px;
        right: 45px;
        max-width: 20%;
        width: 100%;
        height: auto;
    }
}