:root{
  color-scheme:light;
  --brand:#d35400; --brand-dark:#a84300; --brand-2:#1f5aa8; --brand-2-dark:#16407a;
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --bg:#eef1f4; --surface:#fff; --surface-2:#f7f8fa; --sidebar:#1a2230;
  --ink:#14181d; --ink-2:#55606b; --muted:#8b95a1; --line:#e4e8ec;
  --field-bg:#fff; --overlay:rgba(20,24,29,.5);
  --shadow:0 2px 10px rgba(20,24,29,.06),0 1px 3px rgba(20,24,29,.08);
  --shadow-lg:0 12px 30px rgba(20,24,29,.14);
  --radius:14px;
}
/* ===== TEMA ESCURO DINÂMICO (segue o sistema) ===== */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --brand:#f26a1b; --brand-dark:#c9531a; --brand-2:#4d8fe0; --brand-2-dark:#2f6fc0;
    --bg:#0e1218; --surface:#171d26; --surface-2:#1f2731; --sidebar:#0b0f15;
    --ink:#e8edf3; --ink-2:#a8b3c0; --muted:#6f7c8b; --line:#2a333f;
    --field-bg:#131922; --overlay:rgba(0,0,0,.66);
    --shadow:0 2px 12px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.5);
    --shadow-lg:0 16px 40px rgba(0,0,0,.55);
  }
  /* tintas de status/gravidade com texto legível no escuro */
  .t-aberta,.g-critica,.v-manutencao{background:rgba(240,90,90,.16);color:#ff9a9a;}
  .t-em_andamento,.g-media,.v-operacao{background:rgba(250,178,25,.16);color:#ffd479;}
  .t-controlada{background:rgba(77,143,224,.18);color:#9cc4ff;}
  .t-encerrada,.g-baixa,.v-disponivel{background:rgba(30,190,70,.16);color:#8ee89a;}
  .g-alta{background:rgba(236,131,90,.2);color:#ffb38c;}
  .btn-danger{background:rgba(240,90,90,.16);color:#ff9a9a;}
  .btn-ghost{background:var(--surface-2);color:var(--ink);border-color:var(--line);}
  .auto-badge{background:rgba(77,143,224,.2);color:#9cc4ff;}
  .login-err{background:rgba(240,90,90,.14);color:#ff9a9a;}
  .tb-logo,.b-crest,.mc-ic,.r-ic{box-shadow:0 2px 8px rgba(0,0,0,.5);}
  img.tb-logo{filter:none;}
  .install-fab{box-shadow:0 8px 24px rgba(0,0,0,.6);}
  .cred .mono,.field input,.field select,.field textarea{background:var(--field-bg);}
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}

/* ===== LOGIN ===== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#d35400,#a84300 55%,#7a3000);padding:20px;}
.login-card{background:var(--surface);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.3);width:100%;max-width:400px;padding:36px 32px;}
.login-card .crest{display:block;width:96px;height:96px;object-fit:contain;margin:0 auto 14px;}
.login-card h1{font-size:18px;text-align:center;margin:0 0 4px;}
.login-card .sub{font-size:12.5px;color:var(--muted);text-align:center;margin:0 0 24px;}
.login-card label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin:14px 0 6px;}
.login-card input{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:12px 13px;font-size:14px;background:var(--field-bg);color:var(--ink);}
.login-card input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(211,84,0,.12);}
.login-card button{width:100%;margin-top:20px;background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  color:#fff;border:none;border-radius:11px;padding:14px;font-size:15px;font-weight:800;}
.login-err{background:rgba(208,59,59,.1);color:#a92c2c;border-radius:10px;padding:10px 12px;font-size:13px;margin-top:14px;display:none;}
.login-hint{font-size:11px;color:var(--muted);text-align:center;margin-top:18px;line-height:1.5;}
/* Autoria: discreta, mas presente na entrada do sistema */
.login-autor{font-size:10.5px;color:var(--muted);opacity:.75;text-align:center;line-height:1.55;
  margin:12px 0 0;padding-top:11px;border-top:1px solid var(--linha,rgba(128,138,150,.25));}
.login-autor b{font-weight:700;}

/* ===== APP SHELL ===== */
.app{display:flex;min-height:100vh;}
.sidebar{width:230px;background:var(--sidebar);color:#cdd3da;flex:none;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.sidebar .brand{padding:20px 18px;display:flex;align-items:center;gap:11px;border-bottom:1px solid rgba(255,255,255,.08);}
.sidebar .brand .b-crest{width:40px;height:40px;border-radius:10px;background:#fff;padding:2px;object-fit:contain;flex:none;}
.sidebar .brand .b-txt b{display:block;font-size:13px;color:#fff;line-height:1.15;}
.sidebar .brand .b-txt span{font-size:10.5px;color:#8b95a1;}
.nav{padding:12px 10px;flex:1;overflow-y:auto;}
.nav a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;font-size:14px;font-weight:600;color:#aab3c0;margin-bottom:3px;}
.nav a .ic{font-size:18px;width:22px;text-align:center;}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav a.active{background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(211,84,0,.35);}
.nav .badge-count{margin-left:auto;background:var(--critical);color:#fff;font-size:11px;font-weight:800;border-radius:20px;padding:1px 8px;}
.sidebar .foot{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;}
.sidebar .foot .u-name{color:#fff;font-weight:700;}
.sidebar .foot .u-role{color:#8b95a1;font-size:11px;text-transform:capitalize;}
.sidebar .foot button{margin-top:10px;width:100%;background:rgba(255,255,255,.08);color:#cdd3da;border:none;border-radius:9px;padding:9px;font-size:12.5px;font-weight:700;}
.sidebar .foot button:hover{background:rgba(255,255,255,.14);color:#fff;}
.sidebar .foot .foot-ver{margin-top:8px;font-size:10.5px;color:#6b7684;text-align:center;}
.sidebar .foot .foot-autor{margin-top:6px;padding-top:7px;border-top:1px solid rgba(255,255,255,.07);
  font-size:9.8px;line-height:1.5;color:#7b8592;text-align:center;}
.sidebar .foot .foot-autor b{display:block;color:#98a3b1;font-weight:700;font-size:10.4px;}
.sidebar .foot .foot-autor span{display:block;opacity:.8;margin-top:1px;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{background:var(--surface);border-bottom:1px solid var(--line);padding:16px 26px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:10;}
.topbar h2{margin:0;font-size:19px;}
.topbar .tb-sub{font-size:12.5px;color:var(--muted);margin-top:2px;}
.topbar .spacer{flex:1;}
.content{padding:22px 26px 40px;max-width:1200px;width:100%;}

/* ===== Componentes ===== */
.btn{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:11px;padding:11px 16px;font-size:13.5px;font-weight:700;}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;box-shadow:0 4px 12px rgba(211,84,0,.28);}
.btn-2{background:var(--brand-2);color:#fff;}
.btn-ghost{background:var(--surface);color:var(--ink-2);border:1.5px solid var(--line);}
.btn-sm{padding:7px 11px;font-size:12px;border-radius:9px;}
.btn-danger{background:rgba(208,59,59,.1);color:#a92c2c;}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px;}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);}
.stat .s-top{display:flex;justify-content:space-between;align-items:center;}
.stat .s-lbl{font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px;}
.stat .s-ic{font-size:20px;}
.stat .s-val{font-size:30px;font-weight:800;margin-top:8px;line-height:1;}
.stat .s-val small{font-size:14px;color:var(--ink-2);font-weight:600;}
.stat .s-sub{font-size:12px;color:var(--ink-2);margin-top:6px;}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:20px;overflow:hidden;}
.panel .p-head{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;}
.panel .p-head h3{margin:0;font-size:15px;}
.panel .p-head .spacer{flex:1;}
.panel .p-body{padding:6px 0;}
.panel .p-body.pad{padding:18px;}

table{width:100%;border-collapse:collapse;}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;padding:11px 16px;border-bottom:1px solid var(--line);}
td{padding:12px 16px;font-size:13.5px;border-bottom:1px solid var(--line);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--surface-2);}
.mono{font-variant-numeric:tabular-nums;font-weight:700;}

.tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap;}
.t-aberta{background:rgba(208,59,59,.12);color:#a92c2c;}
.t-em_andamento{background:rgba(250,178,25,.18);color:#8a5f00;}
.t-controlada{background:rgba(31,90,168,.12);color:#1a4a8a;}
.t-encerrada{background:rgba(12,163,12,.12);color:#0a7a0a;}
.g-baixa{background:rgba(12,163,12,.12);color:#0a7a0a;}
.g-media{background:rgba(250,178,25,.18);color:#8a5f00;}
.g-alta{background:rgba(236,131,90,.18);color:#b8551f;}
.g-critica{background:rgba(208,59,59,.14);color:#a92c2c;}
.v-disponivel{background:rgba(12,163,12,.12);color:#0a7a0a;}
.v-operacao{background:rgba(250,178,25,.18);color:#8a5f00;}
.v-manutencao{background:rgba(208,59,59,.12);color:#a92c2c;}

.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;}
.filters select,.filters input{border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;font-size:13px;background:var(--field-bg);color:var(--ink);}
.filters select:focus,.filters input:focus{outline:none;border-color:var(--brand);}

/* Barras */
.bar-row{display:flex;align-items:center;gap:10px;padding:7px 18px;}
.bar-row .b-lbl{width:150px;font-size:13px;flex:none;}
.bar-row .b-track{flex:1;background:var(--surface-2);border-radius:6px;height:14px;overflow:hidden;}
.bar-row .b-fill{height:100%;background:var(--brand);border-radius:6px;}
.bar-row .b-val{width:30px;text-align:right;font-weight:700;font-size:13px;}

/* ===== Modal ===== */
.modal-bg{position:fixed;inset:0;background:var(--overlay);display:none;align-items:flex-start;justify-content:center;z-index:100;padding:30px 16px;overflow-y:auto;}
.modal-bg.show{display:flex;}
.modal{background:var(--surface);border-radius:16px;width:100%;max-width:640px;box-shadow:0 30px 80px rgba(0,0,0,.4);animation:pop .2s ease;}
@keyframes pop{from{transform:translateY(12px);opacity:0;}to{transform:none;opacity:1;}}
.modal .m-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;}
.modal .m-head h3{margin:0;font-size:17px;}
.modal .m-head .close{margin-left:auto;background:none;border:none;font-size:24px;color:var(--muted);line-height:1;}
.modal .m-body{padding:20px 22px;}
.modal .m-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;}
.field{margin-bottom:15px;}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:6px;}
.field .req{color:var(--critical);}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:11px 12px;font-size:14px;font-family:inherit;background:var(--field-bg);color:var(--ink);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(211,84,0,.1);}
.field textarea{resize:vertical;min-height:70px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.gps-mini{display:flex;gap:8px;align-items:center;}
.gps-mini input{flex:1;}
.gps-mini button{white-space:nowrap;}

/* Toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:13px 20px;border-radius:12px;font-size:14px;font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:.3s;z-index:200;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.err{background:#a92c2c;}

.empty{padding:40px;text-align:center;color:var(--muted);font-size:14px;}
.report-item{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);}
.report-item:last-child{border-bottom:none;}
.report-item .r-ic{width:42px;height:42px;border-radius:11px;background:rgba(211,84,0,.1);display:flex;align-items:center;justify-content:center;font-size:20px;flex:none;}
.report-item .r-info{flex:1;}
.report-item .r-per{font-weight:700;font-size:14px;}
.report-item .r-meta{font-size:12px;color:var(--muted);margin-top:2px;}
.auto-badge{background:rgba(31,90,168,.12);color:#1a4a8a;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;}

/* Nav TV link */
.nav-tv{margin-top:8px;border-top:1px solid rgba(255,255,255,.08);padding-top:14px !important;}

/* Clima no painel */
.clima-bar{display:flex;align-items:center;gap:22px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--risco,#0ca30c);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 18px;margin-bottom:14px;}
.clima-bar.off{color:var(--ink-2);font-size:13.5px;border-left-color:var(--muted);}
.cb-main{display:flex;align-items:center;gap:12px;}
.cb-temp{font-size:34px;font-weight:800;line-height:1;}
.cb-temp span{font-size:15px;color:var(--ink-2);}
.cb-cond b{display:block;font-size:14px;}
.cb-cond span{font-size:11.5px;color:var(--muted);}
.cb-metrics{display:flex;gap:20px;}
.cb-metrics>div{font-size:17px;font-weight:700;display:flex;flex-direction:column;line-height:1.15;}
.cb-metrics .m-ic{font-size:15px;}
.cb-metrics small{font-size:10.5px;color:var(--muted);font-weight:600;}
.cb-risco{margin-left:auto;text-align:right;}
.cb-risco .risco-lbl{display:block;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:700;margin-bottom:4px;}
.cb-risco .risco-val{color:#fff;font-weight:800;font-size:13px;padding:5px 12px;border-radius:20px;}

/* Alertas INMET */
.alertas-inmet{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.ai-item{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-left:4px solid;border-radius:12px;padding:11px 14px;box-shadow:var(--shadow);}
.ai-ic{width:30px;height:30px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-size:15px;}
.ai-t{font-size:13.5px;font-weight:700;}
.ai-d{font-size:12px;color:var(--ink-2);margin-top:2px;}
.ai-src{font-size:10.5px;color:var(--muted);margin-top:3px;font-weight:600;}
.ai-item.inativo{filter:grayscale(1);opacity:.6;border-left-color:#b0b7bf;}
.ai-item.inativo .ai-t{color:var(--ink-2);font-weight:600;}
.ai-inativos{font-size:12px;color:var(--muted);padding:8px 4px 2px;line-height:1.4;}

/* Comboboxes pesquisáveis (rua, bairro, equipe) */
.combo{position:relative;}
.combo-input{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:11px 12px;font-size:14px;font-family:inherit;background:var(--field-bg);color:var(--ink);}
.combo-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(211,84,0,.1);}
.combo-list{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow-lg);max-height:230px;overflow-y:auto;z-index:130;display:none;}
.combo-list.open{display:block;}
.combo-opt{padding:9px 12px;font-size:13.5px;cursor:pointer;border-bottom:1px solid var(--line);}
.combo-opt:last-child{border-bottom:none;}
.combo-opt:hover{background:rgba(211,84,0,.08);}
.combo-opt small{color:var(--muted);}
.combo-empty{padding:12px;color:var(--muted);font-size:13px;text-align:center;}
.combo-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.combo-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(211,84,0,.1);color:var(--brand-dark);font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:20px;}
.combo-chip button{background:none;border:none;color:var(--brand-dark);font-size:15px;cursor:pointer;line-height:1;}

/* Endereço de acesso pela rede */
.rede-url{font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:18px;font-weight:700;background:var(--surface-2);border:1.5px solid var(--line);border-radius:10px;padding:11px 14px;margin-bottom:8px;color:var(--brand-dark);user-select:all;}

/* Credenciais de acesso dos operadores */
.cred-list{display:flex;flex-direction:column;gap:10px;}
.cred{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.6;}
.cred .mono{font-family:ui-monospace,Consolas,monospace;background:var(--field-bg);padding:1px 7px;border-radius:6px;border:1px solid var(--line);}

/* Minhas ocorrências (cards do operador) */
.minhas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}
.minha-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.minha-card.ativa{border-left:5px solid var(--critical);}
.mc-top{display:flex;align-items:center;gap:11px;padding:13px 14px;border-bottom:1px solid var(--line);}
.mc-ic{width:40px;height:40px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;}
.mc-tipo{font-size:15px;font-weight:800;}
.mc-meta{font-size:11.5px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums;}
.mc-body{padding:12px 14px;font-size:13.5px;line-height:1.7;}
.mc-acoes{display:flex;gap:8px;flex-wrap:wrap;padding:0 14px 14px;}
.mc-acoes .btn{flex:1;justify-content:center;min-width:96px;}

/* Fotos (relatório) */
.photo-zone{display:flex;gap:10px;flex-wrap:wrap;}
.photo-add{width:78px;height:78px;border-radius:12px;border:1.5px dashed var(--brand);background:rgba(211,84,0,.05);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:var(--brand);font-size:11px;font-weight:600;}
.photo-add .pa-ic{font-size:22px;}
.photo-thumb{width:78px;height:78px;border-radius:12px;position:relative;background-size:cover;background-position:center;box-shadow:var(--shadow);}
.photo-thumb .rm{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--critical);color:#fff;border:2px solid #fff;font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;}

/* Equipamentos utilizados (checklist no relatório) */
.equip-check{max-height:200px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;padding:8px;background:var(--surface-2);display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.eqc2,.field label.eqc2{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink);margin:0;padding:5px 7px;border-radius:8px;cursor:pointer;}
.eqc2:hover{background:var(--surface);}
.eqc2 input{width:16px;height:16px;accent-color:var(--brand);flex:none;}
.eqc2 small{color:var(--muted);}

/* Alerta do operador (empenhado) em tela cheia */
.op-alert{position:fixed;inset:0;background:rgba(6,8,12,.92);z-index:300;display:flex;align-items:center;justify-content:center;padding:18px;animation:fade .2s;}
.op-card{background:var(--surface);border-radius:18px;max-width:460px;width:100%;padding:22px;border-top:8px solid var(--critical);box-shadow:0 20px 60px rgba(0,0,0,.5);}
.op-h{font-size:13px;font-weight:800;color:var(--critical);letter-spacing:.6px;}
.op-tipo{font-size:25px;font-weight:800;margin:6px 0 14px;}
.op-row{font-size:14.5px;margin-bottom:7px;}
.op-map{display:block;text-align:center;margin-top:14px;}
.op-close{display:block;width:100%;margin-top:10px;text-align:center;}

/* Mapa da ocorrência */
.occ-map{height:260px;border-radius:12px;border:1.5px solid var(--line);overflow:hidden;z-index:0;}
.map-off{background:var(--surface-2);border:1.5px dashed var(--line);border-radius:12px;padding:16px;font-size:13px;color:var(--ink-2);text-align:center;}
.hint-obr{font-weight:500;color:var(--muted);font-size:11.5px;}

/* Configurações */
.add-row{display:flex;gap:8px;align-items:center;}
.add-row input{flex:1;border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;font-size:13.5px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.chip-item{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:6px 12px;font-size:13px;font-weight:600;}
.chip-item button{background:none;border:none;color:var(--critical);font-size:16px;line-height:1;cursor:pointer;}
.rua-list{margin-top:8px;max-height:440px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;}
.rua-item{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;border-bottom:1px solid var(--line);font-size:13.5px;}
.rua-item:last-child{border-bottom:none;}
.rua-item small{color:var(--muted);font-weight:500;}
.rua-item button{background:none;border:none;color:var(--critical);font-size:17px;cursor:pointer;}
.lote{margin:8px 0 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px;}
.lote summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--brand-dark);}
.lote textarea{width:100%;min-height:110px;margin:10px 0;border:1.5px solid var(--line);border-radius:10px;padding:10px;font-family:inherit;font-size:13px;background:var(--field-bg);color:var(--ink);}

/* Segmented control (abas de Configurações) */
.seg{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:13px;padding:4px;}
.seg button{flex:1;border:none;background:none;color:var(--ink-2);font-weight:700;font-size:13px;padding:9px 12px;border-radius:10px;transition:.15s;white-space:nowrap;}
.seg button:hover{color:var(--ink);}
.seg button.on{background:var(--surface);color:var(--brand-dark);box-shadow:var(--shadow);}

@media(max-width:820px){
  .sidebar{width:64px;}
  .sidebar .brand .b-txt,.sidebar .nav a span.lbl,.sidebar .foot .u-info,
  .sidebar .foot .foot-autor{display:none;}
  .sidebar .foot button{font-size:0;padding:9px 0;}
  .sidebar .foot button::first-letter{font-size:16px;}
  .sidebar .nav a{justify-content:center;}
  .grid-2,.grid-3{grid-template-columns:1fr;}
}

/* ===== Celular ===== */
@media(max-width:640px){
  .app{flex-direction:column;min-height:100vh;}
  .sidebar{width:100%;height:auto;position:fixed;bottom:0;left:0;right:0;top:auto;flex-direction:row;z-index:80;border-top:1px solid rgba(255,255,255,.08);}
  .sidebar .brand,.sidebar .foot{display:none;}
  .nav{display:flex;flex-direction:row;justify-content:space-around;align-items:center;padding:6px 4px;overflow-x:auto;}
  .nav a{flex-direction:column;gap:2px;margin:0;padding:6px 9px;border-radius:10px;min-width:56px;text-align:center;}
  .nav a .lbl{display:block !important;font-size:9.5px;line-height:1.1;}
  .nav a .ic{font-size:20px;width:auto;}
  .nav .badge-count{margin:0;position:absolute;transform:translate(14px,-6px);}
  .nav-tv{border-top:none !important;padding-top:6px !important;}
  .main{padding-bottom:70px;}
  .topbar{position:sticky;top:0;flex-wrap:wrap;gap:8px;padding:12px 14px;}
  .topbar h2{font-size:17px;}
  .topbar .btn-primary{padding:9px 12px;font-size:12.5px;}
  .content{padding:14px 12px 30px;}
  .cards{grid-template-columns:1fr 1fr;gap:10px;}
  .stat .s-val{font-size:24px;}
  .p-body{overflow-x:auto;}
  table{min-width:560px;}
  .filters{gap:8px;}
  .filters input,.filters select{flex:1;min-width:130px;}
  .modal-bg{padding:0;align-items:flex-start;}
  .modal{max-width:100%;border-radius:0;min-height:100vh;margin:0;}
  .grid-2,.grid-3{grid-template-columns:1fr;}
  .occ-map{height:230px;}
  .cred .mono{display:inline-block;margin-top:2px;}
}

/* Botão instalar (PWA) */
.install-fab{position:fixed;bottom:20px;right:20px;z-index:90;background:var(--brand);color:#fff;border:none;border-radius:30px;padding:12px 18px;font-size:14px;font-weight:800;box-shadow:0 8px 24px rgba(211,84,0,.45);cursor:pointer;}
@media(max-width:640px){ .install-fab{bottom:80px;} }

/* Atendimento registrado (visualização na ocorrência) */
.rel-view{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:14px;}
.rel-view-h{font-weight:800;font-size:13px;color:var(--brand-dark);margin-bottom:8px;}
.rv-row{font-size:13.5px;margin-bottom:5px;}
.rel-fotos-view{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.rel-fotos-view img{width:88px;height:88px;object-fit:cover;border-radius:10px;border:1px solid var(--line);}
.rv-sub{font-weight:800;font-size:12px;color:var(--brand-dark);margin:8px 0 4px;text-transform:uppercase;letter-spacing:.3px;}

/* Apoio de equipes aliadas (checklist) */
.apoio-check{border:1px solid var(--line);border-radius:12px;padding:8px;background:var(--surface-2);display:grid;grid-template-columns:1fr 1fr;gap:2px;max-height:230px;overflow-y:auto;}
@media(max-width:640px){ .apoio-check{grid-template-columns:1fr;} }

/* Bloco de campos específicos do tipo no fechamento */
.tipo-bloco{background:rgba(211,84,0,.06);border:1px solid rgba(211,84,0,.18);border-radius:12px;padding:14px 14px 4px;margin-bottom:16px;}
.tipo-bloco-h{font-weight:800;font-size:13.5px;color:var(--brand-dark);margin-bottom:10px;}

/* ===== App mobile nativo (logo + header laranja + tab bar inferior) ===== */
.tb-logo{display:none;}
@media(max-width:640px){
  html,body{background:var(--bg);}
  /* --- Header estilo app: laranja, safe-area do notch, canto arredondado --- */
  .topbar{
    background:linear-gradient(135deg,var(--brand),var(--brand-dark));
    border-bottom:none;box-shadow:0 4px 18px rgba(168,67,0,.32);
    padding:calc(env(safe-area-inset-top) + 12px) 16px 14px;gap:12px;flex-wrap:nowrap;
    border-radius:0 0 20px 20px;position:sticky;top:0;z-index:20;
  }
  .topbar .tb-logo{display:block;width:40px;height:40px;border-radius:12px;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.28);background:#fff;padding:2px;object-fit:contain;}
  .topbar h2{color:#fff;font-size:18px;font-weight:800;letter-spacing:-.2px;}
  .topbar .tb-sub{color:rgba(255,255,255,.88);font-size:11.5px;}
  .topbar .btn-nova{flex:none;background:rgba(255,255,255,.22);backdrop-filter:blur(4px);box-shadow:none;font-size:0;padding:0;width:44px;height:44px;border-radius:14px;justify-content:center;color:#fff;transition:transform .12s;}
  .topbar .btn-nova::before{content:'＋';font-size:26px;font-weight:800;line-height:1;}
  .topbar .btn-nova:active{transform:scale(.9);}

  /* --- Tab bar inferior translúcida --- */
  .sidebar{
    background:color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);
    border-top:1px solid var(--line);box-shadow:0 -4px 22px rgba(0,0,0,.12);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .nav{padding:7px 3px;gap:0;justify-content:space-between;overflow:visible;}
  .nav a{flex:1 1 0;min-width:0;max-width:60px;color:var(--muted);border-radius:14px;padding:7px 2px 6px;gap:3px;overflow:hidden;transition:transform .12s,background .15s;}
  .nav a .ic{font-size:21px;transition:transform .15s;}
  .nav a .lbl{color:inherit;font-size:9px;font-weight:700;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15;}
  .nav a:active{transform:scale(.9);}
  .nav a.active{background:rgba(211,84,0,.12);color:var(--brand);box-shadow:none;}
  .nav a.active .ic{transform:translateY(-1px) scale(1.12);}
  .nav .badge-count{transform:translate(11px,-4px);font-size:9px;padding:0 5px;}
  .nav .nav-tv{display:none;}          /* Modo TV é de parede: fora da tab bar do celular */

  /* --- Conteúdo com respiro e cartões arredondados --- */
  .content{padding:14px 14px 26px;background:var(--bg);}
  .main{padding-bottom:calc(66px + env(safe-area-inset-bottom));}
  .cards{grid-template-columns:1fr 1fr;gap:11px;}
  .stat{border-radius:18px;border:none;box-shadow:var(--shadow);padding:15px 16px;}
  .panel{border-radius:18px;border:none;box-shadow:var(--shadow);}
  .minha-card,.minhas-grid{grid-template-columns:1fr;}
  .minha-card{border-radius:18px;border:none;box-shadow:var(--shadow);}
  .clima-bar,.ai-item{border-radius:16px;}
  .btn{padding:12px 16px;border-radius:13px;}
  .btn-sm{padding:9px 12px;}
  .mc-acoes .btn{min-height:44px;}
  /* tabelas: rolagem suave e sem “cara de planilha” colada na borda */
  .p-body{-webkit-overflow-scrolling:touch;}
  .seg{gap:3px;padding:3px;-webkit-overflow-scrolling:touch;}
  .seg button{flex:1 1 0;min-width:0;padding:8px 4px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .modal .m-head{padding-top:calc(env(safe-area-inset-top) + 16px);}
  .install-fab{bottom:calc(78px + env(safe-area-inset-bottom));}

  /* --- Tabelas viram CARTÕES (cara de app, sem rolagem lateral) --- */
  .p-body{overflow-x:visible;}
  table{min-width:0;display:block;}
  thead{display:none;}                              /* rótulos vão para cada célula */
  tbody{display:block;padding:10px 12px;}
  tbody tr{
    display:block;background:var(--surface-2);border:1px solid var(--line);
    border-radius:16px;box-shadow:var(--shadow);margin-bottom:11px;padding:12px 14px;
  }
  tbody tr:last-child{margin-bottom:0;}
  tbody tr:hover{background:var(--surface-2);}
  tbody td{
    display:flex;justify-content:space-between;align-items:center;gap:10px 14px;flex-wrap:wrap;
    border:none;padding:6px 0;font-size:13.5px;text-align:right;
  }
  tbody td::before{
    content:attr(data-label);flex:none;text-align:left;
    font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
    color:var(--muted);
  }
  tbody td[data-label]{min-width:0;}
  tbody td[data-label] > *{margin-left:auto;min-width:0;overflow-wrap:anywhere;word-break:break-word;}
  tbody td .mono{font-size:12.5px;}
  /* célula-título: cabeçalho do cartão */
  tbody td.cell-title{
    display:block;text-align:left;font-size:16px;font-weight:800;color:var(--ink);
    padding:0 0 8px;margin-bottom:6px;border-bottom:1px solid var(--line);
  }
  tbody td.cell-title::before{display:none;}
  tbody td.cell-title small{display:block;font-weight:600;font-size:11.5px;margin:2px 0 0 39px;}
  /* célula de ações: botões largos no rodapé do cartão */
  tbody td.cell-actions{
    display:flex;gap:8px;justify-content:stretch;text-align:center;
    padding-top:12px;margin-top:6px;border-top:1px solid var(--line);white-space:normal;
  }
  tbody td.cell-actions::before{display:none;}
  tbody td.cell-actions .btn{flex:1;justify-content:center;min-height:42px;}
  /* linha “vazia” (colspan) centralizada */
  tbody td.empty{display:block;text-align:center;}
  tbody td.empty::before{display:none;}
}

/* ==========================================================================
   TABLET / iPad — layout exclusivo (641px a 1200px)
   Sidebar azul-marinho com rótulos, cabeçalho escuro e cards amplos.
   Não afeta o computador (>1200px) nem o celular (<=640px).
   ========================================================================== */
@media(min-width:641px) and (max-width:1200px){
  :root{ --navy:#16305c; --navy-2:#1e3f75; --navy-3:#0f2447; }

  /* Instalado como app, a tela vai até as bordas: reserva o espaço do
     relógio/bateria e das laterais arredondadas para nada ficar escondido. */
  .topbar{padding-top:calc(env(safe-area-inset-top) + 18px);}
  .sidebar .brand{padding-top:calc(env(safe-area-inset-top) + 20px);}
  .app{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}
  .content{padding-bottom:calc(40px + env(safe-area-inset-bottom));}
  .sidebar .foot{padding-bottom:calc(14px + env(safe-area-inset-bottom));}

  .app{flex-direction:row;}
  /* --- Sidebar navy com rótulos (desfaz o colapso de 820px) --- */
  .sidebar{
    width:248px !important;position:sticky;top:0;left:auto;right:auto;bottom:auto;height:100vh;
    flex-direction:column;background:linear-gradient(180deg,var(--navy),var(--navy-3));
    border-top:none;box-shadow:4px 0 24px rgba(6,16,36,.18);z-index:20;padding-bottom:0;
  }
  .sidebar .brand{display:flex !important;padding:20px 18px;gap:12px;border-bottom:1px solid rgba(255,255,255,.12);}
  .sidebar .brand .b-crest{width:46px;height:46px;border-radius:12px;}
  .sidebar .brand .b-txt{display:block !important;}
  .sidebar .brand .b-txt b{font-size:15px;}
  .sidebar .brand .b-txt span{font-size:11.5px;color:#cddcf2;}
  .sidebar .foot .u-role{color:#cddcf2;}
  .sidebar .foot .u-name{text-shadow:0 1px 2px rgba(0,0,0,.35);}
  .topbar h2,.topbar .tb-sub{text-shadow:0 1px 3px rgba(6,16,36,.4);}
  .nav{display:block;padding:14px 12px;overflow-y:auto;}
  .nav a{
    display:flex !important;flex-direction:row !important;justify-content:flex-start !important;
    align-items:center;gap:14px;padding:13px 15px !important;border-radius:12px;margin-bottom:4px;
    font-size:15px;font-weight:600;color:#c3d3ec;min-width:0;max-width:none;text-align:left;
  }
  .nav a .ic{font-size:21px;width:26px;text-align:center;transform:none !important;}
  .nav a .lbl{display:inline !important;font-size:15px !important;font-weight:600;white-space:nowrap;overflow:visible;text-overflow:clip;max-width:none;color:inherit;}
  .nav a:hover{background:rgba(255,255,255,.09);color:#fff;}
  .nav a.active{background:var(--brand);color:#fff;box-shadow:0 6px 18px rgba(211,84,0,.4);}
  .nav a.active .ic{transform:none !important;}
  .nav .badge-count{margin-left:auto;position:static;transform:none;font-size:12px;padding:2px 9px;}
  .nav .nav-tv{display:none !important;}   /* Modo TV fica só no computador e em Configurações */
  .sidebar .foot{display:block !important;padding:14px 16px;border-top:1px solid rgba(255,255,255,.12);}
  .sidebar .foot .u-info{display:block !important;}
  .sidebar .foot .foot-autor{display:block !important;}
  .sidebar .foot button{font-size:13px !important;padding:10px !important;background:rgba(255,255,255,.1);}
  .sidebar .foot button::first-letter{font-size:inherit;}

  /* --- Cabeçalho escuro, título grande --- */
  .main{padding-bottom:0;}
  .topbar{
    background:linear-gradient(135deg,var(--navy-2),var(--navy));border-bottom:none;
    padding:18px 26px;gap:16px;flex-wrap:nowrap;box-shadow:0 3px 16px rgba(6,16,36,.22);
    border-radius:0;position:sticky;top:0;z-index:15;
  }
  .topbar .tb-logo{display:block;width:46px;height:46px;border-radius:12px;background:#fff;padding:3px;object-fit:contain;flex:none;}
  .topbar h2{color:#fff;font-size:26px;font-weight:800;letter-spacing:-.3px;}
  .topbar .tb-sub{color:rgba(255,255,255,.82);font-size:13px;}
  .topbar .btn-nova{background:var(--brand);box-shadow:0 6px 18px rgba(211,84,0,.4);font-size:15px;padding:13px 20px;border-radius:14px;}
  .topbar .btn-nova::before{content:none;}

  /* --- Conteúdo: cards amplos, 2 colunas, muito respiro --- */
  .content{padding:22px 26px 40px;max-width:none;}
  .cards{grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:22px;}
  .stat{border-radius:20px;border:none;box-shadow:0 4px 18px rgba(20,40,80,.10);padding:22px 24px;}
  .stat .s-lbl{font-size:13px;}
  .stat .s-val{font-size:40px;}
  .stat .s-sub{font-size:13.5px;}
  .panel{border-radius:20px;border:none;box-shadow:0 4px 18px rgba(20,40,80,.10);margin-bottom:20px;}
  .panel .p-head{padding:18px 22px;}
  .panel .p-head h3{font-size:18px;}
  /* painéis lado a lado (grade de 2 colunas como no exemplo do iPad) */
  .content .panel + .panel{margin-bottom:20px;}
  th{font-size:12px;padding:13px 18px;}
  td{font-size:15px;padding:15px 18px;}
  .btn{font-size:14.5px;padding:12px 18px;border-radius:13px;}
  .btn-sm{font-size:13px;padding:9px 14px;}
  .minhas-grid{grid-template-columns:repeat(2,1fr);gap:18px;}
  .minha-card{border-radius:20px;border:none;box-shadow:0 4px 18px rgba(20,40,80,.10);}
  .mc-tipo{font-size:17px;}
  .mc-body{font-size:15px;}
  .clima-bar,.ai-item{border-radius:18px;}
  .modal{max-width:760px;border-radius:20px;}
  .modal .m-body{padding:24px 26px;}
  .field label{font-size:13.5px;}
  .field input,.field select,.field textarea{font-size:15.5px;padding:13px 14px;min-height:48px;}
  .combo-input{font-size:15.5px;padding:13px 14px;min-height:48px;}
  .seg button{font-size:14.5px;padding:12px 14px;}
  .equip-check,.apoio-check{max-height:260px;}
  .eqc2{font-size:14px;padding:9px 8px;}
  .eqc2 input{width:20px;height:20px;}
  .occ-map{height:330px;border-radius:16px;}
  .install-fab{bottom:24px;right:24px;}
  .grid-2{grid-template-columns:1fr 1fr;}
  .grid-3{grid-template-columns:1fr 1fr 1fr;}
  /* tabelas: rolagem lateral suave quando não couberem (retrato) */
  .panel .p-body{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table{min-width:660px;display:table;}
  tbody td.cell-title,th:first-child{white-space:nowrap;}
  thead{display:table-header-group;}
  tbody{display:table-row-group;}
  tbody tr{display:table-row;background:none;border:none;border-radius:0;box-shadow:none;margin:0;padding:0;}
  tbody td{display:table-cell;text-align:left;border-bottom:1px solid var(--line);}
  tbody td::before{content:none;}
  tbody td.cell-title{display:table-cell;font-size:15px;border-bottom:1px solid var(--line);padding:15px 18px;margin:0;}
  tbody td.cell-actions{display:table-cell;text-align:right;white-space:nowrap;border-top:none;padding:15px 18px;margin:0;}
  tbody td.cell-actions .btn{flex:none;min-height:0;}
  tbody td.cell-title small{display:inline;margin:0;}
}

/* ==========================================================================
   ÍCONES, GRÁFICOS, CLIMA E MAPA  (v2.8)
   ========================================================================== */
.ic-svg{display:inline-block;vertical-align:-3px;flex:none;}
.nav a .ic,.topbar .p-ic{display:inline-flex;align-items:center;justify-content:center;}
.p-head .p-ic{color:var(--brand);display:inline-flex;align-items:center;}
.stat .s-ic{color:var(--muted);display:inline-flex;}
.stat.st-critical .s-ic{color:var(--critical);}
.stat.st-good .s-ic{color:var(--good);}
.stat.st-info .s-ic{color:var(--brand-2);}
.stat.st-brand .s-ic{color:var(--brand);}
td .ti{display:inline-flex;align-items:center;vertical-align:-4px;margin-right:6px;color:var(--ink-2);}

/* --- Ações rápidas --- */
.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px;}
.qa{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 8px;
  font-size:12.5px;font-weight:700;color:var(--ink-2);box-shadow:var(--shadow);cursor:pointer;transition:transform .12s,box-shadow .15s;}
.qa:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);color:var(--brand);}
.qa:active{transform:scale(.96);}
.qa .ic-svg{color:var(--brand);}
.qa span{text-align:center;line-height:1.15;}

/* --- Clima (hero) --- */
.clima-hero{position:relative;overflow:hidden;border-radius:20px;margin-bottom:14px;color:#fff;
  background:linear-gradient(135deg,#2b6cb0,#1f5aa8 45%,#16407a);box-shadow:0 10px 30px rgba(22,64,122,.32);}
.clima-hero .ch-bg{position:absolute;inset:0;background:
   radial-gradient(120px 120px at 88% 12%,rgba(255,255,255,.22),transparent 70%),
   radial-gradient(180px 180px at 12% 90%,rgba(255,255,255,.12),transparent 70%);}
.clima-hero.off{background:var(--surface);color:var(--ink-2);box-shadow:var(--shadow);border:1px solid var(--line);
  padding:14px 16px;display:flex;align-items:center;gap:10px;font-size:13.5px;}
.ch-main{position:relative;display:flex;align-items:center;gap:16px;padding:18px 20px 10px;}
.ch-ico{opacity:.95;flex:none;}
.ch-temp{font-size:44px;font-weight:800;line-height:1;letter-spacing:-1px;}
.ch-temp sup{font-size:18px;font-weight:700;opacity:.85;margin-left:2px;}
.ch-cond{font-size:15px;font-weight:700;margin-top:2px;}
.ch-loc{font-size:12px;opacity:.85;margin-top:3px;display:flex;align-items:center;gap:4px;}
.ch-metrics{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.16);border-top:1px solid rgba(255,255,255,.16);}
.chm{background:rgba(255,255,255,.06);backdrop-filter:blur(2px);padding:11px 8px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:2px;}
.chm b{font-size:16px;font-weight:800;line-height:1.1;}
.chm small{font-size:10px;opacity:.82;}
.chm .ic-svg{opacity:.9;}
.chm-risco b{color:#fff;background:var(--rc,#0ca30c);padding:1px 10px;border-radius:20px;font-size:12.5px;}

/* --- Gráficos --- */
.grid-charts{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.chart-wrap{width:100%;}
.chart-svg{width:100%;height:auto;max-height:210px;overflow:visible;}
.grid-charts .barh-l{width:118px;}
.chart-legend{display:flex;gap:16px;justify-content:center;margin-top:8px;font-size:12px;color:var(--ink-2);font-weight:600;}
.chart-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px;}
.donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;}
.donut-svg{width:140px;height:140px;flex:none;}
.donut-leg{display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--ink-2);}
.donut-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;}
.donut-leg b{color:var(--ink);margin-left:4px;}
.barh-list{display:flex;flex-direction:column;gap:11px;}
.barh{display:flex;align-items:center;gap:12px;}
.barh-l{width:170px;flex:none;display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink);overflow:hidden;}
.barh-l span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.barh-l .ic-svg{color:var(--ink-2);flex:none;}
.barh-t{flex:1;height:12px;background:var(--surface-2);border-radius:7px;overflow:hidden;}
.barh-f{height:100%;border-radius:7px;transition:width .5s ease;}
.barh-v{width:28px;text-align:right;font-size:13px;font-weight:800;}
.pill-count{background:rgba(211,84,0,.12);color:var(--brand-dark);font-size:12px;font-weight:800;border-radius:20px;padding:3px 11px;}

/* --- Mini-mapa do painel --- */
.painel-map{height:320px;width:100%;z-index:0;}
.map-pin-wrap{background:none !important;border:none !important;width:34px;height:44px;}
.map-pin{width:34px;height:44px;display:block;line-height:0;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.45));}
.map-pin .pin-svg{display:block;width:34px;height:44px;}
.map-pin.arrast{cursor:grab;}
.leaflet-marker-icon.map-pin-wrap{background:transparent;border:none;}

/* ==========================================================================
   TRANSPARÊNCIA (vidro) nas barras de navegação
   ========================================================================== */
.sidebar{background:color-mix(in srgb, var(--sidebar) 86%, transparent);
  -webkit-backdrop-filter:saturate(1.5) blur(18px);backdrop-filter:saturate(1.5) blur(18px);}
.topbar{background:color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);}
@media(max-width:640px){
  .quick-actions{grid-template-columns:repeat(4,1fr);gap:8px;}
  .qa{padding:12px 4px;font-size:11px;border-radius:14px;}
  .grid-charts{grid-template-columns:1fr;}
  .barh-l{width:120px;font-size:12.5px;}
  .painel-map{height:260px;}
  .ch-temp{font-size:38px;}
  .ch-metrics{grid-template-columns:repeat(2,1fr);}
  .topbar{background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 92%,transparent),color-mix(in srgb,var(--brand-dark) 92%,transparent));
    -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);}
}
@media(min-width:641px) and (max-width:1200px){
  .grid-charts{grid-template-columns:1fr 1fr;}
  .painel-map{height:360px;}
  .qa{font-size:13.5px;padding:16px 10px;}
  /* Vidro mais forte no iPad */
  .sidebar{background:color-mix(in srgb, var(--navy) 74%, transparent);
    -webkit-backdrop-filter:saturate(1.9) blur(34px);backdrop-filter:saturate(1.9) blur(34px);
    border-right:1px solid rgba(255,255,255,.10);box-shadow:6px 0 30px rgba(6,16,36,.22);}
  .topbar{background:linear-gradient(135deg,color-mix(in srgb,var(--navy-2) 72%,transparent),color-mix(in srgb,var(--navy) 72%,transparent));
    -webkit-backdrop-filter:saturate(1.9) blur(30px);backdrop-filter:saturate(1.9) blur(30px);
    border-bottom:1px solid rgba(255,255,255,.12);}
  /* fundo com leve textura para o vidro ter o que desfocar */
  body{background-image:
      radial-gradient(680px 420px at 12% -8%, rgba(211,84,0,.16), transparent 62%),
      radial-gradient(720px 460px at 108% 8%, rgba(31,90,168,.16), transparent 60%),
      radial-gradient(560px 380px at 50% 108%, rgba(31,90,168,.10), transparent 62%);
    background-attachment:fixed;}
  /* cartões e painéis levemente translúcidos, no mesmo espírito */
  .panel,.stat,.minha-card,.cfg-list,.cfg-user,.qa{
    background:color-mix(in srgb, var(--surface) 82%, transparent);
    -webkit-backdrop-filter:saturate(1.3) blur(12px);backdrop-filter:saturate(1.3) blur(12px);}
  .seg{background:color-mix(in srgb, var(--surface-2) 72%, transparent);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
  .modal{background:color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter:saturate(1.4) blur(24px);backdrop-filter:saturate(1.4) blur(24px);}
  .modal-bg{background:color-mix(in srgb, var(--overlay) 82%, transparent);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
}
/* logo sem fundo branco nem sombra retangular (PNG transparente) */
.sidebar .brand .b-crest,.topbar .tb-logo,.login-card .crest,.dashboard .crest{
  background:none !important;padding:0 !important;border-radius:0 !important;box-shadow:none !important;}

/* A barra inferior do celular continua clara (o vidro global não pode escurecê-la) */
@media(max-width:640px){
  .sidebar{background:color-mix(in srgb, var(--surface) 82%, transparent) !important;
    -webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);
    border-top:1px solid var(--line);box-shadow:0 -4px 22px rgba(0,0,0,.12);}
  .nav a{color:var(--muted);}
  .nav a.active{background:rgba(211,84,0,.12);color:var(--brand);}
}

/* Fallback do mapa (sem internet) */
.painel-map.map-fallback{height:auto;padding:14px 16px;display:flex;flex-direction:column;gap:9px;}
.mapfb-note{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px;font-weight:600;}
.mapfb-item{display:flex;align-items:center;gap:11px;background:var(--surface-2);border:1px solid var(--line);
  border-left:4px solid var(--pin,#d35400);border-radius:12px;padding:10px 12px;font-size:13.5px;}
.mapfb-ic{width:32px;height:32px;border-radius:9px;background:var(--pin,#d35400);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;}
.mapfb-t{flex:1;min-width:0;line-height:1.35;}
.mapfb-t small{color:var(--muted);}
.barh-l{width:210px;}
@media(max-width:640px){ .barh-l{width:118px;} .mapfb-item{flex-wrap:wrap;} }

/* ==========================================================================
   CONFIGURAÇÕES — lista limpa (estilo ajustes de app)
   ========================================================================== */
.cfg-user{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;}
.cfg-avatar{width:52px;height:52px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;font-weight:800;font-size:18px;
  box-shadow:0 4px 12px rgba(211,84,0,.35);}
.cfg-user-t{flex:1;min-width:0;}
.cfg-user-t b{display:block;font-size:16px;line-height:1.25;}
.cfg-user-t span{font-size:12.5px;color:var(--muted);word-break:break-all;}
.cfg-papel{background:rgba(211,84,0,.1);color:var(--brand-dark);font-size:11.5px;font-weight:800;
  padding:4px 11px;border-radius:20px;text-transform:capitalize;white-space:nowrap;}

.cfg-sec{font-size:11.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;
  margin:22px 4px 8px;}
.cfg-list{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);}
.cfg-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:none;border:none;
  border-bottom:1px solid var(--line);padding:15px 18px;font-size:14.5px;font-family:inherit;color:var(--ink);
  cursor:pointer;transition:background .15s;}
.cfg-row:last-child{border-bottom:none;}
.cfg-row:hover:not(.cfg-static){background:var(--surface-2);}
.cfg-row:active:not(.cfg-static){background:var(--surface-2);}
.cfg-ic{width:36px;height:36px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(211,84,0,.1);color:var(--brand);}
.cfg-t{flex:1;min-width:0;font-weight:600;line-height:1.3;}
.cfg-t small{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-top:2px;}
.cfg-v{color:var(--muted);font-size:13.5px;font-weight:600;white-space:nowrap;}
.cfg-go{color:var(--muted);display:flex;flex:none;}
.cfg-static{cursor:default;}
.cfg-danger .cfg-ic{background:rgba(208,59,59,.1);color:var(--critical);}
.cfg-danger .cfg-t{color:var(--critical);}
.cfg-url{display:block;margin-top:6px;font-family:ui-monospace,Consolas,monospace;font-size:14px;font-weight:700;
  color:var(--brand-dark);background:var(--surface-2);border:1px solid var(--line);border-radius:9px;
  padding:8px 11px;user-select:all;word-break:break-all;}
.cfg-col{flex-wrap:wrap;}
.cfg-inline{display:flex;gap:8px;width:100%;margin-top:10px;}
.cfg-inline input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;
  font-size:14px;background:var(--field-bg);color:var(--ink);}
.cfg-inline input:focus{outline:none;border-color:var(--brand);}
@media(max-width:640px){
  .cfg-row{padding:14px 15px;font-size:14px;}
  .cfg-ic{width:34px;height:34px;}
  .cfg-user{border-radius:16px;flex-wrap:wrap;gap:12px;padding:14px 16px;}
  .cfg-avatar{width:46px;height:46px;font-size:16px;}
  .cfg-user-t{flex:1;min-width:0;}
  .cfg-user-t b{font-size:15px;}
  .cfg-user-t span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal;}
  .cfg-papel{order:3;font-size:11px;padding:3px 9px;}
}
@media(min-width:641px) and (max-width:1200px){
  .cfg-row{padding:17px 20px;font-size:15.5px;}
  .cfg-ic{width:40px;height:40px;}
}

/* ===== Aviso de conexão / envio pendente ===== */
/* Fora do ar ela precisa sumir DE VERDADE. Esconder só com transform funcionava
   no computador (topo da tela, sai pela borda), mas no celular ela fica ancorada
   62px acima do rodapé: deslocá-la 140% da própria altura a movia 25px e ela
   continuava na tela, com z-index 9500, por cima do botão Salvar. */
.barra-offline{position:fixed;left:50%;transform:translateX(-50%) translateY(-120%);top:0;z-index:9500;
  display:flex;align-items:center;gap:9px;max-width:94vw;
  padding:9px 16px;border-radius:0 0 14px 14px;font-size:13px;font-weight:700;color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.28);pointer-events:none;
  opacity:0;visibility:hidden;transition:transform .3s,opacity .25s;}
.barra-offline.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible;}
.barra-offline.off{background:linear-gradient(135deg,#6b7280,#4b5563);}
.barra-offline.sync{background:linear-gradient(135deg,var(--brand),var(--brand-dark));}
.barra-offline .ic-svg{flex:none;}
.mc-pend{margin:0 14px 10px;background:rgba(250,178,25,.14);color:#8a5f00;border-radius:10px;
  padding:7px 10px;font-size:11.5px;font-weight:700;display:flex;align-items:center;gap:6px;line-height:1.3;}
@media (prefers-color-scheme: dark){ .mc-pend{background:rgba(250,178,25,.16);color:#ffd479;} }
/* No celular o aviso fica em cima da barra de navegação, sem tapar o título */
@media(max-width:640px){
  .barra-offline{font-size:12px;padding:9px 14px;top:auto;bottom:calc(62px + env(safe-area-inset-bottom));
    border-radius:14px;transform:translateX(-50%) translateY(140%);}
  .barra-offline.show{transform:translateX(-50%) translateY(0);}
}

/* Botão "voltar para Valentim Gentil" — o mapa agora vai até o estado inteiro,
   e é fácil se perder longe da cidade sem um caminho de volta. */
.leaflet-control a.map-voltar{display:flex;align-items:center;gap:6px;
  background:var(--surface,#fff);color:var(--ink,#2b3542);border-radius:8px;
  padding:6px 10px;font-size:12px;font-weight:700;text-decoration:none;
  box-shadow:0 1px 5px rgba(0,0,0,.3);white-space:nowrap;}
.leaflet-control a.map-voltar:hover{background:var(--brand,#d35400);color:#fff;}
.leaflet-control a.map-voltar svg{width:15px;height:15px;flex:0 0 auto;}
@media(max-width:640px){ .leaflet-control a.map-voltar span{display:none;} }

/* ===== Check-in de chegada e linha do tempo do atendimento ===== */
.btn.btn-cheguei{background:#0f766e;color:#fff;border:none;}
.btn.btn-cheguei:hover{background:#115e56;}
.mc-chegada{margin:8px 0 0;padding:7px 10px;border-radius:9px;font-size:12.5px;font-weight:600;
  background:rgba(15,118,110,.10);color:#0f766e;display:flex;align-items:center;gap:6px;}
.mc-chegada svg{width:14px;height:14px;flex:0 0 auto;}

.linha-tempo{margin:2px 0 10px;padding-left:2px;}
.lt-item{display:flex;align-items:baseline;gap:8px;font-size:13px;padding:4px 0;
  position:relative;padding-left:16px;}
.lt-item .lt-b{position:absolute;left:0;top:6px;width:9px;height:9px;border-radius:50%;}
.lt-item::after{content:'';position:absolute;left:4px;top:15px;bottom:-4px;width:1px;background:var(--line);}
.lt-item:last-child::after{display:none;}
.lt-item b{font-variant-numeric:tabular-nums;}
.lt-item span{color:var(--muted);}
.lt-tempos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 10px;}
.lt-tempos > div{background:var(--surface-2);border-radius:11px;padding:10px 8px;text-align:center;}
.lt-tempos small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;}
.lt-tempos b{display:block;font-size:19px;color:var(--brand);margin:3px 0 1px;}
.lt-tempos i{display:block;font-style:normal;font-size:10px;color:var(--muted);}
@media(max-width:520px){ .lt-tempos{grid-template-columns:1fr;} }

/* ===== Registro de atividade (quem fez o quê) ===== */
.log-list{max-height:56vh;overflow-y:auto;border:1px solid var(--line);border-radius:12px;}
.log-item{display:flex;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px;}
.log-item:last-child{border-bottom:none;}
.log-item:nth-child(even){background:var(--surface-2);}
.log-quando{flex:0 0 118px;color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums;padding-top:1px;}
.log-corpo{flex:1;min-width:0;}
.log-quem{color:var(--muted);font-size:12px;margin-top:2px;word-break:break-word;}
@media(max-width:520px){
  .log-item{flex-direction:column;gap:2px;}
  .log-quando{flex:none;}
}

/* ===== Ações sobre a ocorrência (topo do formulário) =====
   Ficam separadas do rodapé de propósito: o rodapé decide o formulário
   (salvar / cancelar), esta barra age sobre o registro. Juntar as duas coisas
   colocava seis botões lado a lado e quebrava a tela do celular. */
.oc-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0 0 18px;padding-bottom:15px;border-bottom:1px solid var(--line);}
.oc-acoes .oc-espaco{flex:1 1 auto;}
.oc-acoes .btn{padding:9px 14px;font-size:13px;}
.oc-acoes .btn svg{width:16px;height:16px;flex:0 0 auto;}
.oc-acoes .oc-encerrar{background:#0f766e;color:#fff;}
.oc-acoes .oc-encerrar:hover{background:#115e56;}
.oc-acoes .oc-excluir{background:transparent;border:1.5px solid transparent;}
.oc-acoes .oc-excluir:hover{background:rgba(208,59,59,.10);}

/* No celular vira grade: rótulo inteiro visível, sem quebra de palavra. */
@media(max-width:640px){
  .oc-acoes{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
  .oc-acoes .btn{width:100%;justify-content:center;padding:12px 10px;font-size:13.5px;}
  .oc-acoes .oc-encerrar,.oc-acoes .oc-excluir{grid-column:1 / -1;}
  .oc-acoes .oc-espaco{display:none;}
  .oc-acoes .oc-excluir{border-color:var(--line);}
}

/* Rodapé do modal: duas decisões, lado a lado e com área de toque folgada. */
@media(max-width:640px){
  .modal .m-foot{position:sticky;bottom:0;z-index:3;gap:10px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:var(--surface);box-shadow:0 -6px 18px rgba(0,0,0,.10);}
  /* base de 140px: com dois botões eles dividem a linha; com três, o que não
     couber desce inteiro em vez de quebrar o rótulo no meio. */
  .modal .m-foot{flex-wrap:wrap;}
  .modal .m-foot .btn{flex:1 1 140px;justify-content:center;padding:14px 12px;font-size:14.5px;}
}