:root {
  color-scheme: dark;
  --fundo: #161615;
  --painel: #201f1e;
  --texto: #eeece7;
  --suave: #a19e96;
  --linha: #34332f;
  --vermelho: #f01414; /* vermelho oficial ARTeam: faixas e marcas */
  --marca: #ff6b6b; /* versão clara, legível como texto sobre o fundo escuro */
  --marca-forte: #e01010; /* botões: garante contraste com o texto branco */
  --marca-texto: #ffffff;
  --marca-suave: #3a1616;
  --alerta: #ff8a7a;
  --alerta-suave: #3f1a17;
  --aviso: #e0b35c;
  --aviso-suave: #352a14;
  --ok: #6cc0a8;
  --ok-suave: #1d322c;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 15px; margin: 0 0 12px; }
a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }

.layout { display: grid; grid-template-columns: 200px 1fr; min-height: 100vh; }
.lateral { background: var(--painel); border-right: 1px solid var(--linha); padding: 20px 12px; display: flex; flex-direction: column; gap: 2px; }
.logo { font-weight: 700; padding: 0 10px 16px; }
.logo-img { display: block; height: auto; width: 128px; }
.login .logo-img { width: 200px; margin: 0 auto 8px; }
.lateral a { padding: 8px 10px; border-radius: 6px; color: var(--texto); }
.lateral a:hover { text-decoration: none; background: var(--fundo); }
.lateral a.ativo { background: var(--marca-suave); color: var(--texto); font-weight: 600; box-shadow: inset 3px 0 0 var(--vermelho); }
.rodape { margin-top: auto; padding: 10px; color: var(--suave); font-size: 13px; }
.rodape button { margin-top: 6px; }
.rodape a.copia { display: block; padding: 4px 0; font-size: 13px; color: var(--marca); }
main { padding: 24px; min-width: 0; max-width: 1180px; width: 100%; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }

