/* ===========================================================================
   COBRANÇAS — visão geral + tabela (13/09/2026)
   Direção "escuro técnico": card um degrau acima do fundo, borda de 1px, sem
   sombra, raios 6/10/12, número tabular, um acento (o verde do painel) e as
   cores de estado (verde = pago, âmbar = aberto, rosa = atraso/fora).
   Só variáveis de tema; validada no claro e no escuro, 1366 e 390.
   =========================================================================== */
#cobrancas-view-container {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100% !important;
    min-height: 0 !important;
    scrollbar-width: thin;
}

.cob-shell {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 28px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: var(--font-sans);
    color: var(--text-main);
    --cob-ok: #22c55e;
    --cob-ok-bg: rgba(34, 197, 94, .12);
    --cob-espera: #f59e0b;
    --cob-espera-bg: rgba(245, 158, 11, .14);
    --cob-ruim: #fb7185;
    --cob-ruim-bg: rgba(244, 63, 94, .14);
    --cob-neutro: var(--text-secondary);
    --cob-neutro-bg: rgba(148, 163, 184, .16);
    --cob-info: #38bdf8;
    --cob-info-bg: rgba(56, 189, 248, .14);
}
html.light-theme .cob-shell {
    --cob-ok: #15803d;
    --cob-ok-bg: rgba(34, 197, 94, .12);
    --cob-espera: #8a4d05; /* 5,1:1 sobre a pílula âmbar clara (o #a16207 dava 4,34:1) */
    --cob-espera-bg: rgba(245, 158, 11, .16);
    --cob-ruim: #be123c;
    --cob-ruim-bg: rgba(244, 63, 94, .12);
    --cob-info: #0369a1;
    --cob-info-bg: rgba(56, 189, 248, .16);
}

/* ---- topo ---- */
.cob-topo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.cob-titulo {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}
.cob-titulo .cob-selo {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--accent-subtle);
    color: var(--accent-text);
    border: 1px solid var(--accent-border);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cob-titulo .cob-selo::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
}
.cob-sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}
.cob-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.cob-btn {
    appearance: none;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    font: 500 13px/1 var(--font-sans);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.cob-btn:hover { background: var(--bg-surface-hover); border-color: var(--border-hover); }
.cob-btn--primario {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #fff;
}
.cob-btn--primario:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.cob-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- cartões base ---- */
.cob-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    box-sizing: border-box;
    min-width: 0;
}
.cob-card-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.cob-card-topo h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.cob-card-topo h3 i { color: var(--text-secondary); font-size: 12px; }
.cob-card-topo .cob-fraco { font-size: 12px; color: var(--text-secondary); }

