/* ==========================================================================
   ADV+ — sistema visual
   Fontes hospedadas na própria aplicação (CSP font-src 'self'): Public Sans na interface,
   Source Serif 4 nos títulos de página. Licença OFL (docs/fontes).
   ========================================================================== */

@font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("fonts/public-sans-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("fonts/public-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url("fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2-variations");
}

@font-face {
    font-family: "Schibsted Grotesk";
    font-style: normal;
    font-display: swap;
    font-weight: 400 900;
    src: url("fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Schibsted Grotesk";
    font-style: normal;
    font-display: swap;
    font-weight: 400 900;
    src: url("fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
    /* Tinta: navegação e textos fortes */
    --tinta-950: #0e1828;
    --tinta-900: #142033;
    --tinta-800: #1d2c45;
    --tinta-700: #2b3d5c;
    --tinta-300: #9fb0c9;
    --tinta-200: #c9d4e4;

    /* Texto e superfícies (fundo frio, sem tom creme) */
    --texto: #1c2533;
    --texto-2: #465163;
    --texto-3: #626d7e;
    --fundo: #f3f4f6;
    --coluna: #eceef2;
    --superficie: #ffffff;
    --superficie-2: #f7f8fa;
    --superficie-3: #eceff4;
    --linha: #dde2ea;
    --linha-forte: #c3cbd7;

    /* Ação e estados */
    --acento: #8b1e3f;
    --acento-forte: #6e1531;
    --acento-suave: #f7e8ee;
    --acento-linha: #e3bccb;
    --ok: #16774a;
    --ok-suave: #e4f4ea;
    --atencao: #965200;
    --atencao-suave: #fff1dc;
    --perigo: #b42318;
    --perigo-suave: #fdecea;
    --info: #1d5f8f;
    --info-suave: #e5f0f8;

    /* Régua de prazos: da maior para a menor urgência */
    --prazo-atrasado: #c0271c;
    --prazo-hoje: #d4510e;
    --prazo-3d: #d18a00;
    --prazo-7d: #a99300;
    --prazo-15d: #3b8fc7;
    --compromisso: #6941c6;

    /* Tipografia */
    --fonte: "Schibsted Grotesk", "Public Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --fonte-titulo: "Source Serif 4", Georgia, "Times New Roman", serif;
    --t-xs: 0.75rem;     /* 12 */
    --t-sm: 0.8125rem;   /* 13 */
    --t-md: 0.875rem;    /* 14: base da interface */
    --t-lg: 1rem;        /* 16 */
    --t-xl: 1.25rem;     /* 20 */
    --t-2xl: 1.75rem;    /* 28: título da página */

    /* Espaço (base 4) */
    --e-1: 4px;
    --e-2: 8px;
    --e-3: 12px;
    --e-4: 16px;
    --e-5: 20px;
    --e-6: 24px;
    --e-8: 32px;

    /* Bordas e sombras (sombras tingidas de tinta, não cinza puro) */
    --raio-sm: 6px;
    --raio: 8px;
    --raio-lg: 12px;
    --sombra-1: 0 1px 2px rgb(20 32 51 / 0.06);
    --sombra-2: 0 2px 6px rgb(20 32 51 / 0.07), 0 1px 2px rgb(20 32 51 / 0.05);
    --sombra-3: 0 12px 32px rgb(20 32 51 / 0.18), 0 2px 6px rgb(20 32 51 / 0.08);
    --foco: 0 0 0 3px rgb(139 30 63 / 0.3);

    /* Movimento: curto, com saída suave; respostas a ações, nunca decoração */
    --dur-1: 120ms;
    --dur-2: 200ms;
    --curva: cubic-bezier(0.2, 0.7, 0.2, 1);

    --largura-menu: 252px;
    --altura-topo: 56px;

    /* Nomes antigos, usados pelas seções do calendário, mensagens e WhatsApp */
    --navy: var(--tinta-900);
    --blue: var(--acento);
    --bg: var(--fundo);
    --muted: var(--texto-3);

    /* Bootstrap lendo os tokens */
    --bs-body-font-family: var(--fonte);
    --bs-body-font-size: var(--t-md);
    --bs-body-color: var(--texto);
    --bs-body-bg: var(--fundo);
    --bs-border-color: var(--linha);
    --bs-border-radius: var(--raio);
    --bs-border-radius-sm: var(--raio-sm);
    --bs-border-radius-lg: var(--raio-lg);
    --bs-primary: var(--acento);
    --bs-primary-rgb: 139, 30, 63;
    --bs-link-color: var(--acento);
    --bs-link-color-rgb: 139, 30, 63;
    --bs-link-hover-color: var(--acento-forte);
    --bs-link-hover-color-rgb: 110, 21, 49;
    --bs-secondary-color: var(--texto-3);
    --bs-danger-rgb: 180, 35, 24;
    --bs-success-rgb: 22, 119, 74;
    --bs-focus-ring-color: rgb(139 30 63 / 0.3);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-1: 0ms;
        --dur-2: 0ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Base ---------- */
* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: var(--t-md);
    line-height: 1.5;
    color: var(--texto);
    background: var(--fundo);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--texto);
    font-weight: 650;
    letter-spacing: -0.005em;
}

h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-lg); }
h5 { font-size: var(--t-md); }

a {
    color: var(--acento);
    text-underline-offset: 2px;
}

a:hover {
    color: var(--acento-forte);
}

::selection {
    background: var(--acento-suave);
}

/* Foco visível só para teclado, sempre com contraste */
:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: var(--foco);
    outline: none;
}

.text-muted {
    color: var(--texto-3) !important;
}

.small, small {
    font-size: var(--t-sm);
}

.pular {
    position: fixed;
    top: var(--e-2);
    left: var(--e-2);
    z-index: 100;
    padding: var(--e-2) var(--e-4);
    font-weight: 600;
    color: #fff;
    background: var(--acento);
    border-radius: var(--raio);
    transform: translateY(-200%);
}

.pular:focus {
    color: #fff;
    transform: none;
}

.visualmente-oculto {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Cabeçalho e conteúdo ---------- */
.main {
    min-height: 100vh;
    margin-left: var(--largura-menu);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--e-3);
    height: var(--altura-topo);
    padding: 0 var(--e-6);
    background: rgb(255 255 255 / 0.92);
    border-bottom: 1px solid var(--linha);
    backdrop-filter: saturate(1.4) blur(8px);
}

.btn-menu {
    display: none;
    width: 40px;
    height: 40px;
    margin-left: calc(var(--e-2) * -1);
    font-size: 22px;
    color: var(--texto);
    background: transparent;
    border: 0;
    border-radius: var(--raio);
}

.btn-menu:hover {
    background: var(--superficie-3);
}

.trilha ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--t-sm);
    color: var(--texto-3);
}

.trilha li + li::before {
    margin-right: var(--e-2);
    color: var(--linha-forte);
    content: "/";
}

.trilha a {
    color: var(--texto-3);
    text-decoration: none;
}

.trilha a:hover {
    color: var(--acento);
    text-decoration: underline;
}

.trilha [aria-current] {
    font-weight: 600;
    color: var(--texto);
}

.topbar-direita {
    display: flex;
    align-items: center;
    gap: var(--e-4);
    margin-left: auto;
    min-width: 0;
}

.topbar-escritorio {
    overflow: hidden;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--texto-2);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content {
    padding: var(--e-6) var(--e-6) var(--e-8);
}

.content:focus {
    outline: none;
}

/* Pular para o conteúdo: o título não fica escondido sob o cabeçalho fixo */
.content {
    scroll-margin-top: var(--altura-topo);
}

/* ---------- Título da página ---------- */
.page-title {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e-3) var(--e-6);
    margin-bottom: var(--e-5);
}

.page-title h1,
.page-title h2 {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: var(--t-2xl);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--tinta-900);
    font-optical-sizing: auto;
}

.page-title p {
    max-width: 72ch;
    margin: var(--e-1) 0 0;
    color: var(--texto-3);
}

.page-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
}

/* ---------- Avisos (resultado das ações) ---------- */
.avisos {
    position: fixed;
    right: var(--e-5);
    bottom: var(--e-5);
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--e-2);
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}

.aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 12px 10px 12px 14px;
    font-weight: 500;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-left: 4px solid var(--ok);
    border-radius: var(--raio);
    box-shadow: var(--sombra-3);
    pointer-events: auto;
    animation: aviso-entra var(--dur-2) var(--curva);
}

.aviso > .bi {
    margin-top: 1px;
    font-size: 17px;
    color: var(--ok);
}

.aviso > span {
    flex: 1 1 auto;
}

.aviso-erro {
    border-left-color: var(--perigo);
}

.aviso-erro > .bi {
    color: var(--perigo);
}

.aviso-info {
    border-left-color: var(--info);
}

.aviso-info > .bi {
    color: var(--info);
}

.aviso.saindo {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--dur-2) var(--curva), transform var(--dur-2) var(--curva);
}

.aviso-fechar {
    display: inline-flex;
    padding: 0 2px;
    font-size: 18px;
    line-height: 1;
    color: var(--texto-3);
    background: none;
    border: 0;
    border-radius: var(--raio-sm);
}

.aviso-fechar:hover {
    color: var(--texto);
}

/* Entradas só com deslocamento: se a animação não rodar, o conteúdo continua visível */
@keyframes aviso-entra {
    from {
        transform: translateY(8px);
    }
}

/* ---------- Diálogo de confirmação ---------- */
.dialogo {
    width: min(440px, calc(100vw - 32px));
    padding: 0;
    color: var(--texto);
    border: 0;
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-3);
}

.dialogo::backdrop {
    background: rgb(14 24 40 / 0.45);
}

.dialogo[open] {
    animation: dialogo-entra var(--dur-2) var(--curva);
}

@keyframes dialogo-entra {
    from {
        transform: translateY(6px) scale(0.98);
    }
}

.dialogo-corpo {
    padding: var(--e-6);
}

.dialogo-titulo {
    margin: 0 0 var(--e-2);
    font-size: var(--t-lg);
    font-weight: 650;
}

.dialogo-texto {
    margin: 0;
    color: var(--texto-2);
}

.dialogo-acoes {
    display: flex;
    justify-content: flex-end;
    gap: var(--e-2);
    margin-top: var(--e-6);
}

/* ---------- Botões ---------- */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: var(--t-md);
    --bs-btn-padding-y: 7px;
    --bs-btn-padding-x: 14px;
    --bs-btn-border-radius: var(--raio);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color var(--dur-1) var(--curva), border-color var(--dur-1) var(--curva), color var(--dur-1) var(--curva), box-shadow var(--dur-1) var(--curva);
}

.btn-sm {
    --bs-btn-font-size: var(--t-sm);
    --bs-btn-padding-y: 4px;
    --bs-btn-padding-x: 10px;
    --bs-btn-border-radius: var(--raio-sm);
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    --bs-btn-bg: var(--acento);
    --bs-btn-border-color: var(--acento);
    --bs-btn-hover-bg: var(--acento-forte);
    --bs-btn-hover-border-color: var(--acento-forte);
    --bs-btn-active-bg: var(--acento-forte);
    --bs-btn-active-border-color: var(--acento-forte);
    --bs-btn-disabled-bg: var(--acento);
    --bs-btn-disabled-border-color: var(--acento);
}

.btn-light {
    --bs-btn-color: var(--texto);
    --bs-btn-bg: var(--superficie);
    --bs-btn-border-color: var(--linha-forte);
    --bs-btn-hover-color: var(--texto);
    --bs-btn-hover-bg: var(--superficie-3);
    --bs-btn-hover-border-color: var(--linha-forte);
    --bs-btn-active-bg: var(--superficie-3);
    --bs-btn-active-border-color: var(--linha-forte);
    --bs-btn-disabled-bg: var(--superficie-2);
    --bs-btn-disabled-border-color: var(--linha);
}

.btn-outline-primary {
    --bs-btn-color: var(--acento);
    --bs-btn-border-color: var(--acento-linha);
    --bs-btn-hover-bg: var(--acento-suave);
    --bs-btn-hover-color: var(--acento-forte);
    --bs-btn-hover-border-color: var(--acento);
    --bs-btn-active-bg: var(--acento-suave);
    --bs-btn-active-color: var(--acento-forte);
}

.btn-danger {
    --bs-btn-bg: var(--perigo);
    --bs-btn-border-color: var(--perigo);
    --bs-btn-hover-bg: #95190f;
    --bs-btn-hover-border-color: #95190f;
}

.btn-outline-danger {
    --bs-btn-color: var(--perigo);
    --bs-btn-border-color: #efb4ae;
    --bs-btn-hover-bg: var(--perigo-suave);
    --bs-btn-hover-color: var(--perigo);
    --bs-btn-hover-border-color: var(--perigo);
}

.btn-link {
    --bs-btn-color: var(--acento);
    --bs-btn-font-weight: 600;
}

/* Botões só com ícone nas tabelas: alvo de 32px, rótulo no title/aria-label */
.btn-icone {
    width: 32px;
    height: 32px;
    padding: 0;
}

.btn-light.text-danger:hover {
    color: var(--perigo) !important;
    background: var(--perigo-suave);
    border-color: #efb4ae;
}

/* Botão ocupado: o envio já foi feito, aguarde */
.btn.ocupado {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.ocupado::after {
    position: absolute;
    inset: 0;
    width: 16px;
    height: 16px;
    margin: auto;
    content: "";
    border: 2px solid currentColor;
    border-color: rgb(255 255 255 / 0.9) rgb(255 255 255 / 0.9) transparent;
    border-radius: 50%;
    animation: girar 0.7s linear infinite;
}

.btn-light.ocupado::after,
.btn-outline-primary.ocupado::after {
    border-color: var(--acento) var(--acento) transparent;
}

@keyframes girar {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Campos ---------- */
.form-label {
    margin-bottom: 5px;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--texto-2);
}

.form-control,
.form-select {
    min-height: 38px;
    font-size: var(--t-md);
    color: var(--texto);
    background-color: var(--superficie);
    border-color: var(--linha-forte);
    border-radius: var(--raio);
    transition: border-color var(--dur-1) var(--curva), box-shadow var(--dur-1) var(--curva);
}

.form-control-sm,
.form-select-sm {
    min-height: 32px;
    font-size: var(--t-sm);
    border-radius: var(--raio-sm);
}

.form-control::placeholder {
    color: #8b95a5;
}

.form-control:hover,
.form-select:hover {
    border-color: #a9b3c2;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--acento);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    color: var(--texto-2);
    background-color: var(--superficie-2);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--perigo);
    background-image: none;
    padding-right: 0.75rem;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgb(180 35 24 / 0.2);
}

.campo-erro {
    display: flex;
    gap: 5px;
    margin-top: 5px;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--perigo);
}

.campo-erro::before {
    content: "\F333"; /* bi-exclamation-circle */
    font-family: "bootstrap-icons";
}

.form-text {
    margin-top: 5px;
    font-size: var(--t-sm);
    color: var(--texto-3);
}

.form-check-input {
    border-color: var(--linha-forte);
}

.form-check-input:checked {
    background-color: var(--acento);
    border-color: var(--acento);
}

.form-check-label {
    color: var(--texto);
}

.input-group-text {
    font-size: var(--t-sm);
    color: var(--texto-3);
    background: var(--superficie-2);
    border-color: var(--linha-forte);
}

.obrigatorio {
    color: var(--perigo);
}

/* Grupos de campos dentro de um formulário longo */
.grupo-campos {
    padding: 0;
    margin: 0 0 var(--e-6);
    border: 0;
}

.grupo-campos:last-of-type {
    margin-bottom: 0;
}

.grupo-campos > legend,
.grupo-titulo {
    float: none;
    display: block;
    width: 100%;
    margin: 0 0 var(--e-3);
    padding-bottom: var(--e-2);
    font-size: var(--t-md);
    font-weight: 650;
    color: var(--tinta-900);
    border-bottom: 1px solid var(--linha);
}

.grupo-campos > legend small,
.grupo-titulo small {
    margin-left: var(--e-2);
    font-weight: 400;
    color: var(--texto-3);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--e-2);
    padding-top: var(--e-5);
    margin-top: var(--e-6);
    border-top: 1px solid var(--linha);
}

.date-field {
    position: relative;
}

.date-field input {
    padding-right: 34px;
}

.date-field i {
    position: absolute;
    top: 50%;
    right: 12px;
    color: var(--texto-3);
    pointer-events: none;
    transform: translateY(-50%);
}

/* ---------- Painéis ---------- */
.panel,
.filter-bar {
    padding: var(--e-5);
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-1);
}

.panel > h3:first-child,
.panel > h4:first-child,
.panel-titulo {
    margin: 0 0 var(--e-4);
    font-size: var(--t-lg);
    font-weight: 650;
    color: var(--tinta-900);
}

.panel-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-2) var(--e-4);
    margin-bottom: var(--e-4);
}

.panel-cabecalho > h3,
.panel-cabecalho > h4,
.panel-cabecalho > h2 {
    margin: 0;
    font-size: var(--t-lg);
    font-weight: 650;
}

/* Painel lateral de cadastro (formulário ao lado da lista) */
.painel-form {
    position: sticky;
    top: calc(var(--altura-topo) + var(--e-4));
    scroll-margin-top: calc(var(--altura-topo) + var(--e-4));
}

[id^="form"],
section[id] {
    scroll-margin-top: calc(var(--altura-topo) + var(--e-4));
}

.painel-form.editando {
    border-color: var(--acento-linha);
    box-shadow: 0 0 0 3px var(--acento-suave), var(--sombra-1);
}

.form-compact .form-label {
    margin-top: var(--e-3) !important;
}

/* ---------- Filtros ---------- */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2) var(--e-3);
    padding: var(--e-3) var(--e-4);
    margin-bottom: var(--e-4);
}

.filter-bar > label {
    margin: 0;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--texto-2);
}

.filter-bar select {
    width: auto;
    min-width: 200px;
    max-width: 300px;
}

.filtro-destaque {
    margin: 0 0 var(--e-4);
    padding: var(--e-3) var(--e-4) var(--e-4);
    background: var(--superficie-2);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
}

.filtro-destaque .form-label {
    font-weight: 600;
    color: var(--texto-2);
}

/* ---------- Tabelas ---------- */
.table {
    --bs-table-color: var(--texto);
    --bs-table-border-color: var(--linha);
    --bs-table-hover-bg: var(--superficie-2);
    --bs-table-striped-bg: var(--superficie-2);
    margin-bottom: 0;
    font-size: var(--t-md);
}

.table > thead > tr > th {
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--texto-3);
    white-space: nowrap;
    background: var(--superficie-2);
    border-bottom: 1px solid var(--linha);
}

.table > tbody > tr > td {
    padding-top: 10px;
    padding-bottom: 10px;
}

.table > tbody > tr:hover > td {
    background: var(--superficie-2);
}

.table > tfoot > tr > td {
    background: var(--superficie-2);
    border-top: 2px solid var(--linha-forte);
}

.table .acoes,
.table td.text-end:last-child {
    white-space: nowrap;
}

.table .acoes .btn + .btn,
.table .acoes .btn + form,
.table .acoes form + .btn {
    margin-left: 4px;
}

.table-responsive {
    border-radius: var(--raio);
}

/* Nas tabelas o link é o nome do item: sublinhado só ao passar o mouse ou com foco */
.table a:not(.btn) {
    text-decoration: none;
}

