*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}



/* ── Cores do tema ───────────────────────────────────────────────────────
   As DEZ variaveis "core" (--bg,--panel,--panel-2,--text,--muted,--line,
   --primary,--primary-strong,--danger,--shadow). Sao o CONTRATO com o
   central_contadores_erp: os nomes batem nos dois, mas os VALORES sao de cada
   um — aqui a cor vem da marca do cliente, la' sao 12 temas de escolha de quem
   usa. Os nomes derivados desses dez vivem no dj-ui.css. */
:root{ --topo-h:80px; --bg:#1a222c;--panel:#24303f;--panel-2:#2e3a4b;--text:#dee4ee;--muted:#97a7bd;--line:#33404f;--primary:#3c6ff6;--primary-strong:#6a97ff;--danger:#f87171;--shadow:0 16px 44px rgba(0,0,0,.28); }
/* Tom suavizado (Andre 12/08/2026): o texto era branco puro (#f8fafc) sobre um
   fundo quase preto — contraste no talo, cansativo em tela cheia. Off-white,
   fundo um degrau acima e linha discreta; a cor da marca nao muda. */
body[data-theme="dark"]{ --bg:#1a222c;--panel:#24303f;--panel-2:#2e3a4b;--text:#dee4ee;--muted:#97a7bd;--line:#33404f;--primary:#3c6ff6;--primary-strong:#6a97ff;--danger:#f87171;--shadow:0 16px 44px rgba(0,0,0,.28);
    --card-shadow:0 1px 2px rgba(0,0,0,.20), 0 6px 16px rgba(0,0,0,.18);
    --card-shadow-hover:0 2px 6px rgba(0,0,0,.26), 0 14px 30px rgba(0,0,0,.26); }
body[data-theme="light"]{ --bg:#e9eef6;--panel:#ffffff;--panel-2:#f5f8fc;--text:#1c274c;--muted:#5b6b81;--line:#dde5ef;--primary:#2563eb;--primary-strong:#1d4ed8;--danger:#dc2626;--shadow:0 12px 36px rgba(28,39,76,.10);
    --card-shadow:0 1px 2px rgba(16,32,64,.06), 0 8px 20px rgba(16,32,64,.08);
    --card-shadow-hover:0 2px 6px rgba(16,32,64,.10), 0 16px 34px rgba(16,32,64,.14); }

/* A ESCALA (--fs-*, --lh-*, --sp-*, --r-*) e os nomes SEMANTICOS derivados do
   core (--success, --warning, --star, --accent, --chart-*, --border,
   --card-shadow...) sairam daqui: agora vem de `dj-ui.css`, a base que o portal
   compartilha com o central_contadores_erp. O <link> dele vem ANTES deste
   arquivo, entao qualquer regra aqui continua vencendo.
   Editar em: static/css/dj-ui.css (fonte da verdade dos dois projetos). */


body{
    background:var(--bg);
}

button,
input,
select,
textarea{
    font:inherit;
}

/* [hidden] TEM que esconder. Classes com display fixo (.field-group{display:flex},
   .app-dialog-panel, etc.) venciam o display:none do navegador e o elemento
   "escondido" continuava na tela — foi o que deixou o campo do novo departamento
   sempre visivel. Regra unica, no lugar de caçar caso a caso. */
[hidden]{ display:none !important; }

/* Tema global de campos: nenhum input/select/textarea fora do tom (fallback).
   Regras especificas por classe (.field-group, .compact-select, etc.) sobrescrevem. */
input[type="text"],input[type="search"],input[type="password"],input[type="email"],
input[type="tel"],input[type="number"],input[type="month"],input[type="date"],
input[type="datetime-local"],input[type="url"],input:not([type]),select,textarea{
    background:var(--panel-soft);
    border:1px solid var(--border);
    border-radius:var(--r-sm);
    color:var(--text);
    padding:9px 11px;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus{
    outline:none;
    border-color:var(--primary);
}

/* Lista do <select> no tema do site. Sem isto quem desenha a lista aberta e' o
   NAVEGADOR, com as cores dele — o que destoa do portal (regra do Andre 08/08:
   nada de UI vinda do navegador). `appearance: base-select` entrega a lista para
   o CSS mantendo teclado, foco e acessibilidade nativos; onde nao houver suporte,
   o select continua o de sempre. */
@supports (appearance: base-select){
    select, select::picker(select){ appearance:base-select; }
    select::picker(select){
        background:var(--panel); color:var(--text);
        border:1px solid var(--border); border-radius:var(--r-md);
        padding:4px; box-shadow:var(--shadow);
    }
    select::picker-icon{ color:var(--muted); }
    select option{ padding:7px 10px; border-radius:var(--r-sm); color:var(--text); background:transparent; }
    select option:hover, select option:focus{ background:var(--panel-2); }
    select option::checkmark{ color:var(--primary-strong); }
}

input::placeholder,
textarea::placeholder{
    color:var(--muted);
}

.menu-item:focus-visible,
.action-btn:focus-visible,
.primary-btn:focus-visible,
.compact-btn:focus-visible,
.icon-btn:focus-visible,
.close-btn:focus-visible,
.role-card:focus-visible,
.profile-btn:focus-visible,
.profile-menu button:focus-visible,
.compact-select:focus-visible,
.field-group input:focus-visible,
.field-group select:focus-visible,
.field-group textarea:focus-visible,
.switch input:focus-visible + span,
.star:focus-visible,
.star-big:focus-visible,
.stars-set:focus-visible,
.kebab-btn:focus-visible,
.action-menu-item:focus-visible,
.link-cell:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
    }
}

.app-shell{
    display:flex;
    min-height:100vh;
    min-height:100dvh;
    color:var(--text);
    font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    transition:background .2s,color .2s;
}

.login-view{
    position:fixed;
    inset:0;
    display:grid;
    place-items:center;
    padding:24px;
    background:var(--bg, #0d1523);   /* OPACO: cobre o app atras (nunca vaza) */
    z-index:1000;
    overflow:hidden;                 /* o fundo animado nao gera barra de rolagem */
}

/* Fundo "de tecnologia": malha de circuito + halos na cor da marca, tudo em CSS
   (nada de imagem externa — a pagina e' servida sem CDN). Os dois pseudos ficam
   ACIMA do fundo opaco e ABAIXO do card, que sobe com z-index. */
.login-view::before,
.login-view::after{
    content:"";
    position:absolute;
    inset:-10%;                      /* folga para o deslocamento nao mostrar borda */
    pointer-events:none;
}
.login-view::before{
    background-image:
        linear-gradient(color-mix(in srgb, var(--primary) 26%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--primary) 26%, transparent) 1px, transparent 1px);
    background-size:52px 52px;
    /* esmaece nas bordas: a malha nao pode competir com o formulario */
    -webkit-mask-image:radial-gradient(120% 90% at 50% 45%, #000 25%, transparent 78%);
    mask-image:radial-gradient(120% 90% at 50% 45%, #000 25%, transparent 78%);
    opacity:.5;
    animation:dj-malha 42s linear infinite;
}
.login-view::after{
    background:
        radial-gradient(38% 46% at 12% 18%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 70%),
        radial-gradient(34% 42% at 88% 82%, color-mix(in srgb, var(--primary-strong, var(--primary)) 26%, transparent), transparent 72%),
        radial-gradient(26% 30% at 78% 12%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 75%);
    filter:blur(6px);
    animation:dj-halo 18s ease-in-out infinite alternate;
}
@keyframes dj-malha{
    from{ background-position:0 0, 0 0; }
    to  { background-position:52px 52px, 52px 52px; }
}
@keyframes dj-halo{
    from{ transform:translate3d(0, 0, 0) scale(1); }
    to  { transform:translate3d(0, -2%, 0) scale(1.06); }
}
/* Tema claro: a mesma malha precisa de menos tinta para nao pesar */
body[data-theme="light"] .login-view::before{ opacity:.34; }
body[data-theme="light"] .login-view::after{ opacity:.6; }

.login-view.hidden{
    display:none;
}

.login-card{
    width:min(1000px, 100%);
    min-height:560px;
    position:relative;   /* acima da malha do fundo */
    z-index:1;
    display:grid;
    grid-template-columns:1fr 1fr;
    background:var(--panel, #131a29);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    box-shadow:0 24px 60px rgba(0,0,0,.5);
    overflow:hidden;
}

.login-left{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:44px 46px;
}

.login-brand{
    display:flex;
    align-items:center;
    margin-bottom:22px;
}

.login-brand span{
    color:var(--primary);
    font-size:var(--fs-2xl);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.login-left h1{
    font-size:var(--fs-3xl);
    line-height:1.15;
    margin:0 0 8px;
}

.login-left > p{
    color:var(--muted);
    margin:0 0 26px;
    line-height:1.5;
}

.login-form{
    display:grid;
    gap:16px;
}

.login-submit{
    width:100%;
    margin-top:4px;
}

/* "Lembrar de mim": mantem a sessao entre visitas (sem ele, o acesso vale so
   enquanto o navegador estiver aberto). */
.login-lembrar{
    display:flex;
    align-items:center;
    gap:8px;
    margin:2px 0 6px;
    font-size:var(--fs-md);
    color:var(--muted);
    cursor:pointer;
    user-select:none;
}
.login-lembrar input{
    inline-size:16px;
    block-size:16px;
    accent-color:var(--primary);
    cursor:pointer;
}

.login-hint{
    color:var(--muted);
    font-size:var(--fs-sm);
    line-height:1.5;
    margin:2px 0 0;
    text-align:center;
}

.login-forgot{
    display:block;
    margin:2px auto 0;
    background:none;
    border:none;
    padding:2px 4px;
    color:var(--primary);
    font-size:var(--fs-md);
    font-weight:600;
    cursor:pointer;
}
.login-forgot:hover{ text-decoration:underline; }

/* Medidor de forca de senha (definir/redefinir) */
.pw-meter{ margin:8px 2px 0; }
.pw-meter-track{ height:6px; border-radius:var(--r-sm); background:rgba(128,128,128,.22); overflow:hidden; }
.pw-meter-track > i{ display:block; height:100%; width:0; border-radius:var(--r-sm); transition:width .2s ease, background .2s ease; }
.pw-meter-label{ display:block; margin-top:5px; font-size:var(--fs-sm); font-weight:600; }
.pw-hint{ margin-top:3px; font-size:var(--fs-xs); line-height:1.4; color:var(--muted); }

/* Menu de acoes (kebab) + selecao em massa (padrao do site) */
.kebab-btn{ background:none; border:none; color:var(--muted); font-size:var(--fs-2xl); line-height:1; cursor:pointer; padding:2px 10px; border-radius:var(--r-sm); }
.kebab-btn:hover{ background:var(--panel-2); color:var(--text); }
.col-check{ width:38px; text-align:center; }
/* Checkbox no padrao do tema (nada de fundo branco). */
.row-check, #usersCheckAll{
    -webkit-appearance:none; appearance:none;
    width:16px; height:16px; margin:0; border-radius:var(--r-sm);
    border:1.5px solid var(--border-strong); background:var(--panel);
    cursor:pointer; position:relative; vertical-align:middle; flex:none;
}
.row-check:checked, #usersCheckAll:checked{ background:var(--primary); border-color:var(--primary); }
.row-check:checked::after, #usersCheckAll:checked::after{
    content:""; position:absolute; left:4.5px; top:1px;
    width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}

.action-menu{ position:absolute; z-index:200; animation:dj-fade-in .14s ease; min-width:172px; background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow); padding:6px; display:flex; flex-direction:column; }
.action-menu-item{ background:none; border:none; text-align:left; padding:9px 12px; border-radius:var(--r-sm); color:var(--text); font-size:var(--fs-md); cursor:pointer; }
.action-menu-item:hover, .action-menu-item:focus-visible{ background:var(--panel); }
.action-menu-item.danger-text{ color:var(--danger); }

.bulk-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; margin-bottom:12px; background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-md); }
.bulk-bar[hidden]{ display:none; }   /* so aparece quando ha itens selecionados */
.bulk-bar > span{ font-size:var(--fs-md); font-weight:600; color:var(--text); }
.bulk-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; margin-inline-start:auto; gap:8px; }

/* Cabecalho de coluna ordenavel (padrao: toda tabela ordena em qualquer coluna) */
.th-sort{ user-select:none; white-space:nowrap; }
.th-sort:hover{ color:var(--text); }
/* O botao ocupa a celula inteira: o clique continua funcionando em qualquer
   ponto do cabecalho, e o teclado ganha um alvo de verdade. */
.portal-table th.th-sort{ padding:0; }
.th-sort-btn{ display:block; inline-size:100%; background:none; border:0; cursor:pointer;
    font:inherit; color:inherit; text-align:inherit; text-transform:inherit;
    letter-spacing:inherit; padding:11px 14px; }
.sort-ind{ font-size:var(--fs-2xs); opacity:.9; }

/* Card clicavel que navega para a pagina */
.metric-link{ cursor:pointer; }
.metric-link .metric-card{ transition:border-color .15s, transform .15s; }
.metric-link:hover .metric-card{ border-color:var(--primary); transform:translateY(-2px); }

/* KPI cards no padrao SaaS moderno (piloto: dashboard tecnico).
   Grid resiliente com auto-fit/minmax (sem media query) + propriedades logicas,
   conforme guidance de CSS Layout (tracks flexiveis > breakpoints fixos). */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin-block-end:18px; }
.kpi-card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--card-shadow); padding-block:20px; padding-inline:20px; display:flex; flex-direction:column; }
.kpi-card.metric-link{ transition:border-color .15s, transform .15s, box-shadow .15s; }
.kpi-card.metric-link:hover{ border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--card-shadow-hover); }
.kpi-top{ display:flex; align-items:center; justify-content:space-between; }
.kpi-icon{ inline-size:42px; block-size:42px; border-radius:var(--r-md); display:grid; place-items:center; }
.kpi-icon svg{ inline-size:22px; block-size:22px; }
.kpi-blue{ background:color-mix(in srgb, var(--primary) 15%, transparent); color:var(--primary-strong); }
.kpi-amber{ background:color-mix(in srgb, var(--warning) 16%, transparent); color:var(--warning); }
.kpi-green{ background:color-mix(in srgb, var(--success) 15%, transparent); color:var(--success); }
.kpi-violet{ background:color-mix(in srgb, var(--kpi-roxo) 16%, transparent); color:var(--kpi-roxo); }
.kpi-arrow{ color:var(--muted); font-size:var(--fs-xl); opacity:.45; transition:opacity .15s, color .15s; }
.kpi-card.metric-link:hover .kpi-arrow{ opacity:1; color:var(--primary); }
.kpi-value{ font-size:var(--fs-3xl); font-weight:800; line-height:1.1; color:var(--text); margin-block-start:14px; }
.kpi-label{ font-size:var(--fs-md); font-weight:600; color:var(--text); margin-block-start:4px; }
.kpi-note{ font-size:var(--fs-sm); color:var(--muted); margin-block-start:2px; }

/* Enquanto os indicadores nao chegam, a caixa ja fica no lugar: o gráfico
   carrega em paralelo e a tela nao "pula" quando os numeros aparecem. */
.kpi-esqueleto{
    min-block-size:142px;
    background:linear-gradient(100deg, var(--panel) 30%, var(--panel-2) 50%, var(--panel) 70%);
    background-size:300% 100%;
    animation:dj-esqueleto 1.3s ease-in-out infinite;
}

@keyframes dj-esqueleto{
    from{ background-position:150% 0; }
    to{ background-position:-50% 0; }
}

@media (prefers-reduced-motion:reduce){
    .kpi-esqueleto{ animation:none; }
}

/* Dashboard tecnico: grafico mensal de chamados concluidos */
.mes-chart{ display:flex; align-items:flex-end; gap:10px; min-height:150px; padding:8px 4px 0; overflow-x:auto; }
.mes-bar{ flex:1; min-width:44px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; }
.mes-bar-val{ font-size:var(--fs-sm); font-weight:700; color:var(--text); }
.mes-bar-track{ width:100%; height:110px; display:flex; align-items:flex-end; background:rgba(128,128,128,.10); border-radius:var(--r-sm) 8px 0 0; }
.mes-bar-track > i{ display:block; width:100%; min-height:3px; background:var(--primary); border-radius:var(--r-sm) 8px 0 0; transition:height .25s ease, background .15s; }
.mes-bar-lbl{ font-size:var(--fs-xs); color:var(--muted); }
.mes-bar:hover .mes-bar-track > i{ background:var(--primary-strong); }
.mes-bar.sel .mes-bar-track > i{ background:var(--primary-strong); }
.mes-bar.sel .mes-bar-lbl{ color:var(--text); font-weight:700; }

/* Estrelas de avaliacao (aparecem no hover da linha) */
.col-aval{ text-align:left; white-space:nowrap; }
.stars{ display:inline-flex; gap:1px; transition:opacity .12s; }
/* Esmaecer so' faz sentido onde existe hover: no celular a linha nunca recebe
   ponteiro e as estrelas ficariam a 50% para sempre. */
@media (hover:hover){
    .stars{ opacity:.5; }
    tr:hover .stars, tr:focus-within .stars{ opacity:1; }
}
.star{ background:none; border:0; padding:0; color:var(--border-strong); cursor:pointer;
       font-size:var(--fs-xl); line-height:1; font-family:inherit; }
/* Acende da estrela apontada para tras: a irma seguinte e' que esta sob o
   ponteiro, dai o :has(~ ...) no lugar do irmao adjacente. */
.star:hover, .star:has(~ .star:hover),
.star:focus-visible, .star:has(~ .star:focus-visible){ color:var(--star); }
/* Avaliação JÁ registrada: nota fixa, sempre visível, ordem normal (1→5). */
.stars-set{ opacity:1; background:none; border:0; padding:0; cursor:pointer; }
.star.on{ color:var(--star); }

