:root {
  --mesa: #2a2824;
  --mesa-2: #34312c;
  --barra: #cdd3c8;          /* verde-acinzentado das Olivetti dos anos 70 */
  --barra-borda: #9fab9f;
  --tinta: #1f2422;
  --tecla: #2b302d;
  --tecla-txt: #f1efe8;
  --tecla-on: #b8382e;
  --papel: #fffffc;
  --suave: #5a625d;
  --ok: #3f7d4f;
  --erro: #b8382e;
  --ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--mesa); color: var(--tinta); font: 14px/1.4 var(--ui); overflow: hidden; }
body.bloqueado #app { visibility: hidden; }

/* ---------- login ---------- */
#login { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; z-index: 50; background: var(--mesa); }
#login[hidden] { display: none; }
.login-folha {
  width: min(440px, 100%); background: var(--papel); padding: 40px 36px 28px; text-align: center;
  box-shadow: 0 18px 40px rgba(0,0,0,.5); font-family: 'Special Elite', 'Courier New', monospace;
}
.login-folha h1 { font: 400 34px/1.1 'Special Elite', monospace; margin: 0 0 14px; letter-spacing: .04em; }
.login-folha .sub { font-size: 15px; line-height: 1.55; margin: 0 0 24px; color: #2c2c2c; }
.gbtn { display: inline-flex; align-items: center; gap: 10px; border: 1px solid #c9c9c4; background: #fff; border-radius: 6px; padding: 10px 18px; font: 500 15px var(--ui); cursor: pointer; }
.gbtn:hover { background: #f4f4f0; }
.gbtn svg { width: 20px; height: 20px; }
#login-msg { min-height: 1.4em; color: var(--erro); font: 14px var(--ui); }
.legal { font: 12.5px/1.5 var(--ui); color: var(--suave); }
.legal a, .voltar { color: #2d5d8a; }
.voltar { display: inline-block; margin-top: 8px; font: 13px var(--ui); }

/* ---------- barra ---------- */
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
#barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 12px;
  background: var(--barra); border-bottom: 3px solid var(--barra-borda); position: relative; z-index: 5;
}
#nome {
  font: 17px 'Special Elite', monospace; background: transparent; border: 0; border-bottom: 1px dashed #7d877f;
  padding: 3px 2px; width: min(260px, 40vw); color: var(--tinta);
}
#nome:focus { outline: none; border-bottom-color: var(--tinta); }
.bt {
  font: 500 13px var(--ui); color: var(--tecla-txt); background: var(--tecla); border: 0; border-radius: 6px;
  padding: 6px 11px; cursor: pointer; box-shadow: 0 2px 0 #121513; text-decoration: none; display: inline-block;
}
.bt:hover { background: #3a403c; }
.bt:active { transform: translateY(1px); box-shadow: 0 1px 0 #121513; }
.bt[aria-pressed="true"], .bt[aria-checked="true"] { background: var(--tecla-on); box-shadow: 0 2px 0 #6e1f19; }
.bt[aria-pressed="false"]#bt-som { background: #6b736e; }
.bt.perigo { background: #7a2a23; }
.bt.tecla { border-radius: 50%; width: 32px; height: 32px; padding: 0; }
.grupo { display: inline-flex; align-items: center; gap: 5px; }
.rot { font-size: 12px; color: var(--suave); margin-right: 2px; }
.sep { width: 1px; height: 24px; background: var(--barra-borda); }
.espaco { flex: 1; }
#quem { font-size: 12px; color: var(--suave); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--suave); }
.status i { width: 8px; height: 8px; border-radius: 50%; background: #9aa29d; }
.status[data-s="saved"] i { background: var(--ok); }
.status[data-s="saving"] i { background: #c9a227; }
.status[data-s="error"] i { background: var(--erro); }

/* ---------- mesa, régua e folhas ---------- */
#mesa {
  flex: 1; overflow: auto; position: relative;
  background: radial-gradient(ellipse at 50% 0%, var(--mesa-2), var(--mesa) 70%);
  overscroll-behavior: contain;
}
#mesa.carro-movel { overflow-x: hidden; }
#trilho { position: relative; margin: 0 auto; padding: 0 24px 50vh; width: max-content; }
#mesa.carro-movel #trilho { transition: transform .09s linear; }
#mesa.carro-movel #trilho.retorno { transition: transform .32s cubic-bezier(.3,.7,.3,1); }
#regua {
  position: sticky; top: 0; z-index: 3; display: block; cursor: pointer;
  background: #e9e6dc; border-bottom: 1px solid #8f948e; box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
#folhas { display: flex; flex-direction: column; gap: 28px; padding-top: 22px; }
.folha {
  position: relative; background: var(--papel); box-shadow: 0 10px 28px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  cursor: default;
  /* fibras discretas de papel sulfite */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.folha canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.guia {
  position: absolute; pointer-events: none; z-index: 2;
  border-bottom: 2px solid rgba(184, 56, 46, .75);
  background: rgba(184, 56, 46, .07);
}
.guia.travada { border-bottom-color: rgba(0,0,0,.55); background: rgba(0,0,0,.08); }
#teclas { position: fixed; left: 0; bottom: 0; width: 2px; height: 2px; opacity: 0; border: 0; padding: 0; resize: none; pointer-events: none; }

/* ---------- avisos e diálogos ---------- */
#aviso {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; max-width: calc(100% - 32px);
  background: var(--tecla); color: var(--tecla-txt); padding: 10px 16px; border-radius: 8px; box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
dialog {
  border: 0; border-radius: 10px; padding: 22px 24px; width: min(620px, calc(100% - 32px)); max-height: calc(100% - 48px);
  background: #f6f4ee; color: var(--tinta); box-shadow: 0 20px 50px rgba(0,0,0,.55);
}
dialog::backdrop { background: rgba(0,0,0,.5); }
dialog h2 { font: 400 24px 'Special Elite', monospace; margin: 0 0 14px; }
dialog h3 { font-size: 14px; margin: 18px 0 6px; }
.acoes { display: flex; justify-content: flex-end; margin-top: 16px; }
#lista-docs { list-style: none; margin: 0; padding: 0; max-height: 55vh; overflow: auto; }
#lista-docs li { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid #dcd8cc; }
#lista-docs li.atual { background: #e9e5d8; }
#lista-docs .info { flex: 1; min-width: 0; }
#lista-docs .info b { display: block; font: 400 16px 'Special Elite', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lista-docs .info small { color: var(--suave); }
#lista-docs .vazio { color: var(--suave); }
.opcao { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.atalhos { border-collapse: collapse; width: 100%; font-size: 13px; }
.atalhos td { padding: 4px 8px 4px 0; border-bottom: 1px solid #dcd8cc; vertical-align: top; }
.atalhos td:first-child { white-space: nowrap; font-weight: 600; }
.botoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- impressão: só as folhas, em A4 real ---------- */
#impressao { display: none; }
@page { size: A4; margin: 0; }
@media print {
  html, body { height: auto; overflow: visible; background: #fff; }
  #app, #login, #aviso, dialog { display: none !important; }
  #impressao { display: block; }
  #impressao img { display: block; width: 210mm; height: 297mm; break-after: page; }
  #impressao img:last-child { break-after: auto; }
}

@media (max-width: 760px) {
  #barra { padding: 6px 8px; }
  #quem, .rot { display: none; }
  #trilho { padding: 0 8px 50vh; }
}