* {
    font-family: 'Open Sans', sans-serif;
}
#iddatatable td,
#iddatatable th {
    white-space: normal !important;
    word-break: break-word;
    vertical-align: top;
}
a:visited,
a:link,
a:focus,
a:hover,
a:active {
    list-style: none;
    text-decoration: none;
    color:  #0a988b;
}

h2,h1,h5{
    color:  #ffffff;
}
/* color de la palntilla */

.backColor,
.backColor a {
    background: #d4433b;
    color: white;
}
.text-negro {
    color: rgb(64, 71, 64);
    font-weight: bold;
}

 label {
    display: inline-block;
    margin-top: 0.8rem;  
    margin-bottom: 0.1rem;
    font-size: 14px;
    color: #0e0d0d;
    /*color: #ef9c82;*/
    font-weight: 100 !important; /* Fuente ultrafina */
    
} 
.color-cintillo-negro {
    background: #272525;
    color: #b9b5ae;

}

.menu {
    background: #061722;
   
    color: #b9b5ae;

}

footer.footer {
    background: #0a988b;
    color: #0c0c0c;
    margin-top: 200px;
    padding: 0px 0px;
}

.color-negro-oscuro {
    background: #061722;
    color: #0c0c0c;

}
.color-negro-claro {
    background: #061722;
    color: #0a988b;
}
.color-negro-claro2 {
    background: #183f49;
    color: #0a988b;
}

.text-blanco {
    color: #fbd6bc;
}

.mensaje-expandible {
    display: inline-block;
    max-width: 200px; /* Define un ancho fijo */
    white-space: nowrap; /* Mantiene el texto en una sola línea */
    overflow: hidden; /* Oculta el texto excedente */
    text-overflow: ellipsis; /* Agrega los puntos suspensivos */
    cursor: pointer;
    padding: 5px;
    transition: all 0.3s ease-in-out;
}


/* Color negro en las opciones */
.select2-results__option {
    color: black;
    position: relative;
  }
  
  /* Tooltip con forma de globo */
  .tooltip-globo {
  position: absolute;
  background: #343a40;
  color: #fff;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 10px;
  max-width: 250px;
  white-space: normal;
  z-index: 99999;
  display: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
  
  /* Flechita del globo */
  .tooltip-globo::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -6px;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent #343a40 transparent transparent;
  }

 /* Centrar el texto dentro del select2 cerrado */
/* Revertir centrado de texto y estilos personalizados */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    text-align: left;
    line-height: normal;
    padding-left: 10px;
    color: #000;
    font-size: 16px; /* Ajustalo a tu gusto */
}

