:root {
    /* recuo da "área segura" do celular (faixa do relógio/notch). No
       navegador comum vale 0; no app instalado (PWA) o iPhone informa a
       altura real — a topbar soma isso pra não ficar embaixo do relógio */
    --safe-top: env(safe-area-inset-top, 0px);
    --bg: #f1f5f9;
    --surface: #ffffff;
    --ink: #0f172a;
    --ink-soft: #475569;
    --muted: #94a3b8;
    --border: #e2e8f0;
    --hover: #f1f5f9;
    --primary: #1d4ed8;
    --primary-dark: #1e40af;
    --vencido: #dc2626;
    --v30: #ea580c;
    --v60: #d97706;
    --v90: #ca8a04;
    --ok: #059669;
    --shadow: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
    --shadow-md: 0 4px 12px rgba(15,23,42,.08);
}

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

body {
    font-family: 'Inter', -apple-system, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Topbar ---------- */
.topbar {
    background: var(--ink);
    color: #fff;
    display: flex;
    align-items: center;
    padding: var(--safe-top) 24px 0;
    height: calc(60px + var(--safe-top));
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 50;
}
.brand { display: flex; flex-direction: column; line-height: 1.1; }
.brand-logo { height: 34px; width: auto; display: block; }
.logo { font-weight: 800; letter-spacing: 1px; font-size: 18px; }
.brand-sub { font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; }
.topbar .user-box { margin-left: auto; }
/* cards do topo de Equipamentos locados (02/09/2026) — o desenho do portal
   antigo do Absolute, menor e na fonte do portal */
.kpi-locados { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px; margin-bottom: 12px; }
.kpi-loc { background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 14px; text-decoration: none; color: inherit; display: block;
    transition: box-shadow .12s, transform .12s; }
.kpi-loc:hover { text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kpi-loc-rotulo { font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 600; }
.kpi-loc-valor { font-size: 22px; font-weight: 800; line-height: 1; margin-top: 6px;
    font-variant-numeric: tabular-nums; }
.kpi-loc-sub { font-size: 11px; color: var(--ink-soft); font-weight: 600; margin-left: 2px; }
.kpi-loc-valor.c-verde { color: #16a34a; }
.kpi-loc-valor.c-azul { color: #2563eb; }
.kpi-loc-valor.c-laranja { color: #e8590c; }
.kpi-loc-valor.c-vermelho { color: #dc2626; }
@media (max-width: 700px) { .kpi-locados { grid-template-columns: repeat(2, 1fr); } }
/* alarme da agenda correndo na barra escura (Marcelo, 02/09/2026: "tipo
   aqueles painéis digitais") */
.alarme-faixa { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap;
    height: 34px; border-radius: 8px; background: rgba(255,255,255,.10);
    position: relative; }
.alarme-faixa[hidden] { display: none; }
.alarme-trilho { display: inline-flex; align-items: center; gap: 36px; height: 34px;
    padding-left: 100%; animation: alarme-correr 22s linear infinite; }
.alarme-faixa:hover .alarme-trilho { animation-play-state: paused; }
@keyframes alarme-correr { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
    .alarme-trilho { animation: none; padding-left: 12px; } }
.alarme-item { display: inline-flex; align-items: center; gap: 8px; color: #ffd166;
    font-weight: 700; font-size: 13.5px; letter-spacing: .2px; }
.alarme-item a { color: inherit; text-decoration: none; cursor: pointer; }
.alarme-item a:hover { text-decoration: underline; }
.alarme-item .alarme-quando { color: #fff; font-weight: 500; opacity: .85; }
.alarme-x { background: rgba(255,255,255,.14); border: 0; color: #fff; border-radius: 50%;
    width: 22px; height: 22px; line-height: 22px; text-align: center; cursor: pointer;
    font-size: 13px; padding: 0; }
.alarme-x:hover { background: rgba(255,255,255,.3); }

/* ---------- Layout com barra lateral ---------- */
.app-shell { display: flex; align-items: flex-start; }
.sidebar {
    width: 232px; flex-shrink: 0; background: var(--surface);
    border-right: 1px solid var(--border);
    /* rola por conta própria: fixa na altura da janela (abaixo do topo de
       60px) e o excesso do menu tem seu próprio scroll — descer o mouse
       aqui não mexe na página, e vice-versa */
    position: sticky; top: calc(60px + var(--safe-top));
    height: calc(100vh - 60px - var(--safe-top)); overflow-y: auto;
    overscroll-behavior: contain;   /* o scroll do menu não "vaza" pra página */
    padding: 10px 0 40px;
}
/* barra de rolagem discreta, só quando o menu é maior que a tela */
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb {
    background: var(--border); border-radius: 4px;
}
.sidebar:hover::-webkit-scrollbar-thumb { background: var(--muted, #94a3b8); }
.sidebar-nav { display: flex; flex-direction: column; gap: 1px; }
.sidebar-link, .sidebar-grupo-toggle {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 9px 18px; color: var(--ink-soft); font-size: 13.5px; font-weight: 500;
    background: none; border: none; text-align: left; cursor: pointer; font-family: inherit;
}
.sidebar-link:hover, .sidebar-grupo-toggle:hover { background: var(--hover); text-decoration: none; color: var(--ink); }
.sidebar-link.active, .sidebar-grupo-toggle.active {
    background: #EFF6FF; color: var(--primary); font-weight: 600;
    box-shadow: inset 3px 0 0 var(--primary);
}
.sidebar-link svg, .sidebar-grupo-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-chevron { margin-left: auto; font-size: 13px; transition: transform .15s; color: var(--muted); }
.sidebar-grupo.aberto .sidebar-chevron { transform: rotate(90deg); }
.sidebar-subitens { display: none; flex-direction: column; background: var(--bg); }
.sidebar-grupo.aberto .sidebar-subitens { display: flex; }
.sidebar-subitens a {
    padding: 8px 18px 8px 47px; color: var(--ink-soft); font-size: 13px; font-weight: 500;
}
.sidebar-subitens a:hover { background: var(--hover); text-decoration: none; color: var(--ink); }

.app-shell .container { max-width: none; margin: 0; flex: 1; min-width: 0; }

/* --- botão hambúrguer do menu mobile --- */
.nav-toggle {
    display: none; flex-direction: column; justify-content: center; gap: 4px;
    width: 32px; height: 32px; background: none; border: none; cursor: pointer;
    padding: 0; flex-shrink: 0;
}
.nav-toggle span {
    display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px;
    transition: transform .18s, opacity .18s;
}
.nav-toggle.aberto span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.aberto span:nth-child(2) { opacity: 0; }
.nav-toggle.aberto span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
body.menu-mobile-aberto { overflow: hidden; }
.user-box { display: flex; align-items: center; gap: 12px; }
.sino-novidades { position: relative; font-size: 18px; text-decoration: none; line-height: 1; }
.sino-novidades:hover { text-decoration: none; }
.sino-badge {
    position: absolute; top: -2px; right: -3px; width: 9px; height: 9px;
    background: #ef4444; border-radius: 50%; border: 2px solid var(--ink);
}
.timeline-versoes { max-width: 760px; }
.versao-bloco {
    background: var(--surface); border-radius: 12px; padding: 20px 22px;
    box-shadow: var(--shadow); margin-bottom: 14px; border-left: 4px solid var(--border);
}
.versao-bloco.versao-atual { border-left-color: var(--primary); }
.versao-cabecalho { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.versao-tag { font-size: 16px; font-weight: 700; color: var(--ink); }
.versao-data { font-size: 12px; color: var(--muted); }
.versao-nova { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    background: #dbeafe; color: #1e40af; padding: 2px 8px; border-radius: 20px; }
.versao-itens { margin: 0; padding-left: 20px; }
.versao-itens li { font-size: 14px; color: var(--ink-soft); margin-bottom: 6px; line-height: 1.5; }
.user-name { font-size: 13px; color: #e2e8f0; }
/* (27/10) versão no ar, na barra: discreta, o detalhe fica no tooltip */
.versao-ar { font-size: 11px; color: #94a3b8; text-decoration: none; white-space: nowrap; letter-spacing: .2px; }
.versao-ar:hover { color: #e2e8f0; text-decoration: none; }
@media (max-width: 720px) { .versao-ar { display: none; } }
.btn-logout {
    color: #cbd5e1; font-size: 13px; padding: 6px 12px;
    border: 1px solid rgba(255,255,255,.2); border-radius: 6px;
}
.btn-logout:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }

.badge-role {
    font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px;
    text-transform: uppercase; letter-spacing: .5px;
}
.badge-role.admin { background: #1d4ed8; color: #fff; }
.badge-role.comum { background: #334155; color: #cbd5e1; }

/* ---------- Container ---------- */
/* Densidade: o sistema é usado o dia inteiro, em tela cheia, com listas
   longas. Espaço em branco aqui não é respiro, é rolagem — cada linha que
   não cabe é uma que o Marcelo precisa ir buscar. Os valores abaixo foram
   apertados de propósito; ver docs/DENSIDADE.md. */
.container { max-width: 1320px; margin: 0 auto; padding: 18px 20px 40px; }

/* Tela de ENTRADA (Marcelo, 27/08): o papel de parede azul preenche a
   área toda — menos topo e menu lateral. As margens negativas anulam o
   respiro do .container só nesta tela. */
.entrada-cheia {
    margin: -18px -20px -40px;
    min-height: calc(100vh - 60px - var(--safe-top, 0px)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
@media (max-width: 480px) {
    .entrada-cheia { margin: -18px -14px -50px; }
}

.page-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; flex-wrap: wrap; gap: 10px;
}
.page-head h1 { font-size: 19px; font-weight: 700; }
.page-sub { color: var(--ink-soft); font-size: 12.5px; }
.head-actions { display: flex; gap: 8px; }

/* ---------- Flash ---------- */
/* barra de ações flutuante no rodapé: em listas compridas (Faturamento,
   Contas a receber), os totais e o botão de enviar ficam sempre à vista —
   sem rolar até o fim da relação (Marcelo, 20/08) */
.barra-flutuante {
    position: sticky;
    bottom: 0;
    background: var(--bg);
    padding: 10px 4px;
    margin-top: 10px;
    border-top: 2px solid #CBD5E1;
    box-shadow: 0 -6px 14px rgba(0, 0, 0, .08);
    z-index: 30;
}
[data-tema="escuro"] .barra-flutuante { border-top-color: #334155; }

/* cabeçalho ordenável: clique alterna crescente/decrescente (ordenar.js) */
/* ---------- Largura das colunas ajustável (02/10) — colunas_ajustaveis.js ---------- */
.th-ajustavel { position: relative; }
/* a alça fica DENTRO da célula: avançando para fora, a última coluna criava
   uma barra de rolagem de 4px em toda tabela (05/10) */
.col-alca { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize;
    z-index: 3; user-select: none; }
.col-alca::after { content: ""; position: absolute; top: 20%; bottom: 20%; right: 0; width: 1px;
    background: transparent; }
.th-ajustavel:hover .col-alca::after, .col-arrastando .col-alca::after { background: var(--border); }
.col-alca:hover::after { background: var(--primary); width: 2px; }
.col-arrastando, .col-arrastando * { cursor: col-resize !important; user-select: none !important; }
.table.colunas-ajustadas th, .table.colunas-ajustadas td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table.colunas-ajustadas td > div, .table.colunas-ajustadas td > span { max-width: 100%; }
.col-restaurar { display: block; margin: 4px 0 0 auto; padding: 2px 8px; font-size: 11px; color: var(--ink-soft);
    background: none; border: 1px solid var(--border); border-radius: 5px; cursor: pointer; }
.col-restaurar[hidden] { display: none; }
.col-restaurar:hover { color: var(--primary); border-color: var(--primary); }
@media print { .col-alca, .col-restaurar { display: none !important; } }

/* ---------- Campo de cliente com busca (05/10) — busca_empresa.js ---------- */
.be-caixa { position: relative; display: inline-block; min-width: 240px; max-width: 100%; vertical-align: middle; }
.filters .be-caixa { flex: 1 1 260px; }
.field .be-caixa { display: block; width: 100%; }
.be-input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 13px; font-family: inherit; background: var(--surface); color: var(--ink); }
.field .be-input { padding: 6px 9px; border-radius: 6px; }
.be-input:focus { outline: none; border-color: var(--primary); }
.be-select-oculto { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0;
    pointer-events: none; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.be-lista { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; max-height: 340px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
    margin-top: 3px; text-align: left; min-width: 320px; }
.be-item { padding: 6px 10px; cursor: pointer; border-bottom: 1px solid var(--border); }
.be-item:last-child { border-bottom: 0; }
.be-item.be-ativo, .be-item:hover { background: #eff6ff; }
.be-nome { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.be-sub { font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.be-item mark { background: #fef08a; color: inherit; padding: 0; }
.be-inativo .be-nome { color: var(--ink-soft); font-weight: 500; }
.be-tag { font-size: 10px; color: #991b1b; background: #fee2e2; border-radius: 4px; padding: 0 5px; margin-left: 4px; }
.be-grupo .be-nome { color: #4338ca; }
.be-titulo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft);
    padding: 5px 10px 2px; background: var(--bg); }
.be-vazio { padding: 10px; font-size: 12.5px; color: var(--ink-soft); }
[data-tema="escuro"] .be-item.be-ativo, [data-tema="escuro"] .be-item:hover { background: #172554; }

.th-ordenavel { cursor: pointer; user-select: none; }
.th-ordenavel:hover { text-decoration: underline; }
.th-ordenavel[data-dir="asc"]::after { content: " ▲"; font-size: 0.7em; }
.th-ordenavel[data-dir="desc"]::after { content: " ▼"; font-size: 0.7em; }

.flash {
    padding: 9px 13px; border-radius: 8px; margin-bottom: 12px;
    font-size: 13px; font-weight: 500;
}
.flash-success { background: #dcfce7; color: #166534; }
.flash-danger { background: #fee2e2; color: #991b1b; }
.flash-warning { background: #fef3c7; color: #92400e; }

/* ---------- Dashboard: faixa de ação ---------- */
.acao-destaque {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px;
}
.destaque-card {
    border-radius: 9px; padding: 9px 12px; display: flex; flex-direction: column;
    gap: 3px; color: #fff; box-shadow: var(--shadow-md); transition: transform .12s;
    text-decoration: none;
}
.destaque-card:hover { transform: translateY(-3px); text-decoration: none; }
.destaque-vencido { background: linear-gradient(135deg, #dc2626, #991b1b); }
.destaque-30 { background: linear-gradient(135deg, #ea580c, #c2410c); }
.destaque-email { background: linear-gradient(135deg, #1d4ed8, #1e3a8a); }
.destaque-top { display: flex; align-items: baseline; gap: 6px; }
.destaque-num { font-size: 20px; font-weight: 800; line-height: 1; }
.destaque-icone { font-size: 15px; }
.destaque-tag { font-size: 12px; font-weight: 600; opacity: .95; }
.destaque-valor { font-size: 11.5px; opacity: .9; }
.destaque-acao { font-size: 11.5px; font-weight: 700; margin-top: 1px; }

/* resumo compacto */
.resumo-linha {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px;
}
.resumo-item {
    background: var(--surface); border-radius: 8px; padding: 6px 10px; box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 1px; text-decoration: none;
    border-left: 3px solid var(--border);
}
.resumo-item:hover { text-decoration: none; background: var(--bg); }
.resumo-num { font-size: 14px; font-weight: 700; color: var(--ink); }
.resumo-lab { font-size: 10.5px; color: var(--ink-soft); }
.resumo-valor-item { border-left-color: var(--primary); }
.resumo-valor-item .resumo-num { color: var(--primary); font-size: 13px; }

@media (max-width: 900px) {
    .acao-destaque { grid-template-columns: 1fr; }
    .resumo-linha { grid-template-columns: 1fr 1fr; }
}

/* ---------- Cards ---------- */
.cards {
    /* auto-fit: quantos cards houver, uma linha só no desktop — cada um
       encolhe até 150px antes de quebrar (aí é mobile mesmo) */
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px; margin-bottom: 12px;
}
.card {
    background: var(--surface); border-radius: 8px; padding: 8px 10px;
    box-shadow: var(--shadow); display: flex; flex-direction: column;
    gap: 2px; border-left: 3px solid var(--muted);
    transition: transform .12s, box-shadow .12s;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.card-num { font-size: 17px; font-weight: 800; color: var(--ink); }
.card-label { font-size: 10.5px; color: var(--ink-soft); font-weight: 500; }
/* variante usada nos cards de resumo (retornos etc.): o valor se ajusta
   ao espaço — número curto fica grande, moeda longa encolhe sem estourar */
.card-valor {
    font-size: clamp(13px, 1vw, 17px); font-weight: 800; color: var(--ink);
    line-height: 1.2; white-space: nowrap;
}
.card-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.card-total { border-left-color: var(--primary); }
.card-vencido { border-left-color: var(--vencido); }
.card-vencido .card-num, .card-vencido .card-valor { color: var(--vencido); }
.card-30 { border-left-color: var(--v30); }
.card-30 .card-num, .card-30 .card-valor { color: var(--v30); }
.card-60 { border-left-color: var(--v60); }
.card-90 { border-left-color: var(--v90); }

/* ---------- Panels & grid ---------- */
.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-bottom: 14px; }
.panel {
    background: var(--surface); border-radius: 10px; padding: 12px;
    box-shadow: var(--shadow); margin-bottom: 12px;
}
.panel h2 { font-size: 14px; font-weight: 700; margin-bottom: 9px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; }
.panel-head h2 { margin-bottom: 0; }
.link-more { font-size: 13px; font-weight: 500; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.table th {
    text-align: left; padding: 6px 10px; border-bottom: 2px solid var(--border);
    font-weight: 600; color: var(--ink-soft); white-space: nowrap;
}
.table th a { color: var(--ink-soft); }
.table th a:hover { color: var(--primary); text-decoration: none; }
.table td { padding: 6px 10px; border-bottom: 1px solid var(--border); }
.table .num { text-align: right; }
.table-striped tbody tr:nth-child(even) { background: var(--bg); }
.table tbody tr:hover { background: #eff6ff; }
/* Colunas de conteúdo curto (S/N, código, pedido, categoria) ocupam SÓ o
   que o texto pede — width:1% + nowrap é o jeito de dizer "encolhe" numa
   tabela de largura 100%. Sem isso a folga da tela ia para elas, e no
   notebook do Marcelo o S/N virava um corredor vazio de 200px que
   "come um pedaço da tela" (01/09). A Descrição é quem absorve a folga:
   max-width:0 + width faz ela esticar e cortar com reticências. */
.col-justa { white-space: nowrap; width: 1%; }
/* a Empresa não pode ser esmagada pela Descrição: razão social longa
   (JOST BRASIL SISTEMAS AUTOMOTIVOS LTDA) em uma ou duas linhas, não quatro */
.col-empresa { min-width: 230px; }
.desc-cell { max-width: 0; width: 28%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* coluna de ações fixa na borda direita — com tabela larga (a barra lateral
   toma espaço horizontal), sem isso os botões ficavam escondidos, só
   visíveis rolando a tabela até o fim */
.table .acoes-col {
    position: sticky; right: 0; background: var(--surface);
}
.table thead .acoes-col { z-index: 2; }
.table-striped tbody tr:nth-child(even) .acoes-col { background: var(--bg); }
.table tbody tr:hover .acoes-col { background: #eff6ff; }
.empty { text-align: center; color: var(--muted); padding: 22px; }

/* linhas coloridas por status */
.row-vencido { background: #fef2f2 !important; }
.row-vence_30 { background: #fff7ed !important; }

/* ---------- Pills ---------- */
.pill {
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.pill-vencido { background: #fee2e2; color: #991b1b; }
/* etiqueta compacta embaixo de um valor (Vencimentos, 23/09): não aumenta a linha */
.pill.pill-mini { padding: 0 7px; font-size: 10.5px; line-height: 16px; }
.col-vig { width: 1%; white-space: nowrap; line-height: 1.35; }
.pill-30 { background: #ffedd5; color: #9a3412; }
.pill-60 { background: #fef3c7; color: #92400e; }
.pill-90 { background: #fef9c3; color: #854d0e; }
.pill-ok { background: #dcfce7; color: #166534; }
.pill-sem { background: var(--hover); color: #64748b; }
.pill-acao-login { background: #dbeafe; color: #1e40af; }
.pill-acao-criar { background: #dcfce7; color: #166534; }
.pill-acao-editar { background: #fef3c7; color: #92400e; }
.pill-acao-excluir { background: #fee2e2; color: #991b1b; }
.detalhe-cell { max-width: 360px; font-size: 12px; color: var(--ink-soft); }
.ip-cell { font-size: 12px; color: var(--muted); font-family: monospace; }
.col-empresas .chip { display: inline-block; background: #dbeafe; color: #1e40af; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; margin: 1px; }
.chips-mais { display: inline-block; }
.chips-mais summary { list-style: none; cursor: pointer; background: #e0e7ff; color: #4338ca; }
.chips-mais summary::-webkit-details-marker { display: none; }
.chips-mais summary:hover { background: #c7d2fe; }
.chips-mais[open] summary { background: #c7d2fe; }
.chip-mais { user-select: none; }
.chips-extra { margin-top: 4px; }
.det-empresas { display: inline-block; position: relative; }
.det-empresas summary { list-style: none; }
/* right:0 ancora o popup na borda da célula de ações (última coluna) —
   sem isso ele cresce para a direita e sai da área visível */
.pop-empresas { position: absolute; right: 0; z-index: 10; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px; box-shadow: var(--shadow-md); margin-top: 4px; }
/* variante sem corte: overflow em .table-wrap engole popups absolutos
   (o "Editar" das empresas abria e ficava invisível). Usar nas tabelas
   estreitas que têm popup e não precisam de rolagem horizontal. */
.table-wrap.solta { overflow: visible; }
.pop-empresas select { width: 220px; padding: 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; margin-bottom: 6px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block; padding: 9px 16px; border-radius: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer; border: none;
    font-family: inherit; transition: background .12s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }
.btn-ghost { background: var(--surface); color: var(--ink-soft); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg); }
/* Padrão de cor dos botões (Marcelo, 10/09/2026):
   azul  = ação principal da tela (salvar, enviar)
   verde = confirmar dinheiro que entrou/saiu (dar baixa, recebido)
   vermelho cheio     = apaga de vez, não volta (excluir)
   vermelho contorno  = tira de circulação mas fica registrado e pode voltar (cancelar, encerrar) */
.btn-success { background: #16a34a; color: #fff; border: 1px solid #16a34a; }
.btn-success:hover { background: #15803d; color: #fff; }
.btn-danger { background: #dc2626; color: #fff; border: 1px solid #dc2626; }
.btn-danger:hover { background: #b91c1c; color: #fff; }
.btn-danger-outline { background: var(--surface); color: #dc2626; border: 1px solid #fca5a5; }
.btn-danger-outline:hover { background: #fee2e2; color: #b91c1c; }
.zona-cuidado { border: 1px solid #fecaca; border-radius: 10px; padding: 12px 14px; background: #fff7f7; }
.zona-cuidado h3 { color: #b91c1c; margin: 0 0 6px; }
.btn-block { width: 100%; }

.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--surface); color: var(--ink-soft); cursor: pointer; font-size: 14px;
}
.btn-icon:hover { background: var(--hover); text-decoration: none; }
.btn-icon-danger:hover { background: #fee2e2; color: var(--vencido); border-color: #fecaca; }
.acoes-col { white-space: nowrap; }

.btn-mini {
    display: inline-block; white-space: nowrap;
    padding: 4px 10px; font-size: 12px; border-radius: 5px;
    border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-family: inherit;
}
.btn-mini:hover { background: var(--hover); }
/* "btn btn-primary btn-mini": o fundo claro do .btn-mini vencia o azul
   do .btn-primary na cascata — texto branco em botão branco (triagem dos
   Retornos, Marcelo 20/08). O primary manda na cor, sempre. */
.btn-mini.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-mini.btn-primary:hover { background: var(--primary-dark); }
.btn-mini.btn-success { background: #16a34a; color: #fff; border-color: #16a34a; }
.btn-mini.btn-success:hover { background: #15803d; }
.btn-mini.btn-danger-outline { background: var(--surface); color: #b91c1c; border-color: #fca5a5; }
.btn-mini.btn-danger-outline:hover { background: #fef2f2; }

/* "corrigir" na lista de contas a pagar: fica discreto ao lado do
   status e ganha cor no hover — é atalho, não ação principal da linha */
.link-corrigir {
    font-size: 12px; color: var(--muted); text-decoration: none;
    white-space: nowrap; margin-left: 6px;
}
.link-corrigir:hover { color: var(--primary); text-decoration: underline; }
.mini-input { padding: 4px 8px; font-size: 12px; width: 110px;
    border: 1px solid var(--border); border-radius: 5px; }

/* ---------- Filters ---------- */
.filters {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center;
    background: var(--surface); padding: 10px 12px; border-radius: 10px; box-shadow: var(--shadow);
}
.filters input[type=text] { flex: 1; min-width: 220px; }
.filters input, .filters select {
    padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 13px; font-family: inherit; background: var(--surface);
    min-width: 0; max-width: 100%;
}
/* o filtro de empresa carrega nome + CNPJ + cidade: sem teto, a opcao
   mais comprida define a largura do select e desloca a barra inteira */
.filters select { max-width: 320px; text-overflow: ellipsis; }
/* "Mais filtros" (Locados, 01/09): o que se usa de vez em quando fica
   dobrado numa linha própria, abaixo da barra, e abre sozinho quando
   algum desses filtros está ativo — o contador diz quantos. */
.filters .filtros-mais { flex-basis: 100%; }
.filters .filtros-mais > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 8px; border: 1px dashed var(--border);
    color: var(--ink-soft); font-size: 12.5px; user-select: none;
}
.filters .filtros-mais > summary::-webkit-details-marker { display: none; }
.filters .filtros-mais > summary:hover { color: var(--primary); border-color: var(--primary); }
.filters .filtros-mais[open] > summary { border-style: solid; color: var(--primary); }
.filters .filtros-mais .badge-n {
    background: var(--primary); color: #fff; border-radius: 999px;
    padding: 0 7px; font-size: 11px; font-weight: 700; line-height: 16px;
}
.filters .filtros-mais-corpo { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.result-info { font-size: 13px; color: var(--ink-soft); margin-bottom: 12px; }

/* filtro de período (datas) */
.filtro-periodo {
    display: flex; align-items: center; gap: 6px;
    background: var(--bg); padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border);
}
.filtro-periodo label { font-size: 12px; color: var(--ink-soft); font-weight: 500; }
.filtro-periodo input[type=date] {
    padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 12px; font-family: inherit;
}

/* chips de filtros ativos */
.filtros-ativos {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 12px; color: var(--ink-soft); margin-bottom: 14px;
}
.filtros-ativos .chip {
    background: #dbeafe; color: #1e40af; padding: 3px 10px; border-radius: 20px;
    font-weight: 600; font-size: 11px;
}

/* ---------- Forms ---------- */
.form-card, .form-inline {
    background: var(--surface); border-radius: 12px; padding: 24px; box-shadow: var(--shadow);
}
/* minmax(0, 1fr) e nao 1fr: com "1fr" a coluna tem min-width auto e
   um conteudo largo (um <select> com opcao comprida, por exemplo)
   estoura a grade para fora da tela em vez de encolher */
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; }
.field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.field-full { grid-column: 1 / -1; }
/* duas colunas: para o campo de empresa, cujo texto agora carrega
   nome + CNPJ + cidade e nao cabe bem em um quarto da largura */
.field-wide { grid-column: span 2; }
@media (max-width: 720px) { .field-wide { grid-column: 1 / -1; } }
.field label { font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.field input, .field textarea, .field select {
    padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 13px; font-family: inherit; background: var(--surface);
    max-width: 100%;
}
/* select com texto longo (empresa + CNPJ + cidade) corta com reticencias
   dentro da propria caixa em vez de empurrar a coluna */
.field select { text-overflow: ellipsis; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--primary); }
.form-actions { display: flex; gap: 10px; margin-top: 16px; }

.form-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.form-inline input, .form-inline select {
    padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 13px; font-family: inherit;
}

/* ---------- Totalizadores ---------- */
.totalizadores { margin-bottom: 18px; }
.tot-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px; margin-bottom: 10px;
}
.tot-card {
    background: var(--surface); border-radius: 12px; padding: 16px 18px;
    box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 3px;
    border-left: 4px solid var(--muted);
}
.tot-card-principal { border-left-color: var(--primary); }
.tot-card-principal .tot-valor { color: var(--primary); }
.tot-card-vencido { border-left-color: var(--vencido); }
.tot-card-vencido .tot-valor { color: var(--vencido); }
.tot-card-avencer { border-left-color: var(--v30); }
.tot-card-avencer .tot-valor { color: var(--v30); }
.tot-card-alerta { border-left-color: var(--muted); background: var(--bg); }
.tot-label { font-size: 11px; color: var(--ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.tot-valor { font-size: 22px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.tot-sub { font-size: 11px; color: var(--muted); }

.tot-detalhe {
    background: var(--surface); border-radius: 12px; box-shadow: var(--shadow);
    padding: 4px 18px;
}
.tot-detalhe summary {
    cursor: pointer; font-size: 13px; font-weight: 600; color: var(--primary);
    padding: 10px 0; user-select: none;
}
.tot-detalhe summary:hover { color: var(--primary-dark); }
.tot-tabelas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 8px 0 16px; }
.tot-tabela h4 { font-size: 13px; margin-bottom: 8px; color: var(--ink-soft); }
.tot-tabela table { font-size: 12px; }
.tot-tabela tfoot th { border-top: 2px solid var(--border); padding-top: 8px; }

@media (max-width: 900px) {
    .tot-tabelas { grid-template-columns: 1fr; }
}

/* ---------- Edição em card (abre abaixo da linha) ---------- */
.linha-dados { cursor: default; }
.linha-ativa { background: #eff6ff !important; }
.linha-ativa td { border-bottom: none; }
.linha-ativa .acoes-col { background: #eff6ff !important; }
.linha-salva-flash { background: #dcfce7 !important; transition: background .5s; }
.linha-salva-flash .acoes-col { background: #dcfce7 !important; transition: background .5s; }

.card-edicao {
    background: var(--bg); border: 1px solid #dbeafe; border-radius: 10px;
    padding: 18px 20px; margin: 4px 2px 10px;
}
.card-edicao-head {
    font-size: 13px; color: var(--ink-soft); margin-bottom: 14px;
    padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.card-edicao-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.card-edicao-grid label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 11px; font-weight: 600; color: var(--ink-soft);
}
.card-edicao-grid label.campo-largo { grid-column: span 2; }
.card-edicao-grid input {
    padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px;
    font-size: 13px; font-family: inherit; font-weight: 400; color: var(--ink); background: var(--surface);
}
.card-edicao-grid input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(29,78,216,.12); }
.card-edicao-acoes {
    display: flex; align-items: center; gap: 10px; margin-top: 16px;
    padding-top: 14px; border-top: 1px solid var(--border);
}
.card-msg { font-size: 13px; font-weight: 500; }
.card-msg-info { color: var(--ink-soft); }
.card-msg-erro { color: var(--vencido); }

.col-valor { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.col-data { white-space: nowrap; }
.dica-inline {
    font-size: 12px; color: var(--ink-soft); margin: 12px 2px 0;
    background: var(--bg); padding: 8px 12px; border-radius: 8px; display: inline-block;
}

@media (max-width: 900px) {
    .card-edicao-grid { grid-template-columns: 1fr 1fr; }
    .card-edicao-grid label.campo-largo { grid-column: span 2; }
}

/* ---------- Botão e modal Absolute ---------- */
.btn-absolute {
    border: none; background: none; cursor: pointer; padding: 4px;
    transition: transform .1s; line-height: 1; display: inline-flex; align-items: center;
}
.btn-absolute:hover { transform: scale(1.2); }
/* escudo SVG — cor no fill (máxima compatibilidade) */
.abs-svg { display: block; }
.btn-absolute.abs-tem .abs-svg path { fill: #16a34a; }
.btn-absolute.abs-tem { filter: drop-shadow(0 1px 2px rgba(22,163,74,.3)); }
.btn-absolute.abs-nao .abs-svg path { fill: #94a3b8; }

.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-box { background: var(--surface); border-radius: 14px; max-width: 560px; width: 100%; max-height: 85vh; overflow: auto; box-shadow: var(--shadow-lg); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-fechar { border: none; background: none; font-size: 18px; cursor: pointer; color: var(--muted); }
.modal-fechar:hover { color: var(--vencido); }
.modal-corpo { padding: 20px 22px; }
.abs-carregando, .abs-vazio { text-align: center; color: var(--ink-soft); padding: 20px; }
.abs-grid { display: flex; flex-direction: column; gap: 0; }
.abs-linha { display: flex; justify-content: space-between; gap: 16px; padding: 9px 2px; border-bottom: 1px solid var(--border); font-size: 13px; }
.abs-rot { color: var(--ink-soft); font-weight: 600; }
.abs-val { color: var(--ink); text-align: right; word-break: break-word; }
.abs-val.abs-alerta { color: #dc2626; font-weight: 700; }
.catalogo-dica { display: block; font-size: 12px; margin-top: 4px; }
.catalogo-dica.cat-ok { color: #16a34a; font-weight: 600; }
.catalogo-dica.cat-nao { color: var(--muted); }
.campo-com-btn { display: flex; gap: 4px; align-items: stretch; }
.campo-com-btn input { flex: 1; }
.btn-buscar-produto {
    border: 1px solid var(--border); background: var(--bg); border-radius: 7px;
    cursor: pointer; padding: 0 10px; font-size: 14px;
}
.btn-buscar-produto:hover { background: #eff6ff; border-color: var(--primary); }
.abs-sync { font-size: 12px; color: var(--muted); margin-top: 14px; text-align: center; }
.abs-acoes { margin-top: 16px; text-align: center; }

/* ---------- Pagination ---------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.page-status { font-size: 13px; color: var(--ink-soft); }

/* ---------- Login ---------- */
.login-body {
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
    background: url('/static/img/login-bg.svg'), linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}
.login-card {
    background: var(--surface); padding: 40px; border-radius: 16px; width: 380px;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.login-logo { font-size: 26px; font-weight: 800; letter-spacing: 1px; color: var(--ink); text-align: center; }
.login-logo-img { display: block; max-width: 240px; height: auto; margin: 0 auto 6px; }
.login-sub { text-align: center; color: var(--ink-soft); font-size: 13px; margin: 4px 0 24px; }
.login-form { display: flex; flex-direction: column; gap: 8px; }
.login-form label { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-top: 8px; }
.login-form input {
    padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px;
}
.login-form input:focus { outline: none; border-color: var(--primary); }
.login-form button { margin-top: 20px; padding: 12px; }

/* ---------- Login dividido (06/10) — estilo do material "infoside | one" ---------- */
.lg-body { flex-direction: column; padding: 24px 16px; box-sizing: border-box; }
.lg-wrap { display: flex; width: 100%; max-width: 900px; min-height: 520px; border-radius: 18px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.35); background: var(--surface); }
.lg-painel { flex: 0 0 46%; background: #0f1a2e; color: #fff; padding: 40px 36px; display: flex; flex-direction: column;
    position: relative; overflow: hidden; }
.lg-painel::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 320px; height: 320px;
    border-radius: 50%; border: 1px solid rgba(255,255,255,.08); }
.lg-marca { display: flex; flex-direction: column; gap: 2px; margin-bottom: 36px; }
.lg-logo { height: 34px; width: auto; align-self: flex-start; }
.lg-marca-sub { font-size: 9.5px; letter-spacing: 2.2px; color: rgba(255,255,255,.6); margin-left: 2px; }
.lg-titulo { font-size: 30px; line-height: 1.15; font-weight: 800; margin: 0 0 14px; letter-spacing: -.3px; }
.lg-titulo em { font-style: normal; color: #f97316; }
.lg-texto { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.78); margin: 0 0 auto; }
.lg-itens { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px;
    color: rgba(255,255,255,.85); }
.lg-itens li::before { content: "●"; color: #f97316; font-size: 9px; margin-right: 7px; vertical-align: 1px; }
.lg-card { flex: 1; padding: 44px 40px 28px; display: flex; flex-direction: column; justify-content: center; }
.lg-bemvindo { font-size: 24px; font-weight: 800; margin: 0 0 4px; color: var(--ink); letter-spacing: -.2px; }
.lg-sub { margin: 0 0 18px; font-size: 13px; color: var(--ink-soft); }
.lg-dica { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; background: var(--bg);
    border-radius: 8px; padding: 10px 12px; }
.lg-btn { margin-top: 22px; padding: 13px; border: 0; border-radius: 9px; background: #f97316; color: #fff; font-weight: 700;
    font-size: 14px; font-family: inherit; cursor: pointer; box-shadow: 0 6px 18px rgba(249,115,22,.35); }
.lg-btn:hover { background: #ea580c; }
.lg-rodape { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; font-size: 12px;
    color: var(--ink-soft); }
.lg-rodape a { font-weight: 600; }
.lg-chamado { text-align: center; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--border); }
.lg-chamado a { font-size: 13px; font-weight: 600; }
.lg-dominio { margin: 14px 0 0; font-size: 11px; letter-spacing: 1px; color: rgba(255,255,255,.55); }
@media (max-width: 760px) {
    .lg-wrap { flex-direction: column; min-height: 0; max-width: 440px; }
    .lg-painel { flex: none; padding: 26px 24px 22px; }
    .lg-titulo { font-size: 22px; }
    .lg-texto { display: none; }
    .lg-itens { margin-top: 14px; }
    .lg-card { padding: 28px 24px 22px; }
}

@media (max-width: 900px) {
    .cards { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }

    .nav-toggle { display: flex; }
    .topbar { padding: 0 14px; gap: 14px; }
    .brand-sub { display: none; }   /* sobra pouco espaço, a logo já basta */
    .user-name { display: none; }   /* nome completo não cabe; o cargo já identifica */

    /* a barra lateral vira um painel escondido por padrão — só aparece
       quando o menu hambúrguer abre (classe .sidebar-mobile-aberta, via JS) */
    .sidebar {
        display: none; position: fixed; top: calc(60px + var(--safe-top)); left: 0; bottom: 0; width: 280px;
        height: auto; overflow-y: auto;
        z-index: 49; box-shadow: 2px 0 16px rgba(0,0,0,.18);
    }
    .sidebar.sidebar-mobile-aberta { display: block; }
    .sidebar-link, .sidebar-grupo-toggle { padding: 12px 18px; font-size: 15px; }
    .sidebar-subitens a { padding: 11px 18px 11px 47px; font-size: 14px; }
    .app-shell { display: block; }
}

@media (max-width: 480px) {
    .container { padding: 18px 14px 50px; }
    .chamado-stats { grid-template-columns: 1fr 1fr; }
    .financeiro-resumo { grid-template-columns: 1fr; }
    .panel { padding: 16px; }
    .page-head h1 { font-size: 20px; }
}

/* ---------- Página Utilitários ---------- */
.util-grupo { margin-bottom: 32px; }
.util-titulo { font-size: 14px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); margin: 0 0 14px; font-weight: 700; }
/* cards ~70% do tamanho original (Marcelo, 27/08) */
.util-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.util-card {
    display: flex; flex-direction: column; gap: 3px; padding: 13px 14px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s, border-color .12s;
    text-decoration: none; color: var(--ink); cursor: pointer;
}
.util-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.util-icone { font-size: 20px; }
.util-nome { font-weight: 700; font-size: 13.5px; margin-top: 2px; }
.util-desc { font-size: 11.5px; color: var(--ink-soft); }
/* card que ABRE (details): fechado parece card normal; aberto ocupa a
   linha inteira e mostra o formulario dentro */
details.util-card > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
details.util-card > summary::-webkit-details-marker { display: none; }
details.util-card[open] { grid-column: 1 / -1; }
details.util-card[open] > summary { flex-direction: row; align-items: center; gap: 8px; }
details.util-card[open] > summary .util-desc { margin-left: auto; }
.util-card-corpo { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 12px; }
.util-card-form { margin: 0; display: contents; }
.util-card-btn { width: 100%; text-align: left; font-family: inherit; border: 1px solid var(--border); background: var(--surface); }
.util-card-btn .util-icone { filter: none; }
.restaurar-box { margin-top: 20px; border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; background: var(--bg); }
.restaurar-box summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink-soft); }
.restaurar-box summary:hover { color: var(--primary); }

/* ---------- Dropdowns de filtro com caixinhas ---------- */
.dropdown-check { position: relative; display: inline-block; }
.dropdown-btn {
    /* mesma altura dos selects da barra (padding 9px): o último campo
       ficava desalinhado (Marcelo, 02/09) */
    padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); cursor: pointer; font-size: 13px; color: var(--ink);
    min-width: 160px; text-align: left; display: inline-flex; justify-content: space-between; gap: 8px; align-items: center;
}
.dropdown-btn:hover { border-color: var(--primary); }
.dropdown-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: var(--shadow-md); padding: 8px; min-width: 220px; max-height: 320px; overflow: auto;
}
.dropdown-menu.aberto { display: block; }
.dropdown-acoes { display: flex; gap: 10px; padding: 4px 6px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.mini-link { background: none; border: none; color: var(--primary); cursor: pointer; font-size: 12px; font-weight: 600; padding: 0; }
.mini-link:hover { text-decoration: underline; }
.dropdown-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.dropdown-item:hover { background: var(--hover); }
.dropdown-item input { width: auto; margin: 0; }

/* ---------- Editor de template de e-mail ---------- */
.marcadores { margin-top: 14px; padding: 14px 18px; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 10px; font-size: 13px; }
.marcadores ul { margin: 8px 0 0; padding-left: 18px; }
.marcadores li { margin: 4px 0; }
.marcadores code { background: #e0f2fe; padding: 1px 6px; border-radius: 4px; font-weight: 600; color: #0369a1; }
.template-ref { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px; font-size: 12px; white-space: pre-wrap; color: var(--ink-soft); }

/* ---------- Helpdesk / Chamados ---------- */
.chamado-card { max-width: 520px; margin: 40px auto; background: var(--surface); border-radius: 16px; padding: 36px; box-shadow: var(--shadow-md); }
.chamado-card .login-logo-img { height: 42px; margin-bottom: 20px; }
.chamado-titulo { font-size: 22px; margin: 0 0 6px; }
.chamado-sub { color: var(--ink-soft); font-size: 14px; margin: 0 0 18px; }
.chamado-busca { display: flex; gap: 8px; margin-bottom: 18px; }
.chamado-busca input { flex: 1; padding: 10px; border: 1px solid var(--border); border-radius: 8px; }
.chamado-equip-ok { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 14px; margin-bottom: 18px; font-size: 14px; color: #166534; }
.chamado-equip-dados { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; color: var(--ink-soft); font-size: 13px; }
.chamado-equip-nao { background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 14px; margin-bottom: 18px; font-size: 14px; color: #991b1b; }
.chamado-equip-nao p { margin: 6px 0 0; font-size: 13px; }
.chamado-form .field { margin-bottom: 12px; }
.chamado-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.chamado-form input, .chamado-form textarea { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; }
.btn-bloco { width: 100%; margin-top: 6px; }
.chamado-sucesso { text-align: center; }
.sucesso-check { width: 64px; height: 64px; border-radius: 50%; background: #16a34a; color: #fff; font-size: 34px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.protocolo-box { font-size: 28px; font-weight: 800; letter-spacing: 1px; color: var(--primary); background: #eff6ff; border-radius: 12px; padding: 16px; }

.chamado-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.ch-stat-total { font-size: clamp(11px, 1vw, 13px); font-weight: 700; color: var(--ink-soft); margin-top: 2px; white-space: nowrap; }
.ch-stat { display: flex; flex-direction: column; align-items: center; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.ch-stat:hover { border-color: var(--primary); }
.ch-stat-num { font-size: 17px; font-weight: 800; }
.ch-stat-lbl { font-size: 10.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .4px; }
.ch-stat-aberto .ch-stat-num { color: #dc2626; }
.ch-stat-andamento .ch-stat-num { color: #d97706; }
.ch-stat-concluido .ch-stat-num { color: #16a34a; }

.badge-status { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.status-aberto { background: #fee2e2; color: #991b1b; }
.status-andamento { background: #fef3c7; color: #92400e; }
.status-concluido { background: #dcfce7; color: #166534; }

.chamado-detalhe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.det-linhas { display: flex; flex-direction: column; gap: 8px; }
.det-linhas > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.det-rot { color: var(--ink-soft); font-weight: 600; }
.det-descricao { background: var(--bg); border-radius: 8px; padding: 12px; font-size: 14px; line-height: 1.5; }
.historico-lista { list-style: none; padding: 0; margin: 0; }
.historico-lista li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
@media (max-width: 720px) { .chamado-detalhe-grid { grid-template-columns: 1fr; } .chamado-stats { grid-template-columns: repeat(2, 1fr); } }

/* --- cenários das ações no Absolute --- */
.cenarios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}
.cenario {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.cenario:hover { border-color: #9CA3AF; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.cenario-ativo { border-color: #1F2937; box-shadow: inset 0 0 0 1px #1F2937; }
.cenario-critico { border-left: 3px solid #DC2626; }
.cenario-num { font-size: 26px; font-weight: 700; color: #1F2937; line-height: 1.1; }
.cenario-nome { font-size: 13px; font-weight: 600; color: #374151; }
.cenario-desc { font-size: 11px; color: #9CA3AF; }

/* --- dropdowns do menu (agrupamento de operação/atendimento/financeiro/administração) --- */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
    color: #cbd5e1; padding: 8px 14px; border-radius: 6px;
    font-weight: 500; font-size: 14px; background: none; border: none;
    cursor: pointer; font-family: inherit;
}
.nav-dropdown-toggle:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-dropdown-toggle.active { background: var(--primary); color: #fff; }
.nav-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0;
    min-width: 200px; background: #1F2937; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35); padding: 6px; z-index: 50;
}
.nav-dropdown.aberto .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
    display: block; color: #cbd5e1; padding: 9px 12px; border-radius: 6px;
    font-weight: 500; font-size: 14px; text-decoration: none;
}
.nav-dropdown-menu a:hover { background: rgba(255,255,255,.08); color: #fff; }

/* --- funil comercial: quadro kanban --- */
.funil-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.funil-coluna { background: var(--bg); border-radius: 10px; padding: 12px; min-height: 120px; }
.funil-coluna h3 { font-size: 14px; margin-bottom: 10px; }
.funil-card {
    display: flex; flex-direction: column; gap: 2px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 8px; padding: 10px;
    margin-bottom: 8px; text-decoration: none; color: inherit;
}
.funil-card:hover { border-color: #9CA3AF; box-shadow: 0 1px 4px rgba(0,0,0,.06); }

/* --- abas reutilizáveis, para formulários longos não ficarem rolando --- */
.abas-nav {
    display: flex; gap: 4px; border-bottom: 2px solid var(--border);
    margin-bottom: 18px; flex-wrap: wrap;
}
.abas-nav button {
    padding: 10px 18px; border: none; background: none; cursor: pointer;
    font-size: 14px; font-weight: 600; color: var(--ink-soft);
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    font-family: inherit; transition: color .15s, border-color .15s;
}
.abas-nav button:hover { color: var(--ink); }
.abas-nav button.aba-ativa { color: var(--primary); border-bottom-color: var(--primary); }
.abas-nav button .aba-badge {
    display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px;
    background: #FEE2E2; color: #DC2626; font-size: 11px; font-weight: 700;
}
.aba-painel { display: none; }
.aba-painel.aba-ativa { display: block; animation: aba-fade .15s ease; }
@keyframes aba-fade { from { opacity: 0; } to { opacity: 1; } }

/* --- grid de checkboxes de módulos, na tela de permissões por usuário --- */
.modulos-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px 16px; margin-top: 8px;
}

/* --- resumo financeiro no dashboard: a receber x a pagar --- */
.financeiro-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.financeiro-coluna h3 { font-size: 15px; display: flex; align-items: baseline; gap: 8px; }
.financeiro-linhas { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.financeiro-linha {
    display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 10px;
    padding: 8px 10px; border-radius: 8px; background: var(--bg);
}
.financeiro-linha strong { font-size: 15px; }
.financeiro-total { background: #EFF6FF; font-weight: 600; }

/* --- autocomplete de busca de produto (contrato -> adicionar do catálogo) --- */
.autocomplete-lista {
    position: relative; max-height: 240px; overflow-y: auto; margin-top: 4px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
    box-shadow: 0 4px 14px rgba(0,0,0,.08); z-index: 20;
}
.autocomplete-item { padding: 9px 12px; cursor: pointer; font-size: 14px; }
.autocomplete-item:hover { background: #F0F9FF; }
.autocomplete-vazio { padding: 9px 12px; font-size: 13px; color: var(--muted); }

/* --- barra de ação fixa no rodapé --------------------------------------
   Pra telas onde o botão principal ficava no fim de uma coluna alta e
   obrigava a rolar até o fim só pra confirmar (envio de e-mail, etc.) */
.barra-acao-fixa {
    position: sticky; bottom: 0; z-index: 30;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px; margin: 16px -24px -60px;
    background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(15,23,42,.08);
}
.barra-acao-info { margin-right: auto; font-size: 13px; color: var(--ink-soft); }

@media (max-width: 900px) {
    .barra-acao-fixa { margin: 16px -14px -50px; padding: 10px 14px; flex-wrap: wrap; }
    .barra-acao-info { width: 100%; margin-bottom: 6px; }
}

/* rodapé de popup com os botões de confirmar/cancelar — usado nos popups
   de ação (aviso na tela, congelamento) */
.modal-rodape {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 22px; border-top: 1px solid var(--border);
    background: var(--bg); border-radius: 0 0 14px 14px;
    position: sticky; bottom: 0;
}
.btn-perigo {
    background: #DC2626; color: #fff; border: 1px solid #DC2626;
}
.btn-perigo:hover { background: #B91C1C; border-color: #B91C1C; }

/* botão de WhatsApp na listagem de retornos */
.btn-whats {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; margin-left: 6px; border-radius: 6px;
    background: #25D366; vertical-align: middle;
}
.btn-whats svg { fill: #fff; display: block; }
.btn-whats:hover { background: #1DA851; }

/* --- seleção de módulos por usuário -----------------------------------
   Enquadramento positivo: marcado = tem acesso. O visual muda junto com
   a marcação, pra dar pra ver de relance o que a pessoa acessa. */
.permissoes-bloco {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--border);
}
.permissoes-acoes { display: flex; gap: 8px; margin: 10px 0 4px; }
.permissoes-grupo { margin-top: 12px; }
.permissoes-grupo-titulo {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--ink-soft); margin-bottom: 6px;
}
.modulos-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 6px;
}
.modulo-check {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 13px; cursor: pointer; background: var(--surface);
    transition: background .12s, border-color .12s;
}
.modulo-check:hover { border-color: var(--primary); }
.modulo-check input { width: auto; margin: 0; }
.modulo-check.modulo-marcado {
    background: #EFF6FF; border-color: #1D4ED8; font-weight: 600;
}
@media (max-width: 900px) {
    .modulos-grid { grid-template-columns: 1fr 1fr; }
}

/* --- seleção de empresas por usuário ----------------------------------
   Substitui o multi-select com Ctrl, que é difícil de usar e fácil de
   errar (um clique fora e a seleção inteira se perde). */
.empresas-barra {
    display: flex; align-items: center; gap: 8px;
    margin: 8px 0; flex-wrap: wrap;
}
.empresas-busca {
    flex: 1; min-width: 180px; padding: 6px 10px;
    border: 1px solid var(--border); border-radius: 8px; font-size: 13px;
}
.empresas-contador { margin-left: auto; font-size: 12px; }
.empresas-lista {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px; max-height: 260px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 8px; padding: 8px;
    background: #FCFCFD;
}
.empresa-check {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px; border-radius: 6px; font-size: 13px; cursor: pointer;
}
.empresa-check:hover { background: #EFF6FF; }
.empresa-check input { width: auto; margin: 0; }
.empresa-check.empresa-marcada { background: #EFF6FF; font-weight: 600; }
.empresa-check.oculta { display: none; }

/* ================================================================
   FASE 1 — Busca global, tema escuro, toasts, badges, KPIs
   ================================================================ */

/* ---------- Ícones do topbar (busca + tema) ---------- */
.topbar-icone {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
    color: #cbd5e1; border-radius: 8px; padding: 6px 10px; cursor: pointer;
    font: inherit; font-size: 12px; transition: background .15s;
}
.topbar-icone:hover { background: rgba(255,255,255,.16); color: #fff; }
.topbar-icone svg { width: 16px; height: 16px; }
.topbar-atalho { font-size: 10px; opacity: .7; letter-spacing: .5px; }
#tema-toggle .icone-sol { display: none; }
[data-tema="escuro"] #tema-toggle .icone-sol { display: block; }
[data-tema="escuro"] #tema-toggle .icone-lua { display: none; }
@media (max-width: 720px) { .topbar-atalho { display: none; } }

/* ---------- Busca global (Ctrl+K) ---------- */
.busca-overlay {
    display: none; position: fixed; inset: 0; z-index: 200;
    background: rgba(15,23,42,.55); backdrop-filter: blur(2px);
    padding: 10vh 16px 16px; overflow-y: auto;
}
.busca-overlay.aberta { display: block; }
.busca-caixa {
    max-width: 640px; margin: 0 auto; background: var(--surface);
    border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
    overflow: hidden; border: 1px solid var(--border);
}
#busca-campo {
    width: 100%; border: 0; outline: 0; padding: 16px 18px; font-size: 16px;
    font-family: inherit; background: var(--surface); color: var(--ink);
    border-bottom: 1px solid var(--border);
}
.busca-lista { max-height: 55vh; overflow-y: auto; }
.busca-grupo {
    padding: 10px 18px 4px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; color: var(--muted);
}
.busca-item {
    display: flex; flex-direction: column; gap: 2px; padding: 9px 18px;
    color: var(--ink); text-decoration: none;
}
.busca-item:hover, .busca-item.ativo { background: var(--bg); text-decoration: none; }
.busca-titulo { font-weight: 600; font-size: 14px; }
.busca-sub { font-size: 12px; color: var(--ink-soft); }
.busca-dica { padding: 18px; color: var(--muted); font-size: 13px; }
.busca-rodape {
    padding: 8px 18px; border-top: 1px solid var(--border);
    font-size: 11px; color: var(--muted);
}

/* ---------- Toasts ---------- */
.toasts {
    position: fixed; top: calc(72px + var(--safe-top)); right: 18px; z-index: 300;
    display: flex; flex-direction: column; gap: 8px; max-width: 380px;
}
.toast {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; box-shadow: var(--shadow-md); animation: toast-in .25s ease;
    margin: 0;
}
.toast.saindo { opacity: 0; transform: translateX(12px); transition: all .3s; }
/* aviso de ERRO não some sozinho e chama mais atenção que um “salvo
   com sucesso” — some só no × (Marcelo, 26/08: “acabei quase não
   vendo, todas as mensagens aparecem no mesmo lugar”) */
.toast.flash-danger {
    border-left: 5px solid var(--vencido);
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(220,38,38,.28);
    animation: toast-in .25s ease, campo-treme .35s ease-in-out .2s;
}
/* erro e atenção em evidência (Marcelo, 04/09): maiores, rotulados,
   ficam até o × — o aviso de "linha antes do início" passava batido */
.toast.flash-danger, .toast.flash-warning {
    font-size: 14.5px; line-height: 1.45; padding: 14px 16px;
    border-width: 1px; border-style: solid;
}
.toast.flash-warning {
    border-left: 5px solid #d97706; font-weight: 600;
    box-shadow: 0 8px 24px rgba(217,119,6,.25);
}
.toast.flash-danger { border-color: #fecaca; }
.toast.flash-warning { border-color: #fde68a; }
.toast-rotulo { display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; opacity: .85; margin-bottom: 3px; }
.toasts:has(.flash-danger), .toasts:has(.flash-warning) { max-width: 560px; }
.toast-fechar {
    background: none; border: 0; cursor: pointer; font-size: 18px;
    line-height: 1; color: inherit; opacity: .6; padding: 0;
}
.toast-fechar:hover { opacity: 1; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 720px) { .toasts { left: 12px; right: 12px; max-width: none; } }

/* ---------- Badges de pendência no menu ---------- */
.menu-badge {
    display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 6px;
    border-radius: 999px; background: var(--primary); color: #fff;
    font-size: 10.5px; font-weight: 700; text-align: center; line-height: 1.5;
}
.menu-badge-alerta { background: var(--vencido); }

/* ---------- KPIs do dashboard ---------- */
.kpi-grade {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px; margin-bottom: 18px;
}
.kpi-card {
    display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: var(--shadow); color: var(--ink);
    text-decoration: none;
}
a.kpi-card:hover { text-decoration: none; box-shadow: var(--shadow-md); }
.kpi-valor { font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.kpi-rotulo { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.kpi-sub { font-size: 11px; color: var(--muted); }
.kpi-ok .kpi-valor { color: var(--ok); }
.kpi-alerta .kpi-valor { color: var(--vencido); }

/* ---------- Gráficos ---------- */
.graficos-grade {
    display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 18px;
}
.grafico-caixa { position: relative; height: 260px; }
@media (max-width: 900px) { .graficos-grade { grid-template-columns: 1fr; } }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 12.5px; margin-bottom: 10px; color: var(--muted);
}
.breadcrumbs a { color: var(--ink-soft); }
.bc-sep { color: var(--muted); }
.bc-atual { color: var(--ink); font-weight: 600; }

/* ---------- Ficha 360 ---------- */
.score-selo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 10px; font-size: 22px;
    font-weight: 800; color: #fff;
}
.score-A { background: #059669; } .score-B { background: #10b981; }
.score-C { background: #d97706; } .score-D { background: #ea580c; }
.score-E { background: #dc2626; }
.timeline { list-style: none; margin-top: 8px; }
.timeline li {
    position: relative; padding: 6px 0 6px 22px; border-left: 2px solid var(--border);
    margin-left: 6px; font-size: 13px;
}
.timeline li::before {
    content: ""; position: absolute; left: -6px; top: 12px; width: 10px; height: 10px;
    border-radius: 50%; background: var(--primary); border: 2px solid var(--surface);
}
.timeline .tl-data { color: var(--muted); font-size: 11.5px; margin-right: 8px; }
.timeline .tl-contrato::before { background: var(--primary); }
.timeline .tl-fatura::before { background: var(--ok); }
.timeline .tl-chamado::before { background: var(--v60); }
.timeline .tl-retorno::before { background: var(--v30); }
.timeline .tl-reajuste::before { background: #7c3aed; }

/* ================================================================
   TEMA ESCURO — sobrescreve os tokens do :root
   ================================================================ */
[data-tema="escuro"] {
    --bg: #0b1220;
    --hover: #1b2740;
    --surface: #111a2c;
    --ink: #e2e8f0;
    --ink-soft: #94a3b8;
    --muted: #64748b;
    --border: #1e293b;
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,.5);
}
[data-tema="escuro"] body { background: var(--bg); color: var(--ink); }
[data-tema="escuro"] .topbar { background: #060b16; }
[data-tema="escuro"] .busca-overlay { background: rgba(0,0,0,.65); }
[data-tema="escuro"] img.brand-logo { filter: brightness(1); }
[data-tema="escuro"] table th { background: #0e1626; }
[data-tema="escuro"] input, [data-tema="escuro"] select, [data-tema="escuro"] textarea {
    background: #0e1626; color: var(--ink); border-color: var(--border);
}
[data-tema="escuro"] .flash-success { background: #052e1f; color: #6ee7b7; border-color: #065f46; }
[data-tema="escuro"] .flash-danger { background: #3f0d0d; color: #fca5a5; border-color: #7f1d1d; }
[data-tema="escuro"] .flash-warning { background: #3b2405; color: #fcd34d; border-color: #92400e; }
[data-tema="escuro"] .flash-info { background: #0c2a4d; color: #93c5fd; border-color: #1e40af; }

/* ---------- Blocos "Relacionados" ---------- */
.rel-grade {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.rel-card {
    display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
    text-decoration: none; color: var(--ink); transition: box-shadow .15s;
}
.rel-card:hover { text-decoration: none; box-shadow: var(--shadow-md); }
.rel-rotulo { font-size: 11px; font-weight: 700; text-transform: uppercase;
              letter-spacing: .5px; color: var(--muted); }
.rel-valor { font-size: 13.5px; font-weight: 600; color: var(--primary); }

/* ---------- Paginação simples ---------- */
.paginacao {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}

/* ---------- Tema escuro: realces semânticos (versões escuras) ---------- */
[data-tema="escuro"] .sidebar-link.active,
[data-tema="escuro"] .sidebar-grupo-toggle.active { background: #172554; }
[data-tema="escuro"] .table tbody tr:hover,
[data-tema="escuro"] .table tbody tr:hover .acoes-col { background: #16233d; }
[data-tema="escuro"] .row-vencido { background: #2d1214 !important; }
[data-tema="escuro"] .row-vence_30 { background: #2b1c0a !important; }
[data-tema="escuro"] .linha-ativa { background: #16233d !important; }
[data-tema="escuro"] .linha-ativa .acoes-col { background: #16233d !important; }
[data-tema="escuro"] .btn-buscar-produto:hover { background: #16233d; }
[data-tema="escuro"] .chips-mais summary { background: #172554; color: #a5b4fc; }
[data-tema="escuro"] .marcadores code { background: #0c2a4d; color: #7dd3fc; }
[data-tema="escuro"] .linha-salva-flash,
[data-tema="escuro"] .linha-salva-flash .acoes-col { background: #0b2e1c !important; }
[data-tema="escuro"] .card-edicao { border-color: #1e3a8a; }
[data-tema="escuro"] .btn-icon-danger:hover { background: #3a1616; border-color: #7f1d1d; }
[data-tema="escuro"] .pill-vencido { background: #3a1616; color: #fca5a5; }
[data-tema="escuro"] .pill-ok { background: #0b2e1c; color: #6ee7b7; }
[data-tema="escuro"] .pill-30 { background: #2b1c0a; color: #fcd34d; }
[data-tema="escuro"] .pill-sem { background: #1b2740; color: #94a3b8; }
[data-tema="escuro"] .pill-acao-login { background: #0c2a4d; color: #93c5fd; }
[data-tema="escuro"] .pill-acao-criar { background: #0b2e1c; color: #6ee7b7; }
[data-tema="escuro"] .badge-versao,
[data-tema="escuro"] .funil-etapa-badge { background: #0c2a4d; color: #93c5fd; }
[data-tema="escuro"] .ch-stat-aberto .ch-stat-num { color: #f87171; }
[data-tema="escuro"] .item-chip.ok { background: #0b2e1c; color: #6ee7b7; }
[data-tema="escuro"] .item-chip.novo { background: #2b1c0a; color: #fcd34d; }
[data-tema="escuro"] .funil-card:hover { border-color: #475569; }
[data-tema="escuro"] .busca-item:hover,
[data-tema="escuro"] .busca-item.ativo { background: #1b2740; }
[data-tema="escuro"] .dropdown-item:hover { background: #1b2740; }
[data-tema="escuro"] .score-selo { filter: brightness(1.05); }

/* ---------- Grupo de retornos expandido: destaque discreto ---------- */
/* O cabeçalho aberto e os filhos formam UM bloco: faixa lateral azul,
   fundo levemente diferente e uma linha fechando embaixo do último item.
   Sutil, mas não deixa dúvida de onde o grupo começa e termina. */
.grupo-cabecalho.aberto > td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.grupo-cabecalho.aberto { background: var(--hover); }
.grupo-cabecalho.aberto strong { color: var(--primary); }

.table-striped tbody tr.grupo-item,
.table-striped tbody tr.grupo-item .acoes-col { background: var(--hover); }
.table tbody tr.grupo-item > td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.table tbody tr.grupo-item > td { border-bottom-color: transparent; }
.table tbody tr.grupo-ultimo > td { border-bottom: 2px solid var(--primary); }
.table tbody tr.grupo-item:hover,
.table tbody tr.grupo-item:hover .acoes-col { background: #e0ecfd; }

[data-tema="escuro"] .grupo-cabecalho.aberto,
[data-tema="escuro"] .table-striped tbody tr.grupo-item,
[data-tema="escuro"] .table-striped tbody tr.grupo-item .acoes-col { background: #16233d; }
[data-tema="escuro"] .table tbody tr.grupo-item:hover,
[data-tema="escuro"] .table tbody tr.grupo-item:hover .acoes-col { background: #1e2f4d; }

/* ---------- Usuários ---------- */
.linha-edicao-usuario { background: var(--bg); }
.chip-principal { background: #fef3c7; color: #92400e; }
[data-tema="escuro"] .chip-principal { background: #2b1c0a; color: #fcd34d; }
.linha-total { font-weight: 600; background: #F0F9FF; }
[data-tema="escuro"] .linha-total { background: #0c2a4d; }

.dias-semana-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.dia-check { display: flex; align-items: center; gap: 6px; padding: 8px 12px;
    border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
    background: var(--surface); user-select: none; }
.dia-check input { width: auto; margin: 0; }
.dia-check:has(input:checked) { border-color: var(--primary);
    background: var(--hover); font-weight: 600; }
.dia-check.dia-fds { opacity: .85; }


/* ------- painel do catálogo de produtos ------- */
.prod-hero {
    display: flex; gap: 10px; margin: 4px 0 18px;
}
.prod-hero input {
    flex: 1; font-size: 16px; padding: 14px 18px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface); color: var(--ink);
    box-shadow: var(--shadow);
}
.prod-hero input:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.prod-cats {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}
.prod-cat {
    display: block; padding: 14px; border: 1px solid var(--border);
    border-radius: 12px; background: var(--surface);
    text-decoration: none; color: var(--ink); box-shadow: var(--shadow);
    transition: border-color .12s ease, transform .12s ease;
}
.prod-cat:hover { border-color: var(--primary); text-decoration: none; transform: translateY(-1px); }
.prod-cat-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.prod-cat-topo strong { font-size: 14px; }
.prod-cat-qtd { font-size: 18px; font-weight: 700; }
.prod-bar {
    height: 6px; border-radius: 3px; background: var(--hover);
    margin: 10px 0 6px; overflow: hidden;
}
.prod-bar-fill { height: 100%; border-radius: 3px; background: var(--primary); }
.prod-cat-sub { font-size: 11.5px; color: var(--ink-soft); }
@media (max-width: 620px) {
    .prod-hero { flex-direction: column; }
}


/* ------- privacidade dos valores + pizza compacta (dashboard) ------- */
.valores-ocultos .grana {
    filter: blur(8px);
    user-select: none;
    pointer-events: none;
}
.grana { transition: filter .18s ease; }
.grafico-caixa-pizza {
    position: relative; height: 200px; max-width: 420px; margin: 0 auto;
}


.btn-modelo.ativo {
    background: var(--primary); color: #fff; border-color: var(--primary);
}


/* ------- dias vencido e selo de seguro (Locados) ------- */
.pill-dias {
    display: block; margin-top: 2px;
    font-size: 10.5px; line-height: 1.1;
    color: var(--vencido, #b91c1c); font-weight: 600;
    white-space: nowrap;
}
.pill-seguro {
    display: block; margin-top: 2px;
    font-size: 10.5px; line-height: 1.1;
    color: var(--ink-soft); white-space: nowrap;
}
.campo-check select { width: 100%; }


.col-sel { width: 30px; text-align: center; }
.col-sel input { width: auto; margin: 0; }


/* ------- cards da central de modelos de mensagem ------- */
.modelos-grade {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 14px;
}
.modelo-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px; box-shadow: var(--shadow);
}
.modelo-topo { display: flex; gap: 10px; align-items: flex-start; }
.modelo-icone { font-size: 20px; line-height: 1.2; }
.modelo-card textarea {
    width: 100%; font-family: inherit; font-size: 13px; line-height: 1.5;
}
.modelo-marcadores { margin: 6px 0 0; font-size: 11.5px; }
.modelo-marcadores code {
    background: var(--hover); padding: 1px 5px; border-radius: 4px;
    margin-right: 4px;
}
.modelo-acoes { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }


/* ------- contas a pagar: cards ativos e totais ------- */
.ch-stat { text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
a.ch-stat:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); text-decoration: none; }
/* card do filtro ATIVO em destaque de verdade (Marcelo, 20/08): fundo
   azulado, borda forte e rótulo na cor primária — bate o olho e sabe
   qual recorte está valendo */
.ch-stat-ativo {
    outline: 2px solid var(--primary); outline-offset: -2px;
    background: #EFF6FF;
    box-shadow: var(--shadow-lg);
}
.ch-stat-ativo .ch-stat-lbl { color: var(--primary); font-weight: 700; }
[data-tema="escuro"] .ch-stat-ativo { background: #172554; }
.tot-inline { font-size: 13px; color: var(--ink-soft); }
.tot-inline strong { font-size: 16px; color: var(--ink); }
tr.row-vencido td { background: rgba(220, 38, 38, .04); }


/* ------- barra de total da seleção (Locados) ------- */
.barra-selecao {
    position: sticky; bottom: 12px; z-index: 40;
    display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
    margin: 12px 0; padding: 12px 18px;
    background: var(--ink); color: #fff;
    border-radius: 12px; box-shadow: var(--shadow-lg);
    font-size: 13.5px;
}
.barra-selecao strong { font-size: 16px; }
.barra-selecao .btn { margin-left: auto; color: #fff; border-color: rgba(255,255,255,.35); }
/* o botão "Limpar" sumia: o .btn-ghost tem fundo BRANCO (var(--surface))
   e a barra pinta o texto de branco — branco no branco (Marcelo, 20/08).
   Na barra escura, o ghost fica transparente com borda clara. */
.barra-selecao .btn-ghost { background: transparent; }
.barra-selecao .btn-ghost:hover { background: rgba(255, 255, 255, .15); }


/* ------- faturamento compacto ------- */
.stats-compactos .ch-stat { padding: 10px 14px; }
.stats-compactos .ch-stat-num { font-size: 20px; }
.faixa-envio {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    margin: 10px 0; padding: 10px 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px;
}
.tabela-compacta td, .tabela-compacta th { padding: 7px 10px; }

/* lista DENSA: para telas de trabalho com dezenas de linhas (adicionar
   equipamentos ao contrato, equipamentos do contrato) — cabe ~20 na tela */
.tabela-densa td, .tabela-densa th { padding: 3px 8px; font-size: 12.5px; }
.tabela-densa input[type="text"], .tabela-densa select {
    padding: 2px 6px; font-size: 12.5px;
}
.tabela-densa .btn-mini { padding: 2px 8px; font-size: 11.5px; }
.tabela-densa .badge-status { padding: 1px 8px; font-size: 11px; }
/* o form-inline vira um "cartão" (24px de padding + sombra) — dentro de
   uma linha de tabela isso transformava cada linha num bloco de ~85px */
.tabela-densa form, .tabela-densa .form-inline {
    background: none; box-shadow: none; padding: 0; margin: 0;
    display: flex; gap: 4px; align-items: center; flex-wrap: nowrap;
}
.tabela-densa .form-inline input { padding: 2px 6px; font-size: 12.5px; }


/* ------- seleção em lote no contas a pagar ------- */
.cel-link { cursor: pointer; }
#cp-barra input[type="date"], #cp-barra input[type="text"] {
    padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border);
}


/* ------- abas contrato x pedido ------- */
.abas-tipo { display: flex; gap: 6px; margin: 4px 0 14px; flex-wrap: wrap; }
.aba-tipo {
    padding: 8px 14px; border-radius: 999px; font-size: 13.5px;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--ink-soft); text-decoration: none; font-weight: 500;
}
.aba-tipo:hover { border-color: var(--primary); text-decoration: none; }
.aba-tipo span {
    display: inline-block; margin-left: 6px; padding: 1px 7px;
    border-radius: 999px; background: var(--hover); font-size: 12px;
}
.aba-tipo-ativa {
    background: var(--primary); color: #fff; border-color: var(--primary);
}
.aba-tipo-ativa span { background: rgba(255,255,255,.22); }

/* Etiqueta de origem na mesa de faturamento: a lista mistura as três
   fontes de cobrança, a etiqueta diz de onde a linha veio */
.tag-origem {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.tag-contrato { background: #DBEAFE; color: #1D4ED8; }
.tag-oc       { background: #EDE9FE; color: #6D28D9; }
.tag-ressarcimento, .tag-venda    { background: #D1FAE5; color: #047857; }
.tag-servico { background: #E0E7FF; color: #3730A3; }
.tag-locacao_curta                { background: #FEF3C7; color: #B45309; }

/* Programada: prevista de mes futuro — visivel, mas fora da fila do lote */
.badge-status.status-programada { background: #E2E8F0; color: #475569; }

/* Aviso NO CAMPO (aviso_campo.js): o recado nasce grudado no campo em vez
   de virar mais um toast no canto — a pessoa está olhando pro campo, e é
   ali que ela precisa ver o que deu errado. */
.campo-com-erro,
.campo-com-erro:focus {
    border-color: var(--vencido) !important;
    background: #FEF2F2;
    box-shadow: 0 0 0 3px rgba(220,38,38,.18) !important;
    outline: none;
}
.balao-erro {
    position: absolute;
    z-index: 9000;
    max-width: 280px;
    padding: 8px 11px;
    border-radius: 8px;
    background: var(--vencido);
    color: #fff;
    font-size: 0.82rem;
    line-height: 1.35;
    font-weight: 500;
    box-shadow: 0 6px 18px rgba(220,38,38,.35);
    animation: balao-entra .16s ease-out;
}
.balao-erro::before {           /* a setinha apontando para o campo */
    content: "";
    position: absolute;
    top: -6px; left: 14px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--vencido);
}
@keyframes balao-entra {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.campo-tremendo { animation: campo-treme .3s ease-in-out; }
@keyframes campo-treme {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-5px); }
    45%      { transform: translateX(4px); }
    70%      { transform: translateX(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    .campo-tremendo, .balao-erro { animation: none; }
}


/* ---------- Resumo do dinheiro da OC (aba Financeiro do pedido) ----------
   Marcelo, 01/09: "deixe esses cards um pouco menor... e as cores mais em
   evidência... 50% do tamanho". Cards próprios em vez dos .ch-stat: aqueles
   esticam para a largura toda e pintam todo número do mesmo cinza — aqui a
   COR é a informação (verde entrou, âmbar esperando, azul falta cobrar). */
.oc-resumo { display: flex; flex-wrap: wrap; gap: 8px; }
.oc-resumo-item {
    flex: 0 1 auto; min-width: 130px;
    padding: 6px 10px; border-radius: 8px;
    border: 1px solid transparent; border-left-width: 3px;
}
.oc-resumo-num { font-size: 15px; font-weight: 800; line-height: 1.25; }
.oc-resumo-rot {
    font-size: 9.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; line-height: 1.4;
}
.oc-resumo-sub { font-size: 10px; color: var(--ink-soft); line-height: 1.3; }

.oc-r-recebido { background: #ECFDF5; border-color: #A7F3D0; border-left-color: #047857; }
.oc-r-recebido .oc-resumo-num, .oc-r-recebido .oc-resumo-rot { color: #047857; }

.oc-r-fora { background: #F1F5F9; border-color: #CBD5E1; border-left-color: #475569; }
.oc-r-fora .oc-resumo-num, .oc-r-fora .oc-resumo-rot { color: #475569; }

.oc-r-aguardando { background: #FFFBEB; border-color: #FDE68A; border-left-color: #B45309; }
.oc-r-aguardando .oc-resumo-num, .oc-r-aguardando .oc-resumo-rot { color: #B45309; }

.oc-r-acobrar { background: #EFF6FF; border-color: #BFDBFE; border-left-color: #1D4ED8; }
.oc-r-acobrar .oc-resumo-num, .oc-r-acobrar .oc-resumo-rot { color: #1D4ED8; }

.oc-r-total { background: var(--surface); border-color: var(--border); border-left-color: var(--ink-soft); }
.oc-r-total .oc-resumo-num { color: var(--ink); }
.oc-r-total .oc-resumo-rot { color: var(--ink-soft); }

/* zerado não compete com o que tem valor: some para o fundo */
.oc-resumo-item.oc-r-zero { opacity: .55; }

[data-tema="escuro"] .oc-r-recebido { background: #052e21; border-color: #065f46; }
[data-tema="escuro"] .oc-r-recebido .oc-resumo-num,
[data-tema="escuro"] .oc-r-recebido .oc-resumo-rot { color: #6ee7b7; }
[data-tema="escuro"] .oc-r-fora { background: #1e293b; border-color: #334155; }
[data-tema="escuro"] .oc-r-fora .oc-resumo-num,
[data-tema="escuro"] .oc-r-fora .oc-resumo-rot { color: #cbd5e1; }
[data-tema="escuro"] .oc-r-aguardando { background: #2b1c0a; border-color: #78350f; }
[data-tema="escuro"] .oc-r-aguardando .oc-resumo-num,
[data-tema="escuro"] .oc-r-aguardando .oc-resumo-rot { color: #fcd34d; }
[data-tema="escuro"] .oc-r-acobrar { background: #172554; border-color: #1e40af; }
[data-tema="escuro"] .oc-r-acobrar .oc-resumo-num,
[data-tema="escuro"] .oc-r-acobrar .oc-resumo-rot { color: #93c5fd; }


/* ---------- Etiqueta de texto: histórico em cards ----------
   Marcelo, 01/09: "deixe um histórico com cards das últimas 20, que
   clique e já imprima". O card inteiro é o botão — clicou, baixou o EPL.
   A primeira linha em destaque porque é o que identifica (nome da
   empresa, na maioria das vezes). */
.et-cards {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.et-card {
    border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface); overflow: hidden;
    display: flex; flex-direction: column;
}
.et-card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.et-card-btn {
    flex: 1; width: 100%; text-align: center; cursor: pointer;
    background: #fff; border: 0; border-bottom: 1px solid var(--border);
    padding: 12px 10px; min-height: 74px;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 1px; color: #111;
}
.et-card-btn:hover { background: #F0F9FF; }
.et-card-linha {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px; line-height: 1.35; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.et-card-linha1 { font-size: 13px; font-weight: 700; }
.et-card-pe {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 8px; gap: 6px;
}
.et-card-x {
    background: none; border: 0; cursor: pointer; color: var(--muted);
    font-size: 12px; line-height: 1; padding: 2px 4px;
}
.et-card-x:hover { color: #b91c1c; }

.et-previa {
    width: 300px; height: 150px; background: #fff; color: #111;
    border: 1px dashed var(--border); border-radius: 6px;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; padding: 6px; overflow: hidden;
}
.et-previa > div {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.et-previa-vazia { color: #94a3b8; font-size: 13px; }

/* o card e a prévia imitam a etiqueta impressa: fundo branco sempre,
   mesmo no tema escuro — senão a prévia mente sobre o resultado */
[data-tema="escuro"] .et-card-btn { background: #f8fafc; color: #111; }
[data-tema="escuro"] .et-card-btn:hover { background: #e2e8f0; }


/* ---------- Cartões de indicador (padrão da casa) ----------
   Marcelo, 01/09: "diminua uns 30-40%... vamos fazer isso como um padrão,
   acho eles demais". Nasceram na Previsão da carteira; agora moram aqui
   para as outras telas usarem os mesmos, em vez de cada uma inventar o
   seu tamanho.

   Antes: min 210px, padding 13/15, valor 19px, rótulo 11px.
   Agora:  min 148px, padding  8/10, valor 15px, rótulo 9.5px — cerca de
   35% menos altura, e cabem mais por linha sem virar duas fileiras. */
.pv-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 8px; margin-bottom: 14px;
}
.pv-tile {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 9px; padding: 8px 10px;
}
.pv-rotulo {
    font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); margin-bottom: 1px; line-height: 1.3;
}
.pv-valor {
    font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
    line-height: 1.25;
}
.pv-apoio { font-size: 10.5px; color: var(--ink-soft); line-height: 1.3; }

.pv-medidor {
    height: 4px; background: var(--bg); border-radius: 2px;
    margin-top: 5px; overflow: hidden;
}
.pv-medidor i { display: block; height: 100%; background: var(--primary);
    border-radius: 2px; }

/* OS de manutenção: o destino ao concluir é a decisão principal */
.os-destino select { border-color:#059669; font-weight:600; }
.os-destino .obrig { color:#b45309; font-weight:400; font-size:.85em; }

/* etiquetas da caixa (24/09): as duas etiquetas lado a lado na janelinha */
.et-caixa-par { display: flex; gap: 14px; flex-wrap: wrap; }
.et-caixa-item { flex: 1 1 300px; display: flex; flex-direction: column; gap: 6px; }
.et-caixa-item input { font-size: 15px; }
.et-caixa-previa { width: 100%; max-width: 300px; height: 150px; }
[data-tema="escuro"] .et-caixa-previa { background: #fff; color: #111; }

/* ================================================================
   Ficha da máquina no Portal do Cliente (06/10/2026)
   ================================================================ */
.link-ficha { font-weight: 600; }
.ficha-cli-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.ficha-cli-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; align-items: start; }
.ficha-cli-col { display: grid; gap: 14px; }
@media (max-width: 820px) { .ficha-cli-grid { grid-template-columns: 1fr; } }
.ficha-cli-grid .panel h2 { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
.ficha-cli-grid .det-linhas > div { font-size: 13px; }
.ficha-cli-grid .det-linhas > div > span:last-child { font-weight: 600; text-align: right; word-break: break-word; }
.prazo-barra { height: 8px; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin: 8px 0 4px; }
.prazo-barra > i { display: block; height: 100%; background: var(--primary); }
.prazo-barra.vencido > i { background: var(--vencido); }
.prazo-legenda { font-size: 12px; color: var(--ink-soft); }
.ficha-cli-nota { margin-top: 10px; font-size: 12px; color: var(--ink-soft); }
.ficha-cli-form { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.ficha-cli-form.aberto { display: block; }
.ficha-cli-form label { display: block; font-size: 12px; color: var(--ink-soft); font-weight: 600; margin: 8px 0 3px; }
.ficha-cli-form select, .ficha-cli-form textarea, .ficha-cli-form input {
    width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 13px; font-family: inherit; background: var(--surface); color: var(--ink); }
.ficha-cli-form textarea { min-height: 72px; }
.pill-troca { background: #ede9fe; color: #5b21b6; }

/* ---- Mapa e uso do parque (06/10/2026) ---- */
.mapa-grid { display: grid; grid-template-columns: 1fr 380px; gap: 14px; align-items: start; margin-top: 12px; }
@media (max-width: 900px) { .mapa-grid { grid-template-columns: 1fr; } }
.mapa-parque { height: 460px; border-radius: 10px; border: 1px solid var(--border); background: #e5e7eb; isolation: isolate; z-index: 0; }
.mapa-legenda { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; }
.mapa-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.leaflet-tooltip.mapa-num { background: transparent; border: 0; box-shadow: none; color: #fff; font-weight: 800; font-size: 12px; }
.table-compacta td, .table-compacta th { font-size: 12.5px; padding: 6px 8px; }
.uso-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; align-items: start; margin-top: 12px; }
@media (max-width: 900px) { .uso-grid { grid-template-columns: 1fr; } }
.uso-dist-linha { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 13px; margin-bottom: 10px; }
.uso-dist-linha i { grid-column: 1 / 3; display: block; height: 8px; border-radius: 999px; background: #dbeafe; overflow: hidden; }
.uso-dist-linha i b { display: block; height: 100%; background: var(--primary); }
.uso-semanas { display: flex; gap: 6px; align-items: flex-end; height: 96px; padding: 20px 0 18px; }
.uso-semanas > div { flex: 1; background: var(--primary); border-radius: 4px 4px 0 0; position: relative; min-height: 2px; }
.uso-semanas > div.atual { opacity: .55; }
.uso-semanas > div span { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--ink-soft); font-weight: 600; }
.uso-semanas > div em { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--muted); font-style: normal; white-space: nowrap; }
.aviso-coleta { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; border-radius: 8px; padding: 9px 12px; font-size: 13px; margin-bottom: 12px; }

/* (07/10) proximo codigo livre no card da categoria (Produtos) */
.prod-cat-prox { margin-top: 6px; font-size: 11.5px; color: var(--ink-soft); }
.prod-cat-prox code { font-size: 12.5px; font-weight: 700; color: var(--primary); background: #EFF6FF; padding: 1px 6px; border-radius: 5px; }

/* (08/10) atalhos de periodo ao lado do ate (faixa_datas.js) */
.faixa-atalhos { order: 999; flex-basis: 100%; width: 100%; display: flex; gap: 4px; flex-wrap: wrap; margin-top: -2px; box-sizing: border-box; }
.faixa-atalho { font: inherit; font-size: 11px; font-weight: 600; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; cursor: pointer; line-height: 1.4; }
.faixa-atalho:hover { color: var(--primary); border-color: var(--primary); background: #EFF6FF; }

/* ---- Início novo (08/10/2026): busca, Seu dia grande, ações rápidas ---- */
.entrada-busca { width: 100%; max-width: 760px; display: flex; align-items: center; gap: 10px; margin-top: 26px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 14px;
    padding: 13px 18px; color: #cbd5e1; font-size: 15px; cursor: text; text-align: left; font-family: inherit; }
.entrada-busca:hover { background: rgba(255,255,255,.16); }
.entrada-busca kbd { margin-left: auto; font: 11px Inter, sans-serif; color: #94a3b8; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; padding: 2px 7px; }
.entrada-grid { width: 100%; max-width: 1080px; display: grid; grid-template-columns: 1.25fr .9fr; gap: 16px; margin-top: 18px; text-align: left; }
@media (max-width: 900px) { .entrada-grid { grid-template-columns: 1fr; } }
.entrada-box { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 18px 22px; color: #e2e8f0; backdrop-filter: blur(6px); }
.entrada-box h2 { font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: #94a3b8; margin: 0 0 12px; font-weight: 700; }
.entrada-dia { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.entrada-dia li a { display: flex; align-items: flex-start; gap: 10px; text-decoration: none; color: #e2e8f0; font-size: 14px; }
.entrada-dia li a:hover { color: #fff; text-decoration: underline; }
.entrada-dia .ic { width: 22px; text-align: center; flex: none; }
.entrada-acoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.entrada-acao { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: #f1f5f9;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); transition: background .15s; }
.entrada-acao:hover { background: rgba(255,255,255,.16); text-decoration: none; }
.entrada-acao b { font-size: 14px; }
.entrada-acao small { color: #94a3b8; font-size: 11.5px; }
.entrada-rodape { width: 100%; max-width: 1080px; display: flex; justify-content: space-between; gap: 10px; color: #94a3b8; font-size: 12px; margin-top: 10px; }
.entrada-rodape a { color: #cbd5e1; }

/* (14/10) Entregas: atalho de semana que está na tela */
.btn-ghost.btn-ativo { border-color: var(--primary); color: var(--primary); font-weight: 600; }

/* (16/10) Licenças do Absolute: cartão do recorte que está na tela */
.ch-stat.ch-stat-sel { outline: 2px solid var(--primary); outline-offset: -2px; }

/* ================================================================
   Ficha da máquina v2 (27/10/2026) — sugestões a–h aprovadas pelo
   Marcelo a partir de docs/mockups/ficha_maquina_v2.html. Serve ao
   cliente (Meus Equipamentos) e à ficha interna (Locações). Prefixo fh-.
   ================================================================ */
.fh-crumb a { color: var(--ink-soft); text-decoration: none; }
.fh-crumb { margin-bottom: 12px; }

/* (a) cartão da máquina */
.fh-hero { background: linear-gradient(135deg, #0f1a2e 0%, #1b2a4a 60%, #23365f 100%); color: #fff; border-radius: 16px;
    padding: 22px 24px; display: grid; grid-template-columns: 96px 1fr auto; gap: 22px; align-items: center;
    box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.fh-hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(249,115,22,.28), transparent 65%); pointer-events: none; }
.fh-icon { width: 96px; height: 96px; border-radius: 22px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); display: grid; place-items: center; }
.fh-icon svg { width: 58px; height: 58px; }
.fh-hero-txt { min-width: 0; position: relative; z-index: 1; }
.fh-hero h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: #fff; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fh-model { font-size: 15px; color: #cbd5e1; margin-top: 4px; }
.fh-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: #94a3b8; }
.fh-meta b { color: #e2e8f0; font-weight: 600; }
.fh-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; line-height: 1;
    background: rgba(255,255,255,.12); color: #e2e8f0; border: 1px solid rgba(255,255,255,.2); }
.fh-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fh-pill-ok { background: rgba(5,150,105,.18); color: #6ee7b7; border-color: rgba(110,231,183,.35); }
.fh-pill-ok::before { background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.25); }
.fh-pill-30, .fh-pill-60, .fh-pill-90 { background: rgba(217,119,6,.2); color: #fcd34d; border-color: rgba(252,211,77,.35); }
.fh-pill-vencido { background: rgba(220,38,38,.22); color: #fca5a5; border-color: rgba(252,165,165,.4); }
.fh-actions { display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 1; }
.btn.fh-btn-accent { background: #f97316; color: #fff; border: 0; border-radius: 10px; padding: 11px 16px; font-weight: 700; font-size: 13.5px;
    box-shadow: 0 6px 16px -6px rgba(249,115,22,.7); display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.btn.fh-btn-accent:hover { background: #ea580c; color: #fff; }
.btn.fh-btn-glass { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 11px 16px;
    font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.btn.fh-btn-glass:hover { background: rgba(255,255,255,.16); color: #fff; }

/* (b) indicadores de relance */
.fh-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 16px 0; }
.fh-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); display: flex; gap: 12px; align-items: center; min-width: 0; }
.fh-kpi-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.fh-kpi-ic svg { width: 20px; height: 20px; }
.fh-kpi-v { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.fh-kpi-l { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.ic-blue { background: #dbeafe; color: #1d4ed8; } .ic-green { background: #d1fae5; color: #059669; }
.ic-orange { background: #ffedd5; color: #ea580c; } .ic-violet { background: #ede9fe; color: #7c3aed; }
.ic-red { background: #fee2e2; color: #dc2626; } .ic-gray { background: #f1f5f9; color: #64748b; }

/* painéis: título com etiqueta à direita */
.ficha-cli-grid .panel { border-radius: 16px; }
.ficha-cli-grid .panel h2 { display: flex; align-items: center; gap: 8px; }
.fh-tag { margin-left: auto; font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 500; }
.ficha-cli-grid .det-linhas > div { border-bottom-style: dashed; padding: 9px 0; }
.ficha-cli-grid .det-linhas > div:last-child { border-bottom: 0; }

/* (c) vigência: anel + barra */
.fh-vig { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; margin: 4px 0 12px; }
.fh-ring { width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(var(--primary) 0 var(--pct), var(--border) var(--pct) 100%); display: grid; place-items: center; position: relative; }
.fh-ring.vencido { background: conic-gradient(var(--vencido) 0 100%); }
.fh-ring::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); }
.fh-ring b { position: relative; z-index: 1; font-size: 15px; font-weight: 800; color: var(--ink); text-align: center; }
.fh-ring b small { display: block; font-size: 10px; color: var(--muted); font-weight: 500; }
.fh-vig-t { font-size: 15px; font-weight: 700; }
.fh-vig-s { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.prazo-barra.fh-bar { background: var(--border); }
.prazo-barra.fh-bar > i { background: linear-gradient(90deg, #3b82f6, #1d4ed8); border-radius: 999px; }
.prazo-barra.fh-bar.vencido > i { background: var(--vencido); }
.fh-marks { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 2px; }

/* (d) saúde da máquina */
/* isolation (28/10): as camadas do Leaflet (z-index 400+) ficam presas no
   quadro do mapa — sem isso, no celular o mapa passava por cima da barra do topo ao rolar */
.fh-map { border-radius: 12px; height: 140px; position: relative; border: 1px solid var(--border); margin-bottom: 12px; overflow: hidden;
    isolation: isolate; z-index: 0;
    background: linear-gradient(var(--border) 1px, transparent 1px) 0 0/28px 28px, linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0/28px 28px, var(--hover); }
.fh-map-lbl { position: absolute; left: 12px; bottom: 10px; z-index: 500; font-size: 12px; font-weight: 600; background: var(--surface); color: var(--ink);
    padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border); }
.fh-map-lbl small { font-weight: 400; color: var(--muted); }
.fh-map-vazio { height: 72px; }
.fh-health { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.fh-hc { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--hover); min-width: 0; }
.fh-hc .l { font-size: 12px; color: var(--ink-soft); }
.fh-hc .v { font-size: 15px; font-weight: 700; margin-top: 2px; word-break: break-word; }
.fh-hc .v small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.fh-hc .v.c-ok { color: var(--ok); } .fh-hc .v.c-bad { color: var(--vencido); }
.fh-meter { height: 6px; border-radius: 999px; background: var(--border); margin-top: 8px; overflow: hidden; }
.fh-meter i { display: block; height: 100%; border-radius: 999px; }
.m-ok { background: #10b981; } .m-warn { background: #f59e0b; } .m-bad { background: #ef4444; } .m-blue { background: #3b82f6; }

/* (e) uso: barras em degradê, semana atual em laranja */
.fh-uso-t { font-size: 13px; margin-top: 4px; }
.uso-semanas[data-v2] > div { background: linear-gradient(180deg, #60a5fa, #1d4ed8); border-radius: 8px 8px 4px 4px; min-height: 6px; }
.uso-semanas[data-v2] > div.atual { background: linear-gradient(180deg, #fb923c, #ea580c); opacity: 1; }
.uso-semanas[data-v2] > div span { font-weight: 700; color: var(--ink); }

/* (f) histórico com ícones */
.fh-tl { list-style: none; margin: 0; padding: 0; position: relative; }
.fh-tl::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.fh-tl li { position: relative; padding: 0 0 16px 44px; }
.fh-tl li:last-child { padding-bottom: 0; }
.fh-dot { position: absolute; left: 4px; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--border); }
.fh-dot svg { width: 12px; height: 12px; color: #fff; }
.d-seta { background: #3b82f6; } .d-check { background: #10b981; } .d-alerta, .d-saida { background: #f97316; }
.fh-when { font-size: 11.5px; color: var(--muted); }
.fh-what { font-weight: 600; font-size: 13.5px; }
.fh-how { font-size: 12.5px; color: var(--ink-soft); }

/* chamados abertos */
.fh-ch { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; }
.fh-ch .n { font-weight: 700; font-size: 12.5px; color: var(--primary); white-space: nowrap; }
.fh-ch .d { flex: 1; font-size: 13px; min-width: 0; }
.fh-ch .st { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #ffedd5; color: #9a3412; white-space: nowrap; }
.fh-link { display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 600; }

/* (g) barra fixa no celular (só cliente) */
.fh-sticky { display: none; }
@media (max-width: 860px) {
    .fh-hero { grid-template-columns: 64px 1fr; padding: 18px; }
    .fh-icon { width: 64px; height: 64px; border-radius: 16px; }
    .fh-icon svg { width: 38px; height: 38px; }
    .fh-hero h1 { font-size: 21px; }
    .fh-hero-cli .fh-actions { display: none; }
    .fh-hero:not(.fh-hero-cli) .fh-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .fh-kpis { grid-template-columns: 1fr 1fr; }
    .fh-hero-cli ~ .ficha-cli-grid { padding-bottom: 84px; }
    .fh-sticky { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; gap: 10px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-top: 1px solid var(--border); }
    .fh-sticky .btn { flex: 1; font-size: 13px; padding: 11px 8px; }
    .fh-sticky .btn.fh-btn-glass { background: #f1f5f9; color: var(--ink); border-color: var(--border); }
}
@media (max-width: 480px) { .fh-kpis { gap: 10px; } .fh-kpi { padding: 12px; } .fh-kpi-v { font-size: 17px; } .fh-health { grid-template-columns: 1fr; } }

/* tema escuro */
[data-tema="escuro"] .ic-blue { background: #1e3a8a; color: #bfdbfe; } [data-tema="escuro"] .ic-green { background: #064e3b; color: #a7f3d0; }
[data-tema="escuro"] .ic-orange { background: #7c2d12; color: #fed7aa; } [data-tema="escuro"] .ic-violet { background: #4c1d95; color: #ddd6fe; }
[data-tema="escuro"] .ic-red { background: #7f1d1d; color: #fecaca; } [data-tema="escuro"] .ic-gray { background: #1e293b; color: #94a3b8; }
[data-tema="escuro"] .fh-ch .st { background: #7c2d12; color: #fed7aa; }
[data-tema="escuro"] .fh-sticky { background: rgba(17,26,44,.94); }
[data-tema="escuro"] .fh-sticky .btn.fh-btn-glass { background: #1b2740; color: var(--ink); }
/* (28/10) ficha interna só de consulta: aviso no cartão no lugar do Editar */
.fh-consulta { margin-top: 10px; font-size: 12px; color: #94a3b8; }

/* ================================================================
   Locações v2 (28/10/2026) — sugestões a–j aprovadas pelo Marcelo
   ("todas") a partir de docs/mockups/locacoes_v2.html. Tudo preso em
   .loc2 / .loc2-*. Desde 28/10 a Meus Equipamentos do cliente também usa
   este bloco (com .me2 / .me2-* para o que é só dela — ver abaixo).
   ================================================================ */
/* (a) cabeçalho */
.loc2-hero { background: linear-gradient(135deg, #0f1a2e 0%, #1b2a4a 60%, #23365f 100%); color: #fff; border-radius: 16px;
    padding: 18px 22px; display: flex; align-items: center; gap: 18px; box-shadow: var(--shadow-md); position: relative; margin-bottom: 14px; }
.loc2-hero::after { content: ""; position: absolute; right: 0; top: 0; width: 300px; height: 100%; border-radius: 0 16px 16px 0;
    background: radial-gradient(circle at 100% 0%, rgba(249,115,22,.30), transparent 70%); pointer-events: none; }
.loc2-hero-txt { flex: 1; min-width: 0; position: relative; z-index: 1; }
.loc2-hero h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.loc2-resumo { color: #cbd5e1; margin-top: 3px; font-size: 13.5px; }
.loc2-resumo b { color: #fff; font-weight: 700; }
.loc2-sync { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 12px; color: #94a3b8; }
.loc2-sync i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.25); flex: none; }
.loc2-acoes { display: flex; gap: 8px; align-items: center; position: relative; z-index: 3; flex-wrap: wrap; justify-content: flex-end; }
.btn.loc2-btn-accent { background: #f97316; color: #fff; border: 0; border-radius: 10px; font-weight: 700;
    box-shadow: 0 6px 16px -6px rgba(249,115,22,.7); white-space: nowrap; }
.btn.loc2-btn-accent:hover { background: #ea580c; color: #fff; }
.btn.loc2-btn-glass { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
    font-weight: 700; white-space: nowrap; }
.btn.loc2-btn-glass:hover { background: rgba(255,255,255,.18); color: #fff; }
.loc2-mais { position: relative; }
.loc2-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); color: var(--ink); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 12px 32px -10px rgba(15,23,42,.35); padding: 6px; min-width: 260px; display: none; z-index: 40; }
.loc2-menu.aberto { display: block; }
.loc2-menu a, .loc2-menu button { display: flex; gap: 8px; align-items: baseline; width: 100%; padding: 9px 10px; border-radius: 8px; border: 0;
    background: none; color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; text-decoration: none; }
.loc2-menu a:hover, .loc2-menu button:hover, .loc2-menu a:focus-visible, .loc2-menu button:focus-visible { background: var(--hover); }
.loc2-menu small { color: var(--muted); font-size: 11.5px; }
.loc2-menu form { margin: 0; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }

/* (b) cards com ícone (mesmas classes de antes, novo desenho só aqui) */
.loc2 .kpi-locados { grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px; }
.loc2 .kpi-loc { display: flex; gap: 12px; align-items: center; border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); }
.loc2-kic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.loc2-kic svg { width: 19px; height: 19px; }
.loc2-kt { min-width: 0; }
.loc2 .kpi-loc-valor { color: var(--ink); font-size: 21px; margin-top: 0; letter-spacing: -.02em; }
.loc2 .kpi-loc-rotulo { font-size: 11.5px; letter-spacing: 0; text-transform: none; font-weight: 500; margin-top: 3px; }

/* (c) faixa "Precisa de atenção" */
.loc2-atencao { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #fff7ed; border: 1px solid #fed7aa;
    border-radius: 12px; padding: 9px 14px; margin-bottom: 14px; font-size: 13px; }
.loc2-atencao b { color: #9a3412; margin-right: 2px; }
.loc2-atencao a { background: #fff; border: 1px solid #fed7aa; border-radius: 999px; padding: 4px 11px; font-weight: 600; color: #9a3412;
    font-size: 12.5px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.loc2-atencao a:hover { background: #ffedd5; }
.loc2 i[class^="d-"] { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.loc2 .d-r { background: #dc2626; } .loc2 .d-o { background: #f97316; } .loc2 .d-a { background: #f59e0b; } .loc2 .d-y { background: #eab308; }
.loc2 .d-v { background: #10b981; } .loc2 .d-b { background: #3b82f6; } .loc2 .d-s { background: #94a3b8; } .loc2 .d-g { background: #64748b; }
.loc2 .d-c { background: #cbd5e1; }

/* (d) filtros: situação em botões; a simulação só aparece aberta */
.loc2 .filters { border-radius: 14px; padding: 12px 14px; }
.loc2-situacao { flex-basis: 100%; display: flex; gap: 6px; flex-wrap: wrap; }
.loc2-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px;
    font-size: 12.5px; font-weight: 600; color: var(--ink-soft); background: var(--surface); text-decoration: none; }
.loc2-chip:hover { border-color: var(--primary); color: var(--primary); }
.loc2-chip small { color: var(--muted); font-weight: 500; }
.loc2-chip.on { background: #0f1a2e; border-color: #0f1a2e; color: #fff; }
.loc2-chip.on small { color: #cbd5e1; }
.loc2 details.filtros-sim:not([open]) { display: none; }
.loc2 .filtros-ativos .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; }
.loc2-chip-x { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #bfdbfe; color: #1e40af;
    font-size: 12px; line-height: 1; text-decoration: none; }
.loc2-chip-x:hover { background: #93c5fd; }
.loc2-limpar { font-size: 12px; font-weight: 600; }

/* (i) total + Lista / Por cliente */
.loc2-info { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.loc2-info .result-info { margin-bottom: 0; }
.loc2-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--surface); }
.loc2-toggle a { padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none; }
.loc2-toggle a.on { background: #0f1a2e; color: #fff; }

/* (e)(f) tabela */
.loc2-tabela td { vertical-align: middle; }
.loc2-tabela tbody tr.linha-dados { cursor: pointer; }
.loc2-tabela tr.row-vencido > td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.loc2-tabela tr.row-vence_30 > td:first-child { box-shadow: inset 3px 0 0 #f97316; }
.loc2-tabela tr.row-vence_60 > td:first-child, .loc2-tabela tr.row-vence_90 > td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.loc2-tabela tr.row-sem_data > td:first-child { box-shadow: inset 3px 0 0 #94a3b8; }
.loc2-tabela td.col-justa { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; }
.loc2-eq { display: flex; gap: 10px; align-items: center; min-width: 0; }
.loc2-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--hover); color: var(--ink-soft); display: grid; place-items: center; flex: none; }
.loc2-ic svg { width: 18px; height: 18px; }
.loc2-eq-txt { min-width: 0; }
.loc2-eq-txt a { font-weight: 700; }
.loc2-eq-txt small { display: block; color: var(--ink-soft); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc2-vig-t { font-weight: 600; font-size: 12.5px; }
.loc2-vig-s { font-size: 11px; color: var(--muted); }
.loc2-bar { height: 5px; border-radius: 999px; background: var(--border); margin-top: 3px; overflow: hidden; min-width: 90px; }
.loc2-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3b82f6, #1d4ed8); }
.loc2-bar i.v { background: var(--vencido); }
.loc2-con { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.loc2-con i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.loc2-con.c-ok i { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
.loc2-con.c-warn i { background: #f59e0b; }
.loc2-con.c-off i { background: #cbd5e1; }
.loc2-con.c-off { color: var(--ink-soft); }
.loc2-tabela td.col-con, .loc2-tabela th.col-con { width: 1%; white-space: nowrap; }
.loc2-grupo td { background: var(--hover) !important; font-size: 12.5px; padding: 9px 12px; cursor: pointer; border-top: 2px solid var(--border); }
.loc2-grupo small { color: var(--ink-soft); font-weight: 500; margin-left: 6px; }
.loc2-grupo-btn { border: 0; background: none; cursor: pointer; font-size: 13px; color: var(--ink-soft); width: 20px; padding: 0; }
.loc2-grupo.fechado .loc2-grupo-btn { transform: rotate(-90deg); }
.loc2-grupo-n { float: right; color: var(--ink-soft); font-weight: 600; }
.loc2-grupo-n em { font-style: normal; }
.loc2-grupo-n em.r { color: #b91c1c; } .loc2-grupo-n em.o { color: #c2410c; }

/* (g) gaveta de detalhes */
.loc2-veu { position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 1000; }
.loc2-gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100%; background: var(--surface); z-index: 1001;
    box-shadow: -20px 0 40px -20px rgba(15,23,42,.45); transform: translateX(105%); transition: transform .18s ease; display: flex; flex-direction: column; visibility: hidden; }
.loc2-gaveta.aberta { transform: none; visibility: visible; }
.loc2-g-head { background: linear-gradient(135deg, #0f1a2e, #23365f); color: #fff; padding: 18px 20px; display: flex; gap: 14px; align-items: center; }
.loc2-g-ic { width: 50px; height: 50px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center; flex: none; }
.loc2-g-ic svg { width: 28px; height: 28px; }
.loc2-g-tit { min-width: 0; flex: 1; }
.loc2-g-tit h3 { margin: 0; font-size: 19px; color: #fff; }
.loc2-g-tit small { color: #cbd5e1; display: block; }
.loc2-g-x { background: rgba(255,255,255,.12); border: 0; color: #fff; width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: 15px; flex: none; }
.loc2-g-corpo { padding: 10px 20px; overflow: auto; flex: 1; }
.loc2-det { margin: 0; }
.loc2-det > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.loc2-det dt { color: var(--ink-soft); }
.loc2-det dd { margin: 0; text-align: right; font-weight: 600; max-width: 240px; word-break: break-word; }
.loc2-so-consulta { font-size: 12px; color: var(--ink-soft); background: var(--hover); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; margin: 12px 0 4px; }
.loc2-g-pe { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
.loc2-g-pe .btn { flex: 1; justify-content: center; }

/* (h) barra de seleção flutuante */
.loc2-selbar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 900; background: #0f1a2e; color: #fff;
    border-radius: 14px; padding: 9px 10px 9px 18px; align-items: center; gap: 16px; box-shadow: 0 18px 40px -12px rgba(15,23,42,.55);
    font-size: 13px; white-space: nowrap; max-width: calc(100vw - 24px); }
.loc2-selbar strong { color: #fff; }
.loc2-sel-m { color: #94a3b8; }
.loc2-selbar .btn.btn-mini { padding: 6px 11px; }

/* (j) celular: cada linha vira um cartão */
@media (max-width: 860px) {
    .loc2-hero { flex-direction: column; align-items: flex-start; }
    .loc2-acoes { justify-content: flex-start; }
    .loc2 .kpi-locados { grid-template-columns: 1fr 1fr; }
    .loc2-tabela thead { display: none; }
    .loc2-tabela, .loc2-tabela tbody, .loc2-tabela tr, .loc2-tabela td { display: block; width: auto !important; max-width: none !important; }
    .loc2 .table-wrap { overflow: visible; background: transparent; box-shadow: none; border: 0; }
    .loc2-tabela tr.linha-dados { position: relative; background: var(--surface) !important; border: 1px solid var(--border); border-radius: 14px;
        padding: 10px 12px 10px 40px; margin-bottom: 10px; box-shadow: var(--shadow); }
    .loc2-tabela tr.linha-dados[hidden] { display: none; }
    .loc2-tabela tr.linha-dados > td { padding: 3px 0; border: 0; background: transparent !important; box-shadow: none !important; }
    .loc2-tabela tr.linha-dados > td.col-sel { position: absolute; left: 12px; top: 14px; }
    .loc2-tabela tr.row-vencido { border-left: 4px solid #dc2626; } .loc2-tabela tr.row-vence_30 { border-left: 4px solid #f97316; }
    .loc2-tabela td.col-justa { display: inline-block; margin-right: 12px; color: var(--ink-soft); }
    .loc2-tabela td.desc-cell { white-space: normal; overflow: visible; }
    .loc2-eq-txt small { white-space: normal; }
    .loc2-tabela .acoes-col { position: static; text-align: left; }
    .loc2-grupo { margin: 6px 0; } .loc2-grupo td { border-radius: 10px; }
    .loc2-grupo-n { float: none; display: block; margin-top: 3px; }
    .loc2-selbar { left: 8px; right: 8px; transform: none; bottom: 8px; flex-wrap: wrap; white-space: normal; gap: 6px 12px; }
}

/* tema escuro */
[data-tema="escuro"] .loc2-atencao { background: #2b1c0a; border-color: #7c2d12; }
[data-tema="escuro"] .loc2-atencao b, [data-tema="escuro"] .loc2-atencao a { color: #fed7aa; }
[data-tema="escuro"] .loc2-atencao a { background: #1b2740; border-color: #7c2d12; }
[data-tema="escuro"] .loc2-chip.on, [data-tema="escuro"] .loc2-toggle a.on { background: #3b82f6; border-color: #3b82f6; }
[data-tema="escuro"] .loc2-chip-x { background: #1e3a8a; color: #bfdbfe; }
[data-tema="escuro"] .loc2-grupo-n em.r { color: #fca5a5; } [data-tema="escuro"] .loc2-grupo-n em.o { color: #fdba74; }
/* (28/10) Locações v2 em tela de notebook (1280px): a coluna do equipamento
   não some — o nome da empresa quebra linha e cede o espaço */
.loc2-tabela td.col-eq { min-width: 210px; }
.loc2-tabela td.col-empresa { max-width: 190px; white-space: normal; }
@media (max-width: 860px) { .loc2-tabela td.col-eq, .loc2-tabela td.col-empresa { min-width: 0; max-width: none; } }

/* ================================================================
   Meus Equipamentos v2 (28/10/2026) — tela do CLIENTE, sugestões a–h
   aprovadas pelo Marcelo a partir de docs/mockups/meus_equipamentos_v2.html.
   Usa as peças da Locações v2 (.loc2) e acrescenta só o que é dela.
   ================================================================ */
/* (a) boas-vindas e o painel do "Abrir chamado" */
.me2-kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; font-weight: 700; margin-bottom: 2px; }
.me2-chamado { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid #f97316; border-radius: 12px; padding: 12px 14px; margin: -4px 0 14px; box-shadow: var(--shadow); }
.me2-chamado[hidden] { display: none; }
.me2-chamado-txt { flex: 1 1 280px; min-width: 0; font-size: 13px; }
.me2-chamado-txt b { display: block; font-size: 14px; }
.me2-chamado-txt span { color: var(--ink-soft); }
.me2-chamado input { flex: 0 1 240px; min-width: 180px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
    font: inherit; font-size: 13px; background: var(--surface); color: var(--ink); }

/* (h) categorias em botões */
.me2-cats { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.me2-cat { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
    padding: 5px 12px 5px 9px; font-size: 12.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
.me2-cat svg { width: 16px; height: 16px; color: var(--ink-soft); flex: none; }
.me2-cat small { color: var(--muted); font-weight: 500; }
a.me2-cat:hover { border-color: var(--primary); color: var(--primary); }
.me2-cat.on { border-color: var(--primary); background: #eff6ff; color: var(--primary); }
.me2-cat.on svg { color: var(--primary); }
.me2-cat-sem { color: var(--ink-soft); cursor: default; }

/* (d) busca grande com lupa */
.me2 .filters.me2-filtros { gap: 10px; }
.me2-busca { flex: 1 1 340px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 10px;
    padding: 0 12px; background: var(--hover); cursor: text; min-width: 0; }
.me2-busca:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(29,78,216,.15); background: var(--surface); }
.me2-busca svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.me2 .filters .me2-busca input[type=text] { border: 0; background: transparent; box-shadow: none; outline: none; padding: 10px 0; min-width: 0; flex: 1; }

/* (e)(f) linha: usuário e a setinha que abre a ficha */
.me2-tabela td.col-usu { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.me2-tabela td.acoes-col { white-space: nowrap; }
.me2-seta { display: inline-block; color: var(--muted); font-weight: 800; font-size: 19px; line-height: 1; text-decoration: none; padding: 0 2px 0 6px; vertical-align: middle; }
.me2-tabela tr.linha-dados:hover .me2-seta, .me2-seta:hover { color: var(--primary); }

/* (g) Cartões: a mesma tabela, cada linha vira um cartão (no celular é sempre assim) */
.me2-wrap-cartoes { overflow: visible; background: transparent; box-shadow: none; border: 0; }
.me2-cartoes thead { display: none; }
.me2-cartoes, .me2-cartoes tbody { display: block; width: auto !important; }
.me2-cartoes tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.me2-cartoes tr.linha-dados { display: block; position: relative; background: var(--surface) !important; border: 1px solid var(--border);
    border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); }
.me2-cartoes tr.linha-dados:hover { border-color: var(--primary); }
.me2-cartoes tr.linha-dados > td { display: block; padding: 3px 0; border: 0; background: transparent !important; box-shadow: none !important;
    width: auto !important; max-width: none !important; min-width: 0 !important; }
.me2-cartoes tr.row-vencido { border-left: 4px solid #dc2626; } .me2-cartoes tr.row-vence_30 { border-left: 4px solid #f97316; }
.me2-cartoes td.col-eq { padding-right: 56px !important; margin-bottom: 4px; }
.me2-cartoes .loc2-eq-txt small { white-space: normal; }
.me2-cartoes td.col-justa, .me2-cartoes td.col-usu { display: inline-block; margin-right: 12px; color: var(--ink-soft); }
.me2-cartoes td.col-con, .me2-cartoes td.col-status { display: inline-block; margin-right: 10px; }
.me2-cartoes td.col-valor { font-weight: 700; text-align: left; }
.me2-cartoes td.acoes-col { position: absolute; top: 12px; right: 10px; }
.me2-cartoes td[data-rot]::before { content: attr(data-rot) " "; font-family: Inter, "Segoe UI", sans-serif; font-size: 11px; color: var(--muted); }
.me2-cartoes tr > td.empty { grid-column: 1 / -1; }

@media (max-width: 860px) {
    .me2 .loc2-tabela tr.linha-dados { padding: 10px 12px; }
    .me2 .loc2-tabela td.col-eq { padding-right: 56px !important; }
    .me2 .loc2-tabela td.acoes-col { position: absolute; top: 12px; right: 10px; }
    .me2 .loc2-tabela td.col-usu { display: inline-block; margin-right: 12px; max-width: none; }
    .me2 .loc2-tabela td.col-con, .me2 .loc2-tabela td.col-status { display: inline-block; margin-right: 10px; }
    .me2 .loc2-tabela td.col-valor { font-weight: 700; text-align: left; }
    .me2 .loc2-tabela td[data-rot]::before { content: attr(data-rot) " "; font-family: Inter, "Segoe UI", sans-serif; font-size: 11px; color: var(--muted); }
    .me2 .me2-toggle { display: none; }
    .me2-cartoes tbody { display: block; }
    .me2-chamado input { flex: 1 1 100%; }
}

/* tema escuro */
[data-tema="escuro"] .me2-cat.on { background: #1e3a8a; border-color: #3b82f6; color: #dbeafe; }
[data-tema="escuro"] .me2-cat.on svg { color: #dbeafe; }
[data-tema="escuro"] .me2-busca { background: #111a2c; }

/* (28/10) Usuários: o botão "🛡 Absolute ligado/desligado" de cada conta de cliente */
.form-abs-usuario { margin: 4px 0 0; }
.btn-abs-usuario { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 2px 9px; font: inherit;
    font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn-abs-usuario.on { color: #047857; border-color: #a7f3d0; background: #ecfdf5; }
.btn-abs-usuario.off { color: #64748b; border-style: dashed; }
.btn-abs-usuario:hover { border-color: var(--primary); }
[data-tema="escuro"] .btn-abs-usuario.on { background: #052e1f; border-color: #065f46; color: #6ee7b7; }
/* (28/10) cliente sem o Absolute: três cards em vez de cinco */
.me2 .kpi-locados.me2-k3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .me2 .kpi-locados.me2-k3 { grid-template-columns: 1fr 1fr; } }
.fh-kpis.fh-kpis-2 { grid-template-columns: repeat(2, 1fr); }   /* ficha do cliente sem o Absolute */
@media (max-width: 860px) { .loc2-tabela td.col-valor { text-align: left; } }

/* ===== Usuários v2 (28/10/2026) — mesmo desenho da Locações v2: cartão
   escuro, cards que filtram, chips, e a edição numa gaveta lateral ===== */
.usr2 .kpi-locados.usr2-kpis { grid-template-columns: repeat(5, 1fr); }
.usr2 .kpi-loc { border: 1px solid var(--border); background: var(--surface); cursor: pointer; font: inherit; text-align: left; color: inherit; }
.usr2 .kpi-loc.on { border-color: #0f1a2e; box-shadow: 0 0 0 2px rgba(15,26,46,.12); }
.usr2 .filters.usr2-filtros { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.usr2 .filters.usr2-filtros input[type=text] { flex: 1 1 320px; }
.usr2 .loc2-chip { background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; }
.usr2 .loc2-chip.on { background: #0f1a2e; color: #fff; }
.usr2-av { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 12.5px; letter-spacing: .02em; flex: none; }
.usr2-av.av-eq { background: #dbeafe; color: #1d4ed8; }
.usr2-av.av-adm { background: #ede9fe; color: #6d28d9; }
.usr2-av.av-cli { background: #d1fae5; color: #047857; }
[data-tema="escuro"] .usr2-av.av-eq { background: #1e3a8a; color: #bfdbfe; }
[data-tema="escuro"] .usr2-av.av-adm { background: #4c1d95; color: #ddd6fe; }
[data-tema="escuro"] .usr2-av.av-cli { background: #064e3b; color: #a7f3d0; }
.loc2-g-ic.usr2-av { width: 50px; height: 50px; border-radius: 14px; font-size: 18px; border: 0; }
.usr2-tabela tr.usr2-inativo .loc2-eq-txt, .usr2-tabela tr.usr2-inativo .usr2-av { opacity: .55; }
.usr2-tabela td.usr2-acoes { white-space: nowrap; text-align: right; }
.usr2-tabela td.usr2-acoes .btn-mini { margin-left: 4px; }
.usr2-tabela .btn-mini.usr2-btn-editar { background: #0f1a2e; color: #fff; border-color: #0f1a2e; }
.usr2-tabela .btn-mini.usr2-btn-editar:hover { background: #23365f; }
.usr2-tabela .usr2-mods { display: block; color: var(--ink-soft); font-size: 11.5px; margin-top: 2px; }
.usr2-tabela tbody tr.linha-dados { cursor: default; }
.usr2-vazio { padding: 14px 4px; }
/* gaveta mais larga: o seletor de empresas e os módulos precisam de espaço */
.usr2-gaveta { width: 620px; }
.usr2-sec { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 12px 0; background: var(--surface); }
.usr2-sec-t { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.usr2-sec.usr2-perigo { border-color: #fecaca; }
.usr2-sec .form-inline { display: flex; gap: 8px; align-items: center; }
.usr2-sec .empresas-lista { max-height: 220px; }
.usr2-linha-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.usr2-grid2 { grid-template-columns: 1fr 1fr; }
/* interruptor: a caixinha vira uma chave liga/desliga */
.usr2-switch { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; border-top: 1px dashed var(--border); }
.usr2-switch:first-of-type, .usr2-sec-t + .usr2-switch, .usr2-sec-t + form .usr2-switch { border-top: 0; }
.usr2-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.usr2-sw { width: 36px; height: 20px; border-radius: 999px; background: #cbd5e1; position: relative; flex: none; margin-top: 1px; transition: background .15s; }
.usr2-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.usr2-switch input:checked + .usr2-sw { background: #10b981; }
.usr2-switch input:checked + .usr2-sw::after { transform: translateX(16px); }
.usr2-switch input:focus-visible + .usr2-sw { box-shadow: 0 0 0 3px rgba(37,99,235,.35); }
.usr2-sw-txt { font-size: 13px; line-height: 1.3; }
.usr2-sw-txt b { display: block; font-weight: 600; }
.usr2-sw-txt small { color: var(--ink-soft); font-size: 12px; }
.usr2-sec form { margin: 0; }
@media (max-width: 860px) {
    .usr2 .kpi-locados.usr2-kpis { grid-template-columns: 1fr 1fr; }
    .usr2-tabela td.usr2-acoes { text-align: left; }
    .usr2-grid2 { grid-template-columns: 1fr; }
}