/* ===============================
   CARD BASE
=============================== */

.cliente-detalle-card {
    max-width: 920px;
    border-radius: 22px;
    padding: 1.5rem;
    background: var(--rz-base-default);
    box-shadow: 0 12px 35px rgba(0,0,0,.08);
    animation: fadeUp .35s ease;
}

/* ===============================
   HERO (HEADER VISUAL)
=============================== */

.cliente-hero {
    position: relative;
    margin-bottom: 2.5rem;
}

.cliente-hero-bg {
    height: 140px;
    border-radius: 18px;
    background: linear-gradient( 135deg, var(--rz-primary), rgba(var(--rz-primary-rgb), .7) );
}

.cliente-hero-content {
    position: relative;
    margin-top: -60px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1rem;
}

/* Separador elegante */
.cliente-hero::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: 1.5rem;
    background: linear-gradient( to right, rgba(var(--rz-primary-rgb), .2), transparent );
}

/* ===============================
   AVATAR HERO
=============================== */

.cliente-avatar-container {
    flex-shrink: 0;
}

.cliente-avatar-hero {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--rz-base-default);
    box-shadow: 0 12px 30px rgba(0,0,0,.2);
}

.cliente-avatar-placeholder-hero {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--rz-base-default);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    border: 5px solid var(--rz-base-default);
    color: var(--rz-primary);
}

/* ===============================
   INFO HEADER
=============================== */

.cliente-hero-info {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

    .cliente-hero-info h3 {
        font-weight: 800;
        letter-spacing: -0.3px;
    }

/* ===============================
   BODY
=============================== */

.cliente-detalle-body {
    margin-top: 1.5rem;
}

/* ===============================
   SECTION INFO
=============================== */

.cliente-detalle-section {
    border-radius: 18px;
    padding: 1.4rem;
    background: rgba(var(--rz-base-contrast-rgb), .03);
    border: 1px solid rgba(var(--rz-base-contrast-rgb), .08);
    transition: all .25s ease;
}

    /* Hover elegante */
    .cliente-detalle-section:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(0,0,0,.06);
    }

/* ===============================
   TITLE
=============================== */

.cliente-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* ===============================
   GRID INFO
=============================== */

.cliente-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.cliente-info-item {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

    .cliente-info-item.full {
        grid-column: span 2;
    }

    /* Labels más pro */
    .cliente-info-item .label {
        font-size: .7rem;
        text-transform: uppercase;
        font-weight: 800;
        letter-spacing: .05em;
        color: var(--rz-text-secondary-color);
    }

    /* Valores */
    .cliente-info-item .value {
        font-size: 1rem;
        font-weight: 600;
    }

.cliente-email {
    word-break: break-all;
}

/* ===============================
   FOOTER
=============================== */

.cliente-detalle-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--rz-base-contrast-rgb), .08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* ===============================
   DARK MODE
=============================== */

html.dark .cliente-hero-bg,
.rz-dark .cliente-hero-bg {
    background: linear-gradient( 135deg, rgba(var(--rz-primary-rgb), .4), rgba(var(--rz-primary-rgb), .2) );
}

html.dark .cliente-detalle-section,
.rz-dark .cliente-detalle-section {
    background: rgba(var(--rz-base-contrast-rgb), .05);
    border-color: rgba(var(--rz-base-contrast-rgb), .12);
}

/* ===============================
   RESPONSIVE
=============================== */

@media (max-width: 768px) {

    .cliente-hero-content {
        flex-direction: column;
        text-align: center;
    }

    .cliente-info-grid {
        grid-template-columns: 1fr;
    }

    .cliente-info-item.full {
        grid-column: span 1;
    }

    .cliente-detalle-footer {
        flex-direction: column;
        align-items: stretch;
    }
}