/* Estilo normal de la caja */
.select2-container--default .select2-selection--single {
    height: 38px;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

/* Alinear el placeholder también */
.select2-selection__placeholder {
    text-align: left;
    color: #888;
}



.mensaje-expandible:hover {
    white-space: normal; /* Permite que el texto se expanda en varias líneas */
    overflow: visible;
    /* background-color: #f8f9fa; */
    border-radius: 5px;
    padding: 5px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}


.boton-guardar {
    background-color: #183f49; /* Color de fondo del botón */
    border: 0.5px solid #0a9835; /* Borde blanco */
    color: #0a9835; /* Color del texto */
    padding: 5px 10px; /* Espaciado interno */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    cursor: pointer;
    border-radius: 0.5px; /* Bordes redondeados */
    transition: background-color 0.1s, color 0.1s; /* Transición suave para hover */
}

.boton-guardar:hover {
    background-color: #0a9835; /* Cambio de color de fondo al pasar el ratón */
    color: #fdfdfd; /* Cambio de color de texto al pasar el ratón */
    border: 2px solid #0a9835; /* Borde blanco */
}






/* Estilos generales para los formularios */
.formulario .form-control {
    background-color: #183f49; /* Verde claro para el fondo */
    border: 1px solid #123332; /* Verde oscuro para el borde */
    color: #fcfcfb; /* Color dorado claro para el texto */
    padding: 5px; /* Espaciado interno para mejor lectura */
}

.formulario .form-control:focus {
    border-color: #f3c7a8; /* Color dorado cuando el input está enfocado */
    box-shadow: 0 0 5px rgba(243, 199, 168, 0.5); /* Sombra ligera alrededor del campo enfocado */
}

/* Estilos para los labels para mantener la coherencia con el diseño del input */
.formulario label {
    color: #f3c7a8; /* Color dorado claro para los labels */
    font-weight: normal; /* Peso de la fuente normal */
    margin-bottom: 5px; /* Margen inferior para separar del input */
}

/* Estilo para los select que combina con los inputs */
.formulario .form-select {
    background-color: #183f49;
    border: 1px solid #123332;
    color: #fcfcfb;
}

.formulario .form-select:focus {
    border-color: #f3c7a8;
   /* box-shadow: 0 0 5px rgba(243, 199, 168, 0.5);*/
}
/* Estilos para input cuando pierde el foco */
.form-control:blur {
    background-color: #123332; /* Regresa al verde oscuro */
    color: #fcfcfb; /* Mantiene el color dorado de las letras */
    border-color: #153e41; /* Borde del mismo color verde claro */
}






.swal2-title-small {
    font-size: 14px; /* Ajusta el tamaño según necesites */
  }
  
  .swal2-html-container-small {
    font-size: 12px; /* Ajusta el tamaño del mensaje */
  }
/* oculta el buscar del data table */
  div.dataTables_filter {
    display: none;
}











body {
    background-color: #112836;
    color: #fbd6bc;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
     /* padding: 80px; */
} 

.text-section h1 {
    font-size: 3.5rem;
    font-weight: bold;
    text-align: center;
}

.text-section p {
    font-size: 1.1rem;
    margin-top: 5px;
}

.buttons {
    margin-top: 20px;
}

.buttons .btn-primary {
    background-color: #000000;
    border: 1px solid #ffffff;
    margin-right: 10px;
}

.btn-success {
    /* background-color: #ffffff;
    color: #000000; */
    margin-right: 10px;
}
.buttons .btn-light {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #ffffff;
}

.image-section img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

/* @media (max-width: 768px) {
    .row {
        text-align: center;
    }
    .buttons .btn {
        width: 100%;
        margin-bottom: 10px;
    }
} */

@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
    }
}
.table-wrapper-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-wrapper-scroll-x table {
    width: 100%;
    min-width: 1400px; /* O ajustalo al tamaño natural de tus columnas */
    table-layout: auto;
    white-space: nowrap;
}

.custom-img-size {
    max-width: 50%; /* Ajusta según sea necesario */
    height: auto; /* Mantiene la proporción de la imagen */
}
/* Hace scroll horizontal solo dentro de tablas específicas sin afectar el resto */
.inca-scroll-x {
    overflow-x: auto;
    width: 100%;
  }
  
  /* Garantiza que la tabla mantenga su forma al hacer scroll horizontal */
  .inca-scroll-x table {
    white-space: nowrap;
    min-width: 100%;
  }
  
  /* Mejor control sobre la altura máxima en modales grandes */
  .modal-xl {
    max-width: 95% !important;
  }
  
  /* Asegura que las celdas tengan un padding uniforme y no se deformen */
  .inca-scroll-x th,
  .inca-scroll-x td {
    vertical-align: middle;
    padding: 8px;
  }
  
  /* Ajustes adicionales opcionales si deseas mantener la estética */
  #tablaInteracciones th,
  #tablaInteracciones td {
    font-size: 0.875rem; /* Tamaño de fuente pequeño */
  }
/* Evita que el select se desborde */
#modalAsignarContactos select#vendedorSelect {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    z-index: 1040; /* asegurarse de que esté dentro del modal */
  }
    





.inner-container {
    background-color: #304755; /* Color más oscuro */
    padding: 10px;
    border-radius: 8px; /* Opcional: bordes redondeados */
    color: #ffffff; /* Texto en color blanco para mayor contraste */
    max-width: 120%
}


/* Contenedor para las tarjetas */
.card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.card-container .card:nth-child(4),
.card-container .card:nth-child(5) {
    grid-column: span 2;
}

/* Estilo de las tarjetas */
 .card {
    background-color: #304755;
    /* max-width: 380px;*/
    padding: 15px;
    border-radius: 1px; 
    margin: 5px; 
    text-align: left;
    color: #ffffff;
    border: none; 
       
    
} 

.row {
    display: flex;
    justify-content: center; /* Centra el contenido en la fila */
    flex-wrap: wrap; /* Permite que las tarjetas pasen a otra línea en pantallas pequeñas */
    
}

.row-text {
    display: flex;
    justify-content: left; /* Centra el contenido en la fila */
    flex-wrap: wrap; /* Permite que las tarjetas pasen a otra línea en pantallas pequeñas */
}


