:root {
    --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:14px; --raio-sm:9px;
    --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:'Segoe UI',Arial,sans-serif; background:var(--bg); color:var(--text);
    -webkit-font-smoothing:antialiased; }
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); }

/* 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; }
.sidebar { width:220px; 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; }
.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. */
.sidebar nav .nav-grupo { display:block; padding:14px 20px 5px; font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.7px; color:var(--muted); 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. */
.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:460px; }

.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; }

/* ---------------------------------------------------------------------
   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; }
    .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; }

.container { padding:24px 32px; max-width:100%; overflow-x:auto; }
.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); }
td, th { padding:13px 14px; border-bottom:1px solid var(--border); text-align:left; font-size:14px; }
th { color:var(--muted); font-weight:700; font-size:11.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:11.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); }

.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:11px 13px; border-radius:var(--raio-sm); border:1px solid var(--border);
    background:var(--input-bg); color:var(--text); font-size:14px; font:inherit;
    transition:border-color var(--transicao), box-shadow var(--transicao);
}
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); }

.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; }

/* 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:13px; 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); }

.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; }
.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; }

/* Editor de texto rico (resposta/finalização de chamado) */
.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:wrap; padding:8px; background:var(--card); border-bottom:1px solid var(--border); }
.rich-editor-btn { 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 { padding:5px 8px; border-radius:6px; border:1px solid var(--border); background:var(--input-bg); color:var(--text); font-size:13px; }
.rich-editor-color { 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; }
.tabs a { padding:8px 16px; border-radius:999px; background:var(--card); border:1px solid var(--border);
    color:var(--text); font-weight:600; font-size:13px; 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; }
.tabs a.btn.small.active, .tabs a.btn:hover { color:var(--on-accent); }

/* 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:10px 14px; border-radius:999px;
    border:1px solid var(--border); background:var(--input-bg); color:var(--text); font:inherit; font-size:14px; }

/* 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; }

/* 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; }
.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; }
.wa-item-topo strong { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-item-sub { display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.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; }

.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; }
.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; }
.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; align-items:center;
    justify-content:center; line-height:1.35; word-break:break-word; }
.status-box.down { background:var(--bad); }
.status-box.unknown { background:var(--muted); }

/* 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; }
.canned-picker-preview { margin:10px 0 0; padding:10px 12px; background:var(--input-bg); border-radius:8px;
    color:var(--text); font-size:13px; line-height:1.6; white-space:pre-wrap; word-break:break-word;
    max-height:180px; overflow-y:auto; font-family:inherit; }

/* 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; }
}

/* 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; }
}