/* ==========================================================================
   Reportes — page-specific styles
   Namespace: .rpt-*
   ========================================================================== */

/* ── Layout ────────────────────────────────────────────────────── */
.rpt-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface-app);
    overflow: hidden;
}

/* ── Selector de período ───────────────────────────────────────── */
.rpt-periodo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2-5) var(--space-5);
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.rpt-periodo__presets {
    display: flex;
    gap: var(--space-0-5);
    background: var(--stone-100);
    padding: 3px;
    border-radius: var(--radius-pill);
}
.rpt-periodo__preset {
    padding: var(--space-1) var(--space-3);
    font: var(--type-label-sm);
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--duration-fast) var(--ease-standard);
}
.rpt-periodo__preset:hover { color: var(--text-default); }
.rpt-periodo__preset.is-active {
    color: var(--stone-0);
    background: var(--action-primary);
    box-shadow: var(--shadow-xs);
}
.rpt-periodo__custom {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.rpt-periodo__custom .adv-input[type="date"] {
    width: auto;
    min-width: 140px;
    flex: none;
}

/* ── Top tabs ──────────────────────────────────────────────────── */
.rpt-topnav {
    display: flex;
    align-items: center;
    gap: var(--space-0-5);
    padding: var(--space-1) var(--space-5) 0;
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    overflow-x: auto;
}
.rpt-toptab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2-5) var(--space-4);
    font: var(--type-label-sm);
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--duration-fast) var(--ease-standard);
    position: relative;
}
.rpt-toptab:hover { color: var(--text-default); background: var(--stone-50); }
.rpt-toptab.is-active {
    color: var(--action-primary);
    font-weight: var(--weight-semibold);
    border-bottom-color: var(--action-primary);
    background: rgba(45, 106, 79, 0.04);
}
.rpt-toptab__icon { width: 16px; height: 16px; }
.rpt-toptab--admin { display: none; }
.rpt-toptab--admin.is-visible { display: inline-flex; }

/* ── Views ─────────────────────────────────────────────────────── */
.rpt-view {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ── Loading ───────────────────────────────────────────────────── */
.rpt-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) 0;
}
.rpt-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-subtle);
    border-top-color: var(--action-primary);
    border-radius: 50%;
    animation: rpt-spin 0.8s linear infinite;
}
@keyframes rpt-spin { to { transform: rotate(360deg); } }

/* ── KPIs ──────────────────────────────────────────────────────── */
.rpt-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}
@media (max-width: 1100px) {
    .rpt-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .rpt-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .rpt-kpis { grid-template-columns: 1fr; }
}
.rpt-stat {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.rpt-stat__label {
    font: var(--type-caption);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.rpt-stat__value {
    font: var(--type-h3);
    color: var(--text-strong);
}
.rpt-stat__sub {
    font: var(--type-caption);
    color: var(--text-muted);
}
.rpt-stat--positive {
    border-color: var(--fern-300);
    background: var(--fern-50);
}
.rpt-stat--positive .rpt-stat__value {
    color: var(--fern-700);
}

/* ── Cards ─────────────────────────────────────────────────────── */
.rpt-card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.rpt-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.rpt-card__title {
    font: var(--type-label);
    color: var(--text-strong);
    font-weight: var(--weight-semibold);
}
.rpt-card__hint {
    font: var(--type-caption);
    color: var(--text-muted);
}
.rpt-card__body {
    padding: var(--space-3) var(--space-4) var(--space-4);
    overflow: auto;
    flex: 1;
    min-height: 0;
}
.rpt-card--chart .rpt-card__body {
    position: relative;
    min-height: 280px;
    overflow: hidden;
}

/* ── Grid layouts ──────────────────────────────────────────────── */
.rpt-resumen-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 420px);
    gap: var(--space-4);
}
.rpt-act-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
.rpt-ops-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 900px) {
    .rpt-resumen-grid,
    .rpt-act-grid,
    .rpt-ops-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Tables ────────────────────────────────────────────────────── */
.rpt-table {
    width: 100%;
    border-collapse: collapse;
    font: var(--type-body-sm);
}
.rpt-table th {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    font: var(--type-caption);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
    background: var(--stone-50);
}
.rpt-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-default);
    white-space: nowrap;
}
.rpt-table tbody tr:hover { background: var(--stone-50); }
.rpt-table--clickable tbody tr { cursor: pointer; }
.rpt-table tr.rpt-row--selected { background: var(--pine-50); }
.rpt-table tr.rpt-row--separator td {
    padding: var(--space-1) var(--space-3);
    background: var(--stone-100);
    font: var(--type-caption);
    color: var(--text-muted);
    font-weight: var(--weight-semibold);
    border-bottom: 2px solid var(--border-default);
}
.rpt-table .rpt-td-right { text-align: right; font-variant-numeric: tabular-nums; }
.rpt-table .rpt-td-mono { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.8em; }

/* Scroll horizontal en tablas */
.rpt-scroll-x { overflow-x: auto; }

