/* =================================================================
   sonhos-laboratorio.css · Portal II · Sonhos · LABORATÓRIO (PESQUISAS E PROJETOS)
   Estilo: PÁGINA PESSOAL DE 1999 (Web 1.0)
   Ligado a: sonhos-laboratorio.html
   ================================================================= */

/* -----------------------------------------------------------------
   BASE COMPARTILHADA DO PORTAL SONHOS
   Este bloco se repete em todos os CSS do portal para que cada página
   funcione sozinha. Se preferir, mova-o para um arquivo único
   (ex.: sonhos-base.css) e importe-o em cada página.
   Só usa fontes do sistema (Times, Comic Sans, Arial, Courier), como em 1999.
   ----------------------------------------------------------------- */

/* ---------- Tokens ---------- */
:root {
  --ceu: #000010;       /* fundo noturno */
  --amarelo: #FFFF00;
  --rosa: #FF00FF;
  --ciano: #00FFFF;
  --verde: #00FF00;
  --prata: #C0C0C0;     /* bordas em relevo e botões */
  --marinho: #000080;   /* barras de título */
  --caixa: #000033;     /* fundo das caixas */
  --luar: #F2E6C4;
  --lilas: #9999CC;     /* textos de apoio */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  /* Céu estrelado desenhado em SVG embutido (não depende de imagem externa) */
  background: var(--ceu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Ccircle cx='12' cy='14' r='1' fill='%23fff'/%3E%3Ccircle cx='60' cy='38' r='1.4' fill='%23ffff99'/%3E%3Ccircle cx='33' cy='72' r='.8' fill='%23fff'/%3E%3Ccircle cx='80' cy='80' r='1' fill='%23aaccff'/%3E%3C/svg%3E");
  color: #fff;
  font: 16px/1.5 "Times New Roman", Times, serif;
}
a { color: var(--ciano); }
a:visited { color: var(--rosa); }
a:hover { color: var(--amarelo); background: var(--marinho); }
:focus-visible { outline: 2px dotted var(--amarelo); outline-offset: 2px; }

/* Coluna central de 800px, como os sites da época */
.pagina {
  max-width: 800px; margin: 0 auto;
  padding-block: 16px 32px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ---------- Letreiro rolante (substitui a antiga tag <marquee>) ---------- */
.letreiro {
  background: var(--marinho); color: var(--verde);
  font: 14px "Courier New", monospace;
  white-space: nowrap; overflow: hidden;
  padding: 4px 0; border: 2px ridge var(--prata);
}
.letreiro span { display: inline-block; padding-left: 100%; animation: rolar 20s linear infinite; }
@keyframes rolar { to { transform: translateX(-100%); } }

/* ---------- Cabeçalho ---------- */
.titulo {
  margin: 12px 0 0; text-align: center;
  font: bold clamp(30px, 6vw, 50px) "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  color: var(--amarelo); text-shadow: 4px 4px var(--rosa);
}
.titulo--menor { font-size: clamp(26px, 4.6vw, 40px); }
.subtitulo { text-align: center; font-style: italic; color: var(--luar); }
.arco-iris { height: 5px; margin: 10px 0; background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, violet); }

/* ---------- Menu superior das páginas internas ---------- */
.menu-topo { text-align: center; font: bold 14px Arial, sans-serif; margin-bottom: 10px; }
.menu-topo a[aria-current="page"] { color: var(--amarelo); text-decoration: none; }

/* ---------- Caixas com barra de título ---------- */
.caixa { border: 3px outset var(--prata); background: var(--caixa); padding: 10px; }
.caixa > h2 {
  margin: -10px -10px 10px; padding: 4px 8px;
  background: var(--marinho); color: #fff;
  border-bottom: 2px groove var(--prata);
  font: bold 14px Arial, sans-serif;
}
.pilha { display: grid; gap: 10px; }

/* ---------- Tabelas em relevo ---------- */
.tabela { width: 100%; border: 2px outset var(--prata); border-collapse: separate; border-spacing: 3px; background: #000044; font-size: 15px; }
.tabela th, .tabela td { border: 2px inset var(--prata); padding: 6px; vertical-align: top; text-align: left; }
.tabela th { background: var(--marinho); font: bold 13px Arial, sans-serif; }

/* ---------- Selos e efeitos ---------- */
.novo { background: red; color: #fff; font: bold 10px Arial, sans-serif; padding: 0 3px; }
.piscar { color: #f33; font-weight: bold; animation: piscar 1s steps(1) infinite; }
@keyframes piscar { 50% { visibility: hidden; } }
.destaque { font: bold 21px "Comic Sans MS", cursive; color: var(--luar); }

/* ---------- Botões e campos estilo Windows 98 ---------- */
.botao {
  display: inline-block; padding: 4px 14px;
  background: var(--prata); color: #000;
  border: 2px outset #fff;
  font: 14px Arial, sans-serif; text-decoration: none; cursor: pointer;
}
.botao:visited { color: #000; }
.botao:hover { background: #d4d4d4; color: #000; }
.botao:active { border-style: inset; }
.campo { width: 100%; padding: 4px; background: #fff; color: #000; border: 2px inset var(--prata); font: 15px "Courier New", monospace; }
.dica { font: 12px Arial, sans-serif; color: var(--lilas); }

/* ---------- Rodapé: só o link de volta aos portais ---------- */
.voltar {
  margin-top: 16px; padding-top: 10px;
  border-top: 1px dashed #6666cc;
  text-align: center; font: bold 14px Arial, sans-serif;
}

/* Quem prefere menos movimento: sem letreiro rolando e sem piscar */
@media (prefers-reduced-motion: reduce) {
  .letreiro span, .piscar { animation: none; }
}

/* -----------------------------------------------------------------
   ESPECÍFICO DO LABORATÓRIO
   ----------------------------------------------------------------- */
.duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Barra de progresso em blocos */
.progresso { display: inline-block; width: 120px; max-width: 100%; height: 14px; padding: 1px; vertical-align: middle; background: #000; border: 2px inset var(--prata); }
.progresso i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #00f 0 8px, #000 8px 10px); }
/* Registro estilo terminal */
.registro { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 14px "Courier New", monospace; color: #ccffcc; }
.registro b { color: var(--amarelo); font-weight: 400; }
@media (max-width: 640px) { .duas { grid-template-columns: minmax(0, 1fr); } }

/* -----------------------------------------------------------------
   ANTES ERAM ESTILOS INLINE (style="" no HTML)
   Saíram do HTML para a Content-Security-Policy não precisar de 'unsafe-inline'.
   O !important mantém a mesma prioridade que o estilo inline tinha.
   ----------------------------------------------------------------- */
.progresso--35 { width:35% !important; }
.progresso--60 { width:60% !important; }
.progresso--90 { width:90% !important; }
.u-color-amarelo { color:var(--amarelo) !important; }
.u-margin-0-0-10px-font-size-15px { margin:0 0 10px !important; font-size:15px !important; }
.u-margin-0-0-8px { margin:0 0 8px !important; }