.table a:not(.btn):hover,
.table a:not(.btn):focus-visible {
    text-decoration: underline;
}

.linha-editando > td {
    background: var(--acento-suave) !important;
}

.tabela-resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-2) var(--e-4);
    margin-bottom: var(--e-3);
    font-size: var(--t-sm);
    color: var(--texto-3);
}

.tabela-resumo strong {
    color: var(--texto);
}

/* Paginação */
.paginacao {
    display: flex;
    align-items: center;
    gap: var(--e-2);
}

.btn-pagina {
    --bs-btn-color: var(--texto);
    --bs-btn-bg: var(--superficie);
    --bs-btn-border-color: var(--linha-forte);
    --bs-btn-hover-bg: var(--superficie-3);
    --bs-btn-hover-color: var(--texto);
    --bs-btn-hover-border-color: var(--linha-forte);
    --bs-btn-disabled-color: var(--texto-3);
    --bs-btn-disabled-bg: var(--superficie-2);
    --bs-btn-disabled-border-color: var(--linha);
}

.table-clientes {
    font-size: var(--t-md);
}

/* ---------- Estados vazios ---------- */
.vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-8) var(--e-4);
    text-align: center;
    color: var(--texto-3);
}

.vazio > .bi {
    font-size: 28px;
    color: var(--linha-forte);
}

.vazio strong {
    font-size: var(--t-lg);
    font-weight: 600;
    color: var(--texto-2);
}

.vazio p {
    max-width: 46ch;
    margin: 0;
}

.vazio .btn {
    margin-top: var(--e-2);
}

td.vazio-celula {
    padding: 0 !important;
}

/* ---------- Selos (badges) ---------- */
.selo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: var(--t-xs);
    font-weight: 600;
    line-height: 1.5;
    color: var(--texto-2);
    white-space: nowrap;
    background: var(--superficie-3);
    border-radius: 999px;
}

.badge {
    font-weight: 600;
}

.badge-contador {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    color: #fff;
    text-align: center;
    background: #d23a2b;
    border-radius: 999px;
}

/* Alertas do Bootstrap com os tons do sistema */
.alert {
    --bs-alert-border-radius: var(--raio);
    font-size: var(--t-md);
}

.alert-danger {
    --bs-alert-color: #8a1c13;
    --bs-alert-bg: var(--perigo-suave);
    --bs-alert-border-color: #f3c4bf;
}

.alert-success {
    --bs-alert-color: #105636;
    --bs-alert-bg: var(--ok-suave);
    --bs-alert-border-color: #b9e0c8;
}

.alert-warning {
    --bs-alert-color: #6e3c00;
    --bs-alert-bg: var(--atencao-suave);
    --bs-alert-border-color: #f2d3a3;
}

.alert-info {
    --bs-alert-color: #134466;
    --bs-alert-bg: var(--info-suave);
    --bs-alert-border-color: #bcd7ea;
}

/* ---------- Prioridade e prazos ---------- */
.priority {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px 1px 7px;
    font-size: var(--t-xs);
    font-weight: 600;
    line-height: 1.6;
    color: var(--texto-2);
    background: var(--superficie-3);
    border-radius: 999px;
}

.priority::before {
    width: 6px;
    height: 6px;
    content: "";
    background: currentColor;
    border-radius: 50%;
}

.priority.BAIXA {
    color: #2f6b4a;
    background: #e8f3ec;
}

.priority.MEDIA {
    color: #3b4b66;
    background: #e9edf4;
}

.priority.ALTA {
    color: #9a4a00;
    background: #fff0dc;
}

.priority.URGENTE {
    color: #fff;
    background: var(--perigo);
}

.priority.URGENTE::before {
    background: #fff;
}


/* ==========================================================================
   Central de prazos
   ========================================================================== */
.prazos-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--e-2);
    margin-bottom: var(--e-6);
}

.prazos-resumo a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--e-3) var(--e-4);
    color: var(--texto-2);
    text-decoration: none;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-top: 3px solid var(--cor-faixa, var(--linha-forte));
    border-radius: var(--raio);
    transition: border-color var(--dur-1) var(--curva), box-shadow var(--dur-1) var(--curva);
}

.prazos-resumo a:hover {
    box-shadow: var(--sombra-2);
}

.prazos-resumo strong {
    font-size: var(--t-xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--texto);
}

.prazos-resumo span {
    font-size: var(--t-sm);
}

.prazos-resumo a.sem-itens {
    opacity: 0.6;
}

.faixa-atrasado { --cor-faixa: var(--prazo-atrasado); }
.faixa-hoje { --cor-faixa: var(--prazo-hoje); }
.faixa-3d { --cor-faixa: var(--prazo-3d); }
.faixa-7d { --cor-faixa: var(--prazo-7d); }
.faixa-15d { --cor-faixa: var(--prazo-15d); }

.faixa-secao {
    margin-bottom: var(--e-8);
    scroll-margin-top: calc(var(--altura-topo) + var(--e-4));
}

.faixa-secao h2,
.faixa-secao h3 {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin: 0 0 var(--e-3);
    font-size: var(--t-lg);
    font-weight: 650;
}

.faixa-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.faixa-dot.atrasado { background: var(--prazo-atrasado); }
.faixa-dot.hoje { background: var(--prazo-hoje); }
.faixa-dot.d3 { background: var(--prazo-3d); }
.faixa-dot.d7 { background: var(--prazo-7d); }
.faixa-dot.d15 { background: var(--prazo-15d); }

.prazos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--e-3);
}

.prazos-grid .task-card {
    margin-bottom: 0;
    cursor: default;
}


/* ==========================================================================
   Seções específicas (calendário, mensagens, WhatsApp, cobranças), nos tokens do sistema
   ========================================================================== */

/* Calendário */

.panel-calendario {
    padding: 22px;
}

.fc {
    --fc-border-color: #e5e9f0;
    --fc-page-bg-color: #fff;
    --fc-neutral-bg-color: #f4f6fa;
    --fc-today-bg-color: #eaf1fd;
    --fc-list-event-hover-bg-color: #f4f6fa;
    --fc-button-bg-color: #fff;
    --fc-button-border-color: #e5e9f0;
    --fc-button-text-color: var(--texto);
    --fc-button-hover-bg-color: #eef1f5;
    --fc-button-hover-border-color: #dfe4eb;
    --fc-button-active-bg-color: var(--navy);
    --fc-button-active-border-color: var(--navy);
    font-family: var(--fonte);
}

.fc .fc-toolbar-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--navy);
}

.fc .fc-button {
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
    box-shadow: none !important;
}

.fc .fc-button:focus {
    box-shadow: none !important;
}

.fc .fc-button-primary:not(:disabled).fc-button-active {
    color: #fff;
}

.fc .fc-col-header-cell {
    padding: 8px 0;
    background: #f4f6fa;
}

.fc .fc-col-header-cell-cushion {
    padding: 6px 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-decoration: none;
}

.fc .fc-daygrid-day-number {
    padding: 6px 8px;
    font-size: 12px;
    color: var(--texto);
    text-decoration: none;
}

.fc a {
    text-decoration: none;
}

.fc .fc-day-today .fc-daygrid-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-weight: 700;
    color: #fff;
    background: var(--blue);
    border-radius: 50%;
}

.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
    color: #c3cad6;
}

.fc-event {
    border: none;
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 12px;
    cursor: pointer;
}

.fc-daygrid-event {
    margin-bottom: 2px;
}

.fc .fc-daygrid-more-link {
    font-size: 11px;
    font-weight: 600;
    color: var(--blue);
}

.fc-evento-caixa {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    white-space: nowrap;
}

.fc-evento-etiqueta {
    flex-shrink: 0;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.28);
    border-radius: 4px;
}

.fc-evento-titulo {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Visão Lista: o fundo da linha é claro, então o texto não pode ser branco */
.fc-list-event .fc-evento-caixa {
    color: var(--texto);
}

.fc-list-event .fc-evento-etiqueta {
    color: var(--texto);
    background: #eef1f5;
}
/* Mensagens e avisos */

.contato-link {
    display: block;
    padding: 9px 10px;
    color: var(--texto);
    text-decoration: none;
    border-radius: 8px;
}

.contato-link:hover {
    background: #f4f6fa;
}

.contato-link.ativo {
    color: #fff;
    background: var(--blue);
}

.conversa {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}

.bolha {
    max-width: 75%;
    margin-bottom: 10px;
    padding: 10px 14px;
    border-radius: 14px;
}

.bolha-texto {
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-word;
}

.bolha-hora {
    margin-top: 4px;
    font-size: 10px;
    opacity: 0.7;
}

.bolha.dele {
    color: var(--texto);
    background: #eef1f5;
    border-bottom-left-radius: 4px;
}

.bolha.minha {
    margin-left: auto;
    color: #fff;
    background: var(--blue);
    border-bottom-right-radius: 4px;
}

.excluir-msg,
.excluir-aviso {
    color: inherit;
    opacity: 0.75;
    text-decoration: underline;
}

.bolha.minha .excluir-msg {
    color: #fff;
}

/* Atendimento WhatsApp (whatsapp.jsp): fila | conversa | painel do contato. Reaproveita os
   componentes do mensageiro (.chat-*, .avatar) e os tokens; só o que é próprio do atendimento
   leva o prefixo at-. */
.content:has(> .at) {
    padding: 0 !important;
}

.at {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    height: calc(100dvh - var(--altura-topo));
    min-height: 480px;
    background: var(--fundo);
}

.at.com-painel {
    grid-template-columns: 340px minmax(0, 1fr) 340px;
}

.at [hidden] {
    display: none !important;
}

.at-fila {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--superficie-2);
    border-right: 1px solid var(--linha);
}

.at-abas {
    padding: 0 12px;
}

.at-abas button {
    margin-right: 8px;
    padding: 8px 2px 10px;
    font-size: var(--t-sm);
    white-space: nowrap;
}

.at-abas .chat-abas-num.pulsar {
    animation: badge-pula 900ms var(--curva);
}

.at-filtros {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 12px 6px;
}

.at-filtros .form-select {
    min-width: 0;
}

.at-fila-aviso {
    margin: 4px 12px;
    padding: 6px 10px;
    font-size: var(--t-sm);
    color: var(--atencao);
    background: var(--atencao-suave);
    border-radius: var(--raio);
}

.at-listas {
    padding-top: 4px;
}

.at-li {
    list-style: none;
}

.at-item {
    position: relative;
    align-items: flex-start;
}

.at-item .avatar {
    margin-top: 2px;
}

.at-item-l3 {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    margin-top: 2px;
}

.at-etqs,
.at-quem {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    min-width: 0;
}

.at-etq {
    max-width: 130px;
    padding: 0 7px;
    overflow: hidden;
    font-size: 11px;
    font-weight: 600;
    line-height: 17px;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--texto-3);
    border-radius: 999px;
}

.at-etq.auto {
    color: var(--texto-2);
    background: var(--superficie-3);
    border: 1px solid var(--linha);
    line-height: 15px;
}

.at-quem {
    font-size: var(--t-xs);
    color: var(--texto-3);
}

.at-atendente.eu {
    font-weight: 650;
    color: var(--acento);
}

.at-atendente.livre {
    font-style: italic;
}

.at-estado {
    padding: 0 7px;
    font-size: 11px;
    font-weight: 650;
    line-height: 17px;
    border-radius: 999px;
}

.at-estado.pendente {
    color: var(--atencao);
    background: var(--atencao-suave);
}

.at-estado.resolvida {
    color: var(--ok);
    background: var(--ok-suave);
}

.at-estado.janela {
    color: var(--perigo);
    background: var(--perigo-suave);
}

.at-estado.aberta {
    color: var(--info);
    background: var(--info-suave);
}

.at-previa-evento {
    font-style: italic;
}

.at-item.destaque {
    animation: at-destaque 1200ms var(--curva);
}

@keyframes at-destaque {
    0%, 55% { background: var(--acento-suave); box-shadow: inset 3px 0 0 var(--acento); }
    100% { background: transparent; box-shadow: inset 3px 0 0 transparent; }
}

/* Conversa */
.at-chat {
    background: var(--fundo);
}

.at-cab {
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.at-cab-texto {
    flex: 1 1 auto;
}

.at-cab-nome {
    display: block;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    font: inherit;
    color: inherit;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border: 0;
}

.at-cab-nome:hover {
    color: var(--acento);
    text-decoration: underline;
}

.at-cab .at-cab-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    align-items: center;
    min-width: 0;
}

.at-cab-acoes {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    align-items: center;
}

.at-menu-caixa {
    position: relative;
}

.at-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 30;
    display: grid;
    gap: 2px;
    min-width: 220px;
    padding: 6px;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 12px;
    box-shadow: var(--sombra-3);
}

.at-menu button {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    color: var(--texto);
    text-align: left;
    background: none;
    border: 0;
    border-radius: 8px;
}

.at-menu button:hover,
.at-menu button:focus-visible {
    background: var(--superficie-3);
}

.at-mensagens .chat-msg-corpo {
    max-width: min(560px, 82%);
}

.at-msg .chat-balao {
    min-width: 88px;
}

.at-rodape {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 2px;
    font-size: 11px;
    color: var(--texto-3);
}

.at-tique {
    display: inline-flex;
    font-size: 14px;
    line-height: 1;
}

.at-tique.lida {
    color: var(--info);
}

.at-tique.falhou {
    color: var(--perigo);
}

.at-tique.mudou {
    animation: at-tique 420ms var(--curva);
}

@keyframes at-tique {
    0% { transform: scale(0.6); }
    60% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.at-midia {
    display: block;
    min-width: 0;
}

.at-audio {
    display: block;
    width: 300px;
    max-width: 100%;
    height: 40px;
}

.at-video {
    display: block;
    max-width: min(320px, 100%);
    max-height: 300px;
    background: #000;
    border-radius: 8px;
}

.at-falha {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 4px 4px 0;
    font-size: var(--t-sm);
    color: var(--perigo);
}

.at-evento {
    display: flex;
    justify-content: center;
    margin: 12px 0 4px;
}

.at-evento-pilula {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
    max-width: 90%;
    padding: 4px 12px;
    font-size: var(--t-xs);
    color: var(--texto-2);
    text-align: center;
    background: var(--superficie-3);
    border-radius: 14px;
}

.at-evento-hora {
    color: var(--texto-3);
}

.at-nota {
    max-width: min(560px, 82%);
    margin: 12px 0 0 auto;
    padding: 8px 12px;
    background: var(--atencao-suave);
    border: 1px dashed var(--atencao);
    border-radius: 12px 4px 12px 12px;
}

.at-nota-cab {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 2px;
    font-size: var(--t-xs);
    color: var(--texto-2);
}

.at-nota-cab .bi {
    color: var(--atencao);
}

.at-nota-hora {
    margin-left: auto;
    color: var(--texto-3);
}

#waCompor:empty {
    display: none;
}

/* Painel do contato (conteúdo na Task 14) */
.at-painel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--superficie);
    border-left: 1px solid var(--linha);
}

.at-painel-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 10px 12px 10px 18px;
    border-bottom: 1px solid var(--linha);
}

#waPainelCorpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

@media (max-width: 1199px) {
    .at,
    .at.com-painel {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .at-painel {
        position: fixed;
        top: var(--altura-topo);
        right: 0;
        bottom: 0;
        z-index: 45;
        width: min(360px, 100vw);
        box-shadow: var(--sombra-3);
    }
}

@media (max-width: 991px) {
    .at,
    .at.com-painel {
        grid-template-columns: minmax(0, 1fr);
    }

    .at.com-conversa .at-fila,
    .at:not(.com-conversa) .at-chat,
    .at.com-painel .at-chat {
        display: none;
    }

    .at-painel {
        position: static;
        width: auto;
        box-shadow: none;
    }

    .at .chat-voltar {
        display: inline-grid;
    }
}

@media (max-width: 767px) {
    .at,
    .at.com-painel {
        height: calc(100dvh - var(--altura-topo) - 62px);
    }

    .at-cab {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 8px 8px 4px;
    }

    .at-cab-texto {
        flex: 1 1 calc(100% - 100px);
    }

    .at-cab-acoes {
        flex: 1 0 100%;
        justify-content: flex-end;
    }

    .at-mensagens {
        padding: 12px 12px 8px;
    }

    .at-mensagens .chat-msg-corpo,
    .at-nota {
        max-width: 90%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .at-item.destaque,
    .at-abas .chat-abas-num.pulsar,
    .at-tique.mudou {
        animation: none;
    }
}

/* Mensagens internas (estilo Teams) */

.contatos-msg .contato-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    color: var(--texto);
    text-decoration: none;
    border-radius: 8px;
}

.contatos-msg .contato-link.ativo {
    font-weight: 600;
    color: var(--texto);
    background: #e8eefb;
    box-shadow: inset 3px 0 0 var(--blue);
}

.contatos-msg .contato-badge {
    min-width: 20px;
    padding: 1px 6px;
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    color: #fff;
    text-align: center;
    background: #c4314b;
    border-radius: 10px;
}

.contatos-msg .contato-link:has(.contato-badge) .contato-nome {
    font-weight: 600;
}

.contatos-msg .contato-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Avatares com iniciais (estilo Teams) */

.avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #8593a8;
    border-radius: 50%;
    user-select: none;
}

.avatar.avatar-sm {
    width: 28px;
    height: 28px;
    font-size: 11px;
}

/* Avisos */

.aviso-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eef1f5;
}

.aviso-item:last-child {
    border-bottom: 0;
}

.aviso-corpo {
    flex: 1;
    min-width: 0;
}

/* Conversa */

.conversa-cab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid #eef1f5;
}

.conversa-nome {
    font-weight: 600;
    color: var(--texto);
}

.conversa-sub {
    font-size: 12px;
    color: var(--muted);
}

.conversa {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}

.msg-dia {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 4px;
    font-size: 12px;
    color: var(--muted);
}

.msg-dia::before,
.msg-dia::after {
    flex: 1;
    height: 1px;
    content: "";
    background: #e3e7ee;
}

.msg-dia span:first-letter {
    text-transform: uppercase;
}

.msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 12px;
}

.msg.continua {
    margin-top: 3px;
}

.msg.continua .avatar {
    visibility: hidden;
    height: 0;
}

.msg.continua .msg-cab {
    display: none;
}

.msg-corpo {
    max-width: 75%;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e3e7ee;
    border-radius: 6px;
    box-shadow: 0 1px 2px #172b4d10;
}

