/* ==========================================
   CONTENEDOR PRINCIPAL
========================================== */

.fp-container{

    max-width:1100px;

    margin:40px auto;

    padding:30px;

    background:#ffffff;

    border-radius:8px;

    box-shadow:0 0 12px rgba(0,0,0,.10);

    font-family:Arial, Helvetica, sans-serif;

}

/* ==========================================
   TITULOS
========================================== */

.fp-container h2{

    text-align:center;

    margin-bottom:35px;

    color:#003366;

}

.fp-section{

    margin-bottom:35px;

}

.fp-section h3{

    padding-bottom:10px;

    margin-bottom:20px;

    border-bottom:2px solid #e5e5e5;

    color:#004a99;

}

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

.fp-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:20px;

}

.fp-row{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

}

.fp-col{

    flex:1;

}

/* ==========================================
   LABELS
========================================== */

.fp-container label{

    display:flex;

    flex-direction:column;

    font-weight:600;

    color:#333;

    font-size:14px;

}

/* ==========================================
   INPUTS
========================================== */

.fp-container input[type=text],
.fp-container input[type=email],
.fp-container input[type=tel],
.fp-container input[type=month],
.fp-container input[type=date],
.fp-container input[type=number],
.fp-container select,
.fp-container textarea{

    margin-top:6px;

    padding:10px;

    border:1px solid #cccccc;

    border-radius:5px;

    font-size:14px;

    width:100%;

    box-sizing:border-box;

}

.fp-container textarea{

    resize:vertical;

    min-height:120px;

}

.fp-container input:focus,
.fp-container select:focus,
.fp-container textarea:focus{

    outline:none;

    border-color:#0066cc;

    box-shadow:0 0 4px rgba(0,102,204,.25);

}

/* ==========================================
   FILE
========================================== */

.fp-container input[type=file]{

    margin-top:12px;

}

/* ==========================================
   MENSAJES
========================================== */

.fp-success{

    background:#d4edda;

    color:#155724;

    padding:15px;

    border-radius:6px;

    margin-bottom:25px;

}

.fp-error{

    background:#f8d7da;

    color:#721c24;

    padding:15px;

    border-radius:6px;

    margin-bottom:25px;

}

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

.fp-button{

    background:#f00;

    color:#000;

    border:none;

    padding:12px 25px;

    border-radius:5px;

    cursor:pointer;

    font-size:15px;

    transition:.3s;

}

.fp-button:hover{

    background:#f00;

}

.fp-button-secondary{

    background:#f00;

    color:#000;

    border:none;

    padding:12px 25px;

    border-radius:5px;

    cursor:pointer;

}

.fp-button-secondary:hover{

    background:#555;

}

.fp-buttons{

    display:flex;

    justify-content:flex-end;

    gap:15px;

}

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

.fp-checkbox{

    display:flex !important;

    align-items:center;

    gap:10px;

    font-weight:normal !important;

}

.fp-checkbox input{

    width:auto;

}

/* ==========================================
   LISTA DOCUMENTOS
========================================== */

#lista-documentos{

    margin-top:15px;

    padding-left:20px;

}

#lista-documentos li{

    margin-bottom:5px;

}

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

@media(max-width:768px){

    .fp-container{

        padding:20px;

    }

    .fp-buttons{

        flex-direction:column;

    }

    .fp-button,
    .fp-button-secondary{

        width:100%;

    }

}