/* ============================================================
   SeMove.ai — tema "Tinta & Latão".
   Camada sobre o Bootstrap 5.3 (mapeia tokens próprios para as variáveis --bs-*).
   Uma tinta = um significado: tinta #16386b = ação e IA · latão #b4863b = dinheiro ·
   terracota #a33a32 = hóspede esperando gente · verde #2f6b4f = conectado/pago.
   Tipografia: Sora nos títulos e números, IBM Plex Sans na interface, IBM Plex Mono
   em código, telefone, horário e URL. Sidebar em tinta profunda nos dois temas.
   ============================================================ */

:root {
    /* Marca (azul-tinta) */
    --brand: #16386b;
    --brand-strong: #0f2850;
    --brand-soft: #e7ecf4;

    /* Acento (latão — dinheiro, cobrança, evento de sistema no chat. Nada além disso.) */
    --accent: #b4863b;
    --accent-soft: #f7efdf;

    /* Balões do chat (inbox) — o balão do agente assume a tinta da marca: dentro do painel,
       verde disputaria com "pago" e "conectado". */
    --chat-in-bg: #fffefb;   --chat-in-ink: var(--ink);     --chat-meta-in: #9a9488;
    --chat-out-bg: #e7ecf4;  --chat-out-ink: #14304f;       --chat-meta-out: #6f7f99;

    /* Nota de evento do sistema no chat (consulta de PMS, cobrança gerada) — latão */
    --chat-sys-bg: #faf3e6;  --chat-sys-ink: #8a6524;       --chat-sys-border: #eee0c4;

    /* Neutros quentes (claro) */
    --ivory: #f6f4f0;
    --surface: #fffefb;
    --surface-2: #f4f1eb;
    --ink: #10203a;
    --muted: #5f6b7e;
    --border: #e5e1d9;
    --border-strong: #d8d3c8;

    /* Semânticos */
    --success: #2f6b4f;  --success-soft: #e8f1ec;
    --warning: #8a6524;  --warning-soft: #f7efdf;
    --danger:  #a33a32;  --danger-soft:  #fbeeeb;
    /* "info" deixa de ser um matiz próprio: era mais uma cor competindo na tela. */
    --info:    #16386b;  --info-soft:    #e7ecf4;

    /* Mapa de ocupação (módulo hotel) */
    --occ-partial: #f7efdf;
    --occ-high: #f0e0c4;
    --occ-full: var(--danger-soft);

    /* Efeitos — fio no lugar de sombra; a sombra sobrou só para o que flutua de fato */
    --radius: 10px;
    --radius-sm: 6px;
    --shadow-sm: 0 1px 2px rgba(16, 32, 58, .04);
    --shadow: 0 12px 30px rgba(16, 32, 58, .10);

    /* Tipografia */
    --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-brand: 'Sora', var(--font-display);
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --brand-mark-accent: #d9ae63;   /* 3º chevron do símbolo — latão */

    /* Sidebar (tinta profunda, constante nos dois temas) */
    --sidebar-bg: #10203a;
    --sidebar-bg-2: #10203a;        /* igual ao topo: o gradiente sai, fica chapado */
    --sidebar-ink: #e8edf5;
    --sidebar-muted: #b8c4d6;
    --sidebar-hover: rgba(255, 255, 255, .06);
    --sidebar-active: rgba(255, 255, 255, .09);
    --sidebar-accent: #d9ae63;      /* marcador do item ativo — latão */

    /* → Bootstrap */
    --bs-body-bg: var(--ivory);
    --bs-body-color: var(--ink);
    --bs-emphasis-color: var(--ink);
    --bs-secondary-color: var(--muted);
    --bs-border-color: var(--border);
    --bs-primary: var(--brand);
    --bs-primary-rgb: 22, 56, 107;
    --bs-success: var(--success);
    --bs-danger: var(--danger);
    --bs-warning: var(--warning);
    --bs-info: var(--info);
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: 22, 56, 107;
    --bs-link-hover-color: var(--brand-strong);
    --bs-border-radius: var(--radius-sm);
    --bs-tertiary-bg: var(--surface-2);
}

[data-bs-theme="dark"] {
    --brand: #7fa6e8;
    --brand-strong: #a3c0f0;
    --brand-soft: #16233a;

    --accent: #d9ae63;
    --accent-soft: #2a2113;

    --chat-in-bg: #16233a;   --chat-in-ink: var(--ink);     --chat-meta-in: #8695ac;
    --chat-out-bg: #1d3559;  --chat-out-ink: #dce6f5;       --chat-meta-out: #93a8c8;

    --chat-sys-bg: #26200f;  --chat-sys-ink: #d9ae63;       --chat-sys-border: #3d3319;

    /* Papel quente vira tinta profunda */
    --ivory: #0a1220;
    --surface: #101b2e;
    --surface-2: #16233a;
    --ink: #e8edf5;
    --muted: #8695ac;
    --border: #1d2b42;
    --border-strong: #2a3b57;

    --success: #5cbb8c;  --success-soft: #14291f;
    --warning: #d9ae63;  --warning-soft: #2a2113;
    --danger:  #e88a80;  --danger-soft:  #2b1a18;
    --info:    #7fa6e8;  --info-soft:    #16233a;

    --occ-partial: #2a2113;
    --occ-high: #3a2c12;
    --occ-full: #2b1a18;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow: 0 14px 34px rgba(0, 0, 0, .45);

    /* No escuro a sidebar é o ponto mais fundo da tela; o fio à direita a separa do conteúdo */
    --sidebar-bg: #071020;
    --sidebar-bg-2: #071020;

    --bs-primary-rgb: 127, 166, 232;
    --bs-link-color-rgb: 127, 166, 232;
}

/* ===== Base ===== */
html, body {
    font-family: var(--font-body);
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: .95rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--ink);
}

h1 { font-size: 1.8rem; }
h5 { font-size: 1.08rem; }

a {
    color: var(--brand);
    text-underline-offset: .15em;
    text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent);
}
a:hover { color: var(--brand-strong); }

.text-muted { color: var(--muted) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }

/* ===== Botões ===== */
.btn {
    --bs-btn-border-radius: var(--radius-sm);
    --bs-btn-font-weight: 600;
    letter-spacing: .005em;
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-strong);
    --bs-btn-hover-border-color: var(--brand-strong);
    --bs-btn-active-bg: var(--brand-strong);
    --bs-btn-active-border-color: var(--brand-strong);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
    /* Sem brilho colorido: a camada "Tinta & Latão" no fim do arquivo zera a sombra do
       botão primário — o índigo que morava aqui não voltaria a fazer sentido. */
}

