/* ═══════════════════════════════════════════════════════════════════════
   MEDIDAS — limite da lista, peso do cartão, tempo trabalhado
   ═══════════════════════════════════════════════════════════════════════
   Os selos do cabeçalho ficam do MESMO tamanho e peso do contador que já
   existia ali. Eles não competem com o nome da lista: quem olha a coluna
   procura o nome primeiro, e os números respondem depois.

   A cor só entra quando há o que dizer. Lista dentro do limite usa a mesma
   tinta neutra de sempre; âmbar é "chegou", vermelho é "passou". Um selo
   colorido em toda coluna vira papel de parede e para de avisar.
   ═══════════════════════════════════════════════════════════════════════ */

.kb-lista-cont.med-cheia{
  background:rgba(245,158,11,.2);border-color:rgba(245,158,11,.42);color:#fbbf24;
}
.kb-lista-cont.med-estourou{
  background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.45);color:#fca5a5;
}

.med-selo{
  display:inline-flex;align-items:center;gap:3px;flex-shrink:0;
  padding:2px 7px;border-radius:20px;
  font-family:'Inter',sans-serif;font-size:.66rem;font-weight:600;
  font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:rgba(240,240,240,.55);
}
.med-selo-peso{color:#c4b5fd;background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.26);}
.med-selo-tempo{color:#7dd3fc;background:rgba(56,189,248,.13);border-color:rgba(56,189,248,.25);}

.med-chip-peso{color:#c4b5fd;}
.med-chip-tempo{color:#7dd3fc;}
/* Contagem em curso pulsa devagar. Rápido demais vira alarme; este é só um
   sinal de vida, para o número parado não parecer defeito. */
.med-correndo{animation:medPulso 2.4s ease-in-out infinite;}
@keyframes medPulso{0%,100%{opacity:1}50%{opacity:.5}}

/* ── O painel do detalhe ─────────────────────────────────────────────── */
.med-painel{
  margin:0 0 4px;padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
}
.med-linha{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.med-linha + .med-ajuda + .med-linha{margin-top:12px;}
.med-rot{
  display:flex;align-items:center;gap:7px;flex:1;min-width:120px;
  font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;
  color:rgba(240,240,240,.86);
}
.med-rot-ico{
  width:24px;height:24px;flex-shrink:0;border-radius:7px;
  display:flex;align-items:center;justify-content:center;font-size:.74rem;
  background:rgba(255,255,255,.06);color:rgba(240,240,240,.6);
}
.med-inp{
  width:88px;padding:7px 10px;border-radius:9px;text-align:right;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  font-family:'Inter',sans-serif;font-size:.8rem;color:rgba(240,240,240,.9);outline:none;
}
.med-inp:focus{border-color:rgba(99,102,241,.5);}
.med-inp::placeholder{color:rgba(240,240,240,.3);}
.med-total{
  font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;
  font-variant-numeric:tabular-nums;color:rgba(240,240,240,.92);min-width:56px;text-align:right;
}
.med-btn{
  height:32px;padding:0 12px;border-radius:9px;cursor:pointer;flex-shrink:0;
  font-family:'Inter',sans-serif;font-size:.76rem;font-weight:600;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:rgba(240,240,240,.8);transition:background .14s,color .14s;
}
.med-btn:hover{background:rgba(255,255,255,.14);color:#fff;}
.med-btn-forte{background:rgba(56,189,248,.18);border-color:rgba(56,189,248,.34);color:#7dd3fc;}
.med-btn-forte:hover{background:rgba(56,189,248,.28);color:#bae6fd;}
.med-btn-fraco{background:transparent;border-color:transparent;color:rgba(240,240,240,.35);}
.med-btn-fraco:hover{background:rgba(239,68,68,.12);color:#fca5a5;}
.med-ajuda{
  margin:6px 0 0 31px;font-size:.71rem;line-height:1.5;
  color:rgba(240,240,240,.4);max-width:52ch;
}

/* ── O limite, dentro do menu da lista ───────────────────────────────── */
.med-limite{padding:6px 10px 8px;}
.med-limite-rot{
  display:block;margin-bottom:5px;
  font-size:.68rem;font-weight:600;letter-spacing:.02em;color:rgba(240,240,240,.45);
}
.med-limite-inp{
  width:100%;padding:8px 10px;border-radius:9px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  font-family:'Inter',sans-serif;font-size:.8rem;color:rgba(240,240,240,.9);outline:none;
}
.med-limite-inp:focus{border-color:rgba(99,102,241,.5);}
.med-limite-inp::placeholder{color:rgba(240,240,240,.3);}
.med-limite-ajuda{
  margin:6px 0 0;font-size:.68rem;line-height:1.45;color:rgba(240,240,240,.38);
}

/* ═══════════════════════════════════════════════════════════════════════
   TEMA CLARO
   ═══════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .kb-lista-cont.med-cheia{
  background:#fff3dc;border-color:#eecb8a;color:#a35d06;
}
html[data-theme="light"] .kb-lista-cont.med-estourou{
  background:#fdeced;border-color:#f3c2c8;color:#c2334a;
}
html[data-theme="light"] .med-selo{background:#f1f6fb;border-color:#dbe7f7;color:#5b7590;}
html[data-theme="light"] .med-selo-peso{background:#f3eefe;border-color:#ddcffa;color:#6d28d9;}
html[data-theme="light"] .med-selo-tempo{background:#e6f4fe;border-color:#bfe1f8;color:#0369a1;}
html[data-theme="light"] .med-chip-peso{color:#6d28d9;}
html[data-theme="light"] .med-chip-tempo{color:#0369a1;}

html[data-theme="light"] .med-painel{background:#f7fbff;border-color:#e5eef8;}
html[data-theme="light"] .med-rot{color:#12263f;}
html[data-theme="light"] .med-rot-ico{background:#eaf3ff;color:#2b6fe0;}
html[data-theme="light"] :is(.med-inp,.med-limite-inp){
  background:#fff;border-color:#dbe7f7;color:#12263f;
}
html[data-theme="light"] :is(.med-inp,.med-limite-inp):focus{border-color:#2b6fe0;}
html[data-theme="light"] :is(.med-inp,.med-limite-inp)::placeholder{color:#96a9bc;}
html[data-theme="light"] .med-total{color:#12263f;}
html[data-theme="light"] .med-btn{background:#f2f7fc;border-color:#dbe7f7;color:#3f6079;}
html[data-theme="light"] .med-btn:hover{background:#e5eefa;color:#12509f;}
html[data-theme="light"] .med-btn-forte{background:#e6f4fe;border-color:#bfe1f8;color:#0369a1;}
html[data-theme="light"] .med-btn-forte:hover{background:#d5ecfd;color:#025480;}
html[data-theme="light"] .med-btn-fraco{background:transparent;border-color:transparent;color:#93a8bc;}
html[data-theme="light"] .med-btn-fraco:hover{background:#fdeced;color:#c2334a;}
html[data-theme="light"] :is(.med-ajuda,.med-limite-ajuda){color:#6b8099;}
html[data-theme="light"] .med-limite-rot{color:#63798f;}