.button1 {
    display: inline-block; /* Permite tratar el botón como un bloque en línea */
    background-color: #28a745; /* Verde vivo */
    color: #fff; /* Texto blanco para contraste */
    font-size: 20px; /* Tamaño de fuente grande */
    font-weight: bold; /* Negrita para mayor visibilidad */
    text-align: center; /* Centra el texto */
    padding: 15px 20px; /* Espaciado interno amplio */
    border: none; /* Sin bordes */
    border-radius: 8px; /* Bordes redondeados */
    width: 90%; /* Ocupa el 90% del ancho de la pantalla */
    max-width: 400px; /* Máximo ancho para pantallas más grandes */
    margin: 10px auto; /* Centra horizontalmente el botón */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    text-decoration: none; /* Quita el subrayado si es un enlace */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Sombra para darle relieve */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Efectos suaves */
}

.big-button:hover {
    background-color: #218838; /* Verde más oscuro al pasar el ratón */
    transform: scale(1.05); /* Aumenta ligeramente el tamaño */
}

.big-button:active {
    background-color: #1e7e34; /* Verde aún más oscuro al hacer clic */
    transform: scale(0.98); /* Disminuye ligeramente el tamaño */
}





.table-labels {
    width: 100%; /* Ajusta la tabla al ancho del contenedor */
    border-collapse: collapse; /* Evita el espacio entre bordes */
    margin: 20px 0;
    font-size: 16px; /* Ajusta el tamaño de fuente */
    font-family: Arial, sans-serif;
}

/* Estilo para las celdas */
.table-labels th, .table-labels td {
    border: 1px solid #dddddd; /* Borde gris claro */
    text-align: center; /* Centra el texto */
    padding: 8px; /* Añade espacio interno */
}

/* Estilo para las cabeceras */
.table-labels th {
    background-color: #f4f4f4; /* Fondo gris claro */
    color: #333333; /* Texto gris oscuro */
    font-weight: bold; /* Negrita para cabeceras */
}

/* Alternar colores para las filas */
.table-labels tr:nth-child(even) {
    background-color: #f9f9f9; /* Fondo ligeramente gris */
}

.table-labels tr:nth-child(odd) {
    background-color: #ffffff; /* Fondo blanco */
}

/* Efecto hover */
.table-labels tr:hover {
    background-color: #d8f0f7; /* Fondo azul claro al pasar el ratón */
}

.simple-table {
    border: 1px solid #000; /* Borde negro para toda la tabla */
    border-collapse: collapse; /* Evita el espacio entre bordes */
    width: 100%; /* Asegura que la tabla ocupe todo el ancho del contenedor */
    table-layout: fixed; /* Fuerza que las celdas tengan el mismo ancho */
}

.simple-table th, .simple-table td {
    border: 1px solid #000; /* Bordes de las celdas */
    padding: 8px; /* Espaciado interno */
    text-align: left; /* Alineación del texto a la izquierda */
    font-family: Arial, sans-serif; /* Fuente básica */
    font-size: 14px; /* Tamaño de texto */
    width: 50%; /* Cada celda ocupa el 50% del ancho */
}
