/* ============================================================
   PORTA — estilo das telas de entrada (login e nova senha)
   ------------------------------------------------------------
   Compartilhado de proposito. Enquanto este CSS morava dentro do
   login.php, qualquer tela nova de entrada nasceria com uma copia dele, e
   as duas iriam divergir no primeiro ajuste de cor.
   Identidade da casa: ver fontes/casa.css e pratanet.com/confra.
   ============================================================ */
/* ============================================================
   Mesma identidade do app (logomarca_pratanet_2021):
     #ED3237 vermelho vivo · #8E3031 vermelho profundo
     #606062 prata escuro   · #828486 prata claro
   O vermelho vivo só preenche; texto miúdo usa #C1272D, que tem
   contraste suficiente. Regra herdada do app: vermelho significa
   duas coisas, Prata Net e ação — nada mais.
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Vermelho · prata · branco · bege — os mesmos tokens da agenda. A
     porta e a casa têm que ser o mesmo lugar: entrar não pode parecer
     trocar de sistema. */
  --papel:#F7F1EF; --papel-alto:#FCF8F7; --prata:#C7BCB6; --prata-claro:#EFE7E4;
  --hex-suave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.85' stroke-width='1.1'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34'/%3E%3C/g%3E%3C/svg%3E");
  --grafite:#2A2422; --grafite-suave:#4B423E;
  --vinho:#4E161C;
  /* O painel da entrada usa um vermelho mais leve que o da barra lateral.
     São superfícies diferentes: a lateral é moldura, fica na tela o dia
     inteiro e por isso pede tom fechado; o painel de entrada aparece uma
     vez por turno e pode ser a cara da marca. */
  --vinho-claro:#8C2028;
  --vermelho:#C60000; --vermelho-vivo:#E00008;

  --bg:var(--vinho);
  --card:#ffffff; --line:#EBE3DF; --line-strong:#DBD0CA;
  --text:var(--grafite); --muted:#6E625E; --faint:#9C8F8A;
  --brand:var(--vermelho); --brand-vivid:var(--vermelho-vivo); --brand-soft:#FCEEEC; --brand-line:#F0CFCB;
  --silver:#6E625E; --silver-2:#9C8F8A;
  --ok:#0E7350;
  --sombra-alta:0 2px 4px rgba(42,36,34,.05), 0 26px 54px -26px rgba(42,36,34,.34);
  /* DUAS REDES, UMA PARA CADA LADO DA PORTA.
     A tela dividida tem um lado grafite e um lado claro, e o mesmo SVG
     nao serve nos dois: traco branco some no claro, traco grafite grita
     no escuro. Na primeira versao havia so a variante escura, e a rede do
     lado do formulario saiu parecendo arame. */
  --hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%232b3038' stroke-width='1.4'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34'/%3E%3C/g%3E%3C/svg%3E");
  --hex-claro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34'/%3E%3C/g%3E%3C/svg%3E");
  --font-display:"Archivo","Segoe UI",system-ui,sans-serif;
  --font-body:"Instrument Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --font-data:"Space Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
}
html{height:100%}
body{min-height:100%;margin:0;font:15px/1.55 var(--font-body);color:var(--text);background:var(--bg)}

/* ============================================================
   TELA DIVIDIDA
   ------------------------------------------------------------
   Vem do agendapratanet do Vinicius: painel escuro com a marca grande a
   esquerda, formulario a direita. Ganha duas coisas sobre o cartao
   centralizado que havia antes — a marca fica do tamanho que o Caio
   pediu, e o formulario deixa de flutuar no meio do nada: ele se apoia
   numa coluna, que e onde o olho espera achar campo para preencher.
   ============================================================ */
.porta{display:grid;grid-template-columns:1.04fr .96fr;min-height:100vh}