.large-card {
    max-width: auto;  /* Aumenta el tamaño máximo para las tarjetas grandes */
    flex-grow: 1;  /* Permite que las tarjetas crezcan para ocupar el espacio */
}


.card-text {
    line-height: 1.8; /* Ajusta el valor según lo que necesites */
    color: #ffffff;
}







.parent {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 8px;
}
    
.div1 {
    grid-column: span 2 / span 2;
}

.div2 {
    grid-column: span 2 / span 2;
    grid-column-start: 3;
}

.div3 {
    grid-column: span 2 / span 2;
    grid-column-start: 5;
}

.div4 {
    grid-column: span 3 / span 3;
    grid-row-start: 2;
}

.div5 {
    grid-column: span 3 / span 3;
    grid-column-start: 4;
    grid-row-start: 2;
}
        


/* Reduce el padding entre las opciones de la lista */
.nav-item {
    padding-right: 5px; /* Ajusta el valor según lo necesites */
    padding-left: 5px;  /* Ajusta el valor según lo necesites */
}

/* Reduce el espacio en los elementos del dropdown */
.dropdown-menu .dropdown-item {
    padding-top: 5px;  /* Ajusta el valor según lo necesites */
    padding-bottom: 5px;  /* Ajusta el valor según lo necesites */
}











.login {
    width: 33% !important;
}

.card-header {
    background-color: #04aeae !important;
}

.boton {
    background-color: #04aeae !important;
}

.error {
    font-style: italic;
    color: #9b1414;
    font-size: 12px;
    margin-top: 0;
}




.precioFinal {
    margin-top: -5px;
}

.precioReal {
    text-decoration: line-through;
    color: #999;
    font-size: 15px;
    margin-top: -5;
}

.tituloSegu {
    line-height: 20px;
}


/*=============================================
CATEGORIAS pintar las opciones cuando pases el mause
=============================================*/

.listaCategorias li:hover
/*.listaSubcategorias li:hover*/

{
    color: #d4433b;
    /* text-decoration: none; */
}


/*=============================================
ERROR 404
=============================================*/

.error404 h1 {
    font-size: 10em;
    color: #333;
    text-shadow: 8px 8px 1px #dadada;
}


/*=============================================
BANNER
=============================================*/

/* .banner {
    position: relative;
    overflow: hidden;
}

.banner .textoBanner {
    position: absolute;
    font-family: 'Ubuntu Condensed', sans-serif;
}

.banner .textoIzq {
    left: 0px;
    text-align: left;
   
}

.banner .textoIzq h1 {
    background: rgba(0, 0, 0, .9);
    text-shadow: 0px 0px 10px black;
    border-radius: 0px 5px 5px 0px;
  
}

.banner .textoDer {
    right: 50px;
    text-align: right;
   
} */


/*=============================================
ESCRITORIO estra grande (revisamos en 1920px en adelante)
=============================================*/
@media (min-width: 1600px) {
    .container { max-width: 1400px; }
    /* Agrega más ajustes aquí */
}
/* 
@media (min-width:1600px) {
    .container {
        max-width: 80% !important;
    }
    header {
        height: 70px;
    }
   
    .modal-content {
        margin-top: 160px;
    }
    .logotipo {
        margin-top: -7px;
    }
    .banner {
        height: 200px;
    }
    .textoBanner h1 {
        font-size: 35px;
        line-height: 25px;
    }
    .textoBanner h2 {
        font-size: 30px;
        line-height: 25px;
    }
    .textoBanner h3 {
        font-size: 24px;
        line-height: 25px;
    }
    .banner .textoIzq {
        top: 63px;
    }
    .banner .textoIzq h1 {
        font-size: 40px;
        padding: 25px;
        padding-left: 100px;
    }
    .banner .textoDer {
        top: 20px;
    } */
    /*=============================================
	5 COLUMNAS
	=============================================*/
    /* .col-5th {
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }
} */


/*=============================================
ESCRITORIO (XL revisamos en 1366px en adelante)
=============================================*/
@media (max-width: 1599px) and (min-width: 1200px) {
    .container { max-width: 100% !important; }
    header { height: 70px; }
    #modalCategorias .modal-content { margin-top: 54px; }
    .banner { height: 200px; }
    .textoBanner h1 { font-size: 35px; line-height: 25px; }
    .textoBanner h2 { font-size: 30px; line-height: 25px; }
    .textoBanner h3 { font-size: 24px; line-height: 25px; }
    .banner .textoIzq { top: 63px; }
    .banner .textoIzq h1 { font-size: 40px; padding: 25px; padding-left: 100px; }
    .banner .textoDer { top: 20px; }
}

