/*
 * profile_card.css
 * ----------------
 * Componente: tarjeta de perfil con avatar, datos primarios y stats.
 * Pensado para listados de usuarios, clientes y mis-clientes en vista de cards.
 *
 * Clases disponibles:
 *   .profile-card             - card raíz: hover lift + sombra suave
 *   .profile-card-actions     - dropdown de acciones (esquina sup. derecha)
 *   .profile-card-header      - bloque centrado con avatar + nombre + meta
 *   .profile-card-name        - nombre del registro
 *   .profile-card-email       - email/identificador secundario (truncate)
 *   .profile-card-stats       - contenedor de filas de estadísticas
 *   .profile-card-stat        - fila individual (label / value)
 *   .profile-card-stat-label  - texto izquierdo
 *   .profile-card-stat-value  - texto derecho (oscuro, bold)
 *
 * Ejemplo:
 *   <div class="card profile-card h-100">
 *     <div class="card-body">
 *       <div class="profile-card-actions"> ...dropdown... </div>
 *       <div class="profile-card-header">
 *         {{ obj.get_avatar_img_xl|safe }}
 *         <h5 class="profile-card-name">Nombre</h5>
 *         <p class="profile-card-email">email@x.com</p>
 *         <span class="badge bg-light-success text-success">Activo</span>
 *       </div>
 *       <div class="profile-card-stats">
 *         <div class="profile-card-stat">
 *           <span class="profile-card-stat-label">Cédula</span>
 *           <span class="profile-card-stat-value">123</span>
 *         </div>
 *       </div>
 *     </div>
 *   </div>
 */

.profile-card {
    border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .075));
    transition: transform .15s ease, box-shadow .15s ease;
}

.profile-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .08);
}

.profile-card .card-body {
    padding: 0 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
}

.profile-card-actions {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 3;
}

.profile-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .55rem;
    margin: 0 -1.25rem 0;
    padding: 1.5rem 1.25rem 1.1rem;
    background: linear-gradient(180deg, rgba(110, 91, 255, .10) 0%, rgba(110, 91, 255, 0) 100%);
    border-top-left-radius: calc(var(--bs-card-border-radius, .5rem) - 1px);
    border-top-right-radius: calc(var(--bs-card-border-radius, .5rem) - 1px);
}

/* Avatar más compacto dentro del card (override del avatar-xl global) */
.profile-card .avatar.avatar-xl {
    width: 4rem;
    height: 4rem;
}

.profile-card .siglas-xl {
    width: 4rem;
    height: 4rem;
    font-size: 1.4rem;
}

.profile-card-name {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    color: var(--bs-dark);
}

.profile-card-email {
    font-size: .8125rem;
    color: var(--bs-gray-600, #6c757d);
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-card-meta {
    font-size: .75rem;
    color: var(--bs-gray-600, #6c757d);
    margin: 0;
}

.profile-card-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .3rem;
    width: 100%;
}

.profile-card-stats {
    margin-top: auto;
}

.profile-card-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem 0;
    font-size: .85rem;
}

.profile-card-stat:not(:last-child) {
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .07));
}

.profile-card-stat-label {
    color: var(--bs-gray-700, #495057);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}

.profile-card-stat-label i {
    color: var(--bs-gray-500, #adb5bd);
}

.profile-card-stat-value {
    color: var(--bs-dark, #212529);
    font-weight: 500;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Variante: permite wrap para valores con múltiples badges */
.profile-card-stat-value.is-wrap {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .25rem;
    line-height: 1.2;
}

.profile-card-stat-value.is-wrap .badge { margin: 0; }
.profile-card-stat-value.is-wrap.is-empty { color: var(--bs-gray-500, #adb5bd); font-weight: 400; }

.profile-card-stat .form-check.form-switch {
    margin: 0;
    padding: 0;
    min-height: auto;
}