.msg-cab {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.msg-nome {
    font-size: 13px;
    font-weight: 600;
    color: var(--texto);
}

.msg-hora {
    font-size: 11px;
    color: var(--muted);
}

.msg-texto {
    font-size: 14px;
    color: var(--texto);
    white-space: pre-wrap;
    word-break: break-word;
}

.msg.minha {
    justify-content: flex-end;
}

.msg.minha .avatar,
.msg.minha .msg-nome {
    display: none;
}

.msg.minha .msg-corpo {
    background: #e8eefb;
    border-color: #d3def6;
}

/* Excluir mensagem/aviso: discreto, mas alcançável por teclado e sempre visível no toque */
.excluir-msg,
.excluir-aviso {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 2px 6px;
    font-size: var(--t-xs);
    color: var(--texto-3);
    background: none;
    border: 0;
    border-radius: var(--raio-sm);
    opacity: 0;
    transition: opacity var(--dur-1) var(--curva);
}

.msg:hover .excluir-msg,
.aviso-item:hover .excluir-aviso,
.excluir-msg:focus-visible,
.excluir-aviso:focus-visible {
    opacity: 1;
}

@media (hover: none) {
    .excluir-msg,
    .excluir-aviso {
        opacity: 1;
    }
}

.excluir-msg:hover,
.excluir-aviso:hover {
    color: var(--perigo);
    background: var(--perigo-suave);
}

.linha-envio {
    display: flex;
    gap: var(--e-2);
}

h3.conversa-nome {
    margin: 0;
    font-size: var(--t-md);
}

.selo-erro {
    color: var(--perigo);
    background: var(--perigo-suave);
}

/* Tarefas arquivadas */

.filtro-arquivadas {
    flex-wrap: wrap;
    gap: 10px;
}

.filtro-arquivadas input[type="search"] {
    flex: 1 1 260px;
    width: auto;
}

.filtro-arquivadas .form-select {
    width: auto;
}


.fc-evento-hora {
    margin-right: 4px;
    font-weight: 700;
}


/* Cobranças > Dívidas: autocompletar do cliente devedor */
.autocomplete {
    position: relative;
}

.autocomplete-lista {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 280px;
    margin-top: 2px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dde2ea;
    border-radius: 8px;
    box-shadow: 0 8px 20px #172b4d26;
}

.autocomplete-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    cursor: pointer;
}

.autocomplete-item small {
    color: var(--muted);
    white-space: nowrap;
}

.autocomplete-item:hover,
.autocomplete-item.ativo {
    background: #eaf1fd;
}

.autocomplete-vazio {
    padding: 8px 12px;
    color: var(--muted);
}

/* Cobranças > Dívidas: situação do cliente */
.situacao-divida { font-weight: 600; }
.situacao-CADASTRO { background: #e5e9f0; color: #3b4a5f; }
.situacao-NEGOCIACAO { background: #fff3cd; color: #7a5a00; }
.situacao-ACORDO { background: #dbe8ff; color: #1d4fb0; }
.situacao-JUDICIAL { background: #fde2e1; color: #a12622; }
.situacao-QUITADO { background: #d8f3e3; color: #17663b; }

/* Cobranças > Devedores por Empresa: linha de agrupamento por credor */
.tabela-devedores .grupo-credor td {
    padding-top: 14px;
    font-weight: 700;
    color: var(--navy);
    background: #f4f6fa;
    border-bottom: 2px solid #dde2ea;
}
/* Cobranças > Recebimentos: resumo da dívida selecionada */
.recebimento-divida {
    padding: 10px 12px;
    background: #f4f6fa;
    border: 1px solid #dde2ea;
    border-radius: 8px;
}


/* ==========================================================================
   Formulário da tarefa e anexos
   ========================================================================== */
.mw-1100 {
    max-width: 1100px;
}

.compromisso-box {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    height: 100%;
    padding: var(--e-3) var(--e-4);
    background: var(--superficie-2);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
}

.compromisso-horas {
    display: grid;
    grid-template-columns: minmax(140px, 1.3fr) 1fr 1fr;
    gap: var(--e-2);
}

.compromisso-horas[hidden] {
    display: none;
}

.compromisso-horas .form-label {
    margin-bottom: 2px;
    font-size: var(--t-xs);
}

.vazio-compacto {
    flex-direction: row;
    justify-content: flex-start;
    padding: var(--e-3) 0 var(--e-4);
    text-align: left;
}

.vazio-compacto > .bi {
    font-size: 20px;
}

.lista-anexos {
    margin: 0 0 var(--e-4);
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--linha);
}

.lista-anexos li {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3) 0;
    border-bottom: 1px solid var(--linha);
}

.lista-anexos li > .bi {
    font-size: 20px;
    color: var(--texto-3);
}

.lista-anexos-corpo {
    flex: 1 1 auto;
    min-width: 0;
}

.lista-anexos-corpo a {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.envio-anexo {
    padding: var(--e-4);
    background: var(--superficie-2);
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio);
}

.envio-anexo-linha {
    display: flex;
    gap: var(--e-2);
}

@media (max-width: 575px) {
    .compromisso-horas {
        grid-template-columns: 1fr 1fr;
    }

    .compromisso-horas > div:first-child {
        grid-column: 1 / -1;
    }

    .envio-anexo-linha {
        flex-direction: column;
    }
}

/* ==========================================================================
   Cadastros e listas
   ========================================================================== */
.busca-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2) var(--e-3);
    margin-bottom: var(--e-3);
}

.busca-lista .input-group {
    flex: 1 1 280px;
}

.texto-quebra {
    overflow-wrap: anywhere;
}

.pessoa {
    display: flex;
    align-items: center;
    gap: var(--e-3);
}

.pessoa-texto {
    min-width: 0;
}

.pessoa-texto .selo {
    margin-left: 6px;
}

.selo-ok {
    color: var(--ok);
    background: var(--ok-suave);
}

.perfil-SUPER {
    color: #4b2d84;
    background: #efe9fb;
}

.perfil-ADMIN {
    color: var(--acento-forte);
    background: var(--acento-suave);
}

.tabela-matriz td,
.tabela-matriz th[scope="row"] {
    white-space: nowrap;
}

.tabela-matriz .form-check-input {
    width: 1.15em;
    height: 1.15em;
}

.passos {
    display: grid;
    gap: 6px;
    margin: 0 0 var(--e-3);
    padding-left: 1.25rem;
    color: var(--texto-2);
}

.opcoes-linha {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-5);
}

.lista-avisos {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--texto-2);
}

.colunas-csv {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: 6px var(--e-4);
    margin: 0 0 var(--e-3);
    font-size: var(--t-sm);
}

.colunas-csv dt {
    font-weight: 600;
    color: var(--texto);
}

.colunas-csv dd {
    margin: 0;
    color: var(--texto-3);
}

.carregando {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-4);
    color: var(--texto-2);
    background: var(--acento-suave);
    border-radius: var(--raio);
}

.carregando[hidden] {
    display: none;
}

.empresa-logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: var(--e-4);
    background: var(--superficie-2);
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio);
}

.empresa-logo-preview img {
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
}

.empresa-logo-preview img[hidden] {
    display: none;
}

legend.form-label {
    float: none;
    width: auto;
    margin-bottom: 6px;
    padding: 0;
    border: 0;
}

/* ==========================================================================
   Cobranças: totais e ajuda dos filtros
   ========================================================================== */
.totais {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    margin: 0;
}

.totais > div {
    padding: 6px var(--e-3);
    background: var(--superficie-2);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
}

.totais dt {
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--texto-3);
}

.totais dd {
    margin: 0;
    font-weight: 650;
    color: var(--texto);
    white-space: nowrap;
}

.totais .destaque {
    background: var(--acento-suave);
    border-color: var(--acento-linha);
}

.totais .destaque dd {
    color: var(--acento-forte);
}

.ajuda-filtros {
    margin: 0 0 var(--e-3);
    font-size: var(--t-sm);
}

.ajuda-filtros summary {
    width: max-content;
    max-width: 100%;
    font-weight: 600;
    color: var(--acento);
    cursor: pointer;
}

.tabela-relatorio td,
.tabela-relatorio th {
    white-space: nowrap;
}

.tabela-relatorio td:first-child {
    white-space: normal;
    min-width: 180px;
}

/* ==========================================================================
   Entrada (login e código de verificação) e páginas de erro
   ========================================================================== */
.login-page {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(380px, 1fr);
    min-height: 100vh;
    background: var(--superficie);
}

.login-lado {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--e-8) clamp(var(--e-8), 5vw, 72px);
    overflow: hidden;
    color: var(--tinta-200);
    background: var(--tinta-900);
}

/* Pauta discreta: linhas como as de um caderno de prazos */
.login-lado::before {
    position: absolute;
    inset: 0;
    content: "";
    background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgb(159 176 201 / 0.08) 31px 32px);
    mask-image: linear-gradient(90deg, transparent, #000 40%);
}

.login-lado > * {
    position: relative;
}

.login-marca {
    display: inline-flex;
    align-self: flex-start;
    padding: 9px 14px;
    background: #fff;
    border-radius: var(--raio);
}

.login-marca img {
    width: 150px;
    height: auto;
}

.login-frase {
    max-width: 22ch;
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    font-weight: 500;
    line-height: 1.15;
    color: #fff;
}

.login-itens {
    display: grid;
    gap: var(--e-3);
    max-width: 40ch;
    margin: var(--e-6) 0 0;
    padding: 0;
    list-style: none;
}

.login-itens li {
    display: flex;
    gap: var(--e-3);
    align-items: baseline;
}

.login-itens .bi {
    color: #8fb0ff;
}

.login-rodape {
    font-size: var(--t-sm);
    color: var(--tinta-300);
}

.login-area {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--e-8) var(--e-6);
}

.login-card {
    width: min(380px, 100%);
}

.login-card h1 {
    margin: 0 0 var(--e-1);
    font-family: var(--fonte-titulo);
    font-size: var(--t-2xl);
    font-weight: 600;
    color: var(--tinta-900);
}

.login-card > p {
    margin: 0 0 var(--e-6);
    color: var(--texto-3);
}

.login-card .form-control {
    min-height: 44px;
}

.login-card .btn-primary {
    min-height: 44px;
}

.login-card .brand-logo-movel {
    display: none;
    width: 140px;
    margin-bottom: var(--e-6);
}

.campo-senha {
    position: relative;
}

.campo-senha .form-control {
    padding-right: 44px;
}

.campo-senha button {
    position: absolute;
    top: 50%;
    right: 4px;
    width: 36px;
    height: 36px;
    color: var(--texto-3);
    background: none;
    border: 0;
    border-radius: var(--raio-sm);
    transform: translateY(-50%);
}

.campo-senha button:hover {
    color: var(--texto);
    background: var(--superficie-3);
}

.codigo-verificacao {
    font-size: 1.5rem !important;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-align: center;
}

/* Página de erro (acesso negado, não encontrado, falha) */
.erro-pagina {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--e-6);
    background: var(--fundo);
}

.erro-cartao {
    width: min(520px, 100%);
    padding: var(--e-8);
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-2);
}

.erro-cartao .erro-codigo {
    display: inline-block;
    margin-bottom: var(--e-3);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--texto-3);
}

.erro-cartao h1 {
    margin: 0 0 var(--e-2);
    font-family: var(--fonte-titulo);
    font-size: var(--t-2xl);
    font-weight: 600;
    color: var(--tinta-900);
}

.erro-cartao p {
    color: var(--texto-2);
}

.erro-cartao .page-acoes {
    margin-top: var(--e-6);
}

/* ==========================================================================
   Utilitários (no lugar de style= inline, que a CSP não permite)
   ========================================================================== */
.mw-100 { max-width: 100px; }
.mw-140 { max-width: 140px; }
.mw-480 { max-width: 480px; }
.mw-560 { max-width: 560px; }
.mw-720 { max-width: 720px; }
.minw-280 { min-width: 280px; }
.texto-pre { white-space: pre-wrap; }
.bolinha-status { display: inline-block; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); }
.bolinha-status-sm { width: 10px; height: 10px; margin-right: 6px; }
.numero { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==========================================================================
   Responsividade
   ========================================================================== */
@media (max-width: 1199px) {
    .content {
        padding: var(--e-5) var(--e-5) var(--e-8);
    }

    .painel-form {
        position: static;
    }
}

@media (max-width: 991px) {
    .sidebar {
        box-shadow: var(--sombra-3);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform var(--dur-2) var(--curva), visibility 0s linear var(--dur-2);
    }

    .sidebar.open {
        transform: none;
        visibility: visible;
        transition: transform var(--dur-2) var(--curva), visibility 0s;
    }

    .sidebar-fechar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .main {
        margin-left: 0;
    }

    .btn-menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .topbar {
        padding: 0 var(--e-4);
    }

    .login-page {
        grid-template-columns: 1fr;
    }

    .login-lado {
        display: none;
    }

    .login-card .brand-logo-movel {
        display: block;
    }
}

@media (max-width: 767px) {
    :root {
        --t-2xl: 1.5rem;
    }

    .content {
        padding: var(--e-4) var(--e-3) var(--e-8);
    }

    .topbar-escritorio {
        display: none;
    }

    .topbar-nova span {
        display: none;
    }

    .trilha li:not([aria-current]) {
        display: none;
    }

    .trilha li[aria-current]::before {
        display: none;
    }

    /* Quadro no celular: uma coluna por vez, deslizando para o lado */
    .kanban {
        grid-auto-columns: min(86vw, 320px);
        margin: 0 calc(var(--e-3) * -1);
        padding: 0 var(--e-3) var(--e-2);
        scroll-padding: 0 var(--e-3);
        scroll-snap-type: x mandatory;
    }

    .kanban-scroll-topo {
        display: none !important;
    }

    .quadro-barra {
        align-items: stretch;
        flex-direction: column;
    }

    .filter-setores {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .btn-setor {
        white-space: nowrap;
    }

    .page-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .panel {
        padding: var(--e-4);
    }

    .filter-bar select {
        min-width: 0;
        max-width: none;
        flex: 1 1 100%;
    }

    .avisos {
        right: var(--e-3);
        bottom: var(--e-3);
    }

    .form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .form-actions .me-auto {
        margin-right: 0 !important;
    }

    /* Tabelas viram cartões: cada linha empilha os campos com o rótulo da coluna */
    .table-cartoes thead {
        display: none;
    }

    .table-cartoes,
    .table-cartoes tbody,
    .table-cartoes tr,
    .table-cartoes td {
        display: block;
        width: 100%;
    }

    .table-cartoes tr {
        padding: var(--e-2) 0;
        border-bottom: 1px solid var(--linha);
    }

    .table-cartoes > tbody > tr > td {
        display: block;
        padding: 4px 0;
        text-align: right;
        background: transparent !important;
        border: 0;
        box-shadow: none !important;
    }

    .table-cartoes > tbody > tr > td::after {
        display: table;
        clear: both;
        content: "";
    }

    .table-cartoes > tbody > tr > td[data-rotulo]::before {
        float: left;
        margin-right: var(--e-3);
        font-size: var(--t-sm);
        font-weight: 600;
        color: var(--texto-3);
        text-align: left;
        content: attr(data-rotulo);
    }

    .table-cartoes > tbody > tr > td:first-child {
        font-weight: 600;
        text-align: left;
    }

    .table-cartoes > tbody > tr > td.acoes {
        padding-top: var(--e-2);
    }

    .table-cartoes > tbody > tr:hover > td {
        background: none;
    }

    .table-cartoes td.vazio-celula {
        display: block;
    }
}

/* ==========================================================================
   Impressão: só o conteúdo
   ========================================================================== */
@media print {
    .sidebar,
    .nav-inferior,
    .detalhe,
    .topbar,
    .avisos,
    .page-acoes,
    .pular,
    .btn,
    .filter-bar,
    .filtro-destaque {
        display: none !important;
    }

    .main {
        margin: 0;
    }

    .content {
        padding: 0;
    }

    .panel {
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    body {
        background: #fff;
    }
}

/* ==========================================================================
   Direção B ("Mesa"): trilho de ícones + painel da área, quadro denso com detalhe ao lado.
   Tema claro e tema "deep blue" (html[data-tema="escuro"]), escolhido no trilho.
   ========================================================================== */
:root {
    --largura-trilho: 60px;
    --largura-painel: 224px;
    --largura-menu: calc(var(--largura-trilho) + var(--largura-painel));
    --acento-texto: #ffffff;
}

body {
    font-variant-numeric: normal;
}

.numero,
.table td.text-end,
.table td.numero,
.card-prazo,
.col-contagem,
.totais dd {
    font-variant-numeric: tabular-nums;
}

/* ---------- Navegação ---------- */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    display: flex;
    width: var(--largura-menu);
    padding: 0;
    overflow: visible;
    color: var(--texto);
    background: transparent;
}

.trilho {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: var(--largura-trilho);
    padding: 12px 0;
    background: var(--superficie);
    border-right: 1px solid var(--linha);
}

.trilho-logo {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    border-radius: 10px;
}

.trilho-logo img {
    width: 30px;
    height: 30px;
}

.trilho-grupo {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trilho a,
.trilho-botao,
.trilho-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 18px;
    color: var(--texto-3);
    background: transparent;
    border: 0;
    border-radius: 10px;
    transition: background-color var(--dur-1) var(--curva), color var(--dur-1) var(--curva);
}

.trilho a:hover,
.trilho-botao:hover,
.trilho-avatar:hover {
    color: var(--texto);
    background: var(--superficie-3);
}

.trilho a.active {
    color: var(--acento);
    background: var(--acento-suave);
}

.trilho a.dragging {
    opacity: 0.4;
}

.trilho-rotulo {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Dica com o nome ao passar o mouse ou com foco do teclado */
.trilho [data-dica]::after {
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    z-index: 60;
    padding: 4px 8px;
    font-size: var(--t-xs);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    pointer-events: none;
    content: attr(data-dica);
    background: #1b2333;
    border-radius: 6px;
    opacity: 0;
    transform: translate(-4px, -50%);
    transition: opacity var(--dur-1) var(--curva), transform var(--dur-1) var(--curva);
}

.trilho [data-dica]:hover::after,
.trilho [data-dica]:focus-visible::after {
    opacity: 1;
    transform: translate(0, -50%);
}

.trilho .badge-contador {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 16px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
    border: 2px solid var(--superficie);
}

.trilho-divisor {
    width: 24px;
    height: 1px;
    margin: 8px 0;
    background: var(--linha);
}

.trilho-espaco {
    flex: 1 1 auto;
}

.trilho .avatar {
    width: 30px;
    height: 30px;
}

.conta-menu {
    min-width: 230px;
    padding: 6px;
    background: var(--superficie);
    border-color: var(--linha);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-3);
}

.conta-quem {
    padding: 8px 10px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--linha);
}

.conta-quem strong {
    display: block;
    color: var(--texto);
}

.conta-quem small {
    color: var(--texto-3);
}

.conta-menu .dropdown-item {
    display: flex;
    gap: 8px;
    padding: 7px 10px;
    color: var(--texto-2);
    border-radius: var(--raio-sm);
}

.conta-menu .dropdown-item:hover {
    color: var(--texto);
    background: var(--superficie-3);
}

.painel {
    display: flex;
    flex-direction: column;
    width: var(--largura-painel);
    padding: 12px 10px;
    overflow-y: auto;
    background: var(--superficie-2);
    border-right: 1px solid var(--linha);
    scrollbar-width: thin;
}

.painel-escritorio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 14px;
}

.painel-escritorio strong {
    display: block;
    max-width: 130px;
    overflow: hidden;
    font-size: var(--t-md);
    color: var(--texto);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.painel-escritorio small {
    font-size: var(--t-xs);
    color: var(--texto-3);
}

.painel-sigla {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 32px;
    height: 32px;
    font-size: 12px;
    font-weight: 800;
    color: var(--acento);
    text-transform: uppercase;
    background: var(--acento-suave);
    border-radius: 8px;
}

.painel-logo {
    max-width: 44px;
    max-height: 32px;
    object-fit: contain;
}

.sidebar-fechar {
    display: none;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--texto-3);
    background: none;
    border: 0;
    border-radius: 8px;
}

