/* Estilos para tablas ordenables (enfoque servidor) */
th a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--dark);
    text-decoration: none;
    position: relative;
    transition: background-color 0.2s;
}

th a:hover {
    background-color: var(--secondary-light);
}

th a .sort-icon {
    margin-left: 5px;
    font-size: 0.8em;
    color: var(--dark);
}

/* Mejorar aspecto de los encabezados de tabla */
.tabla-estancias th,
.tabla-empleados th,
.tabla-clientes th {
    background-color: var(--background);
    border-bottom: 2px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
}

/* Estilos para filas alternadas */
.tabla-estancias tbody tr:nth-child(odd),
.tabla-empleados tbody tr:nth-child(odd),
.tabla-clientes tbody tr:nth-child(odd) {
    background-color: var(--secondary-light);
}

.tabla-estancias tbody tr:hover,
.tabla-empleados tbody tr:hover,
.tabla-clientes tbody tr:hover {
    background-color: var(--background);
}

/* Estilos para mantener tamaños consistentes */
.tabla-estancias,
.tabla-empleados,
.tabla-clientes {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.tabla-estancias th, .tabla-estancias td,
.tabla-empleados th, .tabla-empleados td,
.tabla-clientes th, .tabla-clientes td {
    padding: 8px;
    border: 1px solid var(--border);
}

/* Estilo para la fila de inserción */
#fila-insertar-cliente,
#fila-insertar-empleado,
.tabla-estancias tr:last-child,
.tabla-clientes tr:last-child,
.tabla-empleados tr:last-child {
    background-color: var(--secondary-light);
    border-top: 2px solid var(--border);
}

#fila-insertar-cliente input,
#fila-insertar-empleado input,
.tabla-estancias tr:last-child input,
.tabla-clientes tr:last-child input,
.tabla-empleados tr:last-child input {
    width: 100%;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}


/* Estilo específico para precio total con descuento */
td[style*="color:green"] {
    font-weight: bold;
    background-color: rgba(40, 167, 69, 0.1);
}

/* Estilos para filas de filtro */
.tabla-estancias .filter-row,
.tabla-empleados .filter-row,
.tabla-clientes .filter-row {
    background-color: var(--background);
    border-bottom: 1px solid var(--border);
}

.tabla-estancias .filter-row td,
.tabla-empleados .filter-row td,
.tabla-clientes .filter-row td {
    padding: 8px;
}

.tabla-estancias .filter-input,
.tabla-empleados .filter-input,
.tabla-clientes .filter-input {
    width: 95%;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9em;
}

/* Ajuste para los enlaces de ordenación */
.tabla-estancias th a,
.tabla-empleados th a,
.tabla-clientes th a {
    width: 100%;
    box-sizing: border-box;
}

.tabla-estancias th,
.tabla-empleados th,
.tabla-clientes th {
    padding: 8px !important; /* Evitar doble padding */
}

/* Estilo para los botones de acción en filas de filtro */
.tabla-estancias .filter-row .btn,
.tabla-empleados .filter-row .btn,
.tabla-clientes .filter-row .btn {
    white-space: nowrap;
}

.tabla-estancias .filter-row a.btn,
.tabla-empleados .filter-row a.btn,
.tabla-clientes .filter-row a.btn {
    display: inline-block;
    text-decoration: none;
    white-space: nowrap;
}