.btn-success {
    --bs-btn-bg: var(--success);
    --bs-btn-border-color: var(--success);
    --bs-btn-hover-bg: color-mix(in srgb, var(--success) 88%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--success) 88%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--success) 82%, #000);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--success);
    --bs-btn-disabled-border-color: var(--success);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: color-mix(in srgb, var(--brand) 45%, transparent);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand);
    --bs-btn-active-border-color: var(--brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.btn-outline-secondary {
    --bs-btn-color: var(--muted);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-bg: var(--surface-2);
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-active-bg: var(--surface-2);
    --bs-btn-active-color: var(--ink);
}

.btn-outline-success {
    --bs-btn-color: var(--success);
    --bs-btn-border-color: color-mix(in srgb, var(--success) 50%, transparent);
    --bs-btn-hover-bg: var(--success);
    --bs-btn-hover-border-color: var(--success);
    --bs-btn-active-bg: var(--success);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-border-color: color-mix(in srgb, var(--danger) 50%, transparent);
    --bs-btn-hover-bg: var(--danger);
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-bg: var(--danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.btn-outline-info {
    --bs-btn-color: var(--info);
    --bs-btn-border-color: color-mix(in srgb, var(--info) 50%, transparent);
    --bs-btn-hover-bg: var(--info);
    --bs-btn-hover-border-color: var(--info);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

/* ===== Foco acessível ===== */
/* O <FocusOnNavigate Selector="h1"> do Router move o foco para o título a cada navegação
   e, para isso, o Blazor injeta tabindex="-1" no <h1>. Em carga inteira de página (F5, URL
   direta, volta do login) não houve interação antes do foco por script, então o Chrome trata
   como :focus-visible e desenha o anel do sistema em volta do título — a "caixa" que aparecia
   em algumas telas e não em outras (navegando por link a caixa não vem, porque o clique de
   mouse já marcou a modalidade). O foco continua indo para o h1 (leitor de tela anuncia a
   página nova e o Tab recomeça do topo); só o anel some. Um h1 focável de verdade
   (tabindex="0") mantém o anel. */
h1[tabindex="-1"]:focus {
    outline: none;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.page-link:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
    outline: 0;
}

/* ===== Cards ===== */
.card {
    --bs-card-bg: var(--surface);
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: var(--radius);
    --bs-card-inner-border-radius: calc(var(--radius) - 1px);
    --bs-card-cap-bg: transparent;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.card-header {
    border-bottom-color: var(--border);
    font-weight: 600;
}

a.card {
    color: inherit;
}
a.card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--brand) 55%, var(--border));
}

.card-title {
    font-family: var(--font-display);
    font-weight: 700;
}

.border-success {
    border-color: color-mix(in srgb, var(--success) 45%, var(--border)) !important;
}
.border-danger {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border)) !important;
}

/* ===== Tabelas ===== */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--border);
    --bs-table-hover-bg: var(--brand-soft);
    --bs-table-hover-color: var(--ink);
}

.table > thead th {
    font-weight: 600;
    font-size: .73rem;
    text-transform: uppercase;
    letter-spacing: .045em;
    color: var(--muted);
    border-bottom: 1px solid var(--border-strong);
    padding-top: .55rem;
    padding-bottom: .55rem;
    white-space: nowrap;
}

.table > tbody > tr { border-color: var(--border); }
.table > :not(caption) > * > * { padding: .7rem .6rem; }

/* ===== Badges (pílula suave) ===== */
.badge {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: .01em;
    font-size: .72rem;
    padding: .42em .74em;
    border-radius: 999px;
}

.badge.text-bg-success   { background: var(--success-soft) !important; color: var(--success) !important; }
.badge.text-bg-warning   { background: var(--warning-soft) !important; color: var(--warning) !important; }
.badge.text-bg-danger    { background: var(--danger-soft) !important;  color: var(--danger) !important; }
.badge.text-bg-primary   { background: var(--brand-soft) !important;   color: var(--brand) !important; }
.badge.text-bg-info      { background: var(--info-soft) !important;    color: var(--info) !important; }
.badge.text-bg-secondary,
.badge.text-bg-light,
.badge.text-bg-dark      { background: var(--surface-2) !important;    color: var(--muted) !important; }

/* ===== Formulários ===== */
.form-control,
.form-select {
    background-color: var(--surface);
    border-color: var(--border-strong);
    color: var(--ink);
    border-radius: var(--radius-sm);
}
.form-control::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.form-control:disabled, .form-select:disabled { background-color: var(--surface-2); }

.form-label {
    font-weight: 600;
    font-size: .88rem;
    color: var(--ink);
    margin-bottom: .35rem;
}

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

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--success); }
.invalid { outline: 1px solid var(--danger); }
.validation-message { color: var(--danger); font-size: .85rem; }

