.contenedor-busqueda {display: flex;justify-content: center;gap: 10px;}

.icon-button {display: flex;flex-direction: column;align-items: center;text-decoration: none;color: inherit;}

.icon-button span {margin-top: 5px;}

table {border-collapse: collapse;overflow: hidden;}

th, td, tr {padding: 15px;background-color: rgba(255, 255, 255, 0.2);/*color: #fff*/;border: 1px solid rgb(53, 137, 253);}

thead {
  th {background-color: #55608f;&:first-child {background-color: #55608f;}}
}

tbody {
  tr {
    &:hover {background-color: rgba(255, 255, 255, 0.3);}
    td {position: relative;&:hover {&:before {content: "";position: absolute;left: 0;right: 0;top: -9999px;bottom: -9999px;background-color: rgba(255, 255, 255, 0.2);z-index: -1;}}&:first-child {background-color: #59ffa9b0;}}
    th {background-color: #59ffa9b0;}
  }
}

input {height: 32px;width: 400px;border: 1px solid #ccc;border-radius: 5px;font-family: inherit;box-sizing: border-box;text-align: center;}

select {border-radius: 20px;background-color: #fff;width:200px;text-align:center;}
select option {border-radius: 20px;text-align:center;}

a span {margin-left: 10px;}

.borde1px {border: 1px solid;}



/* ESTILOS PARA EL KARDEX*/
.flexwrap {flex-wrap: wrap;}
.margen10 {margin: 10px;}
.w-100 {width: 100%;}
/* Centrar labels */
.labelcentrado {display: block;text-align: center;margin: auto;}
/* Centrar el div que contiene todos los labels e inputs */
.contenedor-pagos {display: flex;flex-wrap: wrap;justify-content: center;}
/* Estilo para cada pago individual */
.pago-individual {flex-basis: calc(33.333% - 20px); /* Ajustar el ancho para 3 por fila, restando el margen */margin: 10px;text-align: center;}
/* Estilo para los inputs de fecha */
.fechas-pago {display: flex;justify-content: space-between;width: 100%;}
/* Estilo para los inputs de fecha individuales */
.fechas-pago input[type="date"] {margin: 5px;}


ul li a span {color:rgb(221, 221, 221);}
div a span {color:rgb(0, 0, 0);}
div ul li a {color:rgb(221, 221, 221);}

/* MIS ESTILOS */
/* ESTILOS DE LOS CONTENIDOS */
/* Puntero */
.reemplazarpunteropormano {cursor: pointer;}
/* Borde circular */
.inputborder {border-radius: 20px;}
.inputborder5px {border-radius: 5px;}
.sinbordes {border: none;}
.borderadio20 {border-radius: 20px;}
.borderadio50 {border-radius: 50px;}
/* Centrar */
.centrartexto {text-align: center;}
.derechatexto {text-align: right;}
.izquierdatexto {text-align: left;}
.izquierdatextoimportant {text-align: left !important;}
.justificartexto {text-align: justify;}
.alinearitems {align-items: center;}
.justificar {justify-content: center;}
.justificarimportante {justify-content: center !important;}
.justificarizquierda {justify-content: left;}
/* Margenes */
.margenautomatico {margin: auto;}
.margenizquierdo {margin-left: 5px;}
.margenderecho {margin-right: 5px;}
.margenderecho20 {margin-right: 20px;}
.margensuperior {margin-top: 5px;}
.margensuperior2 {margin-top: 20px;}
.margeninferior {margin-bottom: 5px;}
.margeninferior2 {margin-bottom: 20px;}
.margenizquierdo25rem {margin-left: .50rem;}
/* Paddings */
.padding10px {padding: 10px;}
.paddingleft5 {padding-left: 5px;}
.paddingright5 {padding-right: 5px;}
.paddingleft25 {padding-left: 25px;}
.paddingright25 {padding-right: 25px;}
.paddingbottom1 {padding-bottom: 1px !important;}
.paddingtop0 {padding-top: 0px !important;}
/* Color de texto */
.colortextoblanco {color:white;}
.colortextoblancoimportante {color:white !important;}
.colortextogris {color:rgb(160, 160, 160);}
.colortextonegro {color:black;}
.colortextonegroclaro {color:rgb(47, 47, 47);}
.colortextoturquesaoscuro {color:rgb(32, 131, 113);}
/* Fondos */
.fondosemitransparente {background-color: rgba(156, 180, 219, 0.23);}
.fondoblanco {background-color: white;}
.fondomorado {background-color: #55608f;}
.fondoverdeoscuro {background-color: #022a32;}
.fondocelesteclaro {background-color: #47c6df;}
.fondocelesteoscuro {background-color: #0489a4;}
/* Ancho */
.anchomensajemodal {width: 975px;}
@media screen and (max-width: 20px) {.anchomensajemodal {width: 900px;}}
@media screen and (min-width: 400px) {.anchomensajemodal {width: 975px;}}
.ancho1325 {width: 1325px;}
.ancho1100 {width: 1100px;}
.ancho975 {width: 975px;}
.ancho950 {width: 950px;}
.ancho920 {width: 920px;}
.ancho900 {width: 900px;}
.ancho800 {width: 800px;}
.ancho700 {width: 700px;}
.ancho600 {width: 600px;}
.ancho500 {width: 500px;}
.ancho450 {width: 450px;}
.ancho400 {width: 400px;}
.ancho300 {width: 300px;}
.ancho250 {width: 250px;}
.ancho225 {width: 225px;}
.ancho200 {width: 200px;}
.ancho175 {width: 175px;}
.ancho150 {width: 150px;}
.ancho75 {width: 75px;}
.ancho60 {width: 60px;}
.ancho50 {width: 50px;}
.ancho35 {width: 35px;}
.ancho25 {width: 25px;}
.ancho20 {width: 20px;}
@media screen and (max-width: 1325px) {.ancho1325 {width: 450%;}} /* Cuando la pantalla tiene 700px o menos, cambia el ancho */
@media screen and (max-width: 1100px) {.ancho1100 {width: 100%;}} /* Cuando la pantalla tiene 700px o menos, cambia el ancho */
@media screen and (max-width: 920px) {.ancho920 {width: 100%;}} /* Cuando la pantalla tiene 700px o menos, cambia el ancho */
@media screen and (max-width: 900px) {.ancho900 {width: 100%;}} /* Cuando la pantalla tiene 700px o menos, cambia el ancho */
@media screen and (max-width: 700px) {.ancho700 {width: 100%;}} /* Cuando la pantalla tiene 700px o menos, cambia el ancho */
@media screen and (max-width: 500px) {.ancho500 {width: 100%;}} /* Cuando la pantalla tiene 500px o menos, cambia el ancho */
/* Alto */
.alto450 {height: 450px;}
.alto350 {height: 350px;}
.alto250 {height: 250px;}
.alto125 {height: 125px;}
.alto60 {height: 60px;}
/* Alto y Ancho */
.alto50ancho50 {height: 50px;width: 50px;}
.alto65ancho65 {height: 65px;width: 65px;}
.alto70ancho70 {height: 70px;width: 70px;}
.alto75ancho75 {height: 75px;width: 75px;}
/* Display */
.displayblock {display: block;}
.displayflex {display: flex;}
.displaynones {display: none;}
div .displaynone {display: none;}
.direccioncolumnasflex {flex-direction: column;}
/* Texto debajo de sus iconos */
.leyenda {display: flex;flex-direction: column;align-items: center;}
/* Pone los radio button dentro de un radio group en la misma linea */
.radio-group {display: flex;align-items: center;gap: 10px; justify-content: center;}
.radio-option {display: flex;flex-direction: column;align-items: center;}
/* Agrupa divs de radio button */
.agrupacionradio {display: flex; justify-content: space-between;}
/* Pone estilos a un span para que sea una linea horizontal */
.lineaspan400 {border: 1px outset #a7a7a7; width: 400px;margin-top: 5px;}
.lineaspan200 {border: 1px outset #a7a7a7; width: 200px;margin-top: 5px;}
.lineaspan400inlineblock {display: inline-block;border: 1px outset #a7a7a7; width: 400px;margin-top: 5px;}
.lineaspan200inlineblock {display: inline-block;border: 1px outset #a7a7a7; width: 200px;margin-top: 5px;}
/* Margen para LI */
.margenli {margin: 10px 0;}
/* Tamaño de letra */
.letra18 {font-size:18px}
/* Negrita */
.negrita {font-weight: bold;}
/* Incrementar un poco el tamaño de letra */
.incrementarletra {font-size: larger;}



/* CSS Para las imagenes */
.centrartextareaenp{text-align: center;}
.centrarlabel {text-align: center;display: block; /* Esto asegura que el label ocupe toda la línea y pueda centrarse correctamente */}
.alto_imagenes {height: 250px !important;}
.ancho_imagenes {width: 500px !important;}

/* Estilos para los mensajes popover */
.popover-mensaje {
  position: absolute;
  bottom: 100%; /* Ajusta según la posición del icono */
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 10;
  margin-bottom: 2px;
  width: 200px;
}
.psinmargensuperior {margin-top: auto !important;}

.inputplaceholder::placeholder{color: rgb(255, 255, 255);}
.inputplaceholder2::placeholder{color: rgba(38, 38, 38, 0.487);}