/*
 * Visual do IS Coworking — carregado por último (libraries_user.html).
 * 1. Redefine as variáveis do tema (cores, fonte, raios) para todas as telas.
 * 2. Componentes "ic-" usados pelas telas do módulo de faturamento.
 */

:root {
    --ic-ink: #1D2433;
    --ic-ink-soft: #4E586B;
    --ic-ink-faint: #7A8496;
    --ic-ground: #F3F5F8;
    --ic-line: #D9DEE7;
    --ic-line-soft: #E4E8EF;
    --ic-navy: #1B2559;
    --ic-primary: #1F3A8A;
    --ic-primary-soft: #DCE7FF;
    --ic-warn: #E8A33D;
    --ic-danger: #B42318;

    --font-family: 'Source Sans 3', 'Noto Sans', 'Segoe UI', sans-serif;
    --font-size: 15px;
    --text-color: var(--ic-ink-soft);
    --text-color-strong: var(--ic-ink);
    --text-color-light: var(--ic-ink-faint);
    --main-color: var(--ic-primary);
    --preloader-color: var(--ic-primary);
    --template-border-color: var(--ic-line);

    --content-background: var(--ic-ground);
    --content-border-color: var(--ic-line);
    --live-background-color: var(--ic-ground);

    --header-background-color: var(--ic-navy);
    --header-logo-background: var(--ic-navy);
    --header-logo-text-color: #FFFFFF;
    --header-text-color: #C9D2F0;
    --header-border-bottom: var(--ic-navy);
    --header-logo-border-right: var(--ic-navy);
    --header-logo-border-bottom: var(--ic-navy);
    --header-track-border-right: #2E3B78;

    --menu-background-check: var(--ic-primary);
    --menu-master-color-strong: var(--ic-ink);
    --submenu-text-color: #3A4254;
    --submenu-sub-text-color: #3A4254;
    --submenu-text-hover: var(--ic-primary);
    --submenu-check-color: var(--ic-primary);
    --menu-border-right: var(--ic-line);
    --submenu-border-right: var(--ic-line);

    --button-height: 38px;
    --button-border-radius: 6px;
    --button-padding: 14px;
    --button-text-color: var(--ic-ink);
    --button-text-color-hover: var(--ic-primary);
    --button-border: #C3CAD6;

    --field-height: 38px;
    --field-border-radius: 6px;
    --field-border-color: #C3CAD6;
    --field-color: var(--ic-ink);
    --field-focus-border-color: var(--ic-primary);
    --field-placeholder-color: #9AA3B2;
    --field-padding-horizontal: 10px;

    --panel-border-radius: 8px;
    --panel-border-color: var(--ic-line);
    --panel-header-background: #FFFFFF;
    --panel-header-color: var(--ic-ink);
    --panel-header-font-size: 18px;
    --panel-header-padding-vertical: 14px;
    --panel-header-padding-horizontal: 16px;
    --panel-header-border-color: var(--ic-line-soft);
    --panel-body-padding: 16px;

    --table-header-color: var(--ic-ink);
    --table-header-font-weight: 700;
    --table-body-color: var(--ic-ink);
    --tr-odd-background: #FFFFFF;
    --tr-even-background: #FFFFFF;
    --tr-hover-background: #EEF3FF;
    --tr-hover-color: var(--ic-ink);

    --tab-active-color: var(--ic-primary);
    --tab-active-border-color: var(--ic-line);
    --tab-color: #3A4254;
    --tab-font-weight: 600;

    --modal-header-background: var(--ic-navy);
    --modal-footer-background: #F8F9FB;
}

/* ---------- ajustes gerais das telas Adianti ---------- */

.panel > .panel-heading,
.card > .card-header {
    font-weight: 700;
    border-bottom: 1px solid var(--ic-line-soft);
}

label, .tlabel {
    font-weight: 600;
    color: var(--ic-ink-soft);
}

.table > thead > tr > th,
.tdatagrid_table > thead > tr > td {
    background: #EEF1F6;
    border-bottom: 0;
}

.table > tbody > tr > td,
.tdatagrid_table > tbody > tr > td {
    border-top: 1px solid var(--ic-line-soft);
    vertical-align: middle;
}

.btn-primary,
.btn-primary:focus {
    background: var(--ic-primary);
    border-color: var(--ic-primary);
    color: #FFFFFF;
    font-weight: 600;
}

.btn-primary:hover {
    background: #152A66;
    border-color: #152A66;
    color: #FFFFFF;
}

/* ---------- componentes do módulo ---------- */

.ic-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    text-shadow: none;
}