/* ---------- lado escuro: a marca ---------- */
.porta-lado{
  position:relative;overflow:hidden;
  display:flex;align-items:center;
  padding:8vh 5vw 12vh;
  /* A FOTOGRAFIA OFICIAL DA MARCA, que o Caio liberou. Ela entra por
     baixo de tudo, escurecida por um véu vinho — inteira ela roubaria a
     leitura do texto; assim ela dá textura e profundidade e o texto
     continua mandando. `cover` + `center` para nunca deformar. */
  background-color:var(--vinho-claro);
  /* VÉU HORIZONTAL, e é aqui que está a ideia.
     Forte na esquerda (75%), onde o texto precisa de fundo para se ler;
     quase transparente na direita (6%), onde a logomarca tem que
     aparecer. Um só elemento resolve as duas coisas — legibilidade e
     presença de marca — sem precisar recortar a imagem.

     Já tentei o véu uniforme e escuro: a foto virava mancha e a marca
     sumia. E já tentei sem véu: o texto ficava ilegível sobre o prata
     claro da imagem. O degradê é a resposta. */
  background-image:
    /* 1. VÉU HORIZONTAL — forte à esquerda, onde o texto precisa de fundo
          para se ler; quase transparente à direita, onde a peça tem que
          aparecer. Um só elemento resolve legibilidade e presença de
          marca, sem precisar recortar a imagem. */
    linear-gradient(90deg,
      rgba(74,14,20,.93) 0%,
      rgba(88,18,24,.84) 30%,
      rgba(116,26,32,.40) 62%,
      rgba(150,38,44,.04) 100%),
    /* 2. A PEÇA DA MARCA, em `cover`.
          Já tentei ajustar pela largura (`104% auto`) para a logomarca não
          sair cortada — e foi dali que veio a "barra" no rodapé: a peça é
          mais larga que alta, então sobrava vinho chapado em cima e
          embaixo. `cover` preenche a altura e a faixa acaba.
          O preço é o corte lateral, e ele é aceitável: a referência faz o
          mesmo, e ali o wordmark também aparece cortado.
          O X de 83% nao e chute: com `cover` a peca fica 1218px de largo
          num painel de ~750, entao sobram 469px para deslizar. A
          logomarca ocupa x 426..1103 da peca escalada; para ela caber
          inteira na janela visivel, o deslocamento tem que ficar entre
          354 e 426 — 83% de 469 da 390, bem no meio da faixa. Fora
          disso ela volta a sair cortada no meio da palavra. */
    url("marca-porta.png");
  background-size:auto, cover;
  background-position:0 0, 83% center;
  background-repeat:no-repeat, no-repeat;
  color:#fff
}
/* O globo recortado SAI quando há a fotografia atrás: era mancha sobre
   mancha, e as duas juntas embaralhavam o canto. Fica escondido, e não
   removido, para bastar uma linha caso a fotografia não suba. */
.agua{display:none}
.agua{
  position:absolute;right:-16%;bottom:-22%;
  width:min(88%,620px);z-index:0;
  pointer-events:none;user-select:none;opacity:.09
}
.agua img{width:100%;height:auto;display:block}
/* Altura cheia e coluna: sem isto, o selo lá embaixo se ancora no BLOCO
   DE TEXTO (que é baixo) em vez de no painel, e fica logo abaixo do
   título em vez de no rodapé. */
.porta-lado-in{
  position:relative;z-index:1;max-width:440px;width:100%;height:100%;
  display:flex;flex-direction:column;justify-content:center
}

.porta-tit{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(34px,4.4vw,52px);line-height:1.02;letter-spacing:-.02em;
  color:#fff;margin:0 0 16px;text-wrap:balance;
  /* A ponta direita do título cai na parte clara da peça. */
  text-shadow:0 2px 18px rgba(60,10,14,.6)
}
/* Sobre o painel claro, o vermelho da marca no título desapareceria —
   vermelho sobre vermelho. A segunda metade vira um rosa muito claro:
   mantém o contraste em dois tons sem precisar de outra cor. */
