/* app.css - camada fina sobre o Aurea UDS (https://www.aureauds.dev/): layout, utilitários e telas específicas.
   Cores, raios, espaçamentos e tipografia vêm dos tokens do Aurea (--primary, --card, --border, --space-*, ...). */
html, body { margin: 0; }
body { background: var(--background); color: var(--foreground); font-family: var(--font-ui); font-size: var(--text-sm); }
[hidden] { display: none !important; }
.icon-lg { --step-icon: 40px; }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; }
#side.sidebar { position: sticky; top: 0; height: 100vh; max-height: none; margin: 0; border-radius: 0; z-index: 40; }
.bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-6); background: var(--card); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.bar h1 { margin: 0; font-size: var(--text-lg); font-family: var(--font-heading); font-weight: 600; }
.bar .tenant { display: flex; flex-direction: column; line-height: 1.2; }
.main { padding: var(--space-6); min-width: 0; }
.menu-btn { display: inline-flex; }
@media (min-width: 1024px) {
  /* modo compacto: só os ícones (rótulo em tooltip via title) */
  .layout { transition: grid-template-columns .2s; }
  .layout.side-mini { grid-template-columns: 64px minmax(0, 1fr); }
  .layout.side-mini #side.sidebar { overflow: hidden; }
  .side-mini .sidebar-brand-text, .side-mini .sidebar-label, .side-mini .sidebar-user-box .mt,
  .side-mini .sidebar-user-box .user-line > div { display: none; }
  .side-mini .sidebar-header { padding-inline: 0; min-height: var(--space-4); }
  .side-mini .sidebar-group-label { font-size: 0; height: 1px; margin: var(--space-2) var(--space-3); padding: 0; background: var(--border); }
  .side-mini .sidebar-item { justify-content: center; padding-inline: 0; }
  .side-mini .sidebar-user-box { padding-inline: 0; }
  .side-mini .sidebar-user-box .user-line { justify-content: center; }
}
#backdrop { display: none; position: fixed; inset: 0; background: var(--overlay, #0008); z-index: 35; }
@media (max-width: 1023px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  #side.sidebar { position: fixed; left: 0; width: 272px; transform: translateX(-105%); transition: transform .2s; }
  #side.sidebar.open { transform: none; }
  #backdrop.show { display: block; }
  .menu-btn { display: inline-flex; }
  .bar, .main { padding-inline: var(--space-4); }
}
.sidebar-user-box { padding: var(--space-3); border-top: 1px solid var(--border); font-size: var(--text-xs); }

