/* ===============================
   CONFIGURACIÓN GENERAL
================================ */


  




body {

    background: white;
    font-family: Arial, Helvetica, sans-serif;
    padding:20px;
    font-size: 14px;
    align-items:center;
    justify-content:center;
    min-height:100vh;
}


/* ===============================
   TARJETAS
================================ */

.card {

    border-radius: 10px;

    border: none;

}


.card-header {

    font-weight: bold;

}



/* ===============================
   TITULO PRINCIPAL
================================ */

.titulo {

    background: white;
    padding: 15px;
    color: #005baa;

}


.titulo h3 {

    margin: 0;
    font-size: 22px;
}


.logo{
    max-width: 100%;
    height: auto;
}

@media (max-width: 576px){

    .titulo .row{
        flex-wrap: wrap;
    }

    .titulo .col-2,
    .titulo .col-8{
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center !important;
    }

    .logo{
        width: 180px !important;
        max-width: 180px !important;
        height: auto;
        margin-bottom: 10px;
    }

    .titulo h3{
        font-size: 1.1rem !important;
        line-height: 1.3;
        margin-bottom: 10px;
    }

    .titulo strong{
        font-size: 0.85rem !important;
        display: block;
    }
}

/* ===============================
   ENCABEZADOS DE SECCIÓN
================================ */

.seccion {

    background: #1f4e79;

    color: white;

    font-size: 16px;

}



/* ===============================
   TABLA CHECKLIST
================================ */


.table {

    background:white;

}


.table thead th {

    background:#d9eaf7;

    color:#000;

    text-align:center;

    vertical-align:middle;

    font-size:13px;

}



.table td {

    vertical-align:middle;

    padding:8px;

}



/* columna pregunta */

.table td:nth-child(2){

    min-width:280px;

}



/* ===============================
   OPCIONES C CP NC
================================ */


/* Cumple */

.cumple {

    background:#a3d9b1!important;

}


/* Cumple parcial */

.parcial {

    background:#ffd966 !important;

}


/* No cumple */

.nocumple {

    background: #f1948a !important;

}



input[type="radio"] {

    width:20px;

    height:20px;

    cursor:pointer;

}




/* ===============================
   CAMARA
================================ */


.camera {

    position:relative;

    cursor:pointer;

    display:inline-flex;

    align-items:center;

    justify-content:center;

}


.camera i {

    font-size:28px;

    color:#0069d9;

}



.camera:hover i {

    color:#004080;

}



.camera input {

    display:none;

}



/* ===============================
   OBSERVACIONES
================================ */


textarea {

    resize:none;

    font-size:13px;

}



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


.btn-lg {

    border-radius:12px;

    font-size:18px;

    padding:14px;

}



/* ===============================
   CELULAR
================================ */


@media(max-width:768px){


body {

    font-size:13px;

}



.titulo h3 {

    font-size:18px;

}



.table {

    font-size:12px;

}



.table td,
.table th {

    padding:5px;

}



.table td:nth-child(2){

    min-width:220px;

}



.camera i {

    font-size:32px;

}



textarea {

    min-width:150px;

}



.form-control,
.form-select {

    font-size:14px;

}



.card-body {

    padding:10px;

}


}



/* ===============================
   PANTALLAS PEQUEÑAS
================================ */


@media(max-width:480px){


.titulo h3 {

    font-size:16px;

}



.table td:nth-child(2){

    min-width:180px;

}



.camera i {

    font-size:30px;

}


}



/* ===============================
   EFECTO AL SELECCIONAR
================================ */


.cumple input:checked {

    accent-color:#198754;

}



.parcial input:checked {

    accent-color:#ffc107;

}



.nocumple input:checked {

    accent-color:#dc3545;

}