/* ---- KPIs ---- */
.cob-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}
.cob-kpi {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.cob-kpi-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.cob-kpi-rotulo {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}
.cob-kpi-icone {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-surface-hover);
    color: var(--text-secondary);
    font-size: 12px;
    flex: 0 0 auto;
}
.cob-kpi-valor {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cob-kpi-sub {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cob-kpi--ok .cob-kpi-valor { color: var(--cob-ok); }
.cob-kpi--espera .cob-kpi-valor { color: var(--cob-espera); }
.cob-kpi--ruim .cob-kpi-valor { color: var(--cob-ruim); }
.cob-kpi--ok .cob-kpi-icone { background: var(--cob-ok-bg); color: var(--cob-ok); }
.cob-kpi--espera .cob-kpi-icone { background: var(--cob-espera-bg); color: var(--cob-espera); }
.cob-kpi--ruim .cob-kpi-icone { background: var(--cob-ruim-bg); color: var(--cob-ruim); }
.cob-kpi--acento .cob-kpi-icone { background: var(--accent-subtle); color: var(--accent-text); }

/* ---- gráfico + donut ---- */
.cob-visao {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 12px;
}
.cob-barras {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: end;
    height: 190px;
    padding-top: 18px;
    border-bottom: 1px solid var(--border);
}
.cob-barra {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 6px;
    min-width: 0;
    position: relative;
}
.cob-barra-valor {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.cob-barra-coluna {
    width: 100%;
    max-width: 44px;
    border-radius: 6px 6px 0 0;
    background: var(--accent);
    opacity: .85;
    min-height: 2px;
    transition: height .3s ease;
}
.cob-barra--fraca .cob-barra-coluna { background: var(--bg-surface-active); opacity: 1; }
.cob-barras-meses {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 8px;
}
.cob-barras-meses span {
    text-align: center;
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: lowercase;
}
.cob-grafico-legenda {
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.cob-grafico-legenda strong { color: var(--text-primary); font-weight: 600; }

.cob-donut-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
}
.cob-donut {
    width: 132px; height: 132px;
    border-radius: 50%;
    flex: 0 0 auto;
    position: relative;
    background: var(--bg-surface-active);
}
.cob-donut::after {
    content: '';
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    background: var(--bg-card);
}
.cob-donut-centro {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.cob-donut-centro strong {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.cob-donut-centro span { font-size: 11px; color: var(--text-secondary); margin-top: 3px; }
.cob-legenda { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.cob-legenda-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-main);
}
.cob-legenda-item i {
    width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
}
.cob-legenda-item b {
    margin-left: auto;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ---- listas ---- */
.cob-listas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.cob-lista { display: flex; flex-direction: column; }
.cob-lista-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid var(--border-subtle);
    min-width: 0;
}
.cob-lista-item:first-child { border-top: 0; }
.cob-lista-ponto {
    width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
    background: var(--cob-neutro);
}
.cob-lista-ponto--ok { background: var(--cob-ok); }
.cob-lista-ponto--espera { background: var(--cob-espera); }
.cob-lista-ponto--ruim { background: var(--cob-ruim); }
.cob-lista-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cob-lista-nome {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cob-lista-sub {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cob-lista-dir {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}
.cob-lista-dir.ok { color: var(--cob-ok); }
.cob-lista-dir small { display: block; font-weight: 500; font-size: 11px; color: var(--text-secondary); }
.cob-lista-vazia {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 10px 0 4px;
}
.cob-lista-vazia a, .cob-lista-vazia button {
    color: var(--accent-text);
    font-weight: 600;
    background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
}

/* ---- toolbar + tabela ---- */
.cob-tabela-card { padding: 0; overflow: hidden; }
.cob-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.cobrancas-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.cobranca-filtro-pill {
    appearance: none;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font: 500 13px/1 var(--font-sans);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.cobranca-filtro-pill:hover { background: var(--bg-surface-hover); color: var(--text-main); }
.cobranca-filtro-pill.active {
    background: var(--accent-subtle);
    border-color: var(--accent-border);
    color: var(--accent-text);
}
.cobranca-filtro-count {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--bg-surface-active);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.cobranca-filtro-pill.active .cobranca-filtro-count { background: var(--accent-border); color: var(--accent-text); }
.cobrancas-search-wrap {
    position: relative;
    flex: 1 1 260px;
    max-width: 360px;
}
.cobrancas-search-wrap i {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 12px;
}
.cobrancas-search-input {
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    padding: 0 12px 0 34px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-main);
    font: 400 13px/1 var(--font-sans);
    outline: none;
    transition: border-color .12s ease;
}
.cobrancas-search-input::placeholder { color: var(--text-muted); }
.cobrancas-search-input:focus { border-color: var(--accent); }

.cobrancas-tabela-wrap { overflow-x: auto; }
.cobrancas-tabela {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    font-size: 13px;
}
.cobrancas-tabela thead th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
    white-space: nowrap;
}
.cobrancas-tabela tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
    color: var(--text-main);
}
.cobrancas-tabela tbody tr:last-child td { border-bottom: 0; }
.cobrancas-tabela tbody tr:hover td { background: var(--bg-surface-hover); }
.cobrancas-vazio {
    text-align: center;
    padding: 40px 16px !important;
    color: var(--text-secondary);
}

.cobranca-cliente-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cobranca-cliente-link {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 4px 10px 4px 4px;
    margin: -4px 0 -4px -4px;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    max-width: 100%;
    transition: background .12s ease, border-color .12s ease;
}
.cobranca-cliente-link:hover,
.cobranca-cliente-link:focus-visible {
    background: var(--accent-subtle);
    border-color: var(--accent-border);
    outline: none;
}
.cobranca-cliente-seta {
    font-size: 10px;
    color: var(--text-secondary);
    margin-left: 4px;
    opacity: 0;
    transition: opacity .12s ease, transform .12s ease;
}
.cobranca-cliente-link:hover .cobranca-cliente-seta,
.cobranca-cliente-link:focus-visible .cobranca-cliente-seta { opacity: 1; transform: translateX(2px); }
.cobrancas-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    flex: 0 0 auto;
    object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-subtle);
    color: var(--accent-text);
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--border);
}
.cobranca-cliente-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cobranca-cliente-nome {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 170px;
}
.cobranca-cliente-tel {
    font-size: 12px;
    color: var(--text-secondary);
    display: inline-flex; align-items: center; gap: 5px;
}

.cobranca-site-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 170px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-main);
    font-size: 12px;
    text-decoration: none;
    transition: border-color .12s ease, background .12s ease;
}
.cobranca-site-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cobranca-site-link i { font-size: 10px; color: var(--text-secondary); }
a.cobranca-site-link:hover { border-color: var(--accent-border); background: var(--accent-subtle); }
.cobranca-produto-selo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    background: var(--cob-info-bg);
    color: var(--cob-info);
    vertical-align: middle;
}
.cobranca-valor {
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cobranca-valor small { display: block; font-weight: 500; font-size: 11px; color: var(--text-secondary); }

.cobranca-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--cob-neutro-bg);
    color: var(--cob-neutro);
}
.cobranca-badge-pill .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cobranca-badge-pill.pago { background: var(--cob-ok-bg); color: var(--cob-ok); }
.cobranca-badge-pill.aberto { background: var(--cob-espera-bg); color: var(--cob-espera); }
.cobranca-badge-pill.atraso, .cobranca-badge-pill.fora { background: var(--cob-ruim-bg); color: var(--cob-ruim); }

