/* ==========================================================================
   Cabecera: idiomas y accesos de cuenta
   --------------------------------------------------------------------------
   La barra superior queda con dos banderas (México y Estados Unidos) a la
   izquierda y dos accesos con icono a la derecha: cuenta y carrito. El
   formulario de ingreso vive en un panel desplegable bajo el icono de usuario.
   ========================================================================== */

#header-top {
    padding: 10px 0 8px;
}

.header-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 38px;
}

/* --- Banderas de idioma --- */
.header-idiomas {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-idioma {
    display: block;
    padding: 3px;
    border-radius: 5px;
    line-height: 0;
    transition: background-color .2s var(--ease);
}

.header-idioma img {
    display: block;
    width: 26px;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(5, 19, 80, .12), 0 1px 2px rgba(5, 19, 80, .18);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

.header-idioma:hover img,
.header-idioma:focus-visible img {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(0, 180, 215, .55), 0 2px 6px rgba(5, 19, 80, .22);
}

.header-idioma:focus-visible {
    outline: 2px solid rgba(0, 180, 215, .6);
    outline-offset: 1px;
}


/* --- Botón de agenda (junto a las banderas) --- */
.header-top-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.header-agenda {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    padding: 0 14px;
    border: 1px solid rgba(0, 180, 215, .28);
    border-radius: 999px;
    background: #e7f8fc;
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .055em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(5, 19, 80, .10);
    transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}

#header-top .header-agenda i {
    margin: 0;
    color: #00a5c5;
    font-size: 12px;
}

.header-agenda:hover,
.header-agenda:focus-visible {
    background: #d4f1f8;
    color: var(--brand);
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(5, 19, 80, .14);
    transform: translateY(-1px);
}

.header-agenda:focus-visible {
    outline: 2px solid rgba(0, 180, 215, .65);
    outline-offset: 2px;
}

/* --- Accesos (cuenta y carrito) --- */
.header-acciones {
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #5e6271;
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s var(--ease), background-color .2s var(--ease);
}

/* El template separa los iconos con margen; aquí van centrados en el círculo. */
#header-top .header-accion i {
    margin: 0;
}

.header-accion:hover,
.header-accion:focus-visible {
    color: var(--brand);
    background: rgba(5, 19, 80, .06);
    text-decoration: none;
}

.header-accion:focus-visible {
    outline: 2px solid rgba(0, 180, 215, .6);
    outline-offset: 2px;
}

/* --- Panel de la cuenta --- */
.header-cuenta {
    position: relative;
}

.header-cuenta__panel {
    position: absolute;
    top: calc(100% + 10px);
    /* Se alinea con el borde derecho del grupo de iconos (carrito), no con el
       botón de usuario, para que en pantallas angostas no se salga por la
       izquierda. La punta conserva la alineación con el icono de usuario. */
    right: -42px;
    /* Por encima del navbar sticky del template (z-index: 99999). */
    z-index: 100000;
    width: min(320px, calc(100vw - 30px));
    padding: 20px 20px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(5, 19, 80, .18);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}

.header-cuenta.is-open .header-cuenta__panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* Punta del panel alineada con el icono de usuario. */
.header-cuenta__panel::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 55px;
    width: 12px;
    height: 12px;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-top-left-radius: 3px;
    background: #fff;
    transform: rotate(45deg);
}

/* El template decora todos los <p> de #header-top con separadores verticales,
   margen derecho y un desplazamiento hacia arriba. Dentro del panel no aplica. */
#header-top .header-cuenta__panel p {
    display: block;
    position: static;
    padding-right: 0;
    margin-right: 0;
    transform: none;
}

#header-top .header-cuenta__panel p::after {
    display: none;
}

/* El mensaje de error se oculta con el atributo hidden. */
#header-top .header-cuenta__panel p[hidden] {
    display: none;
}

.header-cuenta__titulo {
    margin: 0 0 14px;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.header-cuenta__campo {
    margin-bottom: 12px;
}

.header-cuenta__campo label {
    display: block;
    margin-bottom: 5px;
    color: #3d4a66;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.3;
}

.header-cuenta__campo input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #dce4f0;
    border-radius: 10px;
    background: #fbfcfe;
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}

.header-cuenta__campo input::placeholder {
    color: #9aa4b8;
}

.header-cuenta__campo input:focus {
    outline: none;
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 180, 215, .14);
}

.header-cuenta__error {
    margin: 0 0 10px;
    color: #b3261e;
    font-size: 12.5px;
    line-height: 1.45;
}

.header-cuenta__entrar {
    display: block;
    width: 100%;
    height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s var(--ease), opacity .2s var(--ease);
}

.header-cuenta__entrar:hover,
.header-cuenta__entrar:focus-visible {
    background: #0a1d66;
}

.header-cuenta__entrar:focus-visible {
    outline: 2px solid rgba(0, 180, 215, .6);
    outline-offset: 2px;
}

.header-cuenta__entrar:disabled {
    cursor: wait;
    opacity: .7;
}

.header-cuenta__registro {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    color: var(--body);
    font-size: 13.5px;
    line-height: 1.5;
    text-align: center;
}

.header-cuenta__registro a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(5, 19, 80, .25);
    transition: color .2s var(--ease), border-color .2s var(--ease);
}

.header-cuenta__registro a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}


/* La línea del menú activo del template se dibuja en el borde superior del
   navbar. Con los iconos de cuenta y carrito a la derecha parece pertenecer
   al icono de usuario, así que la bajamos debajo del texto. */
.main-menu li.active a:before,
.main-menu li a:hover:before {
    top: auto;
    bottom: 16px;
}

@media (max-width: 575.98px) {
    #header-top {
        padding: 7px 0 5px;
    }

    .header-top-bar {
        gap: 8px;
        min-height: 34px;
    }

    .header-top-left {
        gap: 8px;
    }

    .header-idiomas {
        gap: 8px;
    }

    .header-agenda {
        height: 28px;
        padding: 0 10px;
        gap: 4px;
        font-size: 10px;
        letter-spacing: .04em;
    }

    #header-top .header-agenda i {
        font-size: 11px;
    }

    .header-accion {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }

    .header-idioma img {
        width: 24px;
    }

    .header-cuenta__panel {
        right: -38px;
        width: min(360px, calc(100vw - 30px));
        padding: 18px 16px 14px;
    }

    .header-cuenta__panel::before {
        right: 49px;
    }
}