/* Histórico de Envios: barra de filtros + rodapé de paginação. */
.hist-filtros{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; padding:14px 16px; border-bottom:1px solid var(--border); }
.hf{ display:flex; flex-direction:column; gap:4px; }
.hf label{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.hf input, .hf select{ padding:7px 10px; font-size:var(--fs-md); background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:var(--r-sm); min-width:130px; }
.hf-clear{ margin-inline-start:auto; align-self:flex-end; }
/* Datas em pares (Abertura de/até, Conclusão de/até): agrupadas para não virar
   uma fileira de campos soltos em que o usuário não sabe qual data é qual. */
.hf-grupo{ display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end;
    padding:6px 10px 7px; border:1px solid var(--border); border-radius:var(--r-md); position:relative; }
.hf-grupo-tit{ position:absolute; top:-8px; inset-inline-start:10px; padding:0 5px;
    background:var(--panel); font-size:var(--fs-2xs); text-transform:uppercase;
    letter-spacing:.4px; color:var(--muted); }
.hf-grupo .hf input{ min-width:120px; }
/* Alinhamento: `align-items:flex-end` encosta as CAIXAS, e a caixa do grupo tem
   borda + padding — os campos de fora dele ficavam ~8px mais baixos que os de
   dentro. A margem devolve essa diferença, alinhando os campos pela base (André
   11/08/2026). Só onde há grupo; barra sem grupo já estava alinhada. */
.hist-filtros:has(.hf-grupo) > .hf,
.hist-filtros:has(.hf-grupo) > .hf-clear{ margin-block-end:8px; }
/* A faixa e' injetada pelo JS so' no celular, mas quem gira o aparelho para a
   horizontal (ou redimensiona a janela) ficaria com um botao solto na tela: por
   padrao ela nao existe, e a media query abaixo a acende. */
.hf-barra{ display:none; }

/* ── Filtros no celular: a mao alcanca, mas nao tomam a tela ──────────────
   Medido em 390x844: a barra de Chamados ocupava 526px — 62% da tela — e ainda
   rolava para fora junto com a lista. Vira uma faixa PRESA embaixo da barra do
   topo, recolhida por padrao, com o numero de filtros ativos a vista (Andre
   26/08/2026). */
@media (max-width:820px){
    /* `overflow:hidden` faz do card um contexto de rolagem e mata o sticky de
       dentro dele; `clip` corta igual (cantos arredondados) sem virar
       contexto — a faixa de filtros so' gruda por causa disto. */
    .table-card{ overflow:clip; }
    .hf-barra{
        position:sticky; inset-block-start:var(--topo-mob, 108px); z-index:6;
        display:flex; align-items:center; gap:10px;
        padding:10px 16px; background:var(--panel);
        border-block-end:1px solid var(--border);
    }
    .hf-barra .hf-abrir{
        display:inline-flex; align-items:center; gap:8px;
        background:transparent; border:0; padding:4px 0;
        color:var(--text); font-size:var(--fs-md); font-weight:600; cursor:pointer;
    }
    .hf-abrir .hf-seta{ transition:transform .18s ease; }
    .hf-barra.aberta .hf-abrir .hf-seta{ transform:rotate(180deg); }
    .hf-conta{
        min-inline-size:20px; padding:1px 7px; border-radius:var(--r-pill);
        background:var(--primary); color:#fff; font-size:var(--fs-2xs); font-weight:700;
    }
    .hf-conta[hidden]{ display:none; }

    .hf-barra + .hist-filtros{
        position:sticky; inset-block-start:calc(var(--topo-mob, 108px) + var(--hf-barra-h, 42px)); z-index:5;
        background:var(--panel); max-block-size:min(52vh, 420px); overflow-y:auto;
        padding:12px 16px; gap:10px;
    }
    .hf-barra:not(.aberta) + .hist-filtros{ display:none; }
    /* Campos em duas colunas: em uma so' a barra virava um rolo interminavel. */
    .hf-barra + .hist-filtros > .hf{ flex:1 1 calc(50% - 5px); min-inline-size:0; }
    .hf-barra + .hist-filtros .hf input,
    .hf-barra + .hist-filtros .hf select{ min-width:0; inline-size:100%; padding:6px 9px; }
    .hf-barra + .hist-filtros > .hf-grupo{ flex:1 1 100%; }
    .hf-barra + .hist-filtros .hf-grupo .hf{ flex:1 1 calc(50% - 4px); min-inline-size:0; }
    .hf-barra + .hist-filtros > .hf-clear{ flex:0 0 auto; margin-inline-start:auto; }
    @media (prefers-reduced-motion:reduce){ .hf-abrir .hf-seta{ transition:none; } }
}

/* Perfil: Dados e Seguranca na mesma gaveta, com as mesmas abas da tela de
   Configuracoes — senha e segundo fator sao ajustes da conta, nao telas. */
.perfil-sec{ margin-block-start:20px; }
.perfil-sec:first-of-type{ margin-block-start:12px; }
.perfil-sec-tit{
    font-size:var(--fs-lg); font-weight:600; margin:0 0 12px;
    padding-block-end:8px; border-block-end:1px solid var(--line);
}
.profile-drawer .cfg-tabs, #profileDrawerBody .cfg-tabs{ margin-block-end:4px; }

/* Convite do segundo fator: canto inferior, entra deslizando. Nao bloqueia
   nada — quem esta no meio de um chamado segue trabalhando. */
.mfa-convite{
    position:fixed; z-index:1402; inset-inline-end:22px; inset-block-end:22px;
    inline-size:min(360px, calc(100vw - 32px));
    background:var(--panel); color:var(--text);
    border:1px solid var(--line); border-radius:var(--radius, 16px);
    padding:16px 18px 14px; box-shadow:var(--shadow);
    opacity:0; transform:translateY(14px) scale(.98);
    transition:opacity .22s ease, transform .22s cubic-bezier(.2,.8,.3,1);
}
.mfa-convite.aparece{ opacity:1; transform:none; }
.mfa-convite-topo{ display:flex; align-items:flex-start; gap:12px; margin-block-end:14px; }
.mfa-convite-tit{ margin:0 0 2px; font-weight:600; }
.mfa-convite-sub{ margin:0; color:var(--muted); font-size:var(--fs-md); line-height:1.45; }
.mfa-convite-acoes{ display:flex; justify-content:flex-end; gap:8px; }
@media (max-width:560px){
    .mfa-convite{ inset-inline:12px; inset-block-end:12px; inline-size:auto; }
}
@media (prefers-reduced-motion:reduce){
    .mfa-convite{ transition:none; opacity:1; transform:none; }
}

/* ── Verificacao em duas etapas: as telas do login ─────────────────────────
   Cada caminho (aplicativo, e-mail, codigo de reserva) tem um cabecalho com o
   seu icone: e' o que diz, num relance, em qual dos tres a pessoa esta' — a
   versao anterior era so' texto, e os tres se pareciam (Andre 26/08/2026). */
.mfa-head{
    display:flex; align-items:flex-start; gap:14px; margin-block-end:20px;
}
.mfa-head h2{ margin:0 0 4px; font-size:var(--fs-xl); line-height:1.25; }
.mfa-head p{ margin:0; color:var(--muted); font-size:var(--fs-md); line-height:1.5; }
.mfa-icone{
    flex:none; inline-size:44px; block-size:44px; border-radius:var(--r-md);
    display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--primary) 16%, transparent);
    color:var(--primary-strong);
}
.mfa-icone svg{ inline-size:22px; block-size:22px; }

/* O campo do codigo e' o assunto da tela: grande, espacado, centralizado. */
.mfa-codigo{
    font-size:26px; letter-spacing:10px; text-align:center; font-weight:600;
    font-variant-numeric:tabular-nums; padding-block:12px;
}
.mfa-codigo-reserva{ font-size:20px; letter-spacing:4px; text-transform:uppercase; }

/* Escolha do caminho: dois cartoes clicaveis, nao dois links perdidos. */
.mfa-opcoes{ display:flex; flex-direction:column; gap:10px; margin-block-end:6px; }
.mfa-opcao{
    display:flex; align-items:center; gap:14px; inline-size:100%;
    padding:14px 16px; text-align:start; cursor:pointer;
    background:var(--panel-2); color:var(--text);
    border:1px solid var(--line); border-radius:var(--r-md);
    transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.mfa-opcao:hover{ border-color:var(--primary); background:var(--panel); }
.mfa-opcao:active{ transform:scale(.995); }
.mfa-opcao strong{ display:block; font-size:var(--fs-lg); font-weight:600; }
.mfa-opcao small{ display:block; margin-block-start:2px; color:var(--muted); font-size:var(--fs-md); }
.mfa-opcao-icone{
    flex:none; inline-size:38px; block-size:38px; border-radius:var(--r-sm);
    display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--primary) 14%, transparent);
    color:var(--primary-strong);
}
.mfa-opcao-icone svg{ inline-size:19px; block-size:19px; }
@media (prefers-reduced-motion:reduce){
    .mfa-opcao{ transition:none; }
    .mfa-opcao:active{ transform:none; }
}

.mfa-alternativas{ margin-block-start:10px; text-align:center; }
/* Link no meio de uma frase: nao ocupa a linha inteira como o .link-btn. */
.link-inline{ display:inline; inline-size:auto; padding:0; font-size:inherit; }
/* O QR sai do servidor em SVG: fundo branco proprio, para ler no tema escuro. */
.mfa-qr{
    display:flex; justify-content:center; margin-block:8px 16px;
}
.mfa-qr svg{
    inline-size:min(220px, 60vw); block-size:auto;
    border-radius:var(--r-md); background:#fff; padding:8px;
}
.mfa-ativo{ display:flex; flex-direction:column; gap:6px; margin-block-end:16px; }
.mfa-ativo p{ margin:0; }
/* Codigos de reserva: monoespaco, porque sao lidos e digitados letra a letra. */
.mfa-reserva{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
    gap:8px; margin-block:12px 8px;
}
.mfa-reserva code{
    font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
    font-size:var(--fs-lg); letter-spacing:1px; text-align:center;
    padding:10px 6px; background:var(--panel-2);
    border:1px solid var(--line); border-radius:var(--r-sm); color:var(--text);
}

/* Aviso do teto de 365 dias: só aparece quando a data pedida passa do limite —
   senão a tabela volta vazia e parece que o registro sumiu. */
.hf-aviso{ margin:0 0 12px; padding:8px 12px; border-radius:var(--r-sm); font-size:var(--fs-sm);
    color:var(--text); background:color-mix(in srgb, var(--warning) 16%, transparent);
    border:1px solid color-mix(in srgb, var(--warning) 45%, transparent); }
/* Anexos do chamado: lista do que já foi escolhido + o botão de adicionar. O
   input de arquivo fica escondido dentro do label (o nativo não estiliza). */
.anexo-lista{ list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:6px; }
.anexo-item{ display:flex; align-items:center; gap:10px; padding:7px 10px; font-size:var(--fs-md);
    background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-sm); }
.anexo-nome{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* No detalhe do chamado o nome e' link (abre o arquivo guardado no portal) */
a.anexo-nome{ color:var(--primary-strong); text-decoration:none; }
a.anexo-nome:hover{ text-decoration:underline; }
.anexo-tam{ color:var(--muted); font-size:var(--fs-xs); white-space:nowrap; }
.anexo-x{ background:none; border:none; color:var(--muted); font-size:var(--fs-xl); line-height:1;
    cursor:pointer; padding:0 2px; border-radius:var(--r-sm); }
.anexo-x:hover{ color:var(--danger); }
.anexo-add{ display:inline-block; cursor:pointer; font-size:var(--fs-md); color:var(--primary-strong);
    border:1px dashed var(--border); border-radius:var(--r-sm); padding:8px 12px; }
.anexo-add:hover{ border-color:var(--primary-strong); background:var(--panel-2); }

/* Financeiro: coluna de ações (kebab) encostada à direita, e as duas marcas da
   linha — quanto já foi pago num título parcial e há quantos dias venceu. */
.col-acoes{ text-align:end; white-space:nowrap; width:1%; }
.fin-parcial{ display:block; font-size:var(--fs-xs); color:var(--muted); }
/* No cartao do celular a celula ja' empilha rotulo e valor: aqui as paginas
   voltam para a linha dos numeros, senao viram um terceiro andar. */
@media (max-width: 760px){
    .portal-table td.td-empilha .fin-parcial{ display:inline; margin-inline-start:6px; }
}
.fin-atraso{ display:inline-block; margin-inline-start:6px; font-size:var(--fs-xs); color:var(--danger); }
/* Data de entrega ainda PROGRAMADA (a real só existe depois da baixa): a marca
   fica esmaecida ao lado da data, sem roubar a leitura da coluna. */
.tag-previsto{ display:inline-block; margin-inline-start:6px; padding:1px 6px;
    border:1px solid var(--border); border-radius:999px; font-size:var(--fs-2xs);
    text-transform:uppercase; letter-spacing:.4px; color:var(--muted);
    vertical-align:middle; }
.hist-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 4px 2px; flex-wrap:wrap; }
.hist-exibir{ display:flex; align-items:center; gap:8px; font-size:var(--fs-md); color:var(--muted); }
.hist-exibir select{ padding:5px 8px; background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:var(--r-sm); font-size:var(--fs-md); cursor:pointer; }

/* Solicitar suprimento: autocomplete de série + formulário compacto */
.req-form .field-group{ margin-bottom:10px; }
.req-form label{ font-size:var(--fs-xs); }
.req-form input, .req-form select, .req-form textarea,
#reqVerif input, #reqVerif select, #reqVerif textarea{ font-size:var(--fs-md); padding:8px 10px; }
.req-autocomplete{ position:relative; }
/* Lista NO FLUXO (nao-absoluta) -> o dialog cresce e mostra muitas series sem
   recorte; rola dentro da propria lista. */
/* `.sug-*` e' o nome generico (serve qualquer campo com sugestao); `.req-sug*` e'
   o nome historico do autocomplete de serie. Mesmo visual — e' o que substitui o
   <datalist>, que o navegador desenha com o tema DELE, fora do site. */
/* Seletor de tema: sol | lua numa pilula, com o ATUAL aceso (padrao do
   SaaSBold). Dois botoes em vez de um alternador: o usuario escolhe o tema,
   nao adivinha para onde o clique vai. */
.tema-switch{ display:inline-flex; align-items:center; gap:2px; padding:3px;
    background:var(--panel-2); border:1px solid var(--border); border-radius:999px; }
.tema-op{ display:grid; place-items:center; inline-size:30px; block-size:30px;
    border:0; border-radius:999px; background:transparent; color:var(--muted);
    cursor:pointer; transition:background .15s, color .15s; }
.tema-op:hover{ color:var(--text); }
.tema-op[aria-pressed="true"]{ background:var(--panel); color:var(--primary-strong);
    box-shadow:0 1px 2px rgba(0,0,0,.14); }
.tema-op:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* Campo com valor invalido (CEP/telefone/e-mail): a borda avisa ao sair dele. */
.campo-invalido,
.field-group input.campo-invalido{ border-color:var(--danger); }
.campo-invalido:focus-visible{ outline-color:var(--danger); }

/* Confirmação do endereço: o CEP vem primeiro e em destaque — é ele que
   preenche o resto, e o cliente precisa perceber isso antes de digitar. */
.end-cep{ padding:14px 16px; margin-block-end:14px; background:var(--panel-2);
    border:1px solid var(--border); border-radius:var(--r-md); }
.end-cep-linha{ display:flex; gap:8px; align-items:center; }
.end-cep-linha input{ flex:1 1 auto; max-inline-size:200px; font-size:var(--fs-lg);
    letter-spacing:.5px; }
.end-cep-linha .primary-btn{ flex:0 0 auto; }
.end-dica{ margin:8px 0 0; font-size:var(--fs-sm); color:var(--muted); min-block-size:18px; }

/* Os demais campos nascem esmaecidos: a ordem é preencher o CEP e deixar o
   endereço vir. Continuam editáveis — quem quiser digitar tudo, digita. */
.end-campos{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px;
    opacity:.55; transition:opacity .18s ease; }
