/* AutomaOps — identidade "papel / tinta": tinta vermelha sobre papel creme.
   Herdada do DashGen (F4), deliberadamente fora das cores NCCSoft's. */
:root{
  --bg:#F4ECD8; --surface:#FBF6E9; --surface-2:#FDFAF1;
  --accent:#B0413E; --accent-2:#3A6B5E; --papel-temporal:#8A6D3B;
  --ink:#2b2620; --muted:#8a8170; --danger:#8f322f;
  --line:rgba(43,38,32,.14); --line-forte:rgba(43,38,32,.24);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{overflow-x:hidden}
body{background:var(--bg);color:var(--ink);min-height:100vh;
  font-family:"Cascadia Mono",Consolas,ui-monospace,monospace;
  display:flex;flex-direction:column}
body::before{content:"";position:fixed;inset:0;z-index:-1;
  background:radial-gradient(ellipse at 50% -10%,rgba(176,65,62,.05),transparent 60%)}

.topo{display:flex;align-items:baseline;gap:1rem;
  padding:1.1rem 1.4rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.topo h1{font-size:1.5rem;font-weight:800;letter-spacing:.34em;
  color:var(--accent);padding-left:.34em}
.topo .sub{color:var(--muted);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase}
.topo .quem{margin-left:auto;color:var(--muted);font-size:.74rem;
  white-space:nowrap;flex-shrink:0}
.topo .quem a{color:var(--accent);margin-left:.6rem}

main{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;padding:2.4rem 1.2rem;width:100%}

.cartao{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:2.2rem;max-width:620px;width:100%;margin:0 auto;
  box-shadow:0 1px 3px rgba(43,38,32,.06)}
.cartao.centro{text-align:center;max-width:460px;margin:auto}
.cartao h2{font-size:1.05rem;color:var(--accent);margin-bottom:1rem}
.cartao h3{font-size:.82rem;color:var(--ink);margin:1.2rem 0 .4rem;
  letter-spacing:.04em}
.lead{line-height:1.75;font-size:.92rem;margin-bottom:1.2rem}
.nota{color:var(--muted);font-size:.76rem;line-height:1.7;margin-top:1rem}
code{background:var(--surface-2);border:1px solid var(--line);border-radius:5px;
  padding:.1rem .4rem;font-size:.8rem;color:var(--accent)}

.termos{background:var(--surface-2);border:1px solid var(--line);
  border-radius:12px;padding:1.2rem 1.3rem;margin:1.4rem 0;
  max-height:340px;overflow-y:auto}
.termos p{font-size:.84rem;line-height:1.7;color:var(--ink)}
.termos .versao{color:var(--muted);font-size:.72rem;margin-top:1.4rem;
  border-top:1px solid var(--line);padding-top:.8rem}

.botao{display:inline-block;background:var(--accent);color:var(--bg);border:0;
  border-radius:11px;padding:.8rem 2rem;font-weight:700;font-family:inherit;
  cursor:pointer;font-size:.95rem;text-decoration:none;margin-top:1.2rem;
  box-shadow:0 2px 8px rgba(176,65,62,.25);transition:.15s}
.botao:hover{filter:brightness(1.06)}

.aceitar{display:flex;align-items:center;gap:.6rem;font-size:.86rem;
  margin-top:.6rem;cursor:pointer}
.aceitar input{width:1.05rem;height:1.05rem;accent-color:var(--accent)}

.aviso{background:rgba(176,65,62,.09);border:1px solid var(--line-forte);
  border-radius:10px;padding:.8rem 1.1rem;margin-bottom:1.2rem;
  font-size:.84rem;color:var(--danger);max-width:620px;width:100%}

/* ── bloco 4: importar e consultar ─────────────────────────────────────── */
.cartao.largo{max-width:900px}

.lista{list-style:none;margin:.4rem 0 1rem}
.lista li{display:flex;align-items:baseline;gap:.8rem;padding:.6rem 0;
  border-bottom:1px solid var(--line)}
.lista a{color:var(--accent);text-decoration:none;font-size:.94rem}
.lista a:hover{text-decoration:underline}
.lista .nota{margin:0;margin-left:auto}

.formulario,.controles{display:flex;flex-wrap:wrap;gap:1rem;margin:1rem 0}
.formulario{flex-direction:column;max-width:420px}
.campo{display:flex;flex-direction:column;gap:.35rem;font-size:.78rem;
  color:var(--muted);letter-spacing:.04em}
.campo input[type=text],.campo select,.campo input[type=file]{
  font-family:inherit;font-size:.88rem;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line-forte);
  border-radius:9px;padding:.55rem .7rem;min-width:180px;max-width:280px}
.campo select{cursor:pointer}
.campo input:focus,.campo select:focus{outline:2px solid var(--accent);
  outline-offset:1px}

.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.6rem 0 1rem}
.chip{display:inline-flex;align-items:baseline;gap:.4rem;font-size:.76rem;
  background:var(--surface-2);border:1px solid var(--line-forte);
  border-radius:999px;padding:.3rem .75rem}
