/* ==========================================================================
   HADA NAV v2 — barra superior (v9.34.0)
   Barra, enlaces, controles, avatar, insignias de nivel y hamburguesa.
   Tokens: hada-nav-tokens.css · Paneles: hada-nav-panels.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   3. Utilidades comunes
   -------------------------------------------------------------------------- */
:where(.hada-bar, .hada-acct, .hada-drawer) [hidden],
.hada-acct[hidden],
.hada-drawer[hidden] {
    display: none !important;
}

:where(.hada-bar, .hada-acct, .hada-drawer) :focus-visible {
    outline: 2px solid var(--hada-fg);
    outline-offset: 2px;
}

body.hada-locked {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   4. Barra
   -------------------------------------------------------------------------- */
.hada-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    height: var(--hada-header-h);
    padding: 0;
    /* La cabecera no captura clics, solo sus filas: con la fila del logo
       plegada, el hueco que deja no tapa el contenido de la página. */
    pointer-events: none;
    color: var(--hada-fg);
    background: transparent;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    transform: translateY(0);
    transition: transform var(--hada-dur) var(--hada-ease);
}

/* Degradado en reposo: da legibilidad sobre fotos sin tapar el hero. */
.hada-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    height: calc(var(--hada-header-h) + 28px);
    background: var(--hada-bar-fade);
    opacity: calc(1 - var(--hada-bar-rest));
    pointer-events: none;
    transition: opacity var(--hada-dur) ease;
}

.hada-bar.is-scrolled::before {
    opacity: 0;
}

.hada-bar.is-hidden {
    transform: translateY(-100%);
}

/* Filas de la cabecera. Cada una lleva su propio fondo para poder plegarse
   por separado. */
.hada-row {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 32px;
    padding: 0 var(--hada-pad-x);
    pointer-events: auto;
}

/* Fila del logo y los enlaces: abajo en escritorio, única en móvil. */
.hada-row--main {
    z-index: 1;
    height: var(--hada-bar-h);
    transition:
        transform var(--hada-dur) var(--hada-ease),
        opacity var(--hada-dur-fast) ease,
        visibility 0s linear 0s;
}

/* Capa sólida con desenfoque: aparece al hacer scroll (siempre en modo claro). */
.hada-row--main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--hada-bar-solid);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    box-shadow: inset 0 -1px 0 var(--hada-line);
    opacity: var(--hada-bar-rest);
    pointer-events: none;
    transition: opacity var(--hada-dur) ease;
}

.hada-bar.is-scrolled .hada-row--main::before {
    opacity: 1;
}

/* Escritorio: al bajar, la fila del logo se desliza bajo la de búsqueda y
   desaparece. Buscador, carrito y cuenta siguen a mano. Móvil usa .is-hidden.
   visibility con retardo: sus enlaces dejan de ser enfocables al terminar. */
.hada-bar.is-collapsed .hada-row--main {
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        transform var(--hada-dur) var(--hada-ease),
        opacity var(--hada-dur-fast) ease,
        visibility 0s linear var(--hada-dur);
}

/* Espaciador en el flujo: empuja la página la altura de la segunda fila.
   Las plantillas ya reservaban el alto de la primera (60-100 px), así que
   conservan exactamente la holgura que tenían. */
.hada-bar-spacer {
    display: none;
}

@media (min-width: 769px) {
    .hada-bar-spacer {
        display: block;
        height: var(--hada-sub-h);
    }

    .hada-only-mobile {
        display: none !important;
    }
}

/* Logo */
.hada-logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 100%;
    text-decoration: none;
}

.hada-logo img {
    display: block;
    width: auto;
    height: 30px;
    max-width: var(--hik-logo-width, 150px);
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   5. Enlaces principales
   -------------------------------------------------------------------------- */
.hada-nav {
    display: flex;
    align-items: center;
    min-width: 0;
}

.hada-links {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hada-link {
    position: relative;
    display: inline-block;
    padding: 8px 0;
    color: var(--hada-fg);
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.005em;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0.8;
    transition: opacity var(--hada-dur-fast) ease;
}

/* El menú se escribe desde el admin ("alarmas"): la primera letra sale en
   mayúscula sin obligar a nadie a corregirlo. */
.hada-link::first-letter {
    text-transform: uppercase;
}

.hada-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--hada-dur) var(--hada-ease);
}