.end-campos.pronto, .end-campos:focus-within{ opacity:1; }
.end-campos .end-largo{ grid-column:span 2; }
.end-campos .end-todo{ grid-column:1 / -1; }
@media (max-width:640px){
    .end-campos{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .end-campos .end-largo, .end-campos .end-todo{ grid-column:1 / -1; }
}

/* Busca global do topo: campo discreto que cresce ao receber o foco. */
.busca-global{ position:relative; flex:1 1 260px; max-inline-size:420px; display:flex;
    align-items:center; margin-inline:auto 0; }
.busca-global .busca-icone{ position:absolute; inset-inline-start:11px; color:var(--muted);
    pointer-events:none; }
.busca-global input{ inline-size:100%; padding:8px 12px 8px 34px; font-family:inherit;
    font-size:var(--fs-md); color:var(--text); background:var(--panel-2);
    border:1px solid var(--border); border-radius:999px; outline:none;
    transition:border-color .15s, background .15s; }
.busca-global input::placeholder{ color:var(--muted); }
.busca-global input:focus{ border-color:var(--primary); background:var(--panel); }
.busca-global input:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.busca-resultados{ position:absolute; inset-block-start:calc(100% + 6px); inset-inline:0;
    z-index:220; margin:0; background:var(--panel); box-shadow:var(--card-shadow-hover);
    animation:dj-fade-in .12s ease; }
.busca-item.ativo{ background:var(--panel-2); }
.busca-tipo{ margin-inline-end:6px; }
.busca-vazio{ padding:12px; color:var(--muted); font-size:var(--fs-md); }
/* Em tela estreita o campo divide a barra com o titulo: vai para a linha de baixo. */
@media (max-width:820px){
    /* Uma linha para hamburguer + titulo + acoes, e a busca embaixo. Sem o
       flex:1 no lead, o titulo empurrava as acoes para uma linha propria e a
       barra virava tres andares (Andre 26/08/2026). */
    .topbar{ flex-wrap:wrap; padding-block:10px; gap:10px 8px; }
    .topbar-lead{ flex:1 1 auto; min-inline-size:0; }
    .topbar-lead > div{ min-inline-size:0; }
    /* O nome do portal sai: com ele, "DJ CUSTOMER SERVICE" + titulo + botoes dao
       463px numa tela de 390 e a barra quebra em tres andares. O nome continua
       no menu lateral e na aba do navegador (Andre 26/08/2026). */
    .topbar-kicker{ display:none; }
    .topbar h1{ font-size:var(--fs-2xl); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .topbar-actions{ flex:0 0 auto; margin-inline-start:auto; }
    .busca-global{ order:3; flex-basis:100%; max-inline-size:none; margin-inline:0; }
}

.sug-lista, .req-sugestoes{ margin-top:6px; max-height:min(58vh, 480px); overflow-y:auto; background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-md); }
.sug-item, .req-sug{ display:flex; flex-direction:column; gap:1px; width:100%; text-align:left; padding:8px 12px; background:transparent; border:0; border-block-end:1px solid var(--border); cursor:pointer; color:var(--text); }
.sug-item:last-child, .req-sug:last-child{ border-block-end:0; }
.sug-item:hover, .req-sug:hover{ background:var(--panel); }
.sug-item strong, .req-sug strong{ font-size:var(--fs-md); }
.sug-item span, .req-sug span{ font-size:var(--fs-xs); color:var(--muted); }
.sug-vazio, .req-sug-vazio{ padding:10px 12px; font-size:var(--fs-sm); color:var(--muted); }
.req-equip{ font-size:var(--fs-md); font-weight:600; color:var(--text); margin:2px 0 10px; }
#reqVerif .field-group{ margin-bottom:10px; }
#reqVerif label{ font-size:var(--fs-xs); }
.req-cols2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.req-obrig{ color:var(--danger); font-weight:700; }
.med-fonte{ margin:0 0 8px; font-size:var(--fs-xs); color:var(--muted); }
/* Remove o spinner nativo dos inputs number (o browser desenha com fundo branco,
   fora do tom da pagina). O cliente digita o valor. */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; appearance:none; margin:0; }
input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
.req-cores{ display:flex; flex-wrap:wrap; gap:10px 16px; padding:4px 0; }
.req-cor{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-md); cursor:pointer; }
.req-bloqueio{ background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px; font-size:var(--fs-md); color:var(--text); margin:2px 0; line-height:1.5; }
.req-bloqueio a{ color:var(--accent, #4a9eff); font-weight:600; cursor:pointer; }
/* Configuracoes: abas da pagina + resumo de cada config.
   Sem role="tab" de proposito — isso prometeria navegacao por setas, que nao
   implementamos; e' <nav> com botoes e aria-current="page" no ativo. */
.cfg-tabs{ position:relative; display:flex; flex-wrap:wrap; gap:2px;
    border-block-end:1px solid var(--border); margin-block-end:18px; }
.cfg-tab{ background:none; border:0; cursor:pointer; color:var(--muted);
    font-size:var(--fs-md); font-weight:500; padding:10px 14px; border-radius:var(--r-sm) 8px 0 0; }
.cfg-tab:hover{ color:var(--text); background:var(--panel-2); }
.cfg-tab[aria-current="page"]{ color:var(--primary-strong); font-weight:600; }
/* Fallback: sublinhado no proprio botao ativo */
.cfg-tab[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--primary-strong); }
/* Onde ha anchor positioning, o sublinhado vira um so, que desliza entre as abas */
@supports (anchor-name: --a){
    .cfg-tab[aria-current="page"]{ box-shadow:none; anchor-name:--cfg-aba-ativa; }
    .cfg-tabs::before{ content:""; position:absolute; position-anchor:--cfg-aba-ativa;
        inset-block-start:anchor(bottom); inset-inline-start:anchor(left);
        inset-inline-end:anchor(right); block-size:2px; background:var(--primary-strong);
        transition:inset-inline-start .2s ease, inset-inline-end .2s ease; }
}
@media (prefers-reduced-motion: reduce){ .cfg-tabs::before{ transition:none; } }
/* Cabecalho da tela de Config: abas a esquerda, link da ajuda admin a direita */
.cfg-topo{ display:flex; align-items:flex-end; justify-content:space-between;
    gap:16px; flex-wrap:wrap; margin-block-end:18px; }
.cfg-topo .cfg-tabs{ margin-block-end:0; flex:1 1 auto; }
.cfg-ajuda-link{ flex:0 0 auto; font-size:var(--fs-sm); color:var(--muted);
    text-decoration:none; padding:8px 12px; border-radius:var(--r-sm); white-space:nowrap; }
.cfg-ajuda-link:hover{ color:var(--primary-strong); background:var(--panel-2); }
.cfg-legenda{ margin:0 0 14px; color:var(--muted); font-size:var(--fs-md); line-height:1.5; }
.cfg-resumo{ display:flex; flex-direction:column; gap:8px; }
.cfg-linha{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:var(--fs-md); }
.cfg-rot{ color:var(--muted); flex:0 0 210px; }
.cfg-val{ color:var(--text); word-break:break-word; }

/* Pedido que segue, mas nasce marcado para conferencia da DJ (nao e' bloqueio) */
.req-aviso{ margin:2px 0 10px; padding:8px 12px; border-radius:var(--r-sm); font-size:var(--fs-sm);
    color:var(--text); background:color-mix(in srgb, var(--warning) 16%, transparent);
    border:1px solid color-mix(in srgb, var(--warning) 45%, transparent); }

/* Drawer de Ajuda (painel lateral direito) + seção de contato */
.help-drawer{
    margin:0 0 0 auto; inline-size:min(420px, 96vw); block-size:100dvh; max-block-size:100dvh;
    border:0; border-inline-start:1px solid var(--border); border-radius:0;
    background:var(--panel); color:var(--text); padding:0; box-shadow:var(--shadow); overflow:hidden;
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.22,.61,.36,1), display .28s allow-discrete, overlay .28s allow-discrete;
}
.help-drawer:not([open]){ display:none; }
.help-drawer[open]{ display:flex; flex-direction:column; transform:translateX(0); }
@starting-style{ .help-drawer[open]{ transform:translateX(100%); } }
.help-drawer::backdrop{ background:rgba(2,6,23,0); transition:background .28s ease; }
.help-drawer[open]::backdrop{ background:rgba(2,6,23,.5); }
.help-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-block-end:1px solid var(--border); }
.help-head h2{ font-size:var(--fs-xl); font-weight:800; margin:0; }
.help-body{ flex:1 1 auto; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:24px; }
.help-sec h3{ font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin:0 0 10px; }
.help-item{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-md); margin-block-end:8px; }
.help-item strong{ font-size:var(--fs-md); color:var(--text); }
.help-item span{ font-size:var(--fs-sm); color:var(--muted); line-height:1.4; }
.help-contato-sub{ font-size:var(--fs-sm); color:var(--muted); margin:0 0 12px; }
.help-contatos{ display:flex; flex-direction:column; gap:10px; }
.help-contato-btn{ display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-md); color:var(--text); text-decoration:none; transition:.15s; }
.help-contato-btn:hover{ background:var(--panel); border-color:var(--border-strong, var(--border)); }
.help-contato-btn svg{ flex:0 0 auto; }
.help-contato-btn.wpp svg{ color:#25D366; }
.help-contato-btn span{ display:flex; flex-direction:column; }
.help-contato-btn small{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.help-contato-btn strong{ font-size:var(--fs-lg); }
.chamado-row{ cursor:pointer; }

/* Flags de tipo de atendimento / multiplas OS (dashboard tecnico) */
.flags-row{ display:flex; flex-wrap:wrap; gap:4px; margin-block-start:4px; }
.flag{ font-size:var(--fs-2xs); font-weight:600; padding:2px 8px; border-radius:var(--r-lg); white-space:nowrap; }
.flag-tipo{ background:color-mix(in srgb, var(--primary) 15%, transparent); color:var(--primary-strong); }
.flag-multi{ background:color-mix(in srgb, var(--warning) 16%, transparent); color:var(--warning); }
.os-num{ font-weight:600; }

/* Estrelas grandes no modal de avaliacao */
.aval-stars{ display:flex; gap:6px; margin:2px 0 16px; }
.star-big{ background:none; border:0; padding:0; font-family:inherit;
           font-size:var(--fs-3xl); line-height:1; cursor:pointer; color:var(--border-strong); }
.star-big.on{ color:var(--star); }

/* Pop-up de avaliação pós-login (gestor) */
.pop-aval-list{ display:flex; flex-direction:column; gap:12px; margin:6px 0 16px; }
.pop-aval-card{ display:flex; align-items:center; justify-content:space-between; gap:14px;
    background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px; }
.pop-aval-info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.pop-aval-info strong{ font-size:var(--fs-lg); color:var(--text); }
.pop-aval-tag{ align-self:flex-start; font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.5px;
    color:var(--muted); background:var(--panel); border:1px solid var(--border); border-radius:999px; padding:1px 8px; }
.pop-aval-stars{ display:flex; gap:4px; flex:0 0 auto; }
.pop-aval-stars .star-big{ font-size:var(--fs-2xl); transition:color .12s; }
.pop-aval-stars .star-big:hover{ color:var(--star); }
.pop-aval-thanks{ width:100%; text-align:center; color:var(--success); font-weight:600; padding:6px 0; }
/* Nota abaixo de 5: o cartao abre e pergunta o motivo antes de gravar */
.pop-aval-card.asking{ flex-wrap:wrap; }
.pop-aval-motivo{ flex:1 0 100%; }
.pop-aval-motivo .field-group{ margin:4px 0 8px; }
.pop-aval-motivo-acoes{ display:flex; justify-content:flex-end; }

/* Colunas de contador (Total/PB/Color) na tabela de equipamentos */
.ct-num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* Avisos do equipamento (Orbix) no detalhe */
.eq-avisos{ display:flex; flex-direction:column; gap:6px; }
.eq-aviso{ background:color-mix(in srgb, var(--warning) 16%, transparent);
    border:1px solid color-mix(in srgb, var(--warning) 45%, transparent);
    color:var(--text); border-radius:var(--r-sm); padding:6px 10px; font-size:var(--fs-sm); }

/* Detalhe do equipamento: atendimentos recentes (chamado/suprimento) */
.eq-rels{ display:flex; flex-direction:column; gap:8px; }
.eq-rel{ display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-md); padding:10px 12px; cursor:pointer; }
.eq-rel:hover{ border-color:var(--primary-strong); }
.eq-rel-tag{ display:block; font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.eq-rel strong{ display:block; font-size:var(--fs-md); color:var(--text); margin:2px 0; }

/* Novo departamento: o local de instalação vem junto, só leitura (não dá p/ trocar) */
.eq-site-fixo{ display:flex; flex-direction:column; gap:1px; margin-top:6px;
    background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-sm); padding:8px 10px; }
.eq-site-fixo strong{ font-size:var(--fs-sm); color:var(--text); }
.eq-site-fixo span{ font-size:var(--fs-sm); color:var(--muted); }

/* Detalhe do equipamento: ação de editar o cadastro (departamento/IP) */
.eq-edit-acao{ display:flex; justify-content:flex-end; margin-top:10px; }

/* Detalhe do equipamento: local de instalação (site) + endereço */
.eq-site{ display:flex; flex-direction:column; gap:2px;
    background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-md); padding:10px 12px; }
.eq-site strong{ font-size:var(--fs-md); color:var(--text); }
.eq-site span{ font-size:var(--fs-sm); color:var(--muted); }

/* Aviso de cookies (LGPD) — barra inferior não bloqueante */
.cookie-aviso{ position:fixed; left:16px; right:16px; bottom:16px; z-index:120;
    display:flex; align-items:center; gap:16px; flex-wrap:wrap; max-width:820px; margin:0 auto;
    background:var(--panel); border:1px solid var(--border-strong); border-radius:var(--r-lg);
    box-shadow:0 12px 40px rgba(0,0,0,.35); padding:14px 18px; }
.cookie-aviso[hidden]{ display:none; }
.cookie-aviso-txt{ margin:0; flex:1 1 340px; font-size:var(--fs-md); color:var(--muted); line-height:1.5; }
.cookie-aviso-txt strong{ color:var(--text); }
.cookie-link{ background:none; border:none; padding:0; color:var(--primary-strong); font:inherit; cursor:pointer; text-decoration:underline; }
.cookie-ok{ flex:0 0 auto; }
/* Empilhados e CENTRALIZADOS sob o texto de primeiro acesso: a ajuda primeiro,
   a política embaixo (Andre 16/09/2026). O container ocupa a largura toda — sem
   isso ele encolhe ao tamanho dos links e o centro fica à esquerda. */
.login-links{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:10px; align-self:stretch; width:100%; }
.login-links .login-privacy{ align-self:center; }
.login-privacy{ background:none; border:none; padding:0; color:var(--muted); font-size:var(--fs-sm); cursor:pointer; text-decoration:underline; align-self:flex-start; }
.login-privacy:hover{ color:var(--primary-strong); }
/* Conteúdo da Política de Privacidade e Cookies */
.politica{ font-size:var(--fs-md); line-height:1.6; }
.politica h3{ margin:18px 0 6px; font-size:var(--fs-lg); color:var(--text); }
.politica p, .politica li{ color:var(--muted); }
.politica ul{ margin:6px 0; padding-left:20px; }
.politica table{ width:100%; border-collapse:collapse; margin:8px 0; font-size:var(--fs-sm); }
.politica th, .politica td{ border:1px solid var(--border); padding:6px 8px; text-align:left; vertical-align:top; }
.politica .pol-rev{ font-size:var(--fs-sm); color:var(--muted); font-style:italic; margin-top:16px; }

