body {
  min-height: 100vh;
  background: #F9FAFD;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: 100%;

}
/* Pre css */
.flex {
  display: flex;
  align-items: center;
}
.nav_image {
  display: flex;
  min-width: 55px;
  justify-content: center;
}
.nav_image img {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  object-fit: cover;
}

.logo_items {
  gap: 8px;
}
.logo_name {
  font-size: 22px;
  color: #333;
  font-weight: 500px;
  transition: all 0.7s ease;
}


/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 270px;
  background: #fff; 
  padding: 15px 10px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  transition: all 0.7s ease;
}


.sidebar.close .logo_name,
.sidebar.close #lock-icon,
.sidebar.close #sidebar-close {
  opacity: 0;
  pointer-events: none;
}
#lock-icon,
#sidebar-close {
  padding: 10px;
  color: #00A1FF;
  font-size: 25px;
  cursor: pointer;
  margin-left: -4px;
  transition: all 0.7s ease;
}
#sidebar-close {
  display: none;
  color: #333;
}
.menu_container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 40px;
  overflow-y: auto;
  height: calc(100% - 82px);
}

.menu_items>ul{
  padding-left:0px;
  color:#2A3548;
}



.sidebar-submenu {
  display: none;
  text-decoration: none;
}

.sbmnu_item{
  padding: 7px 0px;
}
.sbmnu_item_a{
  color: #78829d;
  text-decoration: none;
}



.menu_container::-webkit-scrollbar {
  display: none;
}
.menu_title {
  position: relative;
  height: 50px;
  width: 55px;
}
.menu_title .title {
  margin-left: 15px;
  transition: all 0.7s ease;
}
.sidebar.close .title {
  opacity: 0;
}
.menu_title .line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 3px;
  width: 20px;
  border-radius: 25px;
  background: #aaa;
  transition: all 0.7s ease;
}
.menu_title .line {
  opacity: 0;
}
.sidebar.close .line {
  opacity: 1;
}
.item {
  list-style: none;
  
}
.link {
  text-decoration: none;
  border-radius: 8px;
  margin-bottom: 8px;
  color: inherit;
}

.active_link {
  text-decoration: none;
  border-radius: 8px;
  margin-bottom: 8px;
}

.zone_mnu_active{

  background-color: #EAF5FF !important;
  color: #00A1FF;
  border-radius: 8px
}