/* @media (max-width:1599px) and (min-width:1200px) {
    .container {
        max-width: 100% !important;
    }
    header {
        height: 70px;
    }
   
    .modal-content {
        margin-top: 160px;
    }
    .banner {
        height: 200px;
    }
    .textoBanner h1 {
        font-size: 35px;
        line-height: 25px;
    }
    .textoBanner h2 {
        font-size: 30px;
        line-height: 25px;
    }
    .textoBanner h3 {
        font-size: 24px;
        line-height: 25px;
    }
    .banner .textoIzq {
        top: 63px;
    }
    .banner .textoIzq h1 {
        font-size: 40px;
        padding: 25px;
        padding-left: 100px;
    }
    .banner .textoDer {
        top: 20px;
    } */
    /*=============================================
	5 COLUMNAS
	=============================================*/
    /* .col-5th {
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }
} */


/*=============================================
TABLET HORIZONTAL (LG revisamos en 1024px)
=============================================*/
@media (max-width: 1023px) and (min-width: 768px) {
    .table-responsive { overflow-x: auto; }
    .nav-tabs .nav-link { font-size: 13px; }
    .form-control, .btn { font-size: 13px; }
}

/* @media (max-width:1199px) and (min-width:992px) {
    header {
        height: 70px;
    }
    .logotipo img {
        margin-top: 2px;
    }
  
    .modal-content {
        margin-top: 160px;
    }
    .banner {
        height: 170px;
    }
    .textoBanner h1 {
        font-size: 25px;
        line-height: 15px;
    }
    .textoBanner h2 {
        font-size: 20px;
        line-height: 15px;
    }
    .textoBanner h3 {
        font-size: 20px;
        line-height: 15px;
    }
    .banner .textoIzq {
        top: 50px;
    }
    .banner .textoIzq h1 {
        font-size: 30px;
        padding: 25px;
        padding-left: 60px;
    }
    .banner .textoDer {
        top: 20px;
    } */
    /*=============================================
	5 COLUMNAS
	=============================================*/
    /* .col-5th {
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }
} */


/*=============================================
TABLET VERTICAL (MD revisamos en 768px)
=============================================*/
@media (max-width: 767px) and (min-width: 576px) {
    .modal-dialog { max-width: 95%; }
    .form-group label { font-size: 13px; }
    .form-control { font-size: 13px; }
    .table { font-size: 12px; }
}

/* @media (max-width:991px) and (min-width:768px) {
    header {
        height: 70px;
    }
   
    .modal-content {
        margin-top: 160px;
    }
    .banner {
        height: 130px;
    }
    .textoBanner h1 {
        font-size: 25px;
        line-height: 20px;
    }
    .textoBanner h2 {
        font-size: 20px;
        line-height: 20px;
    }
    .textoBanner h3 {
        font-size: 20px;
        line-height: 20px;
    }
    .banner .textoIzq {
        top: 30px;
    }
    .banner .textoIzq h1 {
        font-size: 20px;
        padding: 25px;
        padding-left: 60px;
    }
    .banner .textoDer {
        top: 23px;
    }
    .countdown {
        display: none;
    }
    
} */


/*=============================================
MÓVIL HORIZONTAL (SM revisamos en 576px)
=============================================*/
@media (max-width: 575px) {
    .modal-dialog { max-width: 100%; margin: 10px; }
    .btn, .form-control, .nav-link { font-size: 12px; }
    .table { font-size: 11px; }
}

/* @media (max-width:767px) and (min-width:576px) {
    header {
        height: 70px;
    }
    .logotipo img {
        margin-top: 6px;
    }
   
    .modal-content {
        margin-top: 160px;
    }
    .banner {
        height: 100px;
    }
    .textoBanner h1 {
        display: none;
    }
    .textoBanner h2 {
        display: none;
    }
    .textoBanner h3 {
        display: none;
    }
    .banner .textoIzq {
        top: 15px;
    }
    .banner .textoIzq h1 {
        font-size: 20px;
        padding: 20px;
        text-align: center;
        display: block;
    }
    .precioFinal {
        font-size: 21px;
    }
} */


/*=============================================
MOVIL VERTICAL (revisamos en 320px)
=============================================*/
@media (max-width: 480px) and (orientation: portrait) {
    .container, .modal-content { padding: 5px; }
    .table { font-size: 11px; }
    .btn, .form-control { font-size: 12px; }
}