/* Detalhe do chamado */
.det-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:4px 0 14px; }
.det-grid span{ display:block; font-size:var(--fs-xs); color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.det-grid strong{ font-size:var(--fs-lg); color:var(--text); }
.det-box{ background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px; font-size:var(--fs-lg); line-height:1.5; white-space:pre-wrap; }

/* Blocos de atendimento (OS multiplas) */
.atend-bloco{ border:1px solid var(--border); border-radius:var(--r-lg); padding:14px 16px; margin-block:12px; background:var(--panel-2); }
.atend-bloco .det-grid{ margin-block:4px 12px; }
.atend-bloco .det-box{ background:var(--panel); }
.atend-head{ display:flex; align-items:baseline; gap:10px; margin-block-end:8px; padding-block-end:8px; border-block-end:1px solid var(--border); }
.atend-head strong{ font-size:var(--fs-lg); color:var(--text); }
.atend-med{ margin-block:10px 12px; }
.med-title{ display:block; font-size:var(--fs-xs); color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-block-end:6px; }
.meds{ display:flex; flex-wrap:wrap; gap:8px; }
.med{ display:inline-flex; align-items:baseline; gap:6px; background:var(--panel); border:1px solid var(--border); border-radius:999px; padding:5px 12px; font-size:var(--fs-md); color:var(--text); }
.med b{ font-weight:600; color:var(--muted); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.3px; }
/* Toner: a pill é SEMPRE preenchida com a cor do toner (borda na mesma cor) —
   é ela que diz de qual toner se trata. Só a PORCENTAGEM muda de cor conforme o
   nível: ≤10% vermelho, 11–20% amarelo, acima disso a cor de contraste do
   preenchimento. Tons fixos (não seguem o tema) porque representam o toner. */
.med.toner{ font-variant-numeric:tabular-nums; font-weight:700;
    background:var(--toner-fill); border-color:var(--toner-fill); color:var(--toner-ink); }
.toner-preto  { --toner-fill:#2f2f2f; --toner-ink:#ffffff; }
.toner-ciano  { --toner-fill:#0e8fa8; --toner-ink:#ffffff; }
.toner-magenta{ --toner-fill:#c2277b; --toner-ink:#ffffff; }
.toner-amarelo{ --toner-fill:#b8860b; --toner-ink:#ffffff; }
.toner-outra  { --toner-fill:var(--muted); --toner-ink:var(--panel); }
/* O nível NÃO recoloriza o número: vermelho sobre magenta dá 1.02x de contraste
   (some). Em vez disso, um SINAL de alerta dentro da pill — vermelho até 10%,
   amarelo de 11 a 20%. Contorno branco para aparecer sobre qualquer cor.
   O sinal só existe onde há alerta; o mesmo tamanho entre as pills vem do
   min-inline-size abaixo, não de espaço reservado — assim a porcentagem fica
   centralizada quando está sozinha (André). */
.toner-sinal{ inline-size:14px; block-size:14px; flex:0 0 auto; align-self:center;
    margin-inline-end:6px; }
.toner-sinal .ts-fundo{ fill:var(--ts-cor, transparent); stroke:#ffffff; stroke-width:1.7; }
.toner-sinal .ts-marca{ fill:#ffffff; }
.med.toner.toner-alerta { --ts-cor:#f5a623; }
.med.toner.toner-critico{ --ts-cor:#e53935; }
/* Mesma largura entre as pills, independente de 8% ou 100%. */
.med.toner{ min-inline-size:88px; justify-content:center; }
/* Tabela de itens no detalhe do pedido: cabe no modal, sem scroll horizontal.
   Nome do produto quebra; QTD estreita à direita. */
.atend-bloco .portal-table{ width:100%; min-width:0; table-layout:fixed; }
.atend-bloco .portal-table td, .atend-bloco .portal-table th{ white-space:normal; word-break:break-word; }
.atend-bloco .portal-table td:last-child, .atend-bloco .portal-table th:last-child{ width:56px; text-align:right; white-space:nowrap; }
.app-dialog-body{ overflow-x:hidden; }

.input-peek{ position:relative; }
.input-peek input{ width:100%; padding-right:42px; }
.input-peek .peek-btn{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    background:none;
    border:0;
    padding:6px;
    cursor:pointer;
    color:var(--muted);
}
.input-peek .peek-btn:hover{ color:var(--text); }

.login-right{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:44px;
    background:linear-gradient(150deg, var(--primary), color-mix(in srgb, var(--primary) 55%, var(--bg)));
    color:#fff;
}

.login-right-inner{ max-width:340px; text-align:center; }

/* Redes da empresa, no pé do painel da marca */
.login-social{
    position:absolute;
    inset-inline:0;
    inset-block-end:26px;
    display:flex;
    justify-content:center;
    gap:14px;
}

.login-social a{
    inline-size:34px;
    block-size:34px;
    display:grid;
    place-items:center;
    border-radius:var(--r-pill);
    color:#fff;
    background:rgba(255,255,255,.14);
    transition:background .15s ease, transform .15s ease;
}

.login-social a:hover{
    background:rgba(255,255,255,.28);
    transform:translateY(-2px);
}

.login-social svg,
.login-social img{
    inline-size:17px;
    block-size:17px;
    fill:currentColor;
    object-fit:contain;
    display:block;      /* sem a linha de base do inline, que desce a arte 2-3px */
}

/* As artes oficiais (PNG) vêm sem margem interna, ao contrário dos glifos
   desenhados: um ponto a menos deixa os quatro com o mesmo peso no círculo. */
.login-social img{
    inline-size:16px;
    block-size:16px;
}

/* Telefone discreto no canto, e o WhatsApp flutuante do outro lado */
.login-fone{
    position:absolute;
    inset-block-end:18px;
    inset-inline-start:22px;
    z-index:2;
    display:flex;
    align-items:center;
    gap:6px;
    margin:0;
    color:var(--muted);
    font-size:var(--fs-sm);
}

.login-fone svg{
    inline-size:14px;
    block-size:14px;
    fill:currentColor;
    opacity:.7;
}

.whats-float{
    position:absolute;
    inset-block-end:22px;
    inset-inline-end:22px;
    z-index:2;
    inline-size:52px;
    block-size:52px;
    display:grid;
    place-items:center;
    border-radius:var(--r-pill);
    background:#25d366;
    color:#fff;
    box-shadow:0 10px 24px rgba(0,0,0,.35);
    transition:transform .15s ease, box-shadow .15s ease;
}

.whats-float:hover{
    transform:translateY(-2px) scale(1.04);
    box-shadow:0 14px 30px rgba(0,0,0,.42);
}

.whats-float svg{
    inline-size:28px;
    block-size:28px;
    fill:currentColor;
}

@media (prefers-reduced-motion:reduce){
    .login-social a,
    .whats-float{ transition:none; }
    .login-social a:hover,
    .whats-float:hover{ transform:none; }
}

@media (max-width:860px){
    .login-fone{ inset-block-end:12px; inset-inline-start:14px; }
    .whats-float{ inline-size:46px; block-size:46px; inset-block-end:14px; inset-inline-end:14px; }
}

.login-right-logo{
    height:52px;
    width:auto;
    object-fit:contain;
    margin-bottom:22px;
    filter:brightness(0) invert(1);
    opacity:.95;
}

/* Carrossel das marcas do grupo (login): as artes das empresas sao escuras e uma
   delas tem fundo branco opaco, entao o `brightness(0) invert(1)` do logo padrao
   nao serve — cada logo aparece num cartao claro, e eles se alternam (André
   12/08/2026). Com uma marca so, fica parado. */
.login-carrossel{
    position:relative;
    /* Alto o bastante para o diagrama do grupo, que tem texto miudo; as marcas
       sozinhas ocupam so a faixa central (André 12/08/2026). */
    block-size:150px;
    margin-bottom:22px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.login-carrossel.tem-marcas .login-right-logo{
    position:absolute;
    /* inset + margin:auto centraliza nos dois eixos; o object-fit cuida do
       resto. Com tamanho natural, a imagem absoluta encostava na esquerda. */
    inset:0;
    margin:auto;
    inline-size:100%;
    block-size:88px;
    max-block-size:none;
    /* a silhueta ja vem branca do servidor — nada de filtro nem de fundo */
    filter:none;
    opacity:0;
    object-fit:contain;
    object-position:center;
    /* Sai primeiro, entra depois: em crossfade os dois logos apareciam juntos e
       um lia por cima do outro (André 12/08/2026). */
    transition:opacity .35s ease;
}
.login-carrossel.tem-marcas .login-right-logo.ativo{
    opacity:1;
    transition-delay:.35s;
}
/* O diagrama do grupo vai com a arte ORIGINAL (a silhueta branca vira blocos
   solidos e engole os logos de dentro) e usa a altura toda do palco. Precisa das
   MESMAS tres classes da regra das marcas, senao aquela vence por especificidade
   e prende o grupo nos 88px (André 12/08/2026). */
.login-carrossel.tem-marcas .login-right-logo.logo-grupo{ block-size:100%; }
@media (prefers-reduced-motion: reduce){
    .login-carrossel.tem-marcas .login-right-logo{ transition:none; }
}

.login-right h2{ font-size:var(--fs-2xl); margin:0 0 12px; line-height:1.25; }
.login-right p{ opacity:.92; line-height:1.6; margin:0; }


/* No celular o painel da direita nao cabe ao lado — mas some-lo levava junto a
   marca, que e' o que identifica o portal. Ele vira uma FAIXA no alto, so' com o
   carrossel: o texto de vitrine e as redes ficam para a tela grande (Andre
   26/08/2026). */
@media (max-width: 760px){
    .login-card{ grid-template-columns:1fr; min-height:0; }
    .login-left{ padding:28px 22px 32px; order:2; }
    .login-right{
        order:1; padding:18px 20px 14px; min-block-size:0;
        display:flex; align-items:center; justify-content:center;
    }
    .login-right-inner{ max-width:none; inline-size:100%; }
    .login-right h2, .login-right p, .login-social{ display:none; }
    .login-carrossel{ block-size:74px; margin-bottom:0; }
    .login-carrossel.tem-marcas .login-right-logo{ block-size:52px; }
    .login-right-logo{ height:44px; margin-bottom:0; }
}

/* Anti-FOUC: o app (sidebar + conteudo) so aparece DEPOIS de autenticado — o JS
   adiciona a classe .authed no <body>. Antes disso, so a tela de login existe,
   entao os menus (inclusive os restritos) nunca piscam no carregamento. */
body:not(.authed) .sidebar,
body:not(.authed) .sidebar-backdrop,
body:not(.authed) .main-content{ display:none !important; }

.sidebar{
    width:260px;
    background:var(--panel);
    border-right:1px solid var(--border);
    padding:0;
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    align-self:flex-start;
    height:100vh;
    height:100dvh;
    overflow:hidden;
}

.sidebar-brand{
    box-sizing:border-box;
    min-block-size:var(--topo-h);   /* mesma linha da topbar */
    padding:12px 16px;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.sidebar-brand img{
    width:184px;
    max-width:100%;
    max-block-size:calc(var(--topo-h) - 26px);
    height:auto;
    object-fit:contain;
    display:block;
}

/* O logo leva ao site da empresa (Andre 14/08/2026); o nome do portal saiu
   daqui — a marca aqui muda conforme o cliente. */
.sidebar-brand a{
    display:block;
    line-height:0;
    border-radius:var(--r-sm);
}

.sidebar-brand a:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:3px;
}

.sidebar-menu{
    display:flex;
    flex-direction:column;
    gap:2px;
    flex:1;
    overflow-y:auto;
    padding:10px 8px;
}

.sidebar-foot{
    flex:0 0 auto;
    border-top:1px solid var(--border);
    padding:12px 16px;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.sidebar-foot small{
    color:var(--muted);
    font-size:var(--fs-xs);
}
/* Rodapé fixo do menu: Cliente / CNPJ / Contrato (dropdown se >1). */
.sf-client{ display:flex; flex-direction:column; gap:8px; }
.sf-row{ display:flex; flex-direction:column; gap:2px; }
.sf-row > span{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.sf-row > strong{ font-size:var(--fs-sm); color:var(--text); line-height:1.3; word-break:break-word; }
.sf-select{
    width:100%; margin-top:2px; padding:6px 8px; font-size:var(--fs-sm);
    background:var(--panel-2); color:var(--text);
    border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer;
}
.sf-brand{ color:var(--muted); font-size:var(--fs-2xs); padding-top:2px; border-top:1px solid var(--border); }

.menu-item{
    width:100%;
    border:none;
    background:none;
    color:var(--muted);
    padding:9px 12px;
    border-radius:var(--r-sm);
    text-align:left;
    cursor:pointer;
    margin-bottom:0;
    transition:background .12s,color .12s;
    font-size:var(--fs-lg);
    font-weight:600;
    display:flex;
    align-items:center;
    gap:10px;
}

.menu-icon{
    width:18px;
    height:18px;
    flex:0 0 auto;
    color:var(--muted);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}

.menu-icon svg{
    width:18px;
    height:18px;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:.9;
}

.menu-item.active .menu-icon svg{
    opacity:1;
}

.menu-item:hover{
    background:var(--panel-soft);
    color:var(--text);
}

.menu-item.active{
    background:color-mix(in srgb, var(--primary) 12%, transparent);
    box-shadow:inset 3px 0 0 var(--primary);
    color:var(--primary-strong);
    font-weight:700;
}


.menu-item.active .menu-icon{
    color:var(--primary-strong);
}

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

.topbar{
    position:sticky;
    top:0;
    z-index:20;
    min-height:var(--topo-h);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:0 28px;
    background:color-mix(in srgb, var(--bg) 80%, transparent);
    backdrop-filter:blur(10px);
}

.topbar-kicker{
    color:var(--primary-strong);
    font-size:var(--fs-sm);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:4px;
}

.topbar h1{
    font-size:var(--fs-3xl);
    line-height:1.1;
    font-weight:700;
}

.topbar-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.topbar-lead{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

/* Hamburguer e backdrop: so aparecem no mobile (media query abaixo) */
.nav-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    min-width:42px;
    min-height:42px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--r-sm);
    color:var(--text);
    font-size:var(--fs-xl);
    line-height:1;
    cursor:pointer;
    flex:0 0 auto;
}

.nav-toggle:hover{
    border-color:var(--primary);
    color:var(--primary-strong);
}

.sidebar-backdrop{
    display:none;
}

.icon-btn,
.profile-btn,
.action-btn,
.primary-btn,
.close-btn{
    border:none;
    cursor:pointer;
    transition:.2s;
}

.icon-btn{
    width:42px;
    height:42px;
    border-radius:var(--r-md);
    display:grid;
    place-items:center;
    background:var(--panel);
    color:var(--muted-strong);
    border:1px solid var(--border);
}

.icon-btn:hover,
.action-btn:hover{
    background:var(--panel-soft);
    color:var(--text);
}

.profile-wrap{
    position:relative;
}

.profile-btn{
    min-height:46px;
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--panel);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:7px 12px 7px 7px;
}

.profile-btn:hover{
    border-color:var(--border-strong);
    background:var(--panel-soft);
}

.avatar{
    width:32px;
    height:32px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--primary);
    color:#fff;
    font-size:var(--fs-sm);
    font-weight:800;
}

.profile-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:1px;
}

.profile-copy strong{
    font-size:var(--fs-md);
    line-height:1.1;
}

.profile-copy small{
    color:var(--muted);
    font-size:var(--fs-xs);
}

.profile-menu{
    position:absolute;
    right:0;
    top:calc(100% + 10px);
    width:230px;
    padding:8px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow);
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:.18s;
    z-index:20;
}

.profile-menu.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.profile-menu button{
    width:100%;
    border:none;
    background:transparent;
    color:var(--muted-strong);
    padding:11px 10px;
    border-radius:var(--radius-sm);
    text-align:left;
    cursor:pointer;
}

.profile-menu button:hover{
    background:var(--panel-soft);
    color:var(--text);
}

.content-area{
    padding:28px;
}

.client-context{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:12px;
    margin-block-end:18px;
}

.client-context div{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    box-shadow:var(--card-shadow);
    padding:14px 16px;
    min-height:72px;
}

.client-context span{
    display:block;
    color:var(--muted);
    font-size:var(--fs-sm);
    margin-bottom:7px;
}

.client-context strong{
    display:block;
    color:var(--text);
    font-size:var(--fs-lg);
    line-height:1.25;
    overflow-wrap:anywhere;
}

.contract-picker{
    border-color:color-mix(in srgb, var(--primary) 45%, var(--border-strong));
    background:color-mix(in srgb, var(--primary) 7%, var(--panel));
}

.contract-picker select{
    width:100%;
    margin-top:2px;
    background:var(--panel-strong);
    border:1px solid var(--primary);
    border-radius:var(--radius-sm);
    color:var(--text);
    font-size:var(--fs-lg);
    font-weight:700;
    padding:9px 11px;
    outline:none;
    cursor:pointer;
}

.contract-picker select:hover{
    background:color-mix(in srgb, var(--primary) 12%, var(--panel-strong));
}

.contract-picker small{
    display:block;
    margin-top:8px;
    color:var(--muted);
    font-size:var(--fs-xs);
    line-height:1.3;
}

.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:20px;
}

.page-header p{
    color:var(--muted);
    font-size:var(--fs-lg);
    max-width:780px;
}

.primary-btn{
    background:var(--primary);
    color:#fff;
    padding:12px 18px;
    border-radius:var(--radius-sm);
    font-weight:700;
}

.primary-btn:hover{
    background:var(--primary-hover);
}

.compact-btn{
    min-height:34px;
    padding:8px 11px;
    border-radius:var(--radius-sm);
    font-size:var(--fs-md);
}

.compact-select{
    min-height:34px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text);
    padding:7px 10px;
    outline:none;
}

.action-btn{
    background:var(--panel-soft);
    color:var(--text);
    padding:9px 12px;
    border-radius:var(--radius-sm);
}

.metric-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:16px;
    margin-block-end:16px;
}
.metric-grid.metric-grid-3{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }

.metric-card,
.table-card,
.info-panel{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--r-lg);   /* radius de card no padrao SaaS (containers > controles) */
    box-shadow:var(--card-shadow);
    overflow:hidden;
}
/* Respiro entre cards empilhados (ex.: chamados x suprimentos no dashboard). */
.table-card{ margin-block-end:32px; }
.table-card:last-child{ margin-block-end:0; }

.metric-card{
    padding:18px 20px;
    min-height:108px;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.metric-card:hover{
    transform:translateY(-2px);
    border-color:var(--border-strong);
    box-shadow:var(--card-shadow-hover);
}

.metric-card span{
    display:block;
    color:var(--muted);
    font-size:var(--fs-md);
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
    margin-bottom:8px;
}

.metric-card strong{
    display:block;
    color:var(--text);
    font-size:var(--fs-2xl);
    line-height:1.1;
    font-weight:800;
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
}

.metric-card small{
    display:block;
    color:var(--muted);
    font-size:var(--fs-sm);
    margin-top:10px;
}

.split-grid{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
    gap:16px;
    align-items:start;
}

.section-title{
    padding:16px;
    border-bottom:1px solid var(--border);
    font-size:var(--fs-lg);
    font-weight:800;
}

.table-wrap{
    overflow:auto;
}

.portal-table{
    width:100%;
    border-collapse:collapse;
    min-width:680px;
    font-variant-numeric:tabular-nums;
}

.portal-table th{
    text-align:left;
    padding:11px 14px;
    background:transparent;
    border-bottom:1px solid var(--border);
    color:var(--muted);
    font-size:var(--fs-xs);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.02em;
}

.portal-table td{
    padding:12px 14px;
    border-bottom:1px solid var(--border);
    color:var(--text);
    font-size:var(--fs-md);
}

/* Zebra discreta: da' o "trilho" para o olho atravessar a linha sem pesar. */
.portal-table tbody tr:nth-child(even) td{
    background:color-mix(in srgb, var(--muted) 4%, transparent);
}
.portal-table tr:hover td{
    background:color-mix(in srgb, var(--panel-soft) 55%, transparent);
}

/* Cabecalho fixo enquanto a lista rola dentro do card — em tabela longa o
   usuario perdia de vista o que era cada coluna (André 12/08/2026). */
.table-wrap{ max-block-size:min(70dvh, 720px); }
.portal-table thead th{
    position:sticky;
    inset-block-start:0;
    z-index:2;
    background:var(--panel);
    /* o sticky nao carrega a borda da celula: a sombra faz o corte */
    box-shadow:inset 0 -1px 0 var(--line);
    border-bottom:none;
}
/* Tabela dentro de modal ou de card curto nao precisa de teto de altura */
.app-dialog .table-wrap, .rec-sec .table-wrap{ max-block-size:none; }

/* Cabeçalho de duas linhas (detalhe da fatura: P/B e Cor agrupam três colunas) */
.portal-table thead th[colspan]{ text-align:center; }
/* Totais: mesma família do cabeçalho, mas legível como número */
.portal-table tfoot th{
    text-transform:none;
    font-size:var(--fs-md);
    color:var(--text);
    border-top:1px solid var(--border);
    border-bottom:none;
}

/* Tabela dentro de <dialog>: sem o min-width de 680px (a mesma largura do modal),
   que fazia o detalhe rolar de lado. As colunas de texto quebram em vez disso. */
.app-dialog .portal-table{ min-width:0; }
/* `overflow` nos dois eixos: com overflow-y:auto herdado, o x volta sozinho para
   auto e a barra reaparece. */
.app-dialog .table-wrap{ overflow:visible; }
.app-dialog .portal-table th,
.app-dialog .portal-table td{ padding:9px 10px; }
/* Dentro do modal o padding e' menor — e a regra acima e' mais especifica que a
   de cima, entao a celula ordenavel precisa repetir aqui que quem espaca e' o
   botao, senao o clique volta a ter uma borda morta. */
.app-dialog .portal-table th.th-sort{ padding:0; }
.app-dialog .th-sort-btn{ padding:9px 10px; }
/* Anel de foco para DENTRO: o cabecalho e' sticky num container com overflow,
   e um contorno para fora seria cortado na rolagem. */
.th-sort-btn:focus-visible{ outline:2px solid var(--primary); outline-offset:-2px; }

/* Logo da MARCA no menu: os logos das empresas sao escuros sobre fundo claro
   (Solunext e Ricohpy sao 70-90% transparentes e escuros), entao sumiriam sobre o
   azul da barra. A base clara resolve para qualquer arte, sem pedir uma versao
   negativa de cada marca (André 12/08/2026). O logo padrao da DJ nao usa isto:
   ele ja tem par claro/escuro. */
/* Logo da marca (tela de Marcas): altura fixa, fundo claro para logo vazado */
.marca-logo{ max-block-size:34px; max-inline-size:120px; object-fit:contain;
    background:#ffffff; border-radius:var(--r-sm); padding:3px 6px; }
.marca-logo-edit{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* ── Celular: cada linha da tabela vira um cartao ───────────────────────────
   A `.portal-table` tem min-width de 680px: num telefone de 360px a lista so
   rolava de lado, e o cliente perdia a primeira coluna (o numero da OS). Abaixo
   de 760px a linha vira cartao, com o rotulo de cada campo vindo do proprio
   cabecalho — o JS copia o texto do <th> para data-rotulo (André 12/08/2026). */
@media (max-width: 760px){
    .table-wrap{ overflow:visible; max-block-size:none; }
    .portal-table{ min-width:0; display:block; }
    .portal-table thead{
        /* fora da tela, mas ainda lido por leitor de tela */
        position:absolute;
        inline-size:1px; block-size:1px;
        overflow:hidden; clip-path:inset(50%);
    }
    .portal-table tbody, .portal-table tr, .portal-table td{ display:block; inline-size:auto; }
    .portal-table tbody tr{
        border:1px solid var(--line);
        border-radius:var(--r-md);
        padding:var(--sp-3);
        margin-block-end:var(--sp-3);
        background:var(--panel);
    }
    .portal-table tbody tr:nth-child(even) td,
    .portal-table tr:hover td{ background:transparent; }
    .portal-table td{
        display:flex;
        justify-content:space-between;
        align-items:baseline;
        gap:var(--sp-4);
        padding:var(--sp-1) 0;
        border:none;
        text-align:start;
    }
    .portal-table td::before{
        content:attr(data-rotulo);
        flex:0 0 auto;
        font-size:var(--fs-2xs);
        text-transform:uppercase;
        letter-spacing:.4px;
        color:var(--muted);
    }
    /* Conteudo longo (nome de equipamento, "anterior -> atual" com paginas) nao
       cabe ao lado do rotulo: quebrava no meio e a linha parecia remontada.
       Nessas celulas o rotulo vai em cima e o valor embaixo (Andre 26/08/2026). */
    .portal-table td.td-empilha{
        flex-direction:column; align-items:stretch; gap:2px; padding-block:var(--sp-2);
    }
    .portal-table td.td-empilha::before{ margin-block-end:1px; }
    .portal-table td.td-empilha.ct-num{ text-align:start; }
    /* Celula sem rotulo (acoes) ocupa a linha inteira, alinhada a direita */
    .portal-table td:empty{ display:none; }
    .portal-table td.col-acoes{ justify-content:flex-end; padding-block-start:var(--sp-2); }
    .portal-table td.col-acoes::before{ content:""; }
    .portal-table tfoot{ display:block; }
}

/* ── Processando: o que a tela faz enquanto o ERP responde ──────────────────
   Escrever "Abrindo chamado…" numa linha de texto do formulario passava a
   impressao de que a pagina tinha travado. E' um <dialog> modal: fica acima de
   tudo (top layer), bloqueia clique e Esc por conta do proprio navegador — nada
   de duplo envio (André 13/08/2026). */
.proc{
    border:none;
    background:transparent;
    padding:0;
    overflow:visible;
    margin:auto;
}
.proc::backdrop{
    background:color-mix(in srgb, #05070d 62%, transparent);
    backdrop-filter:blur(2px);
}
.proc-card{
    display:flex;
    align-items:center;
    gap:var(--sp-4);
    padding:var(--sp-5) var(--sp-6);
    border-radius:var(--r-lg);
    background:var(--panel);
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    color:var(--text);
    font-size:var(--fs-lg);
    min-inline-size:min(320px, 88vw);
}
.proc-spin{
    inline-size:26px;
    block-size:26px;
    flex:0 0 auto;
    border-radius:50%;
    border:3px solid color-mix(in srgb, var(--primary) 25%, transparent);
    border-block-start-color:var(--primary);
    animation:dj-proc-spin .8s linear infinite;
}
.proc-texto{ display:flex; flex-direction:column; gap:2px; }
.proc-sub{ font-size:var(--fs-sm); color:var(--muted); }
@keyframes dj-proc-spin{ to{ transform:rotate(1turn); } }
@media (prefers-reduced-motion: reduce){
    .proc-spin{ animation:dj-proc-spin 2.4s steps(8) infinite; }
}

/* ── Estados: carregando, vazio e erro ──────────────────────────────────────
   O portal mostrava "Carregando…" em texto cru em 27 lugares: parece lento e
   improvisado. O esqueleto no formato do conteudo que vem a seguir (linhas de
   tabela, cartoes) diz "ja estou montando isto" e a troca fica sem solavanco
   (André 12/08/2026). */
.skel{
    position:relative;
    overflow:hidden;
    border-radius:var(--r-sm);
    background:color-mix(in srgb, var(--muted) 14%, transparent);
}
.skel::after{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(90deg, transparent,
        color-mix(in srgb, var(--muted) 16%, transparent), transparent);
    animation:dj-skel 1.4s ease-in-out infinite;
}
@keyframes dj-skel{ to{ transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){
    .skel::after{ animation:none; }
}
.skel-linha{ block-size:12px; margin:0; }
.skel-tabela{ display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-1) 0; }
.skel-row{ display:flex; gap:var(--sp-4); align-items:center; }
.skel-row .skel{ block-size:12px; }
/* A primeira coluna e' a mais "cheia" (codigo/serie); as demais afinam. */
.skel-row .skel:nth-child(1){ flex:2; }
.skel-row .skel:nth-child(2){ flex:3; }
.skel-row .skel:nth-child(3){ flex:2; }
.skel-row .skel:nth-child(4){ flex:1.2; }
.skel-row .skel:nth-child(5){ flex:1; }

/* Vazio e erro: um lugar so, com o que fazer a seguir — nao um paragrafo solto */
.estado{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--sp-2);
    padding:var(--sp-8) var(--sp-4);
    text-align:center;
    color:var(--muted);
}
.estado-icone{
    inline-size:44px;
    block-size:44px;
    display:grid;
    place-items:center;
    border-radius:var(--r-md);
    background:color-mix(in srgb, var(--primary) 12%, transparent);
    color:var(--primary-strong);
    font-size:var(--fs-xl);
}
.estado-titulo{ color:var(--text); font-size:var(--fs-lg); font-weight:700; }
.estado-texto{ font-size:var(--fs-md); max-inline-size:46ch; line-height:var(--lh-md); }
.estado .action-btn, .estado .primary-btn{ margin-top:var(--sp-2); }
.estado-erro .estado-icone{
    background:color-mix(in srgb, var(--danger) 14%, transparent);
    color:var(--danger);
}

/* ── Recibo da fatura (mesmo desenho do central_contadores_erp) ──────────── */
.rec-sec{ margin-top:18px; }
.rec-sec:first-of-type{ margin-top:8px; }
.rec-tit{
    display:inline-block; font-size:var(--fs-xs); font-weight:700; text-transform:uppercase;
    letter-spacing:.4px; color:var(--primary-strong); margin-bottom:8px;
}
.rec-tot{ font-size:var(--fs-sm); color:var(--muted); margin-inline-start:10px; }
/* Quebra do valor: uma linha por parcela, total destacado embaixo */
.mbb{ border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.mbb-row{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    padding:11px 14px; font-size:var(--fs-lg); border-bottom:1px solid var(--border);
}
.mbb-row:last-child{ border-bottom:none; }
.mbb-row span{ color:var(--muted); }
.mbb-deduct strong{ color:var(--danger); }
.mbb-total{ background:var(--panel-soft); font-size:var(--fs-lg); }
.mbb-total span{ color:var(--text); font-weight:700; }

.portal-table tr.clickable-row{
    cursor:pointer;
}

.portal-table tr.clickable-row:hover td{
    background:color-mix(in srgb, var(--primary) 12%, transparent);
}

.table-actions{
    display:flex;
    gap:8px;
    justify-content:flex-end;
}

/* Botoes de acao translucidos */
.table-actions .action-btn{
    background:color-mix(in srgb, var(--panel) 50%, transparent);
    border:1px solid var(--border);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    transition:opacity .14s ease,background .12s,border-color .12s,color .12s;
}

.table-actions .action-btn:hover{
    background:color-mix(in srgb, var(--panel-soft) 85%, transparent);
    border-color:var(--primary);
    color:var(--primary-strong);
}

.table-actions .evaluate-btn{
    background:color-mix(in srgb, var(--primary) 16%, transparent);
    border-color:color-mix(in srgb, var(--primary) 42%, transparent);
    color:var(--primary-strong);
    font-weight:800;
}

.table-actions .evaluate-btn:hover{
    background:color-mix(in srgb, var(--primary) 26%, transparent);
    border-color:var(--primary);
}

/* Em telas com mouse: esconde as acoes e revela so no hover/foco da linha */
@media (hover:hover){
    .hover-actions tbody tr .table-actions{
        opacity:0;
        transition:opacity .14s ease;
    }

    .hover-actions tbody tr:hover .table-actions,
    .hover-actions tbody tr:focus-within .table-actions{
        opacity:1;
    }

    .hover-actions tbody tr:hover td{
        background:color-mix(in srgb, var(--panel-soft) 55%, transparent);
    }
}

/* ── Modal de avaliacao (NPS) ── */
.nps-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:130; display:none; }
.nps-backdrop.open{ display:block; }
.nps-modal{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:min(560px,94vw); max-height:90vh; overflow:auto; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); z-index:131; display:none; padding:22px; }
.nps-modal.open{ display:block; }
.nps-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    /* Sem isto o primeiro rotulo do corpo encosta no subtitulo do cabecalho. */
    margin-block-end:14px; }
.nps-head h2{ font-size:var(--fs-xl); font-weight:800; margin:0; }
.nps-head p{ color:var(--muted); font-size:var(--fs-md); margin:4px 0 0; }
.nps-q{ margin-top:16px; }
.nps-q > label{ display:block; font-size:var(--fs-md); font-weight:600; margin-bottom:8px; }
.nps-scale{ display:flex; flex-wrap:wrap; gap:6px; }
.nps-scale button{ width:36px; height:36px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--panel-soft); color:var(--text); cursor:pointer; font-weight:700; font-variant-numeric:tabular-nums; transition:.12s; }
.nps-scale button:hover{ border-color:var(--primary); }
.nps-scale button.sel{ background:var(--primary); border-color:var(--primary); color:#fff; }
.nps-stars{ display:flex; gap:4px; }
.nps-stars button{ background:none; border:0; cursor:pointer; font-size:var(--fs-2xl); line-height:1; color:var(--border-strong); transition:.12s; padding:0 2px; }
.nps-stars button.on{ color:var(--star); }
.nps-modal textarea{ width:100%; resize:vertical; }
.nps-foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.nps-thanks{ text-align:center; padding:14px 6px; }
.nps-check{ width:56px; height:56px; border-radius:999px; background:color-mix(in srgb, var(--success) 18%, transparent); color:var(--success); display:inline-flex; align-items:center; justify-content:center; font-size:var(--fs-3xl); margin-bottom:10px; }

/* ── Graficos simples dos dashboards da empresa (barras + rosca) ── */
.chart-pad{ padding:16px; }
.mini-bars{ display:flex; align-items:flex-end; gap:12px; height:160px; }
.mini-bar{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; min-width:0; }
.mini-bar-track{ flex:1; width:100%; display:flex; align-items:flex-end; }
.mini-bar-track i{ display:block; width:100%; border-radius:var(--r-sm) 6px 0 0; min-height:4px; transition:height .3s ease; }
.mini-bar > span{ font-size:var(--fs-xs); color:var(--muted); white-space:nowrap; }
.donut-wrap{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.donut{ width:150px; height:150px; border-radius:50%; position:relative; flex:0 0 auto; }
.donut::after{ content:""; position:absolute; inset:24%; background:var(--panel); border-radius:50%; }
.donut-legend{ display:flex; flex-direction:column; gap:9px; min-width:170px; flex:1; }
.donut-legend span{ display:flex; align-items:center; gap:9px; font-size:var(--fs-md); color:var(--muted); }
.donut-legend strong{ color:var(--text); margin-left:auto; font-variant-numeric:tabular-nums; }
.donut-legend i{ width:12px; height:12px; border-radius:var(--r-sm); flex:0 0 auto; }

/* Rotulo de grupo no seletor de papel do login (Cliente / Empresa) */
.role-group-label{ grid-column:1/-1; font-size:var(--fs-xs); font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-top:6px; }
.role-group-label:first-child{ margin-top:0; }

/* Link "Primeiro acesso" no login */
.link-btn{ background:none; border:0; color:var(--primary-strong); font-weight:700; cursor:pointer; font-size:var(--fs-md); padding:8px 0 0; text-align:center; width:100%; }
.link-btn:hover{ text-decoration:underline; }

/* Erro de login + indicador de fonte de dados (mock/real) */
.login-error{ color:var(--danger); font-size:var(--fs-md); font-weight:600; background:color-mix(in srgb, var(--danger) 12%, transparent); border:1px solid color-mix(in srgb, var(--danger) 35%, transparent); border-radius:var(--r-sm); padding:9px 12px; }
.login-error[hidden]{ display:none; }
.api-mode-toggle{ background:none; border:0; color:var(--muted); font-size:var(--fs-xs); cursor:pointer; padding:10px 0 0; text-align:center; width:100%; }
.api-mode-toggle:hover{ color:var(--primary-strong); text-decoration:underline; }

/* ── Modal de primeiro acesso (link magico simulado) ── */
/* z-index acima da .login-view (1000): a adocao/ativacao abre POR CIMA do login. */
.act-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1200; display:none; }
.act-backdrop.open{ display:block; }
.act-modal{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:min(480px,94vw); max-height:92vh; overflow:auto; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); z-index:1201; display:none; padding:26px; }
.act-modal.open{ display:block; }
.act-modal h2{ font-size:var(--fs-2xl); font-weight:800; margin:0 0 6px; }
.act-modal > p{ color:var(--muted); font-size:var(--fs-md); margin:0 0 16px; line-height:1.45; }
.act-modal .field-group{ margin-bottom:12px; }
.act-icon{ width:56px; height:56px; border-radius:999px; background:color-mix(in srgb, var(--primary) 16%, transparent); color:var(--primary-strong); display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xl); margin:0 auto 12px; }
.act-email-row{ display:flex; align-items:center; gap:10px; background:var(--panel-soft); border:1px solid var(--border); border-radius:var(--r-sm); padding:10px 12px; margin-bottom:14px; font-size:var(--fs-md); }
.act-error{ color:var(--danger); font-size:var(--fs-md); margin-top:8px; min-height:18px; }
.act-foot{ margin-top:18px; display:flex; gap:10px; justify-content:flex-end; }

.status{
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:5px 10px;
    border-radius:999px;
    font-size:var(--fs-sm);
    font-weight:800;
}

.status.online{
    background:color-mix(in srgb, var(--success) 12%, transparent);
    color:var(--success);
}

.status.warning{
    background:color-mix(in srgb, var(--warning) 14%, transparent);
    color:var(--warning);
}

.status.offline{
    background:color-mix(in srgb, var(--danger) 12%, transparent);
    color:var(--danger);
}

.status.neutral{
    background:color-mix(in srgb, var(--muted-strong) 14%, transparent);
    color:var(--muted-strong);
}

.status.info{
    background:color-mix(in srgb, var(--primary) 16%, transparent);
    color:var(--primary-strong);
}

.status.info-soft{
    background:color-mix(in srgb, var(--primary) 9%, transparent);
    color:var(--primary);
}

.readonly-badge{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:7px 12px;
    border-radius:999px;
    background:color-mix(in srgb, var(--muted-strong) 14%, transparent);
    color:var(--muted-strong);
    border:1px solid var(--border);
    font-size:var(--fs-md);
    font-weight:800;
    white-space:nowrap;
}

.toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    border-bottom:1px solid var(--border);
}

.toolbar-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.permission-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-bottom:16px;
}