.sidebar-fechar:hover {
    color: var(--texto);
    background: var(--superficie-3);
}

.painel .sidebar-fechar {
    margin-left: auto;
}

.painel-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.painel-grupo {
    margin: 14px 8px 4px;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--texto-3);
}

.painel-nav > .painel-grupo:first-child {
    margin-top: 0;
}

.painel-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    padding: 4px 8px;
    font-weight: 500;
    color: var(--texto-2);
    text-decoration: none;
    border-radius: 8px;
    transition: background-color var(--dur-1) var(--curva), color var(--dur-1) var(--curva);
}

.painel-nav a .bi {
    flex: 0 0 auto;
    width: 16px;
    font-size: 14px;
    text-align: center;
}

.painel-nav a:hover {
    color: var(--texto);
    background: var(--superficie-3);
}

.painel-nav a.active {
    font-weight: 650;
    color: var(--texto);
    background: var(--superficie);
    box-shadow: var(--sombra-1);
}

.texto-cortado {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar.avatar-xs {
    width: 22px;
    height: 22px;
    font-size: 9.5px;
}

/* Cores de setor: seis tons que funcionam nos dois temas */
[data-indice="0"] { --cor-tag: #2f63c9; --cor-tag-fundo: #e8effd; }
[data-indice="1"] { --cor-tag: #a5520a; --cor-tag-fundo: #fdf0e2; }
[data-indice="2"] { --cor-tag: #2b7d55; --cor-tag-fundo: #e5f4ec; }
[data-indice="3"] { --cor-tag: #7a43c4; --cor-tag-fundo: #f1eafd; }
[data-indice="4"] { --cor-tag: #a32d5c; --cor-tag-fundo: #fbe8ef; }
[data-indice="5"] { --cor-tag: #3c6e7e; --cor-tag-fundo: #e5f1f4; }

/* ---------- Barra do topo ---------- */
.main {
    margin-left: var(--largura-menu);
}

.topbar {
    height: var(--altura-topo);
    padding: 0 24px;
    background: color-mix(in srgb, var(--fundo) 88%, transparent);
    border-bottom: 1px solid var(--linha);
}

.ir-para {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    min-width: 220px;
    padding: 0 8px 0 12px;
    font-size: var(--t-sm);
    color: var(--texto-3);
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 9px;
}

.ir-para:hover {
    border-color: var(--linha-forte);
}

.ir-para kbd,
.ir-para-busca kbd {
    margin-left: auto;
    padding: 1px 6px;
    font: 600 11px var(--fonte);
    color: var(--texto-3);
    background: var(--superficie-3);
    border-radius: 5px;
    box-shadow: none;
}

.topbar-escritorio {
    display: none;
}

.content {
    padding: 20px 24px 32px;
}

/* Títulos de página: compactos, na mesma família da interface */
.page-title {
    align-items: center;
    margin-bottom: 16px;
}

.page-title h1,
.page-title h2 {
    font-family: var(--fonte);
    font-size: 1.5rem;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--texto);
}

.page-title p {
    margin-top: 2px;
    font-size: var(--t-sm);
}

.erro-cartao h1,
.login-card h1,
.login-frase {
    font-family: var(--fonte);
    font-weight: 750;
    letter-spacing: -0.02em;
}

/* Abas de forma de ver (Quadro / Prazos / Agenda) */
.titulo-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.visao {
    display: flex;
    padding: 3px;
    background: var(--superficie-3);
    border-radius: 9px;
}

.visao a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    font-size: var(--t-sm);
    font-weight: 550;
    color: var(--texto-2);
    text-decoration: none;
    border-radius: 7px;
}

.visao a:hover {
    color: var(--texto);
}

.visao a.sel {
    color: var(--texto);
    background: var(--superficie);
    box-shadow: var(--sombra-1);
}

/* ---------- Quadro (denso) ---------- */
.quadro-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 0 -24px 14px;
    padding: 0 24px 12px;
    border-bottom: 1px solid var(--linha);
}

.chips-filtro {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip-filtro {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 26px 0 10px;
    font-size: var(--t-sm);
    color: var(--texto-3);
    background: var(--superficie);
    border: 1px dashed var(--linha-forte);
    border-radius: 7px;
}

.chip-filtro select {
    max-width: 180px;
    padding: 0 4px 0 0;
    font-weight: 650;
    color: var(--texto);
    background: transparent;
    border: 0;
    appearance: none;
    cursor: pointer;
}

.chip-filtro select:focus {
    outline: none;
}

.chip-filtro:focus-within {
    border-style: solid;
    border-color: var(--acento);
    box-shadow: var(--foco);
}

.chip-filtro .bi {
    position: absolute;
    right: 8px;
    font-size: 11px;
    pointer-events: none;
}

.chip-limpar {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 8px;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--texto-2);
    text-decoration: none;
    border-radius: 7px;
}

.chip-limpar:hover {
    color: var(--texto);
    background: var(--superficie-3);
}

.quadro-resumo {
    margin: 0 0 0 auto;
    font-size: var(--t-sm);
    color: var(--texto-3);
}

.quadro-resumo a {
    font-weight: 700;
    text-decoration: none;
}

.quadro-resumo a.perigo { color: var(--perigo); }
.quadro-resumo a.atencao { color: var(--atencao); }

.quadro-area {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.quadro-area.com-detalhe {
    grid-template-columns: minmax(0, 1fr) 360px;
}

.kanban {
    display: grid;
    grid-auto-columns: minmax(224px, 1fr);
    grid-auto-flow: column;
    gap: 12px;
    align-items: start;
    padding-bottom: 8px;
    overflow-x: auto;
}

.kanban-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 200px;
    max-height: calc(100vh - 210px);
    padding: 0 6px 6px;
    overflow-y: auto;
    background: var(--coluna);
    border: 0;
    border-top: 3px solid var(--cor-etapa, var(--linha-forte));
    border-radius: 12px;
    scrollbar-width: thin;
}

.kanban-col h3 {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 -6px 4px;
    padding: 10px 10px 8px;
    font-size: var(--t-md);
    font-weight: 650;
    color: var(--texto);
    background: var(--coluna);
}

.kanban-col .col-handle {
    cursor: grab;
}

.dot {
    width: 8px;
    height: 8px;
    box-shadow: none;
}

.col-contagem {
    min-width: 0;
    padding: 0;
    font-weight: 500;
    color: var(--texto-3);
    background: none;
}

.col-acao {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-left: auto;
    padding: 0;
    font-size: 14px;
    color: var(--texto-3);
    background: none;
    border: 0;
    border-radius: 6px;
}

.col-acao:hover {
    color: var(--texto);
    background: var(--superficie);
}

.kanban-col.drag-over {
    background: var(--acento-suave);
}

.kanban-col.drag-over h3 {
    background: transparent;
}

.kanban-col.col-dragging {
    opacity: 0.5;
}

.kanban-vazio {
    margin: 4px 0;
    padding: 18px 8px;
    font-size: var(--t-sm);
    color: var(--texto-3);
    text-align: center;
    border: 1px dashed var(--linha-forte);
    border-radius: 9px;
}

.kanban-vazio .bi {
    display: none;
}

.kanban-col:has(.task-card) .kanban-vazio {
    display: none;
}

.task-card {
    position: relative;
    display: block;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: var(--superficie);
    border: 1px solid transparent;
    border-radius: 9px;
    box-shadow: var(--sombra-1);
    cursor: grab;
    transition: border-color var(--dur-1) var(--curva), box-shadow var(--dur-1) var(--curva);
}

.task-card::before {
    display: none;
}

.task-card:hover {
    border-color: var(--linha-forte);
    box-shadow: var(--sombra-2);
}

.task-card.selecionado {
    border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--acento-suave);
}

.task-card.dragging {
    opacity: 0.5;
}

.task-card.movido {
    animation: cartao-chega var(--dur-2) var(--curva);
}

.card-l1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.card-prazo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--texto-3);
}

.card-prazo .bi {
    font-size: 11px;
}

.card-prazo.sem {
    font-weight: 500;
}

.prazo-atrasado .card-prazo,
.card-prazo.prazo-atrasado {
    padding: 1px 7px;
    color: #fff;
    background: var(--prazo-atrasado);
    border-radius: 5px;
}

.prazo-hoje .card-prazo,
.card-prazo.prazo-hoje {
    padding: 1px 7px;
    color: #fff;
    background: var(--prazo-hoje);
    border-radius: 5px;
}

.prazo-3d .card-prazo,
.card-prazo.prazo-3d {
    color: var(--atencao);
}

.card-pri {
    font-size: 14px;
    line-height: 1;
    color: var(--texto-3);
}

.card-pri.pri-ALTA { color: var(--prazo-hoje); }
.card-pri.pri-URGENTE { color: var(--perigo); }

.task-card h4 {
    margin: 0;
    font-size: var(--t-md);
    font-weight: 600;
    line-height: 1.3;
}

.task-card h4 a {
    display: -webkit-box;
    overflow: hidden;
    color: var(--texto);
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.task-card h4 a::after {
    position: absolute;
    inset: 0;
    content: "";
    border-radius: 9px;
}

.task-card h4 a:focus-visible {
    outline: none;
}

.task-card h4 a:focus-visible::after {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

.card-cliente,
.card-compromisso {
    margin: 3px 0 0;
    overflow: hidden;
    font-size: var(--t-sm);
    color: var(--texto-2);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-processo {
    margin-left: 4px;
    color: var(--texto-3);
}

.card-compromisso {
    font-weight: 600;
    color: var(--compromisso);
}

.card-l3 {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.card-l3-dir {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tag {
    max-width: 150px;
    overflow: hidden;
    padding: 1px 7px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cor-tag, var(--texto-2));
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--cor-tag-fundo, var(--superficie-3));
    border-radius: 5px;
}

.btn-arquivar-card {
    display: none !important;
    width: 24px;
    height: 24px;
    padding: 0;
    color: var(--texto-3);
    background: none;
    border: 0;
    border-radius: 6px;
}

.kanban-col.conclusiva .btn-arquivar-card {
    display: inline-grid !important;
    place-items: center;
}

.btn-arquivar-card:hover {
    color: var(--acento);
    background: var(--acento-suave);
}

/* Painel de detalhe da tarefa */
.detalhe {
    position: sticky;
    top: calc(var(--altura-topo) + 16px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: calc(100vh - var(--altura-topo) - 32px);
    padding: 16px 18px;
    overflow-y: auto;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 12px;
    box-shadow: var(--sombra-2);
}

.detalhe[hidden] {
    display: none;
}

.detalhe:focus {
    outline: none;
}

.detalhe-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
}

.detalhe-fechar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--texto-3);
    background: none;
    border: 0;
    border-radius: 8px;
}

.detalhe-fechar:hover {
    color: var(--texto);
    background: var(--superficie-3);
}

.detalhe h2 {
    margin: -6px 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

.detalhe-campos {
    display: grid;
    gap: 1px;
    margin: 0;
}

.detalhe-campos > div {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    min-height: 32px;
    padding: 2px 8px;
    border-radius: 7px;
}

.detalhe-campos > div:hover {
    background: var(--superficie-2);
}

.detalhe-campos > div.vazio-campo {
    display: none;
}

.detalhe-campos dt {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--texto-3);
}

.detalhe-campos dt label {
    margin: 0;
}

.detalhe-campos dd {
    margin: 0;
    font-weight: 550;
    color: var(--texto);
    overflow-wrap: anywhere;
}

.detalhe-campos dd .priority {
    font-size: var(--t-xs);
}

.detalhe-descricao h3 {
    margin: 0 0 6px;
    font-size: var(--t-sm);
    font-weight: 650;
    color: var(--texto-2);
}

.detalhe-descricao p {
    margin: 0;
    color: var(--texto-2);
}

.detalhe-acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    margin-top: auto;
    border-top: 1px solid var(--linha);
}

/* ---------- "Ir para..." ---------- */
.ir-para-dialogo {
    width: min(560px, calc(100vw - 24px));
    margin-top: 12vh;
    padding: 0;
    background: var(--superficie);
}

.ir-para-busca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--linha);
}

.ir-para-busca .bi {
    color: var(--texto-3);
}

.ir-para-busca input {
    flex: 1 1 auto;
    font-size: var(--t-lg);
    color: var(--texto);
    background: transparent;
    border: 0;
    outline: none;
}

.ir-para-lista {
    max-height: 50vh;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
}

.ir-para-lista li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    color: var(--texto);
    border-radius: 8px;
    cursor: pointer;
}

.ir-para-lista li small {
    color: var(--texto-3);
}

.ir-para-lista li.ativo,
.ir-para-lista li:hover {
    background: var(--acento-suave);
}

.ir-para-lista .ir-para-vazio {
    color: var(--texto-3);
    cursor: default;
}

/* ---------- Navegação inferior (celular e tablet) ---------- */
.nav-inferior {
    display: none;
}

@media (max-width: 991px) {
    .sidebar {
        transform: translateX(-100%);
        visibility: hidden;
        box-shadow: var(--sombra-3);
        transition: transform var(--dur-2) var(--curva), visibility 0s linear var(--dur-2);
    }

    .sidebar.open {
        transform: none;
        visibility: visible;
        transition: transform var(--dur-2) var(--curva), visibility 0s;
    }

    .painel .sidebar-fechar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .main {
        margin-left: 0;
    }

    .btn-menu {
        display: none;
    }

    .topbar {
        padding: 0 16px;
    }

    .nav-inferior {
        position: fixed;
        inset: auto 0 0;
        z-index: 32;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: center;
        height: 62px;
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--superficie);
        border-top: 1px solid var(--linha);
    }

    .nav-inferior a,
    .nav-inferior button {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        font-size: 11px;
        font-weight: 600;
        color: var(--texto-3);
        text-decoration: none;
        background: none;
        border: 0;
    }

    .nav-inferior .bi {
        font-size: 19px;
    }

    .nav-inferior a.active {
        color: var(--acento);
    }

    .nav-inferior .nav-inferior-nova {
        justify-self: center;
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        font-size: 22px;
        color: var(--acento-texto);
        background: var(--acento);
        border-radius: 14px;
    }

    .content {
        padding-bottom: 96px;
    }

    .avisos {
        bottom: 76px;
    }

    .topbar-nova {
        display: none;
    }

    .quadro-area.com-detalhe {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Detalhe em tela cheia */
    .detalhe {
        position: fixed;
        inset: 0;
        z-index: 50;
        max-height: none;
        border: 0;
        border-radius: 0;
    }
}

