/*==================================================
  FORMS
  Proyecto: QPERTINO
==================================================*/

/*=====================================
FORMULARIO
=====================================*/

.form{

    width:100%;

    max-width:900px;

    margin:auto;

}

/*=====================================
GRID
=====================================*/

.form-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group.full{

    grid-column:1/-1;

}

/*=====================================
LABEL
=====================================*/

.form-group label{

    margin-bottom:10px;

    color:var(--heading);

    font-weight:600;

    font-size:.95rem;

}

/*=====================================
INPUTS — Corregido: fondo oscuro, borde sutil, texto claro
=====================================*/

.form-control{

    width:100%;

    padding:16px 20px;

    /* Corregido: borde oscuro coherente con el tema */
    border:1px solid rgba(255,255,255,0.12);

    border-radius:10px;

    /* Corregido: fondo oscuro en lugar de #FFFFFF */
    background:var(--surface-light, #1A1C23);

    color:var(--text, #E2E8F0);

    font-size:1rem;

    transition:all .30s ease;

}

.form-control::placeholder{

    /* Corregido: placeholder visible sobre fondo oscuro */
    color:var(--text-muted, #718096);

}

.form-control:focus{

    border-color:var(--gold);

    box-shadow:0 0 0 4px rgba(200,168,107,.15);

    outline:none;

}

/*=====================================
TEXTAREA
=====================================*/

textarea.form-control{

    min-height:180px;

    resize:vertical;

}

/*=====================================
SELECT
=====================================*/

select.form-control{

    cursor:pointer;

}

/*=====================================
CHECKBOX
=====================================*/

.form-check{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-top:10px;

}

.form-check input{

    margin-top:4px;

    accent-color:var(--gold);

}

.form-check label{

    margin:0;

    font-size:.95rem;

    line-height:1.7;

    color:var(--text-light);

}

/*=====================================
BOTONES
=====================================*/

.form-actions{

    margin-top:40px;

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

/*=====================================
MENSAJES — Corregido: paleta oscura para éxito/error
=====================================*/

.form-success{

    padding:18px 22px;

    border-radius:10px;

    /* Corregido: fondo oscuro con tono verde */
    background:rgba(6,95,70,.25);

    color:#6EE7B7;

    border:1px solid rgba(110,231,183,.25);

}

.form-error{

    padding:18px 22px;

    border-radius:10px;

    /* Corregido: fondo oscuro con tono rojo */
    background:rgba(153,27,27,.25);

    color:#FCA5A5;

    border:1px solid rgba(252,165,165,.25);

}

/*=====================================
VALIDACIÓN
=====================================*/

.form-control.error{

    border-color:#DC2626;

}

.form-control.success{

    border-color:#16A34A;

}

/*=====================================
TÍTULO
=====================================*/

.form-title{

    text-align:center;

    margin-bottom:50px;

}

.form-title h2{

    margin-bottom:15px;

}

.form-title p{

    margin:auto;

    max-width:650px;

}

/*=====================================
CARD — Corregido: fondo oscuro en lugar de #FFFFFF
=====================================*/

.form-card{

    /* Corregido: fondo oscuro coherente con el tema */
    background:var(--surface, #121318);

    border-radius:18px;

    padding:50px;

    border:1px solid rgba(255,255,255,0.08);

    box-shadow:0 15px 45px rgba(0,0,0,.35);

}

/*=====================================
RESPONSIVE
=====================================*/

@media(max-width:992px){

.form-grid{

grid-template-columns:1fr;

}

.form-group.full{

grid-column:auto;

}

}

@media(max-width:768px){

.form-card{

padding:30px;

}

.form-actions{

flex-direction:column;

}

.form-actions .btn{

width:100%;

}

}