/* ============================================================
   Visual Suave, o mesmo do site de hoje (docs/SISTEMA.md e publico/tema_cn.css):
   a Ruth pediu, em 06/10/2026, que o sistema novo ficasse igual ao site.
   Princípios: casca reta e colada (menu e barra de cima), arredondado só no
   conteúdo; só o ativo tem cor (laranja); botão principal em Marinho, em
   pílula (laranja no escuro); tabela em faixas brancas sobre bloco cinza;
   nada escrito embaixo do título; Poppins em tudo.
   Etiquetas de situação como no site: fundo claro, letra e ponto na cor do
   estado (a cor cheia da prévia não ficou boa, Ruth 07/10/2026); no escuro,
   cor cheia com texto branco (pedido dela de antes). Fluxos saíram do sistema.
   ============================================================ */
@font-face { font-family: "Poppins"; src: url("../fontes/Poppins-Light.woff") format("woff"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fontes/Poppins-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fontes/Poppins-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fontes/Poppins-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }

/* ---------- tokens ---------- */
.cn {
    /* letra: corpo 13, legenda 12, rótulo 11 (caixa alta), título de janela 17, título da tela 30 (Light) */
    --t-r: 11px; --t-p: 12px; --t-b: 13px; --t-m: 17px; --t-t: 30px;
    --o: #D25C1E; --o-dark: #A24514; --obg: #FBEEE7;
    --ink: #22304A; --ink2: #3A4B6B; --muted: #6B7A94; --faint: #A6B0C2;
    --bg: #F8F9FB; --card: #FFFFFF; --inset: #F1F3F7; --tabela: #EEF1F6; --linha: #FFFFFF; --track: #E3E7EE; --hover: #F1F3F7; --kpi: #EEF1F6;
    --border: #D7DCE6; --border-soft: #E6E9EF;
    --green: #2E8B57; --green-bg: #E8F5EC; --amber: #B7791F; --amber-bg: #FFF4DB; --red: #C53030; --red-bg: #FDECEC; --blue: #3A4B6B;
    /* etiquetas em cor cheia, texto branco (contraste de 5:1 ou mais) */
    --et-verde: #237A4B; --et-ambar: #97640F; --et-verm: #B42828; --et-azul: #3A4B6B; --et-cinza: #5B6882; --et-roxo: #5E3DB3; --et-laranja: #A24514;
    --acao: #22304A; --acao-hover: #2E3F5F; --on-acao: #FFFFFF; --aviso: #E5484D;
    --sh1: 0 1px 2px rgba(22,33,58,.05), 0 2px 6px rgba(22,33,58,.03);
    --sh3: 0 2px 6px rgba(22,33,58,.06), 0 16px 40px rgba(22,33,58,.13);
    /* menu lateral: branco nos dois temas */
    --sb-on-bg: #FBEEE7; --sb-on-ink: #A24514; --sb-on-ico: #D25C1E;
    /* quadro: lista em caixa */
    --col-bg: rgba(34,48,74,.025); --col-h: #E6EAF1; --col-h-fio: #C3CCDB; --ficha: #FFFFFF;
    /* nomes antigos, ainda usados nas telas */
    --cn-strong: var(--ink); --cn-line2: var(--border); --cn-st-a: #A6B0C2; --cn-st-e: #3A4B6B; --cn-st-r: #B7791F; --cn-st-d: #2E8B57;
    font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
    font-size: var(--t-b);
    color: var(--ink);
    min-height: 100vh;
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
.cn.cn-escuro {
    --o: #E28D60; --o-dark: #E9A07A; --obg: #2A160C;
    --ink: #F3F3F4; --ink2: #DCDDE1; --muted: #DCDDE1; --faint: #DCDDE1;
    --bg: #000000; --card: #131416; --inset: #1B1C1F; --tabela: #0B0B0C; --linha: #202124; --track: #2A2B2F; --hover: #1D1E21; --kpi: #131416;
    --border: #2A2B2F; --border-soft: #1C1D20;
    --green: #55C082; --green-bg: #15251B; --amber: #E5AB44; --amber-bg: #2A2111; --red: #F87171; --red-bg: #351816; --blue: #8FA8D6;
    --acao: #C4541A; --acao-hover: #D25C1E; --on-acao: #FFFFFF;
    --sh1: 0 0 0 1px #1F2023;
    --sh3: 0 0 0 1px #2A2B2F, 0 16px 40px rgba(0,0,0,.7);
    --sb-on-bg: #000000; --sb-on-ink: #FFFFFF; --sb-on-ico: #FFFFFF;
    --col-bg: rgba(255,255,255,.025); --col-h: #243350; --col-h-fio: #2A3A56; --ficha: #202124;
    --cn-st-a: #8E9097; --cn-st-e: #8FA8D6; --cn-st-r: #E5AB44; --cn-st-d: #55C082;
}

html, body { margin: 0; font-family: "Poppins", "Segoe UI", system-ui, sans-serif; }
html { background: var(--mud-palette-background, #F8F9FB); }
body { background: var(--mud-palette-background, #F8F9FB); color: var(--mud-palette-text-primary, #22304A); }
.cn ::-webkit-scrollbar { width: 6px; height: 6px; }
.cn ::-webkit-scrollbar-track { background: transparent; }
.cn ::-webkit-scrollbar-thumb { background-color: var(--o); border: 2px solid transparent; background-clip: padding-box; border-radius: 3px; }
.cn ::-webkit-scrollbar-corner { background: transparent; }

.carregando { position: fixed; inset: 0; display: grid; place-items: center; }
.carregando img { animation: pulsar 1.2s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .carregando img { animation: none; } .cn * { transition: none !important; } }

#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 2000;
    padding: .7rem 1.2rem; background: #FDECEC; color: #C53030; font-family: "Poppins", sans-serif;
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* ---------- ícones finos ---------- */
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.relogio .pmin, .relogio .phora { transform-box: view-box; transform-origin: 12px 12px; }
.relogio .pmin { animation: gira 90s linear infinite; }
.relogio .phora { animation: gira 540s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ============================================================
   CASCA: menu lateral e barra de cima (retos e colados na borda)
   ============================================================ */
.casca { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; }
.casca.recolhido { grid-template-columns: 62px minmax(0, 1fr); }
.lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 0 10px 18px; background: #FFFFFF; color-scheme: light; }
.recolher { position: absolute; top: 16px; right: 14px; width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center;
            background: transparent; color: #6B7A94; cursor: pointer; z-index: 2; }
.recolher:hover { background: #F1F3F7; color: #22304A; }
.cn-escuro .recolher:hover { background: #000000; color: #FFFFFF; }
.recolher .abrir { display: none; }
.recolhido .recolher { right: 15px; }
.recolhido .recolher .abrir { display: block; }
.recolhido .recolher .fechar { display: none; }
.marca { display: flex; justify-content: center; align-items: center; height: 70px; margin: 60px 0 40px; }
.marca img { width: 176px; height: auto; }
.recolhido .marca { visibility: hidden; }
.menu { display: flex; flex-direction: column; }
.lateral .item { position: relative; display: flex; align-items: center; gap: 13px; height: 42px; padding: 0 13px; border-radius: 3px;
                 color: #3A4B6B; font-size: 14px; font-weight: 400; text-decoration: none; white-space: nowrap; }
.lateral .item .ico { width: 20px; height: 20px; stroke-width: 1.6; color: #6B7A94; }
.lateral .item .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lateral .item:not(.on):hover { background: #F1F3F7; color: #22304A; }
.lateral .item:not(.on):hover .ico { color: #22304A; }
.lateral .item.on { background: var(--sb-on-bg); color: var(--sb-on-ink); font-weight: 500; }
.lateral .item.on .ico { color: var(--sb-on-ico); }
.lateral .item:focus-visible { outline: 2px solid #D25C1E; outline-offset: -2px; }
/* escuro: o selecionado numa faixa preta, de uma borda à outra do menu */
.cn-escuro .casca:not(.recolhido) .lateral .item.on { margin: 0 -10px; padding: 0 23px; border-radius: 0; }
.ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--aviso); flex-shrink: 0; }
.recolhido .lateral { padding: 0 8px 18px; }
.recolhido .lateral .item { justify-content: center; padding: 0; width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; }
.recolhido .lateral .item .nome { display: none; }
.recolhido .lateral .ponto { position: absolute; top: 10px; right: 10px; }
.cn-escuro .recolhido .lateral .item.on { width: 62px; margin: 0 -8px; padding: 0 8px; border-radius: 0; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.topo { display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 28px 0 24px; }
.setas { display: flex; gap: 10px; }
.seta { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--faint); display: grid; place-items: center; cursor: pointer; }
.seta .ico { width: 16px; height: 16px; stroke-width: 2; }
.seta:hover { background: var(--hover); color: var(--ink); }
.atalhos { flex: 1; display: flex; justify-content: center; gap: 8px; }
.atalho { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.atalho .ico { stroke-width: 1.7; }
.atalho:hover { background: var(--hover); color: var(--ink); }
.atalho.on { color: var(--o); }
.atalho.on .ico { width: 23px; height: 23px; stroke-width: 1.9; }
.direita { display: flex; align-items: center; gap: 6px; }
.selo-local { height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--border);
              color: var(--muted); font-size: var(--t-p); white-space: nowrap; }
.redondo { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.redondo:hover { background: var(--hover); color: var(--ink); }
.avatar { width: 34px; height: 34px; margin-left: 6px; border: 0; border-radius: 50%; background: var(--card); color: var(--ink);
          box-shadow: var(--sh1); font: 500 13px "Poppins", sans-serif; cursor: pointer; }
.seta:focus-visible, .atalho:focus-visible, .redondo:focus-visible, .avatar:focus-visible, .recolher:focus-visible { outline: 2px solid var(--o); outline-offset: 2px; }
.menu-conta .quem { padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border-soft); color: var(--muted); font-size: var(--t-p); }
.item-menu { display: inline-flex; align-items: center; gap: 10px; }
.item-menu .ico { width: 16px; height: 16px; color: var(--muted); }
.pagina { padding: 4px 28px 48px 24px; min-width: 0; }

@media (max-width: 760px) {
    .casca, .casca.recolhido { grid-template-columns: 62px minmax(0, 1fr); }
    .lateral { padding: 0 8px 18px; }
    .marca { visibility: hidden; height: 20px; margin: 40px 0 20px; }
    .recolher { display: none; }
    .lateral .item { justify-content: center; padding: 0; width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; }
    .lateral .item .nome { display: none; }
    .lateral .ponto { position: absolute; top: 10px; right: 10px; }
    .cn-escuro .casca .lateral .item.on { width: 62px; margin: 0 -8px; padding: 0 8px; border-radius: 0; }
    .topo { padding: 0 16px; gap: 4px; }
    .setas, .selo-local { display: none; }
    .atalhos { gap: 2px; justify-content: flex-start; }
    .atalho, .redondo { width: 36px; height: 36px; }
    .pagina { padding: 4px 16px 40px; }
}

/* ============================================================
   TELAS
   ============================================================ */
/* título da tela: 30 px, Light; nada escrito embaixo dele */
.cn .pagina .mud-typography-h5 { font-size: var(--t-t) !important; line-height: 38px !important; font-weight: 300 !important; letter-spacing: -.015em; color: var(--ink) !important; }
.cn .mud-typography-h6, .cn .mud-dialog-title .mud-typography { font-size: var(--t-m) !important; font-weight: 500 !important; line-height: 1.35; color: var(--ink) !important; }
.cn .mud-typography-body1, .cn .mud-typography-body2 { font-size: var(--t-b); }
.cn .mud-typography-caption { font-size: var(--t-p); }
.cn .mud-typography { font-family: "Poppins", "Segoe UI", system-ui, sans-serif; }

/* ---------- botões: pílula de 40 px ---------- */
.cn .mud-button-root.mud-button { height: 40px; padding: 0 18px; border-radius: 999px; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--t-b); box-shadow: none; }
.cn .mud-button-root.mud-button.mud-button-size-small { height: 30px; padding: 0 12px; font-size: var(--t-p); }
.cn .mud-button-root.mud-button .mud-button-label { font-size: inherit !important; }
.cn .mud-button-filled.mud-button-filled-primary { background: var(--acao); color: var(--on-acao); }
.cn .mud-button-filled.mud-button-filled-primary:hover { background: var(--acao-hover); }
.cn .mud-button-outlined { border: 0 !important; background: var(--card); box-shadow: var(--sh1); color: var(--ink); }
.cn .mud-button-outlined:hover { background: var(--hover); }
.cn .mud-button-text { color: var(--ink2); }
.cn .mud-button-text:hover { background: var(--hover); }
.cn .mud-button-text.mud-button-text-error, .cn .mud-button-text-error { color: var(--red); }
.cn .mud-button-text.mud-button-text-error:hover { background: var(--red-bg); }
.cn .mud-button-text.mud-button-text-primary { color: var(--ink); }
.cn .mud-button-root.mud-button.mud-button-disabled { opacity: .55; }
.cn .mud-icon-button { color: var(--muted); }
.cn .mud-icon-button:hover { background: var(--hover); color: var(--ink); }
.cn .mud-button-root:focus-visible { outline: 2px solid var(--o); outline-offset: 2px; }

/* ---------- campos: fundo cinza, sem borda; rótulo em cima, em caixa alta; foco com anel laranja ---------- */
.cn .mud-input-control > .mud-input-control-input-container { display: flex; flex-direction: column-reverse; }
.cn .mud-input-control { margin-top: 0; }
.cn label.mud-input-label.mud-input-label-inputcontrol {
    position: static !important; transform: none !important; max-width: 100% !important; margin: 0 0 6px; padding: 0;
    font-size: var(--t-r) !important; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3;
    color: var(--muted) !important; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cn .mud-input.mud-input-text, .cn .mud-input.mud-input-filled, .cn .mud-input.mud-input-outlined {
    margin-top: 0 !important; min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--inset); color: var(--ink);
}
.cn .mud-input.mud-input-outlined .mud-input-outlined-border { display: none; }
.cn .mud-input.mud-input-underline::before, .cn .mud-input.mud-input-underline::after { display: none !important; }
.cn .mud-input.mud-input-text:focus-within, .cn .mud-input.mud-input-filled:focus-within, .cn .mud-input.mud-input-outlined:focus-within {
    background: var(--card); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--o);
}
.cn .mud-input > input.mud-input-root, .cn .mud-input > textarea.mud-input-root, .cn .mud-input-slot { padding: 9px 0 !important; font-size: var(--t-b) !important; color: var(--ink); }
.cn .mud-input > textarea.mud-input-root { padding: 9px 0 !important; }
.cn .mud-input-root::placeholder { color: var(--faint); opacity: 1; }
.cn .mud-input-adornment .mud-icon-root { font-size: 1.1rem; color: var(--muted); }
.cn .mud-input-helper-text, .cn .mud-input-error { font-size: var(--t-p) !important; }
.cn .mud-input-control.mud-input-control-margin-dense, .cn .mud-input-control.mud-input-control-margin-normal { margin-top: 0; margin-bottom: 0; }
/* busca e filtros das listas: pílula branca com sombra leve */
.cn .mud-input-control.filtro { flex: 0 0 auto; }
.cn .filtro .mud-input.mud-input-text { background: var(--card); box-shadow: var(--sh1); border-radius: 999px; padding: 0 16px; }
.cn .filtro .mud-input.mud-input-text:focus-within { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--o); }
/* filtros de escolha (Mês, Responsável, Prazo): rótulo e valor no mesmo centro; a setinha fica
   à direita e um respiro igual à esquerda compensa, para o texto não puxar para o lado */
.cn .mud-select.filtro label.mud-input-label.mud-input-label-inputcontrol { text-align: center; }
.cn .mud-select.filtro .mud-input-slot { text-align: center; }
.cn .mud-select.filtro .mud-input.mud-input-text { padding-left: 34px; }
.cn .mud-checkbox .mud-icon-root, .cn .mud-radio .mud-icon-root { color: var(--o); }
/* nas tabelas, o quadrado de marcar fica cinza, discreto */
.cn .lista-casos .mud-checkbox .mud-icon-root { color: var(--muted); }
.cn .mud-checkbox .mud-typography, .cn .mud-radio .mud-typography, .cn .mud-switch .mud-typography { font-size: var(--t-b) !important; }
.rotulo-campo { display: block; font-size: var(--t-r); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }

/* ---------- listas suspensas, menus e avisos ---------- */
.cn .mud-popover { border-radius: 10px; box-shadow: var(--sh3); background: var(--card); }
.cn .mud-popover .mud-list { padding: 6px; }
.cn .mud-popover .mud-list-item { border-radius: 7px; min-height: 36px; font-size: var(--t-b); }
.cn .mud-popover .mud-list-item:hover { background: var(--hover); }
.cn .mud-list-item .mud-typography, .cn .mud-list-item-text p { font-size: var(--t-b) !important; }
.cn .mud-snackbar { border-radius: 12px; box-shadow: var(--sh3); font-family: "Poppins", sans-serif; font-size: var(--t-b); }
.cn .mud-alert { border-radius: 10px; }
.cn .mud-tooltip { font-size: var(--t-p); border-radius: 6px; }

/* ---------- janelas: canto de 18 px ---------- */
.cn .mud-overlay .mud-overlay-scrim.mud-overlay-dark { background: rgba(22,33,58,.28); }
.cn.cn-escuro .mud-overlay .mud-overlay-scrim.mud-overlay-dark { background: rgba(0,0,0,.62); }
.cn .mud-dialog { border-radius: 18px; border: 0; box-shadow: var(--sh3); background: var(--card); }
.cn .mud-dialog .mud-dialog-title { padding: 18px 24px; border-bottom: 1px solid var(--border-soft); }
.cn .mud-dialog .mud-dialog-content { padding: 18px 24px; }
.cn .mud-dialog .mud-dialog-actions { padding: 14px 24px; gap: 8px; border-top: 1px solid var(--border-soft); }
.cn-ficha .alterado { font-size: var(--t-p); color: var(--muted); }

/* ---------- abas em pílula ---------- */
.abas { display: inline-flex; gap: 2px; padding: 3px; background: var(--track); border-radius: 999px; max-width: 100%; overflow-x: auto; vertical-align: middle; }
.abas button { all: unset; cursor: pointer; height: 32px; padding: 0 15px; border-radius: 999px; font-size: 12.5px; color: var(--ink2);
               white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.abas button:hover { color: var(--ink); }
.abas button[aria-selected="true"] { background: var(--card); color: var(--ink); font-weight: 500; box-shadow: var(--sh1); }
.abas button:focus-visible { outline: 2px solid var(--o); outline-offset: 1px; }
.abas em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.abas button.aba-alerta em, .abas em.em-alerta { color: var(--red); }
.abas-menores button { height: 28px; padding: 0 12px; font-size: var(--t-p); }

/* ---------- tabelas: bloco cinza, cada linha uma faixa branca, colunas centralizadas ---------- */
.cn .pagina .mud-table, .cn .pagina .mud-table .mud-table-container { background: transparent; box-shadow: none; }
.cn .pagina .mud-table .mud-table-container { background: var(--tabela); border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; margin-top: 16px; }
.cn .pagina .mud-table-root { border-collapse: separate !important; border-spacing: 0 1px; }
.cn .pagina .mud-table-head .mud-table-cell {
    background: var(--bg); box-shadow: 0 -1px 0 var(--bg); border: 0; padding: 12px; text-align: center;
    color: var(--ink); font-weight: 600; font-size: var(--t-r) !important; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.cn .pagina .mud-table-head .mud-table-cell .column-header { justify-content: center; }
/* Prazos e A confirmar: texto à esquerda, para ler as descrições longas de cima a baixo */
.cn .pagina .lista-esq .mud-table-head .mud-table-cell, .cn .pagina .lista-esq .mud-table-body .mud-table-cell { text-align: left; }
.cn .pagina .lista-esq .mud-table-head .mud-table-cell .column-header { justify-content: flex-start; }
/* descrição, avisos e observação um embaixo do outro (no celular a célula vira linha com rótulo) */
.cel-pilha { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.cn .pagina .mud-table-head .mud-table-cell .mud-table-sort-label { color: inherit; font: inherit; letter-spacing: inherit; }
.cn .pagina .mud-table-head .mud-table-cell .mud-table-sort-label-icon, .cn .pagina .mud-table-head .sort-direction-icon { display: none; }
.cn .pagina .mud-table-body .mud-table-cell { background: var(--linha); border: 0; padding: 12px; text-align: center; vertical-align: middle; font-size: var(--t-b); color: var(--ink); }
.cn .pagina .mud-table-body .mud-table-row .mud-table-cell:first-child { border-radius: 6px 0 0 6px; padding-left: 14px; }
.cn .pagina .mud-table-body .mud-table-row .mud-table-cell:last-child { border-radius: 0 6px 6px 0; padding-right: 14px; }
.cn .pagina .mud-table-body .mud-table-row:hover .mud-table-cell { background: var(--track); }
.cn .pagina .mud-table-row { cursor: pointer; }
.cn .pagina .mud-table .mud-table-pagination { background: transparent; border: 0; }
.cn .pagina .mud-table-empty-row .mud-table-cell, .cn .pagina .mud-table-body .mud-table-cell[colspan] { background: transparent; color: var(--muted); }
.cli { font-weight: 500; color: var(--ink); }
.sub { display: block; font-size: var(--t-p); color: var(--muted); font-weight: 400; }
.prazo { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prazo .mud-icon-root { font-size: 1rem; }
.vencido { color: var(--red); font-weight: 500; }
.perto { color: var(--amber); font-weight: 500; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.resp { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.iniciais { width: 22px; height: 22px; border-radius: 50%; background: var(--track); color: var(--ink2); display: inline-grid; place-items: center; font-size: 10px; font-weight: 600; flex: none; }
.valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
.duas-linhas { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; max-width: 260px; margin-inline: auto; }

/* ---------- situação: etiqueta em caixa alta pequena, com ponto (como no site) ----------
   claro: fundo claro e letra na cor do estado; escuro: cor cheia e texto branco */
.situacao, .pilula, .selo-robo, .etiqueta-cat {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 6px;
    background: var(--eb, var(--gray-bg)); color: var(--ec, var(--gray)); font-size: 10.5px; font-weight: 500; letter-spacing: .06em;
    text-transform: uppercase; white-space: nowrap; line-height: 1;
}
.situacao::before, .pilula::before, .etiqueta-cat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.cn-escuro .situacao, .cn-escuro .pilula, .cn-escuro .selo-robo, .cn-escuro .etiqueta-cat { background: var(--es, var(--et-cinza)); color: #FFFFFF; }
.cn { --gray: #6B7A94; --gray-bg: #ECEFF4; --blue-bg: #EEF1F6; --purple: #6B46C1; --purple-bg: #EFE9F9; }
.cn.cn-escuro { --gray: #8E9097; --gray-bg: #1D1E21; --blue-bg: #161E2E; --purple: #9C77E6; --purple-bg: #241A37; }
.e-verde, .situacao[data-s="Ativo"], .situacao[data-s="Entregue"], .pilula[data-c="verde"] { --ec: var(--green); --eb: var(--green-bg); --es: var(--et-verde); }
.e-ambar, .situacao[data-s="Suspenso"], .situacao[data-s="Em revisão"], .pilula[data-c="ambar"] { --ec: var(--amber); --eb: var(--amber-bg); --es: var(--et-ambar); }
.e-verm, .pilula[data-c="vermelho"] { --ec: var(--red); --eb: var(--red-bg); --es: var(--et-verm); }
.e-azul, .situacao[data-s="Encerrado"], .situacao[data-s="Em elaboração"], .pilula[data-c="azul"] { --ec: var(--blue); --eb: var(--blue-bg); --es: var(--et-azul); }
.situacao[data-s="Arquivado"], .situacao[data-s="Em análise"], .pilula[data-c="cinza"] { --ec: var(--gray); --eb: var(--gray-bg); --es: var(--et-cinza); }
.selo-robo { --ec: var(--o-dark); --eb: var(--obg); --es: var(--et-laranja); padding: 0 9px; }
.etiqueta-cat { align-self: flex-start; flex: none; }
.etiqueta-cat[data-c="Artigo"] { --ec: var(--o-dark); --eb: var(--obg); --es: var(--et-laranja); }
.etiqueta-cat[data-c="Mídia"] { --ec: var(--blue); --eb: var(--blue-bg); --es: var(--et-azul); }
.etiqueta-cat[data-c="Administrativo"] { --ec: var(--gray); --eb: var(--gray-bg); --es: var(--et-cinza); }
.etiqueta-cat[data-c="Licitação"] { --ec: var(--purple); --eb: var(--purple-bg); --es: var(--et-roxo); }
/* nas listas do Início, todas da mesma largura, para os textos começarem no mesmo lugar;
   se o texto pedir mais (VENCIDO no celular), a etiqueta cresce em vez de cortar */
.lista-simples .pilula { min-width: 96px; flex: none; }

/* ---------- Processos ---------- */
.voltar { display: inline-block; font-size: var(--t-p); color: var(--muted); text-decoration: none; margin-bottom: 12px; }
.voltar:hover { color: var(--ink); }
.proc-cab { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; }
.proc-titulo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.proc-partes { grid-column: 1; font-size: var(--t-b); color: var(--ink); }
.proc-acoes { grid-column: 2; grid-row: 1 / span 2; }
.proc-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 24px; margin: 20px 0 0; padding: 4px 22px 8px; background: var(--card); border-radius: 16px; box-shadow: var(--sh1); }
.proc-dados > div { padding: 11px 0; }
.proc-dados dt { font-size: var(--t-r); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.proc-dados dd { margin: 0; font-size: var(--t-b); font-weight: 500; color: var(--ink); }
.proc-objeto { margin: 14px 0 0; font-size: var(--t-b); color: var(--muted); max-width: 80ch; white-space: pre-line; }
@media (max-width: 700px) { .proc-cab { grid-template-columns: 1fr; } .proc-acoes { grid-column: 1; grid-row: auto; } }

/* linha do tempo dos andamentos */
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 1px solid var(--border); display: grid; gap: 2px; max-width: 920px; }
.evento { position: relative; padding: 10px 12px 12px 14px; border-radius: 8px; }
.evento:hover { background: var(--hover); }
.evento-marca { position: absolute; left: -24px; top: 15px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ev); }
.evento[data-cor="cinza"] { --ev: var(--cn-st-a); }
.evento[data-cor="laranja"] { --ev: var(--o); }
.evento[data-cor="ocre"] { --ev: var(--amber); }
.evento[data-cor="verde"] { --ev: var(--green); }
.evento[data-cor="azul"] { --ev: var(--blue); }
.evento-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.evento-cab .esp { flex: 1; }
.evento-data { font-size: var(--t-p); color: var(--muted); font-variant-numeric: tabular-nums; }
.evento-tipo { font-size: var(--t-p); font-weight: 600; color: var(--ink); }
.evento-texto { margin: 4px 0 0; font-size: var(--t-b); line-height: 1.5; color: var(--ink); max-width: 80ch; overflow-wrap: anywhere; }
.evento-prazo { margin: 6px 0 0; font-size: var(--t-p); }
.evento-excluir { opacity: 0; }
.evento:hover .evento-excluir, .evento-excluir:focus-visible { opacity: 1; }

.anexos { list-style: none; margin: 0; padding: 0; max-width: 820px; }
.anexos li { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--border-soft); }
.anexos .esp { flex: 1; }
.anexo-nome { all: unset; cursor: pointer; font-size: var(--t-b); color: var(--ink); overflow-wrap: anywhere; }
.anexo-nome:hover { text-decoration: underline; }
.anexo-nome:focus-visible { outline: 2px solid var(--o); }
.anexo-contrato { display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 12px; background: var(--inset); border-radius: 10px; }
.anexo-contrato .esp { flex: 1; }
.anexar-pdf { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1.5px dashed var(--border); border-radius: 10px; cursor: pointer;
              font-size: var(--t-b); color: var(--ink2); background: transparent; transition: border-color .15s, color .15s; }
.anexar-pdf:hover, .anexar-pdf:focus-within { border-color: var(--o); color: var(--ink); }
.anexar-pdf + .sub { margin-top: 6px; }
.pdf-mini { all: unset; cursor: pointer; display: inline-flex; vertical-align: -3px; margin-left: 6px; color: var(--o); border-radius: 4px; }
.pdf-mini:hover { color: var(--o-dark); }
.pdf-mini:focus-visible { outline: 2px solid var(--o); }

/* ---------- Prazos e listas ---------- */
.aviso-robo { display: block; font-size: var(--t-p); color: var(--red); font-weight: 500; margin-top: 2px; }
.prioridade { font-size: var(--t-p); color: var(--muted); }
.prioridade[data-p="Alta"] { color: var(--ink); font-weight: 600; }
.link-discreto { color: inherit; text-decoration: none; }
.link-discreto:hover { color: var(--ink); text-decoration: underline; }
.link-acao { all: unset; cursor: pointer; margin-left: 10px; font-size: var(--t-p); color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--border); }
.link-acao:hover { text-decoration-color: currentColor; }
.link-acao:focus-visible { outline: 2px solid var(--o); }
.lista-simples { list-style: none; margin: 0; padding: 0; max-width: 980px; }
.lista-simples li { display: flex; align-items: center; gap: 14px; padding: 11px 2px; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.lista-simples li:last-child { border-bottom: 0; }
.lista-simples li:hover { background: var(--hover); border-radius: 8px; }
.lista-simples li.apagado { opacity: .6; }
.ls-data { flex: none; width: 130px; font-size: var(--t-b); }
.ls-texto { flex: 1; min-width: 0; font-size: var(--t-b); }
.ls-texto .cli { font-size: var(--t-b); }
.ls-acoes { flex: none; display: flex; gap: 4px; }
.vazio { display: grid; place-items: center; gap: 6px; padding: 28px 16px; background: var(--tabela); border-radius: 10px; color: var(--muted); text-align: center; }
.vazio p { margin: 0; }
@media (max-width: 700px) { .lista-simples li { flex-wrap: wrap; } .ls-data { width: auto; } }

/* ---------- Financeiro ---------- */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 18px; }
.numeros > div { background: var(--kpi); border-radius: 16px; min-height: 92px; padding: 14px 12px; display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 2px; }
.numeros dt { font-size: var(--t-p); color: var(--muted); text-align: center; }
.numeros dd { margin: 0; font-size: 20px; line-height: 32px; font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.bom { color: var(--green) !important; }
.ruim { color: var(--red) !important; }
.concilia { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.concilia section { min-width: 0; background: var(--card); border-radius: 16px; box-shadow: var(--sh1); padding: 18px 20px; }
.concilia-cab { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); font-size: var(--t-b); color: var(--ink); }
.concilia .lista-simples { max-height: 60vh; overflow-y: auto; }
.selecionavel li.sel { background: var(--track); outline: 1px solid var(--border); border-radius: 8px; }
.selecionavel li.sugerida:not(.sel) { background: var(--green-bg); border-radius: 8px; }
.ls-valor { flex: none; font-size: var(--t-b); color: var(--ink); }
.calc { max-width: 720px; }
@media (max-width: 900px) { .concilia { grid-template-columns: 1fr; } }

/* ---------- Início: indicadores cinza e cartões brancos ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 16px; }
.kpi { background: var(--kpi); border-radius: 16px; min-height: 92px; padding: 14px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center;
       gap: 2px; text-decoration: none; color: var(--ink); text-align: center; }
.kpi:hover { background: var(--track); }
.kpi:focus-visible { outline: 2px solid var(--o); outline-offset: 2px; }
.kpi .v { font-size: 26px; line-height: 32px; font-weight: 400; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kpi .v.reais { font-size: 20px; }
.kpi .l { font-size: var(--t-p); line-height: 16px; color: var(--muted); }
.kpi .x { font-size: var(--t-p); line-height: 16px; color: var(--red); font-weight: 500; }
.cartoes { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; }
.cartoes > div { display: grid; gap: 16px; min-width: 0; }
.cartao-ini { background: var(--card); border-radius: 16px; box-shadow: var(--sh1); padding: 22px 24px; min-width: 0; }
.cartao-ini h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; font-size: var(--t-r); font-weight: 500;
                 letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.cartao-ini h3 a { font-size: var(--t-p); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); text-decoration: none; }
.cartao-ini h3 a:hover { color: var(--ink); }
.cartao-ini .lista-simples li { padding: 11px 2px; }
.li-t { font-size: var(--t-b); font-weight: 500; color: var(--ink); }
.li-s { font-size: var(--t-p); color: var(--muted); margin-top: 1px; font-variant-numeric: tabular-nums; }
@media (max-width: 960px) { .cartoes { grid-template-columns: 1fr; } }

/* ---------- Pauta e Consultoria: quadro em "lista em caixa" ---------- */
.quadro { display: grid; grid-template-columns: repeat(5, minmax(215px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.coluna { background: var(--col-bg); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.coluna-cab { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 11px 13px; background: var(--col-h); border-bottom: 1px solid var(--col-h-fio); }
.coluna-nome { font-size: var(--t-r); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); flex: 1; }
.coluna-conta { font-size: var(--t-r); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.zona { display: flex; flex-direction: column; gap: 8px; min-height: 40px; padding: 10px; }
.zona.mud-drop-zone-drag-block { outline: 1.5px dashed var(--o); outline-offset: -4px; }
.coluna-mais { all: unset; cursor: pointer; margin: 0 10px 10px; font-size: var(--t-p); color: var(--muted); padding: 6px; border-radius: 6px; }
.coluna-mais:hover { background: var(--hover); color: var(--ink); }
.coluna-mais:focus-visible { outline: 2px solid var(--o); }
.rapido { margin: 0 10px 10px; background: var(--ficha); border-radius: 6px; padding: 4px 10px 10px; border: 1px solid var(--border); }
.rapido-dica { display: block; margin-top: 6px; font-size: var(--t-p); color: var(--muted); }
.cartao { display: flex; flex-direction: column; gap: 6px; min-height: 92px; background: var(--ficha); border: 1px solid var(--border); border-radius: 6px; padding: 11px 12px; cursor: grab; }
.cartao:hover { border-color: var(--o); }
.cartao:focus-visible { outline: 2px solid var(--o); outline-offset: 1px; }
.mud-drop-item-preview-start .cartao, .mud-drop-item-dragging .cartao { opacity: .5; }
.cartao-titulo { font-size: var(--t-b); font-weight: 500; color: var(--ink); line-height: 1.35; overflow-wrap: anywhere; }
.cartao-det { font-size: var(--t-p); color: var(--muted); line-height: 1.35; }
.cartao-pe { display: flex; align-items: center; gap: 6px; margin-top: auto; font-size: 11.5px; color: var(--muted); }
.cartao-pe .esp { flex: 1; }
.cartao-pe .prazo .mud-icon-root { font-size: 1rem; }
.cartao-ico { opacity: .7; }


/* importar planilha: regras, conferência e prévia */
.texto-ajuda { font-size: var(--t-b); color: var(--ink2); margin: 0 0 10px; line-height: 1.6; }
.regras { margin: 0 0 10px; padding-left: 18px; font-size: var(--t-b); color: var(--ink2); line-height: 1.75; }
.numeros-ficha { grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 14px; }
.numeros-ficha > div { min-height: 76px; padding: 10px 8px; }
@media (max-width: 600px) { .numeros-ficha { grid-template-columns: repeat(2, 1fr); } }
.lista-previa { list-style: none; margin: 0; padding: 0; }
.lista-previa li { padding: 7px 2px; border-bottom: 1px solid var(--border-soft); font-size: var(--t-b); }
.lista-previa li:last-child { border-bottom: 0; }

/* relatório ao cliente: a ficha (listas de processos e acontecimentos) */
.rel-lista { border: 1px solid var(--border); border-radius: 10px; background: var(--card); overflow-y: auto; padding: 4px 0; }
.rel-lista-proc { max-height: 190px; }
.rel-lista-mov { max-height: 380px; }
.rel-item { display: flex; align-items: center; gap: 10px; padding: 7px 12px; cursor: pointer; font-size: var(--t-b); color: var(--ink); }
.rel-item:hover { background: var(--hover); }
.rel-item input { accent-color: var(--o); width: 15px; height: 15px; flex: none; margin: 0; cursor: pointer; }
.rel-lbl { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rel-meta { flex: none; font-size: var(--t-p); color: var(--muted); }
.rel-tag { flex: none; font-size: 10.5px; line-height: 1; color: var(--o-dark); background: var(--obg); border-radius: 6px; padding: 4px 7px; white-space: nowrap; }
.rel-tag-auto { color: var(--muted); background: var(--inset); }
.rel-ed { all: unset; cursor: pointer; flex: none; padding: 2px 7px; border-radius: 6px; color: var(--muted); font-size: 14px; }
.rel-ed:hover { background: var(--inset); color: var(--ink); }
.rel-ed:focus-visible { outline: 2px solid var(--o); }
.rel-grupo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 5px; font-size: var(--t-r); font-weight: 600;
             letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); border-top: 1px solid var(--border-soft); }
.rel-grupo:first-child { border-top: 0; }
.rel-grupo label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--t-p); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; color: var(--muted); }
.rel-grupo input { accent-color: var(--o); margin: 0; }
.rel-vazio { padding: 9px 12px; font-size: var(--t-p); color: var(--muted); }
.rel-dica-ficha { margin: 0; padding: 10px 14px; background: var(--inset); border-radius: 10px; font-size: var(--t-p); color: var(--ink2); line-height: 1.6; }
@media (max-width: 600px) {
    .rel-item { flex-wrap: wrap; row-gap: 3px; }
    .rel-lbl { flex: 1 1 calc(100% - 26px); }
    .rel-item .rel-meta, .rel-item .rel-tag { margin-left: 25px; }
    .rel-item .rel-ed { margin-left: auto; }
}
.rel-original { margin: 0 0 14px; padding: 10px 12px; background: var(--inset); border-radius: 10px; font-size: var(--t-p); color: var(--ink2); line-height: 1.55; overflow-wrap: anywhere; }

/* relatório ao cliente: a prévia em tela cheia (o papel fica branco também no tema escuro) */
.rel-visor .rel-visor-barra { padding: 10px 18px; border-bottom: 1px solid var(--border); }
.rel-barra { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.rel-barra-info { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.rel-barra-info strong { font-size: 15px; color: var(--ink); font-weight: 600; }
.rel-barra-info span { font-size: var(--t-p); color: var(--muted); }
.rel-barra-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rel-dica { font-size: var(--t-p); color: var(--muted); margin-right: 6px; }
@media (max-width: 760px) { .rel-dica { display: none; } }
.rel-visor .rel-visor-corpo { padding: 0 !important; background: #F2F3F5; overflow: hidden; display: flex; flex-direction: column; }
.cn-escuro .rel-visor .rel-visor-corpo { background: #0B0C0E; }
.rel-rolagem { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 16px 48px; }
.rel-cartao { max-width: 856px; margin: 0 auto; background: #FFFFFF; padding: 44px 48px; border-radius: 6px; box-shadow: 0 6px 30px rgba(0, 0, 0, .12); }
@media (max-width: 640px) { .rel-cartao { padding: 22px 14px; } }
.rel-pagina { outline: none; caret-color: #D56127; }

/* linha das abas: abas à esquerda e, à direita, as ações da lista (Exportar PDF, Importar planilha) */
.linha-abas { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.linha-abas > .abas { flex: 0 1 auto; min-width: 0; }
.acoes-lista { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.acoes-lista .mud-button-root { color: var(--ink2); }

/* cabeçalho das telas: título à esquerda, ações à direita */
.cab-tela { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; min-height: 58px; margin: 0 0 12px; }
.li-t, .li-s { display: block; }


@media (max-width: 760px) { .lista-simples li { flex-wrap: nowrap; gap: 10px; } }