@media (max-width: 767px) {
    .ir-para {
        min-width: 0;
        width: 40px;
        padding: 0;
        justify-content: center;
    }

    .ir-para span,
    .ir-para kbd {
        display: none;
    }

    .quadro-filtros {
        margin: 0 -12px 12px;
        padding: 0 12px 10px;
    }

    .quadro-resumo {
        margin: 0;
    }

    .chips-filtro {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .chip-filtro {
        flex: 0 0 auto;
    }

    /* Quadro no celular: etapas empilhadas */
    .kanban {
        display: block;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .kanban-col {
        max-height: none;
        margin-bottom: 14px;
    }
}

/* ==========================================================================
   Tema "deep blue"
   ========================================================================== */
html[data-tema="escuro"] {
    color-scheme: dark;
    --tinta-900: #eef2fa;
    --texto: #e6ecf7;
    --texto-2: #b6c2d9;
    --texto-3: #8b9ab6;
    --fundo: #0b1730;
    --superficie: #12223f;
    --superficie-2: #0f1e39;
    --superficie-3: #1b2f52;
    --coluna: #102039;
    --linha: #24395f;
    --linha-forte: #34507e;
    --acento: #ff8f3f;
    --acento-forte: #ffab70;
    --acento-suave: rgb(255 143 63 / 0.14);
    --acento-linha: rgb(255 143 63 / 0.45);
    --acento-texto: #2b1300;
    --ok: #4cc38a;
    --ok-suave: rgb(76 195 138 / 0.14);
    --atencao: #f2a64e;
    --atencao-suave: rgb(242 166 78 / 0.14);
    --perigo: #ff7a6b;
    --perigo-suave: rgb(255 122 107 / 0.14);
    --info: #6fb5f2;
    --info-suave: rgb(111 181 242 / 0.14);
    --prazo-atrasado: #e0483a;
    --prazo-hoje: #d8661b;
    --compromisso: #b39dff;
    --sombra-1: 0 1px 2px rgb(0 0 0 / 0.35);
    --sombra-2: 0 2px 8px rgb(0 0 0 / 0.35), 0 1px 2px rgb(0 0 0 / 0.3);
    --sombra-3: 0 16px 40px rgb(0 0 0 / 0.5), 0 2px 8px rgb(0 0 0 / 0.35);
    --foco: 0 0 0 3px rgb(255 143 63 / 0.35);
    --bs-body-bg: var(--fundo);
    --bs-body-color: var(--texto);
    --bs-border-color: var(--linha);
    --bs-primary-rgb: 255, 143, 63;
    --bs-link-color: var(--acento);
    --bs-link-color-rgb: 255, 143, 63;
    --bs-link-hover-color: var(--acento-forte);
    --bs-secondary-color: var(--texto-3);
    --bs-tertiary-bg: var(--superficie-2);
    --bs-emphasis-color: var(--texto);
}

html[data-tema="escuro"] [data-indice="0"] { --cor-tag: #8fb3ff; --cor-tag-fundo: rgb(143 179 255 / 0.14); }
html[data-tema="escuro"] [data-indice="1"] { --cor-tag: #f3b06e; --cor-tag-fundo: rgb(243 176 110 / 0.14); }
html[data-tema="escuro"] [data-indice="2"] { --cor-tag: #6fd3a0; --cor-tag-fundo: rgb(111 211 160 / 0.14); }
html[data-tema="escuro"] [data-indice="3"] { --cor-tag: #c4a3ff; --cor-tag-fundo: rgb(196 163 255 / 0.14); }
html[data-tema="escuro"] [data-indice="4"] { --cor-tag: #f58fb4; --cor-tag-fundo: rgb(245 143 180 / 0.14); }
html[data-tema="escuro"] [data-indice="5"] { --cor-tag: #7fcbdc; --cor-tag-fundo: rgb(127 203 220 / 0.14); }

html[data-tema="escuro"] .btn-primary {
    --bs-btn-color: var(--acento-texto);
    --bs-btn-hover-color: var(--acento-texto);
    --bs-btn-active-color: var(--acento-texto);
    --bs-btn-disabled-color: var(--acento-texto);
}

html[data-tema="escuro"] .btn-danger {
    --bs-btn-bg: #c93a2c;
    --bs-btn-border-color: #c93a2c;
}

html[data-tema="escuro"] .alert-danger { --bs-alert-color: #ffb4ab; --bs-alert-bg: var(--perigo-suave); --bs-alert-border-color: rgb(255 122 107 / 0.35); }
html[data-tema="escuro"] .alert-success { --bs-alert-color: #9fe2c0; --bs-alert-bg: var(--ok-suave); --bs-alert-border-color: rgb(76 195 138 / 0.35); }
html[data-tema="escuro"] .alert-warning { --bs-alert-color: #ffd29b; --bs-alert-bg: var(--atencao-suave); --bs-alert-border-color: rgb(242 166 78 / 0.35); }
html[data-tema="escuro"] .alert-info { --bs-alert-color: #b5dafa; --bs-alert-bg: var(--info-suave); --bs-alert-border-color: rgb(111 181 242 / 0.35); }

html[data-tema="escuro"] .priority { color: var(--texto-2); background: var(--superficie-3); }
html[data-tema="escuro"] .priority.BAIXA { color: #8fdab3; background: rgb(76 195 138 / 0.14); }
html[data-tema="escuro"] .priority.MEDIA { color: #b9c6dd; background: var(--superficie-3); }
html[data-tema="escuro"] .priority.ALTA { color: #f7bb78; background: rgb(242 166 78 / 0.14); }
html[data-tema="escuro"] .badge-prazo.atrasado { color: #ffb4ab; }
html[data-tema="escuro"] .badge-prazo.hoje { color: #ffc08a; background: rgb(216 102 27 / 0.18); }
html[data-tema="escuro"] .situacao-CADASTRO { background: var(--superficie-3); color: var(--texto-2); }
html[data-tema="escuro"] .situacao-NEGOCIACAO { background: rgb(242 166 78 / 0.16); color: #ffd29b; }
html[data-tema="escuro"] .situacao-ACORDO { background: rgb(111 181 242 / 0.16); color: #b5dafa; }
html[data-tema="escuro"] .situacao-JUDICIAL { background: rgb(255 122 107 / 0.16); color: #ffb4ab; }
html[data-tema="escuro"] .situacao-QUITADO { background: rgb(76 195 138 / 0.16); color: #9fe2c0; }
html[data-tema="escuro"] .form-control::placeholder { color: #6f7f9d; }
html[data-tema="escuro"] .form-control:hover,
html[data-tema="escuro"] .form-select:hover { border-color: var(--linha-forte); }
html[data-tema="escuro"] .trilho [data-dica]::after { color: #0b1730; background: #e6ecf7; }
html[data-tema="escuro"] .topbar { background: color-mix(in srgb, var(--fundo) 88%, transparent); }
html[data-tema="escuro"] .dialogo::backdrop { background: rgb(2 8 20 / 0.65); }
html[data-tema="escuro"] .fc { --fc-border-color: var(--linha); --fc-page-bg-color: var(--superficie); --fc-neutral-bg-color: var(--superficie-2); --fc-today-bg-color: var(--acento-suave); --fc-button-bg-color: var(--superficie); --fc-button-border-color: var(--linha); --fc-button-text-color: var(--texto); --fc-button-hover-bg-color: var(--superficie-3); --fc-list-event-hover-bg-color: var(--superficie-3); }
html[data-tema="escuro"] .fc .fc-col-header-cell { background: var(--superficie-2); }
html[data-tema="escuro"] .fc .fc-daygrid-day-number { color: var(--texto-2); }

@keyframes cartao-chega {
    from { box-shadow: 0 0 0 3px var(--acento-linha); }
    to { box-shadow: var(--sombra-1); }
}

@media print {
    html[data-tema="escuro"] { color-scheme: light; }
}

html[data-tema="escuro"] .trilho-logo img {
    border-radius: 8px;
    box-shadow: 0 0 0 2px #2b4472;
}

.sidebar-veu {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgb(14 24 40 / 0.5);
}

.sidebar-veu[hidden] {
    display: none;
}

@media (max-width: 767px) {
    .page-title.quadro-titulo {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .quadro-titulo .titulo-linha {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    .quadro-titulo .page-acoes {
        display: none;
    }

    .chips-filtro {
        scrollbar-width: none;
    }
}

/* ==========================================================================
   Menu lateral expandido (com nomes). Escolha salva no navegador; em telas
   médias o trilho fica sempre compacto para sobrar espaço ao conteúdo.
   ========================================================================== */
.trilho-marca {
    display: none;
}

.trilho-expandir {
    display: none !important;
}

@media (min-width: 1200px) {
    .trilho-expandir {
        display: grid !important;
    }

    html[data-menu="expandido"] {
        --largura-trilho: 208px;
    }

    html[data-menu="expandido"] .trilho {
        align-items: stretch;
        padding: 12px 10px;
    }

    html[data-menu="expandido"] .trilho-grupo {
        gap: 1px;
    }

    html[data-menu="expandido"] .trilho a,
    html[data-menu="expandido"] .trilho-botao,
    html[data-menu="expandido"] .trilho-avatar {
        display: flex !important;
        align-items: center;
        gap: 11px;
        width: auto;
        height: 36px;
        padding: 0 10px;
        font-size: 17px;
        text-align: left;
    }

    html[data-menu="expandido"] .trilho-logo {
        height: 40px;
        margin-bottom: 12px;
        padding: 0 6px !important;
    }

    html[data-menu="expandido"] .trilho-marca {
        display: inline;
        font-size: 1.05rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--texto);
    }

    html[data-menu="expandido"] .trilho-rotulo {
        position: static !important;
        width: auto;
        height: auto;
        overflow: hidden;
        clip: auto;
        font-size: var(--t-md);
        font-weight: 550;
        text-overflow: ellipsis;
    }

    html[data-menu="expandido"] .trilho a.active .trilho-rotulo {
        font-weight: 650;
    }

    html[data-menu="expandido"] .trilho [data-dica]::after {
        display: none;
    }

    html[data-menu="expandido"] .trilho .badge-contador {
        position: static;
        margin-left: auto;
        border: 0;
    }

    html[data-menu="expandido"] .trilho-divisor {
        width: auto;
        margin: 8px 10px;
    }

    html[data-menu="expandido"] .trilho-avatar {
        height: 44px;
        margin-top: 4px;
    }

    html[data-menu="expandido"] .trilho .dropup {
        display: flex;
        flex-direction: column;
    }
}

/* Gaveta no celular e tablet: páginas da área no topo, todas as áreas abaixo, com nomes */
@media (max-width: 991px) {
    .sidebar {
        flex-direction: column;
        width: min(340px, 88vw);
        overflow-y: auto;
        background: var(--superficie-2);
    }

    .sidebar .painel {
        order: -1;
        width: auto;
        overflow: visible;
        border-right: 0;
    }

    .sidebar .trilho {
        align-items: stretch;
        width: auto;
        padding: 10px;
        border-top: 1px solid var(--linha);
        border-right: 0;
    }

    .sidebar .trilho-logo,
    .sidebar .trilho-espaco {
        display: none;
    }

    .sidebar .trilho a,
    .sidebar .trilho-botao,
    .sidebar .trilho-avatar {
        display: flex;
        align-items: center;
        gap: 12px;
        width: auto;
        height: 42px;
        padding: 0 10px;
        font-size: 18px;
    }

    .sidebar .trilho-rotulo {
        position: static !important;
        width: auto;
        height: auto;
        clip: auto;
        font-size: var(--t-md);
        font-weight: 550;
    }

    .sidebar .trilho [data-dica]::after {
        display: none;
    }

    .sidebar .trilho .badge-contador {
        position: static;
        margin-left: auto;
        border: 0;
    }

    .sidebar .trilho-divisor {
        width: auto;
        margin: 6px 10px;
    }

    .sidebar .trilho .dropup {
        display: flex;
        flex-direction: column;
    }
}

/* Tablet: botão de menu no topo em vez da barra inferior */
@media (min-width: 768px) and (max-width: 991px) {
    .nav-inferior {
        display: none;
    }

    .btn-menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .topbar-nova {
        display: inline-flex;
    }

    .content {
        padding-bottom: 32px;
    }

    .avisos {
        bottom: 16px;
    }
}

/* ==========================================================================
   Configurações
   ========================================================================== */
.config-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 20px;
    align-items: start;
    max-width: 1100px;
}

.config-grupo {
    padding: 6px;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 12px;
}

.config-grupo h2 {
    margin: 10px 12px 6px;
    font-size: var(--t-md);
    font-weight: 700;
    color: var(--texto);
}

.config-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.config-lista a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    color: var(--texto);
    text-decoration: none;
    border-radius: 9px;
}

.config-lista a:hover {
    background: var(--superficie-2);
}

.config-lista a > .bi:first-child {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 36px;
    height: 36px;
    font-size: 17px;
    color: var(--acento);
    background: var(--acento-suave);
    border-radius: 9px;
}

.config-lista strong {
    display: block;
    font-weight: 650;
}

.config-lista small {
    display: block;
    font-size: var(--t-sm);
    color: var(--texto-3);
}

.config-seta {
    margin-left: auto;
    color: var(--texto-3);
}

.config-aparencia {
    margin: 6px;
    padding: 12px;
    border-top: 1px solid var(--linha);
}

.config-aparencia h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: var(--t-md);
    font-weight: 650;
}

.config-aparencia fieldset + fieldset {
    margin-top: 12px;
}

.config-aparencia legend {
    margin-bottom: 6px;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--texto-2);
}

.segmentado {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 3px;
    background: var(--superficie-3);
    border-radius: 9px;
}

.segmentado .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: var(--t-sm);
    font-weight: 550;
    color: var(--texto-2);
    background: transparent;
    border: 0;
    border-radius: 7px;
}

.segmentado .btn-check:checked + .btn {
    color: var(--texto);
    background: var(--superficie);
    box-shadow: var(--sombra-1);
}

.segmentado .btn-check:focus-visible + .btn {
    box-shadow: var(--foco);
}

.trilho a,
.trilho a:hover {
    text-decoration: none;
}

/* ==========================================================================
   Deep blue: telas com cores próprias (WhatsApp, mensageiro, cobranças, login)
   ========================================================================== */
html[data-tema="escuro"] .topbar { background: color-mix(in srgb, var(--fundo) 90%, transparent); }
html[data-tema="escuro"] .contato-link:hover,
html[data-tema="escuro"] .bolha.dele,
html[data-tema="escuro"] .tabela-devedores .grupo-credor td,
html[data-tema="escuro"] .recebimento-divida { background: var(--superficie-2); border-color: var(--linha); color: var(--texto); }
html[data-tema="escuro"] .contatos-msg .contato-link.ativo,
html[data-tema="escuro"] .msg.minha .msg-corpo,
html[data-tema="escuro"] .autocomplete-item.ativo { background: var(--acento-suave); border-color: var(--acento-linha); }
html[data-tema="escuro"] .aviso-item,
html[data-tema="escuro"] .conversa-cab { border-color: var(--linha); }
html[data-tema="escuro"] .msg-dia::after { background: var(--linha); }
html[data-tema="escuro"] .msg-corpo,
html[data-tema="escuro"] .autocomplete-lista { color: var(--texto); background: var(--superficie); border-color: var(--linha); box-shadow: var(--sombra-2); }
html[data-tema="escuro"] .perfil-SUPER { color: #d2bfff; background: rgb(150 110 240 / 0.18); }
html[data-tema="escuro"] .fc-list-event .fc-evento-etiqueta { background: var(--superficie-3); }
html[data-tema="escuro"] .fc .fc-button-primary:not(:disabled).fc-button-active,
html[data-tema="escuro"] .fc .fc-button-primary:not(:disabled):active { color: var(--texto); background: var(--superficie-3); border-color: var(--linha-forte); }
html[data-tema="escuro"] .erro-cartao { background: var(--superficie); border-color: var(--linha); }
html[data-tema="escuro"] .btn-light { --bs-btn-color: var(--texto); --bs-btn-bg: var(--superficie); --bs-btn-border-color: var(--linha); --bs-btn-hover-color: var(--texto); --bs-btn-hover-bg: var(--superficie-3); --bs-btn-hover-border-color: var(--linha-forte); --bs-btn-active-bg: var(--superficie-3); --bs-btn-active-color: var(--texto); }

/* Login: lado institucional em deep blue com o acento bordô, nos dois temas */
.login-lado { background: #0b1730; }
.login-frase { font-weight: 750; }
.login-itens .bi { color: #f08aa3; }
html[data-tema="escuro"] .login-page { background: var(--fundo); }
html[data-tema="escuro"] .login-lado { background: #08122a; border-right: 1px solid var(--linha); }

.wa-config-aviso {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 10px 16px;
    font-size: var(--t-sm);
    color: var(--texto-2);
    background: var(--atencao-suave);
    border-bottom: 1px solid var(--linha);
}

.wa-config-aviso .bi {
    color: var(--atencao);
}

@media (max-width: 991px) {
    .sidebar .trilho a.trilho-logo {
        display: none;
    }

    .sidebar .trilho a,
    .sidebar .trilho-botao,
    .sidebar .trilho-avatar {
        color: var(--texto-2);
    }

    .sidebar .trilho a.active {
        color: var(--acento);
    }
}

/* ==========================================================================
   Avatares com foto e presença
   ========================================================================== */
.avatar {
    position: relative;
    overflow: hidden;
}

.avatar.com-foto {
    background: var(--superficie-3) !important;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.avatar.avatar-xl {
    width: 72px;
    height: 72px;
    font-size: 24px;
}

.avatar-grupo {
    color: var(--acento);
    background: var(--acento-suave) !important;
}

.avatar-avisos {
    color: #8a4b00;
    background: #fdecc8 !important;
}

html[data-tema="escuro"] .avatar-avisos {
    color: #ffd29b;
    background: rgb(242 166 78 / 0.18) !important;
}

.chat-avatar-pres {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.pres {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    background: #9aa3b2;
    border: 2px solid var(--superficie);
    border-radius: 50%;
}

.pres[data-presenca="DISPONIVEL"] { background: #1d9a5b; }
.pres[data-presenca="OCUPADO"] { background: #d1352a; }
.pres[data-presenca="AUSENTE"] { background: #e08a12; }
.pres[data-presenca="OFFLINE"] { background: var(--superficie); box-shadow: inset 0 0 0 2px #9aa3b2; }

.pres[data-presenca="NAO_INCOMODAR"] {
    background: #d1352a;
}

.pres[data-presenca="NAO_INCOMODAR"]::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 2px;
    content: "";
    background: #fff;
    border-radius: 1px;
    transform: translate(-50%, -50%);
}

.avatar-xl + .pres {
    width: 18px;
    height: 18px;
    border-width: 3px;
}

.perfil-linha {
    display: flex;
    gap: 18px;
    align-items: center;
}

.perfil-acoes {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Contador do menu: "pula" quando chega mensagem */
.badge-contador.pulsar {
    animation: badge-pula 900ms var(--curva);
}

@keyframes badge-pula {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgb(209 53 42 / 0.55); }
    25% { transform: scale(1.35); }
    55% { transform: scale(0.92); }
    100% { transform: scale(1); box-shadow: 0 0 0 10px rgb(209 53 42 / 0); }
}

/* ==========================================================================
   Notificações de mensagem (todas as telas)
   ========================================================================== */
.notificacoes {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(380px, calc(100vw - 24px));
    pointer-events: none;
}

.notificacao {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 40px 16px 14px;
    overflow: hidden;
    color: var(--texto);
    text-decoration: none;
    pointer-events: auto;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-left: 4px solid var(--acento);
    border-radius: 12px;
    box-shadow: var(--sombra-3);
    animation: notificacao-entra 520ms cubic-bezier(0.2, 1.3, 0.35, 1) both;
}

.notificacao:hover {
    color: var(--texto);
    border-color: var(--linha-forte);
    border-left-color: var(--acento);
}

.notificacao.saindo {
    animation: notificacao-sai 300ms ease-in forwards;
}

@keyframes notificacao-entra {
    0% { transform: translateX(110%) scale(0.92); }
    70% { transform: translateX(-6px) scale(1.01); }
    100% { transform: none; }
}

@keyframes notificacao-sai {
    to { transform: translateX(115%); opacity: 0; }
}

.notificacao-avatar {
    position: relative;
    flex: 0 0 auto;
}

.notificacao-avatar .avatar {
    width: 42px;
    height: 42px;
    animation: notificacao-avatar 1.4s var(--curva) 300ms 2;
}

@keyframes notificacao-avatar {
    0%, 100% { box-shadow: 0 0 0 0 var(--acento-linha); }
    50% { box-shadow: 0 0 0 6px transparent; }
}

.notificacao-tipo {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    font-size: 10px;
    color: var(--acento-texto);
    background: var(--acento);
    border: 2px solid var(--superficie);
    border-radius: 50%;
}

.notificacao-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.notificacao-texto strong {
    font-size: var(--t-md);
}

.notificacao-texto span {
    display: -webkit-box;
    overflow: hidden;
    color: var(--texto-2);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}

.notificacao-texto small {
    margin-top: 4px;
    font-weight: 600;
    color: var(--acento);
}

.notificacao-fechar {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    color: var(--texto-3);
    background: none;
    border: 0;
    border-radius: 6px;
}

.notificacao-fechar:hover {
    color: var(--texto);
    background: var(--superficie-3);
}

.notificacao-tempo {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--acento);
    transform-origin: left;
    animation: notificacao-tempo 8s linear forwards;
}

.notificacao.pausada .notificacao-tempo {
    animation-play-state: paused;
}

@keyframes notificacao-tempo {
    to { transform: scaleX(0); }
}

@media (max-width: 767px) {
    .notificacoes {
        right: 12px;
        bottom: 76px;
    }
}

/* ==========================================================================
   Seletor de emojis (mensageiro)
   ========================================================================== */
.emojis {
    display: flex;
    flex-direction: column;
    width: 340px;
    max-width: calc(100vw - 24px);
    height: 320px;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 12px;
    box-shadow: var(--sombra-3);
}

.emojis[hidden] {
    display: none;
}

.emojis-abas {
    display: flex;
    gap: 2px;
    padding: 6px;
    border-bottom: 1px solid var(--linha);
}

.emojis-aba {
    display: grid;
    flex: 1 1 0;
    place-items: center;
    height: 32px;
    padding: 0;
    color: var(--texto-3);
    background: none;
    border: 0;
    border-radius: 7px;
}

.emojis-aba.ativa,
.emojis-aba:hover {
    color: var(--acento);
    background: var(--acento-suave);
}

.emojis-titulo {
    margin: 8px 12px 2px;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--texto-3);
}

.emojis-grade {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    align-content: start;
    padding: 4px 8px 8px;
    overflow-y: auto;
}

.emoji {
    height: 36px;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    background: none;
    border: 0;
    border-radius: 8px;
    transition: transform var(--dur-1) var(--curva);
}

.emoji:hover {
    background: var(--superficie-3);
    transform: scale(1.18);
}

.emojis-vazio {
    grid-column: 1 / -1;
    margin: 20px 0;
    font-size: var(--t-sm);
    color: var(--texto-3);
    text-align: center;
}

/* ==========================================================================
   Mensageiro interno
   ========================================================================== */
.content:has(> .chat) {
    padding: 0 !important;
}

.chat {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    height: calc(100dvh - var(--altura-topo));
    min-height: 480px;
    background: var(--fundo);
}

.chat.com-detalhes {
    grid-template-columns: 330px minmax(0, 1fr) 300px;
}

.chat-icone {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 17px;
    color: var(--texto-2);
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: 8px;
}

.chat-icone:hover,
.chat-icone[aria-pressed="true"],
.chat-icone[aria-expanded="true"] {
    color: var(--acento);
    background: var(--acento-suave);
}

/* ---- Lista lateral ---- */
.chat-lista {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--superficie-2);
    border-right: 1px solid var(--linha);
}

.chat-lista-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 8px;
}

.chat-lista-topo h1 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.chat-lista-acoes {
    display: flex;
    gap: 2px;
}

.chat-notif-config {
    position: absolute;
    top: 52px;
    right: 12px;
    z-index: 20;
    display: grid;
    gap: 8px;
    width: 290px;
    padding: 14px;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 12px;
    box-shadow: var(--sombra-3);
}

.chat-notif-config[hidden] {
    display: none;
}

.chat-eu {
    position: relative;
    padding: 0 10px 8px;
}

.chat-eu-botao {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 8px;
    color: var(--texto);
    text-align: left;
    background: none;
    border: 0;
    border-radius: 10px;
}

.chat-eu-botao:hover {
    background: var(--superficie-3);
}

.chat-eu-texto {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.chat-eu-texto strong,
.chat-eu-texto small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-eu-texto small {
    color: var(--texto-3);
}

.chat-eu-menu {
    position: absolute;
    top: calc(100% - 4px);
    left: 10px;
    z-index: 20;
    width: 290px;
    padding: 8px;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 12px;
    box-shadow: var(--sombra-3);
}

.chat-eu-menu[hidden] {
    display: none;
}

.chat-eu-menu-titulo {
    margin: 4px 8px 6px;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--texto-3);
}

.chat-eu-menu > button {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 7px 8px 7px 30px;
    color: var(--texto);
    text-align: left;
    background: none;
    border: 0;
    border-radius: 8px;
}

.chat-eu-menu > button:hover {
    background: var(--superficie-3);
}

.chat-eu-menu > button .pres {
    top: 50%;
    left: 9px;
    right: auto;
    bottom: auto;
    transform: translateY(-50%);
}

.chat-eu-menu .form-label {
    padding: 0 8px;
    font-size: var(--t-xs);
    color: var(--texto-3);
}

.chat-eu-menu .d-flex {
    padding: 0 8px;
}

.chat-eu-foto {
    display: flex;
    gap: 8px;
    margin: 10px 0 2px;
    padding: 8px;
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
    border-top: 1px solid var(--linha);
}

.chat-busca {
    display: flex;
    gap: 8px;
    align-items: center;
    height: 36px;
    margin: 0 16px 10px;
    padding: 0 10px;
    color: var(--texto-3);
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 9px;
}

.chat-busca:focus-within {
    border-color: var(--acento);
    box-shadow: var(--foco);
}

.chat-busca input {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--texto);
    background: none;
    border: 0;
    outline: none;
}

.chat-abas {
    display: flex;
    gap: 4px;
    padding: 0 16px;
    border-bottom: 1px solid var(--linha);
}

.chat-abas button {
    position: relative;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 8px 4px 10px;
    margin-right: 12px;
    font-weight: 600;
    color: var(--texto-3);
    background: none;
    border: 0;
}

.chat-abas button.ativa {
    color: var(--texto);
}

.chat-abas button.ativa::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    content: "";
    background: var(--acento);
    border-radius: 3px 3px 0 0;
}

.chat-abas-num {
    min-width: 18px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 18px;
    color: #fff;
    text-align: center;
    background: var(--perigo);
    border-radius: 9px;
}

.chat-listas {
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px 8px 12px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.chat-itens {
    margin: 0;
    padding: 0;
    list-style: none;
}

.chat-item {
    display: flex;
    gap: 11px;
    align-items: center;
    width: 100%;
    padding: 9px 10px;
    color: var(--texto);
    text-align: left;
    background: none;
    border: 0;
    border-radius: 10px;
    transition: background-color var(--dur-1) var(--curva);
}

.chat-item:hover {
    background: var(--superficie-3);
}

.chat-item.ativo {
    background: var(--superficie);
    box-shadow: var(--sombra-1), inset 3px 0 0 var(--acento);
}

.chat-item .avatar {
    width: 40px;
    height: 40px;
}

.chat-item-meio {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.chat-item-l1,
.chat-item-l2 {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

.chat-item-nome {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-item-quando {
    flex: 0 0 auto;
    font-size: var(--t-xs);
    color: var(--texto-3);
}

.chat-item-previa {
    overflow: hidden;
    font-size: var(--t-sm);
    color: var(--texto-3);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-item.nao-lida .chat-item-nome,
.chat-item.nao-lida .chat-item-previa {
    font-weight: 750;
    color: var(--texto);
}

.chat-item.nao-lida .chat-item-quando {
    font-weight: 700;
    color: var(--acento);
}

.chat-item-badge {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background: var(--perigo);
    border-radius: 10px;
    animation: badge-pula 700ms var(--curva);
}

.chat-grupo-titulo {
    margin: 12px 10px 4px;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--texto-3);
}

.chat-lista-dica {
    margin: 16px 10px;
    font-size: var(--t-sm);
    color: var(--texto-3);
}

/* ---- Conversa ---- */
.chat-conversa {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.chat-boas-vindas {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px;
    text-align: center;
}

.chat-boas-vindas[hidden] {
    display: none;
}

.chat-boas-vindas-arte {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin-bottom: 10px;
    font-size: 38px;
    color: var(--acento);
    background: var(--acento-suave);
    border-radius: 24px;
    transform: rotate(-6deg);
}

.chat-boas-vindas h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 750;
}

.chat-boas-vindas p {
    max-width: 44ch;
    margin: 0 0 12px;
    color: var(--texto-2);
}

.chat-cab {
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 64px;
    padding: 10px 16px 10px 20px;
    background: var(--superficie);
    border-bottom: 1px solid var(--linha);
}

.chat-cab[hidden] {
    display: none;
}

.chat-cab .avatar {
    width: 40px;
    height: 40px;
}

.chat-cab-texto {
    min-width: 0;
}

.chat-cab-texto h2 {
    margin: 0;
    overflow: hidden;
    font-size: var(--t-lg);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-cab-texto p {
    margin: 0;
    overflow: hidden;
    font-size: var(--t-sm);
    color: var(--texto-3);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-voltar,
.chat-so-celular {
    display: none;
}

.chat-cab-abas {
    display: flex;
    gap: 4px;
    margin-left: 12px;
}

.chat-cab-abas[hidden] {
    display: none;
}

.chat-cab-abas button {
    position: relative;
    padding: 6px 10px;
    font-weight: 600;
    color: var(--texto-3);
    background: none;
    border: 0;
    border-radius: 7px;
}

.chat-cab-abas button:hover {
    color: var(--texto);
    background: var(--superficie-3);
}

.chat-cab-abas button.ativa {
    color: var(--texto);
}

.chat-cab-abas button.ativa::after {
    position: absolute;
    right: 10px;
    bottom: -13px;
    left: 10px;
    height: 3px;
    content: "";
    background: var(--acento);
    border-radius: 3px 3px 0 0;
}

.chat-cab-acoes {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

.chat-procura {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 20px;
    color: var(--texto-3);
    background: var(--superficie);
    border-bottom: 1px solid var(--linha);
}

.chat-procura[hidden] {
    display: none;
}

.chat-procura input {
    flex: 1 1 auto;
    color: var(--texto);
    background: none;
    border: 0;
    outline: none;
}

.chat-procura-num {
    font-size: var(--t-sm);
}

.chat-corpo {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.chat-corpo[hidden] {
    display: none;
}

.chat-mensagens {
    flex: 1 1 auto;
    min-height: 0;
    padding: 22px 24px 8px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

.chat-mensagens:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: -2px;
}

.chat-carregando {
    margin: 24px 0;
    color: var(--texto-3);
    text-align: center;
}

.chat-conversa-vazia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 12vh auto 0;
    max-width: 36ch;
    color: var(--texto-3);
    text-align: center;
}

.chat-conversa-vazia .bi {
    font-size: 34px;
    color: var(--acento);
}

.chat-anteriores {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0 auto 12px;
    padding: 6px 12px;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--texto-2);
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 999px;
}

.chat-dia {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 18px 0 10px;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--texto-3);
}

.chat-dia::before,
.chat-dia::after {
    flex: 1 1 auto;
    height: 1px;
    content: "";
    background: var(--linha);
}

.chat-msg {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    max-width: 100%;
    margin-top: 12px;
    padding: 0 0 0 0;
}

.chat-msg.seguida {
    margin-top: 3px;
}

.chat-msg.seguida > .avatar {
    visibility: hidden;
    height: 0;
}

.chat-msg.seguida .chat-msg-cab {
    display: none;
}

.chat-msg > .avatar {
    margin-top: 20px;
}

.chat-msg-espaco {
    flex: 1 1 auto;
    min-width: 15%;
}

.chat-msg-corpo {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: min(640px, 78%);
}

.chat-msg.minha .chat-msg-corpo {
    align-items: flex-end;
}

.chat-msg-cab {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin: 0 4px 3px;
    font-size: var(--t-xs);
}

.chat-msg-nome {
    font-weight: 650;
    color: var(--texto);
}

.chat-msg-hora {
    color: var(--texto-3);
}

.chat-msg-editada {
    font-style: italic;
    color: var(--texto-3);
}

.chat-balao {
    position: relative;
    max-width: 100%;
    padding: 8px 12px;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 4px 12px 12px 12px;
    box-shadow: var(--sombra-1);
    transition: box-shadow var(--dur-2) var(--curva), background-color var(--dur-2) var(--curva);
}

.chat-msg.seguida .chat-balao {
    border-radius: 12px;
}

.chat-msg.minha .chat-balao {
    background: var(--acento-suave);
    border-color: var(--acento-linha);
    border-radius: 12px 4px 12px 12px;
}

.chat-msg.minha.seguida .chat-balao {
    border-radius: 12px;
}

.chat-msg.aviso .chat-balao {
    border-left: 3px solid #e08a12;
}

.chat-balao.apagada {
    font-style: italic;
    color: var(--texto-3);
    background: transparent !important;
    border-style: dashed;
    box-shadow: none;
}

.chat-texto {
    margin: 0;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chat-texto.so-emoji {
    font-size: 2.2rem;
    line-height: 1.15;
}

.chat-balao > * + * {
    margin-top: 6px;
}

.chat-citacao {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 420px;
    padding: 5px 10px;
    font-size: var(--t-sm);
    color: var(--texto-2);
    text-align: left;
    background: var(--superficie-2);
    border: 0;
    border-left: 3px solid var(--acento);
    border-radius: 6px;
}

.chat-citacao strong {
    color: var(--texto);
}

.chat-citacao span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.chat-img {
    display: block;
    padding: 0;
    overflow: hidden;
    background: var(--superficie-3);
    border: 0;
    border-radius: 8px;
    cursor: zoom-in;
}

.chat-img img {
    display: block;
    max-width: min(320px, 100%);
    max-height: 300px;
    object-fit: cover;
}

.chat-arquivo {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 240px;
    max-width: 360px;
    padding: 10px 12px;
    color: var(--texto);
    text-decoration: none;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 10px;
}

.chat-arquivo:hover {
    color: var(--texto);
    border-color: var(--linha-forte);
}

.chat-arquivo-icone {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    font-size: 20px;
    color: #5b6578;
    background: var(--superficie-3);
    border-radius: 8px;
}

.chat-arquivo-icone.ext-pdf { color: #c62828; background: #fdecea; }
.chat-arquivo-icone.ext-doc,
.chat-arquivo-icone.ext-docx,
.chat-arquivo-icone.ext-odt,
.chat-arquivo-icone.ext-rtf { color: #2b579a; background: #e8eef9; }
.chat-arquivo-icone.ext-xls,
.chat-arquivo-icone.ext-xlsx,
.chat-arquivo-icone.ext-ods,
.chat-arquivo-icone.ext-csv { color: #217346; background: #e6f3ec; }
.chat-arquivo-icone.ext-ppt,
.chat-arquivo-icone.ext-pptx { color: #c4471d; background: #fcebe4; }

html[data-tema="escuro"] .chat-arquivo-icone[class*="ext-"] { background: var(--superficie-3); }

.chat-arquivo-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.chat-arquivo-info strong {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-arquivo-info small {
    color: var(--texto-3);
}

.chat-arquivo-baixar {
    color: var(--texto-3);
}

.chat-audio {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 260px;
    padding: 4px 2px;
}

.chat-audio audio {
    display: none;
}

.chat-audio-play {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 18px;
    color: var(--acento-texto);
    background: var(--acento);
    border: 0;
    border-radius: 50%;
}

.chat-audio.tocando .chat-audio-play {
    box-shadow: 0 0 0 4px var(--acento-suave);
}

.chat-audio-barra {
    position: relative;
    flex: 1 1 auto;
    height: 6px;
    overflow: hidden;
    cursor: pointer;
    background: var(--linha);
    border-radius: 3px;
}

.chat-audio-feito {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: var(--acento);
    border-radius: 3px;
}

.chat-audio-tempo {
    flex: 0 0 auto;
    min-width: 72px;
    font-size: var(--t-xs);
    color: var(--texto-3);
    font-variant-numeric: tabular-nums;
}

.chat-audio-vel {
    flex: 0 0 auto;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--texto-2);
    background: var(--superficie-3);
    border: 0;
    border-radius: 6px;
}

.chat-reacoes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 4px 4px 0;
}

.chat-reacao {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    height: 26px;
    padding: 0 8px;
    font-size: 14px;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 999px;
    animation: reacao-entra 320ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

.chat-reacao.minha {
    background: var(--acento-suave);
    border-color: var(--acento-linha);
}

.chat-reacao-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--texto-2);
}

@keyframes reacao-entra {
    from { transform: scale(0.5); }
    to { transform: none; }
}

.chat-acoes {
    position: absolute;
    top: -16px;
    left: 8px;
    z-index: 3;
    display: flex;
    gap: 1px;
    align-items: center;
    padding: 3px;
    visibility: hidden;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 10px;
    box-shadow: var(--sombra-2);
    transform: translateY(4px);
    transition: transform var(--dur-1) var(--curva), visibility 0s linear var(--dur-1);
}

.chat-msg.minha .chat-acoes {
    right: 8px;
    left: auto;
}

.chat-msg:hover .chat-acoes,
.chat-acoes:focus-within,
.chat-msg.acoes-abertas .chat-acoes {
    visibility: visible;
    transform: none;
    transition: transform var(--dur-1) var(--curva), visibility 0s;
}

.chat-acao-emoji,
.chat-acao {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 17px;
    color: var(--texto-2);
    background: none;
    border: 0;
    border-radius: 7px;
    transition: transform var(--dur-1) var(--curva);
}

.chat-acao-emoji:hover {
    background: var(--superficie-3);
    transform: scale(1.25) translateY(-2px);
}

.chat-acao {
    font-size: 15px;
}

.chat-acao:hover {
    color: var(--texto);
    background: var(--superficie-3);
}

.chat-acao.perigo:hover {
    color: var(--perigo);
    background: var(--perigo-suave);
}

.chat-acoes-div {
    width: 1px;
    height: 18px;
    margin: 0 3px;
    background: var(--linha);
}

.chat-visto {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    margin: 3px 4px 0;
    font-size: var(--t-xs);
    color: var(--texto-3);
}

.chat-visto:empty {
    display: none;
}

.chat-visto.lido {
    color: var(--acento);
}

.chat-msg.chega .chat-balao {
    animation: msg-chega 420ms cubic-bezier(0.2, 1.2, 0.4, 1);
}

@keyframes msg-chega {
    from { transform: translateY(14px) scale(0.96); }
    to { transform: none; }
}

.chat-msg.mudou .chat-balao,
.chat-msg.destaque .chat-balao {
    box-shadow: 0 0 0 3px var(--acento-linha);
}

.chat-msg.achada .chat-balao {
    box-shadow: 0 0 0 2px #e0a800;
}

.chat-msg.apagada-busca {
    opacity: 0.35;
}

.chat-msg.enviando .chat-balao {
    opacity: 0.75;
}

.chat-msg.falhou .chat-balao {
    border-color: var(--perigo);
}

.chat-enviando-rotulo {
    margin: 3px 4px 0;
    font-size: var(--t-xs);
    color: var(--texto-3);
}

.chat-msg.falhou .chat-enviando-rotulo {
    color: var(--perigo);
}

.chat-progresso {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 220px;
    font-size: var(--t-sm);
}

.chat-progresso-barra {
    position: relative;
    flex: 1 1 auto;
    height: 4px;
    overflow: hidden;
    background: var(--linha);
    border-radius: 2px;
}

.chat-progresso-barra span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: var(--acento);
    transition: width 120ms linear;
}

.chat-novas {
    position: absolute;
    bottom: 14px;
    left: 50%;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 6px 14px;
    font-size: var(--t-sm);
    font-weight: 650;
    color: var(--acento-texto);
    background: var(--acento);
    border: 0;
    border-radius: 999px;
    box-shadow: var(--sombra-3);
    transform: translateX(-50%);
    animation: notificacao-sobe 380ms cubic-bezier(0.2, 1.3, 0.35, 1);
}

@keyframes notificacao-sobe {
    from { transform: translate(-50%, 20px); }
    to { transform: translate(-50%, 0); }
}

.chat-soltar {
    position: absolute;
    inset: 10px;
    z-index: 5;
    display: grid;
    place-content: center;
    gap: 8px;
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--acento);
    text-align: center;
    pointer-events: none;
    background: color-mix(in srgb, var(--superficie) 88%, transparent);
    border: 2px dashed var(--acento);
    border-radius: 14px;
}

.chat-soltar[hidden] {
    display: none;
}

.chat-soltar .bi {
    font-size: 40px;
}

.chat-digitando {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 22px;
    margin: 0;
    padding: 0 28px;
    font-size: var(--t-xs);
    color: var(--texto-3);
}

.chat-pontos {
    display: inline-flex;
    gap: 3px;
}

.chat-pontos i {
    width: 6px;
    height: 6px;
    background: var(--texto-3);
    border-radius: 50%;
    animation: pontos 1.2s infinite ease-in-out;
}

.chat-pontos i:nth-child(2) { animation-delay: 0.15s; }
.chat-pontos i:nth-child(3) { animation-delay: 0.3s; }

@keyframes pontos {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-5px); }
}

/* ---- Compositor ---- */
.chat-compositor {
    position: relative;
    margin: 0 20px 16px;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 12px;
    box-shadow: var(--sombra-1);
    transition: border-color var(--dur-1) var(--curva), box-shadow var(--dur-1) var(--curva);
}

.chat-compositor[hidden] {
    display: none;
}

.chat-compositor:focus-within {
    border-color: var(--acento-linha);
    box-shadow: var(--sombra-2);
}

.chat-compositor:focus-within::before {
    position: absolute;
    right: 12px;
    bottom: -1px;
    left: 12px;
    height: 2px;
    content: "";
    background: var(--acento);
    border-radius: 2px;
}

.chat-contexto {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 8px 8px 0;
    padding: 6px 6px 6px 10px;
    background: var(--superficie-2);
    border-left: 3px solid var(--acento);
    border-radius: 8px;
}

.chat-contexto[hidden] {
    display: none;
}

.chat-contexto > div {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    font-size: var(--t-sm);
}

.chat-contexto span {
    overflow: hidden;
    color: var(--texto-3);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-contexto > .bi {
    color: var(--acento);
}

.chat-anexo {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 8px 8px 0;
    padding: 8px;
    background: var(--superficie-2);
    border-radius: 10px;
    animation: msg-chega 320ms var(--curva);
}

.chat-anexo[hidden] {
    display: none;
}

.chat-anexo-miniatura {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
}

.chat-anexo-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.chat-anexo-info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-anexo-info small {
    color: var(--texto-3);
}

.chat-anexo .chat-audio {
    flex: 1 1 260px;
}

.chat-gravando {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 10px 4px;
}

.chat-gravando[hidden] {
    display: none;
}

.chat-compositor.gravando .chat-escrever,
.chat-compositor.gravando .chat-ferramentas {
    display: none;
}

.chat-gravando-ponto {
    width: 10px;
    height: 10px;
    background: #e53935;
    border-radius: 50%;
    animation: gravando 1s infinite;
}

@keyframes gravando {
    50% { transform: scale(0.6); box-shadow: 0 0 0 6px rgb(229 57 53 / 0.2); }
}

.chat-gravando-tempo {
    min-width: 40px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.chat-onda {
    display: flex;
    flex: 1 1 auto;
    gap: 3px;
    align-items: center;
    height: 28px;
}

.chat-onda i {
    flex: 1 1 0;
    height: 100%;
    background: var(--acento);
    border-radius: 2px;
    transform: scaleY(0.12);
    transition: transform 80ms linear;
}

#chatGravacaoParar {
    color: #fff;
    background: #e53935;
    border-radius: 50%;
}

.chat-escrever textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    max-height: 180px;
    padding: 12px 14px 4px;
    color: var(--texto);
    resize: none;
    background: transparent;
    border: 0;
    outline: none;
}

.chat-ferramentas {
    display: flex;
    gap: 2px;
    align-items: center;
    padding: 4px 6px 6px;
}

.chat-ferramentas .chat-icone[hidden] {
    display: none;
}

.chat-dica {
    margin-left: 8px;
    font-size: 11px;
    color: var(--texto-3);
}

.chat-enviar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-left: auto;
    padding: 0;
    font-size: 16px;
    color: var(--acento-texto);
    background: var(--acento);
    border: 0;
    border-radius: 10px;
    transition: transform var(--dur-1) var(--curva);
}

.chat-enviar:hover {
    background: var(--acento-forte);
    transform: translateY(-1px);
}

.chat-enviar:active {
    transform: scale(0.92);
}

.chat-emojis {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 30;
    animation: msg-chega 260ms var(--curva);
}

.chat-so-leitura {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin: 0 20px 16px;
    padding: 12px;
    font-size: var(--t-sm);
    color: var(--texto-3);
    background: var(--superficie-2);
    border-radius: 10px;
}

.chat-so-leitura[hidden] {
    display: none;
}

/* ---- Arquivos da conversa ---- */
.chat-arquivos {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 24px;
    overflow-y: auto;
}

.chat-arquivos[hidden] {
    display: none;
}

.chat-arquivos-lista {
    display: grid;
    gap: 6px;
    max-width: 860px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chat-arquivos-lista li {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 10px;
}

.chat-arquivos-mini {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 8px;
}

.chat-arquivos-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.chat-arquivos-info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-arquivos-info small {
    color: var(--texto-3);
}

/* ---- Detalhes ---- */
.chat-detalhes {
    min-height: 0;
    padding: 14px 16px;
    overflow-y: auto;
    background: var(--superficie);
    border-left: 1px solid var(--linha);
    animation: detalhes-entra 260ms var(--curva);
}

.chat-detalhes[hidden] {
    display: none;
}

@keyframes detalhes-entra {
    from { transform: translateX(24px); }
    to { transform: none; }
}

.chat-det-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.chat-det-topo h3 {
    margin: 0;
    font-size: var(--t-md);
    font-weight: 700;
}

.chat-det-pessoa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
    text-align: center;
}

.chat-det-pessoa .chat-avatar-pres {
    margin-bottom: 6px;
}

.chat-det-pessoa .pres {
    width: 18px;
    height: 18px;
    border-width: 3px;
}

.chat-det-pessoa strong {
    font-size: var(--t-lg);
}

.chat-det-pres,
.chat-det-recado {
    font-size: var(--t-sm);
    color: var(--texto-3);
}

.chat-det-dados {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 12px;
    margin: 0;
    font-size: var(--t-sm);
}

.chat-det-dados dt {
    font-weight: 500;
    color: var(--texto-3);
}

.chat-det-dados dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.chat-det-grupo {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
}

.chat-det-secao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0 4px;
}

.chat-det-secao h4 {
    margin: 0;
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--texto-2);
}

.chat-det-membro {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 6px 4px;
}

.chat-det-texto {
    font-size: var(--t-sm);
    color: var(--texto-2);
}

/* ---- Diálogos ---- */
.chat-dialogo-grupo {
    width: min(460px, calc(100vw - 24px));
}

.chat-dialogo-grupo h2 {
    margin: 0 0 14px;
    font-size: var(--t-lg);
    font-weight: 700;
}

.chat-escolha {
    max-height: 280px;
    margin: 0 0 8px;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--linha);
    border-radius: 10px;
}

.chat-escolha-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 8px;
}

.chat-escolha-item:hover {
    background: var(--superficie-2);
}

.chat-escolha-item .form-check-input {
    margin: 0;
}

.chat-dialogo-imagem {
    width: auto;
    max-width: min(1100px, calc(100vw - 24px));
    padding: 0;
    background: #0b1222;
}

.chat-dialogo-imagem-topo {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 8px 8px 16px;
    color: #e6ecf7;
}

.chat-dialogo-imagem-topo span {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-dialogo-imagem-topo .chat-icone {
    color: #e6ecf7;
}

.chat-dialogo-imagem img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 120px);
    margin: 0 auto;
    object-fit: contain;
}

/* ---- Telas menores ---- */
@media (max-width: 1199px) {
    .chat.com-detalhes {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .chat-detalhes {
        position: fixed;
        top: var(--altura-topo);
        right: 0;
        bottom: 0;
        z-index: 45;
        width: min(340px, 100vw);
        box-shadow: var(--sombra-3);
    }

    .chat {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .chat-dica {
        display: none;
    }
}

@media (max-width: 767px) {
    .chat,
    .chat.com-detalhes {
        grid-template-columns: minmax(0, 1fr);
        height: calc(100dvh - var(--altura-topo) - 62px);
    }

    .chat.com-conversa .chat-lista {
        display: none;
    }

    .chat:not(.com-conversa) .chat-conversa {
        display: none;
    }

    .chat-voltar {
        display: inline-grid;
    }

    .chat-cab {
        padding: 8px 8px 8px 4px;
        gap: 8px;
    }

    .chat-cab-abas {
        margin-left: 0;
    }

    .chat-cab-abas button.ativa::after {
        bottom: -9px;
    }

    .chat-cab-texto p {
        display: none;
    }

    .chat-mensagens {
        padding: 12px 12px 8px;
    }

    .chat-msg-corpo {
        max-width: 86%;
    }

    .chat-msg > .avatar {
        display: none;
    }

    .chat-compositor {
        margin: 0 8px 8px;
    }

    .chat-acoes {
        top: auto;
        bottom: calc(100% + 2px);
        max-width: calc(100vw - 32px);
        overflow-x: auto;
    }

    .chat-msg:hover .chat-acoes {
        visibility: hidden;
    }

    .chat-msg.acoes-abertas .chat-acoes {
        visibility: visible;
    }

    .chat-cab-abas,
    #chatBuscarBtn {
        display: none !important;
    }

    .chat-so-celular {
        display: inline-grid !important;
    }

    .chat-arquivo,
    .chat-audio {
        min-width: 0;
    }

    .chat-detalhes {
        top: var(--altura-topo);
        bottom: 62px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .notificacao,
    .notificacao.saindo,
    .notificacao-avatar .avatar,
    .chat-msg.chega .chat-balao,
    .chat-reacao,
    .chat-item-badge,
    .badge-contador.pulsar,
    .chat-pontos i,
    .chat-gravando-ponto {
        animation: none;
    }

    .notificacao-tempo {
        animation-duration: 8s;
    }
}

.chat-dialogo-grupo form {
    padding: 20px;
}

/* No mensageiro a lista de conversas faz o papel do painel da área: fica só o trilho */
@media (min-width: 992px) {
    html:has(.chat),
    html:has(.at) {
        --largura-painel: 0px;
    }

    html:has(.chat) .sidebar .painel,
    html:has(.at) .sidebar .painel {
        display: none;
    }
}

/* ---------- Atendimento WhatsApp: caixa de escrita (whatsapp-compor.js) ---------- */
.at-compositor {
    margin: 0 16px 14px;
}

.at-compor-abas {
    display: flex;
    gap: 2px;
    padding: 6px 8px 0;
}

.at-compor-abas button {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 5px 10px;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--texto-3);
    background: none;
    border: 0;
    border-radius: 8px;
    transition: background var(--dur-1) var(--curva), color var(--dur-1) var(--curva);
}

.at-compor-abas button:hover {
    background: var(--superficie-2);
}

.at-compor-abas button.ativa {
    color: var(--acento);
    background: var(--acento-suave, var(--superficie-2));
}

.at-compositor.nota .at-compor-abas button.ativa {
    color: var(--texto);
    background: var(--atencao-suave);
}

.at-compositor.nota {
    background: var(--atencao-suave);
    border-color: var(--atencao);
}

.at-enviar.com-texto {
    display: inline-flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 36px;
    white-space: nowrap;
    width: auto;
    padding: 0 14px;
    font-size: var(--t-sm);
    font-weight: 600;
}

.at-enviar:disabled,
.at-compositor textarea:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.at-nota-dica {
    margin: 4px 12px 0;
    font-size: var(--t-xs);
    color: var(--texto-2);
}

.at-janela {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 8px 8px 0;
    padding: 8px 10px;
    font-size: var(--t-sm);
    color: var(--texto);
    background: var(--atencao-suave);
    border-radius: 8px;
}

.at-janela > .bi {
    color: var(--atencao);
}

.at-janela > span {
    flex: 1 1 220px;
}

.at-compositor .chat-icone.desabilitado,
.at-compositor .chat-icone:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    pointer-events: none;
}

.at-anexo-audio {
    flex: 1 1 220px;
    min-width: 0;
    height: 36px;
}

.at-compositor.gravando .at-compor-abas {
    display: none;
}

#atGravacaoParar {
    color: #fff;
    background: #e53935;
    border-radius: 50%;
}

/* Respostas prontas ("/" no começo do texto) */
.at-respostas {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 30;
    max-height: 260px;
    overflow-y: auto;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 12px;
    box-shadow: var(--sombra-3);
}

.at-resposta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: flex-start;
    width: 100%;
    padding: 8px 12px;
    color: var(--texto);
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--linha);
}

.at-resposta:last-child {
    border-bottom: 0;
}

.at-resposta strong {
    font-size: var(--t-sm);
    color: var(--acento);
}

.at-resposta span {
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--t-sm);
    color: var(--texto-2);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.at-resposta:hover,
.at-resposta.ativa {
    background: var(--superficie-2);
}

.at-respostas-vazio {
    margin: 0;
    padding: 12px;
    font-size: var(--t-sm);
    color: var(--texto-3);
}

/* Ações na bolha: aparecem ao passar o mouse ou ao focar (e sempre no toque) */
.at-mensagens .chat-msg-corpo {
    position: relative;
}

.at-acoes {
    position: absolute;
    top: -14px;
    right: 8px;
    z-index: 2;
    display: flex;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 999px;
    box-shadow: var(--sombra-1);
    opacity: 0;
    transition: opacity var(--dur-1) var(--curva);
}

.at-msg:hover .at-acoes,
.at-acoes:focus-within,
.at-acoes:has([aria-expanded="true"]) {
    opacity: 1;
}

@media (hover: none) {
    .at-acoes {
        opacity: 1;
    }
}

.at.janela-fechada .at-acoes {
    display: none;
}

.at-acao {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 14px;
    color: var(--texto-2);
    background: none;
    border: 0;
    border-radius: 50%;
}

.at-acao:hover,
.at-acao:focus-visible {
    color: var(--acento);
    background: var(--superficie-2);
}

.at-reagir {
    position: fixed;
    z-index: 80;
    max-width: calc(100vw - 16px);
    padding: 6px;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 14px;
    box-shadow: var(--sombra-3);
    animation: msg-chega 200ms var(--curva);
}

.at-reagir[hidden],
.at-reagir-mais[hidden] {
    display: none;
}

.at-reagir-rapidas {
    display: flex;
    gap: 2px;
}

.at-reagir-emoji {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 22px;
    color: var(--texto-2);
    background: none;
    border: 0;
    border-radius: 50%;
    transition: transform var(--dur-1) var(--curva), background var(--dur-1) var(--curva);
}

.at-reagir-emoji:hover,
.at-reagir-emoji:focus-visible {
    background: var(--superficie-2);
    transform: scale(1.15);
}

.at-reagir-emoji.atual {
    background: var(--acento-suave, var(--superficie-2));
    box-shadow: inset 0 0 0 2px var(--acento);
}

.at-reagir-abrir {
    font-size: 16px;
}

.at-reagir-mais {
    margin-top: 6px;
}

/* Modelo aprovado (diálogo) */
.at-dialogo-modelo {
    width: min(520px, calc(100vw - 32px));
}

.at-modelo-previa {
    margin: 10px 0;
    padding: 10px 12px;
    font-size: var(--t-sm);
    white-space: pre-wrap;
    background: var(--superficie-2);
    border-left: 3px solid var(--acento);
    border-radius: 8px;
}

.at-modelo-previa:empty {
    display: none;
}

.at-modelo-campos {
    display: grid;
    gap: 8px;
}

.at-modelo-erro {
    margin: 8px 0 0;
    font-size: var(--t-sm);
    color: var(--perigo);
}

.at-modelo-erro[hidden] {
    display: none;
}

@media (max-width: 760px) {
    .at-compositor {
        margin: 0 8px 8px;
    }

    .at-compositor .chat-dica {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .at-reagir,
    .at-acoes,
    .at-reagir-emoji,
    .at-compor-abas button {
        transition: none;
        animation: none;
    }
}

/* ---------- Atendimento WhatsApp: configurações (whatsapp_atendimento.jsp) ---------- */
.wa-dias {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-1) var(--e-2);
}

.wa-lista {
    padding: 0;
    margin: 0 0 var(--e-4);
    list-style: none;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
}

.wa-lista > li {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-4);
    align-items: center;
    justify-content: space-between;
    padding: var(--e-3) var(--e-4);
}

.wa-lista > li + li {
    border-top: 1px solid var(--linha);
}

.wa-lista-texto {
    display: flex;
    flex: 1 1 280px;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.wa-lista-acoes {
    display: flex;
    gap: var(--e-2);
}

.wa-form {
    padding-top: var(--e-4);
    border-top: 1px solid var(--linha);
}

.wa-etiqueta {
    display: inline-block;
    padding: 2px 10px;
    font-size: var(--t-sm);
    font-weight: 600;
    color: #fff;
    background: var(--texto-3);
    border-radius: 999px;
}

.wa-cores {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
}

.wa-cor {
    position: relative;
}

.wa-cor input {
    position: absolute;
    opacity: 0;
}

.wa-cor label {
    display: block;
    width: 28px;
    height: 28px;
    cursor: pointer;
    background: var(--texto-3);
    border: 2px solid transparent;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--linha-forte);
}

.wa-cor input:checked + label {
    border-color: var(--superficie);
    box-shadow: 0 0 0 3px var(--texto);
}

.wa-cor input:focus-visible + label {
    outline: 2px solid var(--acento);
    outline-offset: 3px;
}

/* Painel do contato, seleção de mensagens e transferência (whatsapp-contato.js) */
.at-ct-cab {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 18px 18px 8px;
}

.at-ct-avatar {
    flex: none;
    width: 52px;
    height: 52px;
    font-size: 18px;
}

.at-ct-nomes {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.at-ct-nome {
    overflow-wrap: anywhere;
    font-size: var(--t-lg);
}

.at-ct-perfil,
.at-ct-numero {
    font-size: var(--t-sm);
    color: var(--texto-3);
    overflow-wrap: anywhere;
}

.at-ct-seguir {
    margin: 4px 18px 8px;
}

.at-sec {
    padding: 14px 18px 16px;
    border-top: 1px solid var(--linha);
}

.at-sec-titulo {
    margin: 0 0 10px;
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--texto-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.at-ct-dica,
.at-ct-ou {
    margin: 0 0 8px;
    font-size: var(--t-sm);
    color: var(--texto-3);
}

.at-ct-vinculo {
    margin: 0 0 10px;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--texto-2);
}

.at-ct-vinculo .bi {
    color: var(--acento);
}

.at-ct-aviso {
    display: flex;
    gap: 8px;
    padding: 9px 11px;
    margin-bottom: 8px;
    font-size: var(--t-sm);
    background: var(--superficie-3);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
}

.at-ct-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.at-ct-campo .form-label {
    margin-bottom: 3px;
    font-size: var(--t-sm);
}

.at-ct-grupo {
    border: 1px solid var(--linha);
    border-radius: var(--raio);
}

.at-ct-grupo > summary {
    padding: 7px 11px;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--texto-2);
    cursor: pointer;
}

.at-ct-grupo-corpo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 11px 11px;
}

.at-ct-salvar {
    align-self: flex-start;
}

.at-ct-abrir {
    font-size: var(--t-sm);
}

.at-ct-etqs,
.at-ct-auto {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.at-ct-auto {
    margin-top: 10px;
}

.at-ct-auto-rotulo {
    font-size: var(--t-xs);
    color: var(--texto-3);
}

.at-etq-botao {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    max-width: 100%;
    padding: 2px 9px;
    font-family: inherit;
    line-height: 18px;
    color: var(--texto-2);
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--linha-forte);
}

.at-etq-botao.on {
    color: #fff;
    border-color: transparent;
}

.at-etq-botao:disabled {
    opacity: 0.6;
}

.at-etq-botao:focus-visible,
.at-sel:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

.at-ct-dem,
.at-ct-hist,
.at-cand-lista,
.at-transf-lista {
    padding: 0;
    margin: 0;
    list-style: none;
}

.at-ct-dem li {
    display: flex;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;
    padding: 5px 0;
    font-size: var(--t-md);
}

.at-ct-dem-status {
    flex: none;
    padding: 0 8px;
    font-size: var(--t-xs);
    color: var(--texto-2);
    background: var(--superficie-3);
    border-radius: 999px;
}

.at-ct-nova {
    margin-top: 10px;
}

.at-ct-hist li {
    display: flex;
    gap: 9px;
    padding: 6px 0;
    font-size: var(--t-sm);
    color: var(--texto-2);
}

.at-ct-hist .bi {
    flex: none;
    margin-top: 2px;
    color: var(--texto-3);
}

.at-ct-hist-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

.at-ct-hist time {
    font-size: var(--t-xs);
    color: var(--texto-3);
}

/* Candidatos (painel e diálogo) */
.at-cand-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0;
}

.at-cand {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
}

.at-cand-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

.at-cand-txt span {
    font-size: var(--t-sm);
    color: var(--texto-3);
}

.at-cand .btn {
    flex: none;
}

/* Transferir */
.at-transf-lista {
    max-height: 220px;
    margin: 6px 0 12px;
    overflow-y: auto;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
}

.at-transf-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 7px 10px;
    margin: 0;
    cursor: pointer;
}

.at-transf-item:hover,
.at-transf-item:has(input:checked) {
    background: var(--acento-suave);
}

.at-transf-item .avatar {
    flex: none;
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.at-transf-vazio {
    padding: 12px;
    font-size: var(--t-sm);
    color: var(--texto-3);
}

/* Seleção de mensagens para a demanda */
.at-selecao {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 16px;
    background: var(--superficie);
    border-top: 1px solid var(--linha);
    box-shadow: 0 -4px 12px rgb(14 24 40 / 0.08);
}

.at-selecao-n {
    flex: 1 1 auto;
    font-weight: 600;
}

.at-chat.com-selecao #waCompor {
    display: none;
}

.at-mensagens.selecionando .at-msg {
    position: relative;
    padding-left: 40px;
    cursor: pointer;
}

.at-mensagens.selecionando .at-msg.selecionada .chat-balao {
    outline: 2px solid var(--acento);
}

.at-mensagens.selecionando .at-acoes {
    display: none;
}

.at-sel {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 18px;
    height: 18px;
    margin: -9px 0 0;
    cursor: pointer;
    accent-color: var(--acento);
}

@media (max-width: 991px) {
    .at-painel {
        flex: 1 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .at-etq-botao {
        transition: none;
    }
}

/* Telas sem painel da área (header.jsp não o renderiza): o menu é só o trilho.
   --largura-menu é recalculada aqui porque a do :root já foi resolvida com o painel. */
.app.sem-painel {
    --largura-painel: 0px;
    --largura-menu: var(--largura-trilho);
}

/* ==========================================================================
   Formulários de cliente e de tarefa (organização em grade)
   ========================================================================== */

/* Cliente: formulário largo acima da lista. Identificação e Contato lado a lado; Endereço e
   Observações ocupam a largura toda. */
.form-cliente {
    margin-bottom: 0;
}

.form-cliente-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-6);
}

.form-cliente-grade > .grupo-campos {
    margin: 0;
}

@media (min-width: 992px) {
    .form-cliente-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--e-8);
    }

    .form-cliente-largo {
        grid-column: 1 / -1;
    }
}

.form-cliente .btn-group > .btn {
    flex: 1 1 0;
    white-space: nowrap;
}

.cep-aviso:empty {
    display: none;
}

.cep-aviso-ok {
    color: var(--ok);
}

.cep-aviso-erro {
    color: var(--perigo);
}

input[data-cep][aria-busy="true"] {
    background-image: linear-gradient(90deg, transparent, var(--acento-suave), transparent);
    background-size: 200% 100%;
    animation: cep-buscando 1s linear infinite;
}

@keyframes cep-buscando {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

/* Tarefa: conteúdo à esquerda (título, descrição, cliente) e controle à direita (responsável,
   etapa, prazos e agenda). Os botões ficam no topo da página (form="formTarefa") e repetidos no
   fim da coluna da direita. Anexos ficam embaixo do conteúdo. */
.form-tarefa {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-5);
    align-items: start;
    max-width: 1440px;
}

.form-tarefa-form {
    display: contents;
}

.form-tarefa-principal {
    padding: var(--e-6);
}

.form-tarefa-titulo {
    font-size: var(--t-xl);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.form-tarefa-origem {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin: 0 0 var(--e-4);
    padding: var(--e-2) var(--e-3);
    font-size: var(--t-sm);
    color: var(--texto-2);
    background: var(--superficie-2);
    border-radius: var(--raio);
}

.form-tarefa-lateral .grupo-campos {
    margin-bottom: var(--e-5);
}

.form-tarefa-lateral .compromisso-horas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-tarefa-lateral .compromisso-data {
    grid-column: 1 / -1;
}

.form-tarefa-acoes {
    margin-top: var(--e-5);
    padding-top: var(--e-4);
}

.form-tarefa-acoes .btn-primary {
    min-width: 9rem;
}

.form-tarefa-acoes > p {
    flex-basis: 100%;
    margin-bottom: var(--e-1) !important;
}

.form-tarefa-excluir {
    flex-basis: 100%;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
}

@media (min-width: 1200px) {
    .form-tarefa {
        grid-template-columns: minmax(0, 1fr) 380px;
    }

    .form-tarefa-principal {
        grid-column: 1;
        grid-row: 1;
    }

    .form-tarefa-lateral {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .form-tarefa-anexos {
        grid-column: 1;
        grid-row: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    input[data-cep][aria-busy="true"] {
        animation: none;
    }
}

/* ==========================================================================
   Cobranças Asaas
   ========================================================================== */
.asaas-conectado {
    display: flex;
    gap: var(--e-3);
    align-items: flex-start;
}

.asaas-conectado > .bi {
    font-size: 22px;
    color: var(--ok);
}

.asaas-passos {
    margin: 0 0 var(--e-4);
    padding-left: var(--e-5);
    color: var(--texto-2);
}

.asaas-passos li + li {
    margin-top: var(--e-1);
}

.asaas-estado {
    display: flex;
    gap: var(--e-2);
    align-items: center;
    margin: 0 0 var(--e-4);
    color: var(--texto-2);
}

.asaas-estado.ok {
    color: var(--ok);
}

.aviso-inline {
    display: flex;
    gap: var(--e-2);
    padding: var(--e-2) var(--e-3);
    font-size: var(--t-sm);
    color: var(--texto-2);
    background: var(--superficie-2);
    border-radius: var(--raio);
}

.asaas-totais {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-3);
}

.asaas-total {
    display: flex;
    flex-direction: column;
    gap: var(--e-1);
    padding: var(--e-4) var(--e-5);
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-left: 4px solid var(--info);
    border-radius: var(--raio-lg);
}

.asaas-total span {
    font-size: var(--t-sm);
    color: var(--texto-2);
}

.asaas-total strong {
    font-size: var(--t-xl);
    font-variant-numeric: tabular-nums;
    color: var(--tinta-900);
}

.asaas-total.vencido {
    border-left-color: var(--perigo);
}

.asaas-total.recebido {
    border-left-color: var(--ok);
}

.asaas-filtros {
    display: grid;
    grid-template-columns: 200px 160px 160px minmax(180px, 1fr) auto;
    gap: var(--e-3);
    align-items: end;
    margin-bottom: var(--e-4);
}

.asaas-status {
    display: inline-flex;
    padding: 2px var(--e-2);
    font-size: var(--t-sm);
    font-weight: 600;
    white-space: nowrap;
    border-radius: 999px;
    color: var(--info);
    background: var(--info-suave);
}

.asaas-status.st-VENCIDA,
.asaas-status.st-ESTORNADA {
    color: var(--perigo);
    background: var(--perigo-suave);
}

.asaas-status.st-PAGA {
    color: var(--ok);
    background: var(--ok-suave);
}

.asaas-status.st-BAIXA_PENDENTE {
    color: var(--atencao);
    background: var(--atencao-suave);
}

.asaas-status.st-CANCELADA {
    color: var(--texto-3);
    background: var(--superficie-2);
}

.asaas-acoes {
    display: inline-flex;
    gap: var(--e-1);
    align-items: center;
}

.asaas-erro-baixa {
    margin-top: var(--e-1);
    font-size: var(--t-sm);
    color: var(--atencao);
}

.selo-link {
    margin-left: var(--e-1);
    text-decoration: none;
}

.dialogo-largo {
    width: min(720px, calc(100vw - 32px));
}

.asaas-sugestoes {
    position: absolute;
    z-index: 5;
    left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    margin: 2px 0 0;
    padding: var(--e-1) 0;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    background: var(--superficie);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    box-shadow: var(--sombra-2);
}

.asaas-sugestoes li {
    padding: var(--e-2) var(--e-3);
    cursor: pointer;
}

.asaas-sugestoes li[aria-selected="true"],
.asaas-sugestoes li:hover {
    background: var(--acento-suave);
}

.asaas-sugestoes small {
    color: var(--texto-3);
}

.asaas-sugestoes .vazio-li {
    color: var(--texto-3);
    cursor: default;
}

.asaas-mais summary {
    cursor: pointer;
    color: var(--texto-2);
}

.aviso-erro {
    color: var(--perigo);
    background: var(--perigo-suave);
}

@media (max-width: 991px) {
    .asaas-filtros {
        grid-template-columns: 1fr 1fr;
    }

    .asaas-filtro-busca,
    .asaas-filtro-botao {
        grid-column: 1 / -1;
    }

    .asaas-totais {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------- Certificado digital (A1) */
.cert-cartao {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    padding: var(--e-4);
    border: 1px solid var(--linha);
    border-left: 4px solid var(--ok);
    border-radius: var(--raio);
    background: var(--superficie);
}

.cert-cartao > .bi {
    font-size: 1.6rem;
    color: var(--ok);
    line-height: 1;
}

.cert-cartao.vencendo {
    border-left-color: var(--atencao);
}

.cert-cartao.vencendo > .bi,
.cert-cartao.vencendo .cert-validade {
    color: var(--atencao);
}

.cert-cartao.vencido {
    border-left-color: var(--perigo);
}

.cert-cartao.vencido > .bi,
.cert-cartao.vencido .cert-validade {
    color: var(--perigo);
}

.cert-validade {
    display: block;
    margin-top: var(--e-1);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ok);
}

/* ---------------------------------------------------------------- Assinaturas (lista) */
.as-totais {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-3);
}

.as-total {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio-lg);
    padding: var(--e-4) var(--e-5);
}

.as-total span {
    display: block;
    color: var(--texto-3);
    font-size: var(--t-sm);
}

.as-total strong {
    font-size: var(--t-2xl);
    font-weight: 700;
    color: var(--texto);
    font-variant-numeric: tabular-nums;
}

.as-total.aguardando strong {
    color: var(--atencao);
}

.as-total.assinado strong {
    color: var(--ok);
}

.as-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--e-3);
    margin-bottom: var(--e-4);
}

.as-filtro-busca {
    flex: 1;
    min-width: 220px;
}

.as-doc-icone {
    color: var(--perigo);
}

.as-pessoas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.as-pessoa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 3px;
    border-radius: 999px;
    background: var(--coluna);
    font-size: var(--t-sm);
    white-space: nowrap;
}

.as-pessoa .ini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--tinta-700);
}

.as-pessoa .bi {
    font-size: 12px;
}

.as-pessoa.ok .ini {
    background: var(--ok);
}

.as-pessoa.abriu .ini {
    background: var(--info);
}

.as-pessoa.recusou .ini {
    background: var(--perigo);
}

.as-status {
    display: inline-flex;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--t-sm);
    font-weight: 600;
    white-space: nowrap;
    color: var(--texto-2);
    background: var(--superficie-2);
}

.as-status.st-AGUARDANDO,
.as-status.st-FALTA_CERTIFICADO {
    color: var(--atencao);
    background: var(--atencao-suave);
}

.as-status.st-ASSINADO {
    color: var(--ok);
    background: var(--ok-suave);
}

.as-status.st-RECUSADO,
.as-status.st-EXPIRADO {
    color: var(--perigo);
    background: var(--perigo-suave);
}

.as-status.st-ENVIANDO,
.as-status.st-CONCLUINDO {
    color: var(--info);
    background: var(--info-suave);
}

.as-progresso {
    display: block;
    width: 120px;
    height: 4px;
    margin-top: 6px;
    border: 0;
    border-radius: 2px;
    overflow: hidden;
    appearance: none;
    background: var(--linha);
}

.as-progresso::-webkit-progress-bar {
    background: var(--linha);
}

.as-progresso::-webkit-progress-value {
    background: var(--ok);
}

.as-progresso::-moz-progress-bar {
    background: var(--ok);
}

.as-erro {
    display: block;
    margin-top: 4px;
    color: var(--perigo);
}

.as-acoes {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--e-1);
}

.as-aviso-pendente {
    display: flex;
    align-items: center;
    gap: var(--e-3);
}

.as-detalhe-pessoas {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--e-4);
}

.as-detalhe-pessoas li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2) var(--e-3);
    padding: var(--e-3) 0;
    border-bottom: 1px solid var(--linha);
}

.as-detalhe-acoes {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--e-1);
    margin-left: auto;
}

