/* ============================================================
   HEADER LAYOUTS A / B / C / D
   Agregar al final de card_extras.css
   ============================================================ */

/* ── Comunes ── */
.hl-name      { font-size: 17px; font-weight: 700; margin: 0 0 2px; color: #fff; line-height: 1.2; }
.hl-name-dark { color: #f0f0f0; }
.hl-sub       { font-size: 12px; color: rgba(255,255,255,.75); margin: 0; }
.hl-sub-dark  { color: #9a9aaa; }
.hl-avatar-circle {
    width: 58px; height: 58px; border-radius: 50%; object-fit: cover;
    border: 2.5px solid rgba(255,255,255,.45); flex-shrink: 0; display: block;
}
.hl-avatar-lg { width: 72px; height: 72px; }
.hl-avatar-init {
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 600; color: #fff; background: rgba(0,0,0,.15);
}
.hl-logo-img  { max-height: 80px; max-width: 200px; width: auto; object-fit: contain; display: block; }
.hl-logo-large { max-height: 90px; max-width: 220px; }
.hl-logo-invert { filter: brightness(0) invert(1); }

/* ══ LAYOUT A ══ */
.hl-a {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 18px 16px 16px; gap: 10px;
}
.hl-a-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.hl-a-info { min-width: 0; }
.hl-a-info .hl-name { font-size: 15px; }
.hl-a-logo {
    background: rgba(255,255,255,.18); border-radius: 12px;
    padding: 8px 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    max-width: 160px;
}

/* ══ LAYOUT B ══ */
.hl-b { padding: 22px 16px 18px; text-align: center; }
.hl-b-avatar {
    width: 54px; height: 54px; border-radius: 50%; object-fit: cover;
    border: 2.5px solid rgba(255,255,255,.45);
    display: block; margin: 0 auto 12px;
}
.hl-b-logo {
    background: rgba(255,255,255,.18); border-radius: 12px;
    padding: 12px 24px; display: inline-block; margin-bottom: 12px;
}
.hl-b-info .hl-name { font-size: 16px; }
.hl-b-info .hl-sub  { font-size: 12px; }

/* ══ LAYOUT C ══ */
.hl-c-cover { height: 88px; position: relative; }
.hl-c-avatar-wrap {
    position: absolute; bottom: -36px; left: 18px;
}
.hl-c-band {
    background: #fff; border-bottom: 1px solid #eee;
    padding: 10px 18px 10px 106px;
    display: flex; align-items: center; min-height: 52px;
}
.hl-c-band-dark { background: #111; border-color: #222; }
.hl-c-logo  { max-height: 60px; max-width: 160px; object-fit: contain; }
.hl-c-company { font-size: 15px; font-weight: 700; color: #111; }
.hl-c-info  { padding: 46px 18px 14px; background: #fff; }
.hl-c-info-dark { background: #0f0f0f; }
.hl-c-info .hl-name { font-size: 17px; color: #111; }
.hl-c-info .hl-sub  { color: #888; }

/* ══ LAYOUT D ══ */
.hl-d { display: flex; }
.hl-d-photo {
    width: 42%; display: flex;
    align-items: center; justify-content: center;
    padding: 20px 0; min-height: 110px;
}
.hl-d-avatar {
    width: 70px; height: 70px; border-radius: 50%; object-fit: cover;
    border: 3px solid rgba(255,255,255,.4); display: block;
}
.hl-d-avatar.hl-avatar-init {
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 600; color: #fff; background: rgba(0,0,0,.15);
}
.hl-d-brand {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 14px 12px; gap: 6px;
}
.hl-d-brand-dark { background: #1a1a2e !important; }
.hl-d-logo { max-height: 80px; max-width: 180px; object-fit: contain; }
.hl-d-company-text { font-size: 17px; font-weight: 700; line-height: 1.2; text-align: center; }
.hl-d-job { display: none; }
.hl-d-info { padding: 14px 18px 12px; background: #fff; border-bottom: 1px solid #f0f0f0; }
.hl-d-info-dark { background: #0f0f0f; border-color: #1a1a1a; }
.hl-d-info .hl-name { font-size: 17px; color: #111; }
.hl-d-info .hl-sub  { font-size: 12px; color: #888; }

/* ── Logo móvil más grande ── */
@media (max-width: 480px) {
    .hl-logo-img   { max-height: 100px !important; max-width: 220px !important; }
    .hl-logo-large { max-height: 110px !important; max-width: 240px !important; }
    .hl-c-logo     { max-height: 80px  !important; max-width: 200px !important; }
    .hl-d-logo     { max-height: 100px !important; max-width: 200px !important; }
    .hl-a-logo     { max-width: 170px  !important; padding: 8px 12px !important; }
    .hl-d-brand    { padding: 16px 14px !important; }
    .hl-b-logo     { padding: 14px 28px !important; }
}