/* ============================================================================
   MÓDULO DE SESIÓN NOVALTIA
   ============================================================================ */

/* Nombre de usuario más visible */
.show-user-login > .userdata > .username {
    font-size: 0.75rem !important; /* 12px - Más grande que 0.688rem pero compacto */
    font-weight: 700 !important;
    color: #333 !important;
    margin-bottom: 0.2rem !important;
}

/* Botón "Cerrar sesión" mejorado pero compacto */
.show-user-login > .userdata > .session > a {
    color: var(--color-primary) !important;
    text-decoration: none !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    padding: 0.125rem 0.4rem !important;
    background: rgba(109, 24, 115, 0.04) !important;
    border-radius: 3px !important;
    transition: all 0.2s ease !important;
    font-size: .6875rem;
    line-height: 1em;
}

.show-user-login > .userdata > .session > a:hover {
    background: var(--color-primary) !important;
    color: white !important;
    box-shadow: 0 1px 3px rgba(109, 24, 115, 0.2) !important;
}

/* Icono con gradiente corporativo */
.show-user-login > .logouser > a .logotipo {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    box-shadow: 0 1px 3px rgba(109, 24, 115, 0.2) !important;
    border-radius:50%;
}

.sesion-area .logouser .logotipo>i {
    position: absolute;
    left: 50%;
    bottom: 50%;
    font-size: 1.35rem;
    transform: translate(-50%, 50%);
    color: #fff;
}

.show-user-login > .userdata {
    font-size: .812em;
    line-height: 1em;
    flex-grow: 2;
}

.show-user-login {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.sesion-area .logouser .logotipo {
    position: relative;
    margin-left: 0;
}


/* Pequeño punto verde de sesión activa */
.show-user-login > .logouser > a .logotipo::after {
    content: '' !important;
    position: absolute !important;
    bottom: 1px !important;
    right: 1px !important;
    /*! width: 6px !important; */
    /*! height: 6px !important; */
    background: var(--color-success) !important;
    border-radius: 50% !important;
    border: 1.5px solid white !important;
}

/* Espaciado compacto */
.show-user-login {
    gap: 0.4rem !important;
}

.show-user-login > .logouser {
    margin-left: 0.25rem !important;
    margin-right: 0 !important;
}

/* Ajustes de sesión para el header T4 */

@media (max-width: 1199px) {
    /* Reducir tamaño de fuente del módulo de sesión */
    #t4-header .sesion-area .show-user-login > .userdata {
        /*! font-size: 0.65rem !important; */ /* Más pequeño */
    }
    
    #t4-header .sesion-area .show-user-login > .userdata > .username {
        /*! font-size: 0.625rem !important; */ /* 10px */
    }
    
    #t4-header .sesion-area .show-user-login > .userdata > .session > a {
        /*! font-size: 0.5625rem !important; */ /* 9px */
        /*! padding: 0.1rem 0.3rem !important; */
    }
    
    /* Reducir icono */
    #t4-header .sesion-area .logouser .logotipo {
        /*! width: 2rem !important; */ /* 32px */
        /*! height: 2rem !important; */
    }
    
    #t4-header .sesion-area .logouser .logotipo > i {
        font-size: 1rem !important;
    }
    
    /* Reducir gap del show-user-login */
    #t4-header .show-user-login {
        gap: 0.25rem !important;
    }
}

@media (max-width: 991px) {
    /* En tablets pequeños y móviles: OCULTAR texto de sesión */
    #t4-header .sesion-area .show-user-login > .userdata {
        display: none !important;
    }
    
    /* Solo mostrar el icono */
    #t4-header .sesion-area {
        /* max-width: 48px !important; */
        /* width: auto !important; */
        width: min-content !important;
    }
    
    #t4-header .sesion-area .logouser {
        margin: 0 !important;
    }
    
    #t4-header .sesion-area .logouser .logotipo {
        width: 40px !important;
        height: 40px !important;
    }
    
    #t4-header .sesion-area .logouser .logotipo > i {
        font-size: 1.15rem !important;
    }
}

@media (max-width: 767px) {
    /* Móviles muy pequeños: icono aún más compacto */
    #t4-header .sesion-area .logouser .logotipo {
        width: 36px !important;
        height: 36px !important;
    }
    
    #t4-header .sesion-area .logouser .logotipo > i {
        font-size: 1rem !important;
    }
}

/* ============================================================================
   FIX: EVITAR QUE EL ICONO DE SESIÓN BAJE EN MÓVIL
   ============================================================================ */

@media (max-width: 767px) {
    /* Forzar que el row mantenga elementos en línea */
    #t4-header .t4-row {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
    
    /* Las columnas deben permanecer en línea */
    #t4-header .t4-col.logo-novaltia,
    #t4-header .t4-col.mainnav,
    #t4-header .t4-col.sesion-area {
        flex: 0 0 auto !important;
        width: auto !important;
    }
    
    /* Logo compacto */
    #t4-header .logo-novaltia {
        /* max-width: 120px !important; */
    }
    
    #t4-header .navbar-brand img {
        height: 28px !important;
    }
    
    /* Área de navegación crece para llenar espacio */
    #t4-header .t4-col.mainnav {
        flex: 1 1 auto !important;
    }
    
    /* Hamburguesa compacta */
    #t4-header .navbar-toggler {
        width: 38px !important;
        height: 38px !important;
    }
    
    /* Icono de sesión compacto pero visible */
    #t4-header .sesion-area {
        flex: 0 0 auto !important;
        width: auto !important;
        /* max-width: 40px !important; */
    }
    
    #t4-header .sesion-area .logouser .logotipo {
        width: 36px !important;
        height: 36px !important;
    }
}