.cobranca-clock-box { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cobranca-clock-main { font-size: 13px; color: var(--text-main); white-space: nowrap; }
.cobranca-clock-sub { font-size: 11.5px; color: var(--text-secondary); white-space: normal; max-width: 200px; }

.cobranca-acoes-group { display: flex; gap: 4px; justify-content: flex-end; }
.cobranca-action-btn {
    appearance: none;
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.cobranca-action-btn:hover { background: var(--bg-surface-hover); color: var(--text-primary); border-color: var(--border-hover); }
.cobranca-action-btn.cobrar { color: var(--accent-text); border-color: var(--accent-border); }
.cobranca-action-btn.cobrar:hover { background: var(--accent-subtle); }
.cobranca-action-btn.reativar { color: var(--cob-ok); }

.cobrancas-tfoot-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 4px 0;
}
.cobrancas-tfoot-info { font-size: 12.5px; color: var(--text-secondary); }
.cobrancas-tfoot-info strong { color: var(--text-primary); }
.cobrancas-tfoot-acoes { display: flex; gap: 8px; }
.cobrancas-ver-mais-btn, .cobrancas-ver-todas-btn, .cobrancas-recolher-btn {
    appearance: none;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    font: 500 12.5px/1 var(--font-sans);
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer;
}
.cobrancas-ver-mais-btn:hover, .cobrancas-ver-todas-btn:hover, .cobrancas-recolher-btn:hover { background: var(--bg-surface-hover); }
.cobrancas-tabela tfoot td { padding: 10px 16px; border-top: 1px solid var(--border); background: var(--bg-surface); }

/* ---- responsivo ---- */
@media (max-width: 1100px) {
    .cob-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cob-visao { grid-template-columns: 1fr; }
    .cob-listas { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .cob-shell { padding: 16px 14px 32px; gap: 12px; }
    .cob-titulo { font-size: 20px; }
    .cob-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cob-kpi { padding: 14px; }
    .cob-kpi-valor { font-size: 22px; }
    .cob-acoes { width: 100%; }
    .cob-acoes .cob-btn { flex: 1; justify-content: center; }
    .cob-barras { height: 150px; }
    .cob-donut-wrap { flex-direction: column; align-items: flex-start; }
    .cobrancas-search-wrap { max-width: none; }
}
@media (max-width: 720px) {
    .cob-kpi:nth-child(5) { grid-column: 1 / -1; }
    .cob-card-topo { flex-direction: column; align-items: flex-start; gap: 4px; }
    .cob-topo { align-items: flex-start; }
}