/* ===== Alertas ===== */
.alert {
    border-radius: var(--radius);
    border: 1px solid transparent;
}
.alert-success { background: var(--success-soft); color: color-mix(in srgb, var(--success) 82%, #000); border-color: color-mix(in srgb, var(--success) 22%, transparent); }
.alert-danger  { background: var(--danger-soft);  color: color-mix(in srgb, var(--danger) 82%, #000);  border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.alert-warning { background: var(--warning-soft); color: color-mix(in srgb, var(--warning) 82%, #000); border-color: color-mix(in srgb, var(--warning) 22%, transparent); }
.alert-info    { background: var(--info-soft);    color: color-mix(in srgb, var(--info) 82%, #000);    border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.alert-secondary { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.alert .alert-heading { color: inherit; }
[data-bs-theme="dark"] .alert-success,
[data-bs-theme="dark"] .alert-danger,
[data-bs-theme="dark"] .alert-warning,
[data-bs-theme="dark"] .alert-info { color: var(--ink); }

/* ===== List group ===== */
.list-group {
    --bs-list-group-bg: var(--surface);
    --bs-list-group-color: var(--ink);
    --bs-list-group-border-color: var(--border);
    --bs-list-group-action-hover-bg: var(--brand-soft);
    --bs-list-group-action-hover-color: var(--ink);
    --bs-list-group-active-bg: var(--brand);
    --bs-list-group-active-border-color: var(--brand);
    border-radius: var(--radius);
}
.list-group-item { border-radius: 0; }

/* ===== Código inline ===== */
code {
    background: var(--surface-2);
    color: var(--brand);
    padding: .12em .4em;
    border-radius: 6px;
    font-size: .86em;
}
pre code { background: none; padding: 0; }

/* ===== Navegação em curso =====
   Entre o clique e a página nova existe um ida-e-volta ao servidor (Blazor Server). Estas duas
   marcas dizem "ouvi o clique, a próxima está vindo" — sem elas a tela ficava imóvel e a página
   anterior parecia ter sido carregada de novo. Ver o script em App.razor. */

/* Começa depois da sidebar: sobre a tinta profunda dela o azul de ação sumiria. */
#nav-progresso {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    width: 0;
    z-index: 2100;
    background: var(--brand);
    opacity: 0;
    pointer-events: none;
}

#nav-progresso.ativa {
    opacity: 1;
    width: 72%;
    /* Sobe rápido e desacelera: nunca chega ao fim sozinha, porque não há progresso real a medir. */
    transition: width 2.4s cubic-bezier(.12, .78, .22, 1);
}

#nav-progresso.cheia {
    width: 100%;
    opacity: 0;
    transition: width .14s linear, opacity .2s ease .1s;
}

@media (min-width: 641px) {
    #nav-progresso { left: 240px; }   /* largura da sidebar no MainLayout */
}

/* O item clicado acende na hora, antes de o servidor responder. A regra vem depois da do
   .nav-link ativo para valer também quando o destaque ainda está no item anterior. */
.nav-scrollable .nav-link.nav-indo {
    color: var(--sidebar-ink);
    background: var(--sidebar-hover);
}

@media (prefers-reduced-motion: reduce) {
    #nav-progresso.ativa { transition: none; }
}

/* ===== Casca de partida (#app-splash) =====
   O painel não é pré-renderizado (ver App.razor): o corpo chega vazio e só ganha conteúdo
   quando o circuito conecta. Esta casca ocupa a tela nesse intervalo, na cor do tema já
   aplicado pelo script do <head> — sem ela a carga completa piscaria em branco. */
#app-splash {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    background: var(--bs-body-bg);
    transition: opacity .18s ease;
}

#app-splash.saindo { opacity: 0; }

/* A silhueta repete a moldura do MainLayout — mesma largura de sidebar e altura de topbar —
   para que o painel real entre exatamente por cima, sem a tela saltar. */
.app-splash-sidebar {
    display: none;
    width: 240px;
    flex-shrink: 0;
    background: var(--sidebar-bg);
}

.app-splash-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-splash-topbar {
    height: 3.75rem;
    flex-shrink: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.app-splash-corpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

@media (min-width: 641px) {
    .app-splash-sidebar { display: block; }
}

/* Só aparece se o circuito não conectar (ver App.razor): sem pré-render, esconder o aviso
   deixaria o usuário diante de uma tela vazia, sem saber que houve falha. */
.app-splash-aviso {
    display: none;
    margin: 0;
    font-size: .88rem;
    color: var(--muted);
}

#app-splash.demorando .app-splash-aviso { display: block; }
#app-splash.demorando .app-splash-mark { animation-duration: 2.2s; }

/* Um ponto que respira, na tinta da marca: sinal de "carregando" sem virar mais um spinner. */
.app-splash-mark {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--brand);
    animation: app-splash-pulso 1.1s ease-in-out infinite;
}

@keyframes app-splash-pulso {
    0%, 100% { opacity: .25; transform: scale(.85); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .app-splash-mark { animation: none; opacity: .6; }
}

/* ===== /conversas — casca de app (tela cheia; cada painel rola por dentro) ===== */

/* Ativa só quando a página renderiza .conversas-app (via :has), sem tocar nas demais páginas.
   Especificidade acima do .content do MainLayout (scoped, carregado depois do app.css);
   navegador sem :has degrada para a rolagem de documento normal. */
@media (min-width: 641px) {
    main > .content:has(> .conversas-app) {
        max-width: none;
        height: calc(100vh - 3.75rem); /* viewport menos a topbar */
        height: calc(100dvh - 3.75rem);
        padding: 1.1rem 1.5rem 1.25rem;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    main > .content:has(> .conversas-app) .conversas-app {
        flex: 1;
        min-height: 0;
    }
}

.conversas-app {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.conversas-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.conversas-titulo {
    font-size: 1.25rem;
    margin: 0;
}

.conversas-split {
    display: flex;
    gap: 1rem;
    flex: 1;
    min-height: 0;
}

/* --- Painel esquerdo: filtros + lista de conversas --- */
.conversas-lista {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Largura fixa da lista só quando sobra espaço para o chat respirar ao lado. */
@media (min-width: 992px) {
    .conversas-lista { width: clamp(272px, 26vw, 360px); }
}

/* Telas médias (o sidebar de 268px come a largura): lista e chat empilham DENTRO da casca de
   app, dividindo a altura da janela. */
@media (min-width: 641px) and (max-width: 991.98px) {
    .conversas-split { flex-direction: column; }
    .conversas-lista { flex: 0 0 38%; }
}

.conversas-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .6rem;
    border-bottom: 1px solid var(--border);
}
.conversas-filtros .nav-link { font-size: .8rem; }

.conversas-lista-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.conversas-lista-nota { padding: 1rem; }

.conversas-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .62rem .75rem;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: background .12s ease;
}
.conversas-item:last-child { border-bottom: 0; }
.conversas-item:hover { background: var(--surface-2); }
.conversas-item:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}
.conversas-item.ativa {
    background: var(--brand-soft);
    box-shadow: inset 3px 0 0 var(--brand);
}

.conversas-item-corpo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.conversas-item-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
}
.conversas-item-nome {
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.conversas-item-hora {
    color: var(--muted);
    font-size: .72rem;
    flex-shrink: 0;
}
.conversas-item-preview {
    color: var(--muted);
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.conversas-item-badges {
    display: inline-flex;
    gap: .25rem;
    flex-shrink: 0;
}

/* --- Avatar (inicial do contato; o matiz vem por style inline, estável por telefone) --- */
.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: .92rem;
    flex-shrink: 0;
    user-select: none;
}

/* ===== Chat (painel direito da Lista e offcanvas do Quadro) ===== */
.conversas-chat {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chat-pane {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.chat-vazio {
    flex: 1;
    min-height: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    color: var(--muted);
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius);
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .9rem;
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--border);
}
.chat-header-id {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}
.chat-header-nome strong {
    display: block;
    font-size: .95rem;
    line-height: 1.25;
}
.chat-header-nome small { font-size: .75rem; }
.chat-header-acoes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem;
}

/* O fundo distinto da área de mensagens faz os balões (recebido branco / enviado verde) saltarem. */
.chat-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.1rem;
    background: var(--ivory);
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.chat-day {
    display: flex;
    justify-content: center;
    margin: .3rem 0 .15rem;
}
.chat-day span {
    font-size: .7rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: .1rem .6rem;
    border-radius: 999px;
}

/* Evento do sistema (ex.: pagamento confirmado): nota central, âmbar — registra o gatilho da IA,
   não é mensagem enviada ao cliente */
.chat-system {
    display: flex;
    justify-content: center;
    margin: .3rem 0 .15rem;
}
.chat-system span {
    font-size: .72rem;
    font-weight: 600;
    color: var(--chat-sys-ink);
    background: var(--chat-sys-bg);
    border: 1px solid var(--chat-sys-border);
    padding: .18rem .7rem;
    border-radius: 999px;
    max-width: min(85%, 640px);
    text-align: center;
}

.chat-row {
    display: flex;
}
.chat-row-in { justify-content: flex-start; }
.chat-row-out { justify-content: flex-end; }

.chat-bubble {
    /* Teto absoluto além do percentual: no chat fluido, 68% de um monitor largo seria uma
       linha longa demais para leitura confortável. */
    max-width: min(68%, 620px);
    padding: .5rem .72rem .34rem;
    border-radius: 15px;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .9rem;
    line-height: 1.42;
    box-shadow: 0 1px 1.5px rgba(28, 32, 51, .08);
}

.chat-in {
    background: var(--chat-in-bg);
    color: var(--chat-in-ink);
    border-bottom-left-radius: 5px;
}
.chat-out {
    background: var(--chat-out-bg);
    color: var(--chat-out-ink);
    border-bottom-right-radius: 5px;
}

.chat-meta {
    display: block;
    text-align: right;
    font-size: .68rem;
    margin-top: .12rem;
}
.chat-in .chat-meta { color: var(--chat-meta-in); }
.chat-out .chat-meta { color: var(--chat-meta-out); }

/* Foto recebida na conversa: presa à largura da bolha e com altura contida (o clique abre o
   original em outra aba). O min-width dá corpo à bolha de foto sem legenda. */
.chat-image-link { display: block; min-width: 180px; }
.chat-image {
    display: block;
    max-width: 100%;
    max-height: 320px;
    border-radius: 10px;
    margin: .1rem 0 .3rem;
}

.chat-composer {
    padding: .6rem .8rem .45rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.chat-composer textarea { resize: none; }
.chat-dica { font-size: .72rem; }

/* Telas estreitas: o layout empilha e a página volta a rolar como documento — alturas fixas
   fazem o papel do flex-fill da casca de app. */
@media (max-width: 640.98px) {
    .conversas-split { flex-direction: column; }
    .conversas-lista-scroll { max-height: 42vh; }
    /* max-height (e não height): em coluna flex o flex-basis do .chat-body venceria um height. */
    .conversas-chat .chat-body { max-height: 55vh; }
    /* Mais específico que o .kanban-col base (declarado depois), que usa 100% da casca de app. */
    .conversas-app .kanban-col { max-height: 72vh; }
}

/* ===== Kanban (/conversas — modo Quadro) ===== */
.kanban-board {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: .5rem;
}

/* Na casca de app o quadro preenche a altura restante; as colunas rolam por dentro. */
.conversas-quadro {
    flex: 1;
    min-height: 0;
}

.kanban-col {
    flex: 0 0 272px;
    max-width: 272px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-top: 3px solid var(--border-strong);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    max-height: 100%;
    transition: background .15s ease, border-color .15s ease;
}
.kanban-accent-danger    { border-top-color: var(--danger); }
.kanban-accent-warning   { border-top-color: var(--warning); }
.kanban-accent-success   { border-top-color: var(--success); }
.kanban-accent-secondary { border-top-color: var(--border-strong); }

.kanban-col.drag-over {
    background: var(--brand-soft);
    border-color: var(--brand);
}

.kanban-col-header {
    padding: .55rem .75rem .4rem;
    font-weight: 600;
    font-size: .88rem;
    color: var(--ink);
}

.kanban-cards {
    overflow-y: auto;
    padding: 0 .55rem .55rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    min-height: 3.2rem;
}

.kanban-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: .5rem .6rem .4rem;
    cursor: grab;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.kanban-card:hover {
    border-color: color-mix(in srgb, var(--brand) 55%, var(--border));
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}
.kanban-card:active { cursor: grabbing; }

.kanban-card-name {
    font-size: .88rem;
    word-break: break-word;
}

.kanban-card-preview {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.35;
    word-break: break-word;
}

.kanban-card-time {
    display: block;
    text-align: right;
    color: var(--muted);
    font-size: .68rem;
    margin-top: .15rem;
}

.kanban-empty {
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: .8rem;
    text-align: center;
    padding: .9rem .5rem;
}

/* Durante o arrasto, só as colunas recebem eventos de drag — os filhos ficam "transparentes"
   (sem isso, dragenter/dragleave dos cards fazem o realce da coluna piscar). */
.kanban-board.dragging .kanban-col > * { pointer-events: none; }

/* ===== Alerta de conversa nova (colunas humanas do inbox) =====
   "Nova" = entrou em Aguardando humano/Em atendimento por fluxo automático (handoff da IA, falha
   do engine, takeover pelo WhatsApp) e ninguém abriu no painel desde então. Os modificadores
   definem a tinta — a mesma que a coluna já usa (terracota = fila, latão = atendimento) — e o
   alerta apaga quando alguém abre a conversa (estado no banco, igual para a equipe toda). */
.nova-danger { --nova-cor: var(--danger); --nova-fundo: var(--danger-soft); }
.nova-accent { --nova-cor: var(--accent); --nova-fundo: var(--accent-soft); }

.nova-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nova-cor);
    flex-shrink: 0;
    vertical-align: middle;
    animation: nova-pulso 1.8s ease-in-out infinite;
}
.conversas-filtros .nova-dot { margin-right: .3rem; }

/* Fio pulsante na borda esquerda do card/linha — o tema sinaliza com fio, não com sombra. */
.kanban-card-nova,
.conversas-item.nova { position: relative; }

.kanban-card-nova::before,
.conversas-item.nova::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--nova-cor);
    animation: nova-pulso 1.8s ease-in-out infinite;
}
.kanban-card-nova { border-color: color-mix(in srgb, var(--nova-cor) 35%, var(--border)); }
.kanban-card-nova::before { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.conversas-item.nova .conversas-item-nome { font-weight: 700; }

/* Chip "Nova"/"2 novas" (cards e cabeçalho da coluna) e contador colorido nas abas. */
.badge.chip-nova {
    background: var(--nova-fundo) !important;
    color: var(--nova-cor) !important;
    border: 1px solid color-mix(in srgb, var(--nova-cor) 30%, transparent);
}
.conversas-filtros .nav-link .badge.nova-num {
    color: var(--nova-cor) !important;
    font-weight: 700;
}

/* Tempo de espera na coluna Aguardando humano: urgência na tinta da própria fila. */
.kanban-card-fila { color: var(--danger); }

@keyframes nova-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

@media (prefers-reduced-motion: reduce) {
    .nova-dot,
    .kanban-card-nova::before,
    .conversas-item.nova::before { animation: none; }
}

/* ===== Busca de conversas (topo da página, vale para Lista e Quadro) ===== */
.conversas-busca {
    position: relative;
    flex: 1 1 200px;
    max-width: 340px;
}
.conversas-busca input { padding-right: 1.8rem; }
.conversas-busca-limpar {
    position: absolute;
    right: .3rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1;
    padding: .1rem .3rem;
    cursor: pointer;
}
.conversas-busca-limpar:hover { color: var(--ink); }
.conversas-busca-info { font-size: .72rem; color: var(--muted); }

/* ===== Separadores da Lista (grupos de status nas abas mistas; dia nas demais) ===== */
.conversas-separador {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .55rem .75rem .3rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
}
.conversas-separador-num { font-weight: 500; }

/* Linha da fila: a espera (FIFO) no lugar da hora da última mensagem. */
.conversas-item-fila { color: var(--danger); }

/* Em atendimento parado (última palavra foi nossa): nudge em latão, não urgência. O tom puxa
   para o ink porque o latão puro não tem contraste para texto miúdo. */
.conversas-item-parada,
.kanban-card-parada { color: color-mix(in srgb, var(--accent) 65%, var(--ink)); }

/* "Mostrar mais finalizadas" no pé da Lista: o arquivo carrega em páginas. */
.conversas-mostrar-mais {
    display: block;
    width: 100%;
    border: 0;
    border-top: 1px solid var(--border);
    background: transparent;
    color: var(--brand);
    font-size: .78rem;
    font-weight: 600;
    padding: .7rem .75rem;
    cursor: pointer;
}
.conversas-mostrar-mais:hover { background: var(--surface-2); }

/* ===== Colunas-resumo do quadro (Abertas (IA) e Finalizadas recolhidas) =====
   Duas classes de propósito: as regras de tema de .kanban-col vêm depois no arquivo e
   venceriam uma classe simples. */
.kanban-col.kanban-col-resumo {
    flex: 0 0 190px;
    max-width: 190px;
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    border-style: dashed;
    border-top-style: solid;   /* o fio de identidade da coluna continua */
}
.kanban-resumo-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .4rem;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    padding: .55rem .75rem .4rem;
    font-weight: 600;
    font-size: .88rem;
    color: var(--muted);
    cursor: pointer;
    text-align: left;
}
.kanban-resumo-toggle:hover { color: var(--ink); }
.kanban-resumo-toggle svg { width: 12px; height: 12px; flex-shrink: 0; }