.chip em{font-style:normal;font-size:.64rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}
/* o papel vem do inspector — a cor existe para que a leitura do retrato seja
   de relance, nao de leitura palavra por palavra */
.chip.papel-metrica,.chip.papel-metrica_monetaria{
  border-color:var(--accent);color:var(--accent)}
.chip.papel-dimensao{border-color:var(--accent-2);color:var(--accent-2)}
.chip.papel-temporal{border-color:var(--papel-temporal);color:var(--papel-temporal)}
.chip.papel-constante{opacity:.55}

.resultado{display:flex;flex-direction:column;gap:.2rem;margin:1.4rem 0 1rem;
  padding:1.1rem 1.3rem;background:var(--surface-2);
  border:1px solid var(--line-forte);border-radius:12px}
.resultado .numero{font-size:1.9rem;font-weight:800;color:var(--accent);
  letter-spacing:.01em}
.resultado .rotulo{font-size:.76rem;color:var(--muted)}

.tabela-rolagem{overflow-x:auto;margin-top:.6rem}
.tabela{width:100%;border-collapse:collapse;font-size:.84rem}
.tabela th,.tabela td{text-align:left;padding:.5rem .7rem;
  border-bottom:1px solid var(--line)}
.tabela th{color:var(--muted);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em;font-weight:600}
.tabela td.num,.tabela th:not(:first-child){text-align:right}
.tabela tbody tr:hover{background:var(--surface-2)}

.nota.alerta{color:var(--danger)}

/* o chip virou formulario: trocar o papel de uma coluna e a forma de discordar
   do retrato, entao mora onde o retrato e mostrado */
.chip select{font-family:inherit;font-size:.64rem;color:var(--muted);
  background:transparent;border:0;border-bottom:1px dotted currentColor;
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer;padding:0 .1rem}
.chip select:hover{color:var(--ink)}
.chip select:focus{outline:1px solid var(--accent);outline-offset:2px}
.chip button{font-family:inherit;font-size:.62rem;margin-left:.3rem;
  border:1px solid var(--line-forte);border-radius:6px;background:var(--surface);
  cursor:pointer;padding:.05rem .35rem}

/* zona de perigo: fechada por padrao e visualmente separada — apagar projeto
   nao pode ficar a um clique de distancia do resto da tela */
.perigo{margin-top:2rem;border-top:1px solid var(--line);padding-top:1rem}
.perigo summary{cursor:pointer;font-size:.8rem;color:var(--danger);
  letter-spacing:.04em}
.perigo summary:hover{text-decoration:underline}
.perigo .controles{align-items:flex-end}
.botao.apagar{background:var(--danger);margin-top:0;box-shadow:none;
  padding:.55rem 1.2rem;font-size:.84rem}