/* Cenário Origem — portal de comprovantes. Mesma identidade do espelho de vendas
   (Fraunces + Archivo, neutros quentes, verde #0F6B3F). Desenhado para o CELULAR. */

:root{
  --bg:#FBFAF8; --card:#FFFFFF; --line:#E4E0D8; --line-soft:#EFECE6;
  --ink:#1A1A1A; --ink-dim:#6E6A61;
  --verde:#0F6B3F; --verde-bg:#C7E8D5; --verde-esc:#0B5231;
  --vermelho:#93200F; --vermelho-bg:#F8E3DF;
  --ambar:#78530A; --ambar-bg:#FBE1A6;
}

*{margin:0;padding:0;box-sizing:border-box}
/* O atributo hidden SEMPRE vence display:flex/grid do autor — sem isto, uma camada
   "escondida" continua ocupando a tela e engole os toques. (Erro já visto no fila.css.) */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.45;
  padding:20px 16px calc(28px + env(safe-area-inset-bottom));
  min-height:100vh;
}

.wrap{max-width:520px; margin:0 auto}

/* ── Marca ──────────────────────────────────────────────────────────── */
.marca{display:flex; align-items:center; gap:14px; margin-bottom:26px}
.logo{height:52px; width:auto; mix-blend-mode:multiply}
.marca-txt h1{
  font-family:'Fraunces',Georgia,serif; font-weight:400; font-size:23px;
  line-height:1.15; letter-spacing:.01em;
}
.marca-txt p{font-size:14px; color:var(--ink-dim); margin-top:3px}

/* ── Formulário ─────────────────────────────────────────────────────── */
form{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 18px 22px}
.field{margin-bottom:20px}
label{display:block; font-size:13px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-dim); margin-bottom:7px}
.req{color:var(--vermelho)}

input[type=text],input[type=password],select{
  width:100%; font:inherit; font-size:16px;   /* 16px evita o zoom automático do iOS */
  color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:10px;
  padding:13px 12px; -webkit-appearance:none; appearance:none;
}
input[type=text]:focus,input[type=password]:focus,select:focus{
  outline:none; border-color:var(--verde); box-shadow:0 0 0 3px rgba(15,107,63,.13);
}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E6A61' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:12px;
  padding-right:36px;
}
select:invalid{color:var(--ink-dim)}
.dica{font-size:12.5px; color:var(--ink-dim); margin-top:6px}

/* honeypot: fora da tela, invisível para gente, preenchido por robô */
.hp{position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; opacity:0}

