/* Fontes do Favorito (18/09/2026, upgrade de layout): Figtree no corpo e
   Bricolage Grotesque nos títulos, as mesmas do site institucional e do
   Favorito Condomínio. Hospedadas AQUI (assets/fonts/, só o subconjunto
   latin, que cobre o português) em vez de chamar o Google a cada página —
   sem dependência externa, sem enviar o IP do usuário a terceiro. */
@font-face { font-family:'Figtree'; font-style:normal; font-weight:400 800; font-display:swap;
    src:url('fonts/figtree-latin.woff2') format('woff2'); }
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:500 800; font-display:swap;
    src:url('fonts/bricolage-grotesque-latin.woff2') format('woff2'); }

:root {
    --font-ui:'Figtree','Segoe UI',Arial,sans-serif;
    --font-titulo:'Bricolage Grotesque','Figtree','Segoe UI',Arial,sans-serif;
    --bg:#0f172a; --card:#1e293b; --border:#334155; --text:#e2e8f0; --muted:#94a3b8;
    --accent:#38bdf8; --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444;
    --topbar-bg:#0f172a; --topbar-text:#e2e8f0;
    /* campos e texto sobre a cor de destaque: derivados do tema escolhido
       no White Label (includes/branding.php) pra não sumirem no tema claro.
       O campo fica um degrau ACIMA do cartão — mais escuro que ele vira
       "buraco preto" e some da tela. */
    --input-bg:#2b3a4f; --on-accent:#04222f;

    /* Medidas repetidas em um lugar só: mudar o arredondamento ou a sombra
       do sistema inteiro passa a ser mexer aqui, não caçar valor solto. */
    --raio:12px; --raio-sm:10px;
    --sombra:0 1px 2px rgba(0,0,0,.06), 0 6px 16px -6px rgba(0,0,0,.18);
    --sombra-forte:0 2px 4px rgba(0,0,0,.08), 0 12px 28px -10px rgba(0,0,0,.28);
    --transicao:.16s ease;
}
* { box-sizing:border-box; }
body { margin:0; font-family:var(--font-ui); background:var(--bg); color:var(--text);
    -webkit-font-smoothing:antialiased; }
h1, h2, h3, .card h2, header h1 { font-family:var(--font-titulo); }
a { color:var(--accent); }