.permission-card{
    min-height:96px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--card-shadow);
    padding:14px 16px;
}

.permission-card span{
    display:block;
    color:var(--muted);
    font-size:var(--fs-sm);
    margin-bottom:8px;
}

.permission-card strong{
    display:block;
    font-size:var(--fs-xl);
    margin-bottom:7px;
}

.permission-card small{
    color:var(--muted);
    line-height:1.35;
}

.inline-form{
    display:grid;
    gap:14px;
}

.inline-form.two-cols{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.notice-card{
    padding:15px 16px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:color-mix(in srgb, var(--primary) 8%, var(--panel));
    color:var(--muted-strong);
    line-height:1.45;
}

.muted-note{
    color:var(--muted);
    font-size:var(--fs-md);
}

.success-note{
    background:color-mix(in srgb, var(--success) 12%, var(--panel));
    border-color:color-mix(in srgb, var(--success) 35%, var(--border));
    color:var(--text);
}

.promo-hero{
    border:1px solid var(--border-strong);
    border-radius:var(--radius);
    box-shadow:var(--card-shadow);
    padding:24px 26px;
    margin-bottom:16px;
    background:
        radial-gradient(900px 220px at 100% 0, color-mix(in srgb, var(--primary) 22%, transparent), transparent),
        color-mix(in srgb, var(--primary) 10%, var(--panel));
}

.promo-kicker{
    display:inline-block;
    color:var(--primary);
    font-size:var(--fs-sm);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
    margin-bottom:10px;
}

.promo-hero h2{
    font-size:var(--fs-2xl);
    margin-bottom:8px;
}

.promo-hero p{
    color:var(--muted-strong);
    max-width:760px;
    line-height:1.5;
}

.promo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;
    padding:16px;
}

