/* ═══════════════════════════════════════════════════════════════════════════
   Respostas. Escopo .rs-*, só tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-crumb { color: var(--text-tertiary); text-decoration: none; }
.rs-crumb:hover { color: var(--text-primary); }

/* ── KPIs ───────────────────────────────────────────────────────────────── */
.rs-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--bento-gap);
}
.rs-kpi {
    padding: var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-2);
}
.rs-kpi__icon {
    width: 34px; height: 34px; margin-bottom: var(--space-2);
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--surface-3); color: var(--text-secondary);
}
.rs-kpi__icon--accent { background: var(--accent-muted); color: var(--accent); }
.rs-kpi__icon i, .rs-kpi__icon svg { width: 17px; height: 17px; }
.rs-kpi__value { font-size: var(--text-h3); font-weight: 600; color: var(--text-primary); letter-spacing: var(--tracking-tight); }
.rs-kpi__foot { font-size: var(--text-xs); color: var(--text-tertiary); }

/* ── Painel e barra de ferramentas ──────────────────────────────────────── */
.rs-panel { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }
.rs-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4); flex-wrap: wrap;
}
.rs-toolbar .rs-search { width: 300px; max-width: 100%; }

.rs-filters {
    display: flex; gap: 2px; padding: 3px;
    background: var(--surface-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.rs-filter {
    height: 34px; padding: 0 var(--space-4);
    border: none; border-radius: var(--radius-sm);
    background: transparent; color: var(--text-tertiary);
    font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: all var(--dur-fast) var(--ease-out);
}
.rs-filter:hover { color: var(--text-primary); }
.rs-filter.is-active { background: var(--accent-muted); color: var(--accent); }

/* ── Tabela ─────────────────────────────────────────────────────────────────
   Grade em vez de <table>: as mesmas colunas valem para o cabeçalho e para
   as linhas, e colapsam juntas no responsivo. */
.rs-table { display: flex; flex-direction: column; gap: var(--space-2); }
.rs-head, .rs-row {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr) 118px minmax(0, 1fr) 64px;
    align-items: center;
    gap: var(--space-4);
}
.rs-head { padding: 0 var(--space-4) var(--space-1); }
.rs-row {
    min-height: 60px; padding: var(--space-3) var(--space-4);
    background: var(--surface-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.rs-row:hover { border-color: var(--border-strong); background: var(--surface-4); }

.rs-who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.rs-avatar {
    width: 34px; height: 34px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--accent-muted); color: var(--accent);
    font-size: var(--text-xs); font-weight: 700;
}
.rs-who__text { display: flex; flex-direction: column; min-width: 0; }
.rs-who__name {
    font-size: var(--text-body); font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rs-who__mail {
    font-size: var(--text-xs); color: var(--text-tertiary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rs-cell { font-size: var(--text-sm); color: var(--text-secondary); min-width: 0; }
.rs-col-acoes { display: flex; justify-content: flex-end; }

.rs-progress { display: flex; align-items: center; gap: var(--space-3); }
.rs-progress__bar {
    flex: 1; min-width: 0; height: 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-1);
    overflow: hidden;
}
.rs-progress__fill {
    display: block; height: 100%;
    border-radius: var(--radius-pill);
    background: var(--gradient-flow-x);
    background-size: 200% 100%;
    animation: ds-flow 9s var(--ease-inout) infinite;
}
.rs-progress__num {
    font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary);
    font-variant-numeric: tabular-nums; flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .rs-progress__fill { animation: none !important; }
}

/* ── Hub por formulário ─────────────────────────────────────────────────── */
.ar-forms { display: flex; flex-direction: column; gap: var(--space-2); }
.ar-form {
    display: grid;
    grid-template-columns: 40px minmax(0, 2fr) 96px minmax(0, 1.1fr) 34px;
    align-items: center; gap: var(--space-4);
    padding: var(--space-4);
    background: var(--surface-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color var(--dur-fast), background-color var(--dur-fast),
                transform var(--dur-fast) var(--ease-out);
}
.ar-form:hover { border-color: var(--accent-border); background: var(--surface-4); transform: translateY(-1px); }
.ar-form__icone {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--accent-muted); color: var(--accent);
}
.ar-form__icone i, .ar-form__icone svg { width: 18px; height: 18px; }
.ar-form__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ar-form__titulo {
    font-size: var(--text-body); font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ar-form__nums { display: flex; flex-direction: column; align-items: flex-start; }
.ar-form__n {
    font-size: var(--text-h3); font-weight: 700; color: var(--text-primary);
    letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums;
}
.ar-form__taxa { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ar-form__barra { height: 6px; border-radius: var(--radius-pill); background: var(--surface-1); overflow: hidden; }
.ar-form__fill {
    display: block; height: 100%; border-radius: var(--radius-pill);
    background: var(--gradient-flow-x); background-size: 200% 100%;
    animation: ds-flow 9s var(--ease-inout) infinite;
}
.ar-form__ir { flex-shrink: 0; border-color: transparent; }
.ar-form:hover .ar-form__ir { border-color: var(--accent-border); color: var(--accent); }

.ar-limite { margin: var(--space-3) 0 0; text-align: center; }
.ar-recente { text-decoration: none; }
.ar-recente__form { color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .ar-form__fill { animation: none !important; } }

@media (max-width: 900px) {
    .ar-form {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        row-gap: var(--space-3);
    }
    .ar-form__taxa { grid-column: 1 / -1; }
}

/* ── Lista geral (todos os formulários) ─────────────────────────────────────
   Mesma grade da lista por formulário, mais uma coluna com o formulário de
   origem no lugar da barra de conclusão. */
.ar-table .rs-head,
.ar-table .rs-row {
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.3fr) minmax(0, 1.1fr) 108px 64px;
}
.ar-form-link {
    color: var(--text-secondary); text-decoration: none;
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ar-form-link:hover { color: var(--accent); }

.ar-controles { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ar-select { width: auto; min-width: 190px; height: 40px; }

@media (max-width: 900px) {
    .ar-table .rs-head { display: none; }
    .ar-table .rs-row { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 640px) {
    .ar-controles { flex-direction: column; align-items: stretch; }
    .ar-select { width: 100%; }
}

/* ── Responsivo ─────────────────────────────────────────────────────────────
   Abaixo de 900px a tabela vira cartão empilhado: o cabeçalho some e cada
   célula ganha o próprio rótulo. */
@media (max-width: 900px) {
    .rs-head { display: none; }
    .rs-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-3);
        padding: var(--space-4);
    }
    .rs-who { grid-column: 1; }
    .rs-col-acoes { grid-column: 2; grid-row: 1; }
    .rs-cell:not(.rs-col-acoes) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .rs-toolbar { flex-direction: column; align-items: stretch; }
    .rs-toolbar .rs-search { width: 100%; }
    .rs-filters { justify-content: space-between; }
    .rs-filter { flex: 1; padding: 0 var(--space-2); }
}