.kanban-resumo-corpo { padding: .7rem .7rem .75rem; text-align: center; }
.kanban-resumo-total {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.15;
}
.kanban-resumo-legenda { font-size: .72rem; color: var(--muted); margin-bottom: .45rem; }

.kanban-resumo-lista {
    border-top: 1px solid var(--border);
    padding-top: .35rem;
    text-align: left;
}
.kanban-resumo-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .4rem;
    width: 100%;
    border: 0;
    background: transparent;
    padding: .24rem .2rem;
    border-radius: 4px;
    font-size: .74rem;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
}
.kanban-resumo-item:hover { background: var(--surface-2); }
.kanban-resumo-nome {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.kanban-resumo-hora { color: var(--muted); font-size: .68rem; flex-shrink: 0; }
.kanban-resumo-mais {
    display: block;
    text-align: center;
    color: var(--muted);
    font-size: .68rem;
    padding-top: .25rem;
}

/* Botão de recolher no cabeçalho da coluna expandida */
.kanban-col-recolher {
    border: 0;
    background: transparent;
    color: var(--muted);
    padding: 0 .1rem;
    line-height: 1;
    cursor: pointer;
}
.kanban-col-recolher:hover { color: var(--ink); }
.kanban-col-recolher svg { width: 12px; height: 12px; }

/* Thread da conversa aberta por cima do quadro — larga o bastante para o chat completo.
   O painel é o próprio chat-pane (sem header do offcanvas): o X mora no cabeçalho do chat.
   Via variável do Bootstrap: a regra .offcanvas.offcanvas-end dele tem especificidade maior
   que uma classe e engoliria um width declarado aqui (era por isso que o painel antigo saía
   nos 400px padrão, e não nos 500px pretendidos). */
.conversation-offcanvas {
    --bs-offcanvas-width: min(900px, 92vw);
    background: var(--bs-body-bg);
}
.conversation-offcanvas .offcanvas-body {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.conversation-offcanvas .chat-pane {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ===== Ficha do cliente (offcanvas do inbox) =====
   Mesmo padrão manual dos demais (largura via variável — ver nota do .conversation-offcanvas).
   Renderizada por último no DOM, empilha por cima da thread do quadro sem mexer em z-index. */
.customer-offcanvas {
    --bs-offcanvas-width: min(480px, 94vw);
    background: var(--bs-body-bg);
}
.customer-ficha { overflow-y: auto; }
.customer-ficha-titulo {
    margin: 1.1rem 0 .35rem;
    padding-top: .8rem;
    border-top: 1px solid var(--bs-border-color);
}
.customer-ficha-titulo:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.customer-ficha-form { display: grid; gap: .35rem; }
/* Memória em <pre>: os tópicos "- " da IA quebram como foram escritos, na fonte do texto. */
.customer-ficha-memoria,
.customer-ficha-resumo {
    font-family: inherit;
    font-size: .85rem;
    white-space: pre-wrap;
    margin: 0;
    background: var(--bs-tertiary-bg);
    border-radius: .375rem;
    padding: .5rem .65rem;
}
.customer-ficha-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .6rem;
}
.customer-ficha-quando {
    display: block;
    font-size: .78rem;
    color: var(--muted);
    margin-bottom: .15rem;
}

/* ===== Ferramentas do agente: painel de detalhe de execução =====
   Mesmo padrão de offcanvas manual do quadro (largura via variável do Bootstrap —
   ver nota do .conversation-offcanvas). */
.tool-log-offcanvas {
    --bs-offcanvas-width: min(680px, 94vw);
    background: var(--bs-body-bg);
}

/* Blocos técnicos (JSON/resposta) roláveis, sem estourar o painel. */
.tool-log-pre {
    max-height: 280px;
    overflow: auto;
    background: var(--bs-tertiary-bg);
    border-radius: .375rem;
    padding: .65rem .75rem;
    font-size: .8125rem;
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 0;
}

/* ===== Toggle de tema (na topbar) ===== */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.theme-toggle:hover {
    color: var(--brand);
    border-color: var(--brand);
    background: var(--brand-soft);
}
.theme-toggle svg { width: 1.15rem; height: 1.15rem; }
.theme-toggle .icon-sun { display: none; }
[data-bs-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-bs-theme="dark"] .theme-toggle .icon-sun { display: inline; }

/* ===== Erros do Blazor ===== */
.blazor-error-boundary {
    background: var(--danger);
    padding: 1rem;
    color: #fff;
    border-radius: var(--radius);
}
.blazor-error-boundary::after { content: "Ocorreu um erro."; }

.darker-border-checkbox.form-check-input { border-color: var(--border-strong); }

/* ============================================================
   Tinta & Latão — refinamentos de componente.
   ANEXAR NO FIM de wwwroot/app.css (vence por ordem de cascata, sem !important).
   Referência visual: "Redesign UI SeMove.ai.dc.html", opções 1b e 2a–2h.
   ============================================================ */

/* ===== Escala tipográfica =====
   Antes os tamanhos vinham de utilitários soltos do Bootstrap (fs-3, small…). Aqui existe
   uma escala: 26 título de página · 14,5 título de painel · 13,5 corpo · 11 rótulo caixa-alta. */
body {
    font-size: .9rem;
    line-height: 1.58;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    font-weight: 600;              /* Sora 700 fica pesado demais nesta escala */
    letter-spacing: -.028em;
    color: var(--ink);
}

h1 { font-size: 1.65rem; line-height: 1.12; }
h2 { font-size: 1.3rem; }
h5, .card-title { font-size: .95rem; letter-spacing: -.015em; }

/* Rótulo curto em caixa-alta — o padrão de etiqueta do sistema */
.eyebrow {
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ===== Numeral tabular em tudo que é número =====
   Sem isto a coluna de valores dança a cada atualização automática. */
.table, .badge, .kpi-value, .kpi-value-hero, .money,
.conversas-item-hora, .kanban-card-time, .chat-meta {
    font-variant-numeric: tabular-nums;
}

/* Telefone, horário, código, URL de webhook: mono */
code, .mono, .tool-log-pre {
    font-family: var(--font-mono);
}
code {
    background: var(--surface-2);
    color: var(--muted);           /* código não é link: sai da cor de marca */
    font-size: .82em;
    border-radius: 4px;
}

/* ===== Botões — fio e tinta, sem brilho colorido ===== */
.btn {
    --bs-btn-border-radius: var(--radius-sm);
    --bs-btn-font-weight: 600;
    letter-spacing: 0;
}
.btn-primary,
.btn-primary:hover {
    box-shadow: none;
}
.btn-success {
    --bs-btn-bg: var(--success);
    --bs-btn-border-color: var(--success);
}

/* ===== Cards — fio de 1px; o hover não levanta mais ===== */
.card {
    --bs-card-border-radius: var(--radius);
    box-shadow: none;
    border-color: var(--border);
}
a.card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
    border-color: var(--border-strong);
}
.card-header {
    background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.015em;
}

/* ===== Badges — contorno, não pastel =====
   Fundo pastel em tudo achatava a hierarquia: urgência e informação pareciam iguais. */
.badge {
    font-weight: 600;
    font-size: .69rem;
    letter-spacing: .01em;
    padding: .28em .6em;
    border-radius: 4px;
    border: 1px solid transparent;
}
.badge.text-bg-primary   { background: transparent !important; color: var(--brand) !important;   border-color: color-mix(in srgb, var(--brand) 32%, transparent); }
.badge.text-bg-danger    { background: transparent !important; color: var(--danger) !important;  border-color: color-mix(in srgb, var(--danger) 34%, transparent); }
.badge.text-bg-success   { background: var(--success-soft) !important; color: var(--success) !important; border-color: transparent; }
/* "warning" no sistema significa cobrança/dinheiro: latão cheio, para o valor saltar */
.badge.text-bg-warning,
.badge.text-bg-info      { background: var(--accent-soft) !important; color: var(--warning) !important; border-color: transparent; }
.badge.text-bg-secondary,
.badge.text-bg-light,
.badge.text-bg-dark      { background: var(--surface-2) !important; color: var(--muted) !important; border-color: transparent; }

/* Valor em dinheiro: Sora + latão. Use em toda cifra da interface. */
.money {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--warning);
}
.money-paid { color: var(--ink); }   /* já recebido não precisa chamar atenção */

/* ===== Formulários ===== */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border-color: var(--border-strong);
}
.form-label { font-size: .8rem; font-weight: 600; color: var(--muted); }
/* O interruptor de ferramenta é ação, não dinheiro: tinta, não latão. */
.form-switch .form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

