/* ========================================
   COMPONENTES DEL HEADER NOWA
   Domicilio activo, tooltips y utilidades visuales del encabezado.
   ======================================== */

/* Domicilio activo mostrado en el header */
.main-header-container .nowa-domicilio-header-element {
    flex: 0 0 auto;
}

#domicilioHeaderDisplay {
    flex: 0 0 auto;
    min-width: max-content;
}

.domicilio-header-display {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.domicilio-header-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.domicilio-header-value {
    font-size: 0.875rem;
    color: var(--default-text-color);
    font-weight: 600;
}

/* Sistema genérico de tooltips para elementos del header */
.header-tooltip,
.header-element.header-tooltip {
    position: relative;
}

.header-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -26px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: var(--custom-white);
    font-size: 10px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Mostrar tooltip al hacer hover sobre el elemento o su contenedor */
.header-element:hover .header-tooltip::after,
.header-tooltip:hover::after,
a.header-tooltip:hover::after,
.header-link.header-tooltip:hover::after,
.header-link.dropdown-toggle.header-tooltip:hover::after {
    opacity: 1 !important;
}

/* Asegurar que funcione con dropdown-toggle */
.dropdown-toggle.header-tooltip:hover::after,
.header-element:hover .dropdown-toggle.header-tooltip::after,
.header-element:hover a.header-tooltip::after {
    opacity: 1 !important;
    z-index: 10001 !important;
}

/* Mostrar tooltip en móviles */
@media (max-width: 768px) {
    .header-tooltip::after {
        display: none;
    }
}

/* Mostrar tooltip solo si es developer */
.developer-mode .header-tooltip::after {
    display: block;
}

.non-developer-mode .header-tooltip::after {
    display: none;
}

/* Compatibilidad con clase anterior */
.cambiar-theme {
    position: relative;
}

.cambiar-theme::after {
    content: "Cambiar tema";
    position: absolute;
    bottom: -26px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: var(--custom-white);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.header-element:hover .cambiar-theme::after {
    opacity: 1;
}

/* Acceso guest: Iniciar sesión o Registrar */
.header-guest-auth {
    gap: 0.25rem;
    padding-inline: 0.15rem;
}

.header-guest-auth .header-link {
    padding-inline: 0.4rem;
}

.header-guest-auth-separator {
    font-size: 0.8125rem;
    line-height: 1;
    user-select: none;
}

.header-guest-auth #headerRegisterLink span {
    color: var(--primary-color);
}

.notification-item {
    padding: 0.75rem 1rem;
}

.notification-item-nueva {
    background-color: var(--default-background);
    box-shadow: inset 3px 0 0 var(--primary-color);
}

.notification-title-link {
    color: var(--default-text-color);
    text-decoration: none;
}

.header-notification-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 991.98px) {
    #domicilioHeaderDisplay {
        display: none;
    }

    .main-header-container .header-content-left,
    .main-header-container .header-content-right {
        min-width: 0;
    }

    .main-header-container .header-content-right {
        margin-inline-start: auto;
    }
}

@media (max-width: 575.98px) {
    .header-guest-auth .fw-semibold {
        font-size: 0.75rem;
    }

    .header-guest-auth .header-link {
        padding-inline: 0.25rem;
    }
}