.hada-link:hover,
.hada-link:focus-visible,
.hada-link[aria-current="page"] {
    color: var(--hada-fg);
    opacity: 1;
}

.hada-link:hover::after,
.hada-link[aria-current="page"]::after {
    transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   6. Controles de la derecha
   -------------------------------------------------------------------------- */
.hada-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.hada-icon-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--hada-chip);
    color: var(--hada-fg-muted);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color var(--hada-dur-fast) ease,
        color var(--hada-dur-fast) ease,
        transform var(--hada-dur-fast) ease;
}

.hada-icon-btn svg {
    width: 18px;
    height: 18px;
}

.hada-icon-btn:hover {
    background: var(--hada-chip-hover);
    color: var(--hada-fg);
}

.hada-icon-btn:active {
    transform: scale(0.94);
}

/* Contador del carrito y punto de notificaciones.
   El plugin los muestra quitando style="display:none" (hikCart.updateUI). */
.hada-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--hada-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--hada-ring);
}

.hada-dot {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hada-accent);
    box-shadow: 0 0 0 2px var(--hada-ring);
}

.hada-badge--inline,
.hada-dot--inline {
    position: static;
    display: inline-block;
    margin-left: auto;
    box-shadow: none;
}

/* Botón de acción (PROMOCIONES). Rojo Fenix como único acento de la barra. */
.hada-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    height: 36px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--hada-radius-pill);
    background: var(--hada-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition:
        background-color var(--hada-dur-fast) ease,
        transform var(--hada-dur-fast) ease;
}

.hada-cta svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.hada-cta:hover {
    background: var(--hada-accent-hover);
    color: #fff;
}

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

.hada-cta--white {
    background: var(--hada-fg);
    color: var(--hada-surface);
}

.hada-cta--white:hover {
    background: var(--hada-fg-muted);
    color: var(--hada-surface);
}

.hada-cta--outline {
    border-color: var(--hada-chip-hover);
    background: transparent;
    color: var(--hada-fg);
}

.hada-cta--outline:hover,
.hada-cta--ghost:hover {
    background: var(--hada-chip-hover);
    color: var(--hada-fg);
}

.hada-cta--ghost {
    background: var(--hada-chip);
    color: var(--hada-fg);
}

.hada-cta--whatsapp {
    background: #25d366;
    color: #052e14;
}

.hada-cta--whatsapp:hover {
    background: #1fb957;
    color: #052e14;
}

.hada-cta--block {
    display: flex;
    width: 100%;
    height: 48px;
    font-size: 14px;
}

/* Interruptor de modo para visitantes (con sesión vive en el panel). */
.hada-theme-inline {
    display: inline-flex;
    align-items: center;
}

/* --------------------------------------------------------------------------
   7. Usuario: botón, avatar y acceso
   -------------------------------------------------------------------------- */
.hada-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    height: 36px;
    max-width: 240px;
    margin: 0;
    padding: 0 12px 0 3px;
    border: 0;
    border-radius: 999px;
    background: var(--hada-chip);
    color: var(--hada-fg);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--hada-dur-fast) ease;
}

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

.hada-user-btn__name {
    overflow: hidden;
    max-width: 140px;
    font-size: 14px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hada-user-btn__chev {
    display: inline-grid;
    color: var(--hada-fg-muted);
    transition: transform var(--hada-dur) var(--hada-ease);
}

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

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

/* Avatar con iniciales. El anillo toma el color del nivel. */
.hada-avatar {
    --hada-tier-color: var(--hada-tier-public);
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--hada-avatar-bg);
    box-shadow: 0 0 0 1.5px var(--hada-tier-color);
    color: var(--hada-fg);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
}

.hada-avatar--md {
    width: 42px;
    height: 42px;
    font-size: 14px;
    box-shadow: 0 0 0 2px var(--hada-tier-color);
}

.hada-avatar--lg {
    width: 52px;
    height: 52px;
    font-size: 17px;
    box-shadow: 0 0 0 2px var(--hada-tier-color);
}