.as-detalhe-rodape {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
}

@media (max-width: 720px) {
    .as-totais {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------- Assinaturas (novo envio) */
.as-c0 { --cor: var(--acento); }
.as-c1 { --cor: var(--info); }
.as-c2 { --cor: var(--ok); }
.as-c3 { --cor: var(--atencao); }
.as-c4 { --cor: #6d4fb3; }
.as-c5 { --cor: var(--tinta-700); }

.as-c0, .as-c1, .as-c2, .as-c3, .as-c4, .as-c5 {
    --cor-suave: color-mix(in srgb, var(--cor) 13%, transparent);
}

.as-passos {
    display: flex;
    gap: var(--e-2);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--e-5);
    counter-reset: passo;
}

.as-passos li {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-3) var(--e-4);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--superficie);
    color: var(--texto-3);
    font-weight: 600;
    font-size: var(--t-sm);
}

.as-passos li::before {
    counter-increment: passo;
    content: counter(passo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--coluna);
    color: var(--texto-2);
}

.as-passos li.feito {
    color: var(--texto-2);
}

.as-passos li.feito::before {
    content: "\2713";
    background: var(--ok-suave);
    color: var(--ok);
}

.as-passos li.atual {
    color: var(--texto);
    border-color: var(--acento);
    box-shadow: inset 0 -2px 0 var(--acento);
}

