:root{
  --ceu:#8ad0f8;--grama:#78b85a;--madeira:#5b2c12;--borda:#d9893c;--bege:#f7d9a0;--bege-claro:#fff0c8;
  --esc:#3b1c08;--marrom:#7a4a22;--verde:#2fa39a;--verde-esc:#1f7a73;--vermelho:#e84a3a;--papel:#fffaf0;
  --fonte:'VT323',monospace;--titulo:'Pixelify Sans','VT323',monospace;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--ceu) linear-gradient(var(--ceu),var(--ceu));color:var(--esc);font-family:var(--fonte);font-size:18px;line-height:1.2;
  background-image:repeating-linear-gradient(90deg,transparent 0 5px,#86ccf4 5px 6px)}
.app{display:flex;gap:12px;padding:8px 12px 24px;align-items:flex-start;max-width:1700px;margin:0 auto}
#predio{flex:0 0 auto;position:relative}
#cena{display:block;image-rendering:pixelated;image-rendering:crisp-edges;cursor:default}
#cena.mao{cursor:pointer}
#painel{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:12px}

.caixa{background:var(--bege);border:3px solid var(--madeira);box-shadow:inset 0 0 0 3px var(--borda),inset 0 3px 0 3px var(--bege-claro);padding:12px 14px 12px;position:relative}
.caixa .placa{position:absolute;top:-14px;left:10px;background:#c98a4b;color:var(--bege-claro);border:3px solid var(--madeira);padding:0 10px;font-size:16px;line-height:18px;letter-spacing:.5px}
.caixa.com-placa{padding-top:16px;margin-top:10px}
.cabeca{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cabeca h1{margin:0;font-family:var(--titulo);font-weight:700;font-size:26px;letter-spacing:.5px}
.cabeca .hora{font-size:30px;line-height:1}
.cabeca .data{color:var(--marrom);font-size:16px;text-align:right}
.resumo{text-align:center;font-size:16px;padding:6px 10px}
.resumo .quadro-de{color:var(--marrom)}

.selecionado{display:grid;grid-template-columns:70px 1fr;gap:12px;align-items:center;min-height:72px}
.selecionado canvas{display:block;image-rendering:pixelated;background:#e8c890;border-top:3px solid var(--bege-claro)}
.selecionado .nome{font-family:var(--titulo);font-weight:700;font-size:22px}
.selecionado .sub,.selecionado .reg{color:var(--marrom);font-size:16px}
.selecionado.vazio{display:block;color:var(--marrom);font-size:17px}
.botoes{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
button{font-family:var(--fonte);font-size:17px;color:var(--esc);background:#c98a4b;border:3px solid var(--madeira);box-shadow:inset 0 3px 0 #e3ac6a,inset 0 -3px 0 #9b6332;padding:8px 14px;cursor:pointer;flex:1 1 0;min-width:110px}
button:hover{filter:brightness(1.06)}
button:active{box-shadow:inset 0 -3px 0 #e3ac6a,inset 0 3px 0 #9b6332}
button:disabled{opacity:.45;cursor:not-allowed;filter:none}
button.principal{background:var(--verde);color:#fff8e6;box-shadow:inset 0 3px 0 #5fc8bf,inset 0 -3px 0 var(--verde-esc)}
button.pequeno{flex:0 0 auto;min-width:0;padding:4px 10px;font-size:15px}
.menu-mover{display:none;margin-top:10px;background:var(--papel);border:3px solid var(--madeira);padding:6px}
.menu-mover.aberto{display:block}
.menu-mover .titulo{background:#c98a4b;color:var(--bege-claro);margin:-6px -6px 6px;padding:2px 8px;font-size:15px}
.menu-mover ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px}
.menu-mover li button{width:100%;text-align:left;background:var(--papel);box-shadow:none;border-width:2px;padding:4px 8px;font-size:16px;display:flex;align-items:center;gap:8px}
.menu-mover li button:hover{background:#e8f0d8}
.menu-mover .cor{display:inline-block;width:10px;height:10px;border:1px solid var(--esc)}

textarea{width:100%;font-family:var(--fonte);font-size:18px;color:var(--esc);background:var(--papel);border:3px solid var(--madeira);padding:8px 10px;resize:vertical;min-height:72px;display:block}
textarea::placeholder{color:#a08a70}
.destinos{display:flex;flex-wrap:wrap;gap:8px 16px;margin:10px 0 6px;font-size:16px;align-items:center}
.destinos label{display:flex;align-items:center;gap:6px;cursor:pointer}
.destinos input{accent-color:var(--verde);width:16px;height:16px;margin:0}
.destinos label.off{opacity:.5}
.rodape{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.rodape .dica{color:var(--marrom);font-size:15px;flex:1 1 200px}
.rodape button{flex:0 0 auto;min-width:120px}
.sessao{display:none;margin-top:6px;font-size:15px;color:var(--marrom)}
.sessao.on{display:flex;align-items:center;gap:6px}
.sessao input{font-family:var(--fonte);font-size:16px;border:2px solid var(--madeira);background:var(--papel);padding:2px 6px;width:140px}
.msg{margin-top:8px;font-size:16px;min-height:20px}
.msg.erro{color:#a4261a}
.msg.ok{color:#1e6a1e}

.lista{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:16px}
.lista li .meta{color:var(--marrom);font-size:15px;display:flex;align-items:center;gap:6px}
.lista li .meta::before{content:"";display:inline-block;width:8px;height:8px;background:var(--verde-ok,#3a9a3a)}
.lista li.ruim .meta::before{background:var(--vermelho)}
.lista li{min-width:0}
.lista li .texto{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista .vazio{color:var(--marrom)}
.duas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.duas>.caixa{min-width:0}

#token{position:fixed;inset:0;background:rgba(43,29,20,.7);display:none;align-items:center;justify-content:center;padding:16px;z-index:10}
#token.on{display:flex}
#token .caixa{max-width:420px;width:100%}
#token input{width:100%;font-family:var(--fonte);font-size:18px;border:3px solid var(--madeira);background:var(--papel);padding:8px 10px;margin:8px 0}
#token p{margin:6px 0}

@media (max-width:899px){
  body{font-size:17px}
  .app{flex-direction:column;padding:6px 8px 24px;gap:10px}
  #predio{width:100%}
  #cena{margin:0 auto}
  #painel{width:100%;flex:1 1 auto}
  .cabeca h1{font-size:24px}
  .cabeca .hora{font-size:26px}
  .duas{grid-template-columns:minmax(0,1fr)}
  button{min-width:90px;padding:8px 10px}
}