/* ---------- utilitários ---------- */
.row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.push { margin-left: auto; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-tight { display: flex; flex-direction: column; gap: 2px; }
.mb { margin-bottom: var(--space-4); } .mt { margin-top: var(--space-3); }
.strong { font-weight: 600; } .big { font-size: var(--text-lg); } .sm { font-size: var(--text-xs); } .up { text-transform: uppercase; letter-spacing: .04em; }
.muted { color: var(--muted-foreground); } .right { text-align: right; } .center { text-align: center; } .nowrap { white-space: nowrap; }
.pos { color: var(--success-400, var(--success)); } .neg { color: var(--danger-400, var(--destructive)); } .warn { color: var(--warning-400, var(--warning)); }
.trunc { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prewrap { white-space: pre-line; } .pad { padding: var(--space-6) !important; } .pad-s { padding: var(--space-3) var(--space-4) 0; }
.full { width: 100%; } .link { color: var(--link, var(--primary)); cursor: pointer; text-decoration: underline; }
.clickable { cursor: pointer; } .print-only { display: none; }
.card.flush { padding: 0; overflow: hidden; } .card.flush .card-title { margin: 0; }
.card-title { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: 600; }
.card-soft { padding: var(--space-3); background: var(--surface-2, var(--secondary)); border-radius: var(--radius-lg); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-3); }
.fgrid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.fgrid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
.span2 { grid-column: 1 / -1; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.kpis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3); }
.kpis4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.kpi { container-type: inline-size; height: 100%; }
.kpi-v { font-size: clamp(.9rem, calc(100cqw / (var(--len, 8) * .62)), 1.9rem); font-weight: 700; margin: 4px 0; font-family: var(--font-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-link { cursor: pointer; transition: box-shadow .15s, transform .15s; } .kpi-link:hover, .kpi-link:focus-visible { box-shadow: 0 0 0 2px var(--primary); transform: translateY(-1px); outline: none; } .kpi-sm { font-size: var(--text-lg); font-weight: 700; }
@media (max-width: 1279px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .grid2, .fgrid3, .fgrid5 { grid-template-columns: minmax(0, 1fr); } .kpis, .kpis4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chart-box { position: relative; height: 260px; }
.table.slim { min-width: 0; }
.table-wrap { overflow-x: auto; }
.risk-row td { background: var(--danger-bg, #fee) !important; }
.table tr.clickable:hover td { background: var(--surface-2, var(--secondary)); }
.tree { list-style: none; margin: 0 0 0 var(--space-4); padding: 0 0 0 var(--space-3); border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.tree > li { padding: 2px 0; } .tree .icon { vertical-align: -3px; }
.checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
pre.doc { white-space: pre-wrap; background: var(--surface-2, var(--secondary)); border-radius: var(--radius-lg); padding: var(--space-4); font-family: var(--font-code); font-size: var(--text-xs); }
.costbar { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); align-items: center; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--foreground); color: var(--background); }
.costbar .total b { color: var(--primary); font-size: var(--text-lg); } .costbar .muted { color: inherit; opacity: .6; }
.dialog-body .field > .label { margin-bottom: 2px; }
#mDlg { max-width: calc(100vw - 2 * var(--space-2)); max-height: calc(100dvh - 2 * var(--space-2)); } #mDlg .dialog-body input[type=file] { max-width: 100%; } #mDlg { --dialog-w: 44rem; } #mDlg.dialog-lg { --dialog-w: 62rem; } #mDlg.dialog-xl { --dialog-w: 80rem; }
#toast { position: fixed; bottom: 16px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.toast-lite { box-shadow: var(--shadow-lg); background: var(--popover, var(--card)); grid-template-columns: 1fr !important; }
.toast-lite > div:first-child { display: none; }

/* ---------- login ---------- */
#auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--background); }
#authBox { width: min(460px, 100%); background: var(--card); border-radius: var(--radius-card); padding: var(--space-6); box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.auth-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }

/* ---------- cronômetro (play / pause / stop) ---------- */
.timer { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.tm-clock { font-family: var(--font-code); font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tm-btns { display: flex; gap: var(--space-2); margin-left: auto; }
.tm { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: var(--radius-control); padding: 0 18px; min-height: 44px; font-weight: 600; font-size: var(--text-sm); cursor: pointer; color: #fff; font-family: inherit; }
.tm .icon { --step-icon: 20px; }
.tm-play { background: var(--success); } .tm-pause { background: var(--warning); } .tm-stop { background: var(--destructive); }
.tm:disabled { opacity: .3; cursor: not-allowed; }
.tm:not(:disabled):hover { filter: brightness(1.1); }
.tm-big .tm-clock { font-size: 2.4rem; width: 100%; text-align: center; }
.tm-big .tm-btns { width: 100%; margin: 0; }
.tm-big .tm { flex: 1; min-height: 60px; font-size: var(--text-base); }
.timer-box { border: 1px dashed var(--border); }

/* ---------- visão do técnico ---------- */
.tech-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.grp-title { font-weight: 600; margin: var(--space-4) 0 var(--space-2); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.tcard { margin-bottom: var(--space-3); cursor: pointer; border: 1px solid var(--border); }
.tcard.is-running { border-color: var(--success); box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent); }
.tm-active { border: 2px solid var(--success); }
@media (min-width: 1024px) { body[data-role="tecnico"] .main { max-width: 1240px; margin-inline: auto; } }

/* ---------- calendário ---------- */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-4); align-items: start; }
@media (max-width: 1100px) { .cal-layout { grid-template-columns: minmax(0, 1fr); } }
.cal { padding: var(--space-3); }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-head div { text-align: center; font-size: var(--text-xs); color: var(--muted-foreground); padding: var(--space-1); font-weight: 600; }
.cal-cell { min-height: 104px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; overflow: hidden; background: var(--card); }
.cal-cell.off { background: transparent; border-color: transparent; cursor: default; }
.cal-cell.is-today .cal-num { background: var(--primary); color: var(--primary-foreground); }
.cal-cell.is-sel { outline: 2px solid var(--primary); }
.cal-num { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 600; }
.ev { font-size: 11px; line-height: 1.25; padding: 2px 5px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-plan { background: var(--info-bg); color: var(--info-400, var(--info)); }
.ev-os { background: var(--warning-bg); color: var(--warning-400, var(--warning)); }
.ev-done { background: var(--success-bg); color: var(--success-400, var(--success)); }
.ev-late { background: var(--danger-bg); color: var(--danger-400, var(--destructive)); font-weight: 600; }
.cal-dots { display: none; gap: 3px; flex-wrap: wrap; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot-plan { background: var(--info); } .dot-os { background: var(--warning); } .dot-done { background: var(--success); }
.agenda { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: var(--space-2); }
@media (max-width: 700px) { .cal-cell { min-height: 54px; } .cal-cell .ev { display: none; } .cal-dots { display: flex; } }

/* ---------- impressão ---------- */
@media print {
  .no-print, #side, .bar, #backdrop { display: none !important; }
  .layout { display: block; } .main { padding: 0; } .print-only { display: block; }
  body.print-doc #app, body.print-doc #modal { display: none !important; }
  body.print-doc #printArea { display: block; }
  .card { box-shadow: none; } .table { min-width: 0; font-size: 10.5px; }
}
#printArea { display: none; }

/* ---------- ajustes mobile ---------- */
.tm-big .tm { min-width: 0; padding: 0 10px; }
.segmented { max-width: 100%; }
.segmented button { padding-inline: var(--space-3); white-space: nowrap; min-width: 0; }
@media (max-width: 520px) {
  .segmented-full button { padding-inline: var(--space-2); font-size: var(--text-xs); }
  .tm-big .tm span { font-size: var(--text-sm); }
  .tm-big .tm-clock { font-size: 2rem; }
}

/* ---------- cliente: cartão no hover, mapa ---------- */
.cli { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 600; border-bottom: 1px dotted var(--muted-foreground); }
.cli:hover { color: var(--primary-emphasis, var(--primary)); }
.cli .icon { --step-icon: 14px; opacity: .7; }
.hovercard { position: fixed; z-index: 3000; width: 300px; background: var(--popover, var(--card)); color: var(--popover-foreground, var(--foreground)); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; pointer-events: auto; }
.hc-map { position: relative; height: 128px; background-size: 256px 256px; background-position: center; background-color: var(--surface-2, var(--secondary)); }
.hc-pin { position: absolute; transform: translate(-50%, -100%); color: var(--destructive); filter: drop-shadow(0 1px 2px #0006); }
.hc-pin .icon { --step-icon: 28px; }
.hc-body { padding: var(--space-3); }
iframe.map { width: 100%; height: 340px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2, var(--secondary)); }
.row-active td { background: var(--info-bg) !important; }
.att-name { min-width: 0; overflow-wrap: anywhere; flex: 1 1 14rem; } .att { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }

/* ---------- tabelas responsivas (cartões no celular) ---------- */
@media (max-width: 760px) {
  .rtable { min-width: 0 !important; display: block; }
  .rtable thead { display: none; }
  .rtable tbody { display: block; }
  .rtable tr { display: block; border: 1px solid var(--border); border-radius: var(--radius-md); margin: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--card); }
  .rtable tr.risk-row { background: var(--danger-bg); }
  .rtable td { display: flex !important; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 5px 0 !important; border: 0 !important; text-align: right !important; background: transparent !important; border-radius: 0 !important; }
  .rtable td::before { content: attr(data-l); color: var(--muted-foreground); font-size: var(--text-xs); text-align: left; flex: none; max-width: 42%; }
  .rtable td:not([data-l])::before, .rtable td[data-l=""]::before { display: none; }
  .rtable td[colspan] { display: block !important; text-align: center !important; }
  .rtable td:empty { display: none !important; }
  .rtable td.right.nowrap { justify-content: flex-end; flex-wrap: wrap; white-space: normal; }
  .trunc { max-width: none; white-space: normal; }
  .card.flush { overflow: visible; background: transparent; box-shadow: none; border: 0; }
  .bar { gap: var(--space-2); }
  .bar .row.push { width: 100%; margin-left: 0; }
  .bar select { width: 100% !important; flex: 1 1 100%; }
  .row.push { margin-left: 0; }
  .cal-layout, .grid2, .fgrid3 { grid-template-columns: minmax(0, 1fr); }
  .cal-head div { font-size: 10px; padding: 2px 0; }
  .cal-grid, .cal-head { gap: 2px; }
  .cal-cell { padding: 2px; min-height: 48px; }
  .dialog { --dialog-margin: var(--space-2); padding: var(--space-4); }
  .hovercard { display: none; }
}

/* segmented com rolagem horizontal (não encolhe os botões) */
.segmented { overflow-x: auto; scrollbar-width: none; }
.segmented button { flex: none; min-width: auto; }

/* ---------- miniaturas, avatar ---------- */
.thumb { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2, var(--secondary)); cursor: zoom-in; flex: none; }
.thumb.lg { width: 72px; height: 72px; } .thumb.xl { width: 96px; height: 96px; }
.thumb.ph { display: inline-flex; align-items: center; justify-content: center; color: var(--muted-foreground); cursor: default; }
.thumb.missing { opacity: .35; }
.gallery { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.avatar-img { border-radius: 50%; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.av-md { width: 36px; height: 36px; font-size: 13px; } .av-xl { width: 112px; height: 112px; font-size: 38px; }
.av-ph { background: var(--primary); color: var(--primary-foreground); }
.user-line { cursor: pointer; flex-wrap: nowrap; }
.hidden-sm { display: inline; }
@media (max-width: 760px) { .hidden-sm { display: none; } }

/* ---------- timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 17px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.tl-day { margin: var(--space-4) 0 var(--space-2) 44px; font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted-foreground); }
.tl-item { display: flex; gap: var(--space-3); position: relative; padding: var(--space-2) 0; }
.tl-dot { width: 36px; height: 36px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--secondary); color: var(--secondary-foreground); border: 2px solid var(--card); z-index: 1; }
.tl-dot .icon { --step-icon: 18px; }
.tl-blu { background: var(--info-bg); color: var(--info-400, var(--info)); } .tl-grn { background: var(--success-bg); color: var(--success-400, var(--success)); }
.tl-amb { background: var(--warning-bg); color: var(--warning-400, var(--warning)); } .tl-red { background: var(--danger-bg); color: var(--danger-400, var(--destructive)); }
.tl-vio { background: var(--surface-2, var(--secondary)); }
.tl-body { flex: 1; min-width: 0; padding-bottom: var(--space-2); border-bottom: 1px dashed var(--border); }
.tcard-line { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }

/* ---------- chamados ---------- */
.thread { display: flex; flex-direction: column; gap: var(--space-2); max-height: 280px; overflow-y: auto; }
.msg { background: var(--surface-2, var(--secondary)); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); max-width: 88%; align-self: flex-start; }
.msg-cli { align-self: flex-end; background: var(--info-bg); }

/* ---------- QR code ---------- */
.qr-label { display: inline-flex; gap: var(--space-4); align-items: center; border: 2px solid var(--foreground); border-radius: var(--radius-lg); padding: var(--space-4); background: #fff; color: #000; }
.qr-img { width: 180px; height: 180px; flex: none; } .qr-img svg { width: 100%; height: 100%; display: block; }
.qr-info { font-size: 13px; max-width: 220px; } .qr-tag { font-size: 20px; font-weight: 800; } .qr-code { font-family: var(--font-code); font-size: 18px; letter-spacing: .12em; font-weight: 700; margin: 6px 0; border: 1px dashed #000; display: inline-block; padding: 2px 8px; }
.qr-sub { color: #444; font-size: 11px; }
.qr-small .qr-img { width: 110px; height: 110px; } .qr-small { padding: 8px; gap: 10px; } .qr-small .qr-tag { font-size: 15px; } .qr-small .qr-info { font-size: 11px; max-width: 150px; } .qr-small .qr-code { font-size: 13px; }
.qr-mini { width: 96px; cursor: pointer; background: #fff; padding: 6px; border-radius: var(--radius-md); border: 1px solid var(--border); color: #000; } .qr-mini svg { width: 100%; height: auto; display: block; }
.qr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .qr-sheet { padding: 12px; }
.scan-vid { width: 100%; max-height: 52vh; background: #000; border-radius: var(--radius-lg); object-fit: cover; }
.link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* perfil técnico: tabelas em cartões também em tablet / janelas médias (o técnico usa celular e tablet em campo) */
@media (max-width: 1279px) {
  body[data-role="tecnico"] .rtable { min-width: 0 !important; display: block; }
  body[data-role="tecnico"] .rtable thead { display: none; }
  body[data-role="tecnico"] .rtable tbody { display: block; }
  body[data-role="tecnico"] .rtable tr { display: block; border: 1px solid var(--border); border-radius: var(--radius-md); margin: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--card); }
  body[data-role="tecnico"] .rtable td { display: flex !important; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 5px 0 !important; border: 0 !important; text-align: right !important; }
  body[data-role="tecnico"] .rtable td::before { content: attr(data-l); color: var(--muted-foreground); font-size: var(--text-xs); text-align: left; flex: none; max-width: 42%; }
  body[data-role="tecnico"] .rtable td:not([data-l])::before, body[data-role="tecnico"] .rtable td[data-l=""]::before { display: none; }
  body[data-role="tecnico"] .rtable td[colspan] { display: block !important; text-align: center !important; }
  body[data-role="tecnico"] .rtable td:empty { display: none !important; }
  body[data-role="tecnico"] .rtable td.right.nowrap { justify-content: flex-end; flex-wrap: wrap; white-space: normal; }
  body[data-role="tecnico"] .trunc { max-width: none; white-space: normal; }
  body[data-role="tecnico"] .card.flush { overflow: visible; background: transparent; box-shadow: none; border: 0; }
}

/* ---------- dashboard personalizável ---------- */
.dgrid { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.dw { grid-column: span var(--w); min-width: 0; position: relative; display: flex; flex-direction: column; }
.dw > .card { flex: 1; min-width: 0; }
.dw-table > .card { max-height: 420px; overflow: auto; }
.dedit .dw { outline: 2px dashed var(--border); outline-offset: 2px; border-radius: var(--radius-lg); cursor: grab; }
.dedit .dw.dragging { opacity: .4; }
.dw-tools { position: absolute; top: 6px; right: 6px; z-index: 5; display: flex; gap: 4px; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 3px; box-shadow: var(--shadow-md, 0 2px 8px #0003); }
.dw-grip { display: inline-flex; padding: 0 4px; color: var(--muted-foreground); }
.dw-rs { position: absolute; right: 2px; bottom: 2px; width: 22px; height: 22px; cursor: nwse-resize; z-index: 5; touch-action: none; background: linear-gradient(135deg, transparent 50%, var(--primary) 50%); border-bottom-right-radius: var(--radius-md); }
.dw-resizing { user-select: none; cursor: nwse-resize; }
@media (max-width: 1279px) { .dw-kpi { grid-column: span 6; } .dw-chart, .dw-table { grid-column: span var(--wm); } }
@media (max-width: 900px) { .dw-kpi { grid-column: span 12; } .dw-chart, .dw-table { grid-column: span 24; } .dw-rs { display: none; } }
.dw-kpi .dw-tools { position: static; flex-wrap: wrap; justify-content: center; margin-bottom: 4px; padding: 2px; gap: 2px; }
.dw-kpi .dw-tools .btn { --btn-h: 24px; min-width: 24px; padding: 0 4px; }
.dw-kpi .dw-grip { display: none; }

/* grade personalizável */
.gtable { table-layout: fixed; min-width: 100%; }
.gtable td { overflow-wrap: anywhere; }
.gtable th { position: relative; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 14px; }
.gtable th.gsort { cursor: pointer; }
.gtable th.sorted.asc::after { content: " ▲"; font-size: 9px; } .gtable th.sorted.desc::after { content: " ▼"; font-size: 9px; }
.gr-rs { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: col-resize; touch-action: none; }
.gr-rs:hover, .dw-resizing .gr-rs { background: var(--primary); opacity: .5; }
@media (max-width: 760px) { .gtable { width: auto !important; min-width: 0 !important; } .gtable colgroup { display: none; } .gtable td { overflow: visible; } }
@media (max-width: 1279px) { body[data-role="tecnico"] .gtable { width: auto !important; min-width: 0 !important; } body[data-role="tecnico"] .gtable colgroup { display: none; } }

.tenant-logo { max-width: 100%; max-height: 44px; object-fit: contain; border-radius: 6px; background: #fff; margin-bottom: 6px; display: block; }
.side-mini .tenant-logo { max-width: 40px; }
.logo-box { width: 220px; height: 90px; border: 1px dashed var(--border); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: #fff; }
.logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- planos: KPIs, kanban, calendário e painel lateral ---------- */
.plan-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
button.pk { text-align: left; font: inherit; color: inherit; border: 1px solid transparent; }
.pk-on { box-shadow: 0 0 0 2px var(--primary); }
@media (max-width: 1100px) { .plan-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .plan-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.help { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); }
.help summary { cursor: pointer; font-weight: 600; }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); align-items: start; }
.kcol { background: var(--surface-2, var(--secondary)); border-radius: var(--radius-lg); padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); min-height: 120px; }
.kh { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; }
.kcard { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); cursor: pointer; }
.kcard:hover, .kcard:focus-visible { box-shadow: 0 0 0 2px var(--primary); outline: none; }
.kc-red { border-left-color: var(--destructive); } .kc-amb { border-left-color: var(--warning); }
.pbar { height: 6px; border-radius: 3px; background: var(--border); margin-top: 6px; overflow: hidden; } .pbar i { display: block; height: 100%; background: var(--primary); }
.pcal-h, .pcal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pcal-h div { text-align: center; font-size: var(--text-xs); color: var(--muted-foreground); padding: 2px 0; }
.pcal-c { min-height: 92px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px; display: flex; flex-direction: column; gap: 3px; background: var(--card); min-width: 0; }
.pcal-c.off { background: transparent; border-color: transparent; } .pcal-c.today { box-shadow: inset 0 0 0 2px var(--primary); }
.pcal-d { font-size: var(--text-xs); font-weight: 600; }
.pcal-e { border: 0; border-radius: 4px; padding: 2px 5px; font-size: 11px; text-align: left; cursor: pointer; background: var(--info-bg); color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcal-e.late { background: var(--danger-bg); } .pcal-e.proj { background: var(--surface-2, var(--secondary)); opacity: .8; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 2px 0 8px; } .lg-late { background: var(--danger-bg); } .lg-due { background: var(--info-bg); } .lg-proj { background: var(--secondary); }
@media (max-width: 760px) { .pcal-c { min-height: 56px; } .pcal-e { font-size: 9px; padding: 1px 3px; } }
#drawerBackdrop { display: none; position: fixed; inset: 0; background: var(--overlay, #0006); z-index: 900; }
#drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: var(--card); color: var(--foreground); border-left: 1px solid var(--border); box-shadow: -8px 0 24px #0003; z-index: 901; display: flex; flex-direction: column; transform: translateX(105%); transition: transform .2s; }
#drawerWrap.open #drawer { transform: none; } #drawerWrap.open #drawerBackdrop { display: block; }
.dr-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); } .dr-title { margin: 0; flex: 1; font-size: var(--text-lg); font-family: var(--font-heading); }
.dr-body { padding: var(--space-4); overflow-y: auto; flex: 1; } .dr-foot { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
.dr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
ul.plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.doc-pick { max-height: 180px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2); }
@media (min-width: 1700px) { body.dr-open .main { padding-right: calc(460px + var(--space-6)); transition: padding .2s; } #drawerBackdrop { background: transparent; pointer-events: none; } }
.help summary { display: flex; align-items: center; gap: 6px; }
.checks .row, .doc-pick .row { flex-wrap: nowrap; align-items: flex-start; } .checks input, .doc-pick input { margin-top: 3px; flex: none; }

.ws-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* construtor de gráficos */
.bd-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-4); }
@media (max-width: 900px) { .bd-grid { grid-template-columns: minmax(0, 1fr); } }
.bd-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-2); }
.bd-t { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); color: var(--foreground); cursor: pointer; font: inherit; font-size: var(--text-xs); }
.bd-t.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); } .bd-t:hover { background: var(--secondary); }
.bd-prev { position: sticky; top: 0; align-self: start; }

/* mapa de ativos */
.st-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.am-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-3); }
#amap { height: 560px; padding: 0; overflow: hidden; z-index: 1; }
.am-side { max-height: 560px; overflow-y: auto; } .am-cli { margin-bottom: var(--space-3); } .am-a { cursor: pointer; padding: 2px 0; gap: 6px; } .am-a:hover { text-decoration: underline; }
.mk { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px #0006; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.am-pop { min-width: 190px; color: #111; }
@media (max-width: 1000px) { .am-wrap { grid-template-columns: minmax(0, 1fr); } #amap { height: 420px; } .am-side { max-height: none; } }
.pl-area { border-left: 2px solid var(--border); padding-left: var(--space-3); margin: var(--space-2) 0 var(--space-2) var(--space-2); } .pl-h { font-weight: 600; margin-bottom: 6px; }
.pl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-2); }
.pl-tile { text-align: left; font: inherit; color: inherit; display: flex; flex-direction: column; gap: 4px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-left: 6px solid var(--border); border-radius: var(--radius-md); background: var(--card); cursor: pointer; }
.pl-tile:hover { box-shadow: 0 0 0 2px var(--primary); }

/* notificações */
.bell-btn { position: relative; } .bell-n { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--destructive); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.notif { display: flex; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: var(--space-2); cursor: pointer; background: var(--card); }
.notif.unread { border-left: 4px solid var(--primary); background: var(--info-bg); } .notif:hover { box-shadow: 0 0 0 2px var(--primary); }
.notif-i { color: var(--muted-foreground); display: flex; align-items: flex-start; } .notif-b { min-width: 0; }

/* ---------- filtros recolhíveis e KPIs compactos ---------- */
.flt-off .flt-body { display: none; }
.flt-sum { display: none; max-width: 52ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flt-off .flt-sum { display: inline; }
.plan-kpis .card.kpi { padding: var(--space-2) var(--space-3); }
.plan-kpis .kpi-v { margin: 2px 0; font-size: clamp(.9rem, calc(100cqw / (var(--len, 8) * .62)), 1.5rem); }
.plan-kpis .kpi > .muted.sm:last-child:not(:first-child) { display: none; }
.plan-kpis .kpi > .muted.sm:first-child:last-child { display: block; }
@media (min-width: 1600px) and (min-height: 900px) { .plan-kpis .card.kpi { padding: var(--space-3) var(--space-4); } .plan-kpis .kpi-v { font-size: clamp(.9rem, calc(100cqw / (var(--len, 8) * .62)), 1.9rem); } .plan-kpis .kpi > .muted.sm:last-child:not(:first-child) { display: block; } }
.alert-link { cursor: pointer; } .alert-link:hover, .alert-link:focus-visible { box-shadow: 0 0 0 2px var(--destructive); outline: none; }
tr.clickable { cursor: pointer; } tr.clickable:hover td { background: var(--secondary); }

/* árvore de localização recolhível */
details.lt > summary { cursor: pointer; padding: 3px 0; list-style: none; } details.lt > summary::-webkit-details-marker { display: none; }
details.lt > summary::before { content: '▸'; display: inline-block; width: 1.1em; color: var(--muted-foreground); } details.lt[open] > summary::before { content: '▾'; }
.lt-kids { margin-left: var(--space-3); padding-left: var(--space-3); border-left: 1px solid var(--border); } .lt-leaf { padding: 3px 0 3px 1.1em; }
details.lt .icon, .lt-leaf .icon { vertical-align: -3px; margin-right: 2px; } details.lt summary b { display: inline; }
details.lt .icon, .lt-leaf .icon { display: inline-block; width: 1.1em; height: 1.1em; }

/* ---------- celular / toque: alvos de toque de 44 px e cronômetro que cabe na janela ---------- */
@media (max-width: 760px), (pointer: coarse) {
  .sidebar-item { min-height: 44px; }
  .segmented button { min-height: 44px; padding-inline: var(--space-3); }
  .dialog-close, .dr-head .dialog-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .select, .input, .textarea { min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  label.row { min-height: 44px; }
  .notif { min-height: 56px; }
}
@media (max-width: 520px) {
  /* cronômetro dentro da janela da OS: os 3 botões dividem a largura em vez de estourar a borda */
  .timer:not(.tm-big) .tm-btns { width: 100%; margin-left: 0; }
  .timer:not(.tm-big) .tm { flex: 1 1 0; min-width: 0; padding: 0 8px; }
  .timer:not(.tm-big) .tm span { font-size: var(--text-sm); }
  .timer:not(.tm-big) .tm-clock { width: 100%; text-align: center; }
}