/* HUB do Grupo ITIBAN: Calendario (T-0906). Usa os tokens e as pecas de app.css (card, tabs, pill, btn); sem estilo inline (CSP).
   Computador (1366 e 1920): mes em grade de 7 colunas na largura da casca, cada dia com seus itens. Ate 900 px (360/390/768): a
   grade some e entra a lista por dia, sem rolagem lateral, alvos de 44 px (48 px ate 700) e campos de 16 px.
   Escuro: o HUB ainda nao tem tema escuro na casca; o calendario responde a prefers-color-scheme so dentro do proprio cartao. */
.cal{--c-bg:var(--surf);--c-txt:var(--txt);--c-mut:var(--mut);--c-line:var(--line);--c-dia:#fbfaf7;--c-fora:#f3f1ec;--c-hoje:var(--info);
  --c-off:var(--off-bg);--c-off-t:var(--off);--c-info:var(--info-bg);--c-info-t:var(--info);--c-warn:var(--warn-bg);--c-warn-t:var(--warn);
  --c-ok:var(--ok-bg);--c-ok-t:var(--ok);--c-bad:var(--bad-bg);--c-bad-t:var(--bad);
  background:var(--c-bg);color:var(--c-txt);padding:18px 22px}
@media (prefers-color-scheme:dark){
  .cal{--c-bg:#161b23;--c-txt:#eceff4;--c-mut:#aab2c0;--c-line:#2b3342;--c-dia:#1b212b;--c-fora:#12161d;--c-hoje:#7ea6ff;
    --c-off:#2a303b;--c-off-t:#c3cad6;--c-info:#1d2c4d;--c-info-t:#a9c4ff;--c-warn:#3b2c12;--c-warn-t:#f2c477;
    --c-ok:#153523;--c-ok-t:#8fdca9;--c-bad:#40201d;--c-bad-t:#ffa8a0}
}
.cal .mut,.cal .small.mut{color:var(--c-mut)}
.cal .pill.p-off{background:var(--c-off);color:var(--c-off-t)}
.cal .pill.p-info{background:var(--c-info);color:var(--c-info-t)}
.cal .pill.p-warn{background:var(--c-warn);color:var(--c-warn-t)}
.cal .pill.p-ok{background:var(--c-ok);color:var(--c-ok-t)}
.cal .pill.p-bad{background:var(--c-bad);color:var(--c-bad-t)}
.cal-tabs .tab{min-height:44px}

.cal-nav{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cal-nav .btn{min-height:44px;min-width:44px;justify-content:center;font-size:20px;line-height:1}
.cal-nav .btn:last-child{font-size:14px;margin-left:auto}
.cal-mes{margin:0;font-size:20px;font-weight:700;min-width:0}
.cal-mes::first-letter,.cal-lg h4::first-letter{text-transform:uppercase}
.cal-leg{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 14px;padding:0}
.cal-nota{margin:14px 0 0}

/* ---- item (grade e lista) ---- */
.cal-it{display:flex;flex-direction:column;gap:2px;min-width:0;padding:5px 7px;border-radius:8px;border:1px solid var(--c-line);border-left-width:4px;
  background:var(--c-bg);color:inherit;text-decoration:none;font-size:12.5px;line-height:1.3}
.cal-it:hover{border-color:var(--c-mut)}
.cal-it:focus-visible{outline:2px solid var(--c-hoje);outline-offset:1px}
.cal-it .cal-ch{align-self:flex-start;font-size:11px;padding:1px 8px}
.cal-tx{display:flex;flex-direction:column;min-width:0}
.cal-no{font-weight:600;overflow-wrap:anywhere}
.cal-rd{overflow-wrap:anywhere}
.cal-off{border-left-color:var(--c-off-t)}.cal-info{border-left-color:var(--c-info-t)}.cal-warn{border-left-color:var(--c-warn-t)}
.cal-ok{border-left-color:var(--c-ok-t)}.cal-bad{border-left-color:var(--c-bad-t)}

/* ---- grade do mes (computador) ---- */
.cal-grade{border:1px solid var(--c-line);border-radius:10px;overflow:hidden}
.cal-sem,.cal-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-sem div{padding:8px 10px;font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.04em;color:var(--c-mut);border-bottom:1px solid var(--c-line)}
.cal-dia{display:flex;flex-direction:column;gap:4px;min-width:0;min-height:112px;padding:6px;background:var(--c-dia);border-right:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.cal-dia:nth-child(7n){border-right:0}
.cal-dia.fora{background:var(--c-fora);color:var(--c-mut)}
.cal-dia.fora .cal-it{opacity:.85}
.cal-n{font-size:13px;font-weight:650;padding:0 2px}
.cal-dia.hoje .cal-n{display:inline-flex;align-self:flex-start;min-width:24px;height:24px;align-items:center;justify-content:center;border-radius:99px;background:var(--c-hoje);color:var(--c-bg)}

/* ---- lista por dia (celular e tablet) ---- */
.cal-lista,.cal-vazio-m{display:none}

@media (max-width:900px){
  .cal{padding:14px}
  .cal-grade{display:none}
  .cal-lista{display:block}
  .cal-vazio-m{display:block;margin:6px 0 0}
  .cal-lg{margin:0 0 14px}
  .cal-lg h4{margin:0 0 6px;font-size:14px;font-weight:650}
  .cal-lg .cal-it{margin-bottom:8px;min-height:44px;padding:10px 12px;font-size:15px;gap:4px}
  .cal-lg .cal-it .cal-ch{font-size:12px}
  .cal-mes{font-size:17px;flex:1;text-align:center}
  .cal-nav .btn:last-child{margin-left:0}
}
@media (max-width:700px){
  .cal-nav .btn,.cal-lg .cal-it,.cal-tabs .tab{min-height:48px}
}