:root{
  --teal:#0C8577; --teal-esc:#0A5A50; --teal-suave:#E4F1EE;
  --tinta:#17211F; --cinza:#5E6866; --claro:#8B938F;
  --linha:#E5E3DB; --fundo:#F6F5F1; --erro:#B3261E; --erro-bg:#FCEBEA;
  --ok:#0F6E3D; --ok-bg:#E7F3EC;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--fundo);color:var(--tinta);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}
header{background:#fff;border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:10}
.hwrap{max-width:560px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px}
.marca{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.marca .dot{width:18px;height:18px;border-radius:50%;border:3px solid var(--teal);display:inline-block;position:relative}
.marca .dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--teal)}
nav#nav{display:flex;align-items:center;gap:4px;overflow-x:auto;flex:1;-webkit-overflow-scrolling:touch}
nav#nav a{font-size:13.5px;font-weight:600;color:var(--cinza);text-decoration:none;padding:7px 10px;border-radius:8px;white-space:nowrap}
nav#nav a.on{background:var(--teal-suave);color:var(--teal-esc)}
nav#nav button{margin-left:auto;font-size:13px;color:var(--claro);background:none;border:none;cursor:pointer;padding:7px 4px}
.container{max-width:560px;margin:0 auto;padding:18px 16px 40px}
h1{font-size:22px;letter-spacing:-.02em;margin-bottom:4px}
.sub{font-size:14px;color:var(--cinza);margin-bottom:18px}
.card{background:#fff;border:1px solid var(--linha);border-radius:14px;padding:20px;margin-bottom:14px}
label{font-size:13px;color:var(--cinza);font-weight:600;display:block;margin:14px 0 6px}
label:first-child{margin-top:0}
input,select{width:100%;height:48px;padding:0 14px;font-size:16px;border:1.5px solid var(--linha);border-radius:10px;background:#fff;color:var(--tinta)}
input:focus,select:focus{outline:none;border-color:var(--teal)}
.btn{width:100%;height:52px;border:none;border-radius:10px;background:var(--teal);color:#fff;font-size:16px;font-weight:700;cursor:pointer;margin-top:18px}
.btn:active{transform:scale(.99)}
.btn:disabled{opacity:.55;cursor:default}
.btn-sec{background:#fff;color:var(--tinta);border:1.5px solid var(--linha)}
.btn-mini{width:auto;height:40px;padding:0 16px;font-size:14px;margin-top:0}
.msg{border-radius:10px;padding:12px 14px;font-size:14px;margin-top:14px;display:none}
.msg.erro{display:block;background:var(--erro-bg);color:var(--erro)}
.msg.ok{display:block;background:var(--ok-bg);color:var(--ok)}
.codigo-grande{font-size:36px;font-weight:800;letter-spacing:3px;color:var(--teal-esc);background:var(--teal-suave);border-radius:12px;padding:18px;text-align:center;margin:14px 0}
.stepper{display:flex;align-items:center;justify-content:center;gap:24px;margin:10px 0}
.stepper button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--linha);background:#fff;font-size:24px;color:var(--cinza);cursor:pointer}
.stepper .n{font-size:34px;font-weight:800;min-width:44px;text-align:center}
.centro{text-align:center}
.quieto{font-size:13px;color:var(--claro)}
.divisor{border-top:1px solid var(--linha);margin:16px 0;padding-top:16px}
.pessoa{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--linha);border-radius:10px;margin-top:10px;cursor:pointer;background:#fff}
.pessoa:hover{border-color:var(--teal)}
.pessoa .av{width:40px;height:40px;border-radius:50%;background:var(--teal-suave);color:var(--teal-esc);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.pessoa .nm{font-weight:600;font-size:15px}
.pessoa .dt{font-size:12px;color:var(--claro)}
.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.metric{background:#fff;border:1px solid var(--linha);border-radius:12px;padding:12px 14px}
.metric .k{font-size:12px;color:var(--claro);font-weight:600}
.metric .v{font-size:26px;font-weight:800;letter-spacing:-.02em}
.fatur{background:var(--teal);color:#fff;border-radius:12px;padding:16px;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.fatur .k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.9}
.fatur .v{font-size:26px;font-weight:800}
.linha-camp{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px}
.linha-camp .nome-c{width:96px;color:var(--cinza);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linha-camp .trilho{flex:1;height:12px;background:#fff;border:1px solid var(--linha);border-radius:5px;overflow:hidden}
.linha-camp .trilho i{display:block;height:100%;background:var(--teal)}
.linha-camp .val{width:70px;text-align:right;font-weight:700;font-size:12px}
.tag{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:20px;background:var(--teal-suave);color:var(--teal-esc)}
.tag.off{background:#EFEEE8;color:var(--claro)}
.item-camp{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--linha)}
.item-camp:last-child{border-bottom:none}
#leitor{width:100%;border-radius:12px;overflow:hidden;background:#111}
.login-hero{display:flex;flex-direction:column;align-items:center;padding:44px 0 22px}
.login-hero .marca{font-size:24px}
.login-hero .marca .dot{width:24px;height:24px}
.login-hero p{font-size:13.5px;color:var(--claro);margin-top:6px}
a.link{color:var(--teal-esc);font-size:14px;font-weight:600;text-decoration:none;display:inline-block;margin-top:14px}
#sidebar{display:none}
.filtros-linha{display:block}
@media (min-width:900px){
  .com-sidebar header{display:none}
  .com-sidebar #sidebar{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:236px;background:#fff;border-right:1px solid var(--linha);padding:22px 14px 16px;z-index:20;overflow-y:auto}
  #sidebar .marca{font-size:19px;padding:0 8px 16px}
  #sidebar .sec-label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--claro);padding:16px 8px 6px}
  #sidebar a{display:block;font-size:14.5px;font-weight:600;color:var(--cinza);text-decoration:none;padding:9px 10px;border-radius:8px;margin-bottom:2px}
  #sidebar a.on{background:var(--teal-suave);color:var(--teal-esc)}
  #sidebar a:hover{background:var(--fundo)}
  #sidebar .rodape{margin-top:auto;border-top:1px solid var(--linha);padding-top:12px}
  #sidebar .quem{font-size:13.5px;font-weight:700;padding:0 8px}
  #sidebar .papel-lbl{font-size:11.5px;color:var(--claro);padding:2px 8px 8px}
  #sidebar .rodape .troca-senha{display:block;font-size:13.5px;font-weight:600;color:var(--cinza);text-decoration:none;padding:8px;border-radius:8px}
  #sidebar .rodape .troca-senha:hover{background:var(--fundo)}
  #sidebar .rodape button{width:100%;text-align:left;font-size:13.5px;color:var(--erro);background:none;border:none;cursor:pointer;padding:8px;border-radius:8px}
  #sidebar .rodape button:hover{background:var(--erro-bg)}
  .com-sidebar .container{margin-left:236px;margin-right:auto;max-width:1100px;padding:32px 44px 60px}
  .com-sidebar .metric-grid{grid-template-columns:repeat(4,1fr)}
  .com-sidebar .duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .com-sidebar .duo .card{margin-bottom:0}
  .com-sidebar .filtros-linha{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;align-items:end}
  .com-sidebar .filtros-linha label{margin-top:0}
  .com-sidebar .btn{max-width:340px}
  .com-sidebar h1{font-size:26px}
}