@media (max-width: 575px) {
    /* Móviles muy pequeños: aún más compacto */
    #t4-header .logo-novaltia {
        /* max-width: 100px !important; */
    }
    
    #t4-header .navbar-brand img {
        /* height: 26px !important; */
    }
    
    #t4-header .navbar-toggler {
        width: 36px !important;
        height: 36px !important;
    }
    
    #t4-header .sesion-area .logouser .logotipo {
        width: 34px !important;
        height: 34px !important;
    }
    
    #t4-header .t4-row {
        gap: 0.5rem !important;
    }
}

/* ============================================================
   ÁREA DE USUARIO - OFF-CANVAS NOVALTIA
   Encapsulado en: .t4-offcanvas .show-user-login
   Solo afecta al indicador de usuario dentro del off-canvas
   ============================================================ */
 
/* ============================================================
   CONTENEDOR PRINCIPAL DEL ÁREA DE USUARIO
   ============================================================ */
 
.t4-offcanvas .show-user-login {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(
        135deg,
        rgba(109, 24, 115, 0.03) 0%,
        rgba(166, 188, 9, 0.03) 100%
    );
    border-bottom: 1px solid rgba(109, 24, 115, 0.1);
    margin-bottom: 0.5rem;
    min-height: 70px;
}
 
/* ============================================================
   DATOS DEL USUARIO (TEXTO)
   Lado izquierdo: nombre y botón cerrar sesión
   ============================================================ */
 
.t4-offcanvas .show-user-login > .userdata {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0; /* Permite que el texto se contraiga */
    order: 1; /* Primero en orden visual */
}
 
/* Nombre del usuario */
.t4-offcanvas .show-user-login > .userdata > .username {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #333333 !important;
    line-height: 1.2;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
 
/* Contenedor del botón cerrar sesión */
.t4-offcanvas .show-user-login > .userdata > .session {
}
 
/* Botón "Cerrar sesión" */
.t4-offcanvas .show-user-login > .userdata > .session > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6d1873 !important;
    text-decoration: none !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0.375rem 0.75rem !important;
    background: rgba(109, 24, 115, 0.08) !important;
    border-radius: 6px !important;
    border: 1px solid rgba(109, 24, 115, 0.15);
    transition: all 0.2s ease !important;
    white-space: nowrap;
    line-height: 1;
}
 
.t4-offcanvas .show-user-login > .userdata > .session > a:hover {
    background: #6d1873 !important;
    color: white !important;
    border-color: #6d1873;
    box-shadow: 0 2px 6px rgba(109, 24, 115, 0.25) !important;
    transform: translateY(-1px);
}
 
.t4-offcanvas .show-user-login > .userdata > .session > a:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(109, 24, 115, 0.2) !important;
}
 
/* ============================================================
   AVATAR DEL USUARIO
   Lado derecho: imagen circular con indicador de estado
   ============================================================ */
 
.t4-offcanvas .show-user-login > .logouser {
    flex: 0 0 auto;
    margin: 0 !important;
    order: 2; /* Segundo en orden visual (derecha) */
}
 
.t4-offcanvas .show-user-login > .logouser > a {
    display: block;
    position: relative;
    width: 48px;
    height: 48px;
    text-decoration: none;
}
 
/* Círculo del avatar con gradiente */
.t4-offcanvas .show-user-login > .logouser > a .logotipo {
    width: 48px !important;
    height: 48px !important;
    background: linear-gradient(135deg, #6d1873 0%, #a6bc09 100%) !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(109, 24, 115, 0.2) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    margin: 0 !important;
}
 
.t4-offcanvas .show-user-login > .logouser > a .logotipo:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(109, 24, 115, 0.3) !important;
}
 
/* Icono de usuario dentro del avatar (opcional) */
.t4-offcanvas .show-user-login > .logouser > a .logotipo::before {
    content: '\f007'; /* fa-user */
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free';
    font-weight: 400;
    color: white;
    font-size: 1.25rem;
}
 
/* ============================================================
   INDICADOR DE ESTADO (PUNTO VERDE)
   Muestra que el usuario está conectado
   ============================================================ */
 
.t4-offcanvas .show-user-login > .logouser > a .logotipo::after {
    content: '' !important;
    position: absolute !important;
    bottom: 2px !important;
    right: 2px !important;
    width: 12px !important;
    height: 12px !important;
    background: #28a745 !important; /* Verde "conectado" */
    border-radius: 50% !important;
    border: 2.5px solid white !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 
                0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 2;
}
.t4-offcanvas .show-user-login > .logouser > a .logotipo .fal.fa-user {
    display: none !important;
}


 
/* Animación de "pulso" para el indicador (opcional) */
@keyframes pulse-online {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.9;
    }
}
 
.t4-offcanvas .show-user-login > .logouser > a .logotipo::after {
    animation: pulse-online 2s ease-in-out infinite;
}
 
/* Desactivar animación si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .t4-offcanvas .show-user-login > .logouser > a .logotipo::after {
        animation: none;
    }
}

/* ─── FIX PHOTOSWIPE LIGHTBOX ─────────────────────────────────────
   Selector de alta especificidad para ganar sobre photoswipe.css
   independientemente del orden de carga.
──────────────────────────────────────────────────────────────────── */
body .pswp.pswp--open {
    display: block !important;
}