.link:hover {
  color: #00A1FF;
  
}
.link span {
  white-space: nowrap;
}
.link i {
  height: 50px;
  min-width: 55px;
  display: flex;
  font-size: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.sidebar_profile {
  padding-top: 15px;
  margin-top: 15px;
  gap: 15px;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
}
.sidebar_profile .name {
  font-size: 18px;
  color: #333;
}
.sidebar_profile .email {
  font-size: 80%;
  color: #333;
}

/* navbartop */
.navbartop {
  max-width: 500px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 60%;
  transform: translateX(-50%);
  background: #fff;
  padding: 10px 20px;
  border-radius: 0 0 15px 15px;
  justify-content: space-between;
  z-index: 3;
  opacity: .2;
}

.msgsuccess {
  
  max-width: 500px;
  width: 100%;
  position: fixed;
  top: 20px; /* Ajusta la posición vertical */
  left: 50%; /* Centrado horizontal */
  transform: translateX(-50%);
  padding: 15px 20px; /* Aumentar el padding para más espacio */
  border-radius: 8px; /* Bordes redondeados */
  text-align: center; /* Centrado del texto */
  z-index: 30;
  background: #50CD89; /* Fondo  */
  color: #ffffff; /* Color del texto */
  font-size: 18px; /* Tamaño de fuente */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Sombra para profundidad */
  opacity: 1; /* Comienza completamente visible */
  animation: fadeInOutMsg 4s forwards; /* Animación de entrada y salida */
  display: flex; /* Usar flexbox para centrar el contenido */
  align-items: center; /* Centrar verticalmente */
  gap: 10px; /* Espacio entre el icono y el texto */
}

.msgsuccess::before {

  font-family: "Font Awesome 5 Free"; /* Especificar la fuente de Font Awesome */
  content: "\f058"; /* Código del icono de Font Awesome (check) */
  font-weight: 900; /* Peso del icono */
  font-size: 26px; /* Tamaño del icono */
  margin-right: 10px; /* Espacio entre el icono y el texto */
  color: #ffffff; /* Color del icono */
}

.msgerror {
  max-width: 500px;
  width: 100%;
  position: fixed;
  top: 20px; /* Ajusta la posición vertical */
  left: 50%; /* Centrado horizontal */
  transform: translateX(-50%);
  padding: 15px 20px; /* Aumentar el padding para más espacio */
  border-radius: 8px; /* Bordes redondeados */
  text-align: center; /* Centrado del texto */
  z-index: 30;
  background: #dc3545; /* Fondo  */
  color: #ffffff; /* Color del texto */
  font-size: 18px; /* Tamaño de fuente */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Sombra para profundidad */
  opacity: 1; /* Comienza completamente visible */
  animation: fadeInOutMsg 4s forwards; /* Animación de entrada y salida */
  display: flex; /* Usar flexbox para centrar el contenido */
  align-items: center; /* Centrar verticalmente */
  gap: 10px; /* Espacio entre el icono y el texto */
}

.msgerror::before {

  font-family: "Font Awesome 5 Free"; /* Especificar la fuente de Font Awesome */
  content: "\f057"; /* Código del icono de Font Awesome (check) */
  font-weight: 900; /* Peso del icono */
  font-size: 26px; /* Tamaño del icono */
  margin-right: 10px; /* Espacio entre el icono y el texto */
  color: #ffffff; /* Color del icono */
}

.msgwarning {
  max-width: 500px;
  width: 100%;
  position: fixed;
  top: 20px; /* Ajusta la posición vertical */
  left: 50%; /* Centrado horizontal */
  transform: translateX(-50%);
  padding: 15px 20px; /* Aumentar el padding para más espacio */
  border-radius: 8px; /* Bordes redondeados */
  text-align: center; /* Centrado del texto */
  z-index: 30;
  background: #FFC106; /* Fondo  */
  color: #ffffff; /* Color del texto */
  font-size: 18px; /* Tamaño de fuente */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Sombra para profundidad */
  opacity: 1; /* Comienza completamente visible */
  animation: fadeInOutMsg 4s forwards; /* Animación de entrada y salida */
  display: flex; /* Usar flexbox para centrar el contenido */
  align-items: center; /* Centrar verticalmente */
  gap: 10px; /* Espacio entre el icono y el texto */
}

.msgwarning::before {

  font-family: "Font Awesome 5 Free"; /* Especificar la fuente de Font Awesome */
  content: "\f057"; /* Código del icono de Font Awesome (check) */
  font-weight: 900; /* Peso del icono */
  font-size: 26px; /* Tamaño del icono */
  margin-right: 10px; /* Espacio entre el icono y el texto */
  color: #ffffff; /* Color del icono */
}

@keyframes fadeInOutMsg {
  0% {
    opacity: 0; /* Comienza invisible */
    transform: translateY(-20px); /* Se mueve un poco hacia arriba */
  }
  10% {
    opacity: 1; /* Se vuelve completamente visible */
    transform: translateY(0); /* Regresa a su posición original */
  }
  90% {
    opacity: 1; /* Se mantiene visible */
  }
  100% {
    opacity: 0; /* Se desvanece */
    transform: translateY(20px); /* Se mueve un poco hacia abajo al desvanecerse */
  }
}


.navbartop:hover{
  opacity: 1;
  transition: all 0.7s ease;
}

.search_box {
  height: 46px;
  max-width: 500px;
  width: 100%;
  border: 1px solid #aaa;
  outline: none;
  border-radius: 8px;
  padding: 0 15px;
  font-size: 18px;
  color: #333;
}
.navbartop img {
  height: 40px;
  width: 40px;
  margin-left: 20px;
}

#sidebar-open {
  font-size: 30px;
  color: #333;
  cursor: pointer;
  margin-right: 20px;
  display: none;
}



.sidebar.close {
  width: calc(55px + 20px);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.home-section{
  float: right;
  width: calc(100% - 270px);
  transition: all 0.7s ease;
  }


.sidebar.close ~ .home-section{
    left: 75px;
    width: calc(100% - 75px);
    transition: all 0.7s ease;
}




/* Responsive */

@media screen and (max-width: 1100px) {
  .navbartop {
    left: 65%;
  }

}

@media screen and (max-width: 800px) {
  .sidebar {
    left: 0;
    z-index: 2000;
  }
  .sidebar.close {
    left: -100%;
  }
  #sidebar-close {
    display: block;
  }
  #lock-icon {
    display: none;
  }
  .navbartop {
    left: 0;
    max-width: 100%;
    transform: translateX(0%);
  }
  #sidebar-open {
    display: block;
  }

  .home-section{
    left: 0px;
    width: calc(100% - 10px);
}


  .sidebar.close ~ .home-section{
    
    width: calc(100% - 10px);
    transition: all 0.7s ease;
  }
}