.promo-card{
    display:flex;
    flex-direction:column;
    gap:8px;
    background:var(--panel-strong);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:18px;
    cursor:pointer;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.promo-card:hover{
    transform:translateY(-2px);
    border-color:var(--primary);
    box-shadow:var(--card-shadow-hover);
}

.promo-card:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:2px;
}

.promo-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:var(--radius-sm);
    background:color-mix(in srgb, var(--primary) 16%, transparent);
    color:var(--primary);
    font-size:var(--fs-xl);
}

.promo-card strong{
    font-size:var(--fs-xl);
}

.promo-chamada{
    color:var(--muted-strong);
    font-size:var(--fs-md);
    line-height:1.4;
}

.promo-card small{
    color:var(--muted);
    font-size:var(--fs-sm);
    line-height:1.4;
    flex:1;
}

.promo-cta{
    margin-top:8px;
    color:var(--primary);
    font-size:var(--fs-md);
    font-weight:800;
}

.orcamento-form{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:16px;
}

.field-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.billing-card{
    margin-bottom:16px;
}

.compact-title{
    padding:0;
    border-bottom:none;
}

.chart-legend{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    color:var(--muted);
    font-size:var(--fs-md);
}

.chart-legend span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.chart-legend i{
    width:10px;
    height:10px;
    border-radius:var(--r-sm);
    display:inline-block;
}

.legend-pb,
.bar-pb{
    background:#38bdf8;
}

.legend-color,
.bar-color{
    background:#f97316;
}

.legend-scan,
.bar-scan{
    background:var(--success);
}

/* Cada gráfico do dashboard tem um formato próprio: curva para o valor da
   fatura, coluna empilhada para o volume, barra deitada para a contagem de
   chamados e rosca para a composição das requisições. */
.chart-total{
    font-size:var(--fs-sm);
    font-weight:800;
    color:var(--muted);
    white-space:nowrap;
}

.chart-total.sobe{ color:var(--warning); }
.chart-total.desce{ color:var(--success); }

/* "no último mês" acompanha o número, mas em tom de legenda */
.chart-total em{
    font-style:normal;
    font-weight:600;
    color:var(--muted);
}

/* Legenda + selo de variação no canto do card */
.chart-cabeca,
.chart-meta{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

/* Cabeçalho do card de gráfico: título · selo · filtro do próprio card. O filtro
   mora aqui (e não acima do card), encostado na borda direita — assim os quatro
   cards têm o "De" na mesma posição —, e fica fora do trecho que recarrega,
   senão o select perderia o foco a cada consulta. */
.billing-card > .toolbar{
    flex-wrap:wrap;
    justify-content:flex-start;
    row-gap:8px;
}

.billing-card > .toolbar > .section-title{
    margin-inline-end:auto;
}

.billing-card > .toolbar > .periodo-filtro{
    margin-inline-start:auto;
    flex:0 0 auto;
}

.billing-card > .toolbar > .chart-meta:empty{
    display:none;
}

/* --- Curva com área (últimas faturas) --- */
.area-chart{
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    gap:10px;
    padding:20px 38px 14px;
}

.area-plot{
    position:relative;
    min-height:168px;
}

/* Fora do fluxo de propósito: com viewBox quadrado e sem altura resolvida, o
   SVG assumiria proporção 1:1 e esticaria o card inteiro. */
.area-plot svg{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    overflow:visible;
}

.area-dot{
    position:absolute;
    width:9px;
    height:9px;
    padding:0;
    border-radius:50%;
    background:var(--panel);
    border:2px solid var(--primary);
    transform:translate(-50%,50%);
}

/* Ponto que abre a lista do mês: alvo maior que o desenho, senão vira caça ao
   pixel. O ::after é a área de clique. */
.area-dot.clicavel{
    cursor:pointer;
    transition:transform .12s ease, background .12s ease;
}

.area-dot.clicavel::after{
    content:"";
    position:absolute;
    inset:-9px;
    border-radius:50%;
}

.area-dot.clicavel:hover,
.area-dot.clicavel:focus-visible{
    background:var(--primary);
    transform:translate(-50%,50%) scale(1.25);
}

.area-tag{
    position:absolute;
    transform:translate(-50%,-16px);
    font-size:var(--fs-sm);
    font-weight:800;
    color:var(--text);
    white-space:nowrap;
}

.area-tag.na-esquerda{ transform:translate(-14%,-16px); }
.area-tag.na-direita{ transform:translate(-86%,-16px); }

/* Os rótulos seguem a MESMA posição dos pontos (antes era um grid de N colunas
   e o texto centralizava na célula, então as pontas saíam do lugar). */
.area-x{
    position:relative;
    block-size:1.4em;
    color:var(--muted-strong);
    font-size:var(--fs-sm);
    font-weight:800;
}

.area-rot{
    position:absolute;
    transform:translateX(-50%);
    white-space:nowrap;
}

.area-rot.na-esquerda{ transform:translateX(-14%); }
.area-rot.na-direita{ transform:translateX(-86%); }

/* --- Barra deitada (chamados) --- */
.hbar-chart{
    display:grid;
    gap:14px;
    padding:20px 16px;
    min-height:238px;
    align-content:center;
}

.hbar-row{
    display:grid;
    grid-template-columns:var(--hbar-label,52px) minmax(0,1fr) 36px;
    align-items:center;
    gap:10px;
}

.hbar-label{
    color:var(--muted-strong);
    font-size:var(--fs-sm);
    font-weight:800;
    text-align:start;
}

/* Nome da ação que abre a lista de quem fez */
button.hbar-label{
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    text-decoration:underline;
    text-decoration-color:transparent;
    transition:color .12s ease, text-decoration-color .12s ease;
}

button.hbar-label:hover,
button.hbar-label:focus-visible{
    color:var(--text);
    text-decoration-color:currentColor;
}

@media (prefers-reduced-motion:reduce){
    .area-dot.clicavel,
    button.hbar-label{ transition:none; }
}

.hbar-track{
    height:16px;
    border-radius:999px;
    background:var(--panel-soft);
    overflow:hidden;
}

.hbar-fill{
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--kpi-roxo),#c084fc);
}

.hbar-val{
    text-align:right;
    font-size:var(--fs-md);
}

/* --- Rosca (requisições por status) --- */
.rosca-wrap{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:20px;
    padding:20px 16px;
    min-height:238px;
}

.rosca-donut{
    position:relative;
    width:136px;
    height:136px;
}

.rosca{
    width:100%;
    height:100%;
}

.rosca-seg{
    transition:stroke-dasharray .4s ease;
}

.rosca-centro{
    position:absolute;
    inset:0;
    display:grid;
    place-content:center;
    justify-items:center;
    text-align:center;
}

.rosca-centro strong{
    font-size:var(--fs-2xl);
    line-height:1.1;
}

.rosca-centro span{
    color:var(--muted);
    font-size:var(--fs-xs);
}

.rosca-legenda{
    display:grid;
    gap:8px;
    list-style:none;
    min-width:0;
}

.rosca-legenda li{
    display:grid;
    grid-template-columns:10px minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    font-size:var(--fs-sm);
    color:var(--muted-strong);
}

.rosca-legenda i{
    width:10px;
    height:10px;
    border-radius:var(--r-sm);
}

.rosca-legenda span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.rosca-legenda b{
    color:var(--text);
}

/* Fatia que abre a lista das notas */
.rosca-link{
    background:none;
    border:none;
    padding:0;
    text-align:start;
    color:inherit;
    font:inherit;
    cursor:pointer;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-decoration:underline;
    text-decoration-color:transparent;
    transition:color .12s ease, text-decoration-color .12s ease;
}

.rosca-link:hover,
.rosca-link:focus-visible{
    color:var(--text);
    text-decoration-color:currentColor;
}

/* Estrelas na lista de avaliações */
.nota-estrelas{
    color:var(--warning);
    letter-spacing:2px;
    white-space:nowrap;
}

@media (prefers-reduced-motion:reduce){
    .rosca-link{ transition:none; }
}

@media (prefers-reduced-motion:reduce){
    .rosca-seg{ transition:none; }
}

/* Dois gráficos lado a lado, com o mesmo peso (o .split-grid é assimétrico de
   propósito, para tabela + painel). */
.chart-pair{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:16px;
    align-items:stretch;       /* os dois cards da linha terminam na mesma altura */
}

/* Bloco de gráficos: o filtro fica junto do que ele filtra, e não no topo da
   página — o período do gráfico não vale para os cards. */
.chart-area{
    display:grid;
    grid-template-rows:auto 1fr;
    gap:10px;
    min-width:0;
}

/* Respiro entre as linhas de gráfico: sem isso o filtro da linha de baixo
   encosta no card de cima. */
.chart-row{ margin-top:20px; }

.chart-area-head{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    min-height:34px;           /* alinha os filtros das duas colunas na mesma linha */
}

/* De mês/ano até mês/ano */
.periodo-filtro{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    color:var(--muted);
    font-size:var(--fs-sm);
}

.periodo-filtro select{
    min-width:92px;
}

/* O card ocupa a altura toda da célula (o grid já estica) e o desenho preenche o
   card — é o que deixa curva, coluna, barra e rosca terminando juntas. */
.chart-area > div:last-child:not(.chart-pair){
    display:flex;
}

.chart-area > div:last-child:not(.chart-pair) > .table-card{
    flex:1;
}

.chart-pair .table-card{
    display:flex;
    flex-direction:column;
    min-width:0;
    margin:0;                  /* a margem do card come a altura da célula e desalinha a dupla */
}

.chart-pair .billing-chart,
.chart-pair .area-chart,
.chart-pair .hbar-chart,
.chart-pair .rosca-wrap{
    flex:1 1 auto;
}

/* Detalhe da barra (hover e foco): abre os totais por tipo sem tirar o usuário
   da tela. Fica ancorado no gráfico, nunca na barra, para não ser cortado. */
.drill{
    position:absolute;
    z-index:3;
    min-width:150px;
    display:grid;
    gap:5px;
    padding:10px 12px;
    background:var(--panel-2);
    border:1px solid var(--border-strong);
    border-radius:var(--r-md);
    box-shadow:var(--card-shadow-hover);
    font-size:var(--fs-sm);
    text-align:left;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateX(-50%);
    transition:opacity .14s ease,visibility .14s ease;
}

.billing-chart .drill{ top:4px; }
.hbar-row .drill{ bottom:calc(100% + 6px); }
.hbar-row .drill.abaixo{ bottom:auto; top:calc(100% + 6px); }
.drill.na-esquerda{ transform:translateX(-12%); }
.drill.na-direita{ transform:translateX(-88%); }

.drill strong{
    font-size:var(--fs-sm);
    color:var(--text);
}

.drill span{
    display:flex;
    justify-content:space-between;
    gap:16px;
    color:var(--muted-strong);
}

.drill i{ font-style:normal; }
.drill b{ color:var(--text); }

.drill .drill-total{
    margin-top:2px;
    padding-top:6px;
    border-top:1px solid var(--border);
    color:var(--text);
    font-weight:700;
}

/* `:focus-visible` e nao `:focus-within`: no clique do mouse a coluna ficava com
   o foco e o balao nao fechava mais. Por teclado ele continua abrindo. */
.billing-month:hover .drill,
.billing-month:focus-visible .drill,
.hbar-row:hover .drill,
.hbar-row:focus-visible .drill{
    opacity:1;
    visibility:visible;
}

@media (prefers-reduced-motion:reduce){
    .drill{ transition:none; }
}

.hbar-row{ position:relative; }

.billing-chart{
    position:relative;         /* âncora do detalhe das colunas */
    min-height:238px;
    padding:18px 16px 16px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(86px,1fr));
    gap:14px;
    align-items:end;
}

.billing-month{
    min-width:0;
    display:grid;
    justify-items:center;
    gap:7px;
    text-align:center;
}

.billing-month strong{
    font-size:var(--fs-md);
    color:var(--text);
}

.billing-month > span{
    color:var(--muted-strong);
    font-size:var(--fs-sm);
    font-weight:800;
}

.billing-month small{
    max-width:110px;
    color:var(--muted);
    font-size:var(--fs-xs);
    line-height:1.3;
}

.stacked-bar{
    width:38px;
    min-height:18px;
    border-radius:var(--r-sm) 8px 4px 4px;
    overflow:hidden;
    background:var(--panel-soft);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    border:1px solid var(--border);
}

.stacked-bar span{
    display:block;
    width:100%;
}

.info-panel{
    padding:16px;
}

.info-panel h3{
    font-size:var(--fs-xl);
    margin-bottom:12px;
}

.timeline{
    display:grid;
    gap:12px;
}

.timeline-item{
    display:grid;
    grid-template-columns:10px 1fr;
    gap:12px;
}

.timeline-dot{
    width:10px;
    height:10px;
    margin-top:5px;
    border-radius:50%;
    background:var(--primary);
}

.timeline-item strong{
    display:block;
    font-size:var(--fs-lg);
    margin-bottom:3px;
}

.timeline-item span{
    color:var(--muted);
    font-size:var(--fs-md);
}

.modal-backdrop{
    position:fixed;
    inset:0;
    background:rgba(2,6,23,.62);
    backdrop-filter:blur(3px);
    opacity:0;
    visibility:hidden;
    transition:.2s;
    z-index:50;
}

.modal-backdrop.open{
    opacity:1;
    visibility:visible;
}

.modal{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-46%) scale(.97);
    width:min(640px,94vw);
    max-height:92vh;
    background:var(--panel-strong);
    border:1px solid var(--border-strong);
    border-radius:var(--radius);
    padding:26px;
    display:flex;
    flex-direction:column;
    opacity:0;
    visibility:hidden;
    transition:transform .22s ease,opacity .22s ease,visibility .22s;
    z-index:60;
    box-shadow:var(--shadow);
}

.modal.open{
    transform:translate(-50%,-50%) scale(1);
    opacity:1;
    visibility:visible;
}

.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:22px;
}

.modal-header h2{
    font-size:var(--fs-2xl);
    margin-bottom:6px;
}

.modal-subtitle{
    color:var(--muted);
    font-size:var(--fs-md);
}

.close-btn{
    width:34px;
    height:34px;
    background:transparent;
    color:var(--muted-strong);
    border-radius:var(--radius-sm);
    font-size:var(--fs-2xl);
    line-height:1;
}

.close-btn:hover{
    background:var(--panel-soft);
    color:var(--text);
}

.modal-body{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:18px;
    overflow:auto;
    min-height:0;
}

.readonly-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.readonly-grid div,
.readonly-note{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:12px 13px;
}

