/* ============================================
   PÁGINA: REPORTS
   Reportes y exportaciones.
   ============================================ */

/* --- Encabezado --- */
.report-page-title {
    font-size: 1.5rem;
    font-weight: 700;
}

/* --- Skeletons de carga --- */
.report-chart-skeleton {
    height: 250px;
}

.report-audit-skeleton {
    height: 200px;
}

/* --- Listas genéricas (productos, auditoría) --- */
.report-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Lista de ventas diarias: igual que .report-list pero con scroll propio */
.report-daily-list {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* --- Fila de venta diaria --- */
.item-report-row {
    background: var(--gray-50);
    padding: 1rem;
    border-radius: var(--radius);
    border-left: 4px solid var(--primary);
}

.item-report-row__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.item-report-row__day-name {
    display: block;
    font-weight: 700;
    color: var(--gray-800);
}

.item-report-row__amount-wrap {
    text-align: right;
}

.item-report-row__amount {
    display: block;
    font-weight: 700;
    color: var(--primary);
}

/* --- Fila de producto más vendido --- */
.report-product-row__top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

/* --- Barra de progreso (reutilizada en ventas diarias y productos) --- */
.progress-bar {
    width: 100%;
    height: 6px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-bar--lg {
    height: 8px;
}

.progress-bar__fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
    /* El "width" en % queda inline en JS porque es un dato calculado,
       no una propiedad de diseño fija. */
}

/* --- Sección de Auditoría --- */
.audit-header-icon {
    margin-right: 0.5rem;
    color: var(--primary);
}

.audit-log-card {
    background: var(--gray-50);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius);
    padding: 0.875rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: center;
}

.audit-log-card__field--date { min-width: 110px; }
.audit-log-card__field--user { min-width: 100px; }
.audit-log-card__field--role { min-width: 80px; }
.audit-log-card__field--action { min-width: 140px; }
.audit-log-card__field--entity { min-width: 100px; }
.audit-log-card__field--description { flex: 1; min-width: 150px; }
.audit-log-card__field--ip { min-width: 80px; }

.audit-log-card__label {
    display: block;
    font-size: 0.7rem;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.audit-log-card__value--date {
    font-size: 0.8rem;
    color: var(--gray-600);
}

.audit-log-card__value--user {
    font-weight: 700;
    color: var(--gray-800);
    font-size: 0.875rem;
}

.audit-log-card__value--entity {
    font-size: 0.875rem;
    color: var(--gray-700);
}

.audit-log-card__value--description {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.audit-log-card__value--ip {
    font-size: 0.75rem;
    color: var(--gray-400);
    font-family: monospace;
}

.audit-log-card__badge {
    font-size: 0.7rem;
}