/* Medidor de uso do Lab (20/10/2026), extra além do protótipo (docs/auditoria-fidelidade/excecoes/medidor-uso.md).
   Mesmos tokens do Lab: Ubuntu, tinta #09090B, verde #13824A, âmbar #E5A500, vermelho #CC0601, cartões arredondados.
   Acima de 600px o detalhe é um cartão que abre sob o gatilho. Abaixo, vira folha de baixo. data-tema="escuro" para fundos escuros. */
.mdr{--mdr-tinta:#09090B;--mdr-suave:#55555B;--mdr-papel:#FFFFFF;--mdr-linha:rgba(9,9,11,.1);--mdr-faixa:#F4F3F1;--mdr-trilho:#E4E2DE;
  --mdr-verde:#13824A;--mdr-ambar:#E5A500;--mdr-verm:#CC0601;
  position:relative;display:block;font-family:Ubuntu,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--mdr-tinta);-webkit-font-smoothing:antialiased}
.mdr[data-tema="escuro"]{--mdr-tinta:#FFFFFF;--mdr-suave:#B9B9C0;--mdr-papel:#17171B;--mdr-linha:rgba(255,255,255,.14);--mdr-faixa:#232329;--mdr-trilho:#3A3A42;--mdr-ambar:#F2B81C;--mdr-verm:#FF6B66;--mdr-verde:#3FC184}
.mdr *,.mdr *::before,.mdr *::after{box-sizing:border-box}
.mdr [hidden]{display:none}

/* Gatilho: uma linha com ícone do estado, o resumo e "Ver meu uso" */
.mdr-gat{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 14px 8px 10px;border:1px solid var(--mdr-linha);border-radius:999px;background:var(--mdr-papel);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .25s,box-shadow .25s}
.mdr-gat:hover{border-color:var(--mdr-suave)}
.mdr-gat:focus-visible,.mdr-x:focus-visible,.mdr-comprar:focus-visible{outline:2px solid var(--mdr-tinta);outline-offset:2px}
.mdr-ic{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mdr-verde);color:#FFFFFF;font-size:13px;font-weight:700;line-height:1}
.mdr[data-estado="baixo"] .mdr-ic{background:var(--mdr-ambar);color:#09090B}
.mdr[data-estado="zerado"] .mdr-ic{background:var(--mdr-verm);color:#FFFFFF}
.mdr[data-estado="parado"] .mdr-ic{background:var(--mdr-suave);color:var(--mdr-papel);font-size:10px;letter-spacing:-.05em}
.mdr[data-estado="equipe"] .mdr-ic{background:var(--mdr-tinta);color:var(--mdr-papel)}
.mdr-resumo{flex:1;min-width:0;font-size:13.5px;font-weight:400;line-height:1.35}
.mdr-ver{flex:none;font-size:12.5px;font-weight:500;color:var(--mdr-suave);text-decoration:underline;text-underline-offset:3px}

/* Detalhe */
.mdr-folha{position:absolute;z-index:30;left:0;top:calc(100% + 8px);width:min(100%,440px);min-width:min(100vw - 32px,320px);padding:20px 20px 18px;border-radius:24px;background:var(--mdr-papel);border:1px solid var(--mdr-linha);box-shadow:0 30px 70px -30px rgba(9,9,11,.55);animation:mdrSobe .35s cubic-bezier(.22,1,.36,1) both}
.mdr-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.mdr-t{margin:0;font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.mdr-x{flex:none;width:36px;height:36px;border:none;border-radius:50%;background:var(--mdr-faixa);color:inherit;font-size:20px;line-height:1;cursor:pointer}
.mdr-corpo{display:flex;flex-direction:column;gap:12px}

/* Fichas dia, semana e mês: a que aperta fica em negrito e com contorno */
.mdr-fichas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mdr-ficha{display:flex;flex-direction:column;gap:7px;padding:10px 10px 11px;border-radius:16px;background:var(--mdr-faixa);box-shadow:inset 0 0 0 1px transparent}
.mdr-ficha.aperta{box-shadow:inset 0 0 0 2px var(--mdr-tinta)}
.mdr-ficha-t{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mdr-suave)}
.mdr-ficha-v{font-size:12.5px;font-weight:400;line-height:1.3}
.mdr-ficha.aperta .mdr-ficha-v,.mdr-ficha.aperta .mdr-ficha-t{font-weight:700;color:var(--mdr-tinta)}

/* Barras: segmentos até 10, contínua acima. Cheias conforme o uso */
.mdr-seg{display:flex;gap:3px;height:8px}
.mdr-seg i{flex:1;min-width:0;border-radius:3px;background:var(--mdr-trilho)}
.mdr-cont{display:block;height:8px;border-radius:999px;background:var(--mdr-trilho);overflow:hidden}
.mdr-cont i{display:block;height:100%;border-radius:999px;transition:width .6s cubic-bezier(.22,1,.36,1)}
.mdr-folga .on,.mdr-folga.mdr-cont i{background:var(--mdr-verde)}
.mdr-aperta .on,.mdr-aperta.mdr-cont i{background:var(--mdr-ambar)}
.mdr-cheio .on,.mdr-cheio.mdr-cont i{background:var(--mdr-verm)}

.mdr-nota{margin:0;padding:11px 14px;border-radius:14px;background:var(--mdr-faixa);font-size:13.5px;font-weight:400;line-height:1.5}
.mdr-nota-x{background:rgba(204,6,1,.09)}
.mdr-linha{margin:0;font-size:14px;font-weight:400;line-height:1.5}
.mdr-linha-b{font-weight:700}
.mdr-linha-x{font-weight:700}
.mdr-linha-m{font-size:13px;color:var(--mdr-suave)}
.mdr-lotes{display:flex;flex-direction:column;gap:7px;padding-top:12px;border-top:1px solid var(--mdr-linha)}
.mdr-comprar{align-self:flex-start;min-height:44px;padding:0 24px;border:none;border-radius:999px;background:var(--mdr-verm);color:#FFFFFF;font:inherit;font-size:14.5px;font-weight:500;cursor:pointer}
.mdr[data-tema="escuro"] .mdr-comprar{color:#09090B}

@keyframes mdrSobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes mdrFundo{from{opacity:0}to{opacity:1}}

/* Celular: o detalhe é uma folha de baixo, com fundo escurecido */
@media (max-width:599px){
  .mdr-ver{display:none}
  .mdr-resumo{font-size:13px}
  .mdr-fundo{position:fixed;inset:0;z-index:1190;background:rgba(9,9,11,.5);animation:mdrFundo .3s both}
  .mdr-folha{position:fixed;z-index:1200;left:0;right:0;bottom:0;top:auto;width:100%;min-width:0;max-height:85dvh;overflow:auto;overscroll-behavior:contain;border-radius:28px 28px 0 0;border-width:1px 0 0;padding:20px 20px calc(22px + env(safe-area-inset-bottom));animation:mdrFolha .45s cubic-bezier(.22,1,.36,1) both}
  @keyframes mdrFolha{from{transform:translateY(100%)}to{transform:none}}
  .mdr-fichas{grid-template-columns:1fr}
  .mdr-ficha{flex-direction:row;align-items:center;gap:10px}
  .mdr-ficha-t{width:62px;flex:none}
  .mdr-ficha .mdr-seg,.mdr-ficha .mdr-cont{flex:1}
  .mdr-ficha-v{flex:none;width:112px;text-align:right}
}
/* Computador: o fundo é invisível e cobre a tela, para o clique fora fechar o detalhe */
@media (min-width:600px){.mdr-fundo{position:fixed;inset:0;z-index:29;background:transparent}}
@media (prefers-reduced-motion:reduce){
  .mdr-folha,.mdr-fundo{animation:none}
  .mdr-gat,.mdr-cont i{transition:none}
}