.painel { background: var(--painel); border: 1px solid var(--linha); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.numero { background: var(--painel); border: 1px solid var(--linha); border-radius: 10px; padding: 14px 16px; }
.numero span { display: block; color: var(--suave); font-size: 13px; }
.numero strong { font-size: 21px; font-variant-numeric: tabular-nums; }
.numero.ruim strong { color: var(--alerta); }
.colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.colunas > .painel { margin-bottom: 0; min-width: 0; }
.colunas + details, .colunas + section { margin-top: 16px; }
.colunas + .painel, .colunas + .colunas { margin-top: 16px; }

.rolavel { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; font-weight: 600; color: var(--suave); padding: 6px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
td { padding: 9px 10px; border-bottom: 1px solid var(--linha); }
tr:last-child td { border-bottom: 0; }
.botoes { white-space: nowrap; }
.botoes form { white-space: normal; min-width: 240px; }
.dir { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vazio { color: var(--suave); padding: 8px 0; margin: 0; }
.suave { color: var(--suave); font-size: 13px; }

.etiqueta { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--ok-suave); color: var(--ok); white-space: nowrap; }
.etiqueta.neutra { background: var(--linha); color: var(--texto); }
.etiqueta.risco, .etiqueta.previsto { background: var(--aviso-suave); color: var(--aviso); }
.etiqueta.saiu, .etiqueta.atrasado { background: var(--alerta-suave); color: var(--alerta); }

input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea { width: 100%; padding: 8px 10px; background: var(--painel); border: 1px solid var(--linha); border-radius: 6px; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
label { display: block; font-size: 13px; color: var(--suave); }
label > input, label > select, label > textarea { margin-top: 3px; color: var(--texto); font-size: 15px; }
button { padding: 8px 14px; border: 1px solid var(--linha); border-radius: 6px; background: var(--painel); cursor: pointer; }
button:hover { background: var(--fundo); }
button.primario { background: var(--marca-forte); border-color: var(--marca-forte); color: var(--marca-texto); font-weight: 600; }
button.primario:hover { background: var(--vermelho); }
button.pequeno { padding: 3px 10px; font-size: 13px; white-space: nowrap; }
.formulario { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; }
.formulario .largo { grid-column: 1 / -1; }
.filtros { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.filtros input { flex: 1 1 240px; width: auto; }
.filtros select { flex: 0 1 190px; width: auto; }
.abas { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.abas a { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--linha); color: var(--texto); }
.abas a.ativo { background: var(--marca-suave); color: var(--marca); border-color: transparent; font-weight: 600; }
.duracao { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.duracao input { width: 72px; }
.acoes { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
details summary { cursor: pointer; font-weight: 600; }
details[open] summary { margin-bottom: 12px; }

.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li { padding: 10px 0; border-top: 1px solid var(--linha); white-space: pre-wrap; overflow-wrap: anywhere; }
.tarefa-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
label.marcar { display: flex; align-items: center; gap: 8px; color: var(--texto); font-size: 15px; }
label.marcar input { width: auto; margin: 0; }
.tarefa { color: var(--texto); font-size: 15px; flex: 1 1 auto; min-width: 0; display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; }
.tarefa input { width: auto; margin-top: 4px; }
.tarefa.feita span:first-of-type { text-decoration: line-through; color: var(--suave); }
.erro { color: var(--alerta); font-size: 14px; margin: 8px 0 0; }
.erro:empty { display: none; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login form { border-top: 3px solid var(--vermelho); width: 100%; max-width: 360px; background: var(--painel); border: 1px solid var(--linha); border-radius: 12px; padding: 24px; display: grid; gap: 12px; }

@media (max-width: 1000px) {
  .colunas { grid-template-columns: 1fr; }
  .colunas > .painel + .painel { margin-top: 16px; }
}
@media (min-width: 761px) {
  .icone, .atalhos { display: none; }
}
@media (max-width: 760px) {
  :root { --barra-topo: calc(52px + env(safe-area-inset-top)); --barra-menu: calc(60px + env(safe-area-inset-bottom)); }
  .layout { display: block; min-height: 0; }

  /* Barra superior: logo e Sair */
  .logo { position: fixed; z-index: 3; top: 0; left: 0; right: 0; height: var(--barra-topo); padding: env(safe-area-inset-top) 16px 0; display: flex; align-items: center; background: var(--painel); border-bottom: 1px solid var(--linha); }
  .rodape { position: fixed; z-index: 4; top: env(safe-area-inset-top); right: 16px; height: 52px; margin: 0; padding: 0; display: flex; align-items: center; }
  .rodape .quem, .rodape a.copia { display: none; }
  .rodape button { margin: 0; }

  /* Menu inferior */
  .lateral { position: fixed; z-index: 2; left: 0; right: 0; bottom: 0; height: var(--barra-menu); padding: 0 4px env(safe-area-inset-bottom); flex-direction: row; align-items: stretch; gap: 0; border-right: 0; border-top: 1px solid var(--linha); }
  .lateral a { flex: 1 1 0; min-width: 0; padding: 7px 0 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--suave); border-radius: 0; }
  .lateral a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lateral a.ativo { background: none; color: var(--texto); box-shadow: inset 0 2px 0 var(--vermelho); }
  .lateral a.ativo .icone { stroke: var(--marca); }
  .icone { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  main { padding: calc(var(--barra-topo) + 16px) 16px calc(var(--barra-menu) + 20px); }
  h1 { font-size: 20px; overflow-wrap: anywhere; }

  /* Campos a partir de 16px evitam o zoom automático do iPhone */
  input, select, textarea, label > input, label > select, label > textarea { font-size: 16px; }
  input:not([type="checkbox"]), select, button { min-height: 44px; }
  button.pequeno { padding: 8px 12px; font-size: 14px; }
  .rodape button.pequeno { min-height: 34px; padding: 4px 12px; }
  .filtros input, .filtros select { flex: 1 1 100%; width: 100%; }
  .topo .filtros { width: 100%; margin-bottom: 0; }
  .numeros { grid-template-columns: 1fr 1fr; gap: 8px; }
  .numero { padding: 10px 12px; min-width: 0; }
  .numero strong { font-size: 17px; }
  .abas { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .abas a { flex: none; padding: 10px 12px; }
  .formulario { grid-template-columns: 1fr; }
  .duracao { width: 100%; }
  .duracao label { flex: 1 1 auto; }

  .atalhos { display: flex; gap: 8px; margin-bottom: 14px; }
  .atalhos > * { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px; text-align: center; border: 1px solid var(--linha); border-radius: 6px; background: var(--painel); }

  /* Cada linha de tabela vira um cartão */
  .painel.rolavel, .rolavel { overflow: visible; }
  .painel.rolavel { padding: 0; border: 0; background: none; }
  table, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tbody tr { padding: 10px 14px; margin-bottom: 8px; background: var(--painel); border: 1px solid var(--linha); border-radius: 10px; }
  .painel:not(.rolavel) tbody tr, .painel .rolavel tbody tr { padding: 10px 0; margin: 0; background: none; border: 0; border-top: 1px solid var(--linha); border-radius: 0; }
  td, tr:last-child td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; border: 0; text-align: right; white-space: normal; overflow-wrap: anywhere; }
  td[data-rotulo]::before { content: attr(data-rotulo); flex: none; color: var(--suave); font-size: 13px; text-align: left; }
  td:first-child { font-weight: 600; text-align: left; }
  td:first-child::before { display: none; }
  td:empty { display: none; }
  td.botoes { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; white-space: normal; }
  td.botoes::before { display: none; }
  td.botoes > button { flex: 1 1 0; }
  td.botoes form { flex: 1 1 100%; min-width: 0; text-align: left; }
  td[data-rotulo=""]::before { display: none; }
  td > a[href^="https://wa.me"] { flex: 1 1 100%; min-height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--linha); border-radius: 6px; }
  td:has(> a[href^="https://wa.me"])::before { display: none; }
  .login { min-height: 100dvh; }
}