/* ========== RESPONSIVE ====================================================== */
/* Resoluciones recomendadas:
Tablet (1024 x 768 px) Landscape.
Laptop 1 (1280 x 800 px) Landscape.
Laptop 2 (1600 x 900 px) Landscape.
Laptop 3 (1920 x 1200 px) Landscape.
*/
/* ============================================================================ */

/* ===============================
   SECCIÓN PERFIL
================================ */
.perfil-section {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* ===============================
   HEADER
================================ */
.perfil-header {
    display: flex;
    flex-direction: column;
    gap: clamp(0.25rem, 0.8vw, 0.5rem);
}

/* ===============================
   TEXTOS
================================ */
.textTitle {
    font-family: Verdana, sans-serif;
    font-weight: bold;
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    color: #000;
}

.textContent {
    font-family: Verdana, sans-serif;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    color: rgb(75, 85, 99);
    line-height: 1.4;
}

/* ===============================
   FORMULARIO
================================ */
.perfil-form {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* ===============================
   CAMPOS
================================ */
.field-group {
    display: flex;
    flex-direction: column;
    gap: clamp(0.3rem, 0.8vw, 0.5rem);
    margin-bottom: clamp(0.6rem, 1.5vw, 1rem);
}

/* ===============================
   INPUTS
================================ */
.input-small {
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    padding: clamp(0.4rem, 0.8vw, 0.5rem);
}

/* ===============================
   ACCIONES
================================ */
.form-actions {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 0.75rem);
}

/* ===============================
   BOTÓN
================================ */
.botonPerfil {
    padding-block: clamp(0.4rem, 0.8vw, 0.5rem);
    padding-inline: clamp(0.75rem, 1.5vw, 1rem);

    font-size: clamp(0.7rem, 1vw, 0.85rem);
    font-weight: bold;

    border-radius: clamp(0.4rem, 0.8vw, 0.5rem);
}

/* ===============================
   MENSAJE GUARDADO
================================ */
.save-message {
    font-size: clamp(0.65rem, 0.9vw, 0.8rem);
    color: rgb(75, 85, 99);
}