.cont{
  margin: 75px 30px 50px 30px;
}

.prg-btn-link{
  font-size: x-small;
  text-align-last: right;
}

.prg-btn-link>a{
  text-decoration: dashed;
}


.btn_icon{
  display: flex;
  font-size: 32px;
  text-decoration: none;
}


.vertical-center {
  height: 500px;
  align-content: center;
}

.inner-block-fit {
  width: fit-content;
  margin: auto;
  background: #ffffff;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
  padding: 40px 55px 45px 55px;
  transition: all .3s;
  border-radius: 15px;
}

.inner-block {

  --bs-card-spacer-y: 24px;
  --bs-card-spacer-x: 24px;
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-title-color: #111c2d;
  --bs-card-subtitle-color: rgba(17, 28, 45, 0.6);
  --bs-card-border-width: 0px;
  --bs-card-border-color: #ebf1f6;
  --bs-card-border-radius: 24px;
  --bs-card-box-shadow: 0px 1px 4px 0px rgba(133, 146, 173, 0.2);
  --bs-card-inner-border-radius: 24px;
  --bs-card-cap-padding-y: 12px;
  --bs-card-cap-padding-x: 24px;
  --bs-card-cap-bg: rgba(255, 255, 255, 0.03);
  --bs-card-bg: #fff;
  --bs-card-img-overlay-padding: 1rem;
  --bs-card-group-margin: 15px;

  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: auto; /* Cambia esto si necesitas una altura específica */
  color: var(--bs-card-title-color);
  word-wrap: break-word;
  background-color: var(--bs-card-bg);
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
  box-shadow: var(--bs-card-box-shadow);
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
  margin-bottom: 2rem;
}

.form-group {
  margin-bottom: 1rem;
}

.comment_curvo{
  font-size: 0.8rem;
  color: #4c4c4c;
  font-style: italic;
}

.comment_curvo a{
  font-size: 0.8rem;
  color: #00A1FF;
  font-style: italic;
  font-weight: lighter;
  text-decoration: none;
}

.comment_curvo a:hover{

  color: #04CEB7;
}

.tittlecard{
  font-weight: 600;
  font-size: 1rem;

}

.tittle_pr{
  font-size: 1.6rem;
  margin-bottom: 0;
  font-weight: 600;
  color: #00A1FF;
}

.contgrid{
display: grid;
grid-template: 300px 250px 200px 150px / 30% 40% 30%;
grid-gap:10px 10px;
}


.itemgrid{
background-color: black;
border:1px solid peru;
padding: 10px;
}


.primary-subtle{
  border: #9ec5fe 1px solid;
  background-color: #cfe2ff;
  padding: 1rem !important;
  border-radius: 0.5rem;
  color: #052c65;
  
}

.success-subtle{
  border: #a3cfbb 1px solid;
  background-color: #d1e7dd;
  padding: 1rem !important;
  border-radius: 0.5rem;
  color: rgb(25 135 84);
  
}

.warning-subtle{
  border: #ffe69c 1px solid;
  background-color: #fff3cd;
  padding: 1rem !important;
  border-radius: 0.5rem;
  color: rgb(255 193 7);
  
}

.danger-subtle{
  border: #f1aeb5 1px solid;
  background-color: #f8d7da;
  padding: 1rem !important;
  border-radius: 0.5rem;
  color: rgb(220 53 69);
  
}

.subtittle_green{
  padding-bottom: 20px;
  font-style: italic;
  font-size: x-large;
}


.tox {
  box-shadow: none;
  box-sizing: content-box;
  color: #222f3e;
  cursor: auto;
  
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  vertical-align: initial;
  white-space: normal;
}


.section-grid{
  display: inline-flex;
  gap: 20px;
}
.tile{
  height: 7rem;
  width: 170px;
  position: relative;
}