/* ── Badges de estado ──────────────────────────────────────────── */
.rpt-badge-pago {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius-pill);
    font: var(--type-caption);
    font-weight: var(--weight-semibold);
}
.rpt-badge-pago--pagado    { background: var(--status-success-bg, #ecfdf5); color: var(--status-success-fg, #065f46); }
.rpt-badge-pago--parcial   { background: var(--status-warning-bg, #fffbeb); color: var(--status-warning-fg, #92400e); }
.rpt-badge-pago--pendiente { background: var(--status-danger-bg, #fef2f2); color: var(--status-danger-fg, #991b1b); }
.rpt-badge-saldo--verde    { background: var(--status-success-bg, #ecfdf5); color: var(--status-success-fg, #065f46); }
.rpt-badge-saldo--naranja  { background: var(--status-warning-bg, #fffbeb); color: var(--status-warning-fg, #92400e); }
.rpt-badge-saldo--rojo     { background: var(--status-danger-bg, #fef2f2); color: var(--status-danger-fg, #991b1b); }

/* ── Totales al pie ────────────────────────────────────────────── */
.rpt-totales {
    display: flex;
    gap: var(--space-6);
    padding: var(--space-3) var(--space-4);
    border-top: 2px solid var(--border-default);
    font: var(--type-body-sm);
    flex-wrap: wrap;
}
.rpt-totales__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
}
.rpt-totales__label {
    font: var(--type-caption);
    color: var(--text-muted);
}
.rpt-totales__value {
    font-weight: var(--weight-semibold);
    color: var(--text-strong);
}
.rpt-totales__value--neg { color: var(--status-danger-fg, #991b1b); }
.rpt-totales__value--pos { color: var(--status-success-fg, #065f46); }

/* ── Empty state ───────────────────────────────────────────────── */
.rpt-empty {
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--text-muted);
    font: var(--type-body-sm);
}

/* ── Pagination ────────────────────────────────────────────────── */
.rpt-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    font: var(--type-body-sm);
}
.rpt-pagination button {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-default);
    cursor: pointer;
    font: var(--type-body-sm);
    transition: all var(--duration-fast);
}
.rpt-pagination button:hover:not(:disabled) { background: var(--stone-100); }
.rpt-pagination button:disabled { opacity: 0.4; cursor: default; }
.rpt-pagination button.is-active { background: var(--action-primary); color: var(--stone-0); border-color: var(--action-primary); }

/* ── Reservas filters ──────────────────────────────────────────── */
.rpt-reservas-filters-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ── Reservas layout ───────────────────────────────────────────── */
.rpt-reservas-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
}

/* ── Card header actions ──────────────────────────────────────── */
.rpt-card__header .adv-btn--sm {
    font-size: 11px;
    letter-spacing: 0.01em;
}

/* ── Export CSV button ────────────────────────────────────────── */
.rpt-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--space-1-5) var(--space-3);
    background: var(--surface-card);
    color: var(--action-accent);
    border: 1px solid var(--clay-200);
    border-radius: var(--radius-sm);
    font: var(--type-caption);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--duration-fast) var(--ease-standard);
}
.rpt-export-btn:hover {
    background: var(--surface-accent-soft);
    border-color: var(--action-accent);
    box-shadow: var(--shadow-xs);
}
.rpt-export-btn:active {
    transform: translateY(0.5px);
}
.rpt-export-btn__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ── Responsive adjustments ────────────────────────────────────── */
@media (max-width: 768px) {
    .rpt-view { padding: var(--space-3); }
    .rpt-periodo { padding: var(--space-2) var(--space-3); }
    .rpt-topnav { padding: var(--space-1) var(--space-3) 0; }
    .rpt-periodo__presets { overflow-x: auto; }
}

/* ── Print overlay ─────────────────────────────────────────────── */
.rpt-print-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: white;
    overflow-y: auto;
    padding: 48px;
    font-family: 'Hanken Grotesk', -apple-system, sans-serif;
    color: #1c1917;
    font-size: 13px;
    line-height: 1.5;
}
.rpt-print-overlay * { box-sizing: border-box; }
.rpt-print-header { text-align: center; margin-bottom: 32px; }
.rpt-print-header img { height: 48px; margin-bottom: 12px; }
.rpt-print-header h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.rpt-print-header p { font-size: 13px; color: #78716c; margin: 0; }
.rpt-print-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.rpt-print-table th, .rpt-print-table td { padding: 8px 12px; border-bottom: 1px solid #e7e5e4; text-align: left; }
.rpt-print-table th { background: #fafaf9; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #78716c; }
.rpt-print-sep { border-top: 2px solid #44403c; margin: 20px 0 8px; padding-top: 8px; font-weight: 600; font-size: 11px; text-transform: uppercase; color: #78716c; }
.rpt-print-totales { display: flex; gap: 40px; margin-top: 20px; padding-top: 16px; border-top: 2px solid #1c1917; font-size: 14px; }
.rpt-print-totales div { display: flex; flex-direction: column; gap: 2px; }
.rpt-print-totales .lbl { font-size: 11px; color: #78716c; text-transform: uppercase; font-weight: 600; }
.rpt-print-totales .val { font-weight: 700; font-size: 15px; }
.rpt-print-firma { margin-top: 48px; font-size: 12px; color: #78716c; }
.rpt-print-close { position: fixed; top: 12px; right: 12px; z-index: 10; padding: 8px 16px; background: var(--action-primary, #2D6A4F); color: white; border: none; border-radius: 6px; cursor: pointer; font: var(--type-label-sm); }

@media print {
    body > *:not(.rpt-print-overlay) { display: none !important; }
    .rpt-print-overlay { position: static; padding: 20px; }
    .rpt-print-close { display: none !important; }
}