/* Contenedor del panel */
#pa-reportes-panel {
    padding: 20px;
    border: 1px solid #ccc;
    background: #fff;
}

.pa-reportes-tabs {
    margin-bottom: 15px;
    padding: 20px;
}

/* Botones */
.pa-tab-btn {
    padding: 10px 15px;
    margin-right: 5px;
    cursor: pointer;
    border: none;
    background: #eee;
}

.pa-tab-btn.active {
    background: #0073aa;
    color: white;
}

/* Contenedor del contenido */
.pa-tab-content {
    display: none;
    width: 100%;
    overflow-x: auto; /* 👈 Importante si pones scroll horizontal adentro */
    box-sizing: border-box;
}

.pa-tab-content.active {
    display: block;
}


/* Wrapper que activa el scroll */
.reporte-tabla-wrapper {
    overflow-x: auto;
    width: 100%;
}

/* Tabla */
.pa-tabla-reportes {
    width: 100%;
    min-width: 1300px; /* ⚠️ Asegúrate de que esto sea más grande que el ancho de tu contenedor */
    border-collapse: collapse;
    font-size: 12px;
}

.pa-tabla-reportes th,
.pa-tabla-reportes td {
    border: 1px solid #ccc;
    white-space: nowrap; /* Evita salto de línea */
    text-align: left;
    padding: 6px 10px; /* Reduce también el espaciado para que se vea más compacto */
}

/* Barra de filtros elegante */
.pa-barra-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
    background: #f9f9f9;
    padding: 15px 20px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.pa-barra-filtros .filtro {
    display: flex;
    flex-direction: column;
    min-width: 180px;
}

.pa-barra-filtros .filtro label {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    margin-bottom: 4px;
}

.pa-barra-filtros .filtro input,
.pa-barra-filtros .filtro select {
    padding: 6px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.pa-barra-filtros .filtro.boton {
    align-self: center;
    margin-left: auto;
}

.boton-filtrar {
    padding: 8px 16px;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.boton-filtrar:hover {
    background-color: #005c8a;
}

#pa-filtros-reportes .boton-excel {
    padding: 8px 16px;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#pa-filtros-reportes .boton-excel:hover {
    background-color: #005c8a;
}