.tile > input[type="radio"]{
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #ffffff;
  border-radius: 10px;
  cursor: pointer;
  border: 3px solid transparent;
  outline: none;
  box-shadow: 4px 4px 12px 8px rgba(2, 28, 53, 0.05);
}

.tile > input[type="radio"]:hover{
  transform: scale(1.08);
}
.tile > input[type="radio"]:checked{
  border: 3px solid #478bfb;
}

.tile > label{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  height: 80%;
  width: 100%;
  position: absolute;
  bottom: 0;
  cursor: pointer;
}


.comment1{
  color: #b4bac4;
  font-size: 0.9rem;
}

.badge-green{
  background-color: #50CC89;
  color: white;
  /* background-color: var(--bs-success-light); */
  display: inline;
  padding: 3px 10px;
  border-radius: 0.3rem;
  font-size: 0.9rem;
}

.badge-blue{
  background-color: #5992eb;
  color: white;
  /* background-color: var(--bs-success-light); */
  display: inline;
  padding: 3px 10px;
  border-radius: 0.3rem;
  font-size: 0.9rem;
}

.badge-primary{
  color: #fff;
  background-color: #007bff;
}

.badge{
  padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    background: #007bff;
}
.badge>button{
    font-size: 1em;
    margin-inline: 0px 6px;
    text-shadow: none;
    color: currentColor;
    transform: scale(1.2);
    float: none;
    border: none;
    background: none;
}

.dropzone {
  display: inline-block; /* Permite que el label actúe como un bloque */
  height: auto;
  width: 100%;
  border: 2px dashed #ccc;
  border-radius: 5px;
  padding: 20px;
  text-align: center;
  font-size: 18px;
  color: #333;
  cursor: pointer; /* Cambia el cursor para indicar que es clickeable */
  transition: background-color 0.3s, border-color 0.3s;
  border-radius: 15px;
}
.dropzone:hover {
  border-color: #aaa;
  background-color: #f0f0f0;
}

#fileInput {
  display: none; /* Oculta el input de archivo */
}

.dropzone .preview {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.dropzone .image-container {
position: relative; /* Position relative for the delete icon */
margin: 10px;
}

.dropzone .image-container img {
width: 100px;
height: 100px;
border-radius: 10px;
object-fit: cover;
}

.dropzone .delete-icon {
position: absolute; /* Position absolute to place it inside the image container */
top: 5px; /* Adjust as needed */
right: 5px; /* Adjust as needed */
font-size: 16px;
color: #fff;
background-color: #ff4d4d; /* Red background for delete icon */
border: none;
border-radius: 50%;
padding: 3px 6px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
opacity: 0; /* Hide the delete icon by default */
visibility: hidden; /* Hide the delete icon by default */

}

.dropzone .image-container:hover .delete-icon {
/* Show the delete icon on hover */
opacity: 1;
visibility: visible;
}

.dropzone .delete-icon:hover {
background-color: #ff1a1a; /* Darker red on hover */
}



.imag-cont-small {
  display: inline-block; /* Permitir que el contenedor se ajuste al tamaño de la imagen */
  transition: transform 0.3s ease; /* Transición suave para el contenedor */
}

.imag-cont-small img {
  width: 100px; /* Ancho inicial de la imagen */
  transition: transform 0.3s ease; /* Transición suave para el efecto de escala */
}

.imag-cont-small:hover {
  transform: scale(2.6); /* Escalar el contenedor al pasar el mouse */
}

.imag-cont-small:hover img {
  transform: scale(1); /* Mantener la imagen a su tamaño original */
}

 /* Definimos la animación */
 @keyframes slideDown {
  0% {
      transform: translateY(-100%);
      opacity: 0; /* Comienza invisible */
  }
  100% {
      transform: translateY(0);
      opacity: 1; /* Termina visible */
  }
}

/* Aplicamos la animación al contenedor */
.animated-container1 {
  animation: slideDown 1s ease-in-out forwards; /* Duración de 1 segundo */
}



.section-grid {
  display: flex;
  flex-wrap: wrap;
  justify-self: center;
  gap: 20px; /* Espacio entre las tarjetas */
}
.search-container{
place-self: center;
width: 40%;
padding: 10px;
border-radius: 4px;
margin-bottom: 20px;
}

.tile_btn{
height: 7rem;
width: 160px;
position: relative;
cursor: pointer;
border: 3px solid transparent;
outline: none;
box-shadow: 4px 4px 12px 8px rgba(2, 28, 53, 0.05);
background-color: #ffffff;
border-radius: 10px;
color: #5E6E82;
transition: all 0.2s ease-in-out; 
}

.tile_btn:hover{
transform: scale(1.03);
color: #3F97FF;

}

.tile_btn_active{
border: 3px solid #3F97FF;
}

.tile_btn > label{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
height: 80%;
width: 100%;
position: absolute;
bottom: 0;
cursor: pointer;
}



.checkbox-container {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 150px;
  height: 50px;
  background-color: #fff;
  border-radius: 25px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
}
.chkBox-switch {
  position: absolute;
  opacity: 0; /* Oculta el checkbox */
  cursor: pointer;
  height: 100%;
  width: 100%;
}
.checkbox-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 25px;
  transition: all 0.3s;
}
.checkbox-label .label-content {
  display: flex;
  align-items: center; /* Alinea verticalmente el ícono y el texto */
}
.checkbox-label div {
  margin-left: 10px;
  margin-right: 10px;
  color: #7b7b93;
  transition: color 0.3s;
}
.checkbox-label i {
  font-size: 24px;
  color: #7b7b93;
  transition: color 0.3s;
}
input[type="checkbox"]:checked + .checkbox-label {
  background-color: #478bfb;
}
input[type="checkbox"]:checked + .checkbox-label div,
input[type="checkbox"]:checked + .checkbox-label i {
  color: #fff;
}