/* ── Anexo ──────────────────────────────────────────────────────────── */
input[type=file]{position:absolute; left:-9999px; opacity:0}
.drop{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; text-align:center; cursor:pointer;
  border:1.5px dashed var(--line); border-radius:12px; background:#FDFCFA;
  padding:22px 14px; margin:0; text-transform:none; letter-spacing:0;
}
.drop:active{background:var(--verde-bg); border-color:var(--verde)}
.drop.tem{border-style:solid; border-color:var(--verde); background:#F4FBF7}
.drop-ico{font-size:26px; line-height:1; color:var(--verde); font-weight:400}
.drop-txt{font-size:15.5px; font-weight:600; color:var(--verde-esc); text-transform:none; letter-spacing:0}
.drop-sub{font-size:12.5px; color:var(--ink-dim); font-weight:400}

.lista{list-style:none; margin-top:10px; display:flex; flex-direction:column; gap:7px}
.lista li{
  display:flex; align-items:center; gap:9px;
  background:#F4FBF7; border:1px solid var(--verde-bg); border-radius:9px; padding:9px 10px;
}
.arq-nome{flex:1; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.arq-tam{font-size:12px; color:var(--ink-dim); flex:none}
.arq-x{
  flex:none; width:30px; height:30px; border:none; background:transparent;
  color:var(--ink-dim); font-size:15px; cursor:pointer; border-radius:8px;
}
.arq-x:active{background:var(--vermelho-bg); color:var(--vermelho)}

/* ── Botões / avisos ────────────────────────────────────────────────── */
.btn{
  width:100%; font:inherit; font-size:16.5px; font-weight:600;
  color:#fff; background:var(--verde); border:none; border-radius:11px;
  padding:15px; cursor:pointer; margin-top:4px;
}
.btn:active{background:var(--verde-esc)}
.btn:disabled{opacity:.55; cursor:default}
.btn-sec{background:transparent; color:var(--verde); border:1.5px solid var(--verde); margin-top:18px}
.btn-sec:active{background:var(--verde-bg)}

.err{
  display:block; background:var(--vermelho-bg); color:var(--vermelho);
  border:1px solid #E2B6AC; border-radius:9px; padding:11px 12px;
  font-size:14px; font-weight:500; margin-bottom:14px;
}
.foot{font-size:12.5px; color:var(--ink-dim); text-align:center; margin-top:14px; line-height:1.4}

/* ── Estados (enviando / sucesso) ───────────────────────────────────── */
.estado{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:36px 22px 26px;
}
.estado h2{font-family:'Fraunces',Georgia,serif; font-weight:400; font-size:22px; margin-bottom:6px}
.estado p{font-size:14px; color:var(--ink-dim)}
.spin{
  width:34px; height:34px; border-radius:50%; margin-bottom:16px;
  border:3px solid var(--line); border-top-color:var(--verde);
  animation:gira .9s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}

.check{
  width:52px; height:52px; border-radius:50%; margin-bottom:14px;
  background:var(--verde-bg); color:var(--verde-esc);
  font-size:27px; line-height:52px; font-weight:700;
}
.protocolo-rot{font-size:11.5px!important; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-dim)!important; margin-top:14px}
.protocolo{
  font-family:'Fraunces',Georgia,serif; font-size:34px!important; font-weight:500;
  letter-spacing:.16em; color:var(--verde-esc)!important; margin:2px 0 4px;
}
.resumo{font-size:14px; color:var(--ink)!important; margin-top:6px; line-height:1.5}

/* ── Login (página gerada pelo _middleware) ─────────────────────────── */
.login{max-width:380px; margin-top:12vh}
.login .eyebrow{font-size:11.5px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-dim); text-align:center; margin-bottom:14px}
.login fieldset{border:1px solid var(--line); border-radius:14px; background:var(--card); padding:22px 18px}
.login legend{font-family:'Fraunces',Georgia,serif; font-size:19px; padding:0 8px}

/* ── Painel de controle ─────────────────────────────────────────────── */
.painel{max-width:760px}
.painel-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px}
.painel-top h1{font-family:'Fraunces',Georgia,serif; font-weight:400; font-size:24px}
.sair{font-size:13px; color:var(--ink-dim); text-decoration:none; border-bottom:1px solid var(--line)}

.abas{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap}
.aba{
  font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  background:#fff; color:var(--ink-dim); border:1.5px solid var(--line);
  border-radius:999px; padding:7px 15px;
}
.aba.on{background:var(--verde); border-color:var(--verde); color:#fff}

.kpis{display:flex; gap:10px; margin-bottom:16px}
.kpi{flex:1; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 13px}
.kpi .n{font-family:'Fraunces',Georgia,serif; font-size:26px; line-height:1}
.kpi .l{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim); margin-top:5px}
.kpi.drive .n{color:var(--verde)}
.kpi.fila .n{color:var(--ambar)}

.cards{display:flex; flex-direction:column; gap:10px}
.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px}
.card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.c-nome{font-size:16px; font-weight:600; line-height:1.25}
.c-unid{font-size:13.5px; color:var(--ink-dim); margin-top:2px}
.selo{
  flex:none; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  border-radius:999px; padding:5px 10px; white-space:nowrap;
}
.selo.no_drive{background:var(--verde-bg); color:var(--verde-esc)}
.selo.recebido{background:var(--ambar-bg); color:var(--ambar)}
.selo.erro{background:var(--vermelho-bg); color:var(--vermelho)}
.c-meta{display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  font-size:12.5px; color:var(--ink-dim); margin-top:9px;
  border-top:1px solid var(--line-soft); padding-top:9px}
.c-meta .cod{font-family:'Fraunces',Georgia,serif; letter-spacing:.1em; color:var(--ink)}
.c-arq a{color:var(--verde); text-decoration:none; border-bottom:1px solid var(--verde-bg)}
.c-erro{font-size:12.5px; color:var(--vermelho); margin-top:7px}
.vazio{text-align:center; color:var(--ink-dim); font-size:14px; padding:34px 12px;
  background:var(--card); border:1px dashed var(--line); border-radius:12px}