/* Planilha de prática do Laboratório (Ensino Social). Sem estilo em linha: a política do site só aceita folha de estilo. */
:root {
  --tinta: #04110f; --tinta2: #0d2b27; --mint: #5eead4; --teal: #12b8a2; --amarelo: #fdc400;
  --papel: #ffffff; --linha: #d5dde6; --cabeca: #eef2f6; --texto: #17212b; --fraco: #5b6876;
  --certo: #15803d; --errado: #b91c1c; --travada: #f6f8fa;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { display: flex; flex-direction: column; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--texto); background: #f3f5f8; }
.topo { padding: 12px 16px 6px; background: linear-gradient(170deg, var(--tinta2), var(--tinta)); color: #f4fbf9; }
.topo h1 { font-size: 18px; font-weight: 650; }
.topo p { margin-top: 3px; font-size: 14px; color: rgba(244, 251, 249, .82); max-width: 900px; }
.tarefas { padding: 8px 16px; background: var(--tinta); color: #f4fbf9; border-bottom: 3px solid var(--teal); }
.tarefas ol { list-style: none; display: flex; flex-direction: column; gap: 4px; max-width: 900px; }
.tarefas li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: rgba(244, 251, 249, .9); }
.tarefas li::before { content: "○"; color: var(--amarelo); font-weight: 700; flex: 0 0 auto; }
.tarefas li.feita { color: rgba(244, 251, 249, .6); }
.tarefas li.feita::before { content: "✓"; color: var(--mint); }
.tarefas code, #dica code { font: 600 13px ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(94, 234, 212, .14); padding: 1px 5px; border-radius: 4px; }
.barra { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--papel); border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 3; }
#onde { flex: 0 0 52px; text-align: center; font: 600 14px ui-monospace, Menlo, monospace; padding: 6px 4px; border: 1px solid var(--linha); border-radius: 6px; background: var(--cabeca); }
.fx { font: italic 600 14px Georgia, serif; color: var(--fraco); }
#formula { flex: 1; min-width: 0; font: 15px ui-monospace, SFMono-Regular, Menlo, monospace; padding: 7px 9px; border: 1px solid var(--linha); border-radius: 6px; background: var(--papel); color: var(--texto); }
#formula:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: var(--teal); }
#formula.editando { background: #fffbea; }
#formula[readonly] { background: var(--travada); color: var(--fraco); }
.bt { font: 600 14px system-ui, sans-serif; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--linha); background: var(--papel); color: var(--texto); cursor: pointer; }
.bt:hover { border-color: var(--teal); }
.bt.forte { background: var(--teal); border-color: var(--teal); color: #04110f; }
.folha { flex: 1; min-height: 0; overflow: auto; padding: 12px; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; background: var(--papel); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
th, td { border: 1px solid var(--linha); height: 32px; padding: 0 8px; white-space: nowrap; font-size: 14px; }
th { background: var(--cabeca); color: var(--fraco); font-weight: 600; text-align: center; min-width: 38px; position: sticky; top: 0; z-index: 1; user-select: none; }
th.lin { left: 0; z-index: 2; position: sticky; }
td { min-width: 108px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; cursor: cell; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.titulo { font-weight: 650; background: #f8fafc; }
td.travada { background: var(--travada); color: #334155; cursor: default; }
td.alvo { background: #fffbea; box-shadow: inset 0 0 0 2px rgba(253, 196, 0, .55); }
td.alvo.certa { background: #ecfdf3; box-shadow: inset 0 0 0 2px rgba(21, 128, 61, .45); }
td.erro { color: var(--errado); font-weight: 600; }
td.sel { outline: 2px solid var(--teal); outline-offset: -2px; }
td.faixa { background: rgba(18, 184, 162, .16); }
.pe { padding: 10px 16px 12px; background: var(--papel); border-top: 1px solid var(--linha); }
.acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#placar { font-weight: 650; }
#placar.tudo { color: var(--certo); }
#dica { margin-top: 6px; min-height: 21px; font-size: 14px; color: #334155; max-width: 900px; }
#dica.ruim { color: var(--errado); }
#dica.bom { color: var(--certo); }
.fonte { margin-top: 6px; font-size: 11.5px; color: var(--fraco); }
.fonte a { color: inherit; }
.falha { padding: 24px 16px; color: var(--errado); font-weight: 600; }
/* celular: a planilha precisa de altura; o enunciado comprido sai (o roteiro da página já conta a história) */
@media (max-width: 640px) {
  td { min-width: 92px; }
  .topo { padding: 8px 12px 4px; }
  .topo h1 { font-size: 15px; }
  .topo p { display: none; }
  .tarefas { padding: 6px 12px; }
  .tarefas li { font-size: 13px; }
  .folha { padding: 8px; }
  .fonte { display: none; }
}