/* ==========================================================================
   ACADEMIAQR · ANVERSO TIPO PERFIL (ALUMNO + MAESTRO)
   Respeta el estándar Zero-Scroll: toda medida vertical usa clamp() con vh y
   los tokens --carnet-* definidos en carnet.css. Ver:
   docs/ESTANDAR_RESPONSIVO_CARNETS_MOVIL.md
   ========================================================================== */

.id-front {
    --id-pad-x: clamp(0.7rem, 3.6vw, 1rem);
    --id-gap: clamp(0.25rem, 0.9vh, 0.55rem);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    overflow: hidden;
}

/* ---------- Banner institucional ---------- */
/* ---------- Banner institucional (15% más de espacio vertical y diseño centrado) ---------- */
.id-banner {
    position: relative;
    flex-shrink: 0;
    /* 15% más de altura: antes clamp(76px, 12.5vh, 104px) -> ahora clamp(92px, 15vh, 122px) */
    height: clamp(92px, 15vh, 122px);
    padding: clamp(0.45rem, 0.9vh, 0.65rem) var(--id-pad-x) 0;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.22) 1.2px, transparent 1.7px) 0 0 / 13px 13px,
        linear-gradient(135deg, var(--school-primary), var(--school-secondary));
}

.id-teacher .id-banner {
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.2) 1.2px, transparent 1.7px) 0 0 / 13px 13px,
        linear-gradient(135deg, #064e3b, #059669);
}

.id-banner-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.12rem, 0.3vh, 0.25rem);
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
    min-width: 0;
}

.id-crest {
    width: clamp(34px, 5.2vh, 44px);
    height: clamp(34px, 5.2vh, 44px);
    flex-shrink: 0;
    background: #ffffff;
    color: var(--school-primary);
    border-radius: clamp(10px, 1.5vh, 14px);
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1rem, 2vh, 1.25rem);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(255, 255, 255, 0.35);
    margin: 0 auto;
}

.id-teacher .id-crest {
    color: #047857;
}

.id-banner-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}