/* @media (max-width:575px) {
    
    .modal-content {
        margin-top: 160px;
    }
    .banner {
        height: 90px;
    }
    .textoBanner h1 {
        display: none;
    }
    .textoBanner h2 {
        display: none;
    }
    .textoBanner h3 {
        display: none;
    }
    .banner .textoIzq {
        top: -7px;
        left: 50%;
        width: 800px;
        margin-left: -400px;
        text-align: center;
    }
    .banner .textoIzq h1 {
        font-size: 20px;
        padding: 20px;
        text-align: center;
        display: block;
        background: rgba(0, 0, 0, .1);
    }
    .cotizar {
        margin-top: -25px;
    }
} */
.rw {
    margin-top: 9.5rem;
   
}

/* multiformulario */

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    /* margin-TOP: 7.5rem; */
    display: flex;
    
    
    flex-direction: column;
}


/*Background color*/

#grad1 {
    background-color: #9C27B0;
    /* background-image: linear-gradient(120deg, #FF4081, #81D4FA); */
    /* background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%); */
    background-image: linear-gradient(to top, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%);
}


/*form styles*/

#msform {
    text-align: center;
    position: relative;
    margin-top: 20px;
}

#msform fieldset .form-card {
    background: white;
    border: 0 none;
    border-radius: 0px;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
    padding: 20px 40px 30px 40px;
    box-sizing: border-box;
    width: 94%;
    margin: 0 3% 20px 3%;
    /*stacking fieldsets above each other*/
    position: relative;
}

#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;
    /*stacking fieldsets above each other*/
    position: relative;
}


/*Hide all except first fieldset*/

#msform fieldset:not(:first-of-type) {
    display: none;
}

#msform fieldset .form-card {
    text-align: left;
    color: #5a5454;
}

#msform input,
#msform textarea {
    padding: 0px 8px 4px 8px;
    border: none;
    border-bottom: 1px solid #0bca0b;
    border-radius: 0px;
    margin-bottom: 0px;
    margin-top: 2px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 16px;
    letter-spacing: 1px;
}

#msform input:focus,
#msform textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: none;
    font-weight: bold;
    
    border-bottom: 2px solid rgb(22, 142, 44);
    outline-width: 0;
}


/*Blue Buttons*/

#msform .action-button {
    width: 120px;
    background: #d4433b;
    /* font-weight: bold; */
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}

#msform .action-button:hover,
#msform .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px skyblue;
}


/*Previous Buttons*/

#msform .action-button-previous {
    width: 100px;
    background: #616161;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}

#msform .action-button-previous:hover,
#msform .action-button-previous:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #616161;
}


/*Dropdown List Exp Date*/

select.list-dt {
    border: none;
    outline: 0;
    border-bottom: 1px solid #ccc;
    padding: 2px 5px 3px 5px;
    margin: 2px;
}

select.list-dt:focus {
    border-bottom: 2px solid skyblue;
}


/*The background card*/

.app-body .card {
    z-index: 0;
    border: none;
    border-radius: 0.5rem;
    position: relative;
    max-height: 250px;
}

/*contenedor de la tarjeta del login*/
.login-container .card  {
    
    max-height: 340px;
}


/*FieldSet headings*/

.fs-title {
    font-size: 25px;
    color: #2C3E50;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: left;
}


/*progressbar*/

#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: lightgrey;
}

#progressbar .active {
    color: #000000;
}

#progressbar li {
    list-style-type: none;
    font-size: 12px;
    width: 25%;
    float: left;
    position: relative;
}


/*Icons in the ProgressBar*/

#progressbar #account:before {
    font-family: FontAwesome;
    content: "\f1b9";
}

#progressbar #personal:before {
    font-family: FontAwesome;
    content: "\f4c0";
}

#progressbar #payment:before {
    font-family: FontAwesome;
    content: "\f09d";
}

#progressbar #confirm:before {
    font-family: FontAwesome;
    content: "\f00c";
}


/*ProgressBar before any progress*/

#progressbar li:before {
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 18px;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px;
}


/*ProgressBar connectors*/

#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 25px;
    z-index: -1;
}


/*Color number of the step and the connector before it*/

#progressbar li.active:before,
#progressbar li.active:after {
    background: skyblue;
}


/*Imaged Radio Buttons*/

.radio-group {
    position: relative;
    margin-bottom: 25px;
}

.radio {
    display: inline-block;
    width: 204;
    height: 104;
    border-radius: 0;
    background: lightblue;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    cursor: pointer;
    margin: 8px 2px;
}

