/* ===============================
   Header CV – Ícono + Estado
   =============================== */

.cv-header {
    text-align: center;
    padding: .85rem 1rem .65rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid rgba(148,163,184,.25);
    background-color: #fff;
}

/* --- TÍTULO + CONTROLES --- */
.cv-header-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .5rem;
    width: 100%;
}

    /* Título Central */
    .cv-header-title h2 {
        margin: 0;
        font-size: 1.4rem;
        font-weight: 800;
        color: #2563eb;
        line-height: 1.15;
        white-space: nowrap;
        padding: 0 0.5rem; /* Pequeño aire alrededor del texto */
    }

/* --- ELEMENTOS LATERALES (La clave de la simetría) --- */
/* Definimos contenedores para el ícono y el botón con ANCHO FIJO igual */
.header-side-icon,
.header-side-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem; /* Ancho fijo para ambos lados */
    flex-shrink: 0;
}

    /* Ícono Izquierdo */
    .header-side-icon i {
        font-size: 1.45rem;
        color: #2563eb;
    }

    /* Botón Derecho */
    .header-side-btn button i {
        font-size: 1.2rem;
        color: #6c757d;
    }


/* --- ESTADO (BADGE) --- */
.estado-publicacion-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    margin-top: 0.2rem;
    width: 100%;
}

.estado-publicacion-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
}

.estado-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.pub-ok {
    background: #ecfdf3;
    color: #047857;
    border: 1px solid #bbf7d0;
}

    .pub-ok .estado-dot {
        background: #10b981;
    }

.pub-off {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

    .pub-off .estado-dot {
        background: #ef4444;
    }

.estado-publicacion-ayuda {
    font-size: .72rem;
    color: #64748b;
}

/* ===============================
   📱 MOBILE (Menos de 576px)
   =============================== */
@media (max-width: 576px) {
    .cv-header {
        padding: .6rem .5rem .5rem;
    }

    .cv-header-title {
        margin-bottom: .4rem;
    }

    /* Ajustamos el ancho de los "espejos" para que queden compactos */
    .header-side-icon,
    .header-side-btn {
        width: 1.8rem; /* Un poco más angosto en celular */
    }

        .header-side-icon i {
            font-size: 1.2rem; /* Ícono un poco más chico */
        }

    .cv-header-title h2 {
        font-size: 1.15rem; /* Texto ajustado */
    }

    .header-side-btn button i {
        font-size: 1.1rem;
    }

    .estado-publicacion-pill {
        font-size: .65rem;
        padding: .25rem .6rem;
    }
}