/* Data Table */

.no-resultados {
  color: #ff0000; /* Color rojo */
  font-size: 24px; /* Tamaño de fuente grande */
  text-align: center; /* Centrar el texto */
  font-weight: bold; /* Negrita */
  background-color: #f8d7da; /* Fondo suave */
  padding: 10px; /* Espaciado interno */
  border: 1px solid #f5c6cb; /* Borde */
  border-radius: 5px; /* Bordes redondeados */
  margin: 20px; /* Margen alrededor */
}

.tbGridSS {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.tbGridSS th, .tbGridSS td {
  padding: 15px;
  text-align: left;
  background-color: white; /* Fondo blanco para las celdas */
  border-bottom: 1px solid #fef9f9; /* Bordes más sutiles */
  transition: background-color 0.3s; /* Transición suave */
}

.tbGridSS th {
  color: #101C2D; /* White text for contrast */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: #a0d5f4 1px solid;
}

.tbGridSS tr:hover td {
  background-color: #EAF5FF; /* Light gray on hover */
}


/* Espaciado entre filas */
.tbGridSS tbody tr {
  transition: background-color 0.3s;
}


.button-container {
  align-self: center;
  display: flex;
  gap: 20px; /* Espacio entre los botones */
}
.circle-radio {
  display: none; /* Ocultar solo los botones de radio con esta clase */
}
.circle-button {
  width: 80px; /* Ancho del botón */
  height: 80px; /* Alto del botón */
  border: 2px solid #DFE5EF; /* Borde del botón */
  border-radius: 50%; /* Hacer el botón circular */
  display: flex;
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  font-size: 24px; /* Tamaño de la letra */
  color: #DFE5EF; /* Color de la letra */
  background-color: white; /* Color de fondo del botón */
  cursor: pointer; /* Cambiar el cursor al pasar sobre el botón */
  transition: background-color 0.3s, color 0.3s; /* Transición suave */
}
.circle-radio:checked + .circle-button {
  background-color: #00A1FF; /* Color de fondo al seleccionar */
  color: white; /* Color de la letra al seleccionar */
}

.circle-button-link {
  width: 80px; /* Ancho del botón */
  height: 80px; /* Alto del botón */
  border: 2px solid #DFE5EF; /* Borde del botón */
  border-radius: 50%; /* Hacer el botón circular */
  display: flex;
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  font-size: 24px; /* Tamaño de la letra */
  color: #DFE5EF; /* Color de la letra */
  background-color: white; /* Color de fondo del botón */
  cursor: pointer; /* Cambiar el cursor al pasar sobre el botón */
  transition: background-color 0.3s, color 0.3s; /* Transición suave */
}

.circle-button-link:hover {
  border: 2px solid #00A1FF;
  color: #00A1FF;
}

.circle-button-link_active {

  width: 80px; /* Ancho del botón */
  height: 80px; /* Alto del botón */
  border: 2px solid #DFE5EF; /* Borde del botón */
  border-radius: 50%; /* Hacer el botón circular */
  display: flex;
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  font-size: 24px; /* Tamaño de la letra */
  color: white; /* Color de la letra al seleccionar */
  background-color: #00A1FF; /* Color de fondo al seleccionar */
  cursor: pointer; /* Cambiar el cursor al pasar sobre el botón */
  transition: background-color 0.3s, color 0.3s; /* Transición suave */
}

.circle-button-link_active:hover {
  color: white; /* Color de la letra al seleccionar */

}



.badge-radio {
  display: none; /* Ocultar solo los botones de radio con esta clase */
}
.badge-button {
  /* width: 100px; Ancho del botón */
  /* height: 100px; Alto del botón */
  padding: 10px;
  border: 2px solid #DFE5EF; /* Borde del botón */
  border-radius: 5rem; /* Hacer el botón circular */
  display: flex;
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  font-size: 17px; /* Tamaño de la letra */
  color: #DFE5EF; /* Color de la letra */
  background-color: white; /* Color de fondo del botón */
  cursor: pointer; /* Cambiar el cursor al pasar sobre el botón */
  transition: background-color 0.3s, color 0.3s; /* Transición suave */
}
.badge-radio:checked + .badge-button {
  background-color: #00A1FF; /* Color de fondo al seleccionar */
  color: white; /* Color de la letra al seleccionar */
}


.hidden-inputs {
  display: none; /* Ocultar los inputs de serie e IMEI por defecto */
}
.mini-input{
  padding: 0px 10px;
  font-size: smaller;
  margin: 5px 0px;
}
.icon {
  cursor: pointer;
  font-size: 15px;
  color: #00A1FF;
  background: none;
  border: 0px;
}

.floating-div-down {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f8f9fa;
  padding: 20px;
  text-align: center;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  /* width: 100%; */
  JUSTIFY-SELF: right;
  min-width: 84%;
  border-radius: 20px 20px 0px 0px;
}

.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: AUTO;
  height: 80%;
  PLACE-SELF: ANCHOR-CENTER;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: transparent;
  border-radius: 15px;
  border: 0px solid #ebf1f6;
  box-shadow: 0px 1px 4px 0px rgba(133, 146, 173, 0.2);
}

