/* Estilos dos apps: HTML SZero, HTML Prestador, App Prestador, App Cliente, Configurações e Monitor. */
.app-root { background: var(--sz-bg); color: var(--sz-text); font-size: var(--sz-fs-md); position: relative; overflow: hidden; }
.mt { margin-top: 16px; }
.mt-s { margin-top: 10px; }
.icon-xs { width: 13px !important; height: 13px !important; vertical-align: -2px; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.lbl { display: block; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--sz-text-3); margin-bottom: 3px; }
.eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sz-blue); }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--sz-surface-3); color: var(--sz-text-2); font-size: 11.5px; font-weight: 700; }
.link-btn { border: 0; background: none; padding: 0; cursor: pointer; color: var(--sz-blue); }
.link-btn:hover { text-decoration: underline; }
.boot-app { flex: 1; display: grid; place-items: center; background: var(--sz-bg); }
.boot-app.dark { background: #232323; }
.nbadge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff3b30; color: #fff; font-size: 10.5px; font-weight: 700; animation: pop .35s var(--ease-spring); }

/* ======================= LOGIN ======================= */
.login { flex: 1; display: flex; min-height: 0; overflow: auto; background: var(--sz-bg); }
.login-main { flex: 1; display: grid; place-content: safe center; grid-auto-rows: max-content; padding: 32px; min-width: 0; }
.login-head { display: grid; gap: 10px; justify-items: start; margin-bottom: 22px; }
.login-head h1 { font-size: 24px; }
.login-form { display: grid; gap: 14px; width: min(380px, 100%); }
.login-form .input { height: 44px; font-size: 14px; }
.quick { display: grid; gap: 8px; padding-top: 14px; margin-top: 4px; border-top: 1px dashed var(--sz-border-2); }
.quick-l { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sz-text-3); }
.quick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.login-szero .login-brand {
  position: relative; overflow: hidden; width: min(44%, 520px); display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 48px;
  background: radial-gradient(600px 400px at 100% 0%, rgb(61 233 15 / 55%), transparent 60%), #232323; color: #fff;
}
.login-brand h2 { color: #fff; font-size: 34px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; margin-top: 18px; }
.login-brand p { color: #9aa3b2; max-width: 340px; }
.lb-arcs i { position: absolute; border-radius: 50%; border: 2px solid rgb(255 255 255 / 6%); }
.lb-arcs i:nth-child(1) { width: 520px; height: 520px; right: -260px; top: -260px; border-width: 70px; border-color: rgb(255 255 255 / 3%); border-top-color: var(--sz-blue); border-right-color: var(--sz-blue); transform: rotate(0deg); animation: arcIn 1s var(--ease) both; }
.lb-arcs i:nth-child(2) { width: 760px; height: 760px; right: -380px; top: -380px; }
.lb-arcs i:nth-child(3) { width: 300px; height: 300px; left: -150px; bottom: -150px; border-color: rgb(159 245 138 / 18%); }
@keyframes arcIn { from { transform: rotate(-90deg); opacity: 0; } to { transform: rotate(0); opacity: 1; } }
.lb-foot { position: absolute; left: 48px; bottom: 28px; display: flex; gap: 8px; align-items: center; font-size: 12px; color: #6b7382; }
.login-szero .login-head h1 { font-size: 26px; }
.login-web { background: radial-gradient(800px 500px at 100% 0%, var(--sz-blue-050), transparent 60%), radial-gradient(700px 500px at 0% 100%, var(--sz-ice), transparent 60%), var(--sz-bg); }
.login-web .login-main { width: 100%; }
.login-web .login-form { justify-self: center; }
.login-web .login-head { justify-items: center; text-align: center; }
.login-web .login-form { padding: 28px; background: var(--sz-surface); border-radius: 20px; border: 1px solid var(--sz-border); box-shadow: var(--sz-shadow-lg); position: relative; overflow: hidden; }
.login-web .login-form::after { content: ""; position: absolute; top: -36px; right: -36px; width: 72px; height: 72px; border-radius: 50%; border: 10px solid transparent; border-top-color: var(--sz-ice-500); border-right-color: var(--sz-ice-500); }
.login-phone { flex-direction: column; background: var(--sz-bg); }
.login-phone .login-main { display: block; padding: 0; place-content: normal; }
.login-hero { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 6px; padding: 92px 24px 38px; text-align: center; color: #fff;
  background: radial-gradient(420px 300px at 90% 0%, rgb(61 233 15 / 75%), transparent 65%), linear-gradient(180deg, #232323, #121722); border-radius: 0 0 34px 34px; }
.login-hero h1 { color: #fff; font-size: 26px; margin-top: 10px; }
.login-hero p { color: #9aa3b2; font-size: 14px; }
.login-hero::after { content: ""; position: absolute; width: 260px; height: 260px; right: -130px; bottom: -150px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 8%); }
.login-phone .login-form { padding: 24px 22px 40px; width: 100%; }
.login-phone .login-form .input { height: 48px; border-radius: 12px; }
.login-phone .btn-lg { height: 52px; border-radius: 14px; }
/* Primeiro acesso / Esqueci a senha (core/acesso-email.js) */
.login-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 13px; font-weight: 600; }
.login-links .link-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; font-weight: 600; }
.login-links .link-btn .icon { width: 15px; height: 15px; }
.login-acesso { animation: fadeUp .3s var(--ease) both; }
.la-head { display: grid; gap: 6px; }
.la-head h2 { display: flex; align-items: center; gap: 8px; font-size: 19px; line-height: 1.3; }
.la-head h2 .icon { width: 22px; height: 22px; color: var(--sz-blue); }
.la-head p { font-size: 13.5px; line-height: 1.55; }
.la-acoes { justify-content: flex-start; }
.la-acoes [data-voltar] { margin-left: auto; color: var(--sz-text-2); }
/* Keepit Gestão no celular (app.html): o painel da marca sai e o formulário ocupa a tela */
@container (max-width: 720px) { .login-szero .login-brand { display: none; } .login-szero .login-main { padding: 28px 16px; } }

/* ======================= HTML SZERO ======================= */
.app-szero { container-type: inline-size; }
.sz-shell { flex: 1; display: grid; grid-template-columns: 236px 1fr; min-width: 0; min-height: 0; }
.sz-side { display: flex; flex-direction: column; min-height: 0; background: #04422b; color: #c5cad3; border-right: 1px solid #0b5e38; }
.side-brand { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 18px; border-bottom: 1px solid #0b5e38; }
.side-mark { display: none; }
.side-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9ff58a; background: rgb(159 245 138 / 10%); padding: 2px 7px; border-radius: 6px; }
.side-nav { flex: 1; overflow: auto; padding: 10px 10px 16px; display: grid; align-content: start; gap: 12px; scrollbar-color: #2a2f37 transparent; }
.nav-sec { display: grid; gap: 2px; }
.nav-sec-t { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5d6573; padding: 6px 10px 4px; }
.nav-i { position: relative; display: flex; align-items: center; gap: 11px; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: #aab1bc; font-size: 13.5px; font-weight: 550; cursor: pointer; text-align: left; transition: background .15s, color .15s; }
.nav-i .icon { width: 18px; height: 18px; color: #6b7382; transition: color .15s; }
.nav-i:hover { background: #171a20; color: #fff; }
.nav-i:hover .icon { color: #c5cad3; }
.nav-i.active { background: linear-gradient(90deg, rgb(61 233 15 / 22%), rgb(61 233 15 / 6%)); color: #fff; }
.nav-i.active .icon { color: #7cb0ff; }
.nav-i.active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sz-blue); }
.nav-i.active::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; border: 2.5px solid transparent; border-top-color: var(--sz-blue); border-right-color: var(--sz-blue); }
.side-user { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid #0b5e38; }
.side-user .avatar { color: hsl(var(--h) 80% 82%); background: hsl(var(--h) 35% 22%); }
.su-t { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.su-t b { color: #fff; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-t small { color: #6b7382; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-out { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: #8a93a3; cursor: pointer; }
.side-out:hover { background: #1d2129; color: #fff; }
.sz-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sz-top { display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 24px; background: var(--sz-surface); border-bottom: 1px solid var(--sz-border); flex: none; }
.crumbs { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1; font-size: 13px; }
.crumb { border: 0; background: none; padding: 4px 6px; border-radius: 6px; color: var(--sz-text-3); cursor: pointer; font-weight: 550; white-space: nowrap; }
button.crumb:hover { background: var(--sz-surface-2); color: var(--sz-text); }
.crumb.cur { color: var(--sz-text); font-weight: 650; cursor: default; overflow: hidden; text-overflow: ellipsis; }
.crumb-sep { width: 14px; height: 14px; color: var(--sz-text-3); }
.sz-search { width: min(360px, 34%); }
.sz-search .input { background: var(--sz-surface-2); border-color: transparent; }
.sz-search .input:focus { background: var(--sz-surface); }
.sz-page { flex: 1; overflow: auto; padding: 24px 28px 40px; scroll-behavior: smooth; }
.sz-page > * { animation: fadeUp .3s var(--ease) both; }
.page-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-h p { margin-top: 4px; font-size: 13.5px; }
.page-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--sz-border); }
.filters > .input-ic { min-width: 220px; }
.form-card { max-width: 980px; }
.form-sec { display: flex; align-items: center; gap: 12px; padding-top: 6px; }
.form-sec h3 { font-size: 14.5px; }
.fs-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sz-blue-050); color: var(--sz-blue); font-weight: 750; font-size: 12.5px; flex: none; position: relative; }
.fs-n::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--sz-blue); border-right-color: var(--sz-blue); }
.rep { display: grid; gap: 10px; }
.rep-item { position: relative; padding: 14px 44px 14px 14px; border: 1px solid var(--sz-border); border-radius: var(--sz-radius); background: var(--sz-surface-2); animation: fadeUp .25s var(--ease) both; }
.rep-x { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; border: 0; background: transparent; color: var(--sz-text-3); cursor: pointer; }
.rep-x:hover { background: var(--sz-danger-050); color: var(--sz-danger); }
.access-box { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--sz-radius); background: linear-gradient(135deg, var(--sz-blue-050), var(--sz-ice)); border: 1px solid var(--sz-blue-100); }
.ab-ic, .hero-mini > .icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--sz-blue); color: var(--sz-on-blue); flex: none; padding: 10px; }
.hero-mini { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--sz-radius); background: var(--sz-surface-2); }

/* detalhe OS */
.os-detail { display: grid; gap: 16px; }
.os-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.os-head { padding: 20px 22px; display: grid; gap: 8px; }
.os-h1 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.os-code { font-family: var(--sz-mono); font-weight: 700; font-size: 13px; color: var(--sz-text-2); padding: 3px 8px; border-radius: 6px; background: var(--sz-surface-2); }
.os-head h1 { font-size: 22px; }
.os-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--sz-text-2); }
.os-meta span { display: inline-flex; gap: 6px; align-items: center; }
.os-meta .icon { width: 15px; height: 15px; color: var(--sz-text-3); }
.os-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; margin-top: 6px; border-top: 1px solid var(--sz-border); }
.rating-card .card-b { gap: 16px; }
.rate-big { font-size: 36px; font-weight: 800; letter-spacing: -.03em; }
.rate-big small { font-size: 15px; color: var(--sz-text-3); }
.trans { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px; border-radius: var(--sz-radius); background: var(--sz-surface-2); }
.trans .icon { color: var(--sz-text-3); }
.pick-list { display: grid; gap: 8px; max-height: 340px; overflow: auto; padding: 2px; }
.pick { display: block; cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick-b { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1.5px solid var(--sz-border); border-radius: 12px; background: var(--sz-surface); transition: border-color .15s, background .15s, box-shadow .15s; }
.pick-b > .icon { color: var(--sz-text-3); }
.pick-b small { display: block; font-size: 12px; }
.pick:hover .pick-b { border-color: var(--sz-border-2); }
.pick input:checked + .pick-b { border-color: var(--sz-blue); background: var(--sz-blue-050); box-shadow: var(--sz-ring); }
.pick input:checked + .pick-b > .icon { color: var(--sz-blue); }
.pick-r { display: grid; justify-items: end; gap: 2px; }
.flow-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--sz-surface-2); font-size: 12.5px; color: var(--sz-text-2); }
.flow-steps > .icon { color: var(--sz-blue); }
.flow-steps .icon { width: 14px; height: 14px; }
.fin-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* entidade (cliente/prestador) */
.ent-head { display: flex; align-items: center; gap: 16px; padding: 20px 22px; flex-wrap: wrap; margin-bottom: 14px; }
.ent-head h1 { font-size: 22px; }
.ent-stat { display: grid; justify-items: center; gap: 2px; padding: 0 16px; border-left: 1px solid var(--sz-border); text-align: center; }
.ent-stat .num { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.ent-stat small { font-size: 11.5px; color: var(--sz-text-3); line-height: 1.3; }
.tab-body { padding-top: 16px; }
.addr { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 10px; background: var(--sz-surface-2); }
.addr-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--sz-blue-050); color: var(--sz-blue); flex: none; }
.addr-ic .icon { width: 15px; height: 15px; }
.opp-mini { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--sz-border); }

