/* ============================== */
/* 🔹 Variables de Color */
/* ============================== */
:root {
    --primary: #ff5722;
    --secondary: #f44336;
    --light: #f4f6f8ea;
    --dark: #040F28;
}

/* ============================== */
/* 🔹 Estilos Generales */
/* ============================== */
body {
    font-family: 'Arial', sans-serif;
    background-color: var(--light);
    margin: 0;
    padding: 0;
    color: var(--dark);
}

/* ============================== */
/* 🔹 Contenedor del Formulario */
/* ============================== */
.form-container {
    max-width: 600px;
    background: white;
    padding: 2rem;
    margin: 3.2rem auto;
    border-radius: 18px;
    box-shadow: 0 18px 40px -10px rgba(0,0,0,0.25);
    transition: box-shadow 0.35s ease, transform 0.35s ease;
    position: relative;
    overflow: hidden;
}

.form-container:hover {
    box-shadow: 0 24px 48px -12px rgba(0,0,0,0.3);
    transform: translateY(-4px);
}

/* ============================== */
/* 🔹 Encabezado del Formulario */
/* ============================== */
h2 {
    color: var(--dark);
    font-size: 2.05rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 1.4rem;
    letter-spacing: .5px;
    position: relative;
}

/* ---------- PREMIUM VARIANT (no cambia contenido) ---------- */
.form-premium {
    background: linear-gradient(135deg, #101824 0%, #0b1320 55%, #182c45 100%);
    border: 1px solid rgba(255,255,255,0.08);
    color: #f5f7fa;
    box-shadow: 0 25px 55px -15px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.form-premium::before {
    content:'';
    position:absolute;
    top:-25%;
    right:-15%;
    width:380px;
    height:380px;
    background: radial-gradient(circle at center, rgba(0,123,255,0.35), transparent 70%);
    filter: blur(30px);
    opacity:.55;
    pointer-events:none;
}
.form-premium::after {
    content:'';
    position:absolute;
    bottom:-15%;
    left:-20%;
    width:300px;
    height:300px;
    background: radial-gradient(circle at center, rgba(255,215,0,0.28), transparent 70%);
    filter: blur(28px);
    opacity:.5;
    pointer-events:none;
}
.form-premium h2 {color:#fff;}
.form-premium h2::after {
    content:'';
    position:absolute;
    left:50%;
    bottom:-10px;
    transform:translateX(-50%);
    width:120px;
    height:4px;
    background:linear-gradient(90deg,#fff159,#007bff,#fff159);
    border-radius:4px;
    box-shadow:0 4px 15px rgba(0,123,255,0.5);
}

.form-premium .form-label {color:#e1e6ec; font-weight:600; letter-spacing:.3px;}

.form-premium .input-form,
.form-premium .select-form {
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.18);
    color:#f1f5f9;
    box-shadow:0 4px 14px -6px rgba(0,0,0,0.6);
}
.form-premium .input-form::placeholder {color:#b8c2cc;}
.form-premium .input-form:focus,
.form-premium .select-form:focus {
    border-color:#007bff;
    box-shadow:0 0 0 3px rgba(0,123,255,0.35);
    background:rgba(255,255,255,0.12);
}
.form-premium .input-form:hover,
.form-premium .select-form:hover {border-color:#ffd700;}

.form-premium textarea.input-form {min-height:120px; resize:vertical;}

.form-premium .btn-enviar {
    background: linear-gradient(135deg,#007bff 0%,#0056b3 50%,#003d80 100%);
    box-shadow:0 10px 28px -8px rgba(0,123,255,0.6);
    font-weight:700;
    letter-spacing:.6px;
    border-radius:14px;
    position:relative;
    overflow:hidden;
    transition:background .35s ease, transform .35s ease, box-shadow .35s ease;
}
.form-premium .btn-enviar::before {
    content:'';
    position:absolute;
    top:0;left:-120%;width:60%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.65),transparent);
    transform:skewX(-25deg);
    transition:left .85s ease;
}
.form-premium .btn-enviar:hover::before {left:140%;}
.form-premium .btn-enviar:hover {
    transform:translateY(-3px);
    box-shadow:0 16px 38px -10px rgba(0,123,255,0.75);
    background:linear-gradient(135deg,#0056b3 0%,#004085 50%,#003366 100%);
}
.form-premium .btn-enviar:active {transform:translateY(-1px);}

/* Accent focus ring for accessibility */
.form-premium .input-form:focus-visible {outline:2px solid #ffd700; outline-offset:2px;}

/* Responsive adjustments premium */
@media (max-width: 768px){
    .form-premium {padding:1.7rem 1.4rem; border-radius:16px;}
    .form-premium h2 {font-size:1.8rem;}
}
@media (max-width: 576px){
    .form-premium {padding:1.4rem 1.1rem;}
    .form-premium h2 {font-size:1.55rem;}
    .form-premium .btn-enviar {font-size:.9rem; padding:.75rem 1.1rem;}
}

/* ===== Progress Bar & Validation Enhancements ===== */
.form-progress {display:flex;align-items:center;gap:.75rem;margin-bottom:1.4rem;position:relative;padding:.55rem .9rem;border:1px solid rgba(255,255,255,0.12);border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));overflow:hidden;}
.form-progress-bar {position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,#007bff,#00c6ff,#ffd700);opacity:.25;transition:width .6s cubic-bezier(.25,.46,.45,.94);}
.form-progress-text {font-size:.8rem;font-weight:600;letter-spacing:.5px;color:#e8edf3;position:relative;z-index:1;}

.input-form.is-valid {border-color:#28a745 !important;box-shadow:0 0 0 3px rgba(40,167,69,.35);}
.input-form.is-invalid {border-color:#dc3545 !important;box-shadow:0 0 0 3px rgba(220,53,69,.35);}
.validation-msg {font-size:.7rem;margin-top:.25rem;color:#dc3545;display:none;}
.validation-msg.show {display:block;animation:fadeIn .4s ease both;}
@keyframes fadeIn {from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}

/* Success Toast */
.form-toast {position:fixed;bottom:24px;right:24px;background:linear-gradient(135deg,#0056b3,#007bff);color:#fff;padding:1rem 1.25rem;border-radius:14px;box-shadow:0 18px 45px -12px rgba(0,0,0,.45);display:flex;align-items:center;gap:.75rem;font-size:.9rem;font-weight:600;z-index:4000;opacity:0;transform:translateY(15px);animation:toastIn .55s ease forwards;}
.form-toast i {font-size:1.1rem;color:#fff159;}
@keyframes toastIn {to{opacity:1;transform:translateY(0);}}
@keyframes toastOut {to{opacity:0;transform:translateY(15px);}}

/* Responsive tweaks progress */
@media (max-width:576px){
    .form-progress {padding:.5rem .7rem;margin-bottom:1.1rem;}
    .form-progress-text {font-size:.7rem;}
}

/* ============================== */
/* 🔹 Estilos para Labels e Inputs */
/* ============================== */
.form-label {
    font-weight: 600;
    color: var(--dark);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.input-form,
.select-form {
    border: 2px solid var(--light);
    border-radius: 8px;
    padding: 0.8rem;
    font-size: 1rem;
    transition: all 0.3s ease-in-out;
    background-color: white;
    color: var(--dark);
}

.input-form:focus,
.select-form:focus {
    border-color: var(--primary);
    box-shadow: 0px 0px 8px rgba(255, 87, 34, 0.3);
    outline: none;
}

.input-form:hover,
.select-form:hover {
    border-color: var(--primary);
}

/* ============================== */
/* 🔹 Botón "Volver Atrás" */
/* ============================== */
.btn-volver {
    color: var(--primary);
    font-size: 1rem;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
}

.btn-volver:hover {
    color: var(--secondary);
    text-decoration: underline;
}

/* ============================== */
/* 🔹 Botón de Envío */
/* ============================== */
.btn-enviar {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border: none;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 8px;
    width: 100%;
    color: white;
    transition: all 0.3s ease-in-out;
    text-transform: uppercase;
    cursor: pointer;
}

.btn-enviar:hover {
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    transform: translateY(-2px);
}

/* ============================== */
/* 🔹 Responsividad */
/* ============================== */
@media (max-width: 768px) {
    .form-container {
        padding: 1.5rem;
    }
    
    h2 {
        font-size: 1.6rem;
    }

    .input-form,
    .select-form {
        font-size: 0.95rem;
        padding: 0.7rem;
    }

    .btn-enviar {
        font-size: 0.95rem;
        padding: 0.7rem;
    }
}

/* ============================== */
/* 📱 Media Queries Específicos */
/* ============================== */

/* 🔹 Samsung Galaxy S9+ (1440x2960px) */
@media (max-width: 1440px) and (max-height: 2960px) {
    .form-container {
        max-width: 550px;
        padding: 1.8rem;
    }

    h2 {
        font-size: 1.7rem;
    }

    .input-form,
    .select-form {
        font-size: 1rem;
        padding: 0.75rem;
    }

    .btn-enviar {
        font-size: 1rem;
        padding: 0.75rem;
    }
}

/* 🔹 iPhone 12, 13, 14, 15 (390x844px) */
@media (max-width: 390px) and (max-height: 844px) {
    .form-container {
        max-width: 90%;
        padding: 1.5rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .input-form,
    .select-form {
        font-size: 0.9rem;
        padding: 0.65rem;
    }

    .btn-enviar {
        font-size: 0.9rem;
        padding: 0.65rem;
    }
}

/* 🔹 iPhone SE (320x568px) */
@media (max-width: 320px) and (max-height: 568px) {
    .form-container {
        max-width: 95%;
        padding: 1rem;
    }

    h2 {
        font-size: 1.4rem;
    }

    .input-form,
    .select-form {
        font-size: 0.85rem;
        padding: 0.6rem;
    }

    .btn-enviar {
        font-size: 0.85rem;
        padding: 0.6rem;
    }
}