/* ===== Alertas — fio, sem preenchimento pesado ===== */
.alert {
    border-radius: var(--radius);
    border-width: 1px;
    font-size: .875rem;
}

/* ===== Tabelas ===== */
.table > thead th {
    font-size: .69rem;
    letter-spacing: .07em;
    background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
}
.table {
    --bs-table-hover-bg: var(--surface-2);
}

/* ===== Abas (Ferramentas, e onde mais houver nav-tabs) — sublinhado, não caixinha ===== */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--border);
    gap: 1.15rem;
}
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .1rem .1rem .55rem;
    font-size: .84rem;
    font-weight: 500;
    color: var(--muted);
}
.nav-tabs .nav-link:hover { border-bottom-color: var(--border-strong); color: var(--ink); }
.nav-tabs .nav-link.active {
    background: transparent;
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--brand);
}

/* ===== Inbox: lista de conversas ===== */
.avatar {
    width: 34px;
    height: 34px;
    border-radius: 6px;            /* quadrado arredondado: menos "rede social" */
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .8rem;
}
.conversas-item.ativa {
    background: var(--brand-soft);
    box-shadow: inset 2px 0 0 var(--brand);
}
.conversas-item-nome { font-size: .85rem; font-weight: 600; }
.conversas-item-preview { font-size: .78rem; }
.conversas-item-hora { font-size: .68rem; }