.porta-tit span{color:#FFD2D2}
.porta-desc{
  font-size:15.5px;line-height:1.6;color:#F4DEDE;margin:0;max-width:36ch;
  text-shadow:0 1px 12px rgba(60,10,14,.55)
}
/* O selo desce para o rodapé, como na referência: ele é assinatura, não
   parte do argumento. */
.porta-nota{
  position:absolute;left:0;bottom:0;
  /* Escapa da largura do bloco de texto: ele e uma linha so, e quebrado
     em duas parece erro. */
  width:max-content;max-width:none;
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-data);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:#F0CFCF;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:8px 15px 8px 12px;
  background:rgba(255,255,255,.06)
}
.porta-nota i{width:7px;height:7px;border-radius:50%;background:#3ecf8e;flex:none;display:block}
/* No lado escuro o rotulo miudo nao pode ser vermelho fechado: sobre
   grafite ele some. Sobe para o vermelho vivo. */
/* Sobre o painel vermelho claro, o rótulo miúdo pede quase branco: o
   #ff6b6f de antes servia no grafite e aqui se perde no fundo. */
.porta-lado .eyebrow{color:#FFC9C9;letter-spacing:.22em}

/* A NOSSA MARCA SAI DESTE PAINEL.
   Com a logomarca grande visível na fotografia, repetir o wordmark no
   alto era a mesma marca duas vezes na mesma tela. Quem identifica aqui
   é a foto; ao texto cabe dizer o que o sistema faz.
   Fica `display:none` e não removida do HTML: se um dia a fotografia não
   subir, basta apagar esta linha para a marca voltar. */
.porta-lado .marca{display:none}

/* ---------- lado claro: o formulario ---------- */
.porta-form{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:6vh 5vw;
  /* A mesma textura suave da agenda, pelo mesmo motivo de tê-la lá: a
     porta e a casa precisam ser o mesmo lugar. Traço com opacidade
     própria e ladrilho grande — ela se percebe sem se ler. */
  background-color:var(--papel);
  background-image:
    var(--hex-suave),
    radial-gradient(900px 620px at 50% 0%, rgba(198,0,0,.05), transparent 62%);
  background-size:132px 236px, auto
}
.porta-form .card{width:100%;max-width:412px;box-shadow:var(--sombra-alta)}

/* ---------- no celular a marca vira faixa, e o formulario manda ---------- */
@media(max-width:900px){
  .porta{grid-template-columns:1fr;min-height:100vh}
  .porta-lado{
    padding:34px 24px 30px;align-items:flex-start;
    /* Empilhado, o painel fica largo e baixo. Com `cover` centralizado, a
       faixa que aparece e justamente a do wordmark da fotografia — e ele
       duplicava a nossa marca logo acima. Sobe o enquadramento para o
       globo e o wordmark sai pela borda de baixo. */
    background-position:0 0, 62% 12%
  }
  .porta-lado-in{max-width:none}
  .porta-tit{font-size:30px;margin-bottom:10px}
  .porta-desc{font-size:14px;margin-bottom:18px;max-width:none}
  .agua{right:-28%;bottom:-46%;width:74%;opacity:.10}
  .porta-form{padding:30px 20px 46px;justify-content:flex-start}
}
@media(max-width:520px){
  .porta-nota{display:none}
  .porta-lado{padding:26px 18px 24px}
}

.marca{display:flex;align-items:center;gap:12px;margin-bottom:34px}
.marca img{width:44px;height:44px;display:block}
.marca .wm{
  font-family:var(--font-display);
  font-size:30px;letter-spacing:.01em;color:#fff;line-height:1;
  font-weight:600;
}
.marca .wm b{color:var(--brand-vivid);font-weight:600}
.marca .sub{
  display:block;font-family:var(--font-display);
  font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--silver-2);margin-top:4px;font-weight:600;
}

/* ---- cartão ---- */
.card{
  position:relative;
  background:var(--card);border-radius:14px;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.30), 0 22px 50px -14px rgba(0,0,0,.60);
}
.card .topo{height:3px;background:linear-gradient(90deg,var(--brand-vivid),var(--brand) 58%,var(--silver))}
/* Cantoneira: a mesma marca de corte dos cartões do site institucional.
   Fica sob a faixa do topo, no canto de baixo à esquerda, para não
   brigar com ela. */
