:root {
  /* Paleta do guia de arte: preto, papel, vermelho escuro */
  --preto: #16120f;
  --papel: #ece3cf;
  --papel-2: #d9ceb4;
  --papel-3: #bfb294;
  --vermelho: #8a2a21;
  --fosforo: #e4553f;
  --fosforo-fraco: #9c3a2c;
  --cinza-texto: #6b5f4c;
  --fonte-ui: "IBM Plex Mono", monospace;
  --fonte-crt: "VT323", monospace;
  --fonte-doc: "Special Elite", "Courier New", monospace;
  --fonte-mao: "Caveat", cursive;
}
:root {
  /* Ponteiros do terminal: pixel art de monitor antigo (seta e mãozinha com punho vermelho).
     O desenho fica em publico/img/cursores.txt */
  --cursor-seta: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="34" shape-rendering="crispEdges"><rect x="0" y="0" width="2" height="2" fill="%2316120f"/><rect x="0" y="2" width="2" height="2" fill="%2316120f"/><rect x="2" y="2" width="2" height="2" fill="%2316120f"/><rect x="0" y="4" width="2" height="2" fill="%2316120f"/><rect x="2" y="4" width="2" height="2" fill="%23ece3cf"/><rect x="4" y="4" width="2" height="2" fill="%2316120f"/><rect x="0" y="6" width="2" height="2" fill="%2316120f"/><rect x="2" y="6" width="2" height="2" fill="%23ece3cf"/><rect x="4" y="6" width="2" height="2" fill="%23ece3cf"/><rect x="6" y="6" width="2" height="2" fill="%2316120f"/><rect x="0" y="8" width="2" height="2" fill="%2316120f"/><rect x="2" y="8" width="2" height="2" fill="%23ece3cf"/><rect x="4" y="8" width="2" height="2" fill="%23ece3cf"/><rect x="6" y="8" width="2" height="2" fill="%23ece3cf"/><rect x="8" y="8" width="2" height="2" fill="%2316120f"/><rect x="0" y="10" width="2" height="2" fill="%2316120f"/><rect x="2" y="10" width="2" height="2" fill="%23ece3cf"/><rect x="4" y="10" width="2" height="2" fill="%23ece3cf"/><rect x="6" y="10" width="2" height="2" fill="%23ece3cf"/><rect x="8" y="10" width="2" height="2" fill="%23ece3cf"/><rect x="10" y="10" width="2" height="2" fill="%2316120f"/><rect x="0" y="12" width="2" height="2" fill="%2316120f"/><rect x="2" y="12" width="2" height="2" fill="%23ece3cf"/><rect x="4" y="12" width="2" height="2" fill="%23ece3cf"/><rect x="6" y="12" width="2" height="2" fill="%23ece3cf"/><rect x="8" y="12" width="2" height="2" fill="%23ece3cf"/><rect x="10" y="12" width="2" height="2" fill="%23ece3cf"/><rect x="12" y="12" width="2" height="2" fill="%2316120f"/><rect x="0" y="14" width="2" height="2" fill="%2316120f"/><rect x="2" y="14" width="2" height="2" fill="%23ece3cf"/><rect x="4" y="14" width="2" height="2" fill="%23ece3cf"/><rect x="6" y="14" width="2" height="2" fill="%23ece3cf"/><rect x="8" y="14" width="2" height="2" fill="%23ece3cf"/><rect x="10" y="14" width="2" height="2" fill="%23ece3cf"/><rect x="12" y="14" width="2" height="2" fill="%23ece3cf"/><rect x="14" y="14" width="2" height="2" fill="%2316120f"/><rect x="0" y="16" width="2" height="2" fill="%2316120f"/><rect x="2" y="16" width="2" height="2" fill="%23ece3cf"/><rect x="4" y="16" width="2" height="2" fill="%23ece3cf"/><rect x="6" y="16" width="2" height="2" fill="%23ece3cf"/><rect x="8" y="16" width="2" height="2" fill="%23ece3cf"/><rect x="10" y="16" width="2" height="2" fill="%23ece3cf"/><rect x="12" y="16" width="2" height="2" fill="%23ece3cf"/><rect x="14" y="16" width="2" height="2" fill="%23ece3cf"/><rect x="16" y="16" width="2" height="2" fill="%2316120f"/><rect x="0" y="18" width="2" height="2" fill="%2316120f"/><rect x="2" y="18" width="2" height="2" fill="%23ece3cf"/><rect x="4" y="18" width="2" height="2" fill="%23ece3cf"/><rect x="6" y="18" width="2" height="2" fill="%23ece3cf"/><rect x="8" y="18" width="2" height="2" fill="%23ece3cf"/><rect x="10" y="18" width="2" height="2" fill="%23ece3cf"/><rect x="12" y="18" width="2" height="2" fill="%23ece3cf"/><rect x="14" y="18" width="2" height="2" fill="%23ece3cf"/><rect x="16" y="18" width="2" height="2" fill="%23ece3cf"/><rect x="18" y="18" width="2" height="2" fill="%2316120f"/><rect x="0" y="20" width="2" height="2" fill="%2316120f"/><rect x="2" y="20" width="2" height="2" fill="%23ece3cf"/><rect x="4" y="20" width="2" height="2" fill="%23ece3cf"/><rect x="6" y="20" width="2" height="2" fill="%23ece3cf"/><rect x="8" y="20" width="2" height="2" fill="%23ece3cf"/><rect x="10" y="20" width="2" height="2" fill="%23ece3cf"/><rect x="12" y="20" width="2" height="2" fill="%2316120f"/><rect x="14" y="20" width="2" height="2" fill="%2316120f"/><rect x="16" y="20" width="2" height="2" fill="%2316120f"/><rect x="18" y="20" width="2" height="2" fill="%2316120f"/><rect x="20" y="20" width="2" height="2" fill="%2316120f"/><rect x="0" y="22" width="2" height="2" fill="%2316120f"/><rect x="2" y="22" width="2" height="2" fill="%23ece3cf"/><rect x="4" y="22" width="2" height="2" fill="%23ece3cf"/><rect x="6" y="22" width="2" height="2" fill="%2316120f"/><rect x="8" y="22" width="2" height="2" fill="%23ece3cf"/><rect x="10" y="22" width="2" height="2" fill="%23ece3cf"/><rect x="12" y="22" width="2" height="2" fill="%2316120f"/><rect x="0" y="24" width="2" height="2" fill="%2316120f"/><rect x="2" y="24" width="2" height="2" fill="%23ece3cf"/><rect x="4" y="24" width="2" height="2" fill="%2316120f"/><rect x="8" y="24" width="2" height="2" fill="%2316120f"/><rect x="10" y="24" width="2" height="2" fill="%23ece3cf"/><rect x="12" y="24" width="2" height="2" fill="%23ece3cf"/><rect x="14" y="24" width="2" height="2" fill="%2316120f"/><rect x="0" y="26" width="2" height="2" fill="%2316120f"/><rect x="2" y="26" width="2" height="2" fill="%2316120f"/><rect x="8" y="26" width="2" height="2" fill="%2316120f"/><rect x="10" y="26" width="2" height="2" fill="%23ece3cf"/><rect x="12" y="26" width="2" height="2" fill="%23ece3cf"/><rect x="14" y="26" width="2" height="2" fill="%2316120f"/><rect x="0" y="28" width="2" height="2" fill="%2316120f"/><rect x="10" y="28" width="2" height="2" fill="%2316120f"/><rect x="12" y="28" width="2" height="2" fill="%23ece3cf"/><rect x="14" y="28" width="2" height="2" fill="%23ece3cf"/><rect x="16" y="28" width="2" height="2" fill="%2316120f"/><rect x="10" y="30" width="2" height="2" fill="%2316120f"/><rect x="12" y="30" width="2" height="2" fill="%23ece3cf"/><rect x="14" y="30" width="2" height="2" fill="%23ece3cf"/><rect x="16" y="30" width="2" height="2" fill="%2316120f"/><rect x="12" y="32" width="2" height="2" fill="%2316120f"/><rect x="14" y="32" width="2" height="2" fill="%2316120f"/></svg>') 1 1, default;
  --cursor-mao: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="34" shape-rendering="crispEdges"><rect x="10" y="0" width="2" height="2" fill="%2316120f"/><rect x="12" y="0" width="2" height="2" fill="%2316120f"/><rect x="8" y="2" width="2" height="2" fill="%2316120f"/><rect x="10" y="2" width="2" height="2" fill="%23ece3cf"/><rect x="12" y="2" width="2" height="2" fill="%23ece3cf"/><rect x="14" y="2" width="2" height="2" fill="%2316120f"/><rect x="8" y="4" width="2" height="2" fill="%2316120f"/><rect x="10" y="4" width="2" height="2" fill="%23ece3cf"/><rect x="12" y="4" width="2" height="2" fill="%23ece3cf"/><rect x="14" y="4" width="2" height="2" fill="%2316120f"/><rect x="8" y="6" width="2" height="2" fill="%2316120f"/><rect x="10" y="6" width="2" height="2" fill="%23ece3cf"/><rect x="12" y="6" width="2" height="2" fill="%23ece3cf"/><rect x="14" y="6" width="2" height="2" fill="%2316120f"/><rect x="8" y="8" width="2" height="2" fill="%2316120f"/><rect x="10" y="8" width="2" height="2" fill="%23ece3cf"/><rect x="12" y="8" width="2" height="2" fill="%23ece3cf"/><rect x="14" y="8" width="2" height="2" fill="%2316120f"/><rect x="16" y="8" width="2" height="2" fill="%2316120f"/><rect x="18" y="8" width="2" height="2" fill="%2316120f"/><rect x="8" y="10" width="2" height="2" fill="%2316120f"/><rect x="10" y="10" width="2" height="2" fill="%23ece3cf"/><rect x="12" y="10" width="2" height="2" fill="%23ece3cf"/><rect x="14" y="10" width="2" height="2" fill="%2316120f"/><rect x="16" y="10" width="2" height="2" fill="%23ece3cf"/><rect x="18" y="10" width="2" height="2" fill="%23ece3cf"/><rect x="20" y="10" width="2" height="2" fill="%2316120f"/><rect x="22" y="10" width="2" height="2" fill="%2316120f"/><rect x="24" y="10" width="2" height="2" fill="%2316120f"/><rect x="2" y="12" width="2" height="2" fill="%2316120f"/><rect x="4" y="12" width="2" height="2" fill="%2316120f"/><rect x="8" y="12" width="2" height="2" fill="%2316120f"/><rect x="10" y="12" width="2" height="2" fill="%23ece3cf"/><rect x="12" y="12" width="2" height="2" fill="%23ece3cf"/><rect x="14" y="12" width="2" height="2" fill="%2316120f"/><rect x="16" y="12" width="2" height="2" fill="%23ece3cf"/><rect x="18" y="12" width="2" height="2" fill="%23ece3cf"/><rect x="20" y="12" width="2" height="2" fill="%2316120f"/><rect x="22" y="12" width="2" height="2" fill="%23ece3cf"/><rect x="24" y="12" width="2" height="2" fill="%23ece3cf"/><rect x="26" y="12" width="2" height="2" fill="%2316120f"/><rect x="28" y="12" width="2" height="2" fill="%2316120f"/><rect x="0" y="14" width="2" height="2" fill="%2316120f"/><rect x="2" y="14" width="2" height="2" fill="%23ece3cf"/><rect x="4" y="14" width="2" height="2" fill="%23ece3cf"/><rect x="6" y="14" width="2" height="2" fill="%2316120f"/><rect x="8" y="14" width="2" height="2" fill="%2316120f"/><rect x="10" y="14" width="2" height="2" fill="%23ece3cf"/><rect x="12" y="14" width="2" height="2" fill="%23ece3cf"/><rect x="14" y="14" width="2" height="2" fill="%2316120f"/><rect x="16" y="14" width="2" height="2" fill="%23ece3cf"/><rect x="18" y="14" width="2" height="2" fill="%23ece3cf"/><rect x="20" y="14" width="2" height="2" fill="%2316120f"/><rect x="22" y="14" width="2" height="2" fill="%23ece3cf"/><rect x="24" y="14" width="2" height="2" fill="%23ece3cf"/><rect x="26" y="14" width="2" height="2" fill="%2316120f"/><rect x="28" y="14" width="2" height="2" fill="%23ece3cf"/><rect x="30" y="14" width="2" height="2" fill="%2316120f"/><rect x="0" y="16" width="2" height="2" fill="%2316120f"/><rect x="2" y="16" width="2" height="2" fill="%23ece3cf"/><rect x="4" y="16" width="2" height="2" fill="%23ece3cf"/><rect x="6" y="16" width="2" height="2" fill="%23ece3cf"/><rect x="8" y="16" width="2" height="2" fill="%2316120f"/><rect x="10" y="16" width="2" height="2" fill="%23ece3cf"/><rect x="12" y="16" width="2" height="2" fill="%23ece3cf"/><rect x="14" y="16" width="2" height="2" fill="%23ece3cf"/><rect x="16" y="16" width="2" height="2" fill="%23ece3cf"/><rect x="18" y="16" width="2" height="2" fill="%23ece3cf"/><rect x="20" y="16" width="2" height="2" fill="%23ece3cf"/><rect x="22" y="16" width="2" height="2" fill="%23ece3cf"/><rect x="24" y="16" width="2" height="2" fill="%23ece3cf"/><rect x="26" y="16" width="2" height="2" fill="%23ece3cf"/><rect x="28" y="16" width="2" height="2" fill="%23ece3cf"/><rect x="30" y="16" width="2" height="2" fill="%2316120f"/><rect x="2" y="18" width="2" height="2" fill="%2316120f"/><rect x="4" y="18" width="2" height="2" fill="%23ece3cf"/><rect x="6" y="18" width="2" height="2" fill="%23ece3cf"/><rect x="8" y="18" width="2" height="2" fill="%23ece3cf"/><rect x="10" y="18" width="2" height="2" fill="%23ece3cf"/><rect x="12" y="18" width="2" height="2" fill="%23ece3cf"/><rect x="14" y="18" width="2" height="2" fill="%23ece3cf"/><rect x="16" y="18" width="2" height="2" fill="%23ece3cf"/><rect x="18" y="18" width="2" height="2" fill="%23ece3cf"/><rect x="20" y="18" width="2" height="2" fill="%23ece3cf"/><rect x="22" y="18" width="2" height="2" fill="%23ece3cf"/><rect x="24" y="18" width="2" height="2" fill="%23ece3cf"/><rect x="26" y="18" width="2" height="2" fill="%23ece3cf"/><rect x="28" y="18" width="2" height="2" fill="%23ece3cf"/><rect x="30" y="18" width="2" height="2" fill="%2316120f"/><rect x="4" y="20" width="2" height="2" fill="%2316120f"/><rect x="6" y="20" width="2" height="2" fill="%23ece3cf"/><rect x="8" y="20" width="2" height="2" fill="%23ece3cf"/><rect x="10" y="20" width="2" height="2" fill="%23ece3cf"/><rect x="12" y="20" width="2" height="2" fill="%23ece3cf"/><rect x="14" y="20" width="2" height="2" fill="%23ece3cf"/><rect x="16" y="20" width="2" height="2" fill="%23ece3cf"/><rect x="18" y="20" width="2" height="2" fill="%23ece3cf"/><rect x="20" y="20" width="2" height="2" fill="%23ece3cf"/><rect x="22" y="20" width="2" height="2" fill="%23ece3cf"/><rect x="24" y="20" width="2" height="2" fill="%23ece3cf"/><rect x="26" y="20" width="2" height="2" fill="%23ece3cf"/><rect x="28" y="20" width="2" height="2" fill="%23ece3cf"/><rect x="30" y="20" width="2" height="2" fill="%2316120f"/><rect x="4" y="22" width="2" height="2" fill="%2316120f"/><rect x="6" y="22" width="2" height="2" fill="%23ece3cf"/><rect x="8" y="22" width="2" height="2" fill="%23ece3cf"/><rect x="10" y="22" width="2" height="2" fill="%23ece3cf"/><rect x="12" y="22" width="2" height="2" fill="%23ece3cf"/><rect x="14" y="22" width="2" height="2" fill="%23ece3cf"/><rect x="16" y="22" width="2" height="2" fill="%23ece3cf"/><rect x="18" y="22" width="2" height="2" fill="%23ece3cf"/><rect x="20" y="22" width="2" height="2" fill="%23ece3cf"/><rect x="22" y="22" width="2" height="2" fill="%23ece3cf"/><rect x="24" y="22" width="2" height="2" fill="%23ece3cf"/><rect x="26" y="22" width="2" height="2" fill="%23ece3cf"/><rect x="28" y="22" width="2" height="2" fill="%2316120f"/><rect x="6" y="24" width="2" height="2" fill="%2316120f"/><rect x="8" y="24" width="2" height="2" fill="%23ece3cf"/><rect x="10" y="24" width="2" height="2" fill="%23ece3cf"/><rect x="12" y="24" width="2" height="2" fill="%23ece3cf"/><rect x="14" y="24" width="2" height="2" fill="%23ece3cf"/><rect x="16" y="24" width="2" height="2" fill="%23ece3cf"/><rect x="18" y="24" width="2" height="2" fill="%23ece3cf"/><rect x="20" y="24" width="2" height="2" fill="%23ece3cf"/><rect x="22" y="24" width="2" height="2" fill="%23ece3cf"/><rect x="24" y="24" width="2" height="2" fill="%23ece3cf"/><rect x="26" y="24" width="2" height="2" fill="%23ece3cf"/><rect x="28" y="24" width="2" height="2" fill="%2316120f"/><rect x="6" y="26" width="2" height="2" fill="%2316120f"/><rect x="8" y="26" width="2" height="2" fill="%23ece3cf"/><rect x="10" y="26" width="2" height="2" fill="%23ece3cf"/><rect x="12" y="26" width="2" height="2" fill="%23ece3cf"/><rect x="14" y="26" width="2" height="2" fill="%23ece3cf"/><rect x="16" y="26" width="2" height="2" fill="%23ece3cf"/><rect x="18" y="26" width="2" height="2" fill="%23ece3cf"/><rect x="20" y="26" width="2" height="2" fill="%23ece3cf"/><rect x="22" y="26" width="2" height="2" fill="%23ece3cf"/><rect x="24" y="26" width="2" height="2" fill="%23ece3cf"/><rect x="26" y="26" width="2" height="2" fill="%2316120f"/><rect x="8" y="28" width="2" height="2" fill="%2316120f"/><rect x="10" y="28" width="2" height="2" fill="%23ece3cf"/><rect x="12" y="28" width="2" height="2" fill="%23ece3cf"/><rect x="14" y="28" width="2" height="2" fill="%23ece3cf"/><rect x="16" y="28" width="2" height="2" fill="%23ece3cf"/><rect x="18" y="28" width="2" height="2" fill="%23ece3cf"/><rect x="20" y="28" width="2" height="2" fill="%23ece3cf"/><rect x="22" y="28" width="2" height="2" fill="%23ece3cf"/><rect x="24" y="28" width="2" height="2" fill="%23ece3cf"/><rect x="26" y="28" width="2" height="2" fill="%2316120f"/><rect x="8" y="30" width="2" height="2" fill="%2316120f"/><rect x="10" y="30" width="2" height="2" fill="%238a2a21"/><rect x="12" y="30" width="2" height="2" fill="%238a2a21"/><rect x="14" y="30" width="2" height="2" fill="%238a2a21"/><rect x="16" y="30" width="2" height="2" fill="%238a2a21"/><rect x="18" y="30" width="2" height="2" fill="%238a2a21"/><rect x="20" y="30" width="2" height="2" fill="%238a2a21"/><rect x="22" y="30" width="2" height="2" fill="%238a2a21"/><rect x="24" y="30" width="2" height="2" fill="%238a2a21"/><rect x="26" y="30" width="2" height="2" fill="%2316120f"/><rect x="8" y="32" width="2" height="2" fill="%2316120f"/><rect x="10" y="32" width="2" height="2" fill="%2316120f"/><rect x="12" y="32" width="2" height="2" fill="%2316120f"/><rect x="14" y="32" width="2" height="2" fill="%2316120f"/><rect x="16" y="32" width="2" height="2" fill="%2316120f"/><rect x="18" y="32" width="2" height="2" fill="%2316120f"/><rect x="20" y="32" width="2" height="2" fill="%2316120f"/><rect x="22" y="32" width="2" height="2" fill="%2316120f"/><rect x="24" y="32" width="2" height="2" fill="%2316120f"/><rect x="26" y="32" width="2" height="2" fill="%2316120f"/></svg>') 11 1, pointer;
}
* { box-sizing: border-box; }
html, body { cursor: var(--cursor-seta); }
a[href], summary { cursor: var(--cursor-mao); }
html, body { margin: 0; height: 100%; }
body { background: var(--preto); color: var(--papel); font-family: var(--fonte-ui); overflow: hidden; }
[hidden] { display: none !important; }