/* Filtros da lista: pílula → sublinhado (o mesmo padrão das abas) */
.conversas-filtros {
    gap: .9rem;
    padding: 0 .85rem;
}
.conversas-filtros .nav-link {
    border-radius: 0;
    border-bottom: 2px solid transparent;
    padding: .7rem .1rem .55rem;
    font-size: .78rem;
    font-weight: 500;
    color: var(--muted);
    background: transparent;
}
.conversas-filtros .nav-link.active {
    background: transparent;
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--brand);
}
.conversas-filtros .nav-link .badge { background: transparent !important; padding-left: .1em; }

/* ===== Chat ===== */
.chat-bubble {
    border-radius: 10px;
    padding: .55rem .8rem .38rem;
    font-size: .84rem;
    line-height: 1.5;
    box-shadow: none;
    border: 1px solid transparent;
}
.chat-in  { border-color: var(--border); border-bottom-left-radius: 3px; }
.chat-out { border-color: color-mix(in srgb, var(--brand) 18%, transparent); border-bottom-right-radius: 3px; }
.chat-meta { font-size: .64rem; }

.chat-day span, .chat-system span {
    font-size: .68rem;
    border-radius: 999px;
    padding: .2rem .7rem;
}

/* Encaminhamento para humano: a única nota do chat em terracota. Acrescente a classe
   .chat-system-alert junto de .chat-system quando o evento for pedido de atendente. */
.chat-system-alert span {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 22%, transparent);
}

/* Cartão de cobrança dentro do balão (link de pagamento enviado pela IA) */
.chat-pay {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .5rem;
    padding: .5rem .65rem;
    background: var(--accent-soft);
    border: 1px solid var(--chat-sys-border);
    border-radius: var(--radius-sm);
}
.chat-pay .money { font-size: .9rem; }

.chat-composer textarea { border-radius: var(--radius-sm); }
.chat-dica { font-size: .68rem; color: var(--muted); }

/* ===== Kanban ===== */
.kanban-col {
    background: var(--surface);
    border-top-width: 2px;
    border-radius: 0 0 var(--radius) var(--radius);
}
.kanban-accent-warning   { border-top-color: var(--accent); }
.kanban-accent-secondary { border-top-color: var(--border-strong); }
.kanban-col-header {
    font-size: .8rem;
    padding: .75rem .85rem .6rem;
    border-bottom: 1px solid var(--border);
}
.kanban-col.drag-over {
    background: var(--accent-soft);
    border-color: var(--accent);
    border-style: dashed;
}
.kanban-card {
    border-radius: var(--radius-sm);
    box-shadow: none;
    padding: .6rem .7rem .5rem;
}
.kanban-card:hover {
    transform: none;
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}
.kanban-card-name { font-size: .8rem; font-weight: 600; }
.kanban-card-preview { font-size: .74rem; }
.kanban-card-time { font-size: .64rem; }

/* ===== Painel de KPI (Início) — 1 métrica principal + 3 de apoio, divididas por fio ===== */
.kpi-panel {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;   /* a célula de dinheiro ganha o que a herói não usa: "R$ 3.240,00" quebrava em 1366px */
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}
@media (max-width: 991.98px) { .kpi-panel { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .kpi-panel { grid-template-columns: 1fr; } }

.kpi-cell {
    padding: 1.35rem 1.4rem;
    border-right: 1px solid var(--border);
}
.kpi-cell:last-child { border-right: 0; }
.kpi-cell-hero { background: color-mix(in srgb, var(--surface-2) 40%, var(--surface)); }
.kpi-cell-money { background: var(--accent-soft); }

.kpi-label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
}
.kpi-cell-money .kpi-label { color: color-mix(in srgb, var(--warning) 80%, transparent); }

.kpi-value {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1;
    margin-top: .5rem;
}
.kpi-value-hero {
    font-family: var(--font-display);
    font-size: 3.75rem;
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: .9;
}
.kpi-value-alert { color: var(--danger); }
.kpi-value-money { color: var(--warning); }
.kpi-sub { font-size: .76rem; color: var(--muted); margin-top: .2rem; }

/* Barra de proporção e mini-barras de mês (SVG não é necessário) */
.kpi-meter { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-top: .9rem; }
.kpi-meter > span { display: block; height: 100%; background: var(--brand); }
.kpi-bars { display: flex; align-items: flex-end; gap: 4px; height: 26px; margin-top: .8rem; }
.kpi-bars > span { flex: 1; background: var(--border); border-radius: 1px; }
.kpi-bars > span.now { background: var(--accent); }

