/* Estilos para el modal de finalizar reserva */
.finish-items-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    border: 1px solid #cbd5e1 !important; /* borde externo */
}

.finish-items-table th,
.finish-items-table td {
    padding: 8px 12px;
    text-align: left;
    border: 1px solid #cbd5e1 !important; /* bordes de celda */
}

.finish-items-table th {
    background-color: #f5f5f5;
    font-weight: bold;
    color: #333;
}

.finish-items-table tbody tr:hover {
    background-color: #f9f9f9;
}

.reservation-summary {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* Estilos para la tabla "items-table" del modal de finalizar (index.html) */
.items-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    border: 1px solid #cbd5e1 !important; /* borde externo */
}

.items-table th,
.items-table td {
    padding: 8px 12px;
    text-align: left;
    border: 1px solid #cbd5e1 !important; /* bordes de celda */
}

.items-table th {
    background-color: #f5f5f5;
    font-weight: bold;
    color: #333;
}

.reservation-summary h5 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 16px;
}

.reservation-summary p {
    margin: 5px 0;
    color: #666;
}

.po-input-section {
    margin-bottom: 20px;
}

.po-input-section label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.po-input-section input {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.po-input-section input:focus {
    outline: none;
    border-color: #4a90e2;
}

.help-text {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #666;
}

.items-preview h5 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 16px;
}

.items-table-container {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

/* Animación para notificaciones de error */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}