/* Linhas de varredura por cima de tudo */
.scanlines {
  pointer-events: none; position: fixed; inset: 0; z-index: 9000;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.10) 0 1px, transparent 1px 3px);
}

/* ---------- Ligar: monitor desligado, botão de energia e luz ---------- */
#ligar {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 22px;
  background: radial-gradient(ellipse at center, #15100d 0%, #050403 70%);
}
#botao-ligar {
  width: 96px; height: 96px; border-radius: 50%; cursor: var(--cursor-mao); padding: 22px;
  background: radial-gradient(circle at 40% 35%, #2a211c, #120d0b 70%); color: var(--fosforo-fraco);
  border: 2px solid #2e2520; box-shadow: 0 0 0 6px #0d0a08, 0 6px 14px rgba(0,0,0,.7), inset 0 2px 3px rgba(255,255,255,.06);
  transition: color .2s, box-shadow .2s, transform .1s;
}
#botao-ligar svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; }
#botao-ligar:hover, #botao-ligar:focus-visible { outline: none; color: var(--fosforo); box-shadow: 0 0 0 6px #0d0a08, 0 0 22px rgba(228,85,63,.35), inset 0 2px 3px rgba(255,255,255,.06); }
#botao-ligar:active { transform: translateY(2px); }
#ligar .led { width: 10px; height: 10px; border-radius: 50%; background: #3a1410; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); animation: espera 2.4s ease-in-out infinite; }
@keyframes espera { 50% { background: #5c1d16; } }
/* Ligando: a luz acende, o botão afunda e a tela apaga para o tubo acender */
#ligar.ligando .led { animation: none; background: #ff5a3c; box-shadow: 0 0 10px 2px rgba(255,90,60,.8); }
#ligar.ligando #botao-ligar { color: var(--fosforo); transform: translateY(2px); }
#ligar.ligando { animation: apagar .45s ease-in .15s forwards; }
@keyframes apagar { to { opacity: 0; } }
/* Tubo de imagem acendendo: uma linha clara no meio que abre na tela inteira */
body.acendendo #boot, body.acendendo #mesa { animation: acender .65s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes acender {
  0% { transform: scale(0, .004); filter: brightness(4); }
  30% { transform: scale(1, .004); filter: brightness(4); }
  100% { transform: none; filter: none; }
}

/* ---------- Boot, idioma e login ---------- */
#boot {
  position: fixed; inset: 0; padding: 32px 40px 60px;
  font-family: var(--fonte-crt); font-size: 22px; line-height: 1.25;
  color: var(--fosforo); text-shadow: 0 0 6px rgba(228,85,63,.55);
  background: radial-gradient(ellipse at center, #1f1612 0%, #0c0908 75%);
  overflow-y: auto;
}
#boot .linha { white-space: pre-wrap; margin: 0; }
#boot .fraco { color: var(--fosforo-fraco); }
#boot .titulo { font-size: 30px; letter-spacing: 2px; }
#boot .aviso { border: 1px solid var(--fosforo-fraco); padding: 8px 12px; margin: 12px 0; max-width: 760px; }
#boot .verificacao { display: flex; align-items: flex-end; gap: 8px; max-width: 620px; }
#boot .verificacao .pontos { flex: 1; min-width: 20px; border-bottom: 3px dotted var(--fosforo-fraco); margin-bottom: 7px; }
#boot em { font-style: normal; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cursor { display: inline-block; width: 11px; height: 20px; background: var(--fosforo); vertical-align: -3px; animation: pisca 1s steps(1) infinite; }
@keyframes pisca { 50% { opacity: 0; } }

#idioma { margin: 14px 0 6px; max-width: 520px; }
#idioma .pergunta { margin: 0 0 8px; }
#idioma .opcoes { display: grid; gap: 2px; }
#idioma button {
  display: flex; gap: 14px; width: 100%; text-align: left; cursor: var(--cursor-mao);
  font: inherit; color: var(--fosforo); text-shadow: inherit; background: none; border: 0; padding: 2px 10px;
}
#idioma button:hover, #idioma button:focus { outline: none; background: rgba(228,85,63,.15); }
#idioma button.marcada { background: var(--fosforo); color: #0c0908; text-shadow: none; }
#idioma .contagem { margin: 8px 0 0; color: var(--fosforo-fraco); }