header { position:sticky; top:0; z-index:50; background:var(--topbar-bg); color:var(--topbar-text); padding:14px 32px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
header .topbar-logo { display:flex; align-items:center; flex-shrink:0; margin-right:auto; }
header .topbar-logo img { height:30px; width:auto; max-width:170px; display:block; }
header h1 { margin:0; font-size:20px; }
header .count { color:var(--muted); font-size:14px; }
header a.back { color:var(--accent); text-decoration:none; font-size:14px; }
header nav { display:flex; gap:16px; align-items:center; font-size:14px; flex-wrap:wrap; }
header nav a { text-decoration:none; color:var(--text); }
header nav a:hover { color:var(--accent); }
header nav a.nav-active { color:var(--accent); font-weight:700; }
header nav span.who { color:var(--muted); }

/* Botão de parar o alarme do WhatsApp (29/08/2026) — escondido por
   padrão, render_notificacao_sonora() mostra só enquanto o alarme está
   ligado. Pisca (.tocando) só no INSTANTE de cada toque de verdade, não o
   tempo todo enquanto está visível — pedido do usuário: piscar direto
   chamava atenção à toa nos ~4s de silêncio entre um toque e outro. */
.som-parar-btn { background:none; border:none; padding:6px; margin:0 2px; cursor:pointer;
    display:flex; align-items:center; border-radius:50%; color:#b32d1f; }
.som-parar-btn:hover { background:rgba(179,45,31,.14); }
.som-parar-btn.tocando { animation:som-parar-flash .4s ease-out; }
@keyframes som-parar-flash { 0% { opacity:.25; } 100% { opacity:1; } }

/* Avatar do usuário no topo + menu suspenso (nome / configurações / trocar senha / sair) */
.user-menu { position:relative; }
.user-menu-trigger { background:none; border:none; padding:0; cursor:pointer; display:flex; border-radius:50%; }
.user-menu-trigger:hover { outline:2px solid var(--accent); outline-offset:2px; }
.user-menu-dropdown { display:none; position:absolute; top:calc(100% + 8px); right:0; min-width:200px; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:8px; z-index:60; box-shadow:0 8px 24px rgba(0,0,0,0.3); }
.user-menu-dropdown.open { display:block; }
.user-menu-name { padding:8px 10px; font-weight:700; font-size:14px; color:var(--text); border-bottom:1px solid var(--border); margin-bottom:4px; word-break:break-word; }
.user-menu-dropdown a { display:block; padding:8px 10px; border-radius:6px; color:var(--text); text-decoration:none; font-size:14px; }
.user-menu-dropdown a:hover { background:rgba(127,127,127,.12); color:var(--accent); }
.user-menu-dropdown a:hover { background:color-mix(in srgb, var(--accent) 12%, transparent); }

/* Atalhos entre áreas (Admin / Técnicos), no topo */
.area-switcher { display:flex; gap:6px; flex-wrap:wrap; }
.area-switcher a { padding:6px 14px; border-radius:999px; font-size:13px; font-weight:600; text-decoration:none; color:var(--topbar-text); opacity:.7; border:1px solid var(--border); }
.area-switcher a:hover { opacity:1; border-color:var(--accent); }
.area-switcher a.active { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

/* Layout com menu lateral fixo (admin/técnico) */
.app-shell { display:flex; align-items:stretch; min-height:100vh; }
/* 240px (era 220px, 01/09/2026, pedido do usuário) — "Socorro Remoto" e
   outros itens de nome mais longo cortavam com reticências antes de
   caber. Barra de rolagem do próprio menu estilizada logo abaixo, pra
   acompanhar o White Label de cada empresa. */
.sidebar { width:240px; flex-shrink:0; background:var(--card); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:20px 0; position:sticky; top:0; align-self:flex-start; height:100vh; overflow-y:auto;
    scrollbar-width:thin; scrollbar-color:var(--border) var(--card); }
.sidebar::-webkit-scrollbar { width:8px; }
.sidebar::-webkit-scrollbar-track { background:var(--card); }
.sidebar::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background:var(--accent); }
.sidebar-topo { display:flex; align-items:flex-start; justify-content:space-between; gap:6px; padding-right:10px; }
.sidebar-brand { display:flex; align-items:center; gap:9px; padding:0 20px 20px; text-decoration:none; flex:1; min-width:0; }
/* o avatar vem com fundo branco; o canto arredondado faz virar um
   emblema, que fica bem tanto em tema claro quanto escuro */
.sidebar-brand-ico { width:28px; height:28px; flex:0 0 auto; object-fit:contain;
    border-radius:7px; background:#fff; }
.sidebar-toggle { flex:0 0 auto; width:28px; height:28px; padding:0; display:grid; place-items:center;
    background:transparent; border:1px solid var(--border); border-radius:7px; color:var(--muted); cursor:pointer; }
.sidebar-toggle svg { width:15px; height:15px; transition:transform .18s ease; }
.sidebar-toggle:hover { color:var(--accent); border-color:var(--accent); }
.sidebar-brand img { height:30px; width:auto; display:block; }
.sidebar-brand-name { font-size:15px; font-weight:700; color:var(--text); letter-spacing:.3px; }
.sidebar nav { display:flex; flex-direction:column; gap:1px; }
.sidebar nav a { padding:10px 20px; color:var(--text); text-decoration:none; font-size:14px; border-left:3px solid transparent; }
.sidebar nav a:hover { background:rgba(127,127,127,.08); color:var(--accent); }
.sidebar nav a:hover { background:color-mix(in srgb, var(--accent) 7%, transparent); }
.sidebar nav a.nav-active { background:rgba(127,127,127,.14); color:var(--accent); font-weight:700; border-left-color:var(--accent); }
.sidebar nav a.nav-active { background:color-mix(in srgb, var(--accent) 13%, transparent); }

/* Menu agrupado: cabeçalho de seção + itens recuados. O cabeçalho pode
   ser texto puro ou link, conforme o grupo tenha ou não uma tela própria
   — "Chamados" leva pra fila, "Inventário" só rotula. */
/* Pedido do usuário (29/08/2026): o cabeçalho que recolhe/expande ficava
   apagado demais (--muted, cor de texto secundário) — já era negrito e
   maiúsculo, faltava só destacar mais em COR, sem mexer no tamanho.
   --text é a cor de leitura principal, o mesmo contraste que já é
   garantido em toda paleta do White Label. */
.sidebar nav .nav-grupo { display:block; padding:14px 20px 5px; font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.7px; color:var(--text); border-left:3px solid transparent; }
.sidebar nav a.nav-grupo-link { text-decoration:none; }
.sidebar nav a.nav-grupo-link:hover { color:var(--accent); background:transparent; }
.sidebar nav a.nav-grupo-link.nav-active { background:transparent; color:var(--accent); border-left-color:var(--accent); }
.sidebar nav a.nav-filho { padding-left:34px; font-size:13px; }

/* No modo simples a marcação nova existe, mas o enfeite fica escondido:
   sem ícone, sem seta, e nenhum grupo recolhe. */
.sidebar nav:not(.nav-rico) .nav-ico,
.sidebar nav:not(.nav-rico) .nav-chevron { display:none; }
.sidebar nav:not(.nav-rico) .nav-itens { display:block; }

/* ---------------------------------------------------------------------
   Menu rico: ícones, grupos recolhíveis e realce colorido.
   Todas as cores saem de --accent via color-mix, pra acompanhar as 7
   paletas do White Label — nada de tom fixo, que só ficaria certo no
   tema padrão. A linha rgba antes de cada color-mix é o retrato para
   navegador antigo que não conhece a função.
   ------------------------------------------------------------------ */
/* Os seletores repetem ".sidebar nav" de propósito: as regras do menu
   simples logo acima são mais específicas e venceriam, deixando o item
   ativo sem fundo. */
.sidebar nav.nav-rico { gap:2px; padding:0 10px; }
.sidebar nav.nav-rico .nav-bloco { margin-bottom:2px; }

.sidebar nav.nav-rico .nav-grupo-linha { display:flex; align-items:center; gap:2px; }
.sidebar nav.nav-rico .nav-grupo { flex:1; min-width:0; display:flex; align-items:center; gap:10px;
    padding:9px 10px; border-radius:8px; border-left:none; font-size:11.5px; }
.sidebar nav.nav-rico .nav-grupo > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar nav.nav-rico a.nav-grupo-link:hover { color:var(--accent); background:rgba(127,127,127,.10); }
.sidebar nav.nav-rico a.nav-grupo-link:hover { background:color-mix(in srgb, var(--accent) 12%, transparent); }
.sidebar nav.nav-rico a.nav-grupo-link.nav-active { color:var(--accent); background:rgba(127,127,127,.14); }
.sidebar nav.nav-rico a.nav-grupo-link.nav-active { background:color-mix(in srgb, var(--accent) 16%, transparent); }

.sidebar nav.nav-rico .nav-chevron { flex:0 0 auto; width:28px; height:28px; padding:0; display:grid;
    place-items:center; background:transparent; border:none; border-radius:7px; color:var(--muted); cursor:pointer; }
.sidebar nav.nav-rico .nav-chevron svg { width:15px; height:15px; transition:transform .18s ease; }
.sidebar nav.nav-rico .nav-chevron:hover { color:var(--accent); background:rgba(127,127,127,.12); }
.sidebar nav.nav-rico .nav-chevron:hover { background:color-mix(in srgb, var(--accent) 14%, transparent); }
.sidebar nav.nav-rico .nav-bloco.aberto .nav-chevron svg { transform:rotate(180deg); }

/* Recolher por max-height, e não pelo truque de grid 0fr/1fr: com
   min-height:0 nos filhos aquele truque resolve a faixa como zero mesmo
   aberta, porque o container não tem altura definida.

   O teto de quando "aberto" é bem folgado (não é a altura real do maior
   grupo) de propósito: bug achado em 25/08/2026 — "Configuração" cresceu
   pra 13 itens (~40px cada, ~520px) e passou dos 460px fixos que
   existiam antes, cortando as últimas opções em silêncio, sem nem
   avisar (max-height com overflow:hidden não sobra rastro nenhum, só
   some). Não afeta a velocidade da animação (ainda são os mesmos .22s),
   só garante que nenhum grupo futuro, por maior que fique, corte de
   novo do mesmo jeito. */
.sidebar nav.nav-rico .nav-itens { overflow:hidden; max-height:0; transition:max-height .22s ease; }
.sidebar nav.nav-rico .nav-bloco.aberto .nav-itens { max-height:2000px; }

.sidebar nav.nav-rico .nav-item { display:flex; align-items:center; gap:10px; padding:9px 10px; margin:1px 0;
    border-radius:8px; border-left:none; font-size:13.5px; color:var(--text); text-decoration:none; }
.sidebar nav.nav-rico .nav-item .nav-texto { flex:1; min-width:0; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; }
.sidebar nav.nav-rico .nav-filho { margin-left:14px; }
.sidebar nav.nav-rico .nav-item:hover { color:var(--accent); background:rgba(127,127,127,.10); }
.sidebar nav.nav-rico .nav-item:hover { background:color-mix(in srgb, var(--accent) 12%, transparent); }
.sidebar nav.nav-rico .nav-item.nav-active { font-weight:700; color:var(--accent);
    background:rgba(127,127,127,.16); box-shadow:inset 3px 0 0 var(--accent); }
.sidebar nav.nav-rico .nav-item.nav-active { background:color-mix(in srgb, var(--accent) 18%, transparent); }

.sidebar nav.nav-rico .nav-ico { width:17px; height:17px; flex:0 0 auto; opacity:.75; }
.sidebar nav.nav-rico .nav-item.nav-active .nav-ico,
.sidebar nav.nav-rico .nav-grupo-link.nav-active .nav-ico { opacity:1; }
.sidebar nav.nav-rico .nav-grupo .nav-ico { width:15px; height:15px; }

.sidebar nav.nav-rico .nav-badge { flex:0 0 auto; min-width:20px; padding:1px 7px; border-radius:999px;
    background:var(--accent); color:var(--on-accent); font-size:11px; font-weight:700; text-align:center; }
/* 31/08/2026: selo fixo tipo "Beta" — cor própria, NÃO var(--accent),
   de propósito: essa cor muda por White Label, e "ainda não está 100%"
   precisa parecer igual em qualquer empresa, não competir com a marca. */
.sidebar nav.nav-rico .nav-badge-beta { background:#a78bfa; color:#1e1b2e; }
.badge.beta { background:rgba(167,139,250,.18); color:#a78bfa; }

/* Busca no menu + favoritos (26/08/2026, Prioridade 6). */
.sidebar nav.nav-rico .nav-busca { padding:2px 10px 10px; }
.sidebar nav.nav-rico .nav-busca input { width:100%; box-sizing:border-box; padding:7px 10px; font-size:12.5px;
    border-radius:8px; border:1px solid var(--border); background:var(--input-bg); color:var(--input-text); }
.sidebar nav.nav-rico .nav-busca input:focus {
    outline:none; border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(127,127,127,.18);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
/* escondido pela busca: nada mostrado, grupo some junto se ficar vazio */
.sidebar nav.nav-rico .nav-busca-oculto { display:none !important; }

/* Estrelinha de favorito — span, não button, pra não aninhar elemento
   interativo dentro do <a> (HTML inválido). O clique é interceptado no
   JS antes de deixar o link navegar. */
.sidebar nav.nav-rico .nav-favorito { flex:0 0 auto; opacity:.35; font-size:13px; line-height:1;
    padding:2px; border-radius:5px; }
.sidebar nav.nav-rico .nav-item:hover .nav-favorito { opacity:.6; }
.sidebar nav.nav-rico .nav-favorito:hover { opacity:1 !important; }
.sidebar nav.nav-rico .nav-favorito.favorito { opacity:1; color:var(--accent); }
.sidebar nav.nav-rico .favoritos-bloco .nav-grupo { color:var(--accent); }

/* Contorno de foco visível (teclado) — o navegador já dá um padrão, mas
   fica difícil de ver em tema escuro sem isto. Mesmo acento usado nos
   campos de formulário, pra ficar consistente com o resto da tela. */
.sidebar nav a:focus-visible,
.sidebar nav button:focus-visible,
.sidebar nav span[tabindex]:focus-visible,
.sidebar-toggle:focus-visible {
    outline:2px solid var(--accent); outline-offset:1px; border-radius:6px;
}

/* ---------------------------------------------------------------------
   Barra recolhida (modo trilho): sobra tela e fica só o ícone.
   Nesse estado nenhum grupo recolhe — sem rótulo e sem seta, o ícone é a
   única pista, e esconder itens deixaria o menu sem saída.
   ------------------------------------------------------------------ */
.sidebar.recolhida { width:64px; }
/* Recolhida a marca vira só o ícone, centralizado: é a identidade do
   sistema e some junto com o resto deixaria o topo vazio. */
.sidebar.recolhida .sidebar-topo { padding:0; flex-direction:column; align-items:center; gap:10px; }
.sidebar.recolhida .sidebar-brand { padding:0 0 10px; justify-content:center; flex:0 0 auto; }
.sidebar.recolhida .sidebar-brand-name { display:none; }
.sidebar.recolhida .sidebar-brand-ico { width:30px; height:30px; }
.sidebar.recolhida .sidebar-toggle svg { transform:rotate(180deg); }
.sidebar.recolhida nav.nav-rico { padding:14px 8px 0; }
.sidebar.recolhida nav.nav-rico .nav-texto,
.sidebar.recolhida nav.nav-rico .nav-chevron,
.sidebar.recolhida nav.nav-rico span.nav-grupo,
/* o cabeçalho que é link guarda o rótulo num span sem classe; sem esta
   linha sobrava um pedaço do texto cortado ao lado do ícone */
.sidebar.recolhida nav.nav-rico .nav-grupo > span { display:none; }
.sidebar.recolhida nav.nav-rico .nav-item,
.sidebar.recolhida nav.nav-rico .nav-grupo { justify-content:center; padding:11px 0; gap:0; position:relative; }
.sidebar.recolhida nav.nav-rico .nav-filho { margin-left:0; }
.sidebar.recolhida nav.nav-rico .nav-itens { max-height:none; overflow:visible; }
.sidebar.recolhida nav.nav-rico .nav-ico { width:19px; height:19px; }
.sidebar.recolhida nav.nav-rico .nav-grupo .nav-ico { width:17px; height:17px; }
/* separador no lugar do cabeçalho, que some */
.sidebar.recolhida nav.nav-rico .nav-bloco + .nav-bloco,
.sidebar.recolhida nav.nav-rico .nav-bloco + .nav-item,
.sidebar.recolhida nav.nav-rico .nav-item + .nav-bloco { border-top:1px solid var(--border);
    margin-top:6px; padding-top:6px; }
/* contador vira bolinha no canto do ícone */
.sidebar.recolhida nav.nav-rico .nav-badge { position:absolute; top:5px; right:11px; min-width:8px; height:8px;
    padding:0; font-size:0; line-height:0; border:2px solid var(--card); }
.main-content { flex:1; min-width:0; }
@media (max-width:820px) {
    .app-shell { flex-direction:column; }
    .sidebar { width:100%; height:auto; position:relative; flex-direction:row; align-items:center; overflow-x:auto; padding:12px 16px; gap:4px; }
    .sidebar-brand { padding:0 16px 0 0; }
    /* faixa horizontal não recolhe: o botão some e o estado guardado é ignorado */
    .sidebar-toggle { display:none; }
    .sidebar.recolhida { width:100%; }
    .sidebar.recolhida .sidebar-brand { display:block; }
    .sidebar.recolhida nav.nav-rico .nav-texto { display:inline; }
    /* Busca e favoritos são pra menu vertical comprido — em faixa
       horizontal achatada (mobile) tudo já fica à vista de qualquer jeito,
       então somem em vez de brigar por espaço na faixa. */
    .sidebar nav.nav-rico .nav-busca,
    .sidebar nav.nav-rico .favoritos-bloco { display:none; }
    .sidebar nav { flex-direction:row; }
    .sidebar nav a { white-space:nowrap; border-left:none; border-bottom:3px solid transparent; }
    .sidebar nav a.nav-active { border-left:none; border-bottom-color:var(--accent); }
    /* Em faixa horizontal o cabeçalho de seção só rouba espaço: some com
       o que é rótulo puro e achata os filhos. O cabeçalho que é link
       (Chamados) vira um item normal, senão a fila ficaria inacessível. */
    .sidebar nav span.nav-grupo { display:none; }
    .sidebar nav a.nav-grupo-link { padding:10px 20px; font-size:14px; font-weight:400;
        text-transform:none; letter-spacing:normal; color:var(--text);
        border-left:none; border-bottom:3px solid transparent; }
    .sidebar nav a.nav-grupo-link.nav-active { border-bottom-color:var(--accent); font-weight:700; }
    .sidebar nav a.nav-filho { padding-left:20px; font-size:14px; }

    /* Menu rico em faixa horizontal: os blocos deixam de ser caixas e os
       filhos entram direto na fila. O recolher some — um grupo fechado
       aqui esconderia itens sem nenhuma pista de como reabrir. */
    .sidebar nav.nav-rico { padding:0; }
    .sidebar nav.nav-rico .nav-bloco,
    .sidebar nav.nav-rico .nav-grupo-linha,
    .sidebar nav.nav-rico .nav-itens { display:contents; }
    .sidebar nav.nav-rico .nav-chevron { display:none; }
    .sidebar nav.nav-rico span.nav-grupo { display:none; }
    .sidebar nav.nav-rico a.nav-grupo-link { display:flex; padding:10px 14px; font-size:14px; font-weight:400;
        text-transform:none; letter-spacing:normal; color:var(--text); border-radius:0;
        border-bottom:3px solid transparent; background:transparent; }
    .sidebar nav.nav-rico a.nav-grupo-link.nav-active { background:transparent;
        border-bottom-color:var(--accent); font-weight:700; }
    .sidebar nav.nav-rico .nav-item { padding:10px 14px; margin:0; border-radius:0; white-space:nowrap;
        border-bottom:3px solid transparent; }
    .sidebar nav.nav-rico .nav-filho { margin-left:0; }
    .sidebar nav.nav-rico .nav-item.nav-active { background:transparent; box-shadow:none;
        border-bottom-color:var(--accent); }
}

.page-head { padding:26px 32px 0; }
.page-head h1 { margin:6px 0 5px; font-size:24px; letter-spacing:-.3px; }
.page-head .count { color:var(--muted); font-size:14px; }
.page-head a.back { color:var(--muted); text-decoration:none; font-size:13px; font-weight:600;
    display:inline-block; transition:color var(--transicao); }
.page-head a.back:hover { color:var(--accent); }

/* Cabeçalho da tela de chamado: título + ações (Iniciar/Mesclar/Finalizar) lado a lado */
.ticket-head-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:8px; }
.ticket-head-row h1 { margin:0 0 4px; }
.ticket-head-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* Largura (18/09/2026, regra definida com o usuário): telas de CADASTRO,
   formulário e visualização de digitação têm teto de 1440px, encostadas no
   menu (não centralizadas — não abre vão entre o menu e o conteúdo), igual
   à tela de Atendimento; formulário muito largo fica difícil de acompanhar.
   Telas de TABELA/LISTA (Chamados, Máquinas, Clientes...) NÃO têm teto:
   aproveitam o monitor largo. Quem tem tabela como filho direto do
   container (ou dentro de .table-wrap, ou de um cartão) é lista. */
.container { padding:24px 32px; max-width:1440px; overflow-x:auto; }
.container:has(> table),
.container:has(> .table-wrap),
.container:has(> .card > table),
.container:has(> .card > .table-wrap),
.container:has(> form > table),
.container:has(> form > .table-wrap) { max-width:100%; }
.container.grid { display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
/* Item de grid tem min-width:auto por padrão: um cartão com tabela larga dentro
   estoura a coluna em vez de encolher, e aí quem rola de lado é a área de
   conteúdo inteira (cabeçalho do cartão junto). Com min-width:0 o cartão
   respeita a coluna e quem rola é só a .table-wrap de dentro. */
.container.grid > * { min-width:0; }

table { width:100%; border-collapse:separate; border-spacing:0; background:var(--card);
    border:1px solid var(--border); border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra); }
/* Tamanhos aprovados no mockup de 17/09/2026: texto de tabela 12,5px,
   cabeçalho de coluna e selos 10,5px. */
td, th { padding:12px 14px; border-bottom:1px solid var(--border); text-align:left; font-size:12.5px; }
th { color:var(--muted); font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px;
    background:rgba(127,127,127,.06); white-space:nowrap; }
tr:last-child td { border-bottom:none; }
/* o tom de realce vem do acento do tema, e não de um azul fixo que só
   ficava certo na paleta padrão */
tr.row { transition:background var(--transicao); }
tr.row:hover { background:rgba(127,127,127,.07); cursor:pointer; }
tr.row:hover { background:color-mix(in srgb, var(--accent) 8%, transparent); }
a.row-link { color:inherit; text-decoration:none; display:block; }
a.row-link:hover { color:var(--accent); }

.badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:10.5px; font-weight:700;
    letter-spacing:.2px; white-space:nowrap; }
.badge.online { background:rgba(34,197,94,0.15); color:var(--ok); }
.badge.offline { background:rgba(239,68,68,0.15); color:var(--bad); }
.badge.av-ok { background:rgba(34,197,94,0.15); color:var(--ok); }
.badge.av-bad { background:rgba(245,158,11,0.15); color:var(--warn); }
.badge.on { background:rgba(34,197,94,0.15); color:var(--ok); }
.badge.off { background:rgba(148,163,184,0.15); color:var(--muted); }
/* Carteira de clientes (20/09/2026): selo de quem e o responsavel. So variaveis do tema, entao
   acompanha White Label e claro/escuro. "minha" = eu sou o responsavel (destaque solido). */
.badge.carteira { background:color-mix(in srgb, var(--accent) 15%, transparent); color:var(--accent); white-space:nowrap; }
.badge.carteira.minha { background:var(--accent); color:var(--on-accent, #fff); }
.badge.alerta { background:rgba(245,158,11,0.15); color:var(--warn); }
.badge.critico { background:rgba(236,72,153,0.18); color:#ec4899; }
.badge.fila { background:rgba(56,189,248,0.15); color:var(--accent); }

/* Status dos técnicos no Painel de Status (Chamados + GoTo Connect),
   pedido do usuário em 20/08/2026 — margem generosa é o "1 linha de
   espaço" abaixo do último computador. */
.pessoas-secao { margin-top:28px; padding-top:8px; border-top:1px solid var(--border);
    display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start; }
.pessoas-linha { margin-top:14px; }
.pessoas-titulo { display:block; font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--muted); margin:0 0 8px; font-weight:700; }
.pessoas-chips { display:flex; flex-wrap:wrap; gap:8px; }
/* Fila empilhada à direita (16/09/2026, pedido do usuário): o resto
   (Chamados/GoTo/WhatsApp) fica na coluna principal, sem mudar nada
   deles — só a Fila sai da linha horizontal e vira uma pilha vertical
   no espaço que sobra à direita, limitada a 6 itens (ver
   render_status_tecnicos() em atende/monitor_board.php). */
.pessoas-coluna-principal { flex:1 1 auto; min-width:0; }
.pessoas-coluna-fila { flex:0 0 220px; }
.fila-pilha { display:flex; flex-direction:column; gap:6px; }

.empty { color:var(--muted); padding:44px 24px; text-align:center; font-size:14px; line-height:1.6;
    background:var(--card); border:1px dashed var(--border); border-radius:var(--raio); }

.card { background:var(--card); border:1px solid var(--border); border-radius:var(--raio); padding:22px;
    box-shadow:var(--sombra); }
/* barrinha de acento antes do título, pra dar hierarquia sem gritar */
.card h2 { margin:0 0 16px; font-size:15px; font-weight:700; color:var(--text); letter-spacing:-.1px;
    display:flex; align-items:center; gap:9px; }
.card h2::before { content:''; width:3px; height:15px; border-radius:2px; background:var(--accent); flex:0 0 auto; }
.card.full { grid-column: 1 / -1; }
/* Telas de visualização (detalhe de máquina, chamado, cliente): rótulo à
   esquerda, valor à direita, com divisória sutil pra separar as linhas.
   O `dd` precisa de margin:0 — o padrão do navegador é 40px à esquerda, que
   dentro do grid desalinhava a coluna dos valores. */
dl { display:grid; grid-template-columns:minmax(110px,150px) 1fr; column-gap:14px;
    font-size:14px; margin:0; }
dt, dd { padding:9px 0; border-top:1px solid rgba(127,127,127,.14); }
dt { color:var(--muted); font-size:12.5px; font-weight:600; }
dd { margin:0; overflow-wrap:anywhere; }
dl > dt:first-of-type, dl > dt:first-of-type + dd { border-top:none; padding-top:0; }
@media (max-width:520px) {
    dl { grid-template-columns:1fr; column-gap:0; }
    dt { padding:10px 0 0; }
    dd { padding:3px 0 10px; border-top:none; }
    dl > dt:first-of-type + dd { padding-top:3px; }
}

/* Formulários (login, cadastros do admin/técnico, troca de senha) */
form { display:grid; gap:16px; }
label { display:block; font-weight:600; font-size:12.5px; color:var(--text); margin-bottom:6px;
    letter-spacing:.1px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url],
input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=search],
select, textarea {
    width:100%; padding:8px 13px; border-radius:var(--raio-sm); border:1px solid var(--border);
    background:var(--input-bg); color:var(--text); font:inherit;
    transition:border-color var(--transicao), box-shadow var(--transicao);
}
/* Campo digitável é o ÚNICO que fica menor que o resto (pedido do usuário,
   17/09/2026: "a única que está muito grande é a do campo digitável").
   O `font:inherit` acima zerava o tamanho e o campo herdava 16px do corpo;
   o tamanho explícito vem DEPOIS dele. Texto longo (textarea) fica em
   12,5px, que é o tamanho de leitura do resto da tela. */
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url],
input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=search],
select { font-size:11.5px; }
textarea { font-size:12.5px; }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover { border-color:var(--muted); }
/* anel de foco tirado do acento do tema, no lugar do azul fixo de antes */
input:focus, select:focus, textarea:focus {
    outline:none; border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(127,127,127,.18);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
input:disabled, select:disabled, textarea:disabled { opacity:.55; cursor:not-allowed; }
textarea { min-height:110px; resize:vertical; line-height:1.6; }
select { cursor:pointer; }
input[type=checkbox], input[type=radio] { accent-color:var(--accent); cursor:pointer; }
input[type=file] { width:100%; padding:9px 13px; border-radius:var(--raio-sm); border:1px dashed var(--border);
    background:var(--input-bg); color:var(--muted); font-size:13px; }

form button[type="submit"] {
    display:inline-block; width:auto; padding:11px 20px; border-radius:var(--raio-sm); border:none;
    background:var(--accent); color:var(--on-accent); font-weight:700; font-size:14px; cursor:pointer;
    text-align:center; transition:filter var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
form button[type="submit"]:hover { filter:brightness(1.08); box-shadow:var(--sombra); }
form button[type="submit"]:active { transform:translateY(1px); }

/* 31/08/2026: faltava — "class=link" já era usado em vários lugares
   (checklist do chamado, apagar entrada do cofre, gerência) pra virar um
   link discreto de texto, mas sem esta regra caía na pílula cheia acima
   (mesma especificidade "form button[type=...]", por isso repete o
   seletor com "form" na frente — só de classe perdia a disputa). */
form button.link {
    display:inline; width:auto; padding:0; border:none; background:none;
    color:var(--muted); font-weight:400; font-size:13px; cursor:pointer;
    text-align:left; box-shadow:none;
}
form button.link:hover { color:var(--text); text-decoration:underline; filter:none; box-shadow:none; }
form button.link:active { transform:none; }

.form-row { display:flex; gap:16px; flex-wrap:wrap; }
.form-row > * { flex:1; min-width:190px; }
@media (max-width:520px) { .form-row { gap:0; } }

/* Bloco "afundado" dentro de um cartão: usado pra agrupar um trecho opcional
   do formulário (ex.: cadastrar pessoa nova ao abrir chamado). Usa var(--bg),
   que é sempre um degrau abaixo do cartão em qualquer paleta do White Label. */
.painel-recuo { padding:15px; border:1px solid var(--border); border-radius:var(--raio-sm);
    background:var(--bg); margin-bottom:16px; }
.painel-recuo > :last-child { margin-bottom:0; }

/* Barras horizontais dos dashboards (por categoria, por cliente).
   Antes era grid com coluna fixa de 140px, que espremia o rótulo no celular. */
.linha-barra { display:grid; grid-template-columns:minmax(80px,1.2fr) 2fr auto; gap:10px;
    align-items:center; margin-bottom:8px; font-size:13px; }
.linha-barra > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.linha-barra > span:last-child { font-weight:700; color:var(--muted); min-width:24px; text-align:right; }
.barra { background:rgba(127,127,127,.16); border-radius:999px; height:9px; overflow:hidden; }
.barra > i { display:block; height:100%; border-radius:999px; background:var(--accent);
    transition:width .35s ease; }

.form-page { min-height:100vh; display:grid; place-items:center; padding:24px; }
.form-box { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:34px;
    width:100%; max-width:390px; box-shadow:var(--sombra-forte); }
.form-box h1 { margin:0 0 5px; font-size:21px; letter-spacing:-.3px; }
.form-box p.sub { color:var(--muted); font-size:13px; margin:0 0 22px; line-height:1.5; }
.form-box button[type="submit"], .btn {
    display:inline-block; margin-top:6px; width:100%; padding:11px 14px; border-radius:var(--raio-sm); border:none;
    background:var(--accent); color:var(--on-accent); font-weight:700; font-size:14px; cursor:pointer;
    text-align:center; text-decoration:none;
    transition:filter var(--transicao), transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.btn:hover { filter:brightness(1.08); box-shadow:var(--sombra); }
.btn:active { transform:translateY(1px); }
.form-box .links { margin-top:18px; font-size:13px; text-align:center; }
.form-box .links a { display:block; margin-top:6px; }
.checkbox-line { display:flex; align-items:center; gap:8px; margin:14px 0 6px; font-weight:400; font-size:13px; color:var(--muted); }
.checkbox-line input[type=checkbox] { margin:0; }
.password-field { position:relative; }
.password-field input { padding-right:40px; }
/* especificidade maior que ".form-box button[type=submit]"/".btn" de
   propósito — senão o botão do olho herda width:100% do botão Entrar */
.password-field .senha-toggle { position:absolute; right:10px; top:50%; transform:translateY(-50%);
    background:none; border:0; padding:4px; margin:0; width:auto;
    display:flex; color:var(--muted); cursor:pointer; }
.password-field .senha-toggle:hover { color:var(--text); }

/* Avisos com barra lateral colorida: dá pra saber o que é sem ler */
.alert { padding:12px 15px; border-radius:var(--raio-sm); font-size:13.5px; margin-bottom:14px;
    line-height:1.55; border-left-width:3px; border-left-style:solid; }
.alert.error { background:rgba(239,68,68,0.10); color:var(--bad); border:1px solid rgba(239,68,68,0.25);
    border-left:3px solid var(--bad); }
.alert.success { background:rgba(34,197,94,0.10); color:var(--ok); border:1px solid rgba(34,197,94,0.25);
    border-left:3px solid var(--ok); }
.alert.info { background:rgba(127,127,127,.10); color:var(--text); border:1px solid rgba(127,127,127,.28);
    border-left:3px solid var(--accent); }
.alert.info { background:color-mix(in srgb, var(--accent) 10%, transparent);
    border-color:color-mix(in srgb, var(--accent) 30%, transparent);
    border-left-color:var(--accent); }
.alert.warn { background:rgba(245,158,11,0.10); color:var(--warn); border:1px solid rgba(245,158,11,0.25);
    border-left:3px solid var(--warn); }
.alert strong { color:inherit; }

/* Admin: cards de clientes / tokens */
.client-card { background:var(--card); border:1px solid var(--border); border-radius:var(--raio);
    padding:18px 22px; margin-bottom:14px; box-shadow:var(--sombra);
    transition:border-color var(--transicao), box-shadow var(--transicao); }
.client-card:hover { border-color:var(--muted); box-shadow:var(--sombra-forte); }
.client-card .row { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; cursor:default; }
.client-card .row:hover { background:none; }
.client-card h3 { margin:0 0 3px; font-size:15.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.client-card .meta { color:var(--muted); font-size:12.5px; line-height:1.6; }
.token-box { font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; background:var(--input-bg);
    border:1px solid var(--border); border-radius:var(--raio-sm); padding:10px 12px; font-size:13px; word-break:break-all; }
.inline-form { display:inline; }
.btn.small { width:auto; padding:7px 14px; font-size:12.5px; margin-top:0; }
.btn.secondary { background:transparent; border:1px solid var(--border); color:var(--text); }
.btn.secondary:hover { border-color:var(--accent); color:var(--accent); filter:none; }
.btn.danger { background:var(--bad); color:#fff; }
.btn[disabled] { opacity:.5; cursor:not-allowed; filter:none; transform:none; box-shadow:none; }

/* HelpDesk: badges de status/prioridade e thread de mensagens */
.badge.status-novo { background:rgba(239,68,68,0.15); color:var(--bad); }
.badge.status-aguardando_tecnico { background:rgba(245,158,11,0.15); color:var(--warn); }
.badge.status-aguardando_cliente { background:rgba(127,127,127,.15); color:var(--accent); }
.badge.status-aguardando_cliente { background:color-mix(in srgb, var(--accent) 16%, transparent); }
.badge.status-finalizado, .badge.status-encerrado_mesclagem { background:rgba(34,197,94,0.15); color:var(--ok); }
.badge[class*="status-custom_"] { background:rgba(148,163,184,0.15); color:var(--muted); }
.badge.priority-baixa { background:rgba(148,163,184,0.15); color:var(--muted); }
.badge.priority-media { background:rgba(245,158,11,0.15); color:var(--warn); }
.badge.priority-alta { background:rgba(239,68,68,0.15); color:var(--bad); }

/* Pedido de suporte remoto: usa a cor de destaque do White Label, não uma
   das cores de status, para não competir com "novo"/"aguardando". */
.badge.remoto { background:rgba(127,127,127,.18); color:var(--accent); border:1px solid var(--accent); }
.badge.remoto { background:color-mix(in srgb, var(--accent) 18%, transparent); }

.thread { display:flex; flex-direction:column; gap:12px; margin:16px 0; }
.msg { max-width:75%; padding:12px 15px; border-radius:12px; font-size:14px; }
.msg .meta { font-size:12px; color:var(--muted); margin-bottom:4px; font-weight:600; }
.msg.client { align-self:flex-start; background:var(--card); border:1px solid var(--border); }
.msg.admin { align-self:flex-end; background:var(--accent); color:var(--on-accent); }
.msg.admin .meta { color:#0b3a52; }
.msg p { margin:0; white-space:pre-wrap; }
.msg-body { word-break:break-word; }

/* Mensagem interna (27/08/2026, chamados): precisa ficar visualmente
   diferente de qualquer resposta normal, mesmo lado a lado — é o que
   lembra o técnico que aquilo NUNCA chegou ao cliente. Sobrescreve o
   azul de .msg.admin de propósito (mesma especificidade, vem depois no
   arquivo — sem !important). */
.msg.msg-interna { background:rgba(245,158,11,.16); color:var(--text); border:1px dashed var(--warn); }
.msg.msg-interna .meta { color:var(--warn); }
.msg-body img { max-width:100%; height:auto; border-radius:6px; margin-top:6px; display:block; }
.msg-body p { margin:0 0 6px; }
.msg-body p:last-child { margin-bottom:0; }
/* Referência do anexo embaixo do texto (04/09/2026): só documenta que
   foi mandado ali junto — currentColor pra funcionar tanto na bolha
   clara (.msg.client) quanto na de destaque (.msg.admin). */
.msg-anexos { margin-top:8px; padding-top:8px; border-top:1px solid currentColor; border-top-color:rgba(127,127,127,.3); display:flex; flex-direction:column; gap:4px; }
.msg-anexo { font-size:12.5px; color:inherit; opacity:.85; text-decoration:underline; }
.msg-anexo:hover { opacity:1; }

/* Editor de texto rico (resposta/finalização de chamado). Tudo numa linha
   só (19/08/2026, pedido do usuário — antes cada botão/campo quebrava
   numa linha, ocupando altura à toa): `nowrap` + os selects encolhendo
   com `min-width:0` em vez de manter a largura do texto mais comprido.
   `overflow-x:auto` é só rede de segurança pra tela muito estreita, não
   deve entrar em ação no uso normal. */
.rich-editor { border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--input-bg); }
.rich-editor-toolbar { display:flex; gap:6px; align-items:center; flex-wrap:nowrap; padding:8px; background:var(--card); border-bottom:1px solid var(--border); overflow-x:auto; }
.rich-editor-btn { flex:0 0 auto; padding:6px 10px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer; font-size:13px; font-weight:700; }
.rich-editor-btn:hover { border-color:var(--accent); color:var(--accent); }
.rich-editor-select { flex:0 1 auto; min-width:0; max-width:130px; padding:5px 8px; border-radius:6px; border:1px solid var(--border); background:var(--input-bg); color:var(--text); font-size:13px; text-overflow:ellipsis; }
.rich-editor-color { flex:0 0 auto; width:32px; height:30px; padding:2px; border-radius:6px; border:1px solid var(--border); background:transparent; cursor:pointer; }
.rich-editor-area { min-height:120px; max-height:400px; overflow-y:auto; padding:12px; font-size:14px; color:var(--text); outline:none; }
.rich-editor-area img { max-width:100%; height:auto; }
.rich-editor-uploading { color:var(--muted); font-style:italic; }

/* Textos de apoio em formulários de configuração */
.hint { color:var(--muted); font-size:12px; margin:4px 0 0; line-height:1.5; }

/* Logo no topo das telas de login do admin/técnico */
.form-box .logo-box { text-align:center; margin-bottom:18px; }
.form-box .logo-box img { max-width:180px; max-height:60px; width:auto; height:auto; margin:0 auto; display:block; }

/* Prévia do logo na tela de configurações do sistema */
.logo-preview { display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:8px; min-height:72px; }
.logo-preview.light { background:#ffffff; }
.logo-preview.dark { background:var(--bg); }
.logo-preview img { max-width:100%; max-height:48px; width:auto; height:auto; }

/* Avatar do usuário (topo e tela de perfil) */
.avatar-placeholder { display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--accent); color:var(--on-accent); font-weight:700; flex-shrink:0; }
.avatar-img { border-radius:50%; object-fit:cover; flex-shrink:0; display:block; }

/* Modal simples (ex: instruções de instalação) */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:100; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:24px; max-width:560px; width:100%; max-height:85vh; overflow-y:auto; }
.modal-box code { background:var(--input-bg); padding:1px 6px; border-radius:4px; font-size:13px; }

/* Filtros em pílula das listagens (ex: fila de chamados do técnico) */
.tabs { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; align-items:center; }
/* Aba inativa sem fundo e sem borda, texto secundário; a ativa é a pílula
   sólida (mockup aprovado em 17/09/2026). */
.tabs a { padding:8px 16px; border-radius:999px; background:transparent; border:1px solid transparent;
    color:var(--muted); font-weight:600; font-size:12.5px; text-decoration:none;
    transition:border-color var(--transicao), color var(--transicao), background var(--transicao); }
.tabs a:hover { border-color:var(--accent); color:var(--accent); }
.tabs a.active { background:var(--accent); color:var(--on-accent); border-color:var(--accent);
    box-shadow:var(--sombra); }
.tabs a.btn.small { margin-left:auto; }
/* Botão de ação dentro da barra de abas (+ Abrir chamado, + Nova licença,
   + Adicionar contato): a regra .tabs a (aba transparente) vencia .btn e o
   botão virava texto solto. Aqui ele volta a ser botão de verdade. */
.tabs a.btn { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700; }
.tabs a.btn.secondary { background:transparent; color:var(--text); border-color:var(--border); }
.tabs a.btn:hover { filter:brightness(1.08); }
.tabs a.btn.small.active, .tabs a.btn:hover { color:var(--on-accent); }
.tabs a.btn.secondary:hover { color:var(--accent); border-color:var(--accent); background:transparent; }

/* Barra de ferramentas das listagens (filtro + busca + exportar) */
.toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.toolbar-group { display:flex; align-items:center; gap:8px; margin:0; }
.search-box { display:flex; align-items:center; gap:6px; margin:0; flex:1; min-width:220px; }
.search-box input[type=search] { flex:1; min-width:160px; padding:8px 14px; border-radius:999px;
    border:1px solid var(--border); background:var(--input-bg); color:var(--text); font:inherit; font-size:11.5px; }

/* Colunas ordenáveis */
th.sortable { padding:0; }
th.sortable a { display:block; padding:10px 12px; color:var(--muted); text-decoration:none; font-weight:600; white-space:nowrap; }
th.sortable a:hover { color:var(--accent); background:rgba(127,127,127,.08); }
th.sortable a:hover { background:color-mix(in srgb, var(--accent) 8%, transparent); }

/* Tabelas largas rolam dentro do próprio bloco */
.table-wrap { overflow-x:auto; }

/* Anexos de chamado */
.attachment-list { display:flex; flex-direction:column; gap:8px; }
.attachment { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; text-decoration:none; color:var(--text); font-size:14px; }
.attachment:hover { border-color:var(--accent); color:var(--accent); }
.attachment-name { word-break:break-all; }
.attachment-size { color:var(--muted); font-size:12px; white-space:nowrap; }
.attachment-row { display:flex; align-items:center; gap:8px; }
.attachment-row .attachment { flex:1; min-width:0; }
.attachment-row .attachment-apagar { margin:0; }
.attachment-remove { flex-shrink:0; width:28px; height:28px; border-radius:8px; border:1px solid var(--border); background:none; color:var(--muted); font-size:16px; line-height:1; cursor:pointer; }
.attachment-remove:hover { border-color:var(--erro); color:var(--erro); }

/* Anexo compacto dentro da resposta (04/09/2026): fica escondido atrás
   de um botão; quando aberto, ocupa só uma faixa estreita ao lado do
   editor, em vez de uma caixa grande embaixo dele. */
.resposta-corpo { display:flex; gap:14px; align-items:flex-start; }
.resposta-editor { flex:1 1 auto; min-width:0; }
.resposta-anexo { flex:0 0 26%; min-width:200px; }
.resposta-anexo .file-attach-hint { font-size:12.5px; }
@media (max-width:760px) {
    .resposta-corpo { flex-direction:column; }
    .resposta-anexo { flex:1 1 auto; width:100%; }
}

/* Campo de anexos com colar/arrastar */
.file-attach { border:1px dashed var(--border); border-radius:10px; padding:14px; }
.file-attach.dragging { border-color:var(--accent); background:rgba(127,127,127,.08); }
.file-attach.dragging { background:color-mix(in srgb, var(--accent) 8%, transparent); }
.file-attach-hint { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.file-attach-link { color:var(--accent); cursor:pointer; text-decoration:underline; display:inline; font-weight:600; margin:0; }
.file-attach-input { margin-top:10px; font-size:13px; }
.file-attach-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.file-chip { display:inline-flex; align-items:center; gap:8px; padding:5px 10px; border-radius:999px; background:rgba(127,127,127,.14); color:var(--text); font-size:12px; }
.file-chip { background:color-mix(in srgb, var(--accent) 13%, transparent); }
.file-chip-remove { background:none; border:none; color:inherit; cursor:pointer; font-size:15px; line-height:1; padding:0; }
.file-attach-warning { margin:8px 0 0; color:var(--warn); font-size:12px; }

/* Mural de avisos: a tela é dividida entre os avisos publicados.
   1 = tela inteira · 2 = metades · 3 = um em cima, dois embaixo · 4 = quadrantes.
   A altura desconta o cabeçalho e o título da página pra ocupar o que sobra. */
.mural { display:grid; gap:16px; height:calc(100vh - 190px); min-height:420px; }
.mural[data-total="1"] { grid-template-columns:1fr; grid-template-rows:1fr; }
.mural[data-total="2"] { grid-template-columns:1fr 1fr; grid-template-rows:1fr; }
.mural[data-total="3"] { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.mural[data-total="3"] > :first-child { grid-column:1 / -1; }
.mural[data-total="4"] { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }

.mural-card { display:flex; flex-direction:column; min-height:0; background:var(--card);
    border:1px solid var(--border); border-left:5px solid var(--accent); border-radius:12px; padding:20px 22px; }
.mural-titulo { margin:0 0 10px; font-size:20px; line-height:1.25; color:var(--text); }
.mural-corpo { flex:1; min-height:0; overflow-y:auto; font-size:15px; }
.mural-rodape { margin-top:12px; padding-top:10px; border-top:1px solid var(--border);
    color:var(--muted); font-size:12px; }

/* Cor da faixa lateral, pra dar peso visual ao aviso */
.mural-card.accent-neutro  { border-left-color:var(--muted); }
.mural-card.accent-info    { border-left-color:var(--accent); }
.mural-card.accent-atencao { border-left-color:var(--warn); }
.mural-card.accent-urgente { border-left-color:var(--bad); }
.mural-card.accent-urgente .mural-titulo { color:var(--bad); }

/* Num aviso só, o texto pode respirar mais */
.mural[data-total="1"] .mural-titulo { font-size:26px; }
.mural[data-total="1"] .mural-corpo { font-size:16px; }

/* Celular e tablet: empilha tudo numa coluna e solta a altura */
@media (max-width:820px) {
    .mural, .mural[data-total="2"], .mural[data-total="3"], .mural[data-total="4"] {
        grid-template-columns:1fr; grid-template-rows:none; height:auto; min-height:0;
    }
    .mural[data-total="3"] > :first-child { grid-column:auto; }
    .mural-card { min-height:200px; }
    .mural-corpo { overflow-y:visible; }
    .mural[data-total="1"] .mural-titulo { font-size:21px; }
}

/* Base de conhecimento: corpo do artigo e etiquetas */
.kb-body { line-height:1.7; font-size:15px; }
.kb-body h1, .kb-body h2, .kb-body h3 { margin:22px 0 8px; line-height:1.3; }
.kb-body h1 { font-size:21px; } .kb-body h2 { font-size:18px; color:var(--text); } .kb-body h3 { font-size:16px; }
.kb-body p { margin:0 0 12px; }
.kb-body ul, .kb-body ol { margin:0 0 12px; padding-left:22px; }
.kb-body li { margin-bottom:4px; }
.kb-body img { max-width:100%; height:auto; border-radius:8px; border:1px solid var(--border); margin:8px 0; display:block; }
.kb-body pre, .kb-body code { background:var(--input-bg); border-radius:6px; }
.kb-body pre { padding:12px; overflow-x:auto; }
.kb-body code { padding:1px 6px; font-size:13px; }
.kb-body a { text-decoration:underline; }
.kb-body table { margin:12px 0; }
.kb-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
.kb-tag { padding:4px 11px; border-radius:999px; border:1px solid var(--border); color:var(--muted); font-size:12px; text-decoration:none; }
.kb-tag:hover { border-color:var(--accent); color:var(--accent); }

/* ---------------------------------------------------------------------
   WhatsApp: lista de conversas à esquerda, conversa à direita, no
   formato do WhatsApp Web. A altura é fixa (viewport menos cabeçalho)
   pra que só a thread role, e não a página inteira.
   ------------------------------------------------------------------ */
.wa-layout { display:grid; grid-template-columns:320px 1fr; gap:16px;
    height:calc(100vh - 210px); min-height:460px;
    /* Limite de largura (17/09/2026, pedido do usuário: em monitor bem
       largo a coluna da conversa ia até a borda da tela e ficava difícil
       de ler). Sem limite pra ALTURA — ali "quanto mais melhor", só a
       largura precisava de teto. Encostado no menu (esquerda), não
       centralizado — centralizar abria um vão entre o menu lateral e a
       lista de conversas, que ficaria "flutuando" no meio da tela. */
    max-width:1440px; }
.wa-lista { display:flex; flex-direction:column; background:var(--card);
    border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.wa-busca { padding:10px; border-bottom:1px solid var(--border); }
.wa-busca input { margin:0; }
.wa-item { display:block; padding:12px 14px; border-bottom:1px solid var(--border);
    color:var(--text); text-decoration:none; }
.wa-item:hover { background:var(--row-hover, rgba(127,127,127,.08)); }
.wa-item.ativa { background:var(--row-hover, rgba(127,127,127,.12)); border-left:3px solid var(--accent); }
.wa-item-topo { display:flex; align-items:center; justify-content:space-between; gap:8px; }
/* Nome + empresa numa linha só (17/09/2026, pedido do usuário — economiza
   a linha que .wa-item-sub ocupava embaixo, "caixinha" de cada item fica
   mais baixa). Trunca a linha inteira com "..." se não couber, em vez de
   truncar nome e empresa cada um por conta — mais simples e já resolve o
   caso comum (nome curto, empresa longa, ou o contrário). */
.wa-item-nome-linha { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-item-topo strong { font-size:14px; }
.wa-item-empresa { color:var(--muted); font-size:12px; font-weight:400; }
.wa-item-departamento { display:inline-block; background:var(--accent); color:var(--on-accent);
    border-radius:4px; padding:1px 7px; font-size:10.5px; font-weight:700;
    letter-spacing:.03em; text-transform:uppercase; margin-top:3px; }
.wa-item-meta { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
.wa-badge { background:var(--bad); color:#fff; border-radius:999px; padding:1px 8px;
    font-size:11px; font-weight:700; flex:0 0 auto; }

/* Os dois blocos da coluna esquerda: "Meus" em cima e "Novos" embaixo,
   ambos visíveis ao mesmo tempo. "Meus" tem teto e rola por dentro depois
   de ~6 linhas — sem isso, uma manhã movimentada empurraria a fila de
   novos para fora da tela, que é justamente o que não pode acontecer. */
.wa-bloco { display:flex; flex-direction:column; min-height:0; border-bottom:1px solid var(--border); }
.wa-bloco:last-child { flex:1 1 auto; border-bottom:0; }
.wa-bloco-topo { display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:8px 14px; background:var(--bg); border-bottom:1px solid var(--border);
    font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
    color:var(--muted); flex:0 0 auto; }
.wa-bloco-conta { font-variant-numeric:tabular-nums; }
.wa-bloco-lista { overflow-y:auto; min-height:0; flex:1 1 auto; }
.wa-bloco-limitado { max-height:min(26rem, 42vh); flex:0 1 auto; }
/* Admin com 3 blocos (16/09/2026 — passou por três versões no mesmo dia:
   meio a meio entre 2 blocos, depois "mesmo espaço de Meu pra Novos",
   pedido final foi os TRÊS em partes iguais). wa-bloco-terco vale pros
   três blocos do admin (Meus atendimentos/Em atendimento/Novos), sem
   altura fixa nenhuma — inclusive no ÚLTIMO bloco, que por padrão
   cresceria sozinho (ver :last-child acima); por isso repete a regra
   pra :last-child aqui, DEPOIS dela no arquivo (mesma especificidade,
   quem vem depois vence). */
.wa-bloco-terco { flex:1 1 0%; }
.wa-bloco-terco:last-child { flex:1 1 0%; }

/* Conversa em triagem: o robô ainda está colhendo os dados, e o técnico
   pode assumir a qualquer momento. */
.wa-item.wa-triagem { background:color-mix(in srgb, var(--warn) 12%, transparent);
    border-left:3px solid var(--warn); }
.wa-item.wa-triagem:hover { background:color-mix(in srgb, var(--warn) 20%, transparent); }
.wa-item.wa-triagem.ativa { background:color-mix(in srgb, var(--warn) 26%, transparent); }
.wa-selo-triagem { display:inline-block; background:var(--warn); color:#1a1200;
    border-radius:4px; padding:0 5px; font-size:10px; font-weight:700;
    letter-spacing:.04em; text-transform:uppercase; margin-right:5px; }

/* NOVO pra assumir (18/09/2026): verde no mesmo lugar do selo âmbar da
   triagem — âmbar = "espere, o robô está com ela", verde = "pode assumir".
   Esperando há muito (.espera-longa) o selo e a linha pulsam. */
.wa-item.wa-novo { background:color-mix(in srgb, var(--ok) 12%, transparent);
    border-left:3px solid var(--ok); }
.wa-item.wa-novo:hover { background:color-mix(in srgb, var(--ok) 20%, transparent); }
.wa-item.wa-novo.ativa { background:color-mix(in srgb, var(--ok) 26%, transparent); }
.wa-selo-novo { display:inline-block; background:var(--ok); color:#052e16;
    border-radius:4px; padding:0 5px; font-size:10px; font-weight:700;
    letter-spacing:.04em; text-transform:uppercase; margin-right:5px; }
@keyframes wa-novo-pulsa {
    0%, 100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 70%, transparent); }
    50%      { box-shadow:0 0 0 6px transparent; }
}
@keyframes wa-novo-linha-pulsa {
    0%, 100% { background:color-mix(in srgb, var(--ok) 12%, transparent); }
    50%      { background:color-mix(in srgb, var(--ok) 30%, transparent); }
}
.wa-item.wa-novo.espera-longa { animation:wa-novo-linha-pulsa 1.6s ease-in-out infinite; }
.wa-item.wa-novo.espera-longa .wa-selo-novo { animation:wa-novo-pulsa 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .wa-item.wa-novo.espera-longa, .wa-item.wa-novo.espera-longa .wa-selo-novo { animation:none; }
    .wa-item.wa-novo.espera-longa { background:color-mix(in srgb, var(--ok) 28%, transparent); }
}

.wa-conversa { display:flex; flex-direction:column; background:var(--card);
    border:1px solid var(--border); border-radius:12px; overflow:hidden; min-width:0; }
.wa-cabecalho { display:flex; align-items:center; justify-content:space-between; gap:12px;
    flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--border); }
.wa-cabecalho h2 { margin:0; font-size:16px; }
.wa-cabecalho-sub { color:var(--muted); font-size:12px; }
.wa-acoes { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.wa-acoes select { margin:0; width:auto; }
.wa-alerta { color:var(--warn); font-weight:600; }

.wa-thread { flex:1; min-height:0; overflow-y:auto; padding:16px;
    display:flex; flex-direction:column; gap:10px; }
.wa-msg { max-width:75%; padding:9px 13px; border-radius:12px; font-size:14px; line-height:1.5; }
.wa-msg.entrada { align-self:flex-start; background:var(--input-bg); border-bottom-left-radius:3px; }
.wa-msg.saida { align-self:flex-end; background:var(--accent); color:var(--on-accent); border-bottom-right-radius:3px; }
.wa-texto { word-break:break-word; }
.wa-msg-meta { margin-top:5px; font-size:11px; opacity:.75; }
/* Falha de entrega à vista dentro do balão (18/09/2026) */
.wa-erro-msg { margin-top:6px; padding:5px 9px; border-radius:6px; background:rgba(179,45,31,.92); color:#fff; font-size:11.5px; line-height:1.4; }
.wa-midia { max-width:100%; max-height:280px; border-radius:8px; display:block; margin-bottom:6px; }

.wa-rodape-aviso { padding:12px 16px; border-top:1px solid var(--border);
    color:var(--muted); font-size:12px; }

/* Painéis de vincular cliente e transferir: abrem entre o cabeçalho e a
   conversa, sem empurrar a caixa de resposta para fora da tela. */
.wa-painel { padding:14px 16px; border-bottom:1px solid var(--border); background:var(--input-bg); }
.wa-painel form { margin:0; }
.wa-painel select, .wa-painel label { margin-top:0; }

/* "Nova conversa" na barra lateral (17/09/2026): a barra (.wa-lista) tem
   altura fixa e overflow:hidden — sem isto, em tela baixa o painel de Nova
   conversa cortava o botão "Iniciar conversa" embaixo, sem rolagem nenhuma
   pra alcançar. Enquanto aberto, o painel toma o espaço da barra inteira
   (busca + Meus/Novos somem) e rola por dentro; fechar (clicar de novo em
   "+ Nova conversa") devolve a lista normal. */
.wa-lista.wa-nova-aberta .wa-busca,
.wa-lista.wa-nova-aberta .wa-bloco { display:none; }
.wa-lista.wa-nova-aberta #painel-nova-conversa { flex:1 1 auto; overflow-y:auto; min-height:0; display:flex; }
/* O painel cresce pra ocupar o espaço que sobrou (achado 17/09/2026: sem
   isto o formulário ficava "flutuando" no topo com uma faixa vazia enorme
   embaixo) — o form usa a coluna inteira e "Iniciar conversa" desce pro
   fim com margin-top:auto, em vez de deixar o vão em branco sem função. */
.wa-lista.wa-nova-aberta #painel-nova-conversa form { display:flex; flex-direction:column; width:100%; }
.wa-lista.wa-nova-aberta #painel-nova-conversa form button[type="submit"] { margin-top:auto; }

/* Caixa de resposta: o seletor de mensagem padrão fica ACIMA do campo,
   porque o técnico escolhe primeiro e edita depois. */
.wa-responder { padding:12px 16px; border-top:1px solid var(--border); }
.wa-responder .canned-picker { margin-bottom:10px; }
.wa-form-resposta { display:flex; gap:10px; align-items:flex-end; margin:0; }
.wa-form-resposta textarea { flex:1; margin:0; resize:vertical; min-height:52px; }
.wa-form-resposta .btn { flex:0 0 auto; margin:0; }

/* Campo de texto + prévia do anexo, empilhados: um item só na fileira
   principal do formulário (que continua flex-row pros botões). */
.wa-resposta-campo { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.wa-resposta-campo textarea { margin:0; }

/* Coluna de ações à direita (29/08/2026, mesmo padrão pedido pro chat do
   cliente — dashboard/chat.php e app/chat.php): "Enviar com Enter" em
   cima, clipe + mensagens padrão lado a lado no meio, Enviar embaixo.
   Grid de 1 coluna (não flex-column): a largura da coluna vira o maior
   conteúdo das três fileiras (geralmente o texto "Enviar com Enter") e
   `justify-items:stretch` alarga as outras duas pra bater com ela — é
   assim que o Enviar cresce sozinho pra harmonizar, sem precisar chutar
   um valor de largura fixo. */
.wa-side-actions { flex:0 0 auto; display:grid; gap:6px; justify-items:stretch; }
.wa-side-actions button[type="submit"] { width:100%; }
.wa-side-icons { display:flex; gap:6px; }
.wa-side-icons #wa-anexo-btn,
.wa-side-icons .wa-padroes { flex:1; }
.wa-side-icons .wa-padroes-btn { width:100%; }

/* Anexo (18/08/2026): botão de clipe do mesmo tamanho dos outros da
   fileira, e a prévia mostra o que foi escolhido/colado antes de enviar. */
#wa-anexo-btn { width:auto; padding:9px 12px; display:flex; align-items:center; justify-content:center; }
#wa-anexo-btn svg { width:20px; height:20px; display:block; }
.wa-anexo-preview { display:flex; align-items:center; gap:8px; padding:6px 10px;
    background:var(--input-bg); border:1px solid var(--border); border-radius:var(--raio-sm); }
/* Achado 29/08/2026 (mesmo bug do chat do cliente, ver dashboard/chat.php e
   app/chat.php): `hidden` sozinho não vence `display:flex` na mesma
   especificidade — sem esta regra a prévia do anexo apareceria vazia mesmo
   sem nenhum arquivo escolhido. */
.wa-anexo-preview[hidden] { display:none; }
.wa-anexo-miniatura { width:32px; height:32px; object-fit:cover; border-radius:4px; flex:0 0 auto; }
.wa-anexo-nome { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:var(--text); }
.wa-anexo-remover { flex:0 0 auto; width:22px; height:22px; border:none; background:none; cursor:pointer;
    color:var(--muted); font-size:18px; line-height:1; border-radius:50%; }

/* Enviar com Enter (19/08/2026): linha discreta embaixo do campo, não
   compete com os botões da fileira de baixo. */
.wa-enter-toggle { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); font-weight:400; }
.wa-enter-toggle input { width:auto; margin:0; }
.wa-anexo-remover:hover { background:var(--card); color:var(--bad); }

/* Mensagens padrão: botão ao lado do Enviar com a lista de títulos.
   Abre para cima — o rodapé não tem espaço abaixo. */
.wa-padroes { position:relative; flex:0 0 auto; }
.wa-padroes-btn { width:auto; padding:9px 12px; display:flex; align-items:center; justify-content:center; }
.wa-padroes-btn svg { width:22px; height:22px; display:block; }
.wa-padroes-menu { position:absolute; bottom:calc(100% + 6px); right:0; z-index:30;
    min-width:230px; max-width:320px; max-height:260px; overflow-y:auto; margin:0; padding:5px;
    list-style:none; background:var(--card); border:1px solid var(--border);
    border-radius:var(--raio-sm); box-shadow:var(--sombra-forte); }
.wa-padroes-menu li { margin:0; }
.wa-padroes-menu button { display:block; width:100%; padding:9px 11px; border:none; background:none;
    color:var(--text); font:inherit; font-size:13.5px; text-align:left; border-radius:6px; cursor:pointer; }
.wa-padroes-menu button:hover { background:var(--input-bg); color:var(--accent); }

@media (max-width: 600px) {
    .wa-form-resposta { flex-wrap:wrap; align-items:stretch; }
    .wa-resposta-campo { flex:1 1 100%; }
    /* Empilhado em grid cabe em tela larga; no celular vira fileira
       horizontal embaixo do campo, como já era antes. */
    .wa-side-actions { display:flex; flex:1 1 100%; flex-direction:row; flex-wrap:wrap;
        align-items:center; justify-content:flex-end; gap:8px; }
    .wa-side-actions button[type="submit"] { width:auto; flex:1 1 auto; }
    .wa-side-icons { flex:0 0 auto; }
    .wa-side-icons #wa-anexo-btn, .wa-side-icons .wa-padroes { flex:0 0 auto; }
    .wa-side-icons .wa-padroes-btn { width:auto; }
}
.wa-vazio { padding:24px 16px; color:var(--muted); font-size:13px; text-align:center; }
.wa-vazio-grande { margin:auto; }
.wa-voltar { display:none; font-size:12px; color:var(--accent); margin-bottom:4px; }

@media (max-width:900px) {
    /* No celular vira uma coisa de cada vez: ou a lista, ou a conversa
       aberta — igual ao WhatsApp Web em tela estreita. */
    .wa-layout { grid-template-columns:1fr; height:auto; min-height:0; }
    .wa-lista { max-height:60vh; }
    .wa-thread { max-height:60vh; }
    .wa-com-conversa .wa-lista { display:none; }
    .wa-com-conversa .wa-voltar { display:block; }
    .wa-msg { max-width:88%; }
}

/* Painel de status dentro do sistema (o modo TV traz o CSS próprio dele).
   Usa as cores do tema, e não o verde/vermelho fixos da tela cheia. */
.status-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; }
.status-box { background:var(--ok); color:#fff; border-radius:10px; padding:14px 10px; text-align:center;
    font-size:13px; font-weight:700; min-height:60px; display:flex; flex-direction:column; align-items:center;
    justify-content:center; line-height:1.35; word-break:break-word; gap:3px; }
.status-box.down { background:var(--bad); }
.status-box.warn { background:var(--warn); }
/* Rosa/magenta de propósito (16/09/2026, achado ao vivo: "a cor do
   Crítico ficou muito próxima da de queda" — era #f97316, laranja perto
   demais do vermelho de --bad). Precisa ser bem distante de warn (âmbar)
   e down (vermelho) no círculo de cores, e não pode ser o roxo que já é
   de "IP trocou" (ver .status-box.ip-trocou). */
.status-box.critico { background:#ec4899; }
.status-box.unknown { background:var(--muted); }
/* "há X min" embaixo do nome — só aparece quando já perdeu sinal (ver
   monitor_tempo_desde_ultimo_sinal()). Fonte menor, mesma cor com menos opacidade. */
.status-box-tempo { font-size:11px; font-weight:400; opacity:.85; }
/* Troca de IP (16/09/2026): aviso À PARTE do status de conectividade —
   por isso é um contorno que aparece POR CIMA de qualquer cor de fundo
   (verde/vermelho/rosa/cinza). Índigo (puxa pro azul, pedido do usuário
   16/09/2026 — a primeira versão, #7c3aed, ficava perto demais do rosa
   do Crítico) pra não se confundir com nenhum dos outros estados. */
.status-box.ip-trocou { box-shadow:0 0 0 3px #4f46e5 inset; }
.status-box-ip { font-size:11px; font-weight:700; background:#4f46e5; padding:2px 8px; border-radius:4px; margin-top:2px; }
/* Legenda do Painel de Status (16/09/2026, pedido do usuário: "qual cor
   ficou para qual alerta"). Reaproveita as MESMAS classes .status-box
   dos quadros de verdade em miniatura — se a cor de algum status mudar,
   a legenda muda sozinha, nunca fica desalinhada. */
.legenda-status { display:flex; flex-wrap:wrap; gap:14px; padding:14px 4px 4px; font-size:12px; color:var(--muted); }
.legenda-item { display:flex; align-items:center; gap:6px; }
.legenda-swatch { width:14px; height:14px; border-radius:4px; flex:0 0 auto; min-height:0; padding:0; }
.legenda-swatch-ip { width:14px; height:14px; border-radius:4px; background:#4f46e5; flex:0 0 auto; }

/* Visibilidade do artigo: só a equipe vê a etiqueta */
.kb-visibility { display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px;
    font-weight:600; text-transform:uppercase; letter-spacing:.4px; vertical-align:middle; }
.kb-visibility.interna { background:var(--input-bg); color:var(--muted); border:1px solid var(--border); }
.kb-visibility.externa { background:rgba(45,164,78,.16); color:var(--ok); border:1px solid var(--ok); }

/* Seletor de mensagem padrão, acima do campo de texto do chamado */
.canned-picker { border:1px dashed var(--border); border-radius:10px; padding:10px 12px; margin-bottom:10px; }
.canned-picker-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.canned-picker-label { margin:0; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.canned-picker-select { flex:1; min-width:200px; margin:0; }
.canned-picker-head .btn { margin:0; flex:0 0 auto; }

/* Prévia da mensagem na tela de gestão do admin */
.canned-preview { margin:10px 0 0; padding:10px 12px; background:var(--input-bg); border-radius:8px;
    color:var(--muted); font-size:13px; line-height:1.6; white-space:pre-wrap; word-break:break-word;
    font-family:inherit; }

/* Em tela estreita o cabeçalho quebra em três faixas: rótulo, seletor em
   largura total e os dois botões dividindo a última linha. */
@media (max-width:640px) {
    .canned-picker-head { flex-wrap:wrap; align-items:stretch; }
    .canned-picker-label { flex:1 0 100%; }
    .canned-picker-select { flex:1 0 100%; width:100%; min-width:0; }
    .canned-picker-head .btn { flex:1 1 0; min-width:0; }
}

/* Junto com o editor rico (rich_editor.js move o .canned-picker pra
   dentro da própria barra de ferramentas quando os dois apontam pro
   mesmo campo) — vira só mais um controle da barra, sem quadro próprio
   nem rótulo, encostado à direita (09/09/2026, pedido do usuário: "o
   quadro todo fica menos [alto] quando clica no anexo" — o quadro extra
   acima do editor tirava altura útil de digitação). */
.rich-editor-toolbar .canned-picker { border:0; border-radius:0; padding:0; margin:0 0 0 auto; flex:0 1 auto; min-width:0; }
.rich-editor-toolbar .canned-picker-head { flex-wrap:nowrap; gap:6px; }
.rich-editor-toolbar .canned-picker-label { display:none; }
.rich-editor-toolbar .canned-picker-select { flex:0 1 auto; min-width:0; max-width:170px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.rich-editor-toolbar .canned-picker-head .btn { padding:5px 8px; font-size:12px; white-space:nowrap; flex:0 0 auto; }

/* Escolha do tema pessoal (Meu perfil do técnico) */
.theme-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.theme-option { display:flex; flex-direction:column; gap:6px; margin:0; padding:8px; border:2px solid var(--border); border-radius:10px; cursor:pointer; font-weight:400; }
.theme-option:hover { border-color:var(--accent); }
.theme-option.selected { border-color:var(--accent); }
.theme-option input[type=radio] { position:absolute; opacity:0; width:0; height:0; }
.theme-preview { display:block; border-radius:6px; overflow:hidden; height:52px; position:relative; border:1px solid rgba(128,128,128,.25); }
.theme-preview-bar { display:block; height:13px; }
.theme-preview-card { display:block; margin:7px; height:22px; border-radius:4px; position:relative; }
.theme-preview-dot { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:12px; height:12px; border-radius:50%; }
.theme-label { font-size:12px; color:var(--text); line-height:1.3; }

/* Paleta e seletores de cor do White Label */
.palette-grid { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.palette-option { display:flex; flex-direction:column; gap:6px; align-items:center; border:1px solid var(--border); border-radius:10px; padding:10px; background:none; color:var(--text); cursor:pointer; font-size:12px; min-width:104px; }
.palette-option:hover { border-color:var(--accent); }
.palette-swatches { display:flex; gap:3px; }
.palette-swatch { width:16px; height:16px; border-radius:4px; border:1px solid rgba(255,255,255,0.15); }
.color-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:14px; margin-bottom:6px; }
.color-field label { margin-bottom:6px; }
.color-field-row { display:flex; align-items:center; gap:8px; }
.color-field-row input[type=color] { width:44px; height:34px; padding:2px; border-radius:8px; border:1px solid var(--border); background:transparent; cursor:pointer; }
.color-field-row code { font-size:12px; color:var(--muted); }

/* Passe responsivo: tablet e celular */
@media (max-width:900px) {
    .container.grid { grid-template-columns: 1fr; }
}
@media (max-width:768px) {
    header { padding:12px 16px; }
    .page-head { padding:18px 16px 0; }
    .container { padding:16px; }
    .user-menu-dropdown { max-width:calc(100vw - 32px); }
    /* o campo de busca pega a linha inteira e os botões descem */
    .search-box { min-width:100%; flex-wrap:wrap; }
    .search-box input[type=search] { min-width:100%; }
    .toolbar > .btn { flex:1; }
}
@media (max-width:520px) {
    header h1 { font-size:18px; }
    .page-head { padding:16px 14px 0; }
    .page-head h1 { font-size:20px; }
    .container { padding:14px; }
    dl { grid-template-columns: 1fr; row-gap:4px; }
    dl dt { margin-top:10px; }
    .msg { max-width:90%; }
    .card { padding:17px; border-radius:12px; }
    .client-card { padding:15px 16px; border-radius:12px; }
    .area-switcher a { padding:5px 10px; font-size:12px; }
    table { font-size:13px; }
    td, th { padding:10px 9px; }
    /* botão de largura cheia é mais fácil de acertar com o dedo */
    .client-card .row > div:last-child .btn.small,
    .ticket-head-actions .btn { flex:1 1 auto; text-align:center; }
    .empty { padding:32px 16px; }
    .form-box { padding:26px 22px; border-radius:16px; }
}

/* A tabela rola na horizontal em tela estreita; a sombra na borda avisa
   que há mais conteúdo pro lado, senão a coluna cortada passa batida. */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--raio); }
@media (max-width:768px) {
    .table-wrap { background:linear-gradient(to right, transparent 70%, rgba(0,0,0,.10)); }
    .table-wrap table { min-width:520px; }
}