.btn_circle_green {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid transparent;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  padding: 0;
}

.btn_circle_green i {
  font-size: 20px;
  color: #333;
}

.btn_circle_green:hover {
  background-color: transparent;
  border-color: #08CEB7; /* azul, puedes cambiar */
  color: #08CEB7;
}

.btn_circle_green:hover i {
  color: #08CEB7;
}


.btn_circle_red {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid transparent;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  padding: 0;
}

.btn_circle_red i {
  font-size: 20px;
  color: #333;
}

.btn_circle_red:hover {
  background-color: transparent;
  border-color: #FF0000; /* azul, puedes cambiar */
  color: #FF0000;
}

.btn_circle_red:hover i {
  color: #FF0000;
}



.btn_circle_blue {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid transparent;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  padding: 0;
}

.btn_circle_blue i {
  font-size: 20px;
  color: #333;
}

.btn_circle_blue:hover {
  background-color: transparent;
  border-color: #007bff; /* azul, puedes cambiar */
  color: #007bff;
}

.btn_circle_blue:hover i {
  color: #007bff;
}

.cont_btnS {
  display: flex;
  gap: 5px; /* Espaciado entre botones */
  align-items: center; /* Centrado vertical si es necesario */
}





/* css visualizador de imagen */

.img-container {
  position: relative;

}


.img-container img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

#imgmodal {
  display: flex;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

#imgmodal.visible {
  opacity: 1;
  pointer-events: auto;
}

#modalImg {
  max-width: 90%;
  max-height: 90%;
  border-radius: 20px;
  transform: scale(0.8);
  transition: transform 0.4s ease;
}

#imgmodal.visible #modalImg {
  transform: scale(1);
}






.image-container2 {
  position: relative;
  display: inline-block;
  margin: 10px;
  gap: 14px;
  justify-content: center;
}