.hada-avatar[data-tier="installer"]     { --hada-tier-color: var(--hada-tier-installer); }
.hada-avatar[data-tier="silver-vasp"]   { --hada-tier-color: var(--hada-tier-silver); }
.hada-avatar[data-tier="gold-vasp"],
.hada-avatar[data-tier="gold-dpp"]      { --hada-tier-color: var(--hada-tier-gold); }
.hada-avatar[data-tier="platinum-vasp"],
.hada-avatar[data-tier="platinum-dpp"]  { --hada-tier-color: var(--hada-tier-platinum); }
.hada-avatar[data-tier="diamond-vasp"]  { --hada-tier-color: var(--hada-tier-diamond); }
.hada-avatar[data-tier="pending"]       { --hada-tier-color: var(--hada-tier-pending); }
.hada-avatar[data-tier="staff"]         { --hada-tier-color: var(--hada-tier-staff); }

.hada-avatar__dot {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--hada-accent);
    box-shadow: 0 0 0 2px var(--hada-ring);
}

/* Visitante: píldora con icono redondo, como el acceso de Starlink. */
.hada-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    height: 36px;
    padding: 0 14px 0 3px;
    border-radius: 999px;
    background: var(--hada-chip);
    color: var(--hada-fg);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--hada-dur-fast) ease;
}

.hada-login:hover {
    background: var(--hada-chip-hover);
    color: var(--hada-fg);
}

.hada-login__icon {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--hada-chip);
}

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

/* --------------------------------------------------------------------------
   8. Insignia de nivel (la emite Fenix_Roles::get_tier_badge_html)
   :where() deja la especificidad en cero: las reglas existentes de
   "Pendiente" y "Rep" (productos-style.css, con !important) siguen mandando.
   -------------------------------------------------------------------------- */
:where(.fenix-tier-badge) {
    --hada-chip-color: var(--hada-tier-public);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid color-mix(in srgb, var(--hada-chip-color) 32%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--hada-chip-color) 12%, transparent);
    color: var(--hada-chip-color);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}

/* El relleno va aparte y CON especificidad a propósito: el tema encola su
   style.css DESPUÉS de esta hoja y allí vive `*, ::before, ::after
   { padding: 0 }`. Como :where() no suma especificidad, ese reset ganaba por
   orden de carga y la insignia salía pegada al texto en el panel de usuario
   y en el menú móvil. (v9.39.0) */
.fenix-tier-badge {
    height: auto;
    min-height: 24px;
    padding: 5px 11px;
}

:where(.fenix-tier-badge)::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

:where(.fenix-tier-installer)                          { --hada-chip-color: var(--hada-tier-installer); }
:where(.fenix-tier-silver-vasp)                        { --hada-chip-color: var(--hada-tier-silver); }
:where(.fenix-tier-gold-vasp, .fenix-tier-gold-dpp)    { --hada-chip-color: var(--hada-tier-gold); }
:where(.fenix-tier-platinum-vasp, .fenix-tier-platinum-dpp) { --hada-chip-color: var(--hada-tier-platinum); }
:where(.fenix-tier-diamond-vasp)                       { --hada-chip-color: var(--hada-tier-diamond); }
:where(.fenix-tier-msrp)                               { --hada-chip-color: var(--hada-tier-public); }

/* Navegadores sin color-mix(): chip neutro legible. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    :where(.fenix-tier-badge) {
        border-color: var(--hada-line);
        background: var(--hada-chip);
    }
}

/* Insignias heredadas "Pendiente", "Rep." y "Rep. Soporte".
   productos-style.css les da colores con !important pensados para fondo oscuro:
   en el panel claro quedaban por debajo de 4,5:1 (ámbar ≈ 2,7:1, azul ≈ 2,5:1).
   Solo DENTRO del menú se alinean con los tokens; el sidebar de Mi Cuenta no
   cambia. :is(html, .hikvision-parking-page) sube la especificidad a (0,3,0)
   para empatar con `.hikvision-parking-page[data-color-mode="light"]
   .fenix-tier-pending` y ganar por orden de carga. */
