/*
 * Marca CRATOS — Plataforma de Gestión Gubernamental
 *
 * Los assets viven en wwwroot/images y existen en dos variantes:
 *   logo.png / logo-sm.png            -> tipografía blanca, para fondos oscuros
 *   logo-dark.png / logo-sm-dark.png  -> colores originales, para fondos claros
 *
 * El tema alterna entre .logo-light y .logo-dark, así que cada contenedor sirve
 * la variante correcta. Estas reglas sólo controlan el tamaño y el encuadre,
 * porque los PNG son de alta resolución y llevan fondo transparente.
 */

/* Sidebar y topbar */
.gov-brand-logo {
    max-height: 40px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* Variante compacta: sidebar colapsado / topbar en móvil */
.gov-brand-logo-sm {
    max-height: 34px;
    max-width: 48px;
}

/*
 * Si la imagen del logo no carga, el navegador pinta su texto alternativo en línea y
 * lo deja crecer fuera del contenedor. Se acota el contenedor y se recorta lo que sobre,
 * de modo que una imagen rota degrada a un hueco y no a una frase desbordada.
 *
 * No se toca `display`: el tema alterna .logo-lg y .logo-sm entre flex y none según el
 * estado del sidebar (expandido, condensado, sm-hover). Forzarlo aquí hizo que las dos
 * variantes se mostraran a la vez y el logo saliera duplicado.
 */
.sidenav-menu .logo .logo-lg,
.sidenav-menu .logo .logo-sm {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sidenav-menu .logo .logo-sm {
    max-width: 48px;
}

/* Pantallas de autenticación y selección de vigencia */
.auth-brand .gov-brand-logo {
    max-height: 46px;
}

@media (max-width: 575.98px) {
    .auth-brand .gov-brand-logo {
        max-height: 38px;
    }
}

/* Login: la marca es el elemento principal de la pantalla, va más grande */
.auth-brand-lg .gov-brand-logo {
    max-height: 88px;
}

@media (max-width: 575.98px) {
    .auth-brand-lg .gov-brand-logo {
        max-height: 68px;
    }
}

/*
 * Placeholder del usuario sin foto de perfil: icono de Remix Icon (ya cargado en el
 * proyecto) en lugar de la foto de muestra de la maqueta.
 */
.sidebar-user-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--ct-tertiary-bg, #eef2f7);
    color: var(--ct-secondary-color, #6c757d);
    font-size: 22px;
    line-height: 1;
    flex: 0 0 42px;
}


/*
 * Tarjeta de usuario de la barra lateral: el avatar no encoge nunca.
 *
 * Con un nombre largo ("MARIA DEL MAR CORREA PAYARES", y los nombres colombianos de cuatro
 * partes son lo normal aqui) el texto se llevaba todo el ancho y el avatar quedaba cortado
 * contra el borde izquierdo, reducido a una astilla. Pasaba por dos motivos a la vez: la foto
 * no tenia flex-basis fija, asi que encogia; y el bloque del nombre no tenia min-width: 0, y
 * un hijo flex sin eso no baja del ancho de su contenido, de modo que empujaba a sus hermanos
 * en lugar de recortarse el.
 *
 * El placeholder de "sin foto" ya estaba bien resuelto mas arriba con flex: 0 0 42px; esto es
 * lo mismo para la foto real, mas el recorte del texto.
 */
.sidebar-user-photo {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    object-fit: cover;
}

.sidebar-user-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.sidebar-user-name > h4,
.sidebar-user-name > h6 {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-arrow {
    flex: 0 0 auto;
}