.as-passos li.atual::before {
    background: var(--acento);
    color: #fff;
}

.as-doc-escolha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--e-3);
    align-items: start;
}

.as-doc-op {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    padding: var(--e-4);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-lg);
    background: var(--superficie);
    color: var(--texto);
    text-decoration: none;
}

a.as-doc-op:hover {
    border-color: var(--acento);
}

.as-doc-op.sel {
    border-color: var(--acento);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent);
}

.as-doc-op > .bi {
    font-size: 24px;
    color: var(--acento);
}

.as-doc-op small {
    display: block;
    color: var(--texto-3);
}

.as-doc-op-corpo {
    flex: 1;
    min-width: 0;
}

.as-doc-resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-3);
}

.as-doc-resumo > .bi {
    font-size: 28px;
    color: var(--perigo);
}

.as-sugestoes {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: 100%;
    max-height: 260px;
    overflow: auto;
    margin: 4px 0 0;
    padding: 4px;
    list-style: none;
    background: var(--superficie);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    box-shadow: var(--sombra-2);
}

.as-sugestoes li {
    padding: var(--e-2) var(--e-3);
    border-radius: var(--raio-sm);
    cursor: pointer;
}

.as-sugestoes li small {
    display: block;
    color: var(--texto-3);
}

.as-sugestoes li:hover,
.as-sugestoes li:focus {
    background: var(--coluna);
    outline: none;
}

