/* Identidade RR Life — login (mockup L1a). Valores fiéis ao design (F12). Fontes embutidas. */
@font-face{ font-family:'Caveat'; src:url('fonts/Caveat.ttf') format('truetype'); font-weight:400 700; font-display:swap; }
@font-face{ font-family:'Kalam'; src:url('fonts/Kalam.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face{ font-family:'JetBrains Mono'; src:url('fonts/JetBrainsMono.ttf') format('truetype'); font-weight:400 700; font-display:swap; }
:root{
  --verde:#1F3A2E; --verde-medio:#3D5A48; --texto:#2A2520; --creme:#FAF6EC;
  --areia:#E8E4D8; --creme-botao:#EBE1C4; --terracota:#C4574A; --sucesso:#4CAF6F;
  --ff-corpo:'Kalam',-apple-system,"Segoe UI",system-ui,sans-serif;
  --ff-titulo:'Caveat','Kalam',cursive;
  --ff-mono:'JetBrains Mono',monospace;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-corpo); color:var(--texto);
  background-color:var(--verde);
  /* simula a "foto da plantação ao pôr-do-sol" do mockup: degradê verde + listras
     diagonais + overlay verde-escuro (camadas de cima p/ baixo). */
  background-image:
    linear-gradient(rgba(15,25,18,.48), rgba(15,25,18,.48)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 22px),
    linear-gradient(135deg, #3D5A48 0%, #6B8C5A 55%, #A8B68A 100%);
}
.card{
  position:relative; width:500px; max-width:92vw; background:rgba(250,246,236,.97);
  border:1.2px solid #fff; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.35);
  padding:28px; display:flex; flex-direction:column; gap:10px; color:var(--texto);
}
.logo{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:6px; }
.logo svg{ width:48px; height:34px; flex-shrink:0; }
.logo .nome{ display:flex; flex-direction:column; align-items:center; line-height:1.05; }
.marca{ font-family:var(--ff-titulo); font-weight:700; font-size:26.4px; color:var(--verde); line-height:1.05; }
.tagline{ font-family:var(--ff-corpo); font-size:11px; color:var(--verde); opacity:.7; margin-top:2px; }
.h1wrap{ text-align:center; margin-top:4px; }
.sk-underline{ position:relative; display:inline-block;
    font-family:var(--ff-titulo); font-weight:700; font-size:22px; color:var(--verde); }
.sk-underline::after{ content:''; position:absolute; left:-2px; right:-2px; bottom:-3px; height:6px;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 6' preserveAspectRatio='none'><path d='M1 4 Q 20 1 40 4 T 79 3' fill='none' stroke='%23c4574a' stroke-width='1.6' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%; }
.sub{ font-family:var(--ff-corpo); font-size:13.5px; color:var(--texto); opacity:.78; text-align:center; line-height:1.4; }

.inicial{ text-align:center; color:var(--texto); opacity:.7; font-size:13px; padding:10px 0; }
.spinner{ width:26px; height:26px; margin:12px auto 0; border:3px solid var(--areia);
          border-top-color:var(--verde); border-radius:50%; animation:gira .9s linear infinite; }
@keyframes gira{ to{ transform:rotate(360deg); } }

/* O botao virou o PRIMEIRO elemento do bloco (18/08), entao a lista numerada passou a
   ser o caminho manual, logo abaixo dele. O respiro maior separa "o atalho" de "o passo
   a passo" — colados, os dois pareciam uma coisa so. */
.passos-lista{ display:flex; flex-direction:column; gap:10px; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--areia); }
.passo{ display:flex; align-items:center; gap:10px; }
.passo.topo{ align-items:flex-start; }
.num{ width:26px; height:26px; flex-shrink:0; border-radius:50%; border:1.6px solid var(--verde);
      display:flex; align-items:center; justify-content:center;
      font-family:var(--ff-mono); font-size:12px; color:var(--verde); }
.passo .txt{ font-family:var(--ff-corpo); font-size:14px; }
.passo .txt b{ color:var(--verde); }
.cod-bloco{ flex:1; }
.cod-bloco .rotulo{ font-family:var(--ff-corpo); font-size:14px; margin-bottom:6px; }
.codigo-linha{ display:inline-flex; align-items:center; gap:10px; }
.codigo{ padding:8px 18px; background:var(--creme); border:1.5px dashed var(--verde); border-radius:10px;
         font-family:var(--ff-mono); font-weight:500; font-size:44px; letter-spacing:.08em;
         color:var(--verde); line-height:1; cursor:pointer; user-select:all; }
.copiar{ width:38px; height:38px; flex-shrink:0; border:1px solid rgba(42,37,32,.55); border-radius:8px;
         background:#FFFDF6; display:flex; align-items:center; justify-content:center;
         cursor:pointer; color:var(--texto); }
.copiar:hover{ background:var(--areia); }

.cta{ position:relative; width:100%; height:42px; margin-top:14px; cursor:pointer;
      border:1.4px solid var(--verde); border-radius:12px; background:var(--verde);
      color:var(--creme-botao); font-family:var(--ff-corpo); font-size:15px; font-weight:600; }
.cta:hover{ background:var(--verde-medio); }
.expira{ text-align:center; font-family:var(--ff-corpo); font-size:12px; color:var(--texto); opacity:.55; margin-top:8px; }
.feedback{ text-align:center; font-family:var(--ff-corpo); font-size:12px; color:var(--sucesso); height:14px; margin-top:6px; }
.erro{ text-align:center; font-size:12.5px; color:var(--terracota); white-space:pre-wrap; padding:6px 0; }
/* a acao de saida do erro. Fica ABAIXO da mensagem: primeiro a pessoa le o que houve,
   depois ve o que fazer — o contrario convida a clicar sem entender. */
.erro-acoes{ margin-top:12px; }
/* dica da espera longa: some quando vazia, pra nao abrir buraco no card */
.inicial-dica{ margin-top:10px; font-size:12px; line-height:1.5; color:var(--texto);
  opacity:.7; max-width:40ch; margin-left:auto; margin-right:auto; }
.inicial-dica:empty{ display:none; }
.erro-dica{ margin-top:10px; color:var(--texto); opacity:.7; font-size:12px; line-height:1.5;
  white-space:normal; max-width:44ch; margin-left:auto; margin-right:auto; }
.erro-dica:empty{ display:none; }

.conectado{ text-align:center; padding:8px 0; }
.check{ width:48px; height:48px; margin:6px auto 12px; border-radius:50%;
        background:var(--sucesso); color:#fff; font-size:26px; line-height:48px; }
.conectado .quem{ font-family:var(--ff-corpo); font-size:15px; font-weight:700; color:var(--verde); }
.conectado .perfil{ font-family:var(--ff-corpo); font-size:12px; color:var(--texto); opacity:.7; margin-top:2px; }

/* Tela 'sem acesso' (usuario autenticou mas nao esta na lista 'usuarios'). */
.sem-acesso{ text-align:center; padding:4px 0 12px; }
.bloqueio{ width:48px; height:48px; margin:6px auto 14px; border-radius:50%;
           background:var(--terracota); color:#fff; font-size:24px; line-height:48px; }
.sem-acesso .msg-titulo{ font-family:var(--ff-corpo); font-size:16px; font-weight:700;
                         color:var(--terracota); margin-bottom:8px; }
.sem-acesso .msg-corpo{ font-family:var(--ff-corpo); font-size:13px; color:var(--texto);
                        line-height:1.5; margin-bottom:18px; }
.cta.sec{ background:transparent; color:var(--verde); border-color:var(--verde); }
.cta.sec:hover{ background:rgba(31,58,46,.06); }
/* solicitar acesso (bloco sem-acesso) */
.sa-erro{ font-family:var(--ff-corpo); font-size:12px; color:var(--terracota); min-height:14px; margin-top:8px; }
.sa-enviado{ font-family:var(--ff-corpo); font-size:13.5px; color:var(--sucesso); line-height:1.5;
             background:rgba(76,175,111,.1); border:1px solid var(--sucesso); border-radius:10px;
             padding:12px 14px; margin-bottom:14px; }

.pe{ position:fixed; bottom:16px; left:0; right:0; text-align:center;
     font-family:var(--ff-corpo); font-size:10px; color:rgba(255,255,255,.7); }
.oculto{ display:none !important; }