/**
 * style.css — Visual do portal (tema claro/escuro automático, conforme o sistema do usuário).
 *
 * Dica: as cores ficam todas nas variáveis do :root. Para mudar a cor principal,
 * altere --primaria (e --primaria-forte para o hover).
 */

/* ===== Seção: cores (tema claro) ===== */
:root {
  --fundo: #f4f6fb;
  --cartao: #ffffff;
  --texto: #18202f;
  --suave: #5d6879;
  --borda: #e2e7f0;
  --primaria: #2563eb;
  --primaria-forte: #1d4ed8;
  --ok: #15803d;      --ok-fundo: #dcfce7;
  --alerta: #b45309;  --alerta-fundo: #fef3c7;
  --erro: #b91c1c;    --erro-fundo: #fee2e2;
  --info: #1d4ed8;    --info-fundo: #dbeafe;
  --neutro: #475569;  --neutro-fundo: #e2e8f0;
  --sombra: 0 1px 2px rgba(16,24,40,.05), 0 4px 16px rgba(16,24,40,.06);
  --raio: 14px;
  color-scheme: light;
}

/* ===== Seção: cores (tema escuro) — usado quando o computador está no modo escuro ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0d1117; --cartao: #161b22; --texto: #e6edf3; --suave: #9aa6b2; --borda: #2a313c;
    --primaria: #3b82f6; --primaria-forte: #60a5fa;
    --ok: #4ade80; --ok-fundo: #12301d; --alerta: #fbbf24; --alerta-fundo: #3a2a0b;
    --erro: #f87171; --erro-fundo: #3b1414; --info: #93c5fd; --info-fundo: #132a4d;
    --neutro: #cbd5e1; --neutro-fundo: #273041;
    --sombra: 0 1px 2px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}

/* ===== Seção: base ===== */
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* garante que campos escondidos fiquem escondidos */
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fundo); color: var(--texto); overflow-x: hidden; }
a { color: var(--primaria); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
h3 { font-size: 1.05rem; margin: 0; word-break: break-word; }
code { font-size: .85em; background: var(--neutro-fundo); padding: 1px 5px; border-radius: 6px; }
small, .pequeno { color: var(--suave); font-size: .85rem; }
main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 40px; }

/* ===== Seção: topo e rodapé ===== */
.topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 20px; background: var(--cartao); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 5; }
.marca { font-weight: 700; font-size: 1.1rem; color: var(--texto); }
.quem { color: var(--suave); font-size: .9rem; }
.menu { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-left: auto; align-items: center; }
.menu a, .menu .link { color: var(--suave); font-weight: 500; }
.menu a:hover, .menu .link:hover { color: var(--primaria); text-decoration: none; }
.rodape { text-align: center; color: var(--suave); font-size: .8rem; padding: 18px; }

/* ===== Seção: cartões e grades ===== */
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px; margin-bottom: 18px; }
.cartao.estreito { max-width: 460px; }
.grade-painel { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
.grade-painel aside { position: sticky; top: 76px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.sistema { color: var(--texto); display: block; transition: transform .12s, border-color .12s; }
.sistema:hover { text-decoration: none; border-color: var(--primaria); transform: translateY(-2px); }
.linha-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.nota { color: var(--suave); margin: 6px 0 10px; white-space: pre-wrap; word-break: break-word; }
dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: .9rem; }
dt { color: var(--suave); }
dd { margin: 0; text-align: right; word-break: break-word; }
.dl-larga dd { text-align: left; }
.rodape-card { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.destaque .btn { margin: 6px 0 14px; }
.voltar { margin: 0 0 10px; }
.vazio { color: var(--suave); font-style: italic; }
.sub { color: var(--suave); margin-top: 0; }

/* ===== Seção: etiquetas, avisos e ⓘ ===== */
.tag { display: inline-block; font-size: .75rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.tag-ok { color: var(--ok); background: var(--ok-fundo); }
.tag-alerta { color: var(--alerta); background: var(--alerta-fundo); }
.tag-erro { color: var(--erro); background: var(--erro-fundo); }
.tag-info { color: var(--info); background: var(--info-fundo); }
.tag-neutro { color: var(--neutro); background: var(--neutro-fundo); }
.aviso { padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; font-weight: 500; }
.aviso-ok { color: var(--ok); background: var(--ok-fundo); }
.aviso-erro { color: var(--erro); background: var(--erro-fundo); }
.aviso-alerta { color: var(--alerta); background: var(--alerta-fundo); }
.info { cursor: help; color: var(--primaria); font-size: .85em; }

/* ===== Seção: formulários e botões ===== */
label { display: block; font-weight: 500; margin-bottom: 12px; font-size: .9rem; }
input, select, textarea { display: block; width: 100%; margin-top: 5px; padding: 9px 11px; font: inherit; color: var(--texto); background: var(--fundo); border: 1px solid var(--borda); border-radius: 9px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primaria); outline-offset: 1px; }
.btn { display: inline-block; cursor: pointer; font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 9px; border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); }
.btn:hover { border-color: var(--primaria); text-decoration: none; }
.btn.primario { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.btn.primario:hover { background: var(--primaria-forte); }
.btn.perigo { color: var(--erro); }
.btn.mini { padding: 4px 10px; font-size: .82rem; }
.btn:disabled { opacity: .6; cursor: wait; }
button.link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
form.inline { display: inline; }
.progresso { position: relative; height: 26px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 9px; overflow: hidden; margin-bottom: 12px; }
.progresso .barra { height: 100%; width: 0; background: var(--primaria); transition: width .2s; }
.progresso .pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: .82rem; font-weight: 600; }

/* ===== Seção: WARs aguardando ===== */
.item { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--borda); }
.item:first-of-type { border-top: 0; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.agendar { display: flex; gap: 6px; }
.agendar input { margin: 0; width: auto; }
.acoes-linha { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.inline-senha { display: flex; gap: 4px; }
.inline-senha input { margin: 0; width: 130px; padding: 4px 8px; }

/* ===== Seção: tabelas e histórico ===== */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; color: var(--suave); font-weight: 600; border-bottom: 1px solid var(--borda); padding: 8px; }
td { border-bottom: 1px solid var(--borda); padding: 8px; vertical-align: top; }
tr.falha td { background: var(--erro-fundo); }
.historico { list-style: none; margin: 0; padding: 0; }
.historico li { padding: 8px 0; border-bottom: 1px solid var(--borda); }
.historico li.falha { color: var(--erro); }
.historico .quando { color: var(--suave); font-size: .85rem; }

/* ===== Seção: login ===== */
.login { max-width: 400px; margin: 8vh auto 0; text-align: center; }
.login form { text-align: left; margin-top: 16px; }
.login .btn { width: 100%; }
.versao { color: var(--suave); font-size: .8rem; margin: 14px 0 0; }

/* ===== @media: tablet — painel vira uma coluna (formulário de envio vai para cima) ===== */
@media (max-width: 900px) {
  .grade-painel { grid-template-columns: 1fr; }
  .grade-painel aside { position: static; order: -1; }
}

/* ===== @media: celular — tabelas viram blocos empilhados, sem barra horizontal ===== */
@media (max-width: 640px) {
  .menu { margin-left: 0; width: 100%; }
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tr { border-bottom: 1px solid var(--borda); padding: 8px 0; }
  td { border: 0; padding: 3px 0; }
  .acoes-linha { justify-content: flex-start; }
  .agendar { width: 100%; }
  .agendar input { flex: 1; }
}