/* categorias */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cat-subs { list-style: none; margin: 0; padding: 8px 10px; display: grid; gap: 2px; min-height: 60px; }
.cat-subs li { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: 8px; font-size: 13px; }
.cat-subs li:hover { background: var(--sz-surface-2); }
.cat-act { display: flex; opacity: 0; transition: opacity .15s; }
.cat-subs li:hover .cat-act { opacity: 1; }
.cat-act .btn-icon-ghost { width: 26px; height: 26px; }

/* permissões */
.perm-table th.c, .perm-table td.c { text-align: center; }
.perm-h { display: grid; justify-items: center; gap: 2px; }
.perm-h small { font-size: 10.5px; color: var(--sz-text-3); letter-spacing: 0; font-weight: 600; }
.perm-grp td { background: var(--sz-surface-2); font-weight: 700; font-size: 12px; color: var(--sz-text-2); padding: 7px 14px; }
.perm-table td { padding: 7px 14px; }
.perm-ck { display: inline-grid; place-items: center; cursor: pointer; }
.perm-ck input { position: absolute; opacity: 0; }
.perm-ck i { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--sz-border-2); background: var(--sz-surface); display: grid; place-items: center; transition: all .15s; }
.perm-ck input:checked + i { background: var(--sz-blue); border-color: var(--sz-blue); }
.perm-ck input:checked + i::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.perm-ck input:disabled + i { opacity: .6; }
.perm-table tfoot td { background: var(--sz-surface-2); position: sticky; bottom: 0; }