#login { margin-top: 20px; max-width: 520px; }
#login .caixa { border: 2px solid var(--fosforo); padding: 18px 20px 20px; }
#login .caixa h2 { font-weight: normal; font-size: 26px; margin: 0 0 14px; letter-spacing: 1px; }
#login label { display: block; margin: 10px 0 2px; }
#login input {
  width: 100%; background: transparent; border: 0; border-bottom: 2px solid var(--fosforo-fraco);
  color: var(--fosforo); font: inherit; padding: 2px 0; outline: none; text-shadow: inherit; border-radius: 0;
}
#login input:focus { border-bottom-color: var(--fosforo); }
#login button {
  margin-top: 18px; font: inherit; color: #0c0908; background: var(--fosforo);
  border: 0; padding: 4px 18px; cursor: var(--cursor-mao); letter-spacing: 1px;
}
#login button:hover { background: #f07a63; }
#login button:disabled { opacity: .5; cursor: wait; }
#login .erro-login { margin: 12px 0 0; background: var(--fosforo); color: #0c0908; text-shadow: none; padding: 2px 8px; }

/* ---------- Área de trabalho ---------- */
#mesa { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--preto); }
.meio { flex: 1; display: flex; min-height: 0; }
.coluna { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Doca: os apps, sempre no mesmo lugar */
.doca {
  width: 96px; flex: none; display: flex; flex-direction: column;
  /* A borda escura é sombra por dentro: o bloco vermelho do caso passa por cima dela e se junta à faixa */
  background: var(--papel-3); box-shadow: inset -3px 0 0 var(--preto), inset -6px 0 0 var(--papel-2);
  overflow: hidden;
}
.doca-apps { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 0 14px; overflow-y: auto; overflow-x: hidden; }

/* Relógio no pé da doca: um mostrador de fósforo embutido no creme, com a hora de Kogu */
.relogio {
  flex: none; margin: 0 9px 10px 6px; padding: 7px 4px 6px; text-align: center; user-select: none;
  background: #0d0a08; color: var(--fosforo); border: 2px solid var(--preto);
  box-shadow: inset 0 0 10px rgba(228,85,63,.18), inset 2px 2px 0 rgba(0,0,0,.6), 1px 1px 0 var(--papel-2);
}
.relogio-hora { font: 34px/0.9 var(--fonte-crt); letter-spacing: 1px; text-shadow: 0 0 6px rgba(228,85,63,.65); }
.relogio-hora b { font-weight: normal; animation: relogio-pisca 2s steps(1) infinite; }
@keyframes relogio-pisca { 50% { opacity: .15; } }
.relogio-data { font: 17px/1 var(--fonte-crt); margin-top: 3px; color: #e8a090; }

/* Cabeçalho: sinal da conexão (oscila de vez em quando) e o ícone de tela cheia */
.faixa .sinal { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; cursor: var(--cursor-seta); }
.faixa .sinal i { width: 3px; background: #4a3f36; transition: background .3s; }
.faixa .sinal i:nth-child(1) { height: 25%; } .faixa .sinal i:nth-child(2) { height: 50%; }
.faixa .sinal i:nth-child(3) { height: 75%; } .faixa .sinal i:nth-child(4) { height: 100%; }
.faixa .sinal i.aceso { background: var(--papel); }
.faixa .sinal.fraco i.aceso { background: var(--fosforo); }
.faixa button.tela-cheia { background: none; box-shadow: none; padding: 2px; display: grid; place-items: center; color: var(--papel); }
.faixa button.tela-cheia svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.faixa button.tela-cheia:hover { color: var(--fosforo); }
.faixa button.tela-cheia .sair, .faixa button.tela-cheia.ligada .entrar { display: none; }
.faixa button.tela-cheia.ligada .sair { display: inline; }

/* Faixa do caso: em cima da mesa, com a mesa do caso aberta */
.faixa-caso {
  display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 34px; flex: none;
  background: var(--vermelho); color: var(--papel); font-size: 13px; border-bottom: 2px solid var(--preto);
}
.faixa-caso .rotulo-caso { font-weight: 600; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faixa-caso .rotulo-caso small { color: #f3c9bf; font-weight: 400; letter-spacing: 2px; margin-right: 8px; }
.faixa-caso .espaco { flex: 1; }
.faixa-caso button {
  font: inherit; font-size: 12px; padding: 3px 10px; cursor: var(--cursor-mao); white-space: nowrap;
  background: var(--papel); color: var(--preto); border: 1px solid var(--preto); box-shadow: inset -2px -2px 0 var(--papel-3);
}
.faixa-caso button.fechar { background: none; border: 0; box-shadow: none; color: var(--papel); font-size: 24px; line-height: 1; padding: 0 2px 3px; }
.faixa-caso button.fechar:hover { color: #fff; text-shadow: 0 0 6px rgba(255,255,255,.5); }
.faixa-caso button.principal { background: var(--preto); color: var(--papel); box-shadow: inset -2px -2px 0 #3a302a; }
.faixa {
  display: flex; align-items: center; gap: 16px; padding: 0 12px; height: 38px; flex: none;
  background: var(--preto); color: var(--papel); font-size: 13px; letter-spacing: .5px;
  border-bottom: 3px double var(--papel-3);
}
.faixa .marca { font-weight: 600; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faixa .marca .sub > span:first-child { color: var(--fosforo); }
.faixa .espaco { flex: 1; }
.faixa .info { white-space: nowrap; }
.faixa .previa { background: var(--fosforo); color: var(--preto); padding: 1px 8px; font-weight: 600; text-transform: uppercase; font-size: 11px; }
.faixa button {
  font: inherit; font-size: 12px; background: var(--papel); color: var(--preto);
  border: 0; padding: 3px 10px; cursor: var(--cursor-mao); box-shadow: inset -2px -2px 0 var(--papel-3); white-space: nowrap;
}
/* Mesa do sistema: vermelho pontilhado. Mesa do caso: tampo escuro de madeira. */
.area {
  position: relative; flex: 1; overflow: hidden;
  background-color: var(--vermelho);
  background-image: radial-gradient(rgba(22,18,15,.28) 1.1px, transparent 1.6px);
  background-size: 7px 7px;
}
#mesa.no-caso .area {
  background-color: #2a1f18; background-size: auto; user-select: none;
  background-image:
    repeating-linear-gradient(92deg, rgba(0,0,0,.18) 0 2px, transparent 2px 9px, rgba(255,240,220,.025) 9px 11px, transparent 11px 23px),
    radial-gradient(ellipse at 30% 20%, rgba(255,230,200,.07), transparent 60%);
}

.icone {
  width: 90px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; cursor: var(--cursor-mao); padding: 6px 2px; color: var(--preto); font: inherit;
}
.icone:first-child { margin-top: 14px; }
.icone svg { width: 46px; height: 46px; filter: drop-shadow(2px 2px 0 rgba(22,18,15,.35)); }
/* App aberto na mesa toda: a faixa vermelha do caso desce e engloba o ícone na doca. O bloco cobre a
   doca de ponta a ponta (passa por cima da borda escura), como uma peça acoplada sobre o creme. */
.icone.na-mesa {
  width: 100%; align-self: stretch; margin: 0 0 8px; padding: 14px 3px 10px 0;
  background: var(--vermelho); color: var(--papel); border-bottom: 2px solid var(--preto); z-index: 1;
  box-shadow: 0 3px 0 rgba(22,18,15,.3);
}
.icone.na-mesa:first-child { margin-top: 0; }
.icone .rotulo { display: flex; flex-direction: column; align-items: center; padding: 1px 5px; line-height: 1.2; }
.icone .rotulo b { font-size: 13px; font-weight: 600; letter-spacing: .5px; }
.icone .rotulo small { font-size: 10px; opacity: .85; }
.icone { position: relative; }
.icone-aviso {
  position: absolute; top: 2px; left: calc(50% + 16px); min-width: 20px; padding: 1px 5px; border-radius: 10px;
  background: var(--vermelho); color: var(--papel); border: 2px solid var(--preto); font: 700 11px/1.3 var(--fonte-ui);
}
.icone-aviso[hidden] { display: none; }
.icone:focus { outline: none; }
.icone:focus-visible .rotulo { background: var(--preto); color: var(--papel); outline: 1px dotted var(--papel); }
.icone:hover .rotulo b { text-decoration: underline; }

/* Transição da mesa: a interface desliga como um tubo de imagem, o texto aparece, a interface liga */
#transicao {
  position: fixed; inset: 0; z-index: 8000; background: #0c0908; color: var(--fosforo); padding: 40px 48px;
  font: 22px/1.35 var(--fonte-crt); text-shadow: 0 0 6px rgba(228,85,63,.45);
}
#transicao p { margin: 0 0 4px; white-space: pre; }
#transicao.entra { animation: aparecer .18s ease-out both; }
#transicao.sai { animation: aparecer .18s ease-in reverse both; }
@keyframes aparecer { from { opacity: 0; } }
.desligando { animation: desligar .42s ease-in both; }
.ligando { animation: desligar .5s ease-out reverse both; }
@keyframes desligar {
  0% { transform: none; filter: brightness(1); opacity: 1; }
  55% { transform: scale(1, .006); filter: brightness(2.2); opacity: 1; }
  85% { transform: scale(.25, .006); filter: brightness(3); opacity: 1; }
  100% { transform: scale(0, .006); filter: brightness(3); opacity: 0; }
}
/* O que está na mesa chega um depois do outro */
.chegando { animation: chegar .32s cubic-bezier(.2, .8, .3, 1.3) both; animation-delay: var(--atraso, 0s); }
@keyframes chegar { from { opacity: 0; transform: translateY(-10px) scale(.92); } }

/* Pergunta com dois botões, por cima de tudo (ex.: trocar de caso) */
.dialogo-fundo.confirmar { position: fixed; z-index: 7000; }
.confirmar .dialogo { grid-template-columns: 1fr; max-width: 440px; color: var(--preto); }
.confirmar .dialogo p { margin: 0; line-height: 1.5; }
.confirmar .botoes { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.confirmar .dialogo button { grid-column: auto; }

/* ---------- Janelas ---------- */
.janela {
  position: absolute; display: flex; flex-direction: column;
  background: var(--papel); color: var(--preto);
  border: 2px solid var(--preto); box-shadow: 6px 6px 0 rgba(22,18,15,.6);
  min-width: 320px; min-height: 200px; max-width: 100%; max-height: 100%;
}
.janela .barra {
  display: flex; align-items: center; gap: 8px; height: 30px; flex: none; padding: 0 4px 0 10px;
  background: var(--papel-3); color: var(--preto); cursor: var(--cursor-mao); user-select: none;
  border-bottom: 2px solid var(--preto); font-size: 13px; font-weight: 600;
}
.janela.ativa .barra { background: var(--preto); color: var(--papel); }
.janela .barra .titulo { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.janela .barra button {
  width: 22px; height: 20px; padding: 0; font: 600 13px/1 var(--fonte-ui); cursor: var(--cursor-mao);
  background: var(--papel); color: var(--preto); border: 1px solid var(--preto);
  box-shadow: inset -2px -2px 0 var(--papel-3), inset 2px 2px 0 #fff8e8;
}
.janela .barra .maximizar { font-size: 10px; }
/* Maximizada: ocupa a área de trabalho inteira (o tamanho de antes fica guardado no style) */
.janela.maximizada { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; box-shadow: none; }
.janela.maximizada .barra { cursor: var(--cursor-seta); }
/* Alças de tamanho: borda direita, borda de baixo e canto */
.alca { position: absolute; z-index: 6; }
.alca-d { top: 0; right: -4px; width: 8px; height: 100%; cursor: ew-resize; }
.alca-b { left: 0; bottom: -4px; width: 100%; height: 8px; cursor: ns-resize; }
.alca-db { right: -5px; bottom: -5px; width: 14px; height: 14px; cursor: nwse-resize; }
.janela.maximizada .alca { display: none; }
body.redimensionando, body.redimensionando * { user-select: none; cursor: nwse-resize; }
/* Barra de menus (Arquivo, Casos, Ajuda...) */
.janela .menu {
  display: flex; gap: 2px; padding: 0 4px; flex: none; position: relative; z-index: 5;
  border-bottom: 1px solid var(--papel-3); background: var(--papel-2); font-size: 12px;
}
.menu-grupo { position: relative; }
.menu-titulo {
  font: inherit; background: none; border: 0; padding: 4px 8px; cursor: var(--cursor-mao); color: var(--preto);
}
.menu-titulo::first-letter { text-decoration: underline; }
.menu-titulo:hover, .menu-titulo.aberto { background: var(--preto); color: var(--papel); }
.menu-lista {
  position: absolute; top: 100%; left: 0; min-width: 200px; max-width: 320px; padding: 3px 0;
  background: var(--papel); border: 2px solid var(--preto); box-shadow: 4px 4px 0 rgba(22,18,15,.45);
}
.menu-lista hr { border: 0; border-top: 1px solid var(--papel-3); margin: 3px 0; }
.menu-item {
  display: block; width: 100%; text-align: left; font: inherit; background: none; border: 0;
  padding: 5px 12px 5px 24px; cursor: var(--cursor-mao); color: var(--preto); position: relative;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu-item:hover:not(:disabled) { background: var(--preto); color: var(--papel); }
.menu-item:disabled { color: var(--cinza-texto); cursor: var(--cursor-seta); }
.menu-item.marcado::before { content: "►"; position: absolute; left: 8px; font-size: 9px; top: 7px; }

/* Caixa de diálogo dentro da janela (Sobre) */
.dialogo-fundo { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(22,18,15,.35); }
.dialogo {
  display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: center;
  background: var(--papel); border: 2px solid var(--preto); box-shadow: 6px 6px 0 rgba(22,18,15,.6);
  padding: 16px 20px; min-width: 260px; font-size: 13px;
}
.dialogo-icone svg { width: 48px; height: 48px; display: block; }
.dialogo-texto { display: flex; flex-direction: column; gap: 2px; }
.dialogo-texto b { font-size: 15px; }
.dialogo button {
  grid-column: 1 / -1; justify-self: end; font: inherit; padding: 3px 18px; cursor: var(--cursor-mao);
  background: var(--papel); border: 1px solid var(--preto); box-shadow: inset -2px -2px 0 var(--papel-3), inset 2px 2px 0 #fff8e8;
}

.janela .corpo { flex: 1; overflow: auto; display: flex; flex-direction: column; min-height: 0; }
.janela .corpo > * { flex: 1; min-height: 0; }

.vazio { color: var(--cinza-texto); font-size: 13px; padding: 16px 20px; margin: 0; }
.erro-app { color: var(--vermelho); font-size: 13px; padding: 16px 20px; margin: 0; }

/* Tela de firewall (texto vem de publicacao/terminal/firewall-*.md) */
.firewall {
  margin: 24px auto; max-width: 460px; padding: 18px 22px; background: var(--preto); color: var(--fosforo);
  font-family: var(--fonte-crt); font-size: 20px; line-height: 1.3; border: 3px double var(--fosforo);
  text-shadow: 0 0 6px rgba(228,85,63,.45); flex: none !important;
}
.firewall p { margin: 0 0 10px; }
.firewall p:last-child { margin-bottom: 0; }
.firewall code { font-family: inherit; }

/* Listas laterais (usadas pelos apps) */
.lista { width: 250px; flex: none; overflow-y: auto; border-right: 2px solid var(--preto); background: var(--papel-2); font-size: 12px; }
.lista h3 { margin: 0; padding: 8px 10px; font-size: 11px; letter-spacing: 1px; background: var(--vermelho); color: var(--papel); text-transform: uppercase; }
.lista button {
  display: flex; gap: 8px; width: 100%; text-align: left; padding: 7px 10px; border: 0;
  border-bottom: 1px solid var(--papel-3); background: none; font: inherit; color: inherit; cursor: var(--cursor-mao);
}
.lista button b { flex: none; min-width: 30px; }
.lista button small { display: block; opacity: .75; font-size: 11px; margin-top: 2px; }
.lista button:hover { background: var(--papel); }
.lista button.atual { background: var(--preto); color: var(--papel); }

/* Gidunmokan */
.gid-inicio { overflow-y: auto; padding: 24px 28px 32px; }
.gid-apresentacao { display: flex; align-items: center; gap: 16px; border-bottom: 3px double var(--preto); padding-bottom: 14px; }
.gid-logo svg { width: 64px; height: 64px; display: block; filter: drop-shadow(3px 3px 0 rgba(22,18,15,.35)); }
.gid-apresentacao h1 { margin: 0; font-family: var(--fonte-ui); font-weight: 600; font-size: 26px; letter-spacing: 1px; }
.gid-subtitulo { margin: 0; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--vermelho); }
.gid-intro { font-family: var(--fonte-ui); font-size: 13px; line-height: 1.6; margin: 14px 0 0; }
.gid-inicio h3 { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; margin: 22px 0 8px; }
.gid-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.gid-cartao {
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: var(--cursor-mao); font: inherit; color: var(--preto);
  background: var(--papel-2); border: 2px solid var(--preto); padding: 12px 14px; box-shadow: 4px 4px 0 rgba(22,18,15,.35);
}
.gid-cartao:hover { background: var(--preto); color: var(--papel); }
.gid-cartao-codigo { font-size: 11px; font-weight: 600; letter-spacing: 1px; color: var(--vermelho); }
.gid-cartao:hover .gid-cartao-codigo { color: var(--fosforo); }
.gid-cartao-titulo { font-family: var(--fonte-ui); font-weight: 600; font-size: 15px; }
.gid-cartao-situacao { font-size: 11px; opacity: .8; }
.lista button.pendente { color: var(--cinza-texto); font-style: italic; }
.lista button.pendente.atual { color: var(--papel-3); }
.gid { display: flex; }
.gid-caso { flex: 1; overflow-y: auto; padding: 20px 26px 30px; }
.gid-capa { border-bottom: 2px solid var(--preto); padding-bottom: 8px; margin-bottom: 12px; }
.gid-capa span { font-size: 11px; letter-spacing: 1px; color: var(--vermelho); font-weight: 600; }
.gid-capa h2 { margin: 2px 0 0; font-family: var(--fonte-ui); font-weight: 600; font-size: 20px; }
.gid-capa.com-impressora { position: relative; padding-right: 44px; }
.gid-imprimir {
  position: absolute; right: 0; bottom: 8px; width: 34px; height: 30px; display: grid; place-items: center; cursor: var(--cursor-mao);
  background: none; border: 0; color: var(--preto); padding: 0;
}
.gid-imprimir svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.gid-imprimir circle { fill: currentColor; }
.gid-imprimir:hover { color: var(--vermelho); }
.impressao-capa .gid-imprimir { display: none; }

/* Notas do agente: post-it azul colado por cima da folha, com a letra do terminal (o agente digita) */
.nota-agente {
  position: absolute; z-index: 6; width: 200px; display: flex; flex-direction: column;
  background: linear-gradient(170deg, #d6ebf5, #c3dfee 70%, #b5d5e7); color: #16243a;
  box-shadow: 1px 2px 0 rgba(0,0,0,.12), 3px 6px 8px -4px rgba(0,0,0,.35); border-bottom-right-radius: 14px 4px;
}
.nota-agente.arrastando { opacity: .85; box-shadow: 4px 10px 16px -6px rgba(0,0,0,.45); }
.nota-agente.arrastando * { pointer-events: none; }
.nota-agente-barra { height: 16px; display: flex; justify-content: flex-end; cursor: var(--cursor-mao); background: rgba(22,36,58,.08); touch-action: none; }
.nota-agente-barra button { border: 0; background: none; color: #16243a; font: 15px/1 var(--fonte-ui); padding: 0 5px; cursor: var(--cursor-mao); opacity: .55; }
.nota-agente-barra button:hover { opacity: 1; }
.nota-agente textarea {
  border: 0; background: none; resize: none; overflow: hidden; min-height: 60px; padding: 4px 9px 10px;
  font: 12.5px/1.4 var(--fonte-ui); color: inherit; outline: none;
}
.nota-agente textarea::placeholder { color: rgba(22,36,58,.45); }
.impressao .nota-agente { display: none; }
.gid-resumo { font-family: var(--fonte-ui); font-size: 13px; line-height: 1.65; }
.gid-acoes { margin: 22px 0 0; }
.gid-botao {
  font: 600 13px var(--fonte-ui); padding: 6px 16px; cursor: var(--cursor-mao);
  background: var(--papel); color: var(--preto); border: 2px solid var(--preto);
  box-shadow: inset -2px -2px 0 var(--papel-3), inset 2px 2px 0 #fff8e8, 3px 3px 0 var(--preto);
}
.gid-botao:active { transform: translate(2px, 2px); box-shadow: inset -2px -2px 0 var(--papel-3), inset 2px 2px 0 #fff8e8, 1px 1px 0 var(--preto); }
.gid-esperando {
  position: absolute; inset: 0; z-index: 7; display: grid; place-items: center;
  background: rgba(236,227,207,.85); font: 600 14px var(--fonte-ui); letter-spacing: 1px;
}

/* ---------- Impressão do dossiê ----------
   O app monta o dossiê numa .impressao fora da tela (papel no tamanho fixo de sempre). Na impressão,
   só ela aparece: cada folha numa página A4, ampliada para preencher a página (620 px → 210 mm). */
.impressao { position: absolute; left: -20000px; top: 0; width: 1400px; color: #1d1a16; }
.impressao-capa {
  width: 620px; min-height: 877px; padding: 3em 3.2em; background: #fbf8f0; font: 14px/1.6 var(--fonte-ui);
}
.impressao-capa .gid-logo svg { width: 72px; height: 72px; }
.impressao-capa .gid-capa h2 { font-size: 26px; }
.impressao-capa h3 { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin: 2.2em 0 .6em; }
.impressao-indice { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.8; }
.impressao-indice b { display: inline-block; min-width: 3em; }
@page { size: A4; margin: 0; }
@page deitada { size: A4 landscape; margin: 0; }
@media print {
  html, body { height: auto; overflow: visible; background: #fff; }
  body > :not(.impressao) { display: none !important; }
  .impressao { position: static; width: auto; }
  .impressao .doc { padding: 0; zoom: 1 !important; }
  /* filter faz o Chrome desenhar cada folha como imagem: o PDF passava de 60 MB e a prévia não terminava */
  .impressao, .impressao * { filter: none !important; }
  .impressao-capa, .impressao .doc-pagina, .impressao .doc-item, .impressao .doc-imagens > .doc-folha {
    zoom: 1.27; margin: 0 auto !important; box-shadow: none; transform: none !important;
    break-after: page; break-inside: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .impressao .deitada, .impressao .doc-item, .impressao .doc-imagens > .doc-folha { page: deitada; }
  .impressao .doc-imagens > .doc-folha { min-height: 622px; }
}
.gid-aviso-previa { background: #fff3c4; border: 1px dashed var(--vermelho); color: var(--vermelho); font-size: 12px; padding: 4px 8px; margin: 0 0 12px; }

/* ---------- Documentos do dossiê ---------- */
.janela .corpo { position: relative; }
/* As folhas são montadas num tamanho fixo de papel; o app aplica zoom na .doc para caber na janela */
.doc { padding: 6px 0 20px; }
.doc-folha {
  position: relative; display: flow-root; max-width: 760px; margin: 0 auto 22px; padding: 2.4em 3.1em 2.8em;
  background: #fbf8f0; color: #1d1a16; font: 14px/1.6 var(--fonte-doc);
  box-shadow: 0 1px 0 #d8d0bd, 3px 4px 0 rgba(22,18,15,.25);
}
.doc-folha p { margin: 0 0 .7em; }
/* Folha corrida (texto): sobra mesa dos lados para o post-it poder sair da borda */
.doc > .doc-folha:not(.doc-pagina) { max-width: min(760px, calc(100% - 56px)); }
.doc.doc-imagens > .doc-folha:not(.doc-pagina) { width: 880px; max-width: none; font-size: 19px; }
.doc-folha hr { border: 0; border-top: 1px solid #a99d84; margin: 1.3em 0; }
.doc-folha .md-tabela table { width: 100%; font-size: .93em; }
.doc-folha .md-tabela { margin-bottom: 1em; }
.doc-folha .md-tabela th, .doc-folha .md-tabela td { padding: .2em .5em; }
.doc-folha .md-tabela th, .doc-folha .md-tabela td { border-color: #9c917b; }
.doc-folha .md-tabela th { background: rgba(22,18,15,.06); }
/* texto: impresso do sistema, papel limpo e reto */
.doc-texto .doc-folha { border-top: 6px solid var(--preto); }
/* digitalizado: papel escaneado, um pouco torto, com manchas e borda de scanner.
   O pacote de imagens também é escaneado: folha de rosto e cada ficha (folha deitada com a foto colada). */
.doc-digitalizado .doc-folha, .doc-imagens .doc-folha, .doc-imagens .doc-item {
  background-color: #f1e9d4;
  background-image:
    radial-gradient(ellipse 140px 90px at 88% 12%, rgba(140,110,60,.16), transparent 70%),
    radial-gradient(ellipse 90px 60px at 8% 78%, rgba(120,95,55,.12), transparent 70%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.018) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(0,0,0,.08), transparent 4%, transparent 96%, rgba(0,0,0,.1));
  transform: rotate(-0.45deg); filter: contrast(1.04);
}
.doc-digitalizado .md-tabela th, .doc-digitalizado .md-tabela td { border-color: #7d715c; }
/* Formulário impresso (marcarFormularios): colunas fixas, linhas todas da mesma altura; a letra à mão
   se aperta para caber no quadrado (ajustarFormularios) */
.md-formulario { --linha: 2.45em; table-layout: fixed; width: 100%; }
.doc-folha .md-formulario tbody tr { height: var(--linha); }
.doc-folha .md-formulario td { padding: .15em .35em; vertical-align: middle; overflow: hidden; }
.md-formulario td .md-mao {
  display: block; max-height: calc(var(--linha) - .4em); overflow: hidden;
  font-size: 1.2em; line-height: 1.05;
}
.md-formulario th { font-size: .77em; text-transform: uppercase; overflow: hidden; text-overflow: clip; padding: .2em .3em; }
/* Folhas: altura A4 calculada pelo app (min-height), numeração no pé, cada folha um pouco diferente no scanner */
.doc-pagina { display: flex; flex-direction: column; max-width: none; }
.doc-pagina-conteudo { display: flow-root; }
/* Anotação à mão no pé do formulário (paginar): logo depois da tabela, ou na margem de baixo da folha */
.doc-rodape-mao { margin-top: .5em; }
.doc-rodape-mao p { margin: 0; }
.doc-rodape-mao .md-nota-pe { margin: 0; padding: 0; border: 0; }
.doc-rodape-mao.na-margem { position: absolute; left: 3.1em; right: 3.1em; bottom: .35em; margin: 0; rotate: -0.4deg; }
.doc-pagina-numero { margin-top: auto; padding-top: .7em; text-align: center; font-size: .8em; color: #7d715c; }
.doc-digitalizado .doc-pagina:nth-child(even) { transform: rotate(0.35deg); background-position: 12% 70%, 85% 20%, 0 0, 0 0; }
.doc-digitalizado .doc-pagina:nth-child(3n) { transform: rotate(-0.2deg); }
/* imagens: folha de rosto + uma ficha por item. A ficha é uma folha A4 deitada: foto colada à
   esquerda, texto ao lado. Se o texto for maior, a folha cresce. */
.doc-item {
  display: grid; grid-template-columns: minmax(0, 40%) 1fr; gap: 1.8em; align-items: start;
  width: 880px; aspect-ratio: 297 / 210; margin: 0 auto 26px; padding: 2em 2.2em;
  background: #fbf8f0; color: #1d1a16;
  font: 19px/1.45 var(--fonte-doc); box-shadow: 3px 4px 0 rgba(22,18,15,.25);
}
.doc-imagens .doc-item:nth-child(even) { transform: rotate(0.3deg); background-position: 12% 70%, 85% 20%, 0 0, 0 0; }
.doc-imagens .doc-item:nth-child(3n) { transform: rotate(-0.15deg); }
.doc-item p { margin: 0 0 .5em; }
/* Foto colada na folha da ficha com pedaços de fita adesiva: cada pedaço cobre o canto da foto e
   continua sobre o papel. A inclinação varia (umas retas, outras um pouco tortas) e a fita gira junto.
   Na maioria, dois pedaços nos cantos de cima; em algumas, um pedaço só no meio. */
.doc-foto .md-imagem {
  position: relative; margin: .5em 0 0; padding: .4em .4em 1.4em; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.35); transform: rotate(var(--torta, 0deg)); cursor: zoom-in;
}
/* Foto em pé não pode passar da altura da folha deitada: fica mais estreita e a moldura acompanha */
.doc-foto .md-imagem { width: fit-content; margin-inline: auto; }
.doc-foto .md-imagem img { max-height: 24.5em; width: auto; }
.doc-foto .md-imagem::before, .doc-foto .md-imagem::after {
  content: ""; position: absolute; top: -.3em; width: 4.5em; height: 1.4em; z-index: 2; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 2px, transparent 2px 5px),
    linear-gradient(rgba(226,214,160,.72), rgba(205,192,138,.68));
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35));
  /* pontas rasgadas */
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 2%, 88% 0, 92% 9%, 96% 1%, 100% 10%, 100% 92%, 96% 100%, 92% 90%, 88% 100%, 12% 98%, 8% 90%, 4% 100%, 0 91%);
}
.doc-foto .md-imagem::before { left: -1.7em; transform: rotate(-38deg); }
.doc-foto .md-imagem::after { right: -1.7em; transform: rotate(36deg); }
.doc-item:nth-child(5n+1) .doc-foto { --torta: -1.4deg; }
.doc-item:nth-child(5n+3) .doc-foto { --torta: 1.8deg; }
.doc-item:nth-child(5n+4) .doc-foto { --torta: -0.6deg; }
.doc-item:nth-child(5n+3) .doc-foto .md-imagem::before { left: 50%; top: -.75em; width: 5.5em; margin-left: -2.75em; transform: rotate(-3deg); }
.doc-item:nth-child(5n+3) .doc-foto .md-imagem::after { display: none; }
.doc-ficha { position: relative; }
.doc-lupa {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(22,18,15,.92); padding: 16px; cursor: zoom-out;
}
.doc-lupa img { max-width: 100%; max-height: calc(100% - 30px); object-fit: contain; box-shadow: 0 0 0 6px #fff; }
.doc-lupa span { color: var(--papel); font-size: 12px; }

/* Marcadores dos documentos: letra à mão, nota de detetive, carimbo */
.md-mao { font-family: var(--fonte-mao); font-size: 1.3em; line-height: 1.25; color: #1f3270; }
div.md-mao { margin: 6px 0 12px; }
div.md-mao p { margin: 0 0 4px; }
.md-nota { font-family: var(--fonte-mao); font-size: 1.3em; line-height: 1.25; color: #8a2a21; }
.md-nota p { margin: 0; }
/* Endereço marcado como código dentro da nota: escrito à mão como o resto */
.md-nota code { font: inherit; background: none; padding: 0; border: 0; color: inherit; }
/* Notas de detetive são post-its colados por cima do papel depois que o texto foi datilografado:
   o texto não abre espaço para eles. Ficam fora do fluxo (não contam na paginação) e o app escolhe
   o lugar que cobre menos texto (posicionarSoltos). Clique levanta o post-it para ler o que há embaixo.
   O de margem é pequeno e pode ficar meio para fora da folha; o "postit" é maior. */
.md-nota-margem, .md-nota-postit {
  color: #23264a; padding: 10px 12px 14px;
  background: linear-gradient(170deg, #fbe97a, #f3d955 70%, #e9cc45);
  box-shadow: 1px 2px 0 rgba(0,0,0,.12), 3px 6px 8px -4px rgba(0,0,0,.35);
  border-bottom-right-radius: 14px 4px; /* pontinha descolando */
}
.md-nota-margem { width: max-content; max-width: 10.5em; }
.md-nota-postit { width: max-content; max-width: 13.5em; }
.doc .md-nota-margem, .doc .md-nota-postit { position: absolute; visibility: hidden; }
.doc .md-solto-nota { visibility: visible; z-index: 4; cursor: var(--cursor-mao); transition: opacity .2s, translate .2s; }
.doc .md-solto-nota.levantado { opacity: .15; translate: 6px -8px; }
.md-nota-pe { display: block; margin: 22px 0 0; padding-top: 8px; border-top: 1px dashed #a99d84; }
/* Carimbo em bloco não ocupa espaço: fica por cima da folha (ou ficha), onde cobrir menos texto.
   A linha vazia marca onde ele aparece no documento; o app escolhe a posição (posicionarCarimbos). */
.md-carimbo-linha { position: relative; height: 0; }
.md-carimbo-linha .md-carimbo { position: absolute; top: -16px; left: 0; white-space: nowrap; }
.md-solto.md-solto { position: absolute; z-index: 3; margin: 0; transform: rotate(var(--giro, 0deg)); }
.md-solto-carimbo { white-space: nowrap; pointer-events: none; }
.md-ancora { height: 0; }
.doc .md-carimbo { mix-blend-mode: multiply; opacity: .82; font-size: 1.07em; padding: .25em .8em; border-width: 4px; }
/* O que passa da borda da ficha (ponta da fita) está dobrado para trás do papel: não aparece */
.doc-item { position: relative; overflow: clip; }
.md-alerta { display: inline-block; background: #c0261a; color: #fff; font: 600 11px var(--fonte-ui); padding: 1px 6px; margin: 0 4px; }

/* ---------- Likotoko: caixa de entrada e mensagem aberta ---------- */
.lik { display: flex; flex-direction: column; }
.lik-conta { flex: none; padding: 6px 12px; background: var(--papel-2); border-bottom: 2px solid var(--preto); font-size: 12px; }
.lik-meio { flex: 1; display: flex; min-height: 0; }
/* Filtros por marcador: Todas, o caso em andamento, outros casos, Gerais */
.lik-filtros { flex: none; display: flex; gap: 4px; flex-wrap: wrap; padding: 6px 10px; background: var(--papel-2); border-bottom: 1px solid var(--papel-3); }
.lik-filtros button { font: inherit; font-size: 11px; padding: 2px 9px; border: 1px solid var(--preto); background: var(--papel); color: var(--preto); cursor: var(--cursor-mao); }
.lik-filtros button.atual { background: var(--preto); color: var(--papel); }
.lik-marcador { display: inline-block; margin-left: 4px; padding: 0 5px; border: 1px solid var(--vermelho); color: var(--vermelho); font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.lik-item.atual .lik-marcador { border-color: var(--fosforo); color: var(--fosforo); }
.lik-lista { width: 240px; }
.lik-lista .lik-item { display: grid; gap: 1px; }
.lik-item-de, .lik-item-assunto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lik-item-assunto { font-family: var(--fonte-ui); }
.lik-item.nao-lida .lik-item-de, .lik-item.nao-lida .lik-item-assunto { font-weight: 700; }
.lik-item-de i { font-style: normal; color: var(--vermelho); margin-right: 5px; }
.lik-item.atual .lik-item-de i { color: var(--fosforo); }
.lik-leitura { flex: 1; overflow-y: auto; padding: 18px 26px 32px; }
.lik-cabecalho { border-bottom: 3px double var(--preto); padding-bottom: 10px; margin-bottom: 16px; }
.lik-cabecalho h2 { margin: 0 0 8px; font-family: var(--fonte-ui); font-weight: 600; font-size: 19px; }
.lik-cabecalho dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 0; font-size: 12px; }
.lik-cabecalho dt { text-transform: uppercase; letter-spacing: 1px; color: var(--vermelho); font-weight: 600; }
.lik-cabecalho dd { margin: 0; }
.lik-texto { font-family: var(--fonte-ui); font-size: 14px; line-height: 1.65; max-width: 640px; }
.lik-texto p, .lik-texto ul, .lik-texto ol { margin: 0 0 12px; }
.lik-texto li { margin-bottom: 4px; }
.lik-texto a, .doc a[data-endereco] { color: var(--vermelho); }
/* Nova mensagem, acima das pastas e da lista; menu ⋮ da mensagem aberta */
.lista .lik-nova { width: 100%; font: inherit; font-size: 12px; font-weight: 600; padding: 7px 10px; border: 0; border-bottom: 1px solid var(--preto); background: var(--preto); color: var(--papel); cursor: var(--cursor-mao); text-align: center; }
.lista .lik-nova:hover { background: var(--vermelho); }
.lik-cabecalho { position: relative; }
.lik-menu-msg { float: right; margin: -2px -4px 0 8px; width: 28px; height: 28px; font: 600 18px/1 var(--fonte-ui); background: none; border: 1px solid transparent; color: var(--preto); cursor: var(--cursor-mao); }
.lik-menu-msg:hover { background: var(--papel-2); border-color: var(--preto); }
.menu-contexto { position: fixed; z-index: 7800; }
.lista .lik-pastas { display: flex; position: sticky; top: 0; z-index: 1; }
.lista .lik-pastas button {
  flex: 1; display: block; width: auto; padding: 8px 6px; border: 0; border-right: 1px solid var(--papel-3);
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase; text-align: center; background: var(--papel-3); color: var(--preto);
}
.lista .lik-pastas button.atual { background: var(--vermelho); color: var(--papel); }
.lista .lik-pastas button[hidden] { display: none; }
/* Escrever */
.lik-escrever { display: grid; gap: 8px; max-width: 640px; font-family: var(--fonte-ui); }
.lik-escrever h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.lik-escrever label { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 8px; font-size: 12px; }
.lik-escrever input, .lik-escrever textarea { font: inherit; font-size: 14px; padding: 4px 6px; border: 1px solid var(--preto); background: #fff; color: var(--preto); }
.lik-escrever textarea { resize: vertical; min-height: 200px; line-height: 1.5; }
.lik-escrever .gid-botao { margin-right: 8px; }
.lik-escrever-erro { margin: 0; color: var(--vermelho); font-weight: 600; font-size: 13px; }
.lik-escrito { white-space: pre-wrap; }
.lik-n { margin: 0; font-size: 11px; color: #6b5f4a; }
.lik-item .lik-item-de small { display: inline; opacity: .7; }
.lik-leitura .lik-bloqueio { margin-top: 40px; }

/* Conta de personagem: faixa de conta escura e botão para voltar */
.lik.outra-conta .lik-conta { background: var(--preto); color: var(--papel); }
.lik-voltar { margin-left: 10px; font: inherit; font-size: 11px; padding: 1px 8px; cursor: var(--cursor-mao); border: 1px solid var(--papel); background: none; color: inherit; }
.lik-entrar { display: grid; gap: 10px; max-width: 320px; font-family: var(--fonte-ui); }
.lik-entrar h2 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.lik-entrar label { display: grid; gap: 3px; font-size: 12px; }
.lik-entrar input { font: inherit; font-size: 14px; padding: 4px 6px; border: 1px solid var(--preto); background: #fff; }
.lik-entrar-erro { margin: 0; color: var(--vermelho); font-weight: 600; font-size: 13px; }
.lik-entrar .gid-botao { margin-right: 8px; }
/* Conversa: um bloco por mensagem */
.lik-conversa-msg { border-left: 3px solid var(--papel-3); padding: 2px 0 2px 14px; margin: 0 0 22px; }
.lik-conversa-msg > header { font-size: 12px; margin-bottom: 8px; }
.lik-conversa-msg > header small { display: block; color: #6b5f4a; }
/* Anexos: documento (baixa para a mesa) e print de tela */
.lik-anexo { margin: 4px 0 8px; max-width: 640px; }
.lik-anexo-doc { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; font: inherit; font-size: 13px; padding: 6px 12px; border: 1px dashed var(--preto); background: var(--papel-2); color: var(--preto); cursor: var(--cursor-mao); text-align: left; }
.lik-anexo-doc small { font-size: 11px; color: var(--vermelho); text-transform: uppercase; letter-spacing: 1px; }
.lik-anexo-doc.baixado small { color: #2f6b3a; }
.lik-anexo .site-baixando { display: block; max-width: 260px; margin-top: 6px; }
.lik-print figcaption { font-size: 12px; margin-bottom: 6px; }
.lik-print-tela { border: 1px solid #888; background: #fff; color: #222; box-shadow: 3px 3px 0 rgba(0,0,0,.18); font-family: Georgia, serif; font-size: 13px; line-height: 1.5; }
.lik-endereco { font-weight: 400; font-size: .88em; opacity: .7; }
.lik-print-endereco { background: #ddd; border-bottom: 1px solid #aaa; padding: 3px 10px; font: 11px var(--fonte-ui); color: #444; }
.lik-print-pagina { padding: 10px 14px; }
.lik-print-pagina p { margin: 0 0 8px; }
/* Trecho que a tradução não traduziu */
.md-original { font-style: italic; }
.md-selo { display: inline-block; margin-left: 6px; padding: 0 4px; border: 1px solid currentColor; font: 600 9px/1.5 var(--fonte-ui); letter-spacing: 1px; font-style: normal; vertical-align: middle; opacity: .75; }

/* ---------- Mindunagu: moldura do navegador ---------- */
.mind { display: flex; flex-direction: column; }
.mind > * { flex: none; }
.mind-barra { display: flex; gap: 4px; padding: 5px 8px; background: var(--papel-2); border-bottom: 1px solid var(--papel-3); align-items: center; font-size: 12px; }
.mind-barra > button, .mind-form button {
  font: inherit; min-width: 28px; padding: 2px 6px; cursor: var(--cursor-mao); background: var(--papel); color: var(--preto);
  border: 1px solid var(--preto); box-shadow: inset -2px -2px 0 var(--papel-3), inset 2px 2px 0 #fff8e8;
}
.mind-barra > button:disabled { color: var(--papel-3); cursor: var(--cursor-seta); }
.mind-form { flex: 1; display: flex; gap: 6px; align-items: center; margin-left: 6px; min-width: 0; }
.mind-form input { flex: 1; min-width: 0; font: inherit; padding: 3px 6px; border: 1px solid var(--preto); background: #fff8e8; }
.mind-favoritos { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 8px; font-size: 11px; background: var(--papel-2); border-bottom: 2px solid var(--preto); }
.mind-favoritos a { color: var(--preto); text-decoration: none; border: 1px solid var(--preto); background: var(--papel); padding: 1px 8px; }
.mind-favoritos a:hover { background: var(--preto); color: var(--papel); }
.mind-tela { flex: 1 !important; min-height: 0; overflow-y: auto; background: #fff; position: relative; }
.mind-status { font-size: 11px; padding: 3px 10px; border-top: 1px solid var(--papel-3); background: var(--papel-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mind-inicial { max-width: 520px; margin: 0 auto; padding: 36px 24px; text-align: center; font-family: var(--fonte-ui); color: var(--preto); background: var(--papel); min-height: 100%; }
.mind-logo svg { width: 72px; height: 72px; }
.mind-inicial h1 { margin: 6px 0 0; font-family: var(--fonte-doc); font-weight: normal; font-size: 30px; }
.mind-subtitulo { margin: 0 0 18px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--vermelho); }
.mind-inicial h3 { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; margin: 24px 0 8px; }
.mind-inicial ul { list-style: none; padding: 0; margin: 0; }
.mind-inicial li { margin: 4px 0; }
.mind-inicial a { color: var(--vermelho); }
.mind-inicial small { color: var(--cinza-texto); }
.mind-erro { padding: 40px 28px; font-family: var(--fonte-ui); color: var(--preto); }
.mind-erro h2 { font-size: 18px; margin: 0 0 10px; }
.mind-externo { display: flex; flex-direction: column; height: 100%; }
.mind-externo-aviso { margin: 0; padding: 6px 10px; font-size: 12px; background: var(--preto); color: var(--fosforo); }
.mind-externo iframe { flex: 1; border: 0; width: 100%; }
.mind-tela .firewall { margin: 30px auto; }

/* ---------- Sites .kogu: tema padrão ----------
   Cada site pode ter visual próprio em apps/mindunagu/sites/<id>.css, que sobrescreve este. */
.site { min-height: 100%; display: flex; flex-direction: column; background: #f7f4ec; color: #222; font: 15px/1.6 Georgia, "Times New Roman", serif; }
.site-cabecalho { text-align: center; padding: 22px 20px 12px; }
.site-logo { width: 110px; height: auto; display: block; margin: 0 auto 6px; }
.site-titulo { font-size: 28px; font-weight: bold; letter-spacing: 1px; }
.site-slogan { margin: 2px 0 0; font-style: italic; color: #555; }
.site-menu { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; padding: 8px 16px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.site-menu a { color: #333; text-decoration: none; }
.site-menu a:hover, .site-menu a.atual { text-decoration: underline; }
.site-pagina { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 18px 24px 30px; }
.site-pagina a { color: #8a2a21; }
.site-rodape { text-align: center; font-size: 12px; color: #666; padding: 14px 20px; border-top: 1px solid #ccc; }
.site-login { display: grid; gap: 10px; max-width: 280px; margin: 18px 0; }
.site-login label { display: grid; gap: 2px; font-size: 13px; }
.site-login input { font: inherit; padding: 4px 6px; border: 1px solid #999; background: #fff; }
.site-login button { justify-self: start; font: inherit; padding: 3px 16px; cursor: var(--cursor-mao); }
.site-login-resposta { margin: 0; font-weight: bold; color: #8a2a21; }
.site-busca { display: flex; gap: 6px; max-width: 520px; margin: 18px 0 10px; }
.site-busca input { flex: 1; min-width: 0; font: inherit; padding: 5px 8px; border: 1px solid #999; background: #fff; }
.site-busca button { font: inherit; padding: 3px 16px; cursor: var(--cursor-mao); }
.site-busca-mensagem { margin: 8px 0; font-weight: bold; }
.site-busca-tabela { border-collapse: collapse; margin: 8px 0; max-width: 100%; }
.site-busca-tabela th, .site-busca-tabela td { border: 1px solid #bbb; padding: 4px 10px; text-align: left; vertical-align: top; }
/* Área logada de um site: documentos para baixar para a mesa do caso */
.site-area { margin: 18px 0 0; padding: 14px 18px; border: 1px solid #bbb; background: rgba(255,255,255,.55); }
.site-area > :first-child { margin-top: 0; }
.site-documentos { list-style: none; margin: 12px 0 0; padding: 0; }
.site-documentos li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 0; border-top: 1px solid #ccc; }
.site-doc-titulo { flex: 1; min-width: 200px; }
.site-baixar { font: inherit; font-size: 13px; padding: 3px 14px; cursor: var(--cursor-mao); }
.site-baixar.baixado { cursor: var(--cursor-seta); color: #2f6b3a; border-color: #2f6b3a; background: none; }
.site-baixando { flex-basis: 100%; height: 6px; border: 1px solid #999; background: #fff; }
.site-baixando i { display: block; height: 100%; width: 0; background: #555; animation: baixar 1.4s steps(14) forwards; }
@keyframes baixar { to { width: 100%; } }

/* Blocos da publicação (sites e documentos) */
.md-tabela { overflow-x: auto; margin: 0 0 14px; }
.md-tabela table { border-collapse: collapse; font-size: 13px; }
.md-tabela th, .md-tabela td { border: 1px solid #bbb; padding: 3px 7px; text-align: left; vertical-align: top; }
.md-tabela th { background: rgba(0,0,0,.05); }
.md-imagem { margin: 0 0 14px; }
.md-imagem img { max-width: 100%; height: auto; display: block; }
.md-imagem-falta { display: grid; place-items: center; min-height: 120px; padding: 12px; border: 2px dashed #bbb; color: #888; font-size: 12px; font-style: italic; text-align: center; }
.md-faixa { background: #16120f; color: #ece3cf; padding: 16px 20px; margin: 0 0 18px; }
.md-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 0 0 14px; }
.md-cartao { position: relative; border: 1px solid #ccc; padding: 12px 14px; background: #fff; overflow: hidden; }
.md-cartao h3 { margin: 0 0 8px; }
/* Fita diagonal no canto; texto longo é cortado pela borda, como uma fita colada às pressas */
.md-fita { position: absolute; top: 14px; right: -42px; transform: rotate(35deg); background: #16120f; color: #ece3cf; font-size: 10px; line-height: 1.3; padding: 3px 44px; text-align: center; max-width: 220px; z-index: 2; }
.md-fita p { margin: 0; }
.md-aviso { display: block; border: 2px solid #8a2a21; color: #8a2a21; padding: 6px 10px; margin: 0 0 14px; font-weight: bold; }
span.md-aviso { display: inline; padding: 0 4px; }
.md-carimbo { display: inline-block; border: 3px double #8a2a21; color: #8a2a21; padding: 2px 10px; font: 600 13px var(--fonte-ui); letter-spacing: 2px; transform: rotate(-6deg); }
.site blockquote { margin: 0 0 14px; padding: 4px 14px; border-left: 3px solid #bbb; color: #444; }

/* ---------- Terminal portátil (celular) ---------- */
@media (max-width: 760px) {
  #boot { padding: 20px 16px 60px; font-size: 19px; }
  #boot .titulo { font-size: 24px; }
  .faixa { gap: 10px; font-size: 11px; }
  .faixa .marca .sub, .faixa button.tela-cheia, .relogio { display: none; }
  /* No celular a doca fica embaixo, como num telefone */
  .meio { flex-direction: column-reverse; }
  .doca { width: auto; border-right: 0; border-top: 3px solid var(--preto); box-shadow: none; }
  .doca-apps { flex-direction: row; justify-content: space-around; padding: 4px 0; overflow: visible; }
  .icone { width: 84px; }
  .icone:first-child { margin-top: 0; }
  .icone svg { width: 32px; height: 32px; }
  .janela {
    left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important;
    min-width: 0; box-shadow: none; border-width: 0;
  }
  .janela .barra { cursor: var(--cursor-seta); height: 38px; }
  .janela .barra button { width: 32px; height: 28px; }
  .janela .barra .maximizar, .alca { display: none; }
  .gid { flex-direction: column; }
  .lik-meio { flex-direction: column; }
  .lik-filtros { flex-wrap: nowrap; overflow-x: auto; }
  .lik-filtros button { flex: none; }
  .lik-leitura { padding: 14px 16px 40px; }
  .lista { width: 100%; max-height: 32%; border-right: 0; border-bottom: 2px solid var(--preto); }
  .gid-caso { padding: 14px 16px 40px; }
  .janela .doc-folha { padding: 20px 16px 26px; }
  .janela .doc-pagina { padding: 1.5em 1.2em 1em; }
  /* No celular a ficha não cabe deitada: a foto fica em cima e o texto embaixo */
  .janela .doc-item { grid-template-columns: 1fr; padding: 16px 14px; width: auto; font-size: 12px; aspect-ratio: auto; }
  .janela .doc.doc-imagens > .doc-folha:not(.doc-pagina) { width: auto; font-size: 13px; }
  .janela .md-nota-margem { max-width: 55%; }
  .janela .md-nota-postit { max-width: 60%; }
  .janela .doc > .doc-folha:not(.doc-pagina) { max-width: none; }
  .gid-inicio { padding: 16px 16px 40px; }
  .menu-titulo { padding: 8px 10px; }
  .menu-item { padding: 9px 14px 9px 26px; }
}