/* Estilos para el contenedor de las tarjetas */
#cardIndex {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: auto; /* Agrega margen automático para centrar las tarjetas */
    justify-content: center; /* Centra las tarjetas horizontalmente */
    align-items: center; /* Centra las tarjetas verticalmente */
   
  }
  
  /* Estilos para las tarjetas */
  .cardIndexTriggers {
    flex: 1 0 300px;
    transition: box-shadow 0.3s;
    cursor: pointer; /* Cambia el cursor al pasar por encima de las tarjetas */
    border-radius: 5px; /* Agrega bordes redondeados a las tarjetas */
    background-color: #333; /* Fondo gris oscuro para las tarjetas */
    box-shadow: 0 6px 12px rgba(255, 8, 131, 0.973); /* Sombra dorada en las tarjetas */
    max-width: 300px;
    margin: 10px;
  }
  
  /* Estilos adicionales para aplicar sombra más grande al pasar el mouse o seleccionar */
  .cardIndexTriggers:hover,
  .cardIndexTriggers:focus {
    box-shadow: 0 10px 20px rgb(255, 20, 243); /* Sombra más grande al pasar el mouse o seleccionar */
  }
  /* Estilos para las tarjetas */
  .cardIndexTriggersAzul {
    flex: 1 0 300px;
    transition: box-shadow 0.3s;
    cursor: pointer; /* Cambia el cursor al pasar por encima de las tarjetas */
    border-radius: 5px; /* Agrega bordes redondeados a las tarjetas */
    background-color: #333; /* Fondo gris oscuro para las tarjetas */
    box-shadow: 0 6px 12px rgba(43, 28, 252, 0.973); /* Sombra dorada en las tarjetas */
    max-width: 300px;
    margin: 10px;
  }
  
  /* Estilos adicionales para aplicar sombra más grande al pasar el mouse o seleccionar */
  .cardIndexTriggersAzul:hover,
  .cardIndexTriggersAzul:focus {
    box-shadow: 0 10px 20px rgb(52, 133, 255); /* Sombra más grande al pasar el mouse o seleccionar */
  }
  /* Estilos adicionales para que las tarjetas sean responsive en pantallas pequeñas */
  @media (max-width: 768px) {
    .cardIndexTriggersAzul {
      flex-basis: 100%; /* Ocupar todo el ancho en pantallas pequeñas */
    }
  }
  
  /* Estilos para la línea de separación blanca */
  .separator {
    border: none;
    height: 2px; /* Ajustamos el grosor de la línea separadora */
    background-color: white;
    margin: 10px 0; /* Agrega espacio entre la línea y el contenido */
  }
  
  
  /* Estilos para el botón */
  .card-button {
    background-color: transparent; /* Fondo transparente para el botón en el estado normal */
    color: #fff; /* Texto en blanco para el título del botón */
    font-weight: bold; /* Texto en negrita para el título del botón */
    border: 2px solid gold; /* Borde dorado para el botón en el estado normal */
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .card-button:hover {
    background-color: gold; /* Cambia el color de fondo al pasar el mouse sobre el botón */
  }
  
  .card-button:focus {
    outline: none; /* Elimina el borde de enfoque al hacer clic en el botón */
  }
  
  
  /* Estilos para la banda negra en la esquina superior derecha */
  .card-corner-band {
    position: absolute;
    top: 0;
    right: 20px; /* Ajustamos el valor de right para mover la banda hacia la izquierda */
    width: 20px;
    height: 80px;
    background-color: black;
    transform: translate(50%, -10%) rotate(140deg); /* Rotamos la banda 90 grados */
    z-index: 1; /* Para asegurarnos de que la banda aparezca encima del contenido de la tarjeta */
  }
  
  /* Estilos para el texto dentro de la banda */
  .card-corner-text {
    position: absolute;
    top: 50%; /* Centra verticalmente el texto */
    left: 50%; /* Centra horizontalmente el texto */
    transform: translate(-50%, -50%) rotate(270deg); /* Rota el texto verticalmente */
    color: white; /* Color blanco para el texto */
    font-size: 12px; /* Tamaño del texto */
    font-weight: bold; /* Texto en negrita */
    text-align: center; /* Centra el texto horizontalmente */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
  }
  
  /* Estilos para el modal dorado */
.modal-gold .modal-content {
    background-color: #ffda0ac7;
    border: 1px solid hsl(253, 100%, 50%); /* Borde dorado */
  }

  
  .modal-gold .modal-body {
    color: black; /* Cambia el color del texto a negro */
    font-weight: bold; /* Pone el texto en negrita */
  }
  
  /* Estilos para el título del modal */
  .modal-gold .modal-title {
    color: black; /* Cambia el color del título a negro */
  }


  .card {
    overflow: hidden;
    position: relative;
    background-color: #ffffff;
    text-align: left;
    border-radius: 0.5rem;
    max-width: 290px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  
  .header {
    padding: 1.25rem 1rem 1rem 1rem;
    background-color: #ffffff;
  }
  
  .image {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    background-color: #FEE2E2;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
  }
  
  .image svg {
    color: #dc2635;
    width: 1.5rem;
    height: 1.5rem;
  }
  
  .content {
    margin-top: 0.75rem;
    text-align: center;
  }
  
  .title {
    color: #111827;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
  }
  
  .message {
    margin-top: 0.5rem;
    color: #6B7280;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  
  .actions {
    margin: 0.75rem 1rem;
    background-color: #F9FAFB;
  }
  
  .desactivate {
    display: inline-flex;
    padding: 0.5rem 1rem;
    background-color: #DC2626;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    justify-content: center;
    width: 100%;
    border-radius: 0.375rem;
    border-width: 1px;
    border-color: transparent;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }
  
  .cancel {
    display: inline-flex;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background-color: #ffffff;
    color: #374151;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    justify-content: center;
    width: 100%;
    border-radius: 0.375rem;
    border: 1px solid #D1D5DB;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }



.luz {
  position: relative;
  top: 10px;
  right: 10px;
  left: 237px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(63, 63, 63); /* Cambia el color de fondo a blanco */
  transition: background-color 0.5s ease-in-out;
}

.luz.verde {
    background-color: rgb(8, 255, 8);
}

.luz.roja {
    background-color: rgb(255, 0, 0);
}

#updates p {
  color: white;  /* Color del texto en blanco */
}
 /* Estilos para el contenedor de registros */
 #logContainer {
  border: 1px solid #ccc;
  padding: 10px;
  max-height: 300px; /* Altura máxima para mostrar */
  overflow-y: auto; /* Habilitar desplazamiento vertical si hay demasiados registros */
}
/* Estilos para cada registro */
.logEntry {
  margin-bottom: 5px;
}