:root {
  --fundo: #ffffff; --tinta: #0a0a0a; --claro: #ececec; --medio: #8a8a8a; --linha: #d6d6d6;
  --casa: #0a0a0a; --casa-t: #ffffff; --remoto: #ffffff; --remoto-t: #0a0a0a; --folga: #ececec; --folga-t: #6b6b6b;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --fundo: #0b0b0b; --tinta: #f3f3ee; --claro: #1f1f1f; --medio: #8f8f8f; --linha: #2d2d2d;
    --casa: #f3f3ee; --casa-t: #0b0b0b; --remoto: #0b0b0b; --remoto-t: #f3f3ee; --folga: #1f1f1f; --folga-t: #9a9a9a; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 15px/1.4 Archivo, system-ui, sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: transparent; border: 1px solid var(--tinta); border-radius: 0; padding: .45em .8em; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.botao { border: 1px solid var(--tinta); padding: .45em .8em; text-decoration: none; display: inline-block; }
.primario { background: var(--tinta); color: var(--fundo); font-weight: 800; }
.perigo { border-color: #c4161c; color: #c4161c; margin-right: auto; }
h1, h2, h3 { font-family: Anton, Impact, sans-serif; font-weight: 400; letter-spacing: .01em; margin: 0; text-transform: uppercase; }

.topo { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; padding: 16px; border-bottom: 2px solid var(--tinta); position: sticky; top: 0; background: var(--fundo); z-index: 5; }
.topo h1 { font-size: 28px; line-height: 1; }
.topo h1 span { background: var(--tinta); color: var(--fundo); padding: 0 .2em; }
.abas { display: flex; flex-wrap: wrap; gap: 6px; }
.abas button { border-color: var(--linha); }
.abas button[aria-current="page"] { background: var(--tinta); color: var(--fundo); border-color: var(--tinta); }
.eu { margin-left: auto; display: flex; gap: 8px; align-items: center; font-weight: 600; }
.eu select { padding: .35em; border: 1px solid var(--tinta); background: var(--fundo); }

.hoje { padding: 12px 16px; border-bottom: 1px solid var(--linha); display: flex; flex-wrap: wrap; gap: 6px 22px; }
.hoje b { font-weight: 800; }
main { padding: 16px; max-width: 1400px; margin: 0 auto; }

.nav { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.nav h2 { font-size: 26px; margin-right: auto; }

/* semana: uma coluna por dia (vira lista no celular) */
.semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--linha); border-top: 1px solid var(--linha); }
.dia { border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding: 10px; min-height: 220px; display: flex; flex-direction: column; gap: 6px; }
.dia.hoje-dia { box-shadow: inset 0 4px 0 var(--tinta); }
.dia h3 { font-size: 18px; display: flex; justify-content: space-between; }
.dia h3 small { font-family: Archivo, sans-serif; font-size: 12px; color: var(--medio); text-transform: none; }
.reu { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--tinta); background: var(--claro); padding: 6px 8px; font-size: 13px; }
.reu b { display: block; }
.pes { display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%; text-align: left; border: 1px solid transparent; padding: 4px 6px; font-size: 14px; }
.pes:hover { border-color: var(--linha); }
.pes.eu-mesmo { font-weight: 800; }
.chip { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--tinta); white-space: nowrap; }
.chip.casa { background: var(--c, var(--casa)); border-color: var(--c, var(--casa)); color: #fff; }
.chip.remoto { background: transparent; border: 2px solid var(--c, var(--tinta)); color: var(--tinta); padding: 1px 5px; }
.chip.folga { background: var(--folga); color: var(--folga-t); border-color: var(--folga); }
.chip.vazio { border-style: dashed; border-color: var(--linha); color: var(--medio); }
.pes small { color: var(--medio); font-size: 12px; }
.legenda { margin-top: 12px; color: var(--medio); font-size: 13px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* mes */
.mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--linha); border-top: 1px solid var(--linha); }
.mes .cab { font-weight: 800; padding: 6px 8px; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); text-transform: uppercase; font-size: 12px; }
.cel { border: 0; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); min-height: 96px; padding: 6px 8px; text-align: left; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.cel.fora { color: var(--medio); }
.cel.hoje-dia { box-shadow: inset 0 3px 0 var(--tinta); }
.cel strong { font-size: 16px; }
.cel { min-height: 130px; }
.cel .r { border-left: 3px solid var(--tinta); background: var(--claro); padding: 1px 4px; font-weight: 600; }
.gente { display: flex; flex-direction: column; gap: 2px; }
.m { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m i { flex: none; width: 10px; height: 10px; border: 2px solid var(--c, var(--tinta)); }
.m.casa i { background: var(--c, var(--casa)); }
.m.remoto i { background: transparent; }
.m.folga { color: var(--medio); }
.m.folga i { background: var(--folga); border-color: var(--medio); }
.pts { display: inline-flex; gap: 2px; margin-left: 4px; vertical-align: middle; }
.pts i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); display: inline-block; }
.reu small { display: block; color: var(--medio); font-size: 12px; }
.reu.minha { border-left-width: 5px; }
.legenda .m { font-size: 13px; color: var(--tinta); }
.quem { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.quem legend { font-weight: 800; margin-bottom: 4px; }
.quem legend small { font-weight: 400; color: var(--medio); }
.quem label { display: flex; align-items: center; gap: 6px; border: 1px solid var(--linha); padding: 6px 8px; }
.quem input { width: auto; }
.quem i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.m.eu-mesmo { font-weight: 800; }
#dia .pes { border-bottom: 1px solid var(--linha); padding: 8px 4px; }
#dia .reu { margin-bottom: 6px; }

/* padrao */
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--linha); padding: 6px; text-align: left; vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; }
td button { width: 100%; border: 0; padding: 4px; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.tabela { overflow-x: auto; }

/* reunioes e assinar */
.lista { display: grid; gap: 8px; margin: 10px 0 28px; }
.item { display: flex; gap: 12px; align-items: center; justify-content: space-between; border: 1px solid var(--linha); padding: 10px 12px; flex-wrap: wrap; }
.item p { margin: 2px 0 0; color: var(--medio); font-size: 13px; }
.secao { margin-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.secao h2 { font-size: 22px; }
.feed { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.feed input { flex: 1 1 260px; min-width: 0; padding: .45em; border: 1px solid var(--linha); background: var(--claro); font-size: 12px; }
.passos { max-width: 70ch; color: var(--tinta); }
.passos li { margin: 4px 0; }

dialog { border: 2px solid var(--tinta); padding: 0; background: var(--fundo); color: var(--tinta); width: min(520px, calc(100vw - 32px)); }
dialog::backdrop { background: rgb(0 0 0 / .45); }
.cartao { padding: 20px; display: grid; gap: 12px; }
.cartao h2 { font-size: 24px; }
.cartao p { margin: 0; }
.cartao input, .cartao select, .cartao textarea { padding: .45em; border: 1px solid var(--tinta); background: var(--fundo); width: 100%; }
.modos { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.modos legend { font-weight: 800; margin-bottom: 4px; }
.modos label { border: 1px solid var(--linha); padding: 8px; display: flex; gap: 6px; align-items: center; }
.modos input { width: auto; }
.linha { display: flex; gap: 10px; flex-wrap: wrap; }
.linha label { flex: 1 1 120px; display: grid; gap: 4px; }
.bloco { display: grid; gap: 4px; }
.acoes { display: flex; gap: 8px; justify-content: flex-end; }
.erro { color: #c4161c; min-height: 0; }
.erro:empty { display: none; }
[hidden] { display: none !important; }

@media (max-width: 860px) {
  .semana { grid-template-columns: 1fr; }
  .dia { min-height: 0; }
  .eu { margin-left: 0; }
  .topo { position: static; }
  .cel { min-height: 110px; padding: 5px; font-size: 11px; }
}
@media (max-width: 600px) {
  .mes .cab { padding: 4px; font-size: 10px; }
  .cel { min-height: 72px; padding: 4px; font-size: 10px; }
  /* celular: reuniao vira uma barra e cada pessoa vira um quadradinho (o nome aparece no painel do dia) */
  .cel .r { font-size: 0; height: auto; padding: 1px 0; border: 0; background: var(--claro); }
  .cel .r .pts { margin: 0; }
  .gente { flex-direction: row; flex-wrap: wrap; gap: 2px; }
  .m { font-size: 0; gap: 0; }
  .m i { width: 8px; height: 8px; }
}