.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px;
}
.col-6 {
    width: calc(50% - 20px);
    margin-bottom: 20px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Distribuir el espacio entre las columnas */
}
.titulo {
    margin: 20px;
}

.card {
    font-size: small;
    width: 100%;
    height: auto; /* Ajuste automático del alto */
    background-color: #fff;
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
    margin: 5px;
    min-width: 0; /* Esto asegura que no exceda el ancho disponible */
    box-shadow: 0px 0px 20px rgba(82, 63, 105, 0.1);
    transition: transform 0.3s ease;
    border: 0.3px solid rgb(212, 211, 211);
}

.card:hover {
    cursor: pointer;
    /* font-size: 4rem; */
    transition: .5s;
    font-weight: 100; 
}

.card:hover .card-img-danger i {
    transform: scale(1.2);
}

.card:hover .card-img-success i {
    transform: scale(1.2);
}

.card:hover .card-img-warning i {
    transform: scale(1.2);
}

.card:hover .card-img i {
    transform: scale(1.2);
}

.cardMediano {
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;
    overflow: hidden;
    margin: 5px;
    min-width: 400px;
    box-shadow: 0px 0px 9px 0 rgb(82 63 105 / 10%);
    border: 0.3px solid rgb(212, 211, 211);

}




.card-info {
    padding: 20px;

}

.contenedor__card-info>p {
    margin: 0;
    padding: 5px 0;
    font-weight: 300;

}

/* Media query para hacer responsive */
@media screen and (max-width: 768px) {
    .col-6 {
        width: 100%;
    }
}

/* Media query para tablets */
@media screen and (min-width: 577px) and (max-width: 1024px) {
    .col-6 {
        width:calc(100% - 15px);
    }
}


.card-img {
    width: 120px;
    display: flex;
    background-color: #26cde8;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 50%;
    /* Redondea la esquina superior derecha */
    border-bottom-right-radius: 50%;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}

.card-img-success {
    width: 120px;
    display: flex;
    background-color: #30b587;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 50%;
    /* Redondea la esquina superior derecha */
    border-bottom-right-radius: 50%;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}


.card-img-danger {
    width: 120px;
    display: flex;
    background-color: #fe4864;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 50%;
    /* Redondea la esquina superior derecha */
    border-bottom-right-radius: 50%;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}

.card-img-warning {
    width: 120px;
    display: flex;
    background-color: orange;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 50%;
    /* Redondea la esquina superior derecha */
    border-bottom-right-radius: 50%;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}




.card-img-danger>i {
    color: #fff;
    font-size: 4rem;
    transition: .5s;
    font-weight: 100;

}

.card-img-warning>i {
    color: #fff;
    font-size: 4rem;
    transition: .5s;
    font-weight: 100;

}

.card-img-success>i {
    color: #fff;
    font-size: 4rem;
    transition: .5s;
    font-weight: 100;

}

.card-img>i {
    color: #fff;
    font-size: 4rem;
    transition: .5s;
    font-weight: 100;

}



.col-12 {
    width: 100%;
    box-sizing: border-box;
}

.su-menu-principal {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.su-btn {
    display: block;
    padding: 10px;
    text-align: center;
    width: calc(33.33% - 10px);
    /* Para que ocupe el 33.33% del ancho con margen entre ellos */
    box-sizing: border-box;

    text-decoration: none;
    border: 3px solid #007bff;
    border-radius: 5px;
    background-color: #007bff;
    color: #fff;
    transition: background-color 0.3s, color 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Cambios al pasar el mouse por encima */
.su-btn:hover {
    background-color: #0056b3;
    /* Cambio de color al pasar el mouse */
}

/* Media queries para hacer responsive */
@media screen and (max-width: 508px) {
    .su-btn {
        width: 100%;
        /* Ocuparán el 100% del ancho en pantallas más pequeñas */
        margin-top: 10px;
        /* Espacio entre botones */
    }   
}

@media screen and (max-width: 1250px) {
    .card-info h1 {
      font-size: 1.5em; /* Tamaño de la fuente relativo en tablets */
    }
  
    .card-info p {
      font-size: 0.8em; /* Tamaño de la fuente relativo en tablets */
    }
  }






/* estilos centro ayuda */

.cardMediano {
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}


.su-menu-principal {
    display: flex;
    justify-content: space-between;
}

.su-btn {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s;
}

.su-btn:hover {
    background-color: #0056b3;
}

.su-btn .icon {
    margin-right: 5px;
}














/* estilos tab */


.tab {
    overflow: hidden;
    /* background-color: #f1f1f1; */
    display: flex;
    justify-content: space-evenly;
    border-radius: 20px;
    list-style-type: none;
    padding: 0;
    margin: 20px 0;
}

/* Estilos para los botones de las pestañas */
.tab button {
    background-color: #ddd;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    font-size: 30px; /* Tamaño de fuente aumentado para los iconos */
    border-radius: 50%;
    padding: 15px;
    margin: 0 5px;
}

/* Estilos para los botones de las pestañas cuando se les pasa el ratón por encima */
.tab button:hover {
    background-color: #ccc;
}

/* Estilos para el contenido de las pestañas */
.tabcontent {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 20px;
    background-color: #f9f9f9;
}

/* Estilos para mostrar el contenido de la pestaña activa */
.tabcontent.active {
    display: block;
}





/* .contenedor_cuerpo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    margin-top: 3%;
} */

.form-container {
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    margin: 20px auto;
    padding: 20px;
    width: 98%;
    border-top: 4px solid #84b6f4;
    margin-top: 30px;
    padding-top: 10px; 
}

.form-title {
    font-size: 20px;
    margin: 0 0 20px 0;
    color: #007cbc;
}

.card-Container {
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    margin-top: 20px;
    width: 100%;
}


.card-header {
    background-color: #007bff;
    color: #fff;
    padding: 10px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.field h2 {
    margin: 0;
    text-align: center;
    
}

.boton-container {
    display: flex;
    justify-content: space-between;
}