/* ========== 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.8rem, 2vw, 1.4rem);
}

/* ===============================
   HEADER
================================ */
.perfil-header {
    display: flex;
    flex-direction: column;
    gap: clamp(0.4rem, 1vw, 0.7rem);
}

/* ===============================
   FORMULARIO
================================ */
.perfil-form {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2.5vw, 1.6rem);
}

/* ===============================
   GRUPO DE CAMPOS
================================ */
.field-group {
    display: flex;
    flex-direction: column;
    gap: clamp(0.25rem, 0.6vw, 0.4rem);
}

/* ===============================
   INPUTS
================================ */
.input-small {
    font-size: clamp(0.65rem, 0.9vw, 0.85rem);
    padding: clamp(0.35rem, 0.8vw, 0.55rem);
    border-radius: clamp(0.3rem, 0.6vw, 0.45rem);
}

/* ===============================
   VERIFICACIÓN EMAIL
================================ */
.email-verification {
    margin-top: clamp(0.4rem, 1vw, 0.7rem);
}

.verification-text {
    font-size: clamp(0.6rem, 0.85vw, 0.75rem);
    color: #1f2937;
}

.verification-link {
    background: none;
    border: none;
    padding: 0;
    margin-left: clamp(0.2rem, 0.4vw, 0.35rem);
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
    color: #4b5563;
}

.verification-link:hover {
    color: #111827;
}

.verification-success {
    margin-top: clamp(0.3rem, 0.7vw, 0.5rem);
    font-size: clamp(0.6rem, 0.85vw, 0.75rem);
    color: #16a34a;
}

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

.form-status {
    font-size: clamp(0.6rem, 0.85vw, 0.75rem);
    color: #4b5563;
}