.radio:hover {
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3);
}

.radio.selected {
    box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);
}


/*Fit image in bootstrap div*/

.fit-image {
    width: 100%;
    object-fit: cover;
}

.text-activo {
    color: #0a988b !important; /* o el color exacto de los enlaces activos */
  }
  
  .text-inactivo {
    color: gray !important;
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.7;
  }


/* Ajustar altura de los select para que coincida con los input */
.custom-input, .custom-select {
    height: 38px; /* Misma altura para todos los campos */
    border-radius: 5px; /* Bordes redondeados */
}

/* Ajusta el ancho del select para que no sobresalga */
.custom-select {
    width: 100%;
}

/* Estilo para el botón de cierre (X) */
.btn-close {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    transition: background-color 0.2s;
}

.btn-close:hover {
    background-color: rgba(255, 255, 255, 1);
}







/* TABLA CONTACTOS */
/* Estilo para el encabezado oscuro de la tabla */
/* Estilo para el borde de la tabla */
.table {
    border-collapse: collapse;
    font-size: 12px; /* Reducimos el tamaño de la letra en toda la tabla */
    /* table-layout: fixed; Asegura que las columnas tengan un ancho fijo */
    table-layout: auto; /* Ajuste automático al contenido */
    width: 100%; /* Ocupa todo el ancho disponible */
}
.table thead {
    position: sticky;
    top: 0;
    background-color: #343a40; /* Gris oscuro o negro */
    color: white;
    z-index: 100; /* Asegura que el encabezado quede por encima del contenido */
}

/* Estilo para las filas alternadas en el cuerpo de la tabla */
.table tbody tr:nth-child(odd) {
    
    background-color: rgb(230, 242, 253); /* Fondo blanco */
    color: #333 !important; /* Aseguramos que el texto en filas blancas sea oscuro */

}

.table tbody tr:nth-child(even) {
    background-color: #f0f8ff; /* Azul claro (light blue) */
    color: #333 !important; /* Aseguramos que el texto en filas blancas sea oscuro */

}



/* Estilo de las celdas */
.table td, .table th {
    padding: 4px 8px; /* Añadir espacio interno */
    text-align: left;
    width: 80px; /* Ajusta el ancho de las columnas (puedes cambiar este valor según tus necesidades) */
    font-size: 12px; /* Reducir el tamaño de la letra */
    word-wrap: break-word; /* Asegura que el texto largo se ajuste y no se desborde */
}

/* Añadir bordes a las celdas */
.table td, .table th {
    border: 1px solid #dee2e6; /* Borde gris claro */
}
.table-responsive {
    max-height: 80vh; /* Limitar la altura de la tabla para que tenga scroll si es necesario */
    overflow: auto; /* Agrega un scroll a la página si la tabla excede la altura */
    display: block;

}

/* Agregar un cambio de color en el hover */
.table tbody tr:hover {
    background-color: #e6f7ff; /* Cambiar el color al pasar el ratón (hover) */
}

/* Estilo adicional para el texto en las celdas de teléfono */
.table td.tele {
    color: #007bff; /* Azul para los números de teléfono */
    font-weight: bold; /* Para hacer los números más destacados */
}
/* Estilo para los select dentro de la tabla */
.table select {
    background-color: #ffffff; /* Fondo blanco */
    color: #333; /* Letras oscuras */
    border: 1px solid #dee2e6; /* Borde gris claro */
    padding: 5px 10px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 12px; /* Tamaño de la letra más pequeño */
    width: 100%; /* Asegura que el select ocupe todo el ancho disponible */
    -webkit-appearance: none; /* Elimina el estilo por defecto de algunos navegadores */
    -moz-appearance: none;
    appearance: none;
}

/* Para agregar una flecha personalizada si es necesario */
.table select::-ms-expand {
    display: none; /* Eliminar la flecha en IE y Edge */
}

/* Estilo al pasar el mouse (hover) sobre el select */
.table select:hover {
    border-color: #28a745; /* Cambiar el borde a verde cuando pasa el mouse */
}

/* Filtro de color en el foco */
.table select:focus {
    outline: none;
    border-color: #007bff; /* Cambio del borde cuando está enfocado */
}


/* Ajustar la posición del modal */
.modal-dialog {
    margin-top: 1px; /* Mueve el modal hacia arriba */
}
.modal-up {
    margin-top: 1px !important; /* Ajustá este valor a gusto */
}