.id-school-name {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(0.78rem, 1.55vh, 0.94rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 94%;
}

.id-school-sub {
    margin-top: 1px;
    font-size: clamp(0.48rem, 0.88vh, 0.58rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.92;
    text-align: center;
}

.id-status-pill {
    position: absolute;
    top: clamp(0.32rem, 0.7vh, 0.48rem);
    right: var(--id-pad-x);
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: clamp(0.46rem, 0.82vh, 0.54rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.14rem 0.45rem;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 2;
}

.id-status-pill i {
    font-size: 0.4rem;
    color: #34d399;
}

/* ---------- Fila de perfil: avatar solapado + acciones (con despeje para que no tape los textos) ---------- */
.id-profile-row {
    position: relative;
    z-index: 6;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    padding: 0 var(--id-pad-x);
    /* Solapamiento moderado: el texto del banner queda 100% visible sin perderse debajo del avatar */
    margin-top: calc(var(--carnet-avatar-sz, 84px) * -0.28);
}

.id-avatar {
    position: relative;
    z-index: 5;
    flex-shrink: 0;
    width: var(--carnet-avatar-sz, 84px);
    height: var(--carnet-avatar-sz, 84px);
}

.id-avatar-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #e2e8f0;
    border-radius: 24%;
    border: clamp(3px, 0.5vh, 4px) solid var(--avatar-ring-color, #10b981);
    box-shadow:
        0 0 0 clamp(3px, 0.5vh, 4px) #ffffff,
        0 8px 22px var(--avatar-ring-shadow, rgba(16, 185, 129, 0.35));
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.id-avatar .avatar-ring-picker-btn {
    left: -5px;
    bottom: -5px;
}

.id-avatar .departure-indicator-badge {
    right: -5px;
    bottom: -5px;
}

.id-actions {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: clamp(0.15rem, 0.5vh, 0.35rem);
}

.id-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: 9999px;
    padding: clamp(0.3rem, 0.75vh, 0.46rem) clamp(0.55rem, 2.4vw, 0.8rem);
    font-family: inherit;
    font-size: clamp(0.62rem, 1.2vh, 0.74rem);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
    outline: none;
}

.id-btn:active {
    transform: scale(0.96);
}

.id-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.id-btn-soft {
    background: #eef2ff;
    color: #4338ca;
    border-color: #c7d2fe;
}

.id-btn-soft.is-following {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.id-teacher .id-btn-soft {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.id-btn-dark {
    background: #0f172a;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}

/* ---------- Cuerpo ---------- */
.id-body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--id-gap);
    padding: clamp(0.3rem, 0.8vh, 0.5rem) var(--id-pad-x) clamp(0.4rem, 1vh, 0.7rem);
    overflow: hidden;
    text-align: left;
}

.id-identity {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.id-name-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.id-name {
    margin: 0;
    min-width: 0;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.02rem, 2.3vh, 1.3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #0b1220;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.id-verified {
    flex-shrink: 0;
    color: #1d9bf0;
    font-size: clamp(0.9rem, 1.9vh, 1.1rem);
}

.id-tag {
    flex-shrink: 0;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.08rem 0.4rem;
    font-size: clamp(0.56rem, 1vh, 0.66rem);
    font-weight: 800;
}

.id-handle {
    color: #4f46e5;
    font-size: clamp(0.66rem, 1.3vh, 0.8rem);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.id-teacher .id-handle {
    color: #047857;
}

.id-meta-line {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: #475569;
    font-size: clamp(0.66rem, 1.25vh, 0.78rem);
    font-weight: 700;
}

.id-meta-line i {
    color: #059669;
    margin-right: 0.15rem;
}

.id-dot {
    color: #cbd5e1;
}

.id-bio {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding-bottom: clamp(0.25rem, 0.7vh, 0.45rem);
    border-bottom: 1px solid #e8edf3;
    color: #334155;
    font-size: clamp(0.62rem, 1.2vh, 0.76rem);
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
}

.id-bio > span {
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.id-bio-edit {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 0.62rem;
    color: #94a3b8;
}

/* ---------- Estadísticas ---------- */
.id-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}

.id-stat {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    padding: clamp(0.28rem, 0.8vh, 0.5rem) 0.2rem;
    text-align: center;
    min-width: 0;
}

.id-stat-val {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(0.8rem, 1.7vh, 1rem);
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}

.id-stat-val i {
    font-size: 0.78em;
}

.id-green { color: #059669; }
.id-amber { color: #d97706; }
.id-indigo { color: #4f46e5; }

.id-stat-label {
    margin-top: 1px;
    font-size: clamp(0.52rem, 1vh, 0.64rem);
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Destacados circulares ---------- */
.id-highlights {
    margin: 0 calc(-1 * var(--id-pad-x));
    padding: 0 var(--id-pad-x);
}

.id-highlights-track {
    display: flex;
    gap: clamp(0.45rem, 2.4vw, 0.75rem);
    overflow-x: auto;
    padding: 3px 2px 1px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.id-highlights-track::-webkit-scrollbar {
    display: none;
}

.id-hl {
    flex: 0 0 auto;
    width: clamp(50px, 7.4vh, 64px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
    scroll-snap-align: start;
}

.id-hl-circle {
    position: relative;
    width: clamp(38px, 5.6vh, 50px);
    height: clamp(38px, 5.6vh, 50px);
    border-radius: 50%;
    border: 2.5px solid var(--hl, #10b981);
    background: #f8fafc;
    background: color-mix(in srgb, var(--hl, #10b981) 10%, #ffffff);
    box-shadow: inset 0 0 0 2px #ffffff;
    color: var(--hl, #10b981);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.88rem, 1.9vh, 1.15rem);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.id-hl:active .id-hl-circle {
    transform: scale(0.93);
}

.id-hl-circle.is-dashed {
    border-style: dashed;
    border-color: #cbd5e1;
    background: #ffffff;
    color: #94a3b8;
}

.id-hl-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 9999px;
    background: #ef4444;
    color: #ffffff;
    border: 1.5px solid #ffffff;
    font-size: 0.52rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.id-hl-label {
    width: 100%;
    text-align: center;
    font-size: clamp(0.5rem, 0.95vh, 0.62rem);
    font-weight: 700;
    line-height: 1.1;
    color: #334155;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Zona QR (siempre debajo de la información) ---------- */
.id-qr-zone {
    margin-top: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.2rem, 0.6vh, 0.4rem);
}

.id-qr-zone .departure-verified-banner {
    width: 100%;
    justify-content: center;
}

/* ---------- Impresión CR80 ---------- */
@media print {
    .id-actions,
    .id-status-pill,
    .id-highlights {
        display: none !important;
    }
}