/* ==========================================================================
   HADA NAV v2 — fila de búsqueda (v9.34.0), arriba y solo en escritorio
   --------------------------------------------------------------------------
   Categorías · buscador ancho · carrito · avisos · cuenta.
   La fila de abajo queda limpia: logo, enlaces y PROMOCIONES.

   Por qué dos filas: los clientes buscan por referencia (casi la mitad de los
   chats empiezan con un modelo o SKU), así que el buscador necesita ancho y
   estar siempre a mano. Al bajar se esconde la fila del logo, no esta.

   Marcado: template-parts/navbar.php · Tokens: hada-nav-tokens.css
   ========================================================================== */

/* Texto solo para lectores de pantalla */
.hada-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   1. La fila
   -------------------------------------------------------------------------- */
.hada-row--sub {
    position: relative;
    /* Por encima de la fila del logo, que se desliza debajo al plegarse. */
    z-index: 2;
    /* Categorías | buscador | cuenta. Los laterales crecen por igual, así el
       buscador (hasta 680 px) queda centrado en la pantalla; nunca bajan de
       lo que miden sus botones. */
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) minmax(0, 680px) minmax(max-content, 1fr);
    height: var(--hada-sub-h);
    /* v9.41.0: 15 px de aire sobre los controles en escritorio. La fila mide
       60 (--hada-sub-h) con 8 px arriba: 8 + (52 − 38) / 2 = 15. Así la
       sombra de los controles tampoco queda pegada al borde de la ventana. */
    padding-top: 8px;
    column-gap: 24px;
    background: var(--hada-sub-bg);
    box-shadow: inset 0 -1px 0 var(--hada-line);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    transition: background-color var(--hada-dur-fast) ease;
}

.hada-row--sub > .hada-cats-btn {
    grid-column: 1;
    justify-self: start;
}

.hada-row--sub > .hada-find {
    grid-column: 2;
}

.hada-actions--sub {
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
}

/* Iconos (carrito, avisos) y botón de usuario de esta fila: la misma sombra
   suave que categorías y buscador (v9.41.0). Solo esta fila: en la del logo
   y en móvil no cambian. */
.hada-actions--sub .hada-icon-btn,
.hada-actions--sub .hada-user-btn {
    box-shadow: var(--hada-control-shadow);
}

/* --------------------------------------------------------------------------
   2. Botón Categorías
   -------------------------------------------------------------------------- */
.hada-cats-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    height: 38px;
    margin: 0;
    padding: 0 16px 0 14px;
    border: 0;
    border-radius: var(--hada-radius-pill);
    background: var(--hada-chip);
    box-shadow: var(--hada-control-shadow);
    color: var(--hada-fg);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--hada-dur-fast) ease;
}

.hada-cats-btn:hover,
.hada-cats-btn[aria-expanded="true"] {
    background: var(--hada-chip-hover);
}

.hada-cats-btn__icon,
.hada-cats-btn__chev {
    display: inline-grid;
    color: var(--hada-fg-muted);
}

.hada-cats-btn__icon svg {
    width: 16px;
    height: 16px;
}

.hada-cats-btn__chev svg {
    width: 14px;
    height: 14px;
}

.hada-cats-btn__chev {
    transition: transform var(--hada-dur) var(--hada-ease);
}

.hada-cats-btn[aria-expanded="true"] .hada-cats-btn__chev {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   3. Buscador
   -------------------------------------------------------------------------- */
.hada-find {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: 38px;
    margin: 0;
    border-radius: var(--hada-radius-pill);
    background: var(--hada-field-bg);
    box-shadow: inset 0 0 0 1px var(--hada-line), var(--hada-control-shadow);
    transition: box-shadow var(--hada-dur-fast) ease;
}

.hada-find:hover {
    box-shadow: inset 0 0 0 1px var(--hada-field-ring), var(--hada-control-shadow);
}

/* El anillo de foco lo da el formulario completo, no el input. */
/* v9.43.2: el anillo anterior (1px dentro + halo al 12 %) era casi invisible
   para quien navega con teclado. Ahora son 2px con el color de texto. */
.hada-find:focus-within {
    box-shadow:
        inset 0 0 0 2px var(--hada-fg),
        0 0 0 3px var(--hada-chip),
        var(--hada-control-shadow);
}

.hada-find__icon {
    position: absolute;
    left: 15px;
    display: inline-grid;
    color: var(--hada-fg-muted);
    pointer-events: none;
}

.hada-find__icon svg {
    width: 16px;
    height: 16px;
}

.hada-find__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 10px 0 41px;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--hada-fg);
    font: inherit;
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
}

.hada-find__input::placeholder {
    color: var(--hada-fg-muted);
    opacity: 1;
}

.hada-bar .hada-find__input:focus,
.hada-bar .hada-find__input:focus-visible {
    outline: none;
}

.hada-find__input::-webkit-search-decoration,
.hada-find__input::-webkit-search-results-button {
    -webkit-appearance: none;
}

/* Pista del atajo de teclado; desaparece al escribir. */
.hada-find__kbd {
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    margin-right: 6px;
    padding: 0 6px;
    border-radius: var(--hada-radius-pill);
    box-shadow: inset 0 0 0 1px var(--hada-field-ring);
    color: var(--hada-fg-muted);
    font: 500 11px/20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-align: center;
}

.hada-find:focus-within .hada-find__kbd {
    display: none;
}

.hada-find__go {
    flex: 0 0 auto;
    height: 30px;
    margin: 0 4px 0 0;
    padding: 0 16px;
    border: 0;
    border-radius: var(--hada-radius-pill);
    background: var(--hada-fg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    color: var(--hada-surface);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: opacity var(--hada-dur-fast) ease, transform var(--hada-dur-fast) ease;
}

.hada-find__go:hover {
    opacity: 0.88;
}

.hada-find__go:active {
    transform: scale(0.97);
}

/* --------------------------------------------------------------------------
   4. Puntos de corte
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    /* Buscador más corto: así los laterales siguen siendo iguales y el
       buscador no se descentra a 1024 px. */
    .hada-row--sub {
        grid-template-columns: minmax(max-content, 1fr) minmax(0, 560px) minmax(max-content, 1fr);
    }

    .hada-find__kbd {
        display: none;
    }
}

@media (max-width: 900px) {
    .hada-row--sub {
        column-gap: 12px;
    }

    .hada-find__go {
        padding: 0 10px;
    }
}

/* Móvil: esta fila no existe. hada-nav.css la oculta con .hada-only-wide, pero
   el display: grid de arriba carga después y ganaría. */
@media (max-width: 768px) {
    .hada-row--sub {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   5. Cabecera con un desplegable abierto (escritorio)
   Translúcida al hacer scroll está bien, pero con Categorías o Cuenta abiertos
   se veía la página a través y el panel parecía flotar. hada-nav.js pone
   .has-panel: las dos filas toman la superficie del panel, sin desenfoque.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
    .hada-bar.has-panel::before {
        opacity: 0;
    }

    .hada-bar.has-panel .hada-row--sub,
    .hada-bar.has-panel .hada-row--main::before {
        background: var(--hada-surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* Cuatro clases: gana a la regla de la portada, que deja transparente la
       fila del logo mientras no hay scroll. */
    .hada-bar.has-panel .hada-row.hada-row--main::before {
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------
   6. Movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hada-row--sub,
    .hada-cats-btn,
    .hada-cats-btn__chev,
    .hada-find,
    .hada-find__go {
        transition: none;
    }

    .hada-find__go:active {
        transform: none;
    }
}