/* Estilos adicionales */
body.login-body {
    padding-top: 60px;
    background: #f5f7fa;
}
.panel-login { margin-top: 60px; }

/* contenido con navbar fijo */
.content-top { padding-top: 80px; }

/* Toasts bottom-right */
.toast-container {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 99999;
}
.app_toast {
    min-width: 220px;
    margin-top: 8px;
    padding: 12px 16px;
    border-radius: 6px;
    color: #fff;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.3s ease;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    font-size: 13px;
}
.app_toast.show { opacity: 1; transform: translateY(0); }
.toast-success { background: #28a745; }
.toast-info { background: #007bff; }
.toast-warning { background: #ff9800; }
.toast-error { background: #e53935; }

/* pequeña mejora responsive */
@media (max-width: 480px) {
    .navbar-header .navbar-brand { font-size: 16px; }
    .panel-login { margin-top: 20px; }
}

 /* estilos mínimos específicos del header; puedes moverlos a styles.css */
    .eqp-brand { font-weight:600; font-size:1.05rem; color:#1f2d3d; text-decoration:none; }
    .selector-usuario-final { min-width:170px; max-width:240px; }
    .usuario-avatar { width:36px; height:36px; border-radius:50%; background:#e9eef8; color:#334155; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
    
    
    /* Estilos adicionales */
body.login-body {
    padding-top: 60px;
    background: #f5f7fa;
}
.panel-login { margin-top: 60px; }

/* contenido con navbar fijo */
.content-top { padding-top: 80px; }

/* Toasts bottom-right */
.toast-container {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 99999;
}
.app_toast {
    min-width: 220px;
    margin-top: 8px;
    padding: 12px 16px;
    border-radius: 6px;
    color: #fff;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.3s ease;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    font-size: 13px;
}
.app_toast.show { opacity: 1; transform: translateY(0); }
.toast-success { background: #28a745; }
.toast-info { background: #007bff; }
.toast-warning { background: #ff9800; }
.toast-error { background: #e53935; }

/* pequeña mejora responsive */
@media (max-width: 480px) {
    .navbar-header .navbar-brand { font-size: 16px; }
    .panel-login { margin-top: 20px; }
}

 /* estilos mínimos específicos del header; puedes moverlos a styles.css */
    .eqp-brand { font-weight:600; font-size:1.05rem; color:#1f2d3d; text-decoration:none; }
    .selector-usuario-final { min-width:170px; max-width:240px; }
    .usuario-avatar { width:36px; height:36px; border-radius:50%; background:#e9eef8; color:#334155; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }

/* Ajustes para el modal de vista de usuario (más ancho y legible) */
#user_view_modal .modal-dialog {
    /* Amplía el ancho máximo del modal de detalles para pantallas grandes */
    max-width: 760px;
    margin: 1.75rem auto;
}

/* Fuerza que la etiqueta (dt) mantenga su texto en una sola línea y las definiciones permitan wrap */
#user_view_modal dt {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* La parte derecha puede quebrar palabras largas si es necesario */
#user_view_modal dd {
    word-break: break-word;
}

/* Asegurar que en móviles el modal use fullscreen y el contenido se vea bien */
@media (max-width: 576px) {
    #user_view_modal .modal-dialog {
        max-width: 100%;
        margin: 0;
    }
    #user_view_modal dt {
        white-space: normal;
    }
}

/* seguridad: evitar que imágenes dentro desborden el contenedor */
img { max-width: 100%; height: auto; display: block; }