.image-container2 img {
  width: 160px;
  height: auto;
  display: block;
  margin: 16px;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-container2 .icon {
  position: absolute;
  color: white;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 5px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.3s;
}

.image-container2 .icon:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.delete-iconImg {
  top: 5px;
  right: 5px;
}

.view-iconImg {
  top: 5px;
  left: 5px;
}

.lock-iconImg {
  bottom: 5px;
  right: 5px;
}


   /* --- Contenedor --- */
.radio-group-cuadrados {
    display: flex;
    gap: 20px;
    padding: 20px;
}

/* --- Estilo de cada botón --- */
.radio-tile {
    /* Define el tamaño y estilo de la tarjeta/botón */
    height: 100px;
    width: 100px;
    border: 2px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    position: relative;
    overflow: hidden; /* Importante para contener el pseudo-elemento */
    cursor: pointer;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s;
}

/* --- Ocultar el Radio Button nativo --- */
.radio-tile input[type="radio"] {
    /* Hace que el círculo del radio button desaparezca */
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* --- Estilo de la Etiqueta (Label) --- */
.radio-tile label {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    margin: 0;
    text-align: center;
    color: #888888;
    font-weight: bold;
    cursor: pointer;
}

/* 🏆 option button con relleno parte superior */

/* Define la barra de color (inactiva) */
.radio-tile label::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* 33.33% = un tercio de la altura del botón (100px / 3) */
    height: 20%; 
    background-color: transparent; /* Por defecto, transparente */
    transition: background-color 0.3s;
    /* Redondear las esquinas superiores de la barra */
    border-top-left-radius: 6px; 
    border-top-right-radius: 6px;
    
    z-index: 1; /* Asegura que esté encima */
    
}

/* 🔵 Estado Activo: Se aplica cuando el input está seleccionado */
/* Se usa el selector de hermano adyacente (+) para modificar el ::before de la <label> */
.radio-tile input[type="radio"]:checked + label::before {
    background-color: #3F97FF; /* Color azul activo */
}

/* Opcional: Cambiar el borde del botón cuando está activo */
.radio-tile input[type="radio"]:checked + label {
    border-color: #3F97FF; /* Destaca el borde de la etiqueta para que se vea activo */
    color: #3F97FF;
}

/* Opcional: Estilo al pasar el ratón (hover) */
.radio-tile:hover {
    border-color: #6aabf7;
}

/* 🏆 FIN DE : option button con relleno parte superior */



   /* Container for the button and display, allows for alignment */
.opns-unidadmedida-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Adds space between button and text */
    padding: 5px;
}

/* Specific button for the unit menu */
.opns-btn-unidad {
    font-size: 1.2em;
    font-weight: bold;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0 5px;
}

/* The bubble for the unit menu. It inherits styles from the generic bubble. */
.opns-bubble-unidad {
    /* Hides the menu by default */
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-radius: 4px;
    padding: 5px;
    z-index: 1000;
}

/* Class to show the menu */
.opns-bubble-unidad.show {
    display: block;
}

/* Styles for the items inside the unit menu */
.opn-item-unidad {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.9em;
    color: #333;
    white-space: nowrap;
}

.opn-item-unidad.selected {
    background-color: #e2e6ea;
    font-weight: bold;
    color: #000;
}

.opn-item-unidad:hover {
    background-color: #f0f0f0;
}

/* Styles for the container of the quantity column to align items */
.opns-cell-cantidad {
    position: relative;
    text-align: center;
    /* You can use flexbox here to align the quantity and the menu */
    display: flex;
    justify-content: center;
    align-items: center;
}

    .opns-cell { 
            position: relative;
            vertical-align: middle;
            text-align: center;
        }

        .opns-gravado { background-color: #e0f7e9; }
        .opns-inafecto { background-color: #f7f2e0; }
        .opns-exonerado { background-color: #e0e6f7; }

        .opns-btn {
            font-size: 1.2em;
            font-weight: bold;
            border: none;
            background: none;
            cursor: pointer;
            padding: 0 5px;
        }

        .opns-bubble {
            position: absolute;
            top: 100%;
            right: 0;
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            border-radius: 4px;
            padding: 5px;
            z-index: 1000;
            display: none;
        }

        .opns-bubble.show {
            display: block;
        }

        .opn-item {
            padding: 8px 12px;
            cursor: pointer;
            font-size: 0.9em;
            color: #333;
            white-space: nowrap;
        }
        
        .opn-item.selected {
            background-color: #e2e6ea;
            font-weight: bold;
            color: #000;
        }
        
        .opn-item:hover {
            background-color: #f0f0f0;
        }

/* ocultar blocks */
.ocAdm {
    display: none; 
}