/* Base layout styles */
.header {
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    padding: 10px 20px;
    display: flex;
    align-items: center;
}
.logout-button {
    background: none;
    border: none;
    color: #0073aa;
    font-weight: bold;
    cursor: pointer;
}
.logout-icon {
    height: 24px;
    margin-right: 10px;
}
.container { 
    margin-top: 20px; 
    text-align: center; 
    max-width: 960px;
    margin: 10px auto;
    padding: 0px;
}
.header-buttons a {
    margin: 0 5px;
    text-decoration: none;
    padding: 8px 12px;
    background-color: #0073aa;
    color: #fff !important;
    border-radius: 4px;
    font-size: 14px;
}
.header-buttons a:hover {
    background-color: #005177;
}

/* Common forms & buttons */
form {
    text-align: left;
}
form p {
    margin-bottom: 10px;
}
form input,
form select,
form textarea {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 14px;
    margin-right: 5px;
    box-sizing: border-box;
}
.btn {
    background-color: #0073aa;
    color: #fff !important;
    border: none;
    border-radius: 4px;
    padding: 4px 4px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover {
    background-color: #005177;
}

/* Alinear etiquetas e inputs en formularios uniformemente */
form label {
    display: inline-block;
    width: 150px;  /* Ajusta este valor según sea necesario */
    vertical-align: middle;
    text-align: left;
}
form input[type="text"],
form input[type="email"],
form input[type="password"],
form select,
form textarea {
    display: inline-block;
    vertical-align: middle;
}

/* Table styling for history */
table {
    width: 100%;
    max-width: 425px;
    margin: 10px auto;
    border-collapse: collapse;
    font-size: 14px;
}
th, td {
    padding: 4px 8px;
    border: 1px solid #ddd;
}
th {
    background-color: #f0f0f0;
}
table th:first-child,
table td:first-child {
    text-align: left;
}

/* Additional specific classes */
.qr-input {
    width: 250px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-right: 5px;
    font-size: 14px;
}

/* Narrow container for crear_evento */
.container.narrow {
    max-width: 300px !important;
}
form label.narrow {
    display: inline-block;
    width: 45px;
    margin-right: 10px;
    text-align: left;
    vertical-align: top;
}
form input.narrow,
form select.narrow,
form textarea.narrow {
    width: calc(100% - 55px);
}

/* Detalle Evento specific styling */

/* Asegura que los links en la tabla (por ejemplo, validación) muestren texto blanco */
table a.valid-link {
    color: #fff !important;
    padding: 3px 4px !important;
    font-size: 10px !important;
}

/* Override for valid-link anchors to ensure white text in all states */
a.valid-link, a.valid-link:visited, a.valid-link:hover {
    color: #fff !important;
}

/* Estilo para filas validadas */
tr.validated {
    font-weight: bold;
}
/* Estilos para botones en la columna de Acciones */
.action-btn {
    display: inline-block;
    text-align: center;
    padding: 6px 10px;
    margin: 4px;
    font-size: 16px;
    color: #fff !important;
    text-decoration: none;
    border-radius: 4px;
}
.anular-btn {
    background-color: #dc3545; /* rojo */
}
.anular-btn:hover {
    background-color: #c82333;
}
.validar-btn {
    background-color: #28a745; /* verde */
}
.validar-btn:hover {
    background-color: #218838;
}

/* Ajustes para versión móvil en la tabla detalle_evento */
@media (max-width: 768px) {
    /* Mostrar solo las columnas esenciales (por ejemplo, la 1, 4, 9 y 10) */
    .detalle-evento-table th:nth-child(2),
    .detalle-evento-table th:nth-child(3),
    .detalle-evento-table th:nth-child(5),
    .detalle-evento-table th:nth-child(6),
    .detalle-evento-table th:nth-child(7),
    .detalle-evento-table th:nth-child(8),
    .detalle-evento-table td:nth-child(2),
    .detalle-evento-table td:nth-child(3),
    .detalle-evento-table td:nth-child(5),
    .detalle-evento-table td:nth-child(6),
    .detalle-evento-table td:nth-child(7),
    .detalle-evento-table td:nth-child(8) {
         display: none;
    }
    /* Ajustar tamaño de fuente y botones para móviles */
    .detalle-evento-table {
         font-size: 16px;
    }
    .action-btn {
         font-size: 18px;
         padding: 8px 12px;
    }
    .header-buttons {
         display: flex;
         flex-direction: column;
         align-items: center;
         margin: 10px 0;
    }
    .header-buttons a {
         margin: 5px 0;
         width: 90%;
         text-align: center;
         font-size: 16px;
         padding: 8px 0;
    }
    /* Ajustes adicionales para header-buttons en móviles */
    .header-buttons {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         width: 100%;
         margin: 10px 0;
    }

    .header-buttons a {
         display: block;
         width: 95%;
         margin: 5px auto;
         text-align: center;
         font-size: 18px;
         padding: 12px 0;
         border-radius: 4px;
         box-sizing: border-box;
    }
    .table-mobile th:first-child, .table-mobile td:first-child {
         width: 30px;
         min-width: 30px;
         text-align: center;
    }
    .table-mobile {
         display: block;
         width: 100%;
    }
    .table-mobile table {
         width: 100%;
         border-collapse: collapse;
    }
    .table-mobile th, .table-mobile td {
         padding: 8px;
         border: 1px solid #ddd;
         text-align: center;
         font-size: 16px;
    }
    /* Force fixed widths for mobile columns */
    .table-mobile th:nth-child(1),
    .table-mobile td:nth-child(1) {
         width: 20px;
         min-width: 20px;
         text-align: center;
    }
    .table-mobile th:nth-child(2),
    .table-mobile td:nth-child(2) {
         width: 200px;
         min-width: 200px;
         text-align: left;
    }
    .table-mobile th:nth-child(3),
    .table-mobile td:nth-child(3) {
         width: 30px;
         min-width: 30px;
    }
    .table-mobile th:nth-child(4),
    .table-mobile td:nth-child(4) {
         width: 60px;
         min-width: 60px;
    }
    /* Expandir el container de la lista de eventos */
    .lista-eventos-container {
         width: 100%;
         padding: 0 10px;
         box-sizing: border-box;
    }
    /* Forzar la tabla a ocupar todo el ancho del container */
    .lista-eventos-table {
         width: 100% !important;
    }
}

/* Estilos específicos para la tabla de Detalle de Evento */
.detalle-evento-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

/* Definir anchos fijos para cada columna en el orden y tamaños indicados:
   1. Acciones: 20px
   2. Nombre: 200px
   3. Empresa: 60px
   4. Mesa: 30px
   5. Observaciones: 120px
   6. VIP: 30px
   7. QR: 30px
   8. Validado: 30px
   9. Fecha: 60px
*/
.detalle-evento-table th:nth-child(1),
.detalle-evento-table td:nth-child(1) {
    width: 20px;
    min-width: 20px;
}
.detalle-evento-table th:nth-child(2),
.detalle-evento-table td:nth-child(2) {
    width: 200px;
    min-width: 200px;
}
.detalle-evento-table th:nth-child(3),
.detalle-evento-table td:nth-child(3) {
    width: 60px;
    min-width: 60px;
}
.detalle-evento-table th:nth-child(4),
.detalle-evento-table td:nth-child(4) {
    width: 30px;
    min-width: 30px;
}
.detalle-evento-table th:nth-child(5),
.detalle-evento-table td:nth-child(5) {
    width: 120px;
    min-width: 120px;
}
.detalle-evento-table th:nth-child(6),
.detalle-evento-table td:nth-child(6) {
    width: 30px;
    min-width: 30px;
}
.detalle-evento-table th:nth-child(7),
.detalle-evento-table td:nth-child(7) {
    width: 30px;
    min-width: 30px;
}
.detalle-evento-table th:nth-child(8),
.detalle-evento-table td:nth-child(8) {
    width: 30px;
    min-width: 30px;
}
.detalle-evento-table th:nth-child(9),
.detalle-evento-table td:nth-child(9) {
    width: 60px;
    min-width: 60px;
}

/* Estilos para la versión móvil de la tabla de Detalle de Evento */
@media (max-width: 768px) {
    .table-mobile {
         display: block;
         width: 100%;
    }
    .table-mobile table {
         width: 100%;
         border-collapse: collapse;
    }
    .table-mobile th, 
    .table-mobile td {
         padding: 8px;
         border: 1px solid #ddd;
         font-size: 16px;
         text-align: center;
    }
    /* Usar porcentajes en lugar de anchos fijos para que ocupe todo el espacio */
    .table-mobile th:nth-child(1),
    .table-mobile td:nth-child(1) {
         width: 6%;
         text-align: center;
    }
    .table-mobile th:nth-child(2),
    .table-mobile td:nth-child(2) {
         width: 65%;
         text-align: left;
    }
    .table-mobile th:nth-child(3),
    .table-mobile td:nth-child(3) {
         width: 10%;
    }
    .table-mobile th:nth-child(4),
    .table-mobile td:nth-child(4) {
         width: 19%;
    }
}

/* Mobile adjustments for lista_eventos: enlarge 'Acciones' column */
@media (max-width: 768px) {
    /* Asumimos que la tabla de lista_eventos tiene la clase .lista-eventos-table */
    .lista-eventos-table th:last-child,
    .lista-eventos-table td:last-child {
         width: 80px;
         min-width: 80px;
         text-align: center;
    }
    .table-mobile table,
    .lista-eventos-table,
    .detalle-evento-table {
         width: 100% !important;
         max-width: 100% !important;
    }
}

/* Mobile adjustments for lista_eventos: enlarge 'Acciones' column and space action icons properly */
@media (max-width: 768px) {
    .lista-eventos-table th:last-child,
    .lista-eventos-table td:last-child {
         width: 100px;      /* aumenta el ancho a 100px */
         min-width: 100px;
         text-align: center;
    }
    .lista-eventos-table .action-btn {
         margin: 0 4px;     /* agrega un margen horizontal para separar los iconos */
         display: inline-block;
         vertical-align: middle;
    }
}