/* kanban CRM */
.kanban { display: grid; grid-template-columns: repeat(6, minmax(210px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.kcol { display: flex; flex-direction: column; min-height: 320px; border-radius: 14px; background: var(--sz-surface-2); border: 1.5px dashed transparent; transition: border-color .15s, background .15s; }
.kanban.is-dragging .kcol { border-color: var(--sz-border-2); }
.kcol.over { border-color: var(--c) !important; background: color-mix(in srgb, var(--c) 8%, var(--sz-surface-2)); }
.kcol-h { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; font-size: 13px; }
.kcol-h > i { width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid var(--c); border-left-color: transparent; border-bottom-color: transparent; transform: rotate(0deg); }
.kcol-h b { flex: 1; }
.kval { font-size: 11.5px; color: var(--sz-text-3); font-weight: 600; }
.kcol-b { display: grid; gap: 8px; padding: 4px 10px 12px; }
.kcard { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: var(--sz-surface); border: 1px solid var(--sz-border); box-shadow: var(--sz-shadow-sm); cursor: grab; transition: transform .15s, box-shadow .15s; border-top: 3px solid var(--c); animation: fadeUp .3s var(--ease) both; }
.kcard:hover { transform: translateY(-2px); box-shadow: var(--sz-shadow); }
.kcard.dragging { opacity: .45; transform: rotate(2deg); }
.kc-t { font-weight: 650; font-size: 13.5px; line-height: 1.3; }
.kc-s { font-size: 12px; color: var(--sz-text-2); }
.kc-f { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.kc-f b { margin-right: auto; }
.kempty { padding: 18px; text-align: center; font-size: 12px; color: var(--sz-text-3); border: 1.5px dashed var(--sz-border-2); border-radius: 10px; }

/* gráfico financeiro */
.chart { display: grid; gap: 8px; }
.legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--sz-text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.lg-rec { background: var(--sz-blue); } .lg-pag { background: var(--sz-ice-500); }
.g-svg { width: 100%; height: auto; max-height: 280px; display: block; }
.g-line { stroke: var(--sz-border); stroke-width: 1; }
.g-ax { fill: var(--sz-text-3); font-size: 11px; font-family: var(--sz-font); font-variant-numeric: tabular-nums; text-transform: capitalize; }
.g-rec { fill: var(--sz-blue); transform-box: fill-box; transform-origin: bottom; animation: growY .6s var(--ease) both; }
.g-pag { fill: var(--sz-ice-500); transform-box: fill-box; transform-origin: bottom; animation: growY .6s var(--ease) both; }
.g-col:hover rect { filter: brightness(1.1); }
@keyframes growY { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@container (max-width: 1080px) {
  .sz-shell { grid-template-columns: 64px 1fr; }
  .sz-side .side-logo, .sz-side .side-tag, .nav-sec-t, .nav-i span, .su-t, .side-user .avatar { display: none; }
  .side-mark { display: block; }
  .side-brand { justify-content: center; padding: 0; }
  .nav-i { justify-content: center; padding: 0; }
  .nav-i.active::after { display: none; }
  .side-user { justify-content: center; padding: 10px 0; }
  .os-grid { grid-template-columns: minmax(0, 1fr) 300px; }
}
@container (max-width: 860px) {
  .os-grid, .grid-2, .grid-3, .fin-split { grid-template-columns: 1fr; }
  .sz-search { display: none; }
  .sz-page { padding: 16px; }
  .form-grid-3 { grid-template-columns: 1fr 1fr; }
  .ent-stat { border-left: 0; }
}
@container (max-width: 560px) {
  .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
  .sz-top .btn-primary { display: none; }
}

/* ======================= HTML PRESTADOR (portal) ======================= */
.app-portal { container-type: inline-size; }
.pt-shell { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--sz-bg); }
.pt-top { display: flex; align-items: center; gap: 18px; height: 62px; padding: 0 22px; background: var(--sz-surface); border-bottom: 1px solid var(--sz-border); flex: none; }
:root[data-theme="dark"] .pt-brand .sz-logo { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pt-brand .sz-logo, :root:not([data-theme="light"]) .login-web .login-head .sz-logo, :root:not([data-theme="light"]) .tool-head .sz-logo { filter: invert(1) hue-rotate(180deg); } }
:root[data-theme="dark"] .login-web .login-head .sz-logo, :root[data-theme="dark"] .tool-head .sz-logo { filter: invert(1) hue-rotate(180deg); }
.pt-brand { display: flex; align-items: center; gap: 10px; }
.pt-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sz-ice-700); background: var(--sz-ice); padding: 3px 8px; border-radius: 6px; }
.pt-nav { display: flex; gap: 4px; flex: 1; }
.pt-nav button { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--sz-text-2); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .15s; }
.pt-nav button .icon { width: 17px; height: 17px; }
.pt-nav button:hover { background: var(--sz-surface-2); color: var(--sz-text); }
.pt-nav button.active { color: var(--sz-text); background: var(--sz-surface-2); }
.pt-nav button.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -12px; height: 3px; border-radius: 3px 3px 0 0; background: var(--sz-ice-500); }
.pt-user { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.pt-user > div { display: grid; line-height: 1.2; }
.pt-user small { color: var(--sz-text-3); font-size: 11.5px; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sz-success); padding: 3px 8px; border-radius: 999px; background: var(--sz-success-050); margin-right: 6px; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }
.pt-main { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.pt-page { padding: 24px 28px 40px; }
.pt-hello { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 26px; background: linear-gradient(120deg, var(--sz-surface) 40%, var(--sz-ice)); }
.pt-hello h1 { font-size: 24px; margin: 4px 0; }
.pt-rate { display: grid; justify-items: center; gap: 2px; padding-right: 30px; }
.pt-rate b { font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.pt-rate small { font-size: 11.5px; color: var(--sz-text-3); }
.pt-list-rows { display: grid; gap: 0; }
.pt-list-rows .os-row { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
.os-row { display: grid; gap: 5px; width: 100%; text-align: left; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--sz-border); background: var(--sz-surface); cursor: pointer; transition: background .15s; position: relative; font-size: 13px; }
.os-row:hover { background: var(--sz-surface-2); }
.os-row.active { background: var(--sz-blue-050); }
.os-row.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sz-blue); }
.os-row.is-new { background: linear-gradient(90deg, var(--sz-blue-050), var(--sz-surface) 70%); animation: newRow 1.2s var(--ease); }
@keyframes newRow { 0% { box-shadow: inset 0 0 0 2px var(--sz-blue); } 100% { box-shadow: none; } }
.osr-top { display: flex; align-items: center; gap: 8px; }
.osr-time { margin-left: auto; font-size: 11.5px; color: var(--sz-text-3); }
.osr-t { font-weight: 650; font-size: 13.5px; color: var(--sz-text); }
.osr-b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--sz-text-2); }
.osr-tec.none { color: #c25a00; font-weight: 600; }
.pt-md { flex: 1; min-height: 0; display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; padding: 16px; }
.pt-mlist { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.pt-ml-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; border-bottom: 1px solid var(--sz-border); }
.pt-ml-b { flex: 1; overflow: auto; }
.pt-mdet { min-height: 0; overflow: auto; }
.pt-empty { min-height: 300px; display: grid; place-items: center; }
.pt-dcard { overflow: hidden; }
.pt-dh { padding: 20px 22px; display: grid; gap: 8px; border-bottom: 1px solid var(--sz-border); background: linear-gradient(180deg, var(--sz-surface), var(--sz-surface-2)); }
.pt-dh h2 { font-size: 20px; }
.pt-dact { padding-top: 6px; }
.pt-dgrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; padding: 20px 22px; }
.pt-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.info-i { display: flex; gap: 10px; padding: 12px; border-radius: 12px; background: var(--sz-surface-2); font-size: 13px; }
.info-i > .icon { width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: var(--sz-surface); color: var(--sz-ice-700); flex: none; }
.info-i > div { display: grid; gap: 2px; min-width: 0; }
.info-i a { font-size: 12.5px; }
.reg-form { display: grid; gap: 8px; padding: 14px; border-radius: 12px; border: 1px solid var(--sz-border); }
.reg-form .seg { flex-wrap: wrap; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.team-card { padding: 16px; display: grid; gap: 14px; transition: transform .2s, box-shadow .2s; }
.team-card:hover { transform: translateY(-2px); box-shadow: var(--sz-shadow-lg); }
.team-card.off { opacity: .65; }
@container (max-width: 1000px) {
  .pt-md { grid-template-columns: 300px minmax(0, 1fr); }
  .pt-dgrid { grid-template-columns: 1fr; }
  .pt-user > div, .live { display: none; }
}
@container (max-width: 760px) {
  .pt-md { grid-template-columns: 1fr; }
  .pt-nav button { padding: 0 8px; font-size: 0; gap: 0; }
  .pt-nav button .nbadge { font-size: 10.5px; }
  .pt-info { grid-template-columns: 1fr; }
  .pt-page { padding: 16px; }
  .pt-hello { flex-direction: column; align-items: flex-start; }
}

/* ======================= APPS DE CELULAR ======================= */
.mob { font-size: 14px; }
.ph-app { flex: 1; display: flex; flex-direction: column; min-height: 0; height: 100%; }
.ph-view { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.ph-head { flex: none; position: relative; z-index: 2; }
.ph-head.plain { display: flex; align-items: center; gap: 10px; padding: 56px 16px 12px; background: color-mix(in srgb, var(--sz-bg) 85%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--sz-border); }
.ph-head.plain h1 { font-size: 17px; font-weight: 700; }
.ph-head.hero { padding: 58px 20px 22px; color: #fff; overflow: hidden; border-radius: 0 0 28px 28px;
  background: radial-gradient(300px 220px at 100% 0%, rgb(61 233 15 / 80%), transparent 70%), linear-gradient(180deg, #232323 0%, #151b26 100%); }
.ph-head.hero::after { content: ""; position: absolute; width: 200px; height: 200px; right: -100px; top: -100px; border-radius: 50%; border: 26px solid transparent; border-bottom-color: rgb(255 255 255 / 6%); border-left-color: rgb(255 255 255 / 6%); }
.mob-tec .ph-head.hero { background: radial-gradient(300px 220px at 100% 0%, rgb(18 161 80 / 55%), transparent 70%), radial-gradient(260px 200px at 0% 100%, rgb(61 233 15 / 45%), transparent 70%), linear-gradient(180deg, #232323 0%, #121a1a 100%); }
.ph-head.hero h1 { color: #fff; font-size: 24px; }
.ph-head.hero p { color: #9aa3b2; font-size: 13px; }
.ph-hero-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ph-hero-top .avatar { box-shadow: 0 0 0 3px rgb(255 255 255 / 12%); }
.ph-date { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9ff58a; }
.ph-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.ph-stats div { display: grid; padding: 10px 12px; border-radius: 14px; background: rgb(255 255 255 / 7%); border: 1px solid rgb(255 255 255 / 8%); }
.ph-stats b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ph-stats span { font-size: 11px; color: #9aa3b2; }
.center-hero { display: grid; justify-items: center; text-align: center; gap: 4px; padding-top: 70px !important; }
.avatar.xl { width: 76px; height: 76px; font-size: 26px; box-shadow: 0 0 0 4px rgb(255 255 255 / 12%); margin-bottom: 8px; }
.ph-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: none; }
.ph-body::-webkit-scrollbar { display: none; }
.ph-body > * { flex-shrink: 0; }
.ph-body.has-actions { padding-bottom: 150px; }
.ph-back { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; border: 0; background: var(--sz-surface-2); color: var(--sz-text); cursor: pointer; flex: none; }
.ph-nav { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px 10px 26px; background: color-mix(in srgb, var(--sz-surface) 92%, transparent); backdrop-filter: blur(18px); border-top: 1px solid var(--sz-border); position: relative; z-index: 3; }
.ph-nav button { position: relative; display: grid; justify-items: center; gap: 3px; padding: 6px 0; border: 0; background: transparent; color: var(--sz-text-3); font-size: 11px; font-weight: 600; cursor: pointer; transition: color .15s; }
.ph-nav button .icon { width: 23px; height: 23px; transition: transform .2s var(--ease-spring); }
.ph-nav button.active { color: var(--sz-blue); }
.ph-nav button.active .icon { transform: translateY(-1px) scale(1.06); }
.ph-nav button.active::before { content: ""; position: absolute; top: -9px; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--sz-blue); }
.ph-nav .nbadge { position: absolute; top: 2px; left: calc(50% + 6px); }
.fab-wrap { margin-top: -26px; }
.fab { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; background: var(--sz-blue); color: var(--sz-on-blue); box-shadow: 0 10px 22px -6px rgb(61 233 15 / 60%); position: relative; overflow: hidden; }
.fab::after { content: ""; position: absolute; top: -16px; right: -16px; width: 32px; height: 32px; border-radius: 50%; border: 6px solid transparent; border-bottom-color: rgb(255 255 255 / 35%); border-left-color: rgb(255 255 255 / 35%); }
.fab .icon { width: 26px !important; height: 26px !important; }
.ph-nav button.fab-wrap.active::before { display: none; }
.seg-block { display: flex; width: 100%; }
.seg-block > * { flex: 1; justify-content: center; }
.seg-block label span { display: block; text-align: center; }
.ph-cards { display: grid; gap: 10px; }
.m-os { display: grid; gap: 6px; width: 100%; text-align: left; padding: 14px; border-radius: 18px; border: 1px solid var(--sz-border); background: var(--sz-surface); box-shadow: var(--sz-shadow-sm); cursor: pointer; transition: transform .15s, box-shadow .15s; animation: fadeUp .3s var(--ease) both; }
.m-os:active { transform: scale(.985); }
.m-os.is-new { border-color: var(--sz-blue); box-shadow: 0 0 0 3px rgb(61 233 15 / 14%); }
.m-os-top { display: flex; align-items: center; gap: 8px; }
.m-os-t { font-size: 15px; line-height: 1.3; color: var(--sz-text); }
.m-os-c { font-size: 12.5px; color: var(--sz-text-2); }
.m-os-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; margin-top: 2px; }
.m-card { padding: 16px; border-radius: 20px; background: var(--sz-surface); border: 1px solid var(--sz-border); display: grid; gap: 10px; }
.m-card h3 { font-size: 15px; }
/* "Quem vai te atender" — destaque da foto do técnico no App Cliente */
.tec-card { background: linear-gradient(135deg, color-mix(in srgb, var(--sz-blue) 10%, var(--sz-surface)), var(--sz-surface)); border-color: color-mix(in srgb, var(--sz-blue) 24%, var(--sz-border)); }
.tec-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sz-blue); }
.tec-eyebrow svg { width: 14px; height: 14px; }
.tec-main { display: flex; align-items: center; gap: 14px; }
.tec-main .avatar.tec-foto { width: 68px; height: 68px; font-size: 24px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sz-blue) 22%, transparent); }
.tec-info { display: grid; gap: 2px; min-width: 0; }
.tec-info b { font-size: 16px; }
.tec-tel { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--sz-blue); font-weight: 600; margin-top: 2px; }
.tec-linha { display: flex; align-items: center; gap: 8px; }
.m-hero h2 { font-size: 19px; }
.m-list { list-style: none; margin: 0; padding: 0; display: grid; }
.m-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--sz-border); font-size: 13.5px; }
.m-list li:last-child { border-bottom: 0; }
.m-list .ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--sz-surface-2); color: var(--sz-text-2); flex: none; }
.m-list .ico .icon { width: 17px; height: 17px; }
.round-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sz-success); color: #fff !important; flex: none; box-shadow: 0 6px 14px -6px rgb(18 161 80 / 60%); }
.round-btn.blue { background: var(--sz-blue); box-shadow: 0 6px 14px -6px rgb(61 233 15 / 60%); }
.round-btn:hover { text-decoration: none; filter: brightness(1.08); }
.chip-r { cursor: pointer; }
.chip-r input { position: absolute; opacity: 0; }
.chip-r span { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--sz-border-2); font-size: 12.5px; font-weight: 600; color: var(--sz-text-2); background: var(--sz-surface); transition: all .15s; }
.chip-r input:checked + span { background: var(--sz-ink); border-color: var(--sz-ink); color: var(--sz-bg); }
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-actions { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; gap: 8px; padding: 14px 16px 16px; background: linear-gradient(180deg, transparent, var(--sz-bg) 30%); }
.ph-actions .btn-lg { height: 54px; border-radius: 16px; font-size: 15.5px; }
.dot-on { width: 9px; height: 9px; border-radius: 50%; background: var(--sz-success); box-shadow: 0 0 0 4px var(--sz-success-050); }
.mob .timeline::before { left: 13px; }
.mob .tl-item { grid-template-columns: 28px 1fr; gap: 10px; }
.mob .tl-dot { width: 28px; height: 28px; }
.mob .tl-dot .icon { width: 13px; height: 13px; }
.mob .toast-stack { pointer-events: none; }
/* app cliente */
.cli-hero { background: radial-gradient(320px 240px at 100% 0%, rgb(124 77 255 / 55%), transparent 70%), radial-gradient(300px 220px at 0% 100%, rgb(61 233 15 / 55%), transparent 70%), linear-gradient(180deg, #232323, #141826) !important; }
.cta { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 18px; padding: 12px 14px; border-radius: 18px; border: 1px solid rgb(255 255 255 / 14%); background: rgb(255 255 255 / 9%); color: #fff; text-align: left; cursor: pointer; transition: background .15s, transform .15s; }
.cta:hover { background: rgb(255 255 255 / 14%); }
.cta:active { transform: scale(.98); }
.cta > span:nth-child(2) { flex: 1; display: grid; }
.cta small { color: #9aa3b2; font-size: 12px; }
.cta-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--sz-blue); }
.sec-t { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.sec-t h3 { font-size: 15px; }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 4px; }
.step { display: grid; gap: 6px; font-size: 10px; color: var(--sz-text-3); font-weight: 600; line-height: 1.15; }
.step i { height: 5px; border-radius: 3px; background: var(--sz-surface-3); position: relative; overflow: hidden; }
.step.done i { background: var(--sz-blue); }
.step.cur i { background: var(--sz-blue-100); }
.step.cur i::after { content: ""; position: absolute; inset: 0; width: 60%; background: var(--sz-blue); border-radius: 3px; animation: stepPulse 1.6s ease-in-out infinite; }
.step.done, .step.cur { color: var(--sz-text); }
@keyframes stepPulse { 50% { width: 100%; } }
.steps.mini { gap: 3px; }
.steps.mini .step i { height: 4px; }
.steps.cancel { display: block; font-size: 12px; color: var(--sz-danger); font-weight: 600; }
.rate-cta { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #b87300; background: var(--sz-warning-050); padding: 3px 9px; border-radius: 999px; }
.rate-cta .star, .m-os-f .star { width: 13px; height: 13px; }
.status-hero { position: relative; color: #fff; border: 0; background: linear-gradient(140deg, #3de90f, #0a45a8); gap: 6px; }
.status-hero h2 { color: #fff; font-size: 24px; }
.status-hero p { color: rgb(255 255 255 / 80%); font-size: 13px; }
.status-hero .sh-l { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: rgb(255 255 255 / 65%); }
.status-hero.arc-corner::after { border-top-color: rgb(255 255 255 / 70%); border-right-color: rgb(255 255 255 / 70%); }
.status-hero .step { color: rgb(255 255 255 / 55%); }
.status-hero .step i { background: rgb(255 255 255 / 20%); }
.status-hero .step.done i, .status-hero .step.cur i::after { background: #fff; }
.status-hero .step.cur i { background: rgb(255 255 255 / 35%); }
.status-hero .step.done, .status-hero .step.cur { color: #fff; }
.status-hero.st-resolvido, .status-hero.st-encerrado { background: linear-gradient(140deg, #12a150, #0b7a3c); }
.status-hero.st-cancelado { background: linear-gradient(140deg, #6b7382, #3a404b); }
.status-hero.st-aguardando_cliente { background: linear-gradient(140deg, #f07a1a, #c25a00); }
.status-hero.st-novo, .status-hero.st-em_triagem { background: linear-gradient(140deg, #7c4dff, #5530c9); }
.rate-card { border: 1.5px solid #f5c25b; background: linear-gradient(180deg, color-mix(in srgb, #f5a524 14%, var(--sz-surface)), var(--sz-surface) 60%); text-align: center; justify-items: center; animation: fadeUp .4s var(--ease) both; }
.rate-stars { display: flex; gap: 6px; }
.rate-stars button { border: 0; background: none; padding: 2px; cursor: pointer; }
.star.big { width: 38px; height: 38px; transition: transform .2s var(--ease-spring); }
.rate-stars button:hover .star { transform: scale(1.12); }
.rate-stars button.pop .star { animation: pop .35s var(--ease-spring); }
.rate-lbl { font-weight: 700; font-size: 13px; color: #b87300; min-height: 18px; }
.rate-card .textarea, .rate-card .btn { width: 100%; }
.rated .star { width: 20px; height: 20px; }
.composer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; gap: 8px; padding: 10px 12px 12px; background: color-mix(in srgb, var(--sz-surface) 94%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--sz-border); }
.composer .input { height: 44px; border-radius: 22px; padding: 0 16px; background: var(--sz-surface-2); border-color: transparent; }
.composer .send { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--sz-blue); color: var(--sz-on-blue); cursor: pointer; flex: none; position: relative; }
.composer .send.busy { color: transparent; }
.composer .send.busy::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgb(255 255 255 / 35%); border-top-color: #fff; animation: spin .7s linear infinite; }
.ph-spacer { height: 60px; flex: none; }

/* ======================= FERRAMENTAS (Config / Monitor) ======================= */
.tool { background: var(--sz-bg); }
.tool-page { flex: 1; overflow: auto; padding: 28px 32px 40px; }
.tool-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.tool-head .sz-logo { padding-right: 18px; border-right: 1px solid var(--sz-border); }
.cfg-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; max-width: 1200px; }
.conn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--sz-surface-2); color: var(--sz-text-3); }
.conn i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.conn.ok { background: var(--sz-success-050); color: var(--sz-success); }
.conn.off { background: var(--sz-danger-050); color: var(--sz-danger); }
.range-row { display: flex; align-items: center; gap: 14px; }
.range-row input { flex: 1; accent-color: var(--sz-blue); }
.range-row b { min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.test-out { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--sz-surface-2); font-size: 13px; }
.test-out.ok { background: var(--sz-success-050); }
.test-out.ok > .icon { color: var(--sz-success); }
.test-out.err { background: var(--sz-danger-050); }
.test-out.err > .icon { color: var(--sz-danger); }
.theme-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tp { display: grid; justify-items: center; gap: 6px; padding: 10px 10px 12px; border-radius: 14px; border: 1.5px solid var(--sz-border); background: var(--sz-surface); cursor: pointer; color: var(--sz-text-2); transition: all .15s; }
.tp:hover { border-color: var(--sz-border-2); }
.tp.active { border-color: var(--sz-blue); box-shadow: var(--sz-ring); color: var(--sz-text); }
.tp b { font-size: 12.5px; }
.tp .icon { width: 16px; height: 16px; }
.tp-prev { position: relative; width: 100%; height: 54px; border-radius: 9px; overflow: hidden; border: 1px solid var(--sz-border); }
.tp-prev i:first-child { position: absolute; left: 8px; top: 8px; right: 30%; height: 8px; border-radius: 4px; }
.tp-prev i:last-child { position: absolute; right: -14px; top: -14px; width: 30px; height: 30px; border-radius: 50%; border: 6px solid transparent; border-bottom-color: #3de90f; border-left-color: #3de90f; transform: rotate(180deg); }
.tp-claro { background: #f4f6f9; } .tp-claro i:first-child { background: #d3d8df; }
.tp-escuro { background: #232323; } .tp-escuro i:first-child { background: #333a45; }
.tp-sistema { background: linear-gradient(110deg, #f4f6f9 50%, #232323 50%); } .tp-sistema i:first-child { background: #8a909c; }
.sess-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.sess-list li { display: grid; grid-template-columns: 10px 130px 1fr; gap: 10px; align-items: center; }
.sess-list .sdot { width: 8px; height: 8px; border-radius: 50%; background: var(--sz-border-2); }
.sess-list .sdot.on { background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }

.mon-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; padding: 14px; }
.mon-log { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.mon-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--sz-border); }
.mon-title { display: flex; align-items: center; gap: 8px; margin-right: 6px; }
.mon-title h3 { font-size: 14.5px; }
.rec { position: relative; width: 12px; height: 12px; }
.rec i { position: absolute; inset: 2px; border-radius: 50%; background: #ef4444; animation: blink 1.4s infinite; }
.rec.paused i { background: var(--sz-text-3); animation: none; }
.mon-apps button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; }
.mon-apps i { width: 8px; height: 8px; border-radius: 50%; }
.mon-q { width: 180px; }
.mon-q .input { height: 30px; font-size: 12.5px; }
.mon-head, .mline { display: grid; grid-template-columns: 96px 128px 64px minmax(0, 1fr) 62px 72px; gap: 10px; align-items: center; padding: 0 14px; }
.mon-head { height: 32px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sz-text-3); background: var(--sz-surface-2); border-bottom: 1px solid var(--sz-border); flex: none; }
.mon-rows { flex: 1; overflow: auto; font-size: 12.5px; }
.mrow { border-bottom: 1px solid var(--sz-border); cursor: pointer; }
.mrow.new { animation: rowIn .5s var(--ease); }
@keyframes rowIn { from { background: var(--sz-blue-050); } to { background: transparent; } }
.mrow:hover { background: var(--sz-surface-2); }
.mrow.open { background: var(--sz-surface-2); }
.mrow.is-poll { opacity: .6; }
.mline { height: 36px; }
.mline .num { font-family: var(--sz-mono); font-size: 11.5px; color: var(--sz-text-3); }
.mapp { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapp i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mm { font-family: var(--sz-mono); font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 5px; text-align: center; }
.m-get { color: #0f7fa3; background: var(--sz-ice); } .m-post { color: var(--sz-success); background: var(--sz-success-050); }
.m-patch { color: #b87300; background: var(--sz-warning-050); } .m-delete { color: var(--sz-danger); background: var(--sz-danger-050); }
.mroute { font-family: var(--sz-mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mroute small { font-family: var(--sz-font); font-size: 10px; color: var(--sz-text-3); border: 1px solid var(--sz-border-2); padding: 0 4px; border-radius: 4px; }
.mst { font-family: var(--sz-mono); font-weight: 800; font-size: 12px; }
.mst.ok { color: var(--sz-success); } .mst.warn { color: #c25a00; } .mst.err { color: var(--sz-danger); } .mst.pend { color: var(--sz-text-3); }
.mst .spin { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--sz-border-2); border-top-color: var(--sz-blue); animation: spin .7s linear infinite; }
.mline .r { text-align: right; }
.mdet { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 14px 14px; cursor: default; }
.mdet h5 { margin: 0 0 6px; font-size: 11.5px; color: var(--sz-text-2); font-family: var(--sz-mono); }
.mdet pre { margin: 0; max-height: 300px; overflow: auto; padding: 10px 12px; border-radius: 10px; background: #04422b; color: #c5cad3; font-family: var(--sz-mono); font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.j-k { color: #7cb0ff; } .j-s { color: #8fd18f; } .j-n { color: #f5c25b; }
.mon-empty { display: grid; justify-items: center; gap: 6px; padding: 60px 20px; color: var(--sz-text-3); text-align: center; }
.mon-empty .icon { width: 36px; height: 36px; color: var(--sz-blue); }
.mon-empty b { color: var(--sz-text); }
.mon-rot { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.rot-prog { padding: 14px 18px 4px; display: grid; gap: 8px; }
.rp-top { display: flex; align-items: baseline; gap: 8px; }
.rp-top b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.rp-top span { font-size: 12.5px; color: var(--sz-text-2); }
.rp-bar { height: 8px; border-radius: 4px; background: var(--sz-surface-3); overflow: hidden; }
.rp-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--sz-blue), var(--sz-ice-500)); transition: width .6s var(--ease); }
.rot-list { list-style: none; margin: 0; padding: 8px 10px; overflow: auto; flex: 1; display: grid; align-content: start; gap: 2px; counter-reset: r; }
.rot-list label { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 10px; cursor: pointer; transition: background .15s; }
.rot-list label:hover { background: var(--sz-surface-2); }
.rot-list input { position: absolute; opacity: 0; }
.rs-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--sz-border-2); font-size: 11.5px; font-weight: 700; color: var(--sz-text-3); flex: none; transition: all .2s; }
.rs-n .icon { width: 13px; height: 13px; }
.rot-list li.done .rs-n { background: var(--sz-success); border-color: var(--sz-success); color: #fff; animation: pop .35s var(--ease-spring); }
.rs-t { display: grid; gap: 1px; font-size: 13px; }
.rs-t small { font-size: 11.5px; color: var(--sz-text-3); }
.rs-t em { color: var(--sz-success); font-style: normal; font-weight: 600; }
.rot-list li.done b { color: var(--sz-text-2); text-decoration: line-through; text-decoration-color: var(--sz-border-2); }
.rot-hint { padding: 10px 18px 14px; border-top: 1px solid var(--sz-border); }
@container (max-width: 980px) {
  .mon-grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 300px; }
  .cfg-grid { grid-template-columns: 1fr; }
  .mon-head, .mline { grid-template-columns: 72px 90px 54px minmax(0, 1fr) 46px 60px; gap: 6px; }
  .mdet { grid-template-columns: 1fr; }
}

/* ======================= AVALIAÇÃO / EXECUÇÃO / MAPA (Fase avaliação+mapa) ======================= */
/* Campo de avaliação reutilizável (estrelas 0–5 + comentário) */
.aval-campo { display: grid; gap: 8px; justify-items: center; text-align: center; }
.aval-campo .rate-stars { align-items: center; }
.aval-campo .rate-star { border: 0; background: none; padding: 2px; cursor: pointer; line-height: 0; }
.aval-campo .rate-clear { border: 0; background: none; cursor: pointer; font-size: 20px; color: var(--sz-text-3); line-height: 1; }
.aval-grande .star { width: 34px; height: 34px; }
.aval-campo .textarea { width: 100%; }
.rate-count { font-size: 11.5px; color: var(--sz-text-3); align-self: end; margin-left: auto; }

/* Bloco de avaliação no detalhe da OS (SZero) com origem */
.aval-origem { display: inline-flex; align-items: center; gap: 4px; }

/* Fotos e peças da execução */
.foto-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.foto-thumb { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid var(--sz-border); background: var(--sz-surface-2); flex: none; }
.foto-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.foto-thumb .foto-cap { position: absolute; left: 0; right: 0; bottom: 0; font-size: 9.5px; line-height: 1.2; padding: 2px 4px; background: rgb(0 0 0 / 55%); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foto-thumb .foto-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgb(0 0 0 / 55%); color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; }
.foto-thumb .foto-x svg { width: 12px; height: 12px; }
.foto-mini { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; border: 1px solid var(--sz-border); }
/* Fotos do equipamento (catálogo de ar-condicionado) */
.equip-mini { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; border: 1px solid var(--sz-border); background: var(--sz-surface-2); flex: none; vertical-align: middle; }
.ver-foto { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--sz-text-3); }
.ver-foto svg { width: 13px; height: 13px; }
.equip-hoverable { cursor: zoom-in; outline: none; }
.equip-hoverable:focus-visible { box-shadow: 0 0 0 2px var(--sz-blue); border-radius: 6px; }
.equip-fotos { margin-top: 2px; }
.equip-sem-foto { display: inline-grid; place-items: center; color: var(--sz-text-3); font-size: 12px; }
.equip-foto-cel { display: inline-flex; }
.foto-upload { display: flex; align-items: center; gap: 10px; }
.equip-foto-campo .foto-mini { width: 72px; height: 72px; }
.equip-prev-inline { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.equip-prev { position: fixed; z-index: 9999; max-width: 360px; padding: 8px; border-radius: 12px; background: var(--sz-surface); border: 1px solid var(--sz-border); box-shadow: 0 24px 50px -16px rgb(0 0 0 / 45%), 0 0 0 1px rgb(0 0 0 / 4%); pointer-events: none; opacity: 0; transform: translateY(4px) scale(.98); transition: opacity .12s var(--ease), transform .12s var(--ease); }
.equip-prev.in { opacity: 1; transform: none; }
.equip-prev-h { display: flex; align-items: center; gap: 6px; padding: 2px 4px 7px; font-size: 12.5px; color: var(--sz-text); }
.equip-prev-h svg { width: 16px; height: 16px; color: var(--sz-blue); flex: none; }
.equip-prev-h b { font-weight: 650; }
.equip-prev-h span { margin-left: auto; font-size: 11px; color: var(--sz-text-3); }
.equip-prev-fotos { display: flex; gap: 8px; }
.equip-prev-fotos figure { margin: 0; flex: 1 1 0; min-width: 0; }
.equip-prev-fotos img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; background: #fff; border: 1px solid var(--sz-border); display: block; }
.equip-prev-fotos figcaption { margin-top: 4px; text-align: center; font-size: 11px; color: var(--sz-text-3); }

.peca-list { display: grid; gap: 8px; }
.peca-item { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; background: var(--sz-surface-2); border: 1px solid var(--sz-border); }
.peca-item .grow { min-width: 0; }
.peca-fotos { display: flex; gap: 6px; flex: none; }

/* Assinatura em canvas */
.sign-wrap { border: 1.5px dashed var(--sz-border-2); border-radius: 12px; background: var(--sz-surface); overflow: hidden; }
.sign-pad { display: block; width: 100%; height: 160px; touch-action: none; cursor: crosshair; color: var(--sz-text); }
.sign-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-top: 1px solid var(--sz-border); font-size: 12px; color: var(--sz-text-3); }

/* Mapa Leaflet */
.sz-map { width: 100%; height: 320px; border-radius: 12px; border: 1px solid var(--sz-border); overflow: hidden; background: var(--sz-surface-2); z-index: 0; }
.sz-map.sm { height: 220px; }
.map-aviso { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--sz-warning-050); color: #8a5a00; font-size: 12.5px; }
.area-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 10px; border-radius: 999px; background: var(--sz-blue-050); color: var(--sz-blue); font-size: 12px; font-weight: 600; }
.area-chip button { border: 0; background: none; cursor: pointer; color: inherit; display: grid; place-items: center; padding: 0; }
.area-chip button svg { width: 13px; height: 13px; }

/* Sugestão de prestadores por distância */
.sug-list { display: grid; gap: 8px; }
.sug-item { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--sz-border); background: var(--sz-surface); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sug-item:hover { border-color: var(--sz-border-2); }
.sug-item.sel { border-color: var(--sz-blue); box-shadow: var(--sz-ring); }
.sug-item .grow { min-width: 0; }
.sug-dist { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 16px; text-align: right; flex: none; }
.sug-dist small { display: block; font-size: 10px; font-weight: 600; color: var(--sz-text-3); }
.sug-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.sug-item.nao-atende { opacity: .92; border-style: dashed; }
.sug-item.nao-atende.sel { opacity: 1; }
/* Rótulo de distância sobre o mapa de sugestão */
.sug-dist-lbl { background: #3de90f; color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,.35); white-space: nowrap; }

/* Histórico do cliente / reincidência (SZero, HTML Prestador e App Prestador) */
.hist-list { display: grid; gap: 8px; }
.hist-item { padding: 9px 11px; border-radius: 10px; border: 1px solid var(--sz-border); background: var(--sz-surface); }
.hist-item.same-eq { border-color: var(--sz-warning-200, #f0c36d); background: var(--sz-warning-050); }
.hist-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hist-t { font-weight: 650; font-size: 13.5px; margin: 3px 0 1px; }
.hist-reinc { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; margin-bottom: 10px;
  background: var(--sz-danger-050); color: var(--sz-danger); font-size: 12.5px; font-weight: 600; }
.hist-reinc svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }

/* Filtros de data (dashboard SZero e histórico do HTML Prestador) */
.dash-filtro, .pt-ml-filtro { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pt-ml-filtro { padding: 8px 12px; border-bottom: 1px solid var(--sz-border); }
.seg-datas button { font-size: 12px; padding: 4px 9px; }
.input-data { height: 34px; padding: 0 8px; font-size: 12.5px; width: 150px; max-width: 48%; }

/* Notificação destacada de nova OS (App Prestador) */
.push-os { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 60; border-radius: 16px; overflow: hidden;
  background: linear-gradient(140deg, #3de90f, #0a45a8); color: #fff; box-shadow: var(--sz-shadow-lg); animation: pushIn .4s var(--ease-spring) both; cursor: pointer; }
@keyframes pushIn { from { transform: translateY(-120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.push-os.out { animation: pushOut .3s var(--ease) both; }
@keyframes pushOut { to { transform: translateY(-120%); opacity: 0; } }
.push-os-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; font-weight: 700; font-size: 13px; }
.push-os-h .grow { flex: 1; }
.push-os-h .px { border: 0; background: rgb(255 255 255 / 20%); color: #fff; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; padding: 0; }
.push-os-h .px svg { width: 14px; height: 14px; }
.push-os-b { padding: 0 12px 12px; display: grid; gap: 4px; }
.push-os-code { font-family: var(--sz-mono); font-weight: 800; font-size: 16px; }
.push-os-t { font-size: 14px; font-weight: 700; }
.push-os-meta { font-size: 12px; color: rgb(255 255 255 / 85%); display: grid; gap: 2px; }
.push-os-meta .pm { display: flex; gap: 6px; align-items: center; }
.push-os-meta .pm svg { width: 13px; height: 13px; flex: none; }
.push-os .prio { background: rgb(255 255 255 / 22%); color: #fff; }