/* ===== Saúde do agente (Início) — substitui o checklist de ✔/○ ===== */
.saude-list { display: flex; flex-direction: column; }
.saude-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.saude-item:last-child { border-bottom: 0; }
.saude-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--success); }
.saude-dot-warn { background: var(--accent); }
.saude-dot-off  { background: var(--border-strong); }
.saude-title { display: block; font-size: .82rem; font-weight: 600; }
.saude-sub { font-size: .73rem; color: var(--muted); }

/* Fila de atendimento (Início) */
.fila-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1.25rem;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
}
.fila-item:last-child { border-bottom: 0; }
.fila-item:hover { background: var(--surface-2); color: inherit; }
.fila-item-alert { background: var(--danger-soft); box-shadow: inset 2px 0 0 var(--danger); }
.fila-nome { font-size: .84rem; font-weight: 600; }
.fila-preview { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-hora { font-size: .7rem; color: var(--muted); }

/* ===== Topbar: pílula de estado do agente ===== */
.topbar-right { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.agent-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .32rem .7rem;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .75rem;
    font-weight: 600;
}
.agent-pill .agent-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    animation: agent-dot 2.4s ease-in-out infinite;
}
.agent-pill-off { background: var(--danger-soft); color: var(--danger); }
.agent-pill-off .agent-dot { animation: none; }
@keyframes agent-dot { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

/* Toggle de tema: quadrado arredondado, alinhado ao resto */
.theme-toggle {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    border-color: var(--border);
}
.theme-toggle:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--ink); }
.theme-toggle svg { width: .9rem; height: .9rem; }

/* ===== Erro do Blazor (o 🗙 sai; ver patch em App/MainLayout) ===== */
#blazor-error-ui {
    background: var(--danger-soft);
    color: var(--danger);
    border-top: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
    font-size: .85rem;
}

/* ===== Cobranças (/cobrancas) ===== */
/* Painel de KPI com 3 células iguais (o do Início tem célula-herói de 1.5fr). O modifier soma
   duas classes — especificidade acima das regras responsivas do .kpi-panel base —, então precisa
   carregar as PRÓPRIAS quebras de coluna. */
.kpi-panel.kpi-panel-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 991.98px) { .kpi-panel.kpi-panel-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .kpi-panel.kpi-panel-3 { grid-template-columns: 1fr; } }

/* Painel de detalhe da cobrança — offcanvas manual, mesmo padrão do quadro e das Ferramentas
   (largura via variável do Bootstrap; ver a nota do .conversation-offcanvas). */
.charge-offcanvas {
    --bs-offcanvas-width: min(600px, 94vw);
    background: var(--bs-body-bg);
}

/* Ficha do detalhe: rótulo à esquerda, valor à direita, um fio por linha. */
.charge-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .84rem;
}
.charge-detail-row:last-child { border-bottom: 0; }
.charge-detail-row dt { font-weight: 600; color: var(--muted); flex: none; margin: 0; }
.charge-detail-row dd { margin: 0; text-align: right; word-break: break-word; min-width: 0; }

/* ===== Início: fila como lista, grade de duas colunas e cabeçalho ao vivo =====
   O mock aprovado (1b) já previa a fila de atendimento como lista no Início; as classes
   .fila-* acima vieram no pacote do redesign e só entraram em uso aqui. */

/* Sem o módulo de cobranças o painel tem 3 células — sem isto a 4ª coluna ficava vazia dentro
   do fio. Modifier com duas classes: precisa carregar as próprias quebras (ver .kpi-panel-3). */
.kpi-panel.kpi-panel-sem-dinheiro { grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 991.98px) { .kpi-panel.kpi-panel-sem-dinheiro { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .kpi-panel.kpi-panel-sem-dinheiro { grid-template-columns: 1fr; } }

.kpi-sub strong { color: var(--ink); font-weight: 600; }

/* "Atualização automática" no lugar da data em caixa-alta: o ponto pulsa como o da pílula do agente. */
.inicio-ao-vivo { display: inline-flex; align-items: center; gap: .45rem; font-size: .75rem; color: var(--muted); padding-bottom: .25rem; white-space: nowrap; }
.inicio-ao-vivo-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand); animation: agent-dot 2.4s ease-in-out infinite; }

.inicio-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 991.98px) { .inicio-grid { grid-template-columns: 1fr; } }

/* Linha da fila: avatar · nome + telefone (mono) + última mensagem · chip "Nova" + espera. */
.fila-sep { display: flex; align-items: center; gap: .35rem; padding: .4rem 1.25rem; font-size: .65rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); }
.fila-item-alert .fila-nome { font-weight: 700; }
.fila-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fila-linha { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.fila-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-tel { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); white-space: nowrap; }
.fila-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; flex: none; }
.fila-hora { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Espera na fila e "cliente aguarda": terracota, como no inbox; "parada": o mesmo latão puxado ao ink. */
.fila-espera { color: var(--danger); font-weight: 600; }
.fila-parada { color: color-mix(in srgb, var(--accent) 65%, var(--ink)); font-weight: 600; }
.fila-mais { display: block; padding: .7rem 1.25rem; font-size: .78rem; border-top: 1px solid var(--border); }
.fila-vazia { display: flex; gap: .9rem; align-items: flex-start; padding: 1.6rem 1.25rem 1.75rem; }
.fila-vazia svg { width: 22px; height: 22px; flex: none; color: var(--success); margin-top: 1px; }
.fila-vazia-titulo { font-size: .84rem; font-weight: 600; }
.fila-vazia-texto { font-size: .8rem; color: var(--muted); max-width: 28rem; margin-top: .1rem; }

/* ===== Cobranças: tabela por quem / quanto / até quando (2026-08-22) =====
   Larguras fixas: o que é nowrap recebe o que precisa e a Descrição fica com o resto (~300 px em
   notebook, onde antes sobravam ~160 e ela quebrava em 3 linhas). min-width + table-responsive:
   no celular a tabela rola por dentro, não a página. */
.charges-table { table-layout: fixed; min-width: 760px; }
.charges-table th.col-cliente { width: 156px; }
.charges-table th.col-valor { width: 108px; }
.charges-table th.col-situacao { width: 180px; }
.charges-table th.col-acoes { width: 214px; }
.cobranca-cliente { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.35; }
.cobranca-nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Contato sem nome: o telefone assume o lugar do nome, em mono um pouco menor para caber inteiro. */
.cobranca-nome.mono { font-size: .8rem; font-weight: 500; }
.cobranca-tel { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); white-space: nowrap; }
.cobranca-sit { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.cobranca-tempo { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Vence nas próximas 24 h: a urgência da fila, em terracota. */
.cobranca-tempo-urgente { color: var(--danger); font-weight: 600; }
/* Ações como links discretos (a linha inteira já abre o detalhe, que mantém os botões). */
.cobranca-acoes { display: flex; justify-content: flex-end; gap: .875rem; white-space: nowrap; font-size: .79rem; font-weight: 600; }
.cobranca-acoes a { text-decoration: none; }
.cobranca-acoes button { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); cursor: pointer; }
.cobranca-acoes button:disabled { color: var(--muted); cursor: default; }
.cobranca-acoes .cobranca-acao-perigo { color: var(--danger); }
.money-expirada { color: var(--muted); }   /* expirada não é dinheiro a receber: sai do latão */
.kpi-urgente { color: var(--danger); font-weight: 600; }

/* ===== Recebimento (/pagamentos) — redesign 2026-08-23 (canvas "Recebimento v2") ===== */

/* Faixa de estado: a resposta antes das seções. Latão = dinheiro fluindo; terracota = parado. */
.receb-faixa {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--accent-soft);
    border: 1px solid var(--chat-sys-border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
}
.receb-faixa-alerta {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 25%, transparent);
}
.receb-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--success); }
.receb-faixa-alerta .receb-dot { background: var(--danger); }
.receb-faixa-corpo { flex: 1; min-width: 0; }
.receb-faixa-titulo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: -.015em;
}
.receb-faixa-alerta .receb-faixa-titulo { color: var(--danger); }
.receb-faixa-sub { font-size: .8rem; color: var(--chat-sys-ink); margin-top: 1px; }
.receb-faixa-sub strong { font-weight: 600; }
.receb-faixa-alerta .receb-faixa-sub { color: color-mix(in srgb, var(--danger) 75%, var(--ink)); }
.receb-acao-link { font-size: .79rem; font-weight: 600; text-decoration: none; white-space: nowrap; }

