/* ============================================================
   Frota & Equipamentos · Caprem — Design System
   (tokens e padrões extraídos do DESIGN-SYSTEM.md do Cockpit)
   ============================================================ */
:root{
  --verde:#1f6b3b; --verde-d:#16502c; --dourado:#c9a227;
  --bg:#f4f6f5; --card:#fff; --line:#e6e9e7; --txt:#1f2937; --muted:#6b7280;
  --ok:#1f8f4e; --okbg:#e9f6ee;
  --and:#c8821a; --andbg:#fdf3e3;
  --pend:#c0392b; --pendbg:#fbeae8;
  --neu:#8a949c; --neubg:#eef0f1;
  --cot:#2563eb; --cotbg:#e8effe;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--txt);font-size:14px}
a{color:inherit}

/* ---------- Shell ---------- */
.app{display:flex;min-height:100vh}
.side{width:230px;background:var(--verde);color:#eafaef;flex-shrink:0;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;transition:width .15s ease}
.brand{padding:18px;font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.12)}
.brand .material-icons{color:var(--dourado)}
.navlabel{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:#bfe6cd;padding:16px 18px 6px;opacity:.85}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 18px;color:#eafaef;text-decoration:none;font-size:13.5px;border-left:3px solid transparent;cursor:pointer}
.nav a:hover{background:rgba(255,255,255,.06)}
.nav a.active{background:rgba(255,255,255,.12);border-left-color:var(--dourado);font-weight:700}
.nav a.disabled{opacity:.55;cursor:default}
.nav a.disabled:hover{background:transparent}
.whoami{margin-top:auto;padding:12px 18px;border-top:1px solid rgba(255,255,255,.12);font-size:11.5px;color:#bfe6cd;line-height:1.5}
.main{flex:1;min-width:0}
.sidetoggle{margin-left:auto;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.14);border:0;border-radius:7px;color:#eafaef;cursor:pointer}
.app.sidecollapsed .side{width:60px}
.app.sidecollapsed .brandtext,.app.sidecollapsed .navtxt,.app.sidecollapsed .navlabel,.app.sidecollapsed .whoami{display:none}
.app.sidecollapsed .nav a{justify-content:center;padding:11px 0}
.app.sidecollapsed .sidetoggle .material-icons{transform:rotate(180deg)}

/* ---------- Cabeçalho de página ---------- */
.pagehead{padding:18px 26px 2px}
.h1{font-size:23px;font-weight:800;color:var(--verde-d);margin:0;display:flex;align-items:center;gap:10px}
.h1 .material-icons{color:var(--dourado)}
.sub{color:var(--muted);font-size:13px;margin:5px 0 0}

/* ---------- KPIs ---------- */
.kpis{display:flex;gap:12px;flex-wrap:wrap;padding:14px 26px 4px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;min-width:130px;flex:1}
.kpi .v{font-size:21px;font-weight:800;color:var(--verde-d)}
.kpi .v.alert{color:var(--pend)} .kpi .v.gold{color:var(--dourado)} .kpi .v.warn{color:var(--and)}
.kpi .l{font-size:11.5px;color:var(--muted);margin-top:2px}

/* ---------- Painel + barra de filtros ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;margin:12px 26px}
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px}
.bar select,.search{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:13px;background:#fff;color:var(--txt)}
.search{min-width:240px}
.bar .spacer{flex:1}

/* ---------- Tabela ---------- */
.tablewrap{max-height:calc(100vh - 280px);overflow:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{position:sticky;top:0;background:#f0f3f1;text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap;z-index:1}
thead th .arrow{color:var(--verde);font-weight:800}
tbody td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr{cursor:pointer}
tbody tr:hover{background:#f7faf8}
.empty{padding:42px 20px;text-align:center;color:var(--muted)}
.empty .material-icons{font-size:40px;color:var(--line);display:block;margin:0 auto 8px}

/* ---------- Chips e selos ---------- */
.tp-chip{font-size:10px;font-weight:800;padding:2px 6px;border-radius:6px;background:var(--neubg);color:var(--neu);white-space:nowrap}
.status{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.s-ok{background:var(--okbg);color:var(--ok)}
.s-and{background:var(--andbg);color:var(--and)}
.s-pend{background:var(--pendbg);color:var(--pend)}
.s-neu{background:var(--neubg);color:var(--neu)}
.s-cot{background:var(--cotbg);color:var(--cot)}
.badge-temp{background:var(--dourado);color:#fff;font-size:9px;font-weight:800;padding:1px 6px;border-radius:6px;margin-left:6px;text-transform:uppercase;letter-spacing:.4px}

/* ---------- Botões ---------- */
.btn-prim{background:var(--verde);color:#fff;border:0;border-radius:9px;padding:9px 14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:13px}
.btn-prim:hover{background:var(--verde-d)}
.btn-ghost{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:13px}
.btn-prim .material-icons,.btn-ghost .material-icons{font-size:18px}

/* ---------- Modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(15,23,32,.45);display:none;align-items:flex-start;justify-content:center;z-index:50;padding:36px 16px;overflow:auto}
.overlay.open{display:flex}
.modal{background:#fff;border-radius:14px;width:100%;max-width:760px;box-shadow:0 18px 50px rgba(0,0,0,.25);overflow:hidden}
.mhead{background:linear-gradient(135deg,var(--verde),var(--verde-d));color:#fff;padding:18px 22px;position:relative}
.mhead .crumb{font-size:11.5px;opacity:.85;margin-bottom:4px}
.mhead .mtitle{font-size:19px;font-weight:800;display:flex;align-items:center;gap:8px}
.mhead .metachips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:11.5px;opacity:.95}
.mhead .metachips span{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.14);padding:3px 8px;border-radius:999px}
.mhead .metachips .material-icons{font-size:14px}
.mclose{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.18);border:0;color:#fff;width:30px;height:30px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:0 14px;overflow:auto}
.tab{padding:12px 14px;cursor:pointer;border-bottom:2px solid transparent;font-size:13px;color:var(--muted);white-space:nowrap}
.tab.active{border-bottom-color:var(--verde);font-weight:700;color:var(--verde-d)}
.tabbody{padding:18px 22px;max-height:52vh;overflow:auto}
.tabpane{display:none}
.tabpane.active{display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld{margin-bottom:12px}
.fld label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);display:block;margin-bottom:4px}
.fld input,.fld select,.fld textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:14px;background:#fff;color:var(--txt)}
.fld input:disabled,.fld select:disabled,.fld textarea:disabled{background:#f7f8f8;color:#374151;cursor:default}
.fld textarea{min-height:84px;resize:vertical}
.mfoot{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--line);background:#fafbfb}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:22px;right:22px;background:var(--verde-d);color:#fff;padding:12px 16px;border-radius:10px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(10px);transition:.2s;z-index:80;max-width:340px}
.toast.show{opacity:1;transform:translateY(0)}
.toast.err{background:var(--pend)}

/* ---------- Barra de abas (topo do domínio) ---------- */
.tabbar{display:flex;gap:2px;background:#26804a;border-bottom:2px solid var(--verde-d);padding:0 16px;overflow-x:auto;position:sticky;top:0;z-index:5}
.tabbar-item{padding:14px 16px;cursor:pointer;white-space:nowrap;font-size:13.5px;color:rgba(255,255,255,.82);border-bottom:3px solid transparent;font-weight:600}
.tabbar-item:hover{color:#fff;background:rgba(255,255,255,.08)}
.tabbar-item.active{color:#fff;font-weight:800;border-bottom-color:var(--dourado)}

.page{display:none}
.page.active{display:block}

/* ---------- Home (banner) ---------- */
.home{padding:18px 26px}
.hero-img{width:100%;max-width:1320px;border-radius:14px;display:block;box-shadow:0 12px 34px rgba(0,0,0,.14);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.hero-img:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(0,0,0,.20)}
.hero-fb{display:none;align-items:center;justify-content:center;min-height:340px;max-width:1320px;background:linear-gradient(135deg,var(--verde),var(--verde-d));color:#fff;border-radius:14px;text-align:center;padding:40px}
.hero-fb-kick{font-weight:800;letter-spacing:2px;color:var(--dourado);font-size:13px}
.hero-fb-title{font-size:34px;font-weight:800;margin:6px 0}
.hero-fb-sub{opacity:.92;margin:0;font-size:15px}
.hero-fb-note{margin-top:16px;font-size:12px;opacity:.8}
.hero-fb code{background:rgba(255,255,255,.18);padding:2px 6px;border-radius:6px}
.home-cta{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}

/* ---------- Checklist runner (mobile-first) ---------- */
.clr-overlay{position:fixed;inset:0;background:var(--bg);display:none;flex-direction:column;z-index:60}
.clr-overlay.open{display:flex}
.clr-head{background:linear-gradient(135deg,var(--verde),var(--verde-d));color:#fff;padding:16px 18px;position:relative;flex-shrink:0}
.clr-title{font-size:18px;font-weight:800;padding-right:36px}
.clr-sub{font-size:12px;opacity:.9;margin-top:2px}
.clr-close{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.18);border:0;color:#fff;width:32px;height:32px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.clr-cycles{display:flex;gap:8px;padding:12px;background:#fff;border-bottom:1px solid var(--line);overflow-x:auto;flex-shrink:0}
.clr-cycle{padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;font-size:13px;white-space:nowrap;font-weight:600}
.clr-cycle.active{background:var(--verde);color:#fff;border-color:var(--verde)}
.clr-cycle .due{background:var(--dourado);color:#fff;border-radius:999px;padding:1px 7px;margin-left:6px;font-size:10px;font-weight:800}
.clr-body{flex:1;overflow:auto;padding:14px;max-width:820px;width:100%;margin:0 auto}
.cl-medidor{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px}
.cl-medidor label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);display:block;margin-bottom:4px}
.cl-medidor input{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px;font-size:16px}
.cl-group{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--verde-d);font-weight:800;margin:16px 4px 6px}
.cli{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
.cli.cli-nok{border-color:var(--pend);box-shadow:0 0 0 1px var(--pend) inset}
.cli-q{font-size:14px;font-weight:600;margin-bottom:10px;line-height:1.35}
.cli-crit{color:var(--pend);font-size:11px;font-weight:800;margin-left:4px}
.cli-norma{display:inline-block;font-size:10px;color:var(--muted);background:var(--neubg);border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:middle}
.cli-opts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.cli-opts button{padding:13px 6px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:700;font-size:14px;cursor:pointer;color:var(--muted)}
.cli-opts button.sel-ok{background:var(--okbg);border-color:var(--ok);color:var(--ok)}
.cli-opts button.sel-nok{background:var(--pendbg);border-color:var(--pend);color:var(--pend)}
.cli-opts button.sel-na{background:var(--neubg);border-color:var(--neu);color:var(--neu)}
.cli-extra{margin-top:10px;display:none}
.cli-extra.show{display:block}
.cli-extra textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px;font-size:14px;min-height:54px}
.cli-foto{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:13px;color:var(--verde-d);cursor:pointer;font-weight:600}
.cli-foto .material-icons{font-size:18px}
.cli-foto input{display:none}
.cli-thumb img{max-height:72px;border-radius:8px;margin-top:8px;display:block}
.clr-foot{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border-top:1px solid var(--line);flex-shrink:0}
.clr-prog{font-size:13px;color:var(--muted);font-weight:600}
.clr-foot .btn-prim{margin-left:auto;padding:13px 22px}

/* ---------- Modo Operador (mobile-first, só preencher) ---------- */
.op-mode{display:none;min-height:100vh;background:var(--bg)}
.op{max-width:560px;margin:0 auto;padding:18px}
.op-head{background:linear-gradient(135deg,var(--verde),var(--verde-d));color:#fff;border-radius:14px;padding:18px 20px;margin-bottom:16px}
.op-brand{font-weight:800;font-size:18px;display:flex;align-items:center;gap:8px}
.op-brand .material-icons{color:var(--dourado)}
.op-hi{font-size:13px;opacity:.92;margin-top:4px}
.op-actions{display:flex;flex-direction:column;gap:12px}
.op-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;cursor:pointer;font-size:15px}
.op-card .material-icons{font-size:30px;color:var(--verde)}
.op-card b{display:block;color:var(--txt);font-size:16px}
.op-card small{color:var(--muted)}
.op-card.op-prim{background:var(--verde);border-color:var(--verde)}
.op-card.op-prim .material-icons,.op-card.op-prim b{color:#fff}
.op-card.op-prim small{color:#d7ecdf}
.op-card.op-soon{opacity:.55;cursor:default}
.op-back{background:none;border:0;color:var(--verde-d);font-weight:700;display:flex;align-items:center;gap:6px;padding:8px 0;cursor:pointer;margin-bottom:6px;font-size:14px}
.op-search{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px;font-size:15px;margin-bottom:12px}
#op-list{display:flex;flex-direction:column;gap:10px}
.op-foot{margin-top:18px;text-align:center;font-size:12px;color:var(--muted)}
.op-foot a{color:var(--muted)}

/* ---------- Responsivo (celular) ---------- */
@media (max-width:820px){
  .app{flex-direction:column}
  .side{width:100%!important;height:auto;position:static}
  .brand{border-bottom:1px solid rgba(255,255,255,.12)}
  .sidetoggle{display:none}
  .navlabel{padding:8px 14px 2px}
  .nav{flex-direction:row;flex-wrap:wrap;overflow-x:auto}
  .nav a{border-left:0;border-bottom:3px solid transparent;padding:9px 12px;white-space:nowrap}
  .nav a.active{border-left:0;border-bottom-color:var(--dourado)}
  .whoami{display:none}
  .panel{margin:10px 12px}
  .pagehead{padding:14px 14px 2px}
  .h1{font-size:20px}
  .kpis{padding:12px 12px 4px}
  .kpi{min-width:46%}
  .tablewrap{max-height:none}
  .bar{gap:8px}
  .bar .search,.bar select{flex:1;min-width:0}
  .home{padding:12px}
  .modal{max-width:100%}
  .overlay{padding:10px}
  .grid2{grid-template-columns:1fr}
}