.as-sugestao-vazia {
    color: var(--texto-3);
    cursor: default;
}

.as-escolha-usuario {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--e-1);
    max-height: 360px;
    overflow: auto;
}

.as-linha-ass {
    display: grid;
    grid-template-columns: 28px 1.4fr 1.4fr 1fr 140px 32px;
    gap: var(--e-2);
    align-items: center;
    padding: var(--e-2) 0;
    border-bottom: 1px solid var(--linha);
}

.as-cor {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--cor, var(--tinta-300));
    justify-self: center;
}

.as-cert-opcao {
    padding: var(--e-3) var(--e-4);
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio);
}

.as-revisao {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--e-2) var(--e-4);
    margin-bottom: var(--e-4);
}

.as-revisao dt {
    color: var(--texto-3);
    font-weight: 600;
}

.as-revisao dd {
    margin: 0;
}

.as-pessoa .ini.as-c0,
.as-pessoa .ini.as-c1,
.as-pessoa .ini.as-c2,
.as-pessoa .ini.as-c3,
.as-pessoa .ini.as-c4,
.as-pessoa .ini.as-c5 {
    background: var(--cor);
}

/* Editor de campos */
.as-editor {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 190px;
    gap: var(--e-4);
    align-items: start;
}

.as-lado {
    position: sticky;
    top: 76px;
    padding: var(--e-4);
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio-lg);
}

.as-lado h3 {
    margin: 0 0 var(--e-2);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--texto-3);
}

.as-quem {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    width: 100%;
    margin-bottom: 6px;
    padding: var(--e-2) var(--e-3);
    text-align: left;
    background: none;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    color: var(--texto);
}

.as-quem .as-cor {
    flex: none;
}

.as-quem-nome {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.as-quem small {
    color: var(--texto-3);
    white-space: nowrap;
}

.as-quem.sel {
    border-color: var(--cor);
    background: var(--cor-suave);
}

.as-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.as-campo {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--e-2);
    font-size: var(--t-sm);
    text-align: left;
    color: var(--texto);
    background: var(--fundo);
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio);
}

.as-campo.sel {
    font-weight: 600;
    background: var(--superficie);
    border: 1px solid var(--tinta-700);
}

.as-folha-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-5);
    background: var(--coluna);
    border-radius: var(--raio-lg);
    min-height: 420px;
}

.as-pagina-barra {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    font-size: var(--t-sm);
    color: var(--texto-2);
}

.as-folha {
    position: relative;
    max-width: 100%;
    background: #fff;
    box-shadow: var(--sombra-2);
}

.as-folha canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.as-camada {
    position: absolute;
    inset: 0;
    cursor: crosshair;
}

.as-carregando {
    padding: var(--e-6);
    color: var(--texto-3);
}

.as-marca {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow: visible;
    font-size: 11px;
    font-weight: 600;
    color: var(--cor);
    background: var(--cor-suave);
    border: 2px solid var(--cor);
    border-radius: 4px;
    cursor: move;
    touch-action: none;
    user-select: none;
    white-space: nowrap;
}

.as-marca span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.as-marca.sel,
.as-marca:focus-visible {
    outline: 2px solid var(--tinta-900);
    outline-offset: 2px;
}

.as-marca .x {
    position: absolute;
    top: -10px;
    right: -10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 10px;
    color: var(--texto-2);
    background: var(--superficie);
    border: 1px solid var(--linha-forte);
    border-radius: 50%;
}

.as-paginas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e-3);
    max-height: 420px;
    overflow: auto;
}

.as-mini {
    width: 112px;
    padding: 4px;
    font-size: var(--t-xs);
    color: var(--texto-3);
    text-align: center;
    background: var(--superficie);
    border: 2px solid transparent;
    border-radius: var(--raio);
}

.as-mini.sel {
    border-color: var(--acento);
    color: var(--texto);
}

.as-mini-caixa {
    position: relative;
    margin-bottom: 4px;
    background: #fff;
    border: 1px solid var(--linha);
}

.as-mini-caixa canvas {
    display: block;
    width: 100%;
}

.as-mini-marcas {
    position: absolute;
    inset: 0;
}

.as-mini-marcas .pt {
    position: absolute;
    border-radius: 2px;
    background: var(--cor);
    opacity: 0.75;
}

.as-resumo-campos li {
    display: flex;
    justify-content: space-between;
    gap: var(--e-2);
    padding: 4px 0;
    font-size: var(--t-sm);
    border-bottom: 1px solid var(--linha);
}

.as-falta {
    color: var(--atencao);
}

@media (max-width: 1100px) {
    .as-editor {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .as-editor > .as-lado:last-child {
        grid-column: 1 / -1;
        position: static;
    }

    .as-paginas {
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
    }
}

@media (max-width: 760px) {
    .as-doc-escolha,
    .as-editor {
        grid-template-columns: 1fr;
    }

    .as-lado {
        position: static;
    }

    .as-linha-ass {
        grid-template-columns: 20px 1fr 1fr;
    }

    .as-linha-cab {
        display: none;
    }

    .as-passos {
        flex-direction: column;
    }
}