/* Conta MP como linha com fio (o padrão da Saúde do agente), ações como links discretos
   (o padrão da tabela de Cobranças) — menos caixas dentro de caixas. */
.receb-conta {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.receb-conta-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--success); }
.receb-conta-dot-off { background: var(--border-strong); }
.receb-conta-corpo { flex: 1; min-width: 0; }
.receb-conta-nome {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .85rem;
    font-weight: 600;
}
.receb-conta-sub { font-size: .75rem; color: var(--muted); margin-top: 1px; }
.receb-conta-add {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    padding: .85rem 1.25rem;
}
.receb-acoes { display: flex; gap: .875rem; white-space: nowrap; font-size: .79rem; font-weight: 600; }
.receb-acoes button { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); cursor: pointer; }
.receb-acoes button:disabled { color: var(--muted); cursor: default; }
.receb-acoes .receb-acao-perigo { color: var(--danger); }

/* Onboarding do estado vazio: o tracejado do tema para "ainda não existe". */
.receb-onboarding { border: 1.5px dashed var(--border-strong); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 1rem 1.25rem 1.25rem; }
.receb-passos { display: flex; gap: 1.6rem; margin: .8rem 0 1rem; }
.receb-passo { flex: 1; display: flex; gap: .6rem; align-items: flex-start; font-size: .8rem; color: var(--muted); }
.receb-passo-num {
    flex: none;
    width: 22px;
    height: 22px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 600;
    color: var(--muted);
}
@media (max-width: 767.98px) { .receb-passos { flex-direction: column; gap: .6rem; } }

/* Aviso da trava do direcionamento: âmbar de sistema, com fio. */
.receb-aviso {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    background: var(--accent-soft);
    border: 1px solid var(--chat-sys-border);
    border-radius: var(--radius-sm);
    padding: .6rem .85rem;
    font-size: .8rem;
    color: var(--chat-sys-ink);
}
.receb-aviso svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.receb-aviso strong { font-weight: 600; }

/* Stripe rebaixado a alternativa: a mesma receita do tracejado-resumo do quadro. */
.receb-alt { border-style: dashed; background: color-mix(in srgb, var(--surface) 55%, transparent); }
.receb-alt-linha { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .85rem 1.25rem; }
.receb-alt-texto { flex: 1; min-width: 12rem; font-size: .8rem; color: var(--muted); }

/* Bloco técnico da plataforma: cabeçalho em tinta — território do superadmin, não do hotel. */
.receb-plataforma { border-color: color-mix(in srgb, var(--brand) 28%, var(--border)); }
.receb-plataforma > .card-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--brand-soft);
    color: var(--brand);
    border-bottom-color: color-mix(in srgb, var(--brand) 18%, transparent);
}
.receb-plataforma > .card-header svg { width: 15px; height: 15px; flex: none; }

/* ===== Logs da plataforma (/logs) — canvas "Logs da Plataforma" (2026-08-23) ===== */

.logs-filtros { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.logs-contagem { margin-left: auto; font-size: .76rem; color: var(--muted); white-space: nowrap; }

/* Seletor de período: segmentado com o fio do tema — o ativo ganha a tinta suave. Botões, e não
   abas: período é filtro pontual, não navegação entre visões. */
.logs-periodo {
    display: inline-flex;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface);
}
.logs-periodo button {
    border: 0;
    background: transparent;
    padding: .3rem .75rem;
    font-size: .79rem;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
}
.logs-periodo button + button { border-left: 1px solid var(--border); }
.logs-periodo button:hover { color: var(--ink); background: var(--surface-2); }
.logs-periodo button.ativo { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

/* Larguras fixas como na tabela de Cobranças: o nowrap recebe o que precisa e o Evento fica com
   o resto; min-width + table-responsive = no celular a tabela rola por dentro, não a página. */
.logs-table { table-layout: fixed; min-width: 880px; }
.logs-table th.col-quando { width: 82px; }
.logs-table th.col-empresa { width: 170px; }
.logs-table th.col-origem { width: 190px; }
.logs-table th.col-resultado { width: 132px; }

/* Célula que não pode estourar a coluna fixa (nome de empresa, e-mail na origem, descrição). */
.logs-recorta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Separador de dia dentro da tabela — a receita do conversas-separador, em linha de tabela. */
.logs-sep td {
    padding: .55rem .75rem .3rem;
    background: var(--surface);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ===== Novidades (/novidades) =====
   Histórico de versões para o cliente: uma entrada por atualização, a mais recente no topo. A
   versão é a data (CalVer) em mono — rótulo técnico ao lado da data por extenso. Os tipos dos
   itens são chips: só "Novo" leva tinta; melhoria e correção ficam neutros (uma tinta = um
   significado — nada aqui é fila nem dinheiro). Fio no lugar de sombra, como o resto do tema. */
.novidades-atual {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .84rem;
    color: var(--muted);
}

.novidade-versao {
    font-family: var(--font-mono);
    font-size: .76rem;
    font-weight: 500;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .2rem .55rem;
    line-height: 1;
    white-space: nowrap;
}

.novidades-lista {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 52rem;
}

.novidade {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem 1rem;
}

/* A atual: fio na tinta da marca, sem mudar o fundo — é a única entrada que "está no ar". */
.novidade-recente { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }

.novidade-cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    margin-bottom: .55rem;
}

.novidade-data { font-size: .82rem; color: var(--muted); }

.novidade-atual-marca {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 999px;
    padding: .2rem .5rem;
    line-height: 1;
}

.novidade-titulo {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 .35rem;
}

.novidade-resumo {
    font-size: .9rem;
    color: var(--muted);
    margin: 0 0 .8rem;
}

.novidade-itens {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.novidade-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .9rem;
    line-height: 1.5;
}

.novidade-tipo {
    flex-shrink: 0;
    min-width: 5.4rem;
    margin-top: .2rem;
    text-align: center;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1;
    padding: .28rem .5rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--border);
}

.novidade-tipo-novo {
    background: var(--brand-soft);
    color: var(--brand);
    border-color: color-mix(in srgb, var(--brand) 25%, transparent);
}

@media (max-width: 640px) {
    .novidade-item { flex-direction: column; gap: .3rem; }
    .novidade-tipo { min-width: 0; align-self: flex-start; }
}