.card::after{
  content:"";position:absolute;left:0;bottom:0;
  width:26px;height:26px;
  border-left:2px solid var(--vermelho-vivo);
  border-bottom:2px solid var(--vermelho-vivo);
  border-radius:0 0 0 14px;
  pointer-events:none;
}
.pad{padding:26px 26px 24px}
h1{font-size:20px;font-weight:600;letter-spacing:-.015em;margin-bottom:5px}
.dica{font-size:13.5px;color:var(--muted);margin-bottom:20px;line-height:1.5}

/* ------------------------------------------------------------
   ABAS — Entrar / Cadastre-se / Esqueci a senha
   ------------------------------------------------------------
   São links de verdade (<a href="?modo=">), não botões de JavaScript:
   o voltar do navegador funciona, dá para mandar o link de uma aba
   pronta, e a tela continua servindo se o script não rodar.

   A marca da aba ativa é a mesma faixa vermelha do topo do cartão, e
   não uma pastilha de fundo: o cartão já tem contorno demais para
   ganhar mais um. Sem scale() no hover — a régua do projeto.
   ------------------------------------------------------------ */
.abas{
  display:flex;flex-wrap:wrap;gap:2px;
  margin:-4px 0 18px;
  border-bottom:1px solid var(--line);
}
.abas a{
  padding:8px 11px 9px;
  font-family:var(--font-display);
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);text-decoration:none;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .14s ease, border-color .14s ease;
}
.abas a:hover{color:var(--muted)}
.abas a.ag{color:var(--brand);border-bottom-color:var(--brand-vivid);font-weight:700}
.abas a:focus-visible{outline:2px solid var(--brand-vivid);outline-offset:-2px;border-radius:3px}

/* Links dentro dos textos de apoio: precisam ser clicáveis à vista, e
   sublinhado é o que o balcão reconhece como link. */
.nota a, .dica a{color:var(--brand);text-decoration:underline}
.nota a:hover, .dica a:hover{color:var(--brand-vivid)}

label.f{display:block;margin-bottom:14px}
label.f span{
  display:block;font-family:var(--font-display);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--silver);margin-bottom:6px;font-weight:600;
}
input{
  width:100%;font:15px/1.4 var(--font-body);color:var(--text);
  background:#f5f7fa;border:1px solid var(--line);border-radius:10px;
  padding:12px 13px;transition:border-color .12s, background .12s, box-shadow .12s;
}
input::placeholder{color:#a9acb2}
input:focus{
  outline:none;background:#fff;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft);
}
/* Nome de usuário em mono: é identificador, não frase — e em mono a
   pessoa vê na hora se digitou l, I ou 1. */
input[name="usuario"]{font-family:var(--font-data);letter-spacing:.01em}

.btn{
  width:100%;border:0;border-radius:10px;cursor:pointer;
  background:var(--brand);color:#fff;
  font-family:var(--font-display);font-weight:600;font-size:15px;line-height:1;
  text-transform:uppercase;letter-spacing:.10em;
  padding:15px 16px;margin-top:8px;
  transition:background .12s, transform .06s;
}
.btn:hover{background:var(--brand-vivid)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--brand-vivid);outline-offset:2px}

.aviso{
  border-radius:10px;padding:10px 12px;font-size:13.5px;margin-bottom:16px;
  border:1px solid var(--brand-line);background:var(--brand-soft);color:#8E3031;
}
.aviso.ok{border-color:#bfe3d3;background:#eef8f3;color:var(--ok)}

.nota{
  margin-top:18px;padding-top:15px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--faint);line-height:1.55;
}
/* Rodapé em mono espaçado: assinatura de equipamento, não de site. */
.porta-form .rodape{margin-top:22px}
.rodape{
  text-align:center;margin-top:18px;font-family:var(--font-data);
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#6b7480
}

/* Toque no celular: alvo grande e sem zoom involuntário no iOS (16px). */
@media (max-width:420px){
  .pad{padding:22px 20px 20px}
  input{font-size:16px;padding:12px}
}