.ic-badge-sim, .ic-badge-liquidado { background: #D3F0DC; color: #14532D; }
.ic-badge-nao { background: #E3E6EC; color: #2E3545; }
.ic-badge-enviado { background: #1D4ED8; color: #FFFFFF; }
.ic-badge-info, .ic-badge-faturado { background: var(--ic-primary-soft); color: var(--ic-primary); }
.ic-badge-pendente { background: #FFE9BF; color: #6B4000; }
.ic-badge-atrasado { background: var(--ic-danger); color: #FFFFFF; }
.ic-badge-cancelado { background: #F0F0F0; color: #555555; text-decoration: line-through; }
.ic-badge-falha { background: var(--ic-danger); color: #FFFFFF; }
/* situação do dia no quadro de tarefas: aberto em vermelho, fechado em verde */
.ic-badge-dia-aberto { background: var(--ic-danger); color: #FFFFFF; }
.ic-badge-dia-fechado { background: #1E7B45; color: #FFFFFF; }
.ic-badge-dia-aberto i,
.ic-badge-dia-fechado i { margin-right: 4px; font-size: .9em; }
/* coworking: cancelado em vermelho e agendado já passado (a confirmar) em azul */
.ic-badge-cw-cancelado { background: var(--ic-danger); color: #FFFFFF; }
.ic-badge-cw-confirmar { background: #2563EB; color: #FFFFFF; }

.ic-ajuda {
    color: var(--ic-ink-soft);
    font-size: 13px;
    margin: 2px 0 0;
}

.ic-secao {
    font-size: 16px;
    font-weight: 700;
    color: var(--ic-ink);
    margin: 4px 0 8px;
}

/* nome do sistema no cabeçalho (o título do application.ini está vazio) */
.container-header .company-logo .logo-name:empty::before {
    content: 'IS COWORKING';
    color: #FFFFFF;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.5px;
}

/* ---------- faturamento mensal ---------- */

/* cartões de totais acima da lista */
.ic-resumo {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 4px 0 14px;
}

.ic-cartao {
    flex: 1 1 150px;
    background: #FFFFFF;
    border: 1px solid var(--ic-line);
    border-left: 4px solid var(--ic-primary);
    border-radius: 8px;
    padding: 10px 14px;
}

.ic-cartao-ok { border-left-color: #2E8B57; }
.ic-cartao-atraso { border-left-color: var(--ic-danger); }
.ic-cartao-atraso .ic-cartao-valor { color: var(--ic-danger); }

.ic-cartao-rotulo {
    display: block;
    font-size: 13px;
    color: var(--ic-ink-soft);
}

.ic-cartao-valor {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--ic-ink);
    font-variant-numeric: tabular-nums;
}

/* documentos de cada fatura na lista: verde = anexado, amarelo = falta */
.ic-doc {
    display: inline-block;
    padding: 1px 7px;
    margin: 1px 3px 1px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.ic-doc-ok { background: #D3F0DC; color: #14532D; }
.ic-doc-falta { background: #FFE9BF; color: #6B4000; }

/* detalhe do faturamento */
.ic-situacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 6px;
    background: var(--ic-ground);
    border: 1px solid var(--ic-line);
    border-radius: 8px;
}

.ic-situacao-texto { color: var(--ic-ink); font-size: 14px; }

.ic-valores { max-width: 460px; margin: 8px 0 0 auto; }
.ic-valores table { width: 100%; }
.ic-valores td { padding: 5px 8px; border-bottom: 1px solid var(--ic-line-soft); color: var(--ic-ink); }
.ic-valores td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ic-valores-imposto td { color: var(--ic-ink-soft); font-size: 13px; padding-left: 20px; }
.ic-valores-total td { font-weight: 700; font-size: 17px; border-top: 2px solid var(--ic-line); }

.ic-documentos { width: 100%; margin-bottom: 14px; }
.ic-documentos th { padding: 6px 8px; border-bottom: 2px solid var(--ic-line); font-size: 12px; font-weight: 600; text-align: left; color: var(--ic-ink-soft); }
.ic-documentos td { padding: 7px 8px; border-bottom: 1px solid var(--ic-line-soft); color: var(--ic-ink); }
.ic-documentos td:last-child { text-align: right; white-space: nowrap; }

/* e-mail do faturamento */
.ic-email-campos { width: 100%; margin: 4px 0 8px; }
.ic-email-campos td { padding: 5px 8px; border-bottom: 1px solid var(--ic-line-soft); color: var(--ic-ink); vertical-align: top; }
.ic-email-campos td:first-child { width: 70px; color: var(--ic-ink-soft); font-weight: 600; }

.ic-email-teste, .ic-email-impedimento {
    padding: 8px 12px;
    margin-bottom: 6px;
    border-radius: 8px;
    font-size: 14px;
}

.ic-email-teste { background: #FFE9BF; color: #6B4000; }
.ic-email-impedimento { background: #FDE3E0; color: #7A1810; }
.ic-email-falta { color: var(--ic-danger); }
.ic-email-anexos div { padding: 5px 0; border-bottom: 1px solid var(--ic-line-soft); word-break: break-word; }
.ic-email-assinatura { max-width: 100%; border: 1px solid var(--ic-line-soft); border-radius: 6px; }

/* telas gerenciais do faturamento (previsão, dashboard, histórico do cliente) */
.ic-painel {
    background: #FFFFFF;
    border: 1px solid var(--ic-line);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

.ic-cartao-nota { display: block; font-size: 12px; color: var(--ic-ink-soft); margin-top: 2px; }
/* formulário do lançamento financeiro (painel da direita): ajuda no ícone (i) do rótulo e botões sempre à vista */
.ic-dica { color: #8A93A6; font-size: 12px; cursor: help; }
.container-part[page-name=LancamentosFinanceirosForm] .card-footer { position: sticky; bottom: 0; z-index: 5; background: #FFFFFF; box-shadow: 0 -2px 6px rgba(0, 0, 0, .06); }

/* fatura do cartão: o que os outros devem ao titular (o valor a transferir para ele) */
.ic-cartao.ic-cartao-transferir { border-left-color: var(--ic-warn); background: #FFF8EC; }

/* janela do pagamento da fatura em partes: mais larga, com o quadro das somas por conta */
.modal-dialog:has(.ic-pagamento-fatura) { max-width: 860px; }
.ic-pagamento-somas ul { list-style: none; margin: 4px 0 8px; padding: 8px 12px; border: 1px solid var(--ic-line); border-radius: 8px; background: #F7F9FC; }
.ic-pagamento-somas li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13px; }
.ic-pagamento-somas li small { color: var(--ic-ink-soft); }
.ic-pagamento-somas li b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ic-pagamento-somas li.ic-pagamento-titular { border-top: 1px dashed var(--ic-line); margin-top: 3px; padding-top: 6px; color: #8A5A00; }
.ic-pagamento-somas li.ic-pagamento-ok { border-top: 1px solid var(--ic-line); margin-top: 3px; padding-top: 6px; color: #1E7B45; }
.ic-pagamento-somas li.ic-pagamento-diferenca { border-top: 1px solid var(--ic-line); margin-top: 3px; padding-top: 6px; color: var(--ic-danger); }
/* Resultado da Empresa: cada origem ou subcategoria abre a lista dos lançamentos dela (iscoworking.js) */
.ic-res-tabela tr.ic-res-grupo { cursor: pointer; }
.ic-res-tabela tr.ic-res-grupo:hover td { background: #F3F6FB; }
.ic-res-tabela tr.ic-res-item { display: none; }
.ic-res-tabela tr.ic-res-item.ic-res-visivel { display: table-row; }
.ic-res-tabela tr.ic-res-item td { font-size: 13px; background: #FAFBFD; }
.ic-res-seta { font-size: 11px; color: var(--ic-ink-soft); width: 12px; transition: transform .15s; }
.ic-res-aberto .ic-res-seta { transform: rotate(90deg); }
.ic-res-acoes { font-size: 13px; font-weight: normal; margin-left: 8px; }
.ic-sobe { color: #1E7B45; font-weight: 600; }
.ic-desce { color: var(--ic-danger); font-weight: 600; }
.ic-detalhes { color: var(--ic-ink); font-size: 14px; margin: 8px 0 0; }

.ic-tabela { width: 100%; font-variant-numeric: tabular-nums; }
.ic-tabela th { text-align: right; padding: 6px 8px; font-size: 13px; color: var(--ic-ink-soft); border-bottom: 2px solid var(--ic-line); white-space: nowrap; }
.ic-tabela td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--ic-line-soft); color: var(--ic-ink); white-space: nowrap; }
.ic-tabela th:first-child, .ic-tabela td:first-child { text-align: left; }
.ic-tabela td[style*="left"] { white-space: normal; }
.ic-tabela-total td { font-weight: 700; border-top: 2px solid var(--ic-line); border-bottom: none; }
/* subtotal de um grupo dentro da tabela (compras da fatura por cartão) */
.ic-tabela tr.ic-tabela-subtotal td { font-weight: 600; background: #E9EDF4; border-bottom: 2px solid var(--ic-line); }
/* espaço entre um cartão e o seguinte (e antes do total) */
.ic-tabela tr.ic-tabela-subtotal + tr td { padding-top: 18px; }
.ic-tabela-destaque td { background: var(--ic-primary-soft); }
/* tabela em grupos (um bloco por titular): a linha que fecha o grupo é mais forte que a que separa os lançamentos do total,
   e o grupo seguinte começa com respiro */
.ic-tabela tr.ic-tabela-fim-grupo td { border-bottom: 3px solid var(--ic-navy); padding-bottom: 10px; }
.ic-tabela tr.ic-tabela-fim-grupo + tr td { padding-top: 16px; }
.ic-tabela tr.ic-tabela-fim-grupo:last-child td { border-bottom: none; }
/* colunas de texto (ic-eN = a coluna N) ficam à esquerda; as de valor continuam à direita */
.ic-tabela.ic-e2 tr > :nth-child(2), .ic-tabela.ic-e3 tr > :nth-child(3), .ic-tabela.ic-e4 tr > :nth-child(4),
.ic-tabela.ic-e5 tr > :nth-child(5), .ic-tabela.ic-e6 tr > :nth-child(6), .ic-tabela.ic-e8 tr > :nth-child(8) { text-align: left; }
.ic-tabela-matriz td, .ic-tabela-matriz th { font-size: 13px; padding: 5px 6px; }
/* filtros no cabeçalho da tabela (Faturas de Cartão): uma linha embaixo dos títulos; o filtro em uso fica destacado */
.ic-tabela tr.ic-tabela-filtros th { padding: 4px 4px 6px; border-bottom: 2px solid var(--ic-line); font-weight: normal; }
.ic-tabela tr:first-child th { border-bottom: none; }
.ic-tabela-filtros .form-control { height: 28px; padding: 2px 6px; font-size: 12px; width: 100%; min-width: 70px; }
.ic-tabela-filtros input.form-control { min-width: 150px; }
.ic-tabela-filtros .form-control.ic-filtro-ativo { border-color: var(--ic-navy); background: #EEF2FA; font-weight: 600; }
.ic-previsto { font-style: italic; color: var(--ic-ink-soft) !important; }

/* ---------- Controle financeiro ---------- */

.ic-lanc-receita { font-weight: 600; color: #14532D; }
.ic-lanc-despesa { font-weight: 600; color: var(--ic-danger); }
/* a classe na própria célula (extrato em Contas e Saldos) precisa vencer a cor padrão do .ic-tabela td */
.ic-tabela td.ic-lanc-receita { color: #1E7B45; }
.ic-tabela td.ic-lanc-despesa { color: var(--ic-danger); }
.ic-lanc-parcela { margin-left: 4px; padding: 1px 6px; border-radius: 10px; background: #EEF1F6; font-size: 12px; color: var(--ic-ink-soft); white-space: nowrap; }
.ic-lanc-transf { margin-left: 4px; color: var(--ic-primary); }
.ic-lanc-icone { color: var(--ic-ink-faint); }

/* ---------- Coworking (CoworkingSaldos): as cores do extrato são as da imagem enviada ao cliente ---------- */

.ic-cw-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.ic-cw-acoes .ic-ajuda { margin: 0; }
.ic-cw-whatsapp, .ic-cw-whatsapp:hover, .ic-cw-whatsapp:focus { background: #25D366; border-color: #1DA851; color: #FFFFFF; }
.ic-tabela.ic-cw-extrato th, .ic-tabela.ic-cw-extrato td { text-align: center; }
.ic-tabela.ic-cw-extrato tr > :nth-child(4) { white-space: normal; }
.ic-tabela.ic-cw-extrato tr.ic-cw-P td { background: #C6EFCE; color: #1E6B30; font-weight: 600; }
.ic-tabela.ic-cw-extrato tr.ic-cw-A td { background: #FFEB9C; color: #7A5A00; }
/* agendado com o horário já passado: falta dizer se o cliente veio */
.ic-tabela.ic-cw-extrato tr.ic-cw-confirmar td { background: #DBEAFE; color: #1E3A8A; box-shadow: inset 0 -2px 0 #2563EB; }
.ic-tabela.ic-cw-extrato tr.ic-cw-confirmar td:first-child { box-shadow: inset 4px 0 0 #2563EB, inset 0 -2px 0 #2563EB; }
.ic-tabela.ic-cw-extrato tr.ic-cw-C td { background: #FFC7CE; color: #9C0006; }
.ic-tabela.ic-cw-extrato tr.ic-cw-S td { background: #E7E9EE; color: #2E3545; font-style: italic; }
.ic-tabela.ic-cw-extrato td.ic-cw-negativo { color: #C00000; }
.ic-cw-legenda { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 13px; }
.ic-cw-legenda span { padding: 2px 10px; border-radius: 4px; border: 1px solid var(--ic-line-soft); }
.ic-cw-legenda span:first-child { border: none; padding-left: 0; font-weight: 600; }
.ic-cw-legenda .ic-cw-P { background: #C6EFCE; color: #1E6B30; }
.ic-cw-legenda .ic-cw-R { background: #FFFFFF; }
.ic-cw-legenda .ic-cw-A { background: #FFEB9C; color: #7A5A00; }
.ic-cw-legenda .ic-cw-confirmar { background: #DBEAFE; color: #1E3A8A; border-left: 4px solid #2563EB; }
.ic-cartao.ic-cartao-cw-confirmar { border-left-color: #2563EB; }
.ic-cartao.ic-cartao-cw-confirmar .ic-cartao-valor { color: #1D4ED8; }
.ic-cw-legenda .ic-cw-C { background: #FFC7CE; color: #9C0006; }

/* agenda dos espaços (CoworkingAgenda): a grade da agenda das tarefas, com as cores do extrato; embaixo do nome de
   cada coluna, os horários livres */
.ic-ag-uso-A { background: #FFEB9C; border-left: 3px solid #C9A100; color: #5C4300; }
.ic-ag-uso-P { background: #DBEAFE; border-left: 3px solid #2563EB; color: #1E3A8A; }
.ic-ag-uso-R { background: #EEF1F6; border-left: 3px solid #6B7486; color: var(--ic-ink); }
.ic-ag-uso:hover, .ic-ag-uso:focus-visible { z-index: 2; box-shadow: 0 0 0 2px var(--ic-primary); text-decoration: none; outline: 0; }
.ic-ag-vaga-passada { background: #F6F7F9; }
.ic-ag-livre { display: block; margin-top: 2px; font-size: 11px; line-height: 1.3; color: #1E6B30; }

/* Certificado digital na aba NFS-e de PessoasForm: quadro da situação com o botão de remover à direita e o de salvar com a
   mesma altura e na mesma linha dos campos */
.ic-certificado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 10px 12px; background: #F7F8FB; border: 1px solid var(--ic-line); border-radius: 8px; color: var(--ic-ink-soft); font-size: 13px; line-height: 1.5; }
.ic-certificado-dados { min-width: 0; overflow-wrap: anywhere; }
.ic-certificado-botao, .ic-certificado-remover { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 6px 14px; font-weight: 600; white-space: nowrap; }
.ic-certificado-linha .fb-inline-field-container { width: 100%; }
.ic-certificado-linha .form-control { width: 100%; }
.ic-certificado-botao { width: 100%; }
.ic-certificado-remover { flex: none; background: #FFFFFF; border: 1px solid var(--ic-danger); color: var(--ic-danger); }
.ic-certificado-remover:hover, .ic-certificado-remover:focus-visible { background: var(--ic-danger); color: #FFFFFF; }

/* ---------- Tarefas (TarefasQuadro) ---------- */

/* faixa da semana (número, domingo a sábado, setas) e botões do quadro, juntos e centralizados */
.ic-tar-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: #FFFFFF;
    border: 1px solid var(--ic-line);
    border-radius: 8px;
}

.ic-tar-nav { display: flex; align-items: center; gap: 10px; }
.ic-tar-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ic-tar-semana { display: flex; flex-direction: column; min-width: 190px; text-align: center; line-height: 1.25; }
.ic-tar-semana-numero { font-size: 18px; font-weight: 700; color: var(--ic-ink); }
.ic-tar-semana-dias { font-size: 13px; color: var(--ic-ink-soft); font-variant-numeric: tabular-nums; }

.ic-tar-seta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--button-border);
    border-radius: 6px;
    background: #FFFFFF;
    color: var(--ic-primary);
    font-size: 16px;
}

.ic-tar-seta:hover,
.ic-tar-seta:focus-visible {
    background: var(--ic-primary);
    border-color: var(--ic-primary);
    color: #FFFFFF;
    text-decoration: none;
    outline: 0;
}

/* setas do dia: grandes e cheias, para achar de longe */
.ic-tar-seta-grande {
    width: 60px;
    height: 48px;
    background: var(--ic-primary);
    border-color: var(--ic-primary);
    color: #FFFFFF;
    font-size: 22px;
}

.ic-tar-seta-grande:hover,
.ic-tar-seta-grande:focus-visible { background: #152A66; border-color: #152A66; }

.ic-tar-barra-dia { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; }
/* tag da situação do dia, embaixo das setas (visão do dia) */
.ic-tar-dia-situacao { display: flex; justify-content: center; margin: -4px 0 12px; }
.ic-tar-dia-situacao .ic-badge { padding: 5px 16px; font-size: 15px; }
/* min-width 0: o combo encolhe abaixo do texto mais longo ("Dom, 18/10/2026 (hoje) · 4 de 5 em aberto"); sem isso a linha
   passava da tela, as setas saíam pelos lados e a área do conteúdo inteira rolava para o lado */
.ic-tar-combo.form-control { flex: 0 1 440px; width: auto; min-width: 0; height: 48px; font-size: 16px; font-weight: 600; color: var(--ic-ink); text-overflow: ellipsis; }
.ic-tar-barra-dia { min-width: 0; max-width: 100%; }

.ic-tar-visoes { display: inline-flex; border: 1px solid var(--button-border); border-radius: 6px; overflow: hidden; }
.ic-tar-visoes a { padding: 6px 12px; background: #FFFFFF; color: var(--ic-ink); font-weight: 600; text-decoration: none; }
.ic-tar-visoes a + a { border-left: 1px solid var(--button-border); }
.ic-tar-visoes a.ic-tar-visao-ativa { background: var(--ic-primary); color: #FFFFFF; }
.ic-tar-botao-ativo, .ic-tar-botao-ativo:focus { background: var(--ic-primary-soft); border-color: var(--ic-primary); color: var(--ic-primary); }
.ic-tar-contador { display: inline-block; min-width: 20px; margin-left: 2px; padding: 0 6px; border-radius: 10px; background: var(--ic-navy); color: #FFFFFF; font-size: 12px; text-align: center; }

/* filtros rápidos da situação (valem para os quadros dos dias) */
.ic-tar-filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 12px; }

.ic-tar-filtro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #FFFFFF;
    border: 1px solid var(--button-border);
    border-radius: 16px;
    color: var(--ic-ink);
    font-size: 13px;
    font-weight: 600;
}

.ic-tar-filtro:hover, .ic-tar-filtro:focus-visible { border-color: var(--ic-primary); color: var(--ic-primary); text-decoration: none; outline: 0; }
.ic-tar-filtro-ativo, .ic-tar-filtro-ativo:hover, .ic-tar-filtro-ativo:focus, .ic-tar-filtro-ativo:focus-visible { background: var(--ic-primary); border-color: var(--ic-primary); color: #FFFFFF; }
.ic-tar-filtro-ponto { flex: 0 0 9px; height: 9px; border-radius: 50%; background: var(--ic-warn); }
.ic-tar-filtro-A .ic-tar-filtro-ponto { background: var(--ic-primary); }
.ic-tar-filtro-R .ic-tar-filtro-ponto { background: #2E8B57; }
.ic-tar-filtro-N .ic-tar-filtro-ponto { background: var(--ic-danger); }
.ic-tar-filtro-ativo .ic-tar-filtro-ponto { box-shadow: 0 0 0 2px #FFFFFF; }
.ic-tar-filtro-qtd { min-width: 20px; padding: 0 6px; border-radius: 10px; background: #EEF1F6; color: var(--ic-ink-soft); font-size: 12px; text-align: center; }
.ic-tar-filtro-ativo .ic-tar-filtro-qtd { background: rgba(255, 255, 255, .22); color: #FFFFFF; }

/* painel das tarefas a delegar à esquerda e os quadros dos dias (1 na visão diária, 7 na semanal). Na visão diária,
   painel, dia e agenda ficam juntos e centralizados, com o mesmo espaço entre eles: em tela larga a sobra vai para as
   margens de fora, e não para o meio. Quando falta espaço, as colunas encolhem até a largura mínima de cada uma (o dia
   encolhe mais) e continuam lado a lado; quando nem assim cabem (conta o espaço do quadro, já sem o menu), a agenda e os
   pagamentos descem para a linha de baixo */
.ic-tar-area { container-type: inline-size; }
.ic-tar-corpo { display: flex; align-items: flex-start; justify-content: center; gap: 12px; }
@container (max-width: 1030px) {
    .ic-tar-corpo.ic-tar-com-painel { flex-wrap: wrap; }
    .ic-tar-corpo.ic-tar-com-painel > .ic-tar-dias-dia { flex-basis: 480px; }
}
@container (max-width: 820px) {
    .ic-tar-corpo { flex-wrap: wrap; }
    .ic-tar-corpo > .ic-tar-dias-dia { flex-basis: 480px; }
}
.ic-tar-dias { display: grid; flex: 1 1 auto; align-items: start; gap: 10px; min-width: 0; }
.ic-tar-dias-dia { flex: 1 1 920px; max-width: 920px; min-width: 340px; grid-template-columns: minmax(0, 1fr); container-type: inline-size; }
/* dia estreito (as outras colunas abertas em tela menor): os botões da tarefa descem para a linha de baixo do cartão */
@container (max-width: 600px) {
    .ic-tar-dias-dia .ic-tarefa { flex-wrap: wrap; }
    .ic-tar-dias-dia .ic-tarefa-acoes { flex: 1 0 100%; flex-wrap: wrap; justify-content: flex-end; }
}
.ic-tar-dias-semana { flex: 1 1 0; grid-template-columns: repeat(7, minmax(165px, 1fr)); overflow-x: auto; padding-bottom: 4px; }

.ic-tar-dia,
.ic-tar-painel {
    min-width: 0;
    background: #FFFFFF;
    border: 1px solid var(--ic-line);
    border-top: 4px solid var(--ic-line);
    border-radius: 8px;
}

.ic-tar-dia-hoje { border-top-color: var(--ic-primary); }
.ic-tar-dia-fechado { border-top-color: #2E8B57; background: #F8FBF9; }
.ic-tar-painel { flex: 0 1 280px; min-width: 200px; border-top-color: var(--ic-warn); }

.ic-tar-dia-topo,
.ic-tar-painel-topo {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ic-line-soft);
}

.ic-tar-dia-nome, .ic-tar-painel-topo > span { font-size: 16px; font-weight: 700; color: var(--ic-ink); }
.ic-tar-dia-nome small { font-size: 13px; font-weight: 400; color: var(--ic-ink-soft); }
.ic-tar-painel-topo > span { margin-right: auto; }
.ic-tar-dia-selos { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-left: auto; }
.ic-tar-painel .ic-ajuda { padding: 6px 12px 0; }
.ic-tar-painel-sub { padding: 8px 12px 0; border-top: 1px dashed var(--ic-line); font-size: 13px; font-weight: 700; color: var(--ic-danger); }

.ic-tar-mais {
    display: inline-flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    height: 28px;
    border-radius: 50%;
    color: var(--ic-primary);
}

.ic-tar-mais:hover, .ic-tar-mais:focus-visible { background: var(--ic-primary-soft); color: var(--ic-primary); text-decoration: none; outline: 0; }

.ic-tar-lista, .ic-tar-lista-fixa, .ic-tar-encerradas { margin: 0; padding: 8px; list-style: none; }
.ic-tar-lista { min-height: 64px; }
.ic-tar-lista:empty::before { content: 'Nenhuma tarefa em aberto.'; display: block; padding: 16px 6px; font-size: 13px; text-align: center; color: var(--ic-ink-faint); }
.ic-tar-lista-delegar:empty::before { content: 'Nenhuma tarefa a delegar.'; }
/* com filtro de situação: as outras tarefas continuam na lista, escondidas, e o dia sem nenhuma ganha o aviso */
.ic-tarefa.ic-tarefa-oculta { display: none; }
.ic-tar-vazio { padding: 16px 6px; font-size: 13px; text-align: center; color: var(--ic-ink-faint); }
/* enquanto uma tarefa é arrastada, os lugares onde ela pode ser solta ficam marcados */
.ic-tar-arrastando .ic-tar-lista { outline: 2px dashed var(--ic-primary-soft); outline-offset: -3px; border-radius: 8px; }

/* cartão da tarefa na fila do dia: alça, ordem de prioridade, texto e ações */
.ic-tarefa {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    box-sizing: border-box;
    margin: 0 0 6px;
    padding: 8px 8px 8px 4px;
    list-style: none;
    background: #FFFFFF;
    border: 1px solid var(--ic-line);
    border-left: 4px solid var(--ic-warn);
    border-radius: 6px;
    cursor: grab;
}

.ic-tarefa-A { border-left-color: var(--ic-primary); background: #EBF1FE; }
.ic-tarefa.ui-sortable-helper { box-shadow: 0 14px 26px -12px rgba(29, 36, 51, .5); cursor: grabbing; }
.ic-tarefa-fantasma { min-height: 44px; margin: 0 0 6px; list-style: none; background: var(--ic-primary-soft); border: 2px dashed var(--ic-primary); border-radius: 6px; }

.ic-tarefa-pega { flex: 0 0 auto; padding: 2px 4px; color: var(--ic-ink-faint); touch-action: none; }
/* o jQuery UI põe touch-action: none em todo item arrastável (.ui-sortable-handle), o que travava a rolagem da tela com o
   dedo em cima das tarefas e das linhas ordenáveis de um TFieldList (documentos da fatura). O jQuery UI do tema só
   entende mouse: no celular o arrasto é só o da alça da tarefa (iscoworking.js, que mantém touch-action: none nela),
   então todo o resto volta a deixar rolar */
.ui-sortable-handle { touch-action: auto; }
.ic-tarefa-ordem { display: flex; flex: 0 0 24px; align-items: center; justify-content: center; height: 24px; border-radius: 50%; background: var(--ic-navy); color: #FFFFFF; font-size: 13px; font-weight: 700; }
.ic-tarefa-corpo { display: flex; flex: 1 1 0; flex-direction: column; gap: 3px; min-width: 0; color: var(--ic-ink); text-decoration: none; }
.ic-tarefa-corpo:hover, .ic-tarefa-corpo:focus { color: var(--ic-primary); text-decoration: none; }
.ic-tarefa-resumo { font-weight: 600; overflow-wrap: anywhere; }
.ic-tarefa-hora { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px; background: var(--ic-ink); color: #FFFFFF; font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.ic-tarefa-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; color: var(--ic-ink-soft); }
.ic-tarefa-meta .ic-badge { padding: 0 8px; font-size: 11px; }
/* fundo das etiquetas do cartão um tom mais escuro que o das outras telas */
.ic-tarefa-meta .ic-badge-info { background: #CFDDFB; }
.ic-tarefa-meta .ic-badge-sim { background: #C4E8CF; }
.ic-tarefa-detalhe { font-size: 13px; font-weight: 400; color: var(--ic-ink-soft); overflow-wrap: anywhere; }

/* tarefa concluída: continua no lugar e com o número que tinha, em verde e riscada */
.ic-tarefa-R { border-left-color: #2E8B57; background: #E6F3EA; }
.ic-tarefa-R .ic-tarefa-ordem { background: #1E7B45; }
.ic-tarefa-R .ic-tarefa-corpo { color: var(--ic-ink-soft); }
.ic-tarefa-R .ic-tarefa-corpo:hover, .ic-tarefa-R .ic-tarefa-corpo:focus { color: var(--ic-primary); }
.ic-tarefa-R .ic-tarefa-resumo { text-decoration: line-through; }
.ic-tarefa-R .ic-tarefa-hora { background: var(--ic-ink-soft); }
/* não realizada (falhou): no mesmo lugar da fila, riscada, em vermelho */
.ic-tarefa-N { border-left-color: var(--ic-danger); background: #FCE9E7; }
.ic-tarefa-N .ic-tarefa-ordem { background: var(--ic-danger); }
.ic-tarefa-N .ic-tarefa-corpo { color: #8A1C12; }
.ic-tarefa-N .ic-tarefa-corpo:hover, .ic-tarefa-N .ic-tarefa-corpo:focus { color: var(--ic-primary); }
.ic-tarefa-N .ic-tarefa-resumo { text-decoration: line-through; }
.ic-tarefa-N .ic-tarefa-hora { background: var(--ic-danger); }

.ic-tar-tipo { padding: 0 7px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.ic-tar-tipo-pes { background: #DFD2F7; color: #4A2A8A; }
.ic-tar-tipo-dev { background: #C9E5F9; color: #0B4A75; }
.ic-tar-tipo-adm { background: #FDE0A8; color: #6B4000; }
.ic-tar-nota { font-size: 12px; font-style: italic; color: var(--ic-ink-soft); overflow-wrap: anywhere; }
.ic-tar-icone { color: var(--ic-ink-faint); }

.ic-tarefa-acoes { display: flex; flex: 0 0 auto; gap: 4px; }

.ic-tar-acao {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #FFFFFF;
    border: 1px solid var(--ic-line);
    border-radius: 6px;
    color: var(--ic-ink-soft);
    font-size: 13px;
}

.ic-tar-acao:hover, .ic-tar-acao:focus-visible { border-color: var(--ic-primary); color: var(--ic-primary); text-decoration: none; outline: 0; }
.ic-tar-acao-ok { border-color: #2E8B57; color: #1E7B45; }
.ic-tar-acao-ok:hover, .ic-tar-acao-ok:focus-visible { background: #2E8B57; border-color: #2E8B57; color: #FFFFFF; }
.ic-tar-acao-ligada, .ic-tar-acao-ligada:hover { background: var(--ic-primary); border-color: var(--ic-primary); color: #FFFFFF; }
.ic-tar-acao-cancelar:hover, .ic-tar-acao-cancelar:focus-visible { border-color: var(--ic-danger); color: var(--ic-danger); }
.ic-tar-acao-falha { color: var(--ic-danger); }
.ic-tar-acao-falha:hover, .ic-tar-acao-falha:focus-visible { background: var(--ic-danger); border-color: var(--ic-danger); color: #FFFFFF; }

/* nos quadros estreitos (semana e painel) as ações descem para a linha de baixo e a alça só aparece em tela de toque,
   onde é por ela que se arrasta; com mouse o cartão inteiro arrasta */
.ic-tarefa-compacta { flex-wrap: wrap; gap: 6px; padding-left: 8px; }
.ic-tarefa-compacta .ic-tarefa-acoes { flex: 1 0 100%; flex-wrap: wrap; justify-content: flex-end; }
.ic-tarefa-compacta .ic-tarefa-pega { display: none; }
.ic-tarefa-compacta .ic-tarefa-ordem { flex-basis: 20px; height: 20px; font-size: 12px; }

@media (hover: none) {
    .ic-tarefa-compacta .ic-tarefa-pega { display: block; }
}

/* o que saiu da fila do dia: canceladas e transferidas */
.ic-tar-encerradas { border-top: 1px dashed var(--ic-line); }
.ic-tar-encerrada { display: flex; align-items: flex-start; gap: 8px; padding: 4px; font-size: 13px; color: var(--ic-ink-soft); }
.ic-tar-encerrada > i { margin-top: 3px; }
.ic-tar-encerrada-C > i { color: var(--ic-danger); }
.ic-tar-encerrada-T > i { color: var(--ic-primary); }
.ic-tar-encerrada-corpo { display: flex; flex: 1 1 0; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.ic-tar-encerrada-corpo:hover { color: var(--ic-primary); text-decoration: none; }
.ic-tar-encerrada-C .ic-tar-encerrada-resumo { text-decoration: line-through; }
.ic-tar-encerrada .ic-tar-acao { width: 24px; height: 24px; font-size: 11px; }

/* dia desmarcado na lista das tarefas recorrentes */
.ic-tar-dia-desligado { opacity: .45; }

@media (max-width: 900px) {
    /* um bloco embaixo do outro numa grade de uma coluna, não numa coluna flexível: lá a base de 480 px das regras de
       @container virava altura, e o dia (que é contêiner de consulta) era medido como se fosse estreitíssimo; as duas
       coisas deixavam um vão embaixo do quadro */
    .ic-tar-corpo { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
    .ic-tar-dias-dia,
    .ic-tar-corpo > .ic-tar-dias-dia,
    .ic-tar-corpo.ic-tar-com-painel > .ic-tar-dias-dia { flex: 0 0 auto; min-width: 0; max-width: none; }
    .ic-tar-painel { flex: 0 0 auto; min-width: 0; }
    .ic-tar-dias-semana { grid-template-columns: minmax(0, 1fr); overflow-x: visible; }
    .ic-tar-seta-grande { width: 48px; }
    .ic-tar-barra-dia { gap: 8px; }
}

/* ---------- Agenda (AgendaSemana e a coluna "Agenda do dia" do quadro de tarefas) ---------- */

/* coluna da direita na visão do dia do quadro de tarefas */
.ic-tar-agenda {
    flex: 0 1 340px;
    min-width: 230px;
    background: #FFFFFF;
    border: 1px solid var(--ic-line);
    border-top: 4px solid var(--ic-primary);
    border-radius: 8px;
}

.ic-tar-agenda .ic-ag-rolagem { padding: 0 8px 10px 0; }
.ic-agenda .ic-ag-rolagem { padding: 0 8px 10px 0; background: #FFFFFF; border: 1px solid var(--ic-line); border-radius: 8px; }

/* grade: coluna das horas e uma coluna por dia; na semana, rola para o lado em tela estreita */
.ic-ag-rolagem { overflow-x: auto; }
.ic-ag { min-width: calc(52px + var(--ic-ag-dias) * 120px); }
.ic-ag-compacta { min-width: 0; }
.ic-ag-linha { display: grid; grid-template-columns: 52px repeat(var(--ic-ag-dias), minmax(0, 1fr)); }
.ic-ag-compacta .ic-ag-linha { grid-template-columns: 46px minmax(0, 1fr); }

.ic-ag-cabeca { border-bottom: 1px solid var(--ic-line); }
.ic-ag-dia-nome { padding: 8px 4px; border-left: 1px solid var(--ic-line-soft); font-size: 13px; text-align: center; color: var(--ic-ink-soft); }
.ic-ag-dia-nome a { color: inherit; text-decoration: none; }
.ic-ag-dia-nome a:hover, .ic-ag-dia-nome a:focus-visible { color: var(--ic-primary); text-decoration: underline; }
.ic-ag-dia-nome b { margin-left: 2px; font-size: 16px; color: var(--ic-ink); font-variant-numeric: tabular-nums; }
.ic-ag-dia-nome.ic-ag-hoje { box-shadow: inset 0 -3px 0 var(--ic-primary); color: var(--ic-primary); }
.ic-ag-dia-nome.ic-ag-hoje b { color: var(--ic-primary); }
.ic-ag-canto { padding: 6px 6px 0 0; font-size: 11px; text-align: right; color: var(--ic-ink-faint); }

/* compromissos sem horário ("Dia todo"), numa faixa acima das horas */
.ic-ag-inteiro { border-bottom: 1px solid var(--ic-line); }
.ic-ag-inteiro-dia { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 4px; border-left: 1px solid var(--ic-line-soft); }

.ic-ag-inteiro-item {
    display: block;
    padding: 2px 6px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--ic-navy);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ic-ag-inteiro-item:hover, .ic-ag-inteiro-item:focus-visible { background: var(--ic-primary); color: #FFFFFF; text-decoration: none; }

/* horas e meias horas: o espaço vazio é clicável e marca um compromisso naquele horário */
.ic-ag-corpo { margin-top: 10px; }
.ic-ag-horas { position: relative; }
.ic-ag-horas span { position: absolute; right: 6px; transform: translateY(-50%); font-size: 11px; color: var(--ic-ink-faint); font-variant-numeric: tabular-nums; }
.ic-ag-coluna { position: relative; border-left: 1px solid var(--ic-line-soft); }
.ic-ag-coluna.ic-ag-hoje { background: #F7F9FF; }

.ic-ag-vaga { position: absolute; left: 0; right: 0; border-top: 1px solid var(--ic-line-soft); }
.ic-ag-vaga-meia { border-top: 1px dotted #E9ECF2; }
.ic-ag-vaga:hover, .ic-ag-vaga:focus-visible { background: var(--ic-primary-soft); outline: 0; text-decoration: none; }
.ic-ag-vaga:hover::after, .ic-ag-vaga:focus-visible::after { content: '+ ' attr(data-hora); padding-left: 6px; font-size: 11px; font-weight: 600; color: var(--ic-primary); }

/* compromisso e tarefa com hora: bloco do tamanho da duração, do início ao fim (a tarefa em laranja, com borda tracejada) */
.ic-ag-item {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    box-sizing: border-box;
    padding: 2px 6px;
    overflow: hidden;
    border-radius: 5px;
    font-size: 12px;
    line-height: 1.25;
    text-decoration: none;
}

.ic-ag-compromisso { background: var(--ic-primary); border-left: 3px solid var(--ic-navy); color: #FFFFFF; }
.ic-ag-compromisso:hover, .ic-ag-compromisso:focus-visible { z-index: 2; background: #152A66; color: #FFFFFF; text-decoration: none; outline: 0; }
.ic-ag-item-hora { font-size: 11px; opacity: .85; font-variant-numeric: tabular-nums; }
.ic-ag-item-titulo { font-weight: 600; overflow-wrap: anywhere; }
.ic-ag-item-local { overflow: hidden; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; opacity: .85; }

.ic-ag-tarefa { background: #FFF6E5; border: 1px dashed var(--ic-warn); border-left: 3px solid var(--ic-warn); color: var(--ic-ink); }
.ic-ag-tarefa .ic-ag-item-hora { opacity: 1; color: var(--ic-ink-soft); }
.ic-ag-tarefa:hover, .ic-ag-tarefa:focus-visible { z-index: 2; border-color: var(--ic-primary); color: var(--ic-primary); text-decoration: none; outline: 0; }
.ic-ag-tarefa-A { background: #EBF1FE; border-color: var(--ic-primary); }
.ic-ag-tarefa-R { background: #E6F3EA; border-color: #2E8B57; color: var(--ic-ink-soft); }
.ic-ag-tarefa-R .ic-ag-item-titulo { text-decoration: line-through; }
.ic-ag-tarefa-N { background: #FCE9E7; border-color: var(--ic-danger); color: #8A1C12; }
.ic-ag-tarefa-N .ic-ag-item-titulo { text-decoration: line-through; }
/* compromisso com a tarefa dele encerrada no quadro: concluído (apagado e riscado) ou não realizado (vermelho e riscado) */
.ic-ag-compromisso-R { opacity: .55; }
.ic-ag-compromisso-N { background: var(--ic-danger); border-left-color: #8A1C12; opacity: .75; }
.ic-ag-compromisso-R .ic-ag-item-titulo, .ic-ag-compromisso-N .ic-ag-item-titulo, .ic-ag-inteiro-item.ic-ag-compromisso-R, .ic-ag-inteiro-item.ic-ag-compromisso-N { text-decoration: line-through; }

/* linha da hora atual, no dia de hoje */
.ic-ag-agora { position: absolute; left: 0; right: 0; z-index: 3; height: 0; border-top: 2px solid var(--ic-danger); pointer-events: none; }
.ic-ag-agora::before { content: ''; position: absolute; top: -6px; left: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--ic-danger); }

@media (max-width: 900px) {
    .ic-tar-agenda { flex: 0 0 auto; min-width: 0; }
}

/* ---------- Pagamentos e recebimentos no quadro de tarefas (TarefaFinanceiroService) ---------- */

/* coluna à direita da agenda do dia: uma linha por vencimento, vermelha (pagar) ou verde (receber) */
.ic-tar-fin {
    flex: 0 1 300px;
    min-width: 220px;
    background: #FFFFFF;
    border: 1px solid var(--ic-line);
    border-top: 4px solid var(--ic-ink-soft);
    border-radius: 8px;
}

.ic-tar-fin-totais { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px; border-bottom: 1px solid var(--ic-line-soft); font-size: 13px; }
.ic-tar-fin-totais b { font-variant-numeric: tabular-nums; }
.ic-tar-fin-total-pagar { color: var(--ic-danger); }
.ic-tar-fin-total-receber { color: #1E7B45; }
.ic-tar-fin-lista { margin: 0; padding: 8px; list-style: none; }

.ic-tar-fin-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 6px;
    padding: 7px 10px;
    border-radius: 6px;
    border-left: 4px solid;
}

.ic-tar-fin-pagar { background: #FDECEC; border-left-color: var(--ic-danger); }
.ic-tar-fin-receber { background: #E7F5EC; border-left-color: #2E8B57; }
.ic-tar-fin-corpo { display: flex; flex: 1 1 0; flex-direction: column; gap: 2px; min-width: 0; color: var(--ic-ink); text-decoration: none; }
.ic-tar-fin-corpo:hover, .ic-tar-fin-corpo:focus-visible { color: var(--ic-primary); text-decoration: none; outline: 0; }
.ic-tar-fin-descricao { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.ic-tar-fin-meta { font-size: 12px; color: var(--ic-ink-soft); }
.ic-tar-fin-valor { flex: 0 0 auto; font-size: 13px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ic-tar-fin-pagar .ic-tar-fin-valor { color: var(--ic-danger); }
.ic-tar-fin-receber .ic-tar-fin-valor { color: #1E7B45; }
/* já pago ou recebido: continua na lista, mais apagado e riscado */
.ic-tar-fin-quitado { opacity: .6; }
.ic-tar-fin-quitado .ic-tar-fin-descricao, .ic-tar-fin-quitado .ic-tar-fin-valor { text-decoration: line-through; }

/* selo da tarefa que veio do financeiro */
.ic-tar-fin-selo { padding: 0 7px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.ic-tar-fin-selo-pagar { background: #F9DCDC; color: var(--ic-danger); }
.ic-tar-fin-selo-receber { background: #D6EEDF; color: #1E7B45; }
/* selo da tarefa que é um compromisso da agenda */
.ic-tar-ag-selo { padding: 0 7px; border-radius: 4px; background: #DCE5FA; color: var(--ic-primary); font-size: 11px; font-weight: 700; }

@media (max-width: 900px) {
    .ic-tar-fin { flex: 0 0 auto; min-width: 0; }
}

/* ---------- Telas de senha abertas por quem já está logado ---------- */
/* SenhaEsqueciForm e SenhaRedefinirForm são da tela de login (seção "Tela de login"). Quem abre o link do e-mail já
   logado as vê dentro do sistema: cartão estreito no meio, com o botão principal em toda a largura. */

body:not(.builder-template-login) .ic-senha-publica { max-width: 440px; margin: 32px auto; }
body:not(.builder-template-login) .ic-senha-publica .login-medium-logo { display: none; }

body:not(.builder-template-login) .ic-senha-publica .ic-login-cartao {
    padding: 26px 24px 22px;
    background: #FFFFFF;
    border: 1px solid var(--ic-line);
    border-top: 4px solid var(--ic-primary);
    border-radius: 8px;
}

body:not(.builder-template-login) .ic-senha-publica .ic-login-marca { margin-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ic-primary); }
body:not(.builder-template-login) .ic-senha-publica h1 { margin: 0 0 6px; font-size: 24px; font-weight: 700; color: var(--ic-ink); }
body:not(.builder-template-login) .ic-senha-publica .ic-login-chamada { margin: 0 0 18px; color: var(--ic-ink-soft); }
body:not(.builder-template-login) .ic-senha-publica .card { margin: 0; border: 0; background: transparent; box-shadow: none; }
body:not(.builder-template-login) .ic-senha-publica .card-body,
body:not(.builder-template-login) .ic-senha-publica .tab-pane { padding: 0 !important; }
body:not(.builder-template-login) .ic-senha-publica .card-footer { padding: 6px 0 0; border-top: 0; background: transparent; }
body:not(.builder-template-login) .ic-senha-publica .tformrow { margin: 0 0 12px; }
body:not(.builder-template-login) .ic-senha-publica .fb-field-container { padding: 0; }
body:not(.builder-template-login) .ic-senha-publica .login-avatar { display: flex; flex: 0 0 28px; align-items: center; color: var(--ic-ink-faint); }
body:not(.builder-template-login) .ic-senha-publica .btn { width: 100%; height: 44px; font-size: 15px; font-weight: 600; }
body:not(.builder-template-login) .ic-senha-publica .ic-login-rodape { margin: 16px 0 0; font-size: 14px; text-align: center; }
body:not(.builder-template-login) .ic-senha-publica .ic-login-rodape a { font-weight: 600; }

/* ---------- Tela inicial (WelcomeView) ---------- */

.ic-inicio {
    max-width: 1280px;
    margin: 0 auto;
    padding: 4px 4px 28px;
}

/* faixa de abertura no tom do logotipo, que se desfaz no fundo */
.ic-inicio-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 210px;
    padding: 28px 40px;
    border-radius: 14px;
    overflow: hidden;
    background:
        radial-gradient(42% 120% at 86% 50%, rgba(0, 68, 190, .42), transparent 100%),
        #00030C;
}

.ic-inicio-marca {
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6EA0FF;
}

.ic-inicio-saudacao {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #FFFFFF;
}

.ic-inicio-data {
    font-size: 15px;
    color: #9FB2DA;
}

.ic-inicio-data::first-letter {
    text-transform: uppercase;
}

.ic-inicio-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 28px 0 12px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ic-ink);
}

.ic-inicio-titulo a {
    font-size: 14px;
    font-weight: 600;
    color: var(--ic-primary);
}

.ic-inicio-titulo a i {
    margin-left: 4px;
    font-size: 12px;
}

.ic-inicio-atalhos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;
}

.ic-atalho {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: #FFFFFF;
    border: 1px solid var(--ic-line);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ic-atalho:hover,
.ic-atalho:focus-visible {
    border-color: var(--ic-primary);
    box-shadow: 0 10px 22px -14px rgba(31, 58, 138, .55);
    text-decoration: none;
    transform: translateY(-1px);
    outline: 0;
}

.ic-atalho-icone {
    display: flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    height: 42px;
    border-radius: 10px;
    background: var(--ic-primary-soft);
    color: var(--ic-primary);
    font-size: 18px;
}

.ic-atalho-nome {
    display: block;
    font-weight: 700;
    color: var(--ic-ink);
}

.ic-atalho-texto {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--ic-ink-soft);
}

@media (max-width: 700px) {
    .ic-inicio-topo {
        min-height: 0;
        padding: 24px 22px;
    }

    .ic-inicio-saudacao {
        font-size: 26px;
    }
}

/* ---------- Alfinete do menu lateral ---------- */
/* Fica na caixa de 60 px do canto do cabeçalho, alinhado à faixa de ícones do menu: é o que sobra
   visível quando o menu está recolhido, então dá para fixar e soltar sem o botão sair do lugar. */

.ic-menu-alfinete {
    display: none;
}

@media (min-width: 993px) {
    .ic-menu-alfinete {
        display: flex;
        flex: 0 0 var(--header-box-width);
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--header-logo-text-color);
        cursor: pointer;
    }

    .ic-menu-alfinete i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        font-size: 15px;
        transition: transform .2s ease, background-color .2s ease, opacity .2s ease;
    }

    /* fixado: alfinete em pé, destacado; solto: inclinado e apagado */
    .ic-menu-alfinete[aria-pressed="true"] i {
        background: rgba(255, 255, 255, .16);
    }

    .ic-menu-alfinete[aria-pressed="false"] i {
        transform: rotate(45deg);
        opacity: .65;
    }

    .ic-menu-alfinete:hover i {
        background: rgba(255, 255, 255, .26);
        opacity: 1;
    }

    .ic-menu-alfinete:focus-visible {
        outline: 0;
    }

    .ic-menu-alfinete:focus-visible i {
        box-shadow: 0 0 0 2px #FFFFFF;
    }

    /* com o alfinete ocupando o canto, o nome do sistema encosta à esquerda do espaço que sobra */
    .sidebar-mini .header-logo .simulate-logo {
        justify-content: flex-start;
    }

    /* menu solto: ao passar o mouse ele abre por cima da tela, sem empurrar o conteúdo */
    .sidebar-mini:not(.fixed) .container-main {
        position: relative;
    }

    .sidebar-mini:not(.fixed) .master-menu-content {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 30;
        height: 100%;
    }

    .sidebar-mini:not(.fixed) .master-menu-content.open {
        box-shadow: 10px 0 28px -14px rgba(29, 36, 51, .45);
    }

    .sidebar-mini:not(.fixed) .master-container {
        margin-left: var(--header-box-width);
    }

    .sidebar-mini:not(.fixed) .header-logo {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        height: var(--header-height);
        background: var(--header-logo-background);
    }

    .sidebar-mini:not(.fixed) .header-track {
        width: calc(100% - var(--header-box-width));
    }
}

/* ---------- Tela de login ---------- */
/* Base: fundo claro (o nome no logotipo é escuro), logotipo no alto e formulário em um cartão (celular e janelas
   estreitas). Em telas largas o logotipo ocupa o painel da esquerda e o formulário, o painel branco da direita. */

.builder-template-login {
    --ic-login-fundo: #EEF2FA;
    --ic-login-azul: #2563EB;
    --ic-login-azul-forte: #1D4ED8;
    --ic-login-logo: url(../../../images/logo-iscoworking.png);

    --login-background-color: var(--ic-login-fundo);
    --login-panel-left-background-color: var(--ic-login-fundo);
    --login-panel-right-background-color: transparent;
    --login-title-align: left;
    --login-title-font-size: 28px;
    --login-title-font-weight: 700;
    --login-title-color: var(--ic-ink);
    --login-button-text-color: #FFFFFF;
    --field-height: 48px;
    --field-border-radius: 10px;
    --field-background: #F7F9FC;
    --field-border-color: #C9D1DD;
    --field-focus-border-color: var(--ic-login-azul);

    background: var(--ic-login-fundo);
}

.builder-template-login .container-login {
    background:
        radial-gradient(70% 45% at 50% 18%, rgba(37, 99, 235, .14), transparent 100%),
        var(--ic-login-fundo);
}

.builder-template-login .container-login .panel-login {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.builder-template-login .container-login .panel-login .login-content {
    padding: 24px 20px;
    align-items: stretch;
    justify-content: flex-start;
}

.builder-template-login .container-login #adianti_div_content {
    margin: auto 0;
}

.builder-template-login .container-login #login-wrapper {
    max-width: 400px !important;
    margin: 0 auto !important;
}

/* o logotipo (app/images/logo-iscoworking.png, 900 x 721) não tem fundo: fica sobre o fundo claro da tela */
.builder-template-login .login-medium-logo,
.builder-template-login .ic-login-logo {
    aspect-ratio: 900 / 721;
    background: var(--ic-login-logo) center / contain no-repeat;
}

.builder-template-login .login-medium-logo {
    width: min(70vw, 280px);
    margin: 0 auto 16px;
}

.builder-template-login .ic-login-cartao {
    padding: 28px 24px 26px;
    background: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 24px 48px -24px rgba(31, 58, 138, .35), 0 0 0 1px rgba(31, 58, 138, .08);
}

.builder-template-login .ic-login-marca {
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ic-login-azul-forte);
}

.builder-template-login .container-login .panel-login .login-content h1 {
    margin: 0 0 6px;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.builder-template-login .ic-login-chamada {
    margin: 0 0 24px;
    font-size: 15px;
    color: var(--ic-ink-faint);
}

.builder-template-login .container-login .login-content .ic-login-cartao .card {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.builder-template-login .container-login .login-content .ic-login-cartao .card-header {
    display: none;
}

.builder-template-login .container-login .login-content .ic-login-cartao .card-body {
    padding: 0;
}

.builder-template-login .container-login .login-content .ic-login-cartao .card-footer {
    margin-top: 22px;
    padding: 0;
    border-top: 0;
    background: transparent;
}

/* campos alinhados com o título e com o botão */
.builder-template-login .container-login .login-content .ic-login-cartao .tab-pane {
    padding: 0 !important;
}

.builder-template-login .container-login .login-content .ic-login-cartao .tformrow {
    margin: 0 0 14px;
}

.builder-template-login .container-login .login-content .ic-login-cartao .fb-field-container {
    padding: 0;
}

.builder-template-login .container-login .login-content .ic-login-cartao .fb-inline-field-container:first-child {
    padding: 0 !important;
}

.builder-template-login .container-login .login-content .ic-login-cartao .tfield {
    font-size: 15px !important;
    padding-left: 44px;
    background: var(--field-background);
}

.builder-template-login .container-login .login-content .ic-login-cartao .tfield:focus,
.builder-template-login .container-login .login-content .ic-login-cartao .tpassword .tfield:focus + button {
    background: #FFFFFF;
    border-color: var(--ic-login-azul);
    outline: 0;
}

.builder-template-login .container-login .login-content .ic-login-cartao .tfield:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}

.builder-template-login .container-login .login-content .ic-login-cartao .tpassword {
    border-radius: var(--field-border-radius);
}

.builder-template-login .container-login .login-content .ic-login-cartao .tpassword .tfield:focus {
    box-shadow: none;
}

.builder-template-login .container-login .login-content .ic-login-cartao .tpassword:focus-within {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}

.builder-template-login .container-login .login-content .ic-login-cartao .tpassword button {
    color: var(--ic-ink-faint);
}

.builder-template-login .container-login .login-avatar {
    left: 16px;
    color: var(--ic-ink-faint);
}

.builder-template-login .container-login .login-content .ic-login-cartao .btn {
    height: 48px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, #2E6BF0, var(--ic-login-azul-forte));
    box-shadow: 0 12px 22px -12px rgba(29, 78, 216, .8);
    font-size: 16px;
    font-weight: 600;
    transition: filter .15s ease, box-shadow .15s ease;
}

.builder-template-login .container-login .login-content .ic-login-cartao .btn:hover,
.builder-template-login .container-login .login-content .ic-login-cartao .btn:active {
    opacity: 1;
    filter: brightness(1.1);
}

.builder-template-login .container-login .login-content .ic-login-cartao .btn:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .4);
    outline-offset: 2px;
}

/* as telas públicas de senha ficam no painel do login, como LoginForm (o tema estende as outras telas públicas pela
   janela inteira, por cima do painel) */
.builder-template-login .container-login #adianti_div_content > div[page-name="SenhaEsqueciForm"],
.builder-template-login .container-login #adianti_div_content > div[page-name="SenhaRedefinirForm"] {
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    overflow: visible;
}

/* o tema só dá largura e cor ao botão de LoginForm: aqui valem para as três telas */
.builder-template-login .container-login .login-content .ic-login-cartao .btn {
    width: 100% !important;
}

.builder-template-login .container-login .login-content .ic-login-cartao .btn,
.builder-template-login .container-login .login-content .ic-login-cartao .btn span {
    color: var(--login-button-text-color) !important;
}

/* link abaixo do botão: "Esqueci minha senha" no login e "Voltar para o login" nas telas de senha */
.builder-template-login .ic-login-rodape {
    margin: 18px 0 0;
    font-size: 14px;
    text-align: center;
}

.builder-template-login .ic-login-rodape a {
    font-weight: 600;
    color: var(--ic-login-azul-forte);
}

.builder-template-login .ic-login-rodape a:hover,
.builder-template-login .ic-login-rodape a:focus-visible {
    text-decoration: underline;
}

.builder-template-login .ic-login-produto {
    position: absolute;
    left: 40px;
    bottom: 28px;
    font-size: 14px;
    color: var(--ic-ink-faint);
}

.builder-template-login .ic-login-produto strong {
    color: var(--ic-ink);
    font-weight: 600;
}

@media (min-width: 993px) {
    .builder-template-login:not(.layout-mobile) {
        --login-panel-right-background-color: #FFFFFF;
        --login-title-font-size: 30px;
    }

    .builder-template-login:not(.layout-mobile) .container-login {
        background: var(--ic-login-fundo);
    }

    .builder-template-login:not(.layout-mobile) .container-login .panel-login .info-login {
        flex: 1 1 0;
        max-width: none;
        padding: 40px;
        align-items: center;
        justify-content: center;
        background:
            radial-gradient(46% 46% at 50% 48%, rgba(37, 99, 235, .12), transparent 100%),
            var(--ic-login-fundo);
    }

    .builder-template-login:not(.layout-mobile) .ic-login-logo {
        width: min(100%, 70vh, 520px);
    }

    .builder-template-login:not(.layout-mobile) .container-login .panel-login .login-content {
        flex: 0 0 min(540px, 44%);
        padding: 48px 56px;
        box-shadow: -1px 0 0 rgba(31, 58, 138, .08);
    }

    .builder-template-login:not(.layout-mobile) .login-medium-logo {
        display: none;
    }

    .builder-template-login:not(.layout-mobile) .container-login #login-wrapper {
        max-width: 380px !important;
    }

    .builder-template-login:not(.layout-mobile) .ic-login-cartao {
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .builder-template-login:not(.layout-mobile) .ic-login-chamada {
        margin-bottom: 30px;
    }
}

/* ---------- App instalado (icApp, em iscoworking.js; ver PLANO_CELULAR.md) ---------- */

/* aviso de versão nova, embaixo da tela, acima da barra de gestos do celular */
/* centralizado pelas duas bordas (e não por left: 50%, que deixava só metade da tela para o texto) */
.ic-app-versao {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: fit-content;
    max-width: 460px;
    margin: 0 auto;
    padding: 10px 12px 10px 16px;
    border-radius: 10px;
    background: var(--ic-navy);
    color: #FFFFFF;
    font-size: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.ic-app-versao .btn {
    flex: 0 0 auto;
    background: #FFFFFF;
    color: var(--ic-navy);
    font-weight: 700;
}

/* ---------- Celular e tablet (icCelular, em iscoworking.js) ----------
   Até 992 px, o mesmo limite em que o tema troca o menu fixo pela gaveta. Adaptado da camada responsiva do projeto da
   Antonelze. A página nunca pode ficar mais larga que a tela: com o zoom liberado, o navegador afastaria a visão para
   caber o que sobra, e os três pontinhos do cabeçalho iriam para fora da tela. */

/* fora do celular o quadro das tabelas não muda nada */
.ic-rolagem {
    max-width: 100%;
}

@media (max-width: 992px) {

    /* nome do sistema centralizado entre o botão do menu e os três pontinhos */
    .header-logo {
        box-sizing: border-box;
        padding-left: var(--header-height);
        padding-right: var(--header-height);
    }

    .company-logo {
        overflow: hidden;
    }

    .toggle-menu:active,
    .toggle-top-menu:active {
        background: rgba(255, 255, 255, .12);
    }

    /* gaveta do menu: não passa da tela e a lista rola dentro dela */
    .master-menu-content {
        max-width: 86vw;
        overflow: hidden;
    }

    .master-menu-content .container-menu,
    .master-menu-content .container-submenu {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* cortina atrás da gaveta: escurece o conteúdo e fecha o menu ao tocar fora */
    .ic-menu-cortina {
        position: fixed;
        top: var(--header-height);
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9;
        background: rgba(13, 18, 38, .45);
    }

    /* barra dos três pontinhos: sem overflow, que cortaria o menu do nome aberto dentro dela */
    .header-track {
        left: 0;
        right: 0;
        max-height: none;
        overflow: visible;
    }

    /* menu do nome (Perfil, Trocar senha, Instalar o app, Sair): o tema o escondia no celular, e não havia como sair */
    .builder-profile-menu {
        display: flex !important;
        width: 100%;
        min-width: 100%;
        height: auto;
        flex: unset;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .builder-profile-menu .fast-drop {
        width: 100%;
        height: auto;
    }

    .builder-profile-menu .fast-drop-label {
        justify-content: center;
        padding: 12px 15px;
    }

    .header-profile-name {
        width: auto;
        max-width: none;
        overflow: visible;
        color: var(--header-text-color);
        text-overflow: clip;
    }

    /* o menu do nome abre empilhado (a barra cresce), em vez de flutuar para fora da tela */
    .builder-profile-menu .fast-drop:hover > .fast-drop-open,
    .builder-profile-menu .fast-drop.is-open > .fast-drop-open {
        display: block;
        position: static;
        width: 100%;
        max-height: none;
        padding: 0 0 8px;
        border: none;
        border-radius: 0;
        background: var(--header-background-color);
    }

    .builder-profile-menu .fast-drop-open a {
        display: block;
        padding: 13px 20px;
        border-top: 1px solid rgba(255, 255, 255, .1);
        color: #FFFFFF;
    }

    .builder-profile-menu .fast-drop-open a i {
        margin-right: 10px;
    }

    /* os outros menus do topo abrem para baixo, por toque */
    .fast-drop:hover > .fast-drop-open,
    .fast-drop.is-open > .fast-drop-open {
        top: 100%;
        bottom: auto !important;
        max-height: 60vh;
    }

    .fast-drop-open::after {
        display: none !important;
    }

    .header-track .fast-drop.is-open > .fast-drop-open {
        display: block;
        z-index: 10;
        overflow: auto;
    }

    /* conteúdo aproveitando a largura */
    .container-live {
        padding: 10px 8px 20px;
    }

    .card.panel > .card-body.panel-body,
    .card.panel > .card-footer.panel-footer,
    .card.panel > .card-header.panel-heading {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* barra de botões das telas quebra a linha em vez de sair da tela */
    .card-footer.panel-footer,
    .panel-footer {
        white-space: normal;
    }

    .card-footer.panel-footer .btn,
    .panel-footer .btn {
        margin-bottom: 4px;
    }

    /* grade e tabela rolam dentro do próprio quadro; a estreita continua ocupando a largura toda */
    .ic-rolagem {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ic-rolagem > table.tdatagrid_table {
        width: auto;
        min-width: 100%;
        max-width: none;
        white-space: nowrap;
    }

    .ic-rolagem > table.ic-tabela {
        min-width: 100%;
    }

    table.tdatagrid_table td.tdatagrid_cell.action {
        white-space: nowrap;
    }

    .tpagenavigation {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tpagenavigation .pagination {
        flex-wrap: wrap;
    }

    /* janelas e modais dentro da tela */
    .ui-dialog {
        left: 1vw !important;
        max-width: 98vw !important;
        max-height: 92vh;
        overflow: auto;
    }

    .ui-dialog .ui-dialog-content {
        width: auto !important;
        max-width: 100% !important;
        max-height: 74vh !important;
    }

    .modal-dialog {
        max-width: calc(100% - 20px);
        margin: 10px;
    }

    /* painel da direita (formulário aberto ao lado da lista) em tela inteira */
    #adianti_right_panel.right-panel > .container-part {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    /* gráficos C3 acompanham a largura */
    .c3,
    .c3 svg {
        max-width: 100%;
    }

    /* rede de segurança: o que ainda passar da largura (a margem negativa de uma .row do tema, por exemplo) não
       empurra a tela para o lado */
    .container-live {
        overflow-x: hidden;
    }

    /* grupo de botões de um TCheckGroup ou TRadioGroup em linha (dias da semana das tarefas recorrentes): o Adianti o
       monta com display: table, que não quebra a linha; aqui os botões descem para a linha de baixo quando não cabem */
    .toggle-wrapper[data-toggle="buttons"] > .btn-group {
        display: flex !important;
        flex-wrap: wrap;
        float: none !important;
        gap: 4px;
    }

    .toggle-wrapper[data-toggle="buttons"] > .btn-group > .btn {
        flex: 0 0 auto;
        margin-left: 0 !important;
        border-radius: var(--field-border-radius, 4px) !important;
    }

    /* alvos do tamanho de um dedo: paginação, fechar da janela, alça da tarefa, ícone de abrir o lançamento nas tabelas
       e os links de texto pequenos (tela inicial, conferência, tela de login) */
    .tpagenavigation .page-link {
        min-width: 40px;
        height: 40px;
        padding: 0 10px;
    }

    .modal-dialog .modal-content .modal-header .close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        margin: -10px -12px -10px auto;
        font-size: 28px;
        line-height: 1;
    }

    .ic-tarefas .ic-tarefa-pega {
        padding: 8px 10px;
        margin: -6px -4px;
        font-size: 16px;
    }

    .ic-tabela td > a:has(> i:only-child),
    .ic-documentos td > a:has(> i:only-child) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        min-height: 36px;
        margin: -9px -6px;
    }

    .ic-tabela td a:not(:has(> i:only-child)) {
        display: inline-block;
        padding: 7px 0;
        margin: -7px 0;
    }

    .ic-inicio-titulo a,
    .ic-cartao-nota a,
    .ic-res-acoes a,
    .ic-login-rodape a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 8px;
        margin: -10px -4px;
    }

    /* agenda da semana: um dia por tela, com as horas fixas à esquerda; o dedo passa de um dia para o outro
       (scroll-snap) e a tela abre no dia de hoje (icCelular.agenda) */
    @supports (width: 1cqw) {
        .ic-ag-rolagem {
            container-type: inline-size;
            scroll-snap-type: x mandatory;
            scroll-padding-left: 52px;
        }

        /* a grade tem a largura de todos os dias: com a largura da tela, a coluna das horas (sticky) só ficaria presa
           dentro do primeiro dia e sumiria ao rolar */
        .ic-ag:not(.ic-ag-compacta) {
            min-width: 0;
            width: max-content;
        }

        .ic-ag:not(.ic-ag-compacta) .ic-ag-linha {
            grid-template-columns: 52px repeat(var(--ic-ag-dias), calc(100cqw - 52px));
        }

        .ic-ag:not(.ic-ag-compacta) .ic-ag-canto,
        .ic-ag:not(.ic-ag-compacta) .ic-ag-horas {
            position: sticky;
            left: 0;
            z-index: 3;
            background: #FFFFFF;
        }

        .ic-ag:not(.ic-ag-compacta) .ic-ag-dia-nome,
        .ic-ag:not(.ic-ag-compacta) .ic-ag-inteiro-dia,
        .ic-ag:not(.ic-ag-compacta) .ic-ag-coluna {
            scroll-snap-align: start;
        }
    }

    /* o nome do dia (abre o quadro daquele dia) ocupa a célula inteira */
    .ic-ag-dia-nome a {
        display: block;
        margin: -8px -4px;
        padding: 8px 4px;
    }
}

/* ---------- Listas como cartões no celular (icCelular.cartoes) ----------
   Até 768 px cada linha da grade (table.ic-cartoes) é um cartão: um campo por linha, com o rótulo da coluna
   (data-label) à esquerda e o valor à direita; valor longo fica embaixo do rótulo; as ações ficam embaixo do cartão,
   em botões do tamanho de um dedo. A classe ic-sem-cartoes no <body> desliga o modo (comparação em teste). */
@media (max-width: 768px) {
    body:not(.ic-sem-cartoes) table.ic-cartoes {
        display: block;
        clear: both; /* abaixo de um botão flutuante do título (Orçamento), senão o primeiro cartão fica espremido ao lado dele */
        width: 100% !important;
        min-width: 0 !important;
        border: 0 !important;
        border-radius: 0;
        background: transparent;
        box-shadow: none !important;
        white-space: normal;
    }

    body:not(.ic-sem-cartoes) table.ic-cartoes > thead,
    body:not(.ic-sem-cartoes) table.ic-cartoes .ic-cartoes-cabecalho {
        display: none;
    }

    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody {
        display: block;
    }

    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 8px;
        margin: 0 0 10px;
        padding: 10px 12px 8px;
        border: 1px solid var(--ic-line);
        border-radius: 10px;
        background: #FFFFFF !important;
    }

    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr.ic-tabela-total,
    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr.ic-tabela-subtotal,
    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr.ic-tabela-destaque {
        background: #EEF2FA !important;
        border-color: var(--ic-navy);
    }

    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr > td {
        display: flex;
        flex: 0 0 100%;
        justify-content: space-between;
        align-items: baseline;
        gap: 10px;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100%;
        padding: 3px 0 !important;
        border: 0 !important;
        background: transparent !important;
        text-align: right;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 38%;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        color: var(--ic-ink-soft);
    }

    /* valor longo (descrição, nome): rótulo em cima, valor embaixo, alinhado à esquerda */
    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr > td.ic-cartoes-longo {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        text-align: left;
    }

    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr > td.ic-cartoes-longo::before {
        flex: 0 0 auto;
    }

    /* célula sem rótulo (colspan) ocupa a linha inteira, alinhada à esquerda */
    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr > td.ic-cartoes-largo {
        justify-content: flex-start;
        text-align: left;
    }

    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr > td:not(.action):not([data-label]):not(.ic-cartoes-largo):empty,
    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr > td.ic-cartoes-vazio {
        display: none;
    }

    /* ações do registro: embaixo, em botões do tamanho de um dedo */
    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr > td.action {
        flex: 0 0 auto;
        order: 99;
        padding: 8px 0 0 !important;
    }

    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr > td.action:empty {
        display: none;
    }

    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr > td.action a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 38px;
        border: 1px solid var(--ic-line);
        border-radius: 8px;
        background: #F7F9FC;
        font-size: 16px;
    }

    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr > td.action a i {
        margin: 0;
    }

    /* link de texto (nome do cliente, da conta) e caixa de marcar do tamanho de um dedo */
    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr > td[data-label] a:not(:has(> i:only-child)) {
        display: inline-block;
        padding: 7px 0;
        margin: -7px 0;
    }

    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr > td input[type="checkbox"]:not(.filled-in) {
        width: 24px;
        height: 24px;
        margin: 0;
    }

    /* célula sem rótulo (coluna sem título) com links: botões do tamanho de um dedo, como as ações */
    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr > td:not([data-label]):not(.action) > a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        margin: 2px 6px 2px 0;
        padding: 0 10px;
        border: 1px solid var(--ic-line);
        border-radius: 8px;
        background: #F7F9FC;
    }

    /* grupos do Resultado da Empresa: o lançamento só aparece com o grupo aberto (iscoworking.js troca a classe) */
    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr.ic-res-item:not(.ic-res-visivel) {
        display: none;
    }

    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr.ic-res-item {
        margin-left: 14px;
        border-style: dashed;
        background: #FAFBFD !important;
    }

    /* linha de filtros do cabeçalho (Faturas de Cartão) e outras linhas só de títulos: os campos empilhados */
    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr.ic-cartoes-secao {
        gap: 6px;
        padding: 8px 10px;
        background: #F3F6FB !important;
    }

    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr.ic-cartoes-secao > th {
        display: block;
        flex: 1 1 130px;
        padding: 0 !important;
        border: 0 !important;
        text-align: left;
        white-space: normal;
    }

    body:not(.ic-sem-cartoes) table.ic-cartoes > tbody > tr.ic-cartoes-secao > th:empty {
        display: none;
    }

    body:not(.ic-sem-cartoes) table.ic-cartoes .ic-tabela-filtros .form-control {
        height: 36px;
        min-width: 0;
        font-size: 14px;
    }

    /* o quadro de rolagem não precisa rolar: o cartão já cabe */
    body:not(.ic-sem-cartoes) .ic-rolagem:has(> table.ic-cartoes),
    body:not(.ic-sem-cartoes) .table-responsive:has(> table.ic-cartoes) {
        overflow: visible;
    }
}

/* formulários: o Adianti monta as linhas com col-sm-*, que só empilham abaixo de 576 px; entre 576 e 768 uma linha de
   quatro campos fica ilegível */
@media (max-width: 768px) {
    .tformrow > [class*="col-sm-"],
    .tformrow > [class*="col-md-"],
    .tformrow > [class*="col-lg-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .fb-field-container {
        margin-bottom: 6px;
    }
}

/* abaixo de 16 px o iPhone dá zoom ao tocar no campo e a tela fica fora do enquadramento */
@media (max-width: 576px) {
    /* tabelas montadas em HTML: o texto quebra a linha (nomes de conta, descrições) para os valores caberem na tela;
       o que ainda não couber rola dentro do quadro */
    .ic-tabela td,
    .ic-tabela th {
        white-space: normal;
    }

    /* filtros recolhidos atrás do botão "Filtros" (icCelular.recolherFiltros) */
    .ic-filtros-fechado > form > .card-body,
    .ic-filtros-fechado > .card-body {
        display: none;
    }

    .card.panel.ic-filtros-recolhivel > .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .ic-filtros-botao.active {
        background: var(--ic-primary-soft);
        color: var(--ic-primary);
    }

    /* extrato do coworking: o espaço numa linha só (a tabela rola), em vez de linhas altas */
    .ic-tabela.ic-cw-extrato tr > :nth-child(4) {
        white-space: nowrap;
    }

    input.form-control,
    select.form-control,
    textarea.form-control,
    .tfield,
    .select2-container .select2-selection__rendered {
        font-size: 16px;
    }

    .card-header.panel-heading {
        flex-wrap: wrap;
    }
}

/* ---------- Reserva pública do coworking (CoworkingReservaPublica, sem login) ----------
   Sem sessão a tela abre no template do login: aqui ela deixa de lado o painel do logotipo e ocupa a página inteira,
   com fundo claro. Logado, abre no layout normal do sistema. */
.builder-template-login:has(.ic-reserva-publica) { background: var(--ic-bg, #F3F5F9); }
.builder-template-login:has(.ic-reserva-publica) .container-login { position: static; height: auto; min-height: 100vh; overflow: visible; background: #F3F5F9; }
.builder-template-login:has(.ic-reserva-publica) .container-login .panel-login { display: block; height: auto; background: transparent; }
.builder-template-login:has(.ic-reserva-publica) .container-login .panel-login .info-login { display: none; }
.builder-template-login:has(.ic-reserva-publica) .container-login .panel-login .login-content { display: block; width: 100%; max-width: none; padding: 0; background: transparent; }
.builder-template-login:has(.ic-reserva-publica) .container-login #adianti_div_content { margin: 0; }

.ic-reserva-publica { max-width: 1200px; margin: 0 auto; padding: 24px 16px 40px; color: var(--ic-ink); }
.ic-reserva-topo { margin-bottom: 16px; }
.ic-reserva-marca { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ic-primary); }
.ic-reserva-publica .ic-reserva-topo h1 { margin: 2px 0 6px; font-size: 26px; font-weight: 700; color: var(--ic-ink); }
.ic-reserva-topo p { margin: 0; color: var(--ic-ink-soft); font-size: 15px; }
.ic-reserva-publica .ic-agenda { margin-bottom: 20px; }
.ic-reserva-publica .card { margin-top: 8px; }
.ic-reserva-rodape { margin-top: 12px; }
.ic-reserva-seta-off { opacity: .3; cursor: default; }
.ic-reserva-publica .ic-ag-uso { cursor: default; }
.ic-reserva-publica .ic-ag-uso:hover { box-shadow: none; }
/* horário escolhido no clique, até o pedido ser enviado */
.ic-ag-vaga.ic-reserva-escolhida { background: rgba(37, 99, 235, .18); box-shadow: inset 0 0 0 2px #2563EB; }

/* pedido aguardando o atendimento, na agenda pública e na legenda */
.ic-ag-uso-S { background: #FFE4CC; border-left: 3px solid #EA7A00; color: #6B3500; }

/* pedido no sistema (CoworkingReservasForm) */
.ic-reserva-dados td:first-child { width: 160px; font-weight: 600; color: var(--ic-ink-soft); }
.ic-reserva-dados td:last-child, .ic-reserva-detalhe .ic-tabela th, .ic-reserva-detalhe .ic-tabela td { text-align: left; }
.ic-reserva-dados tr:first-child { display: none; }
.ic-reserva-titulo { margin: 18px 0 8px; font-size: 15px; font-weight: 700; }
.ic-reserva-detalhe .alert .btn { margin-top: 8px; }

/* QR Code da conexão do WhatsApp (WhatsappConfiguracaoForm) */
.ic-whatsapp-qrcode { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 12px; }
.ic-whatsapp-qrcode img { width: 264px; max-width: 100%; padding: 8px; background: #FFFFFF; border: 1px solid var(--ic-line-soft); border-radius: 8px; }
.ic-whatsapp-qrcode p { flex: 1 1 220px; margin: 0; color: var(--ic-ink-soft); }

/* Pedidos de reserva aguardando, na tela inicial (WelcomeView::reservas) */
.ic-inicio-reservas { display: grid; gap: 8px; margin-bottom: 18px; }
.ic-inicio-reserva { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; min-height: 44px; padding: 10px 14px; background: #FFF4E5; border: 1px solid #F5C58A; border-left: 4px solid #EA7A00; border-radius: 8px; color: var(--ic-ink); text-decoration: none; }
.ic-inicio-reserva:hover, .ic-inicio-reserva:focus-visible { background: #FFE9CC; color: var(--ic-ink); text-decoration: none; }
.ic-inicio-reserva-cliente { font-weight: 700; }
.ic-inicio-reserva-acao { margin-left: auto; font-weight: 600; color: #9A4A00; white-space: nowrap; }

/* Link da agenda para os clientes (CoworkingReservaService::painelLink, em Pedidos de Reserva e na Agenda dos Espaços) */
.ic-reserva-link { margin: 0 0 16px; padding: 12px 14px; background: #FFFFFF; border: 1px solid var(--ic-line-soft); border-radius: 8px; }
.ic-agenda .ic-reserva-link { margin-top: 14px; }
.ic-reserva-link-titulo { margin-bottom: 8px; font-weight: 700; color: var(--ic-ink); }
.ic-reserva-link-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ic-reserva-link-linha input { flex: 1 1 260px; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--ic-line-soft); border-radius: 6px; background: #F7F9FC; color: var(--ic-ink-soft); }
.ic-reserva-link-linha .btn { min-height: 38px; }

/* Passo a passo da configuração do WhatsApp (WhatsappConfiguracaoForm) */
.ic-whatsapp-passos { margin: 4px 0 12px; padding: 10px 14px; background: #F7F9FC; border: 1px solid var(--ic-line-soft); border-radius: 8px; color: var(--ic-ink-soft); }
.ic-whatsapp-passos ol { margin: 6px 0 0; padding-left: 20px; }
.ic-whatsapp-passos li { margin-bottom: 4px; }