:is(html, .hikvision-parking-page) :is(.hada-acct, .hada-drawer) .fenix-tier-pending {
    border-color: color-mix(in srgb, var(--hada-tier-pending) 32%, transparent) !important;
    background: color-mix(in srgb, var(--hada-tier-pending) 12%, transparent) !important;
    color: var(--hada-tier-pending) !important;
}

:is(html, .hikvision-parking-page) :is(.hada-acct, .hada-drawer) :is(.fenix-tier-rep, .fenix-tier-support-rep) {
    border-color: color-mix(in srgb, var(--hada-tier-staff) 32%, transparent) !important;
    background: color-mix(in srgb, var(--hada-tier-staff) 12%, transparent) !important;
    color: var(--hada-tier-staff) !important;
}

/* --------------------------------------------------------------------------
   9. Hamburguesa (solo móvil)
   -------------------------------------------------------------------------- */
.hada-burger {
    display: none;
}

.hada-burger__lines {
    position: relative;
    display: block;
    width: 16px;
    height: 10px;
}

.hada-burger__lines span {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    transition: transform var(--hada-dur) var(--hada-ease);
}

.hada-burger__lines span:first-child {
    top: 0;
}

.hada-burger__lines span:last-child {
    bottom: 0;
}

.hada-burger.is-open .hada-burger__lines span:first-child {
    transform: translateY(4.25px) rotate(45deg);
}

.hada-burger.is-open .hada-burger__lines span:last-child {
    transform: translateY(-4.25px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   12. Puntos de corte
   -------------------------------------------------------------------------- */

/* Escritorio estrecho: el botón de usuario queda solo en avatar. */
@media (max-width: 1180px) {
    .hada-row--main {
        gap: 24px;
    }

    .hada-links {
        gap: 22px;
    }

    .hada-user-btn {
        padding-right: 10px;
    }

    .hada-user-btn__name,
    .hada-login__text {
        display: none;
    }

    .hada-login {
        padding: 0 3px;
    }
}

/* Móvil */
@media (max-width: 768px) {
    /* Una sola barra. El relleno lateral va en la fila, no en la cabecera,
       para que su fondo llegue al borde. `html .hada-bar` gana a app-shell.css
       del tema, que también fija relleno aquí; el área segura va en la fila. */
    html .hada-bar {
        padding: 0;
    }

    .hada-row {
        gap: 12px;
        padding: 0 max(var(--hada-pad-x), env(safe-area-inset-right, 0px)) 0 max(var(--hada-pad-x), env(safe-area-inset-left, 0px));
    }

    .hada-nav,
    .hada-only-wide {
        display: none;
    }

    .hada-logo img {
        height: 28px;
    }

    .hada-actions {
        gap: 6px;
    }

    /* 40 px: objetivo táctil cómodo sin engordar la barra. */
    .hada-icon-btn,
    .hada-burger {
        width: 40px;
        height: 40px;
    }

    .hada-burger {
        display: inline-grid;
        color: var(--hada-fg);
    }

    .hada-user-btn,
    .hada-login {
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
    }

    .hada-user-btn__chev {
        display: none;
    }

    .hada-user-btn .hada-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .hada-login__icon {
        background: transparent;
    }
}

/* --------------------------------------------------------------------------
   12b. Portada B2B: la barra flota transparente sobre el hero
   El hero de la Home ya da contraste en ambos modos, así que en reposo no hace
   falta la capa sólida ni en modo claro. Al hacer scroll aparece como siempre.
   -------------------------------------------------------------------------- */
.fenix-home-b2b-page .hada-bar:not(.is-scrolled) .hada-row--main::before {
    opacity: 0;
}

/* --------------------------------------------------------------------------
   13. Movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hada-bar,
    .hada-bar::before,
    .hada-row--main,
    .hada-row--main::before,
    .hada-link::after,
    .hada-icon-btn,
    .hada-cta,
    .hada-user-btn__chev,
    .hada-burger__lines span {
        transition: none;
    }

    .hada-bar.is-hidden,
    .hada-bar.is-collapsed .hada-row--main {
        transform: none;
    }

    .hada-icon-btn:active,
    .hada-cta:active {
        transform: none;
    }
}