/* ============ ARTECIM — ponte das telas ainda não migradas (fase 1 da reforma, 16/10/2026) ============
   A casca, os tokens e os componentes novos moram em artecim.css (carregado DEPOIS deste arquivo).
   Aqui fica só o que as telas antigas (fase 2) ainda usam — .card, .btn, .tbl, .badge, .kpi, modal, toast,
   calendário, árvore, hub — já com as cores da marca e a escala de letra 12 · 14 · 16 · 20 · 28.
   Saíram daqui: .sidebar, .topbar, .userchip, #menu-toggle, .main (substituídos pela casca nova).
   Os nomes antigos de variável viram apelido dos tokens novos: tela antiga com style="color:var(--muted)" segue certa. */
:root {
  --bg: var(--fundo, #F3F4F8);
  --panel: var(--sup, #FFFFFF);
  --accent: var(--acento, #1C256E);
  --accent-2: var(--ok, #1F8A50);
  --danger: var(--erro, #C9161C);
  --warn: var(--alerta, #C27A12);
  --text: var(--texto, #262B40);
  --muted: var(--texto-3, #5D6480);
  --border: var(--borda, #E0E3EC);
  --radius: 10px;
  --shadow: var(--sombra-1, 0 1px 2px rgba(20, 23, 38, .06));
  --linha: var(--borda, #E0E3EC);
  --card: var(--sup, #FFFFFF);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
a { color: var(--acento-texto, #2A3593); text-decoration: none; }
h1 { font-size: 20px; } h2 { font-size: 16px; } h3 { font-size: 14px; }

/* ---------- componentes das telas antigas ---------- */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }
.card h2 { margin-bottom: 12px; font-family: var(--fonte-titulo); font-size: 16px; font-weight: 700; color: var(--texto-forte); }
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 16px; }
/* cartão antigo (kpiCard das telas da fase 2) com a mesma cara do cartão novo: rótulo 12 · valor 28 · apoio 12, sem borda colorida */
.kpi .l { font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .v { font-family: var(--fonte-titulo); font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--texto-forte); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .s { font-size: 12px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 768px) { .kpi .v { font-size: 24px; } }

.toolbar { display: flex; gap: 10px 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .spacer { flex: 1; }
input, select, textarea {
  font: inherit; font-size: 14px; padding: 8px 12px; border: 1px solid var(--borda-ctrl, #8A91AB); border-radius: 6px;
  background: #fff; color: var(--texto-forte); outline: none; max-width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
textarea { width: 100%; min-height: 70px; resize: vertical; }
label.fld { display: block; margin-bottom: 12px; font-size: 14px; color: var(--texto-forte); font-weight: 600; }
label.fld > input, label.fld > select, label.fld > .busca { width: 100%; margin-top: 6px; }
label.fld > textarea { margin-top: 6px; }
label.fld .obrig { color: var(--erro-texto); margin-left: 2px; }
label.fld .ajuda { display: block; margin-top: 6px; font-weight: 400; }
label.fld .erro-msg { margin-top: 6px; }
label.fld.invalido input, label.fld.invalido select, label.fld.invalido textarea, label.fld.invalido .busca { border-color: var(--erro); box-shadow: 0 0 0 1px var(--erro); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 4px 14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid > .form-secao-tit { grid-column: 1 / -1; margin: 6px 0 10px; padding-top: 14px; border-top: 1px solid var(--border); font-family: var(--fonte-titulo); font-size: 16px; font-weight: 700; color: var(--texto-forte); }
.form-grid > .form-secao-tit:first-child { border-top: 0; padding-top: 0; }

.btn {
  font: inherit; font-size: 14px; font-weight: 600; border: 1px solid transparent; border-radius: 6px; padding: 0 14px; min-height: 36px;
  cursor: pointer; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
}
.btn:hover { background: var(--acento-forte, #141B55); }
.btn.sec { background: #fff; color: var(--texto); border-color: var(--borda-ctrl, #8A91AB); }
.btn.sec:hover { border-color: var(--accent); color: var(--accent); background: #fff; }
.btn.green { background: var(--ok); } .btn.green:hover { background: var(--ok-texto); }
.btn.red { background: var(--erro); } .btn.red:hover { background: var(--erro-texto); }
.btn.warn { background: var(--alerta-texto); }
.btn.ghost { background: none; color: var(--acento-texto); }
.btn.ghost:hover { background: var(--sup-3); }
.btn.sm { min-height: 32px; padding: 0 10px; font-size: 14px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); font-size: 14px; }
/* tabela antiga ganha teto: rola dentro da caixa, cabeçalho preso (a reforma de cada tela vem na fase 2) */
.tbl-wrap { overflow: auto; max-height: var(--teto-fim, 720px); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); scrollbar-width: thin; }
table.tbl th {
  position: sticky; top: 0; z-index: 2; background: var(--sup-2, #F6F7FA);
  text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tbody tr:hover td { background: var(--sup-2, #F6F7FA); }
table.tbl tr.clickable { cursor: pointer; }
.empty { text-align: center; color: var(--muted); padding: 30px; }

/* selo de estado (cor por valor ainda vem das telas antigas; a fase 2 troca por .selo ok/alerta/erro/neutro) */
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge.aberta { background: var(--acento-suave); color: var(--acento-texto); }
.badge.rascunho { background: var(--alerta-suave); color: var(--alerta-texto); border: 1px dashed var(--alerta); }
.badge.em_andamento { background: var(--alerta-suave); color: var(--alerta-texto); }
.badge.aguardando_pecas { background: #EFE9FA; color: #5B3FA8; }
.badge.concluida { background: var(--ok-suave); color: var(--ok-texto); }
.badge.aprovada { background: var(--ok-suave); color: var(--ok-texto); }
.badge.cancelada, .badge.rejeitada { background: var(--sup-3); color: var(--texto-2); }
.badge.pendente { background: var(--alerta-suave); color: var(--alerta-texto); }
.badge.convertida { background: var(--ok-suave); color: var(--ok-texto); }
.badge.baixa { background: var(--sup-3); color: var(--texto-2); }
.badge.media { background: var(--acento-suave); color: var(--acento-texto); }
.badge.alta { background: var(--erro-suave); color: var(--erro-texto); }
.badge.urgente { background: var(--erro); color: #fff; }
.badge.preventiva { background: var(--ok-suave); color: var(--ok-texto); }
.badge.corretiva { background: var(--erro-suave); color: var(--erro-texto); }
.badge.melhoria { background: var(--acento-suave); color: var(--acento-texto); }
.badge.inspecao { background: #EFE9FA; color: #5B3FA8; }
.badge.solicitacao { background: var(--acento-suave); color: var(--acento-texto); }
.badge.cotacao { background: var(--alerta-suave); color: var(--alerta-texto); }
.badge.pedido { background: #EFE9FA; color: #5B3FA8; }
.badge.recebido { background: var(--ok-suave); color: var(--ok-texto); }
.badge.disponivel { background: var(--ok-suave); color: var(--ok-texto); }
.badge.emprestada { background: var(--alerta-suave); color: var(--alerta-texto); }
.badge.calibracao, .badge.manutencao { background: #EFE9FA; color: #5B3FA8; }
.badge.ok { background: var(--ok-suave); color: var(--ok-texto); }
.badge.nok { background: var(--erro); color: #fff; }

/* ---------- modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: var(--veu, rgba(14, 20, 64, .42)); z-index: 200;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto;
}
.modal {
  background: var(--panel); border-radius: 10px; width: 100%; max-width: 680px;
  box-shadow: var(--sombra-menu); animation: pop .15s ease;
}
.modal.lg { max-width: 900px; }
.modal header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; }
.modal header h2 { flex: 1; font-family: var(--fonte-titulo); font-size: 16px; font-weight: 700; color: var(--texto-forte); }
.modal header .x { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--muted); width: 36px; height: 36px; border-radius: 6px; }
.modal header .x:hover { background: var(--sup-3); }
.modal .body { padding: 18px 20px; }
.modal footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }
@keyframes pop { from { transform: scale(.97); opacity: .6; } }

/* ---------- toast (telas antigas; as novas usam o aviso do ui.js) ---------- */
#toast-root { position: fixed; bottom: 20px; right: 20px; z-index: 500; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  background: var(--texto-forte, #141726); color: #fff; padding: 12px 16px; border-radius: 6px;
  box-shadow: var(--sombra-menu); font-size: 14px; animation: slide .2s ease; max-width: 380px; pointer-events: auto;
}
.toast.err { background: var(--erro); } .toast.ok { background: var(--ok-texto); } .toast.warn { background: var(--alerta-texto); }
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }

/* ---------- dashboard antigo / gráficos em canvas (telas da fase 2) ---------- */
.chart-box { height: 240px; }
.chart-box.tall { height: 340px; }
.chart-box canvas { width: 100%; height: 100%; }
.ranking li { display: flex; justify-content: space-between; padding: 8px 2px; border-bottom: 1px solid var(--border); font-size: 14px; }
.ranking li:last-child { border: none; }
.ranking { list-style: none; }
.ranking .bar-bg { background: var(--trilho, #E6E8F0); border-radius: 3px; height: 10px; flex: 1; margin: 5px 12px 0; }
.ranking .bar { background: var(--serie-1, #3A4FC4); height: 10px; border-radius: 3px; }

/* ---------- kanban de OS ---------- */
.kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.kanban .col { background: var(--sup-3); border-radius: 10px; padding: 10px; }
.kanban .col h3 { font-size: 12px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; display: flex; justify-content: space-between; }
.kanban .kcard { background: #fff; border-radius: 6px; padding: 10px; margin-bottom: 8px; box-shadow: var(--shadow); cursor: pointer; font-size: 14px; }
.kanban .kcard:hover { outline: 2px solid var(--accent); }
.kanban .kcard .num { font-weight: 700; }
.kanban .kcard .eq { color: var(--muted); margin: 3px 0; }

/* ---------- calendário ---------- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal .dow { text-align: center; font-size: 12px; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 4px; }
.cal .day { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; height: 118px; padding: 5px; font-size: 12px; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
.cal .day.has-ev { cursor: pointer; }
.cal .day.has-ev:hover { border-color: var(--accent); }
.cal .day .ev-more { font-size: 12px; color: var(--acento-texto); font-weight: 600; margin-top: auto; padding-left: 2px; }
.cal .day.out { opacity: .35; }
.cal .day.today { border-color: var(--accent); border-width: 2px; }
.cal .day .n { font-weight: 700; margin-bottom: 3px; }
.cal .ev { border-radius: 4px; padding: 2px 5px; margin-bottom: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: default; }
.cal .ev.preventiva { background: #DDF1EC; color: #0E6B59; }
.cal .ev.os { background: var(--acento-suave); color: var(--acento-texto); }
.cal .ev.ferias { background: var(--alerta-suave); color: var(--alerta-texto); }
.cal .ev.parada { background: #F7E3EE; color: #8E2F62; }
.cal .ev.agenda { background: #EFE9FA; color: #5B3FA8; }

/* ---------- árvore da estrutura ---------- */
.tree ul { list-style: none; padding-left: 22px; position: relative; }
.tree > ul { padding-left: 0; }
.tree li { position: relative; padding: 4px 0; }
.tree ul ul { margin-left: 10px; padding-left: 22px; border-left: 1px dashed var(--border); }
.tree ul ul > li::before { content: ''; position: absolute; left: -22px; top: 20px; width: 16px; border-top: 1px dashed var(--border); }
.tree .node { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); }
.tree .node:hover { border-color: var(--accent); }
.tree .node .ti svg.ic { color: var(--accent); }
.tree .node .t { font-size: 12px; text-transform: uppercase; color: var(--texto-2); background: var(--sup-3); font-weight: 600; padding: 1px 8px; border-radius: 999px; letter-spacing: .3px; }
.tree .node .acts { visibility: hidden; }
.tree .node:hover .acts, .tree .node:focus-within .acts { visibility: visible; }

/* ---------- fotos, assinatura, checklist ---------- */
.fotos { display: flex; gap: 10px; flex-wrap: wrap; }
.fotos img { width: 110px; height: 110px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; }
.sig-canvas { border: 2px dashed var(--borda-ctrl); border-radius: 6px; background: #fff; touch-action: none; width: 100%; }
.chk-item { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.chk-item .desc { flex: 1; min-width: 200px; }
.chk-item .opts { display: flex; gap: 6px; }
.chk-item .opts button { padding: 5px 14px; border-radius: 6px; border: 1px solid var(--borda-ctrl); background: #fff; cursor: pointer; font-weight: 700; }
.chk-item .opts button.sel-ok { background: var(--ok); color: #fff; border-color: var(--ok); }
.chk-item .opts button.sel-nok { background: var(--erro); color: #fff; border-color: var(--erro); }
.chk-item .opts button.sel-na { background: var(--texto-3); color: #fff; border-color: var(--texto-3); }

/* ---------- abas antigas (dentro do detalhe da OS e telas da fase 2) ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.tabs button { background: none; border: none; padding: 9px 14px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--texto-2); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs button.active { color: var(--acento-texto); border-color: var(--accent); }

/* ---------- impressão da OS ---------- */
.print-os { background: #fff; max-width: 800px; margin: 0 auto; padding: 30px; }
.print-os h1 { text-align: center; margin-bottom: 4px; }
.print-os table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.print-os td, .print-os th { border: 1px solid #999; padding: 6px 9px; font-size: 12px; text-align: left; }
.print-os .sig-line { margin-top: 50px; display: flex; gap: 40px; }
.print-os .sig-line div { flex: 1; border-top: 1px solid #333; text-align: center; padding-top: 5px; font-size: 12px; }
@media print {
  .lateral, .veu-lat, .cab, .faixa-filtros, .no-print { display: none !important; }
  .pagina { margin-left: 0 !important; }
  .content { padding: 0; max-width: none; }
  body { background: #fff; }
  .card { box-shadow: none; }
}

/* ---------- painel público do QR (não muda de conteúdo) ---------- */
.public-wrap { width: 100%; max-width: 720px; margin: 0 auto; padding: 20px 14px; }

/* ---------- ícones SVG (icons.js) ---------- */
svg.ic { width: 16px; height: 16px; vertical-align: -3px; flex-shrink: 0; }
.btn.ico { padding: 0 8px; min-width: 32px; }
.btn.ico svg.ic { width: 16px; height: 16px; vertical-align: -2px; }
.ti { display: inline-flex; color: var(--accent); }
.ti svg.ic { width: 16px; height: 16px; }
.tree .node .ti { color: var(--muted); }
.cal-legend { display: inline-flex; gap: 14px; flex-wrap: wrap; margin-left: 14px; font-size: 12px; color: var(--muted); }
.cal-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.lg-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.lg-dot.preventiva { background: var(--serie-3); }
.lg-dot.os { background: var(--serie-1); }
.lg-dot.ferias { background: var(--serie-2); }
.lg-dot.parada { background: var(--serie-5); }
.lg-dot.agenda { background: var(--serie-4); }

/* ---------- celular (telas antigas) ---------- */
@media (max-width: 860px) {
  .form-grid { grid-template-columns: 1fr; }
  .card { overflow-x: auto; }
  .tree { overflow-x: auto; }
  .modal { max-width: 100%; }
  .drawer { width: 100%; max-width: 100%; }
  .cal .day { height: auto; min-height: 74px; }
}

/* ---------- gaveta lateral antiga (painel do dia do calendário) ---------- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(14, 20, 64, .3); z-index: 400; display: flex; justify-content: flex-end; opacity: 0; transition: opacity .18s ease; }
.drawer-overlay.open { opacity: 1; }
.drawer { width: 380px; max-width: 92vw; height: 100%; background: var(--panel); box-shadow: var(--sombra-painel); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .2s ease; }
.drawer-overlay.open .drawer { transform: translateX(0); }
.drawer header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.drawer header h2 { font-family: var(--fonte-titulo); font-size: 16px; font-weight: 700; }
.drawer header .x { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted); }
.drawer-body { padding: 14px 18px; overflow-y: auto; flex: 1; }
.day-ev { display: flex; gap: 10px; align-items: flex-start; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.day-ev .lg-dot { margin-top: 4px; flex-shrink: 0; }

/* ---------- hub da máquina (entrada por QR) ---------- */
.hub-head h2 { font-family: var(--fonte-titulo); font-size: 20px; }
.hub-head .sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.hub-q { color: var(--muted); font-size: 14px; margin: 16px 2px 8px; }
.hub-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hub-tile { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 66px; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); cursor: pointer; font: inherit; color: inherit; }
.hub-tile:hover { border-color: var(--accent); }
.hub-tile[aria-expanded="true"] { border-color: var(--accent); background: var(--sup-2); }
.hub-tile .ic-wrap { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--acento-suave); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.hub-tile .tx { flex: 1; min-width: 0; }
.hub-tile .tx b { display: block; font-size: 16px; }
.hub-tile .tx span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.hub-tile .cnt { flex-shrink: 0; }
.hub-sec:not(:empty) { margin-top: 12px; }
.hub-item { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.hub-item:last-child { border-bottom: none; }
.hub-item .mn { min-width: 0; }
.hub-item .mn b { display: block; font-size: 14px; }
.hub-item .mn span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.hub-item.clickable { cursor: pointer; }
.hub-item.clickable:hover { background: var(--sup-2); }

/* ---------- tabela que vira cartão no celular (.tbl.cards) ---------- */
@media (max-width: 640px) {
  table.tbl.cards, table.tbl.cards tbody { display: block; }
  table.tbl.cards thead { display: none; }
  table.tbl.cards tr { display: block; padding: 8px 0; border-top: 8px solid var(--bg); }
  table.tbl.cards tr:first-child { border-top: none; }
  table.tbl.cards td { display: flex; gap: 14px; align-items: baseline; justify-content: space-between; padding: 5px 13px; border-bottom: none; text-align: right; }
  table.tbl.cards td::before { content: attr(data-label); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; flex-shrink: 0; text-align: left; }
  table.tbl.cards td.empty { display: block; text-align: center; }
  table.tbl.cards td.empty::before { content: none; }
}

/* --- gráficos em canvas das telas antigas: dica e faixa rolável --- */
.chart-tip { position: absolute; z-index: 60; display: none; pointer-events: none; background: var(--texto-forte); color: #fff; font-size: 12px; line-height: 1.35; padding: 6px 9px; border-radius: 6px; max-width: 240px; white-space: pre-line; box-shadow: var(--sombra-menu); }
.chart-box.scroll { overflow-x: auto; overflow-y: hidden; }
.chart-box.scroll > div { height: 100%; }
.chart-nota { color: var(--muted); font-size: 12px; margin: 6px 2px 0; }
.chart-nota b { color: var(--text); font-weight: 600; }
.gauge-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.gauge-box { height: 210px; }
.gauge-box canvas { width: 100%; height: 100%; }
@media (max-width: 640px) { .chart-box { height: 220px; } .gauge-box { height: 190px; } }

/* faixa que separava os assuntos da Tela Gerencial antiga */
.faixa-assunto { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.faixa-assunto:first-child { margin-top: 0; }
.faixa-assunto h2 { margin: 0; font-size: 16px; color: var(--texto-forte); }
.faixa-assunto span { font-size: 12px; color: var(--muted); }

/* ordem de compra em papel (reunião 01/09, 30:44) */
#print-area { display: none; }
@media print {
  body > * { display: none !important; }
  #print-area { display: block !important; font-family: Arial, Helvetica, sans-serif; color: #000; padding: 0; }
  #print-area h1 { font-size: 18px; margin: 0 0 10px; }
  #print-area p { font-size: 12px; margin: 2px 0; }
  #print-area table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 12px; }
  #print-area th, #print-area td { border: 1px solid #999; padding: 5px 7px; text-align: left; }
  #print-area .total { margin-top: 12px; font-size: 14px; font-weight: 700; text-align: right; }
  #print-area .ass { margin-top: 44px; }
}

/* seleção múltipla antiga (App.multiSelect — fica só pras telas da fase 2; as novas usam UI.multi) */
.msel { position: relative; display: inline-block; }
.msel-btn { background: #fff; border: 1px solid var(--borda-ctrl); border-radius: 6px; padding: 0 12px; height: 36px; font: inherit; font-size: 14px; cursor: pointer; min-width: 190px; text-align: left; color: inherit; }
.msel-btn::after { content: '▾'; float: right; opacity: .55; margin-left: 8px; }
.msel-btn.ativo { border-color: var(--accent); font-weight: 600; }
.msel-pop { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 260px; max-width: 340px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--sombra-menu); padding: 8px; }
.msel-busca { width: 100%; margin-bottom: 6px; font-size: 14px; padding: 6px 8px; }
.msel-lista { max-height: 230px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.msel-lista label { display: flex; align-items: center; gap: 7px; font-size: 14px; padding: 3px 4px; border-radius: 6px; cursor: pointer; }
.msel-lista label:hover { background: var(--menu-hover); }
.msel-vazio { margin: 6px 4px; font-size: 12px; color: var(--muted); }
.msel-rodape { display: flex; gap: 8px; margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.msel-rodape button { flex: 1; font: inherit; font-size: 12px; padding: 5px 6px; cursor: pointer; background: none; border: 1px solid var(--border); border-radius: 6px; color: inherit; }
.msel-rodape button:hover { border-color: var(--accent); }
.public-wrap .tbl-wrap { max-height: none; }
/* celular: tabela antiga solta tem teto de 380 (DESIGN §4.8); a que vira cartão (Minhas OS) vai até o fim da janela — a fase 2 troca por cartões com teto de 60 */
@media (max-width: 768px) { .tbl-wrap { max-height: 380px; } .tbl-wrap:has(> table.cards) { max-height: var(--teto-fim); } }