.readonly-grid span,
.readonly-note strong{
    display:block;
    color:var(--muted);
    font-size:var(--fs-sm);
    font-weight:800;
    margin-bottom:7px;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.readonly-grid strong,
.readonly-note span{
    color:var(--text);
    font-size:var(--fs-lg);
    line-height:1.35;
    overflow-wrap:anywhere;
}

.field-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.field-group label{
    color:var(--muted);
    font-size:var(--fs-md);
    font-weight:700;
}

.field-group input,
.field-group select,
.field-group textarea,
.form-par > div > input,
.form-par > div > select{
    width:100%;
    background:var(--panel);
    border:1px solid var(--border-strong);
    border-radius:var(--r-md);
    color:var(--text);
    /* Campo nao herda fonte: sem isto cada navegador usa a do sistema, e a caixa
       nascia mais alta que o resto da tela (Andre 13/08/2026). */
    font-family:inherit;
    font-size:var(--fs-md);
    padding:9px 11px;
    outline:none;
}

.field-group textarea{
    resize:vertical;
}

/* O width:100% acima e' para campo de texto. Em checkbox/radio ele estica a caixa
   e joga o rotulo para longe — sao os unicos que ficam no tamanho natural. */
.field-group input[type="checkbox"],
.field-group input[type="radio"]{
    width:auto;
    flex:0 0 auto;
    margin:0;
    padding:0;
}

/* ── Avisos (notify) no CENTRO da tela ───────────────────────────────────────
   `popover="manual"`: top layer nativo (sem z-index), sem light-dismiss e sem
   backdrop — a pagina atras continua clicavel porque o host nao intercepta
   ponteiro; so o cartao intercepta (para fechar no clique). */
.toast-host{
    position:fixed; inset:0; margin:auto;
    width:max-content; max-width:min(460px, 92vw); height:max-content;
    /* LAYOUT na base, DISPLAY so no aberto: `display` de autor na base vence o
       display:none que o UA da ao popover fechado — e o host ficaria na tela. */
    flex-direction:column; gap:10px; align-items:center;
    background:none; border:0; padding:0; overflow:visible;
    pointer-events:none;                     /* o clique passa para a pagina */
}
.toast-host:popover-open{ display:flex; }
.toast-host:not([popover]){ display:flex; z-index:99999; }   /* sem suporte a popover */

.toast{
    pointer-events:auto; cursor:pointer;
    display:flex; align-items:center; gap:14px;
    min-width:min(340px, 88vw); max-width:min(460px, 92vw);
    padding:18px 22px; border-radius:var(--r-lg);
    background:var(--panel); color:var(--text);
    border:1px solid var(--border);
    box-shadow:0 24px 60px rgba(0,0,0,.45);
    animation:dj-toast-in .22s ease both;
}
.toast.saindo{ animation:dj-toast-out .2s ease both; }
.toast-msg{ margin:0; font-size:var(--fs-lg); line-height:1.45; white-space:pre-line; }
.toast-icone{
    flex:0 0 auto; inline-size:36px; block-size:36px; border-radius:50%;
    display:grid; place-items:center; font-size:var(--fs-2xl); font-weight:700; color:#fff;
}
.toast-sucesso .toast-icone{ background:var(--success, var(--success)); }
.toast-erro    .toast-icone{ background:var(--danger, #ef4444); }
.toast-info    .toast-icone{ background:var(--primary-strong, #4f8cff); }
.toast-sucesso{ border-color:color-mix(in srgb, var(--success, var(--success)) 45%, transparent); }
.toast-erro   { border-color:color-mix(in srgb, var(--danger, #ef4444) 45%, transparent); }

@keyframes dj-toast-in { from{ opacity:0; transform:scale(.92); } to{ opacity:1; transform:none; } }
@keyframes dj-toast-out{ from{ opacity:1; transform:none; } to{ opacity:0; transform:scale(.96); } }
@media (prefers-reduced-motion: reduce){
    .toast, .toast.saindo{ animation-duration:.01s; }
}

/* Botao que acabou de ser clicado: recusa o segundo clique (ver _TRAVA_CLIQUE_MS).
   pointer-events:none e' o que impede o repique de mouse chegar ao handler. */
.is-busy{ pointer-events:none; opacity:.65; cursor:default; }

/* Grupos de um formulario de config longo (Requisicao, Debitos, Status...) */
.cfg-grupo{ margin-block-end:14px; padding-block-end:12px; border-block-end:1px solid var(--border); }
.cfg-grupo:last-of-type{ border-block-end:0; padding-block-end:0; margin-block-end:6px; }
.cfg-grupo-tit{ font-size:var(--fs-sm); font-weight:700; text-transform:uppercase; letter-spacing:.5px;
    color:var(--primary-strong); margin-block-end:12px; }

/* Selecao MULTIPLA em config: o escolhido vira chip; a busca fica no campo. */
.cfg-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.cfg-chips:not(:empty){ margin-block-end:8px; }
.cfg-chip{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm);
    background:var(--panel-2); border:1px solid var(--border); border-radius:999px; padding:4px 6px 4px 12px; }
.cfg-chip-x{ background:none; border:0; color:var(--muted); font-size:var(--fs-lg); line-height:1;
    cursor:pointer; padding:0 4px; border-radius:999px; }
.cfg-chip-x:hover{ color:var(--danger); background:var(--panel); }

/* Tabela de status da requisicao (config): dropdown + texto + checkbox */
.stq-tabela{ table-layout:fixed; inline-size:100%; }
.stq-tabela td, .stq-tabela th{ vertical-align:middle; padding:6px 8px; }
.stq-tabela col.stq-c-cod{ width:44%; }
.stq-tabela col.stq-c-rot{ width:40%; }
.stq-tabela col.stq-c-can{ width:11%; }
.stq-tabela col.stq-c-x{ width:5%; }
/* Status da OS: a coluna do sim/nao virou dropdown de 3 opcoes e pede largura */
.stq-modos col.stq-c-cod{ width:35%; }
.stq-modos col.stq-c-rot{ width:32%; }
.stq-modos col.stq-c-modo{ width:28%; }
.stq-tabela select, .stq-tabela input{ inline-size:100%; font-size:var(--fs-md); padding:8px 10px; }
.stq-tabela .stq-check{ text-align:center; }
.stq-tabela .stq-check input{ inline-size:auto; }
.stq-tabela .stq-x{ text-align:end; }
/* A tabela ja ocupa a largura toda: nada de rolagem lateral aqui */
.stq-wrap{ overflow-x:visible; }

/* Acao dentro de um grupo do formulario de config (ex.: criar status no ERP) */
.cfg-grupo-acao{ display:flex; justify-content:flex-end; margin-block-start:4px; }

/* Lista de opcoes marcaveis numa config (ex.: niveis de cliente com prazo maior) */
.cfg-checks{ display:flex; flex-direction:column; gap:6px; padding:2px 0; margin-block-end:12px; }
.cfg-checks:last-child{ margin-block-end:0; }
.form-par{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; align-items:start; }
/* Cada metade do par e' um campo como os outros: rotulo em cima, caixa embaixo.
   Sem isto o rotulo ficava colado na lateral da caixa e as duas metades saiam
   desalinhadas entre si (Andre 26/08/2026). */
.form-par > div{ display:flex; flex-direction:column; gap:8px; min-inline-size:0; }
.form-par > div > label{ color:var(--muted); font-size:var(--fs-md); font-weight:700; }
.form-par > div > input,
.form-par > div > select{ inline-size:100%; }
@media (max-width:560px){ .form-par{ grid-template-columns:1fr; } }
.cfg-check{ display:flex; align-items:center; gap:8px; font-size:var(--fs-md);
    color:var(--text); font-weight:400; cursor:pointer; }

.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus{
    border-color:var(--primary);
}

.switch-field{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    padding:12px;
    border:1px solid var(--border);
    border-radius:var(--r-md);
    background:var(--panel);
}

.switch{
    position:relative;
    display:inline-flex;
    width:44px;
    height:24px;
}

.switch input{
    opacity:0;
    width:0;
    height:0;
}

.switch span{
    position:absolute;
    inset:0;
    background:var(--panel-soft);
    border:1px solid var(--border-strong);
    border-radius:999px;
    cursor:pointer;
    transition:.2s;
}

.switch span:before{
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    left:2px;
    top:2px;
    background:var(--muted);
    border-radius:50%;
    transition:.2s;
}

.switch input:checked + span{
    background:var(--primary);
}

.switch input:checked + span:before{
    transform:translateX(20px);
    background:#fff;
}

.modal-footer{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid var(--border);
}

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

.hidden{
    display:none !important;
}

.session-ended{
    position:fixed;
    inset:0;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(11,18,32,.82);
    opacity:0;
    visibility:hidden;
    z-index:100;
}

.session-ended.open{
    opacity:1;
    visibility:visible;
}

.session-ended > div{
    width:min(440px,100%);
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:26px;
    text-align:center;
    box-shadow:var(--shadow);
}

.session-ended h2{
    margin-bottom:8px;
}

.session-ended p{
    color:var(--muted);
    margin-bottom:18px;
}

@media (max-width:1100px){
    .split-grid,
    .role-preview,
    .login-panel{
        grid-template-columns:1fr;
    }

    .metric-grid,
    .client-context,
    .permission-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .login-brand{
        min-height:auto;
    }
}

@media (max-width:820px){
    .app-shell{
        display:block;
    }

    /* Sidebar vira um drawer off-canvas (padrao do central) */
    .sidebar{
        position:fixed;
        top:0;
        left:0;
        height:100vh;
    height:100dvh;
        width:264px;
        transform:translateX(-100%);
        transition:transform .22s ease;
        z-index:60;
        box-shadow:var(--shadow);
    }

    body.nav-open .sidebar{
        transform:translateX(0);
    }

    /* Cliente e contrato sobem para logo abaixo da marca. Colados na borda de
       baixo, a lista do seletor de contrato abria para fora da tela e ficava
       cortada; aqui em cima ela tem a gaveta inteira para se abrir — e e' a
       primeira coisa que aparece ao abrir o menu (Andre 26/08/2026). */
    .sidebar-brand{ order:0; }
    .sidebar-foot{
        order:1;
        border-top:0;
        border-bottom:1px solid var(--border);
    }
    .sidebar-menu{ order:2; }
    /* A marca do rodape nao faz sentido no meio do menu. */
    .sidebar-foot .sf-brand{ display:none; }

    .sidebar-backdrop{
        display:block;
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.55);
        z-index:55;
        opacity:0;
        pointer-events:none;
        transition:opacity .2s ease;
    }

    body.nav-open .sidebar-backdrop{
        opacity:1;
        pointer-events:auto;
    }

    .nav-toggle{
        display:inline-flex;
    }

    .topbar{
        padding:0 16px;
    }

    .topbar-actions{
        gap:8px;
    }

    .profile-copy{
        display:none;
    }

    .content-area{
        padding:18px;
    }

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

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

    .toolbar-actions{
        justify-content:flex-start;
    }

    .inline-form.two-cols{
        grid-template-columns:1fr;
    }

    .modal{
        width:min(560px,94vw);
        padding:20px;
    }
}

@media (max-width:560px){
    .metric-grid,
    .client-context,
    .permission-grid,
    .readonly-grid,
    .field-grid{
        grid-template-columns:1fr;
    }

    .topbar h1{
        font-size:var(--fs-2xl);
    }
}

*{
    scrollbar-width:thin;
    scrollbar-color:var(--border-strong) transparent;
}

::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-track{
    background:transparent;
}

::-webkit-scrollbar-thumb{
    background:var(--border-strong);
    border-radius:999px;
    border:2px solid transparent;
    background-clip:padding-box;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--muted);
    border:2px solid transparent;
    background-clip:padding-box;
}

/* ============================================================================
   Transicoes de tela (PADRAO do portal) — toda troca de pagina, modal e o
   login->app usam estas animacoes. Curtas e suaves; respeitam quem desativou
   animacoes no sistema (prefers-reduced-motion).
   ============================================================================ */
@keyframes dj-page-in   { from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes dj-modal-in  { from{ opacity:0; transform:translate(-50%,-50%) scale(.96); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes dj-fade-in   { from{ opacity:0; } to{ opacity:1; } }

/* Navegacao entre paginas: a area de conteudo entra com fade + leve subida. */
#contentArea.page-anim{ animation:dj-page-in .28s cubic-bezier(.22,.61,.36,1) both; }

/* Login -> app e a propria tela de login aparecem com fade suave. */
body.authed .main-content{ animation:dj-fade-in .30s ease both; }
.login-view:not(.hidden){ animation:dj-fade-in .30s ease both; }

/* Modais centrais (NPS, ativacao/adocao, conexoes, dataclassic, OS, requisicao)
   entravam secos (display:block). Agora entram com fade + escala. Os drawers
   (.modal) ja animam via transition e ficam como estao. */
.nps-modal.open,
.act-modal.open{ animation:dj-modal-in .20s ease both; }

.nps-backdrop.open,
.act-backdrop.open{ animation:dj-fade-in .18s ease both; }

/* Troca de conteudo DENTRO de um modal (ex.: detalhe do equipamento -> editar
   cadastro): o modal ja esta aberto, entao so o conteudo faz fade. */
.modal-swap{ animation:dj-fade-in .18s ease both; }

@media (prefers-reduced-motion: reduce){
    #contentArea.page-anim,
    body.authed .main-content,
    .login-view:not(.hidden),
    .login-view::before, .login-view::after,
    .nps-modal.open, .act-modal.open,
    .nps-backdrop.open, .act-backdrop.open,
    .modal-swap{ animation:none !important; }
}

/* ============================================================================
   <dialog> nativo (padrao moderno): top layer + animacao com @starting-style,
   transition-behavior: allow-discrete e overlay (entra E sai animando).
   Guia: modern-web-guidance / animate-to-from-top-layer.
   ============================================================================ */
.app-dialog{
    margin:auto;
    inline-size:min(480px, 94vw);
    max-block-size:92dvh;
    overflow:auto;
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    background:var(--panel);
    color:var(--text);
    padding:0;
    box-shadow:var(--shadow);
    opacity:0;
    transform:translateY(8px) scale(.98);
    transition:opacity .22s ease, transform .22s ease, display .22s allow-discrete, overlay .22s allow-discrete;
}
.app-dialog.app-dialog-wide{ inline-size:min(580px, 94vw); }
.app-dialog.app-dialog-xwide{ inline-size:min(680px, 94vw); }
/* Documento A4 (ordem de serviço em PDF) pede mais largura que o detalhe. */
.app-dialog.app-dialog-doc{ inline-size:min(900px, 96vw); }
/* Config em tabela (status): 4 colunas nao cabem nos 580px do -wide */
.app-dialog.app-dialog-xl{ inline-size:min(1040px, 96vw); }
/* Painel com cabecalho/rodape fixos e corpo rolavel (perfil, detalhe de registro).
   O <dialog> tem padding:0 -> o padding volta no header/body/footer (senao os
   campos encostam na borda). Fonte/campos um pouco menores p/ respiro. */
/* Painel (drawer) SÓ existe no layout quando aberto — senão o <dialog> fechado
   (opacity:0) ficava por cima do conteúdo interceptando cliques/foco. O display:flex
   precisa estar no [open] p/ vencer o display:block padrao do <dialog>[open]. */
.app-dialog.app-dialog-panel:not([open]){ display:none; }
.app-dialog.app-dialog-panel[open]{ display:flex; flex-direction:column; overflow:hidden; }
.app-dialog-panel .modal-header{ padding:22px 24px 0; margin-block-end:16px; }
.app-dialog-panel .modal-body{ flex:1 1 auto; min-block-size:0; overflow:auto; padding-inline:24px; gap:10px; }
.app-dialog-panel .modal-footer{ padding:16px 24px 20px; margin-block-start:16px; }
.app-dialog-panel .modal-header h2{ font-size:var(--fs-xl); }
.app-dialog-panel .field-group label{ font-size:var(--fs-sm); }
.app-dialog-panel .cfg-check{ font-size:var(--fs-sm); }
.app-dialog-panel .field-group input,
.app-dialog-panel .field-group select,
.app-dialog-panel .field-group textarea,
.app-dialog-panel .form-par > div > input,
.app-dialog-panel .form-par > div > select{ font-size:var(--fs-sm); padding:7px 10px; }
/* Rotulo longo de status ("67 — CANCEL. SOLICITADO PELO CLIENTE") quebrava em
   tres linhas e cada select ficava de uma altura. Uma linha so', com reticencia. */
.app-dialog-panel .field-group select{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-dialog-panel .switch-field label{ font-size:var(--fs-md); }
/* Rodape do modal de config: botoes e input de teste na MESMA escala dos campos
   (a .primary-btn nasce com padding 12x18 e destoava do resto). */
.app-dialog-panel .act-foot .primary-btn,
.app-dialog-panel .act-foot .action-btn{ padding:7px 14px; font-size:var(--fs-sm); }
.app-dialog-panel .act-foot .compact-select{ min-height:0; padding:7px 10px; font-size:var(--fs-sm); }
.app-dialog[open]{
    opacity:1;
    transform:none;
}
@starting-style{
    .app-dialog[open]{ opacity:0; transform:translateY(8px) scale(.98); }
}
.app-dialog::backdrop{
    background-color:rgba(0,0,0,0);
    transition:background-color .22s ease, display .22s allow-discrete, overlay .22s allow-discrete;
}
.app-dialog[open]::backdrop{ background-color:rgba(2,6,23,.55); }
@starting-style{
    .app-dialog[open]::backdrop{ background-color:rgba(0,0,0,0); }
}
.app-dialog-body{ padding:22px; }
@media (prefers-reduced-motion: reduce){
    .app-dialog{ transform:none; transition-duration:.01s; }
}

/* Ordem de serviço: PDF exibido dentro do modal. Altura generosa porque o
   documento tem uma pagina A4 — no celular o proprio visualizador rola. */
.os-pdf{ inline-size:100%; block-size:min(72dvh, 780px); border:1px solid var(--border);
    border-radius:var(--r-md); background:#ffffff; }
@media (max-width: 560px){ .os-pdf{ block-size:60dvh; } }
/* Quando o navegador nao exibe PDF embutido (Chrome do Android), o lugar do
   documento vira o convite para abri-lo. */
.pdf-fora{
    display:flex; flex-direction:column; align-items:center; gap:12px;
    padding:34px 22px; text-align:center;
    border:1px dashed var(--border); border-radius:var(--r-md);
    background:var(--panel-2); color:var(--muted);
}
.pdf-fora > p:first-of-type{ margin:0; color:var(--text); font-weight:600; }
.pdf-fora .muted-note{ margin:0; }

/* ── Toque e telas estreitas ──────────────────────────────────────────────
   Tudo aqui e' consequencia de usar o portal no celular, nao de largura de
   janela: por isso @media (pointer:coarse), e nao um breakpoint. */

/* O Safari do iPhone AMPLIA a pagina ao focar campo com fonte < 16px — e nao
   volta sozinho. Vale so' no toque: no desktop os campos seguem como estao. */
@media (pointer:coarse) and (hover:none) and (max-width:960px){
    .hf input, .hf select,
    .hist-exibir select,
    .req-form input, .req-form select, .req-form textarea,
    #reqVerif input, #reqVerif select, #reqVerif textarea,
    .sf-select,
    .stq-tabela select, .stq-tabela input,
    .app-dialog-panel .field-group input,
    .app-dialog-panel .field-group select,
    .app-dialog-panel .field-group textarea{ font-size:16px; }
}

/* Alvo de dedo: o ⋮ e' o unico caminho para as acoes da linha, e o checkbox e'
   quem liga a barra de selecao em massa. 16px e 26px erram o toque. */
@media (pointer:coarse){
    .kebab-btn{ padding:9px 14px; }
    .row-check, #usersCheckAll{ width:22px; height:22px; }
    .row-check:checked::after, #usersCheckAll:checked::after{
        left:7px; top:2.5px; width:5px; height:10px; border-width:0 2.5px 2.5px 0;
    }
    .stars{ gap:6px; }
    .star{ font-size:var(--fs-2xl); padding:4px 2px; }
}

/* Abaixo de ~390px a topbar nao cabia: o gap fixo empurrava o titulo por cima
   dos botoes e a pagina ganhava rolagem lateral. */
@media (max-width:420px){
    .topbar{ gap:10px; }
    .topbar-lead{ gap:8px; }
    .topbar-actions{ gap:6px; }
    .nav-toggle{ min-width:38px; min-height:38px; }
    .topbar-actions .icon-btn{ width:38px; height:38px; }
    .topbar h1{ font-size:var(--fs-xl); overflow-wrap:anywhere; }
}

/* Autocomplete de cliente na busca da empresa (nada de <datalist> nativo) */
.hf-largo{ position:relative; min-inline-size:220px; }

.mov-sugestoes{
    position:absolute;
    inset-inline:0;
    top:100%;
    z-index:20;
    margin-block-start:4px;
    max-block-size:260px;
    overflow:auto;
    background:var(--panel-2);
    border:1px solid var(--border-strong);
    border-radius:var(--r-md);
    box-shadow:var(--card-shadow-hover);
}

.mov-sugestao{
    display:flex;
    justify-content:space-between;
    gap:10px;
    inline-size:100%;
    padding:9px 12px;
    background:none;
    border:none;
    text-align:start;
    color:var(--text);
    font:inherit;
    cursor:pointer;
}

.mov-sugestao:hover,
.mov-sugestao:focus-visible{ background:var(--panel-soft); }

/* ── CX: avaliações e tratativa ───────────────────────────────────────────── */
/* Linha de tratativa vencida: destaque discreto na lista, sem virar alarme. */
.portal-table tbody tr.linha-alerta td { background: color-mix(in srgb, var(--warning) 8%, transparent); }
.cx-historico { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cx-historico li { border-left: 2px solid var(--border); padding-left: 12px; }
.cx-historico li strong { font-size: .9rem; }
.cx-historico li .muted-note { margin-left: 8px; }

/* ── Entrar com Microsoft (equipe DJ) ─────────────────────────────────────── */
/* Fica abaixo do "Esqueci minha senha", separado por um "ou": é caminho
   alternativo, não a ação principal da tela. */
.login-sso { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 6px; }
.login-sso-ou { position: relative; text-align: center; font-size: .8rem; color: var(--muted); }
.login-sso-ou::before, .login-sso-ou::after {
    content: ""; position: absolute; top: 50%; width: calc(50% - 18px); height: 1px; background: var(--border);
}
.login-sso-ou::before { left: 0; }
.login-sso-ou::after { right: 0; }
.login-sso-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }

/* ── Ajuda: tópicos do manual referentes à tela atual ─────────────────────── */
.help-topicos-tit{
    margin: 14px 0 8px; font-size: .78rem; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted);
}
.help-topicos{ display: flex; flex-direction: column; gap: 2px; }
.help-topico{
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; border-radius: 10px; text-decoration: none;
    color: var(--text); border: 1px solid transparent;
}
.help-topico:hover, .help-topico:focus-visible{
    background: var(--surface-2); border-color: var(--border);
}
.help-topico svg{ color: var(--muted); flex: none; }

/* Contato fica ancorado no rodapé da Ajuda: é o que a pessoa procura quando o
   manual não resolveu, e não deve exigir rolar até o fim da lista de tópicos. */
.help-drawer .help-body{ display: flex; flex-direction: column; min-block-size: 0; }
.help-drawer .help-sec:not(.help-rodape){ flex: 0 0 auto; }
.help-drawer .help-body > .help-sec:first-child{ flex: 1 1 auto; overflow-y: auto; }
.help-drawer .help-rodape{
    margin-block-start: auto; position: sticky; bottom: 0;
    background: var(--surface); border-top: 1px solid var(--border);
    padding-block: 14px; flex: 0 0 auto;
}

/* Animacao de ENTRADA no dashboard (login / abrir o site): ~2s de "carregando"
   para nao abrir de repente. Nao roda no F5 nem na navegacao pelo menu. */
.dash-boot{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:var(--sp-4);
    min-block-size:60vh;
    color:var(--muted);
    animation:dj-fade-in .5s ease both;
}
.dash-boot .proc-spin{ inline-size:34px; block-size:34px; border-width:4px; }
.dash-boot-txt{ margin:0; font-size:var(--fs-sm); }
@media (prefers-reduced-motion: reduce){ .dash-boot{ animation:none; } }

/* Acoes do banner de cookies (gerenciar/rejeitar/aceitar) */
.cookie-acoes{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.cookie-acoes .action-btn{ white-space:nowrap; }

/* Tela Clientes (admin): busca + lista + detalhe 360 */
.cli-busca{ inline-size:100%; max-inline-size:440px; padding:10px 14px; border-radius:var(--r-md);
    border:1px solid var(--border); background:var(--panel); color:var(--text); font:inherit; }
.cli-split{ display:grid; grid-template-columns:minmax(220px, 320px) 1fr; gap:16px; align-items:start; }
.cli-lista{ display:flex; flex-direction:column; gap:6px; }
.cli-item{ text-align:left; display:flex; flex-direction:column; gap:1px; padding:10px 12px;
    border:1px solid var(--border); border-radius:var(--r-md); background:var(--panel); color:var(--text); cursor:pointer; }
.cli-item:hover{ border-color:var(--primary); }
.cli-item.sel{ border-color:var(--primary); background:color-mix(in srgb, var(--primary) 12%, var(--panel)); }
.cli-detalhe{ min-inline-size:0; }
.cli-head h2{ font-size:20px; }
.cli-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(168px, 1fr)); gap:14px; margin-top:6px; align-items:stretch; }
/* Todos os cards com a MESMA altura e o numero alinhado embaixo (rotulo de 1 ou 2
   linhas nao desalinha os valores). O wrapper clicavel estica o card por dentro. */
.cli-cards > *{ min-width:0; }
.cli-cards .metric-link{ display:flex; }
.cli-cards .metric-link > .metric-card{ flex:1 1 auto; width:100%; }
.cli-cards .metric-card{ height:100%; display:flex; flex-direction:column; }
.cli-cards .metric-card span{ margin-bottom:0; }
.cli-cards .metric-card strong{ margin-top:auto; }
.cli-cards .metric-card small{ margin-top:6px; }
@media (max-width:820px){ .cli-split{ grid-template-columns:1fr; } }
.cli-topo{ margin:0 0 14px; }

/* Pagina dedicada do cliente (hub) */
.voltar-link{ background:none; border:0; color:var(--primary); cursor:pointer; font:inherit; padding:0 0 12px; }
.voltar-link:hover{ text-decoration:underline; }
.cli-det-head{ margin-bottom:4px; }
.cli-det-head h2{ font-size:22px; }
.cli-det-futuro{ margin-top:24px; padding:12px 14px; border:1px dashed var(--border); border-radius:var(--r-md); }

/* Abas da pagina do cliente */
.cli-abas{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin:18px 0 16px; flex-wrap:wrap; }
.cli-aba{ background:none; border:0; border-bottom:2px solid transparent; color:var(--muted); cursor:pointer; font:inherit; padding:8px 14px; }
.cli-aba:hover{ color:var(--text); }
.cli-aba.ativa{ color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.row-clicavel{ cursor:pointer; }
.cli-aba-topo{ margin:0 0 12px; display:flex; justify-content:flex-end; }
/* Cards do resumo do cliente que navegam para a aba ao clicar */
.metric-link{ cursor:pointer; border-radius:var(--r-lg); }
.cli-card-link:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
/* Ficha do contrato (modal grande) */
.ctr-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.ctr-sec{ margin-top:18px; }
.ctr-sec-tit{ font-size:var(--fs-sm); font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); padding-bottom:6px; margin-bottom:12px; }
.ctr-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px 24px; margin:0; }
.ctr-grid dt{ font-size:var(--fs-sm); color:var(--muted); margin-bottom:2px; }
.ctr-grid dd{ margin:0; color:var(--text); font-weight:600; }
.ctr-obs{ margin:0; white-space:pre-wrap; line-height:1.5; color:var(--text); }

/* ── Oportunidades › Configuração ──────────────────────────────────────────
   Este form é INLINE num card largo (os outros configs vivem em modal, que já é
   estreito) — sem um teto os campos atravessam a tela num monitor grande.
   Campos e botões seguem o compacto da casa (.compact-btn / .compact-select: 34px). */
/* Duas colunas: config à esquerda (estreita) e as faixas ao lado, aproveitando a
   largura que sobrava. Vira uma coluna só quando não cabe. `align-items:start`
   para os cards não esticarem à altura do mais alto. */
.oport-cfg-grid{ display:grid; gap:16px; grid-template-columns:1fr; align-items:start; }
@media (min-width:1000px){
    .oport-cfg-grid{ grid-template-columns:minmax(0,560px) minmax(0,1fr); }
}

#oportCfgForm, #solCfgForm{ max-width:520px; }
#oportCfgForm .field-group input,
#oportCfgForm .field-group select,
#solCfgForm .field-group input,
#solCfgForm .field-group select{ min-height:34px; padding:7px 10px; }

/* De-para do catálogo de Soluções: 3 colunas numa coluna estreita — os selects
   precisam de teto, senão a coluna Grupo sai da área visível. */
#solCatBox th, #solCatBox td{ padding:6px 8px; }
#solCatBox select{
    min-height:34px; padding:6px 8px; width:150px; max-width:100%;
    font-size:var(--fs-md); font-family:inherit;
    background:var(--panel); border:1px solid var(--border);
    border-radius:var(--radius-sm); color:var(--text);
}

/* Editor das faixas de bonificação: linha de tabela, não formulário — campos baixos. */
#oportFaixasBox table{ max-width:920px; }
#oportFaixasBox th, #oportFaixasBox td{ padding:6px 8px; }
#oportFaixasBox input{
    min-height:34px; padding:7px 10px; font-size:var(--fs-md); font-family:inherit;
    background:var(--panel); border:1px solid var(--border);
    border-radius:var(--radius-sm); color:var(--text);
}

/* ── Editor do catálogo de Soluções (admin) ──────────────────────────────────
   Cada solução é um BLOCO, não uma linha de tabela: são cinco campos por card
   (ícone, título, chamada, descrição e o de-para), e numa tabela a coluna de
   ações ficava cortada. O bloco empilha sozinho no celular. */
.sol-cat-lista{ display:flex; flex-direction:column; gap:12px; }
.sol-cat-item{
    border:1px solid var(--border); border-radius:var(--r-md);
    background:var(--panel-2); padding:12px 14px;
    display:flex; flex-direction:column; gap:8px;
}
.sol-cat-l1{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sol-cat-item input[type="text"],
.sol-cat-item textarea{
    inline-size:100%; min-inline-size:0; font-family:inherit; font-size:var(--fs-md);
}
.sol-cat-item textarea{ resize:vertical; }
.sol-cat-titulo{ flex:1 1 220px; inline-size:auto !important; font-weight:600; }
.sol-cat-sel-icone{ inline-size:132px; flex:none; }
.sol-icone-previa{
    inline-size:38px; block-size:38px; flex:none; display:grid; place-items:center;
    border-radius:var(--r-sm);
    background:color-mix(in srgb, var(--primary) 16%, transparent); color:var(--primary);
}
.sol-cat-ativo{ display:flex; align-items:center; gap:6px; font-size:var(--fs-sm);
    color:var(--muted); white-space:nowrap; }
.sol-cat-ordem{ display:flex; gap:4px; margin-inline-start:auto; }
/* De-para: rótulo + os dois selects em cascata, lado a lado quando cabe. */
.sol-cat-depara{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sol-cat-rot{ font-size:var(--fs-sm); color:var(--muted); white-space:nowrap; }
.sol-cat-depara .compact-select{ flex:1 1 180px; min-inline-size:0; }
/* Card desligado: continua editável, mas o esmaecido já diz que o cliente não o vê. */
.sol-cat-off{ opacity:.55; }
@media (max-width:640px){
    .sol-cat-sel-icone{ inline-size:104px; }
    .sol-cat-ordem{ margin-inline-start:0; }
}

/* ── Faixa "você está vendo o passado" (ERP fora, dados do cache) ───────────
   No topo do conteúdo, antes de qualquer tabela: o cliente precisa ler a data
   ANTES de tirar conclusão do que está na tela. */
#avisoCache{ padding:0 clamp(12px,3vw,28px); }
.cache-aviso{
    display:flex; gap:12px; align-items:flex-start;
    background:color-mix(in srgb, var(--warning) 10%, transparent);
    border:1px solid color-mix(in srgb, var(--warning) 40%, transparent);
    border-radius:var(--r-md); padding:12px 16px; margin:12px 0 0;
}
.cache-aviso svg{ color:var(--warning); flex:0 0 auto; margin-top:2px; }
.cache-aviso strong{ display:block; font-size:var(--fs-sm); }
.cache-aviso p{ margin:4px 0 0; font-size:var(--fs-xs); color:var(--muted); line-height:1.45; }

/* ── Aviso de operação indisponível (ERP fora) ──────────────────────────────
   Diálogo, não mensagem de campo: o cliente precisa ler que NADA foi gravado. */
.aviso-indisponivel{
    display:flex; gap:12px; align-items:flex-start;
    background:color-mix(in srgb, var(--warning) 12%, transparent);
    border:1px solid color-mix(in srgb, var(--warning) 45%, transparent);
    border-radius:var(--r-md); padding:14px 16px;
}
.aviso-indisponivel svg{ color:var(--warning); flex:0 0 auto; margin-top:2px; }
.aviso-indisponivel strong{ display:block; }

/* ── Comunicações (log de integrações com os sistemas de fora) ──────────────
   Tela de diagnóstico: o corpo das mensagens é o conteúdo principal, então o
   <pre> do JSON tem rolagem própria e nunca empurra a largura da página. */
/* Flex, nao grid auto-fit: com duas integracoes ativas o `1fr` esticava cada
   cartao para meia tela para mostrar um numero de dois digitos. */
.com-kpis{
    display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-block-end:var(--sp-4);
}
.com-kpi{
    display:flex; flex-direction:column; gap:2px; text-align:start;
    padding:var(--sp-3) var(--sp-4); border:1px solid var(--border);
    border-radius:var(--radius); background:var(--panel); color:inherit;
    cursor:pointer; flex:1 1 180px; max-inline-size:260px; min-inline-size:0;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.com-kpi:hover{ border-color:var(--primary); box-shadow:var(--card-shadow); }
.com-kpi[aria-pressed="true"]{
    border-color:var(--primary);
    background:color-mix(in srgb, var(--primary) 8%, var(--panel));
}
.com-kpi-ruim{ border-inline-start:3px solid var(--danger); }
.com-kpi-rot{ font-size:var(--fs-sm); color:var(--muted); }
.com-kpi-num{ font-size:var(--fs-2xl); line-height:var(--lh-2xl); }
.com-kpi-sub{ font-size:var(--fs-xs); color:var(--muted); }

.com-paginador{
    display:flex; align-items:center; justify-content:center; gap:var(--sp-3);
    flex-wrap:wrap; padding:var(--sp-3) var(--sp-4);
}

.com-dl{ margin:var(--sp-3) 0 0; }
.com-dt{
    margin-block-start:var(--sp-3); color:var(--muted);
    font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.03em;
}
.com-dd{ margin:2px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.com-rot{
    margin:var(--sp-4) 0 var(--sp-1); color:var(--muted);
    font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.03em;
}
/* O payload é a razão de ser do detalhe: max-height alta, mas com teto — um
   corpo de 2 KB sem limite deixa o botão Fechar fora da tela. */
.com-json{
    margin:0; padding:var(--sp-3); border-radius:var(--radius-sm);
    background:var(--panel-2); border:1px solid var(--border);
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:var(--fs-xs); line-height:1.5;
    max-block-size:42vh; overflow:auto; white-space:pre-wrap;
    overflow-wrap:anywhere;   /* token longo numa linha só não rola a página */
}

/* ── Banco de dados do portal e Zona de Perigo ───────────────────────────────
   O vermelho aqui não é decoração: é o único aviso de que o botão apaga tudo.
   Fica sólido (não só contorno) para não ser confundido com "Cancelar". */
.danger-btn{
    background:var(--danger); color:#fff; border:1px solid transparent;
    padding:9px 12px; border-radius:var(--radius-sm); font-weight:600;
}
.danger-btn:hover:not(:disabled){
    background:color-mix(in srgb, var(--danger) 82%, #000);
}
.zona-perigo{ border-color:color-mix(in srgb, var(--danger) 45%, var(--border)); }
.zona-perigo .section-title{ color:var(--danger); }
.zona-perigo-txt{ margin:0; color:var(--muted-strong); line-height:1.5; max-inline-size:62ch; }
.notice-alerta{
    border-color:color-mix(in srgb, var(--warning) 45%, var(--border));
    background:color-mix(in srgb, var(--warning) 10%, var(--panel));
}
.reset-lista{ margin:10px 0 0; padding-inline-start:20px; color:var(--muted-strong); }
.reset-lista li{ margin-block-end:2px; }
/* A chave é para ser LIDA e digitada em outro lugar: monoespaçada, grande e com
   `user-select:all` para o clique pegar a chave inteira, sem sobrar hífen. */
.chave-reset{
    margin:6px 0 8px; padding:10px 12px; border-radius:var(--radius-sm);
    background:var(--panel-2); border:1px solid var(--border);
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:var(--fs-lg); letter-spacing:.06em; word-break:break-all;
    user-select:all;
}

/* Selo de quem é da casa, na trilha. Discreto: a maioria das linhas do dia a dia
   é de cliente, e o selo serve para a exceção saltar, não para poluir. */
.tri-selo{
    display:inline-block; margin-inline-start:6px; padding:1px 6px;
    border-radius:var(--r-pill); font-size:var(--fs-2xs); font-weight:700;
    letter-spacing:.04em; color:var(--primary);
    background:color-mix(in srgb, var(--primary) 14%, transparent);
}