.border_red
{
    border-style: solid;
    border-color: red;
}

.boton-con-imagen {
    position: relative; /* Posición relativa para facilitar el posicionamiento del texto alternativo */
    background-image: url('log-out.png'); /* Ruta de la imagen */
    background-size: cover; /* Ajusta la imagen al tamaño del botón */
    background-color: white;
    width: 30px; /* Ancho del botón */
    height: 30px; /* Altura del botón */
    border: none; /* Elimina el borde del botón */
    color: darkolivegreen; /* Color del texto en el botón */
    text-align: center; /* Centra el texto dentro del botón */
    text-decoration: none; /* Elimina el subrayado del texto */
    display: inline-block; /* Permite ajustar el tamaño del botón al contenido */
    font-size: 14px; /* Tamaño del texto */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: background-color 0.3s ease; /* Transición suave para el cambio de color de fondo */
}

/* Efecto hover */
.boton-con-imagen:hover {
    transform: scale(1.1); /* Escala el botón al 110% del tamaño original */
}

/* Estilo para el texto alternativo */
.alt-text {
    position: absolute; /* Posición absoluta en relación con el botón */
    top: 50%; /* Coloca el texto en la mitad superior del botón */
    left: 160%; /* Coloca el texto en el centro horizontal del botón */
    transform: translate(-50%, -50%); /* Centra el texto correctamente */
    opacity: 0; /* Hace que el texto sea invisible por defecto */
    transition: opacity 0.3s ease; /* Transición suave para la opacidad */
}

/* Efecto hover para mostrar el texto alternativo */
.boton-con-imagen:hover .alt-text {
    opacity: 1; /* Hace que el texto sea visible al pasar el cursor sobre el botón */
}

.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
  }
  
  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
    background-color: #ccc;
}
  
  /* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
}
  

.styled-table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 14px;
    text-align: left;
}

/* Estilos para el encabezado */
.styled-table th {
    background-color: #333;
    color: white;
    font-weight: bold;
    padding: 12px 15px;
}

/* Estilos para las celdas */
.styled-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
}

/* Cambiar el color de fondo de las filas alternas (opcional) */
.styled-table tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}