/* Portal do Cliente — tela de login com o MESMO visual do login do CRM
   (crm/public/login.css). Arquivo próprio (não importado pelo CRM) para
   manter os dois processos sem nenhuma dependência cruzada — só o design
   é copiado de propósito, a pedido da T.I., pra dar consistência de marca. */

:root{
  --grafite:#171717;
  --grafite-2:#101010;
  --preto:#000000;
  --off-white:#EEEEEE;
  --branco:#FFFFFF;
  --yellow-1:#EFDC38;
  --yellow-2:#F7FF3F;
  --muted:#8A8A8A;
  --erro:#FF6B5E;
  --verde:#3DD68C;
  --font: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}

body{
  font-family:var(--font);
  color:var(--off-white);
  background:var(--preto);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-x:hidden;
  position:relative;
}

/* =====================================================================
   PALCO — mesmo fundo grafite/preto com as duas curvas amarelas do
   login do CRM (ver comentário original em crm/public/login.css).
   ===================================================================== */
.palco{
  position:fixed;
  inset:0;
  z-index:0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%, rgba(255,255,255,.035) 0%, transparent 60%),
    linear-gradient(150deg, #141414 0%, #0b0b0b 55%, var(--preto) 100%);
}

.palco svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.costura-halo{
  fill:none;
  stroke:var(--yellow-1);
  stroke-width:6;
  stroke-linecap:round;
  opacity:.06;
}

.costura{
  fill:none;
  stroke:var(--yellow-1);
  stroke-width:1;
  stroke-linecap:round;
  opacity:.35;
}

.feixe{
  fill:none;
  stroke:var(--yellow-2);
  stroke-width:1.6;
  stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(247,255,63,.9)) drop-shadow(0 0 14px rgba(239,220,56,.55));
}

@media (prefers-reduced-motion: no-preference){
  .feixe-1{ stroke-dasharray:90 1500; animation:percorrer-1 8s linear infinite; }
  .feixe-2{ stroke-dasharray:60 800; animation:percorrer-2 6.5s linear infinite; animation-delay:-2.5s; }
  @keyframes percorrer-1{ to{ stroke-dashoffset:-1590; } }
  @keyframes percorrer-2{ to{ stroke-dashoffset:-860; } }
}
@media (prefers-reduced-motion: reduce){
  .feixe{ opacity:.55; }
}

/* =====================================================================
   CONTEÚDO
   ===================================================================== */
.conteudo{
  position:relative;
  z-index:1;
  width:100%;
  max-width:404px;
  padding:40px 20px;
}

.marca{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:40px;
}
.marca img{ height:48px; width:auto; display:block; }

/* ---------- Cartão ---------- */
.cartao{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  padding:36px 32px 32px;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}

.cartao-titulo{
  font-size:21px;
  font-weight:600;
  color:var(--branco);
  text-align:center;
  letter-spacing:-.01em;
  margin-bottom:6px;
}
.cartao-desc{
  font-size:13px;
  color:var(--muted);
  text-align:center;
  line-height:1.5;
  margin-bottom:28px;
}
.cartao-desc strong{ color:var(--off-white); }

.mensagem-erro{
  display:none;
  align-items:flex-start;
  gap:8px;
  background:rgba(255,107,94,.09);
  border:1px solid rgba(255,107,94,.35);
  color:#FFB3AA;
  font-size:12.5px;
  line-height:1.5;
  border-radius:10px;
  padding:11px 13px;
  margin-bottom:20px;
}
.mensagem-erro.visivel{ display:flex; }
.mensagem-erro.sucesso{
  background:rgba(61,214,140,.09);
  border-color:rgba(61,214,140,.35);
  color:#B7F3D6;
}

.campo{ margin-bottom:16px; }
.campo label{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#9a9a9a;
  margin-bottom:7px;
}

.campo-mira{ position:relative; }
.campo-mira::before, .campo-mira::after,
.campo-mira .canto-br, .campo-mira .canto-bl{
  content:"";
  position:absolute;
  width:9px; height:9px;
  border:1.5px solid var(--yellow-1);
  opacity:0;
  transition:opacity .18s ease;
  pointer-events:none;
}
.campo-mira::before{ top:-4px; left:-4px; border-right:none; border-bottom:none; }
.campo-mira::after{ top:-4px; right:-4px; border-left:none; border-bottom:none; }
.campo-mira .canto-bl{ bottom:-4px; left:-4px; border-right:none; border-top:none; }
.campo-mira .canto-br{ bottom:-4px; right:-4px; border-left:none; border-top:none; }
.campo-mira:focus-within::before, .campo-mira:focus-within::after,
.campo-mira:focus-within .canto-bl, .campo-mira:focus-within .canto-br{ opacity:1; }

.campo input{
  width:100%;
  border:1.5px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  border-radius:10px;
  padding:12px 14px;
  font-family:var(--font);
  font-size:14.5px;
  color:var(--off-white);
  transition:border-color .15s ease, background .15s ease;
}
.campo input::placeholder{ color:#5f5f5f; }
.campo input:focus{
  outline:none;
  border-color:rgba(239,220,56,.6);
  background:rgba(255,255,255,.06);
}
.campo input.codigo{
  letter-spacing:8px;
  font-size:20px;
  text-align:center;
  font-family:var(--font-mono);
}

.btn-entrar{
  width:100%;
  border:none;
  border-radius:10px;
  background:linear-gradient(135deg, var(--yellow-1), var(--yellow-2));
  color:var(--preto);
  font-family:var(--font);
  font-weight:700;
  font-size:14.5px;
  letter-spacing:.02em;
  padding:13px;
  cursor:pointer;
  margin-top:6px;
  transition:transform .08s ease, box-shadow .15s ease;
}
.btn-entrar:hover:not(:disabled){ box-shadow:0 6px 18px rgba(239,220,56,.28); }
.btn-entrar:active:not(:disabled){ transform:translateY(1px); }
.btn-entrar:disabled{ opacity:.5; cursor:not-allowed; }
.btn-entrar:focus-visible{ outline:2px solid var(--branco); outline-offset:2px; }

.btn-secundario{
  width:100%;
  border:1.5px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:transparent;
  color:var(--off-white);
  font-family:var(--font);
  font-weight:600;
  font-size:13.5px;
  padding:12px;
  cursor:pointer;
  margin-top:10px;
  transition:border-color .15s ease, background .15s ease;
}
.btn-secundario:hover:not(:disabled){ border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.04); }
.btn-secundario:disabled{ opacity:.5; cursor:not-allowed; }

.rodape-form{
  margin-top:20px;
  font-size:11.5px;
  color:#6a6a6a;
  text-align:center;
  line-height:1.6;
}

.rodape-marca{
  text-align:center;
  margin-top:28px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#4d4d4d;
}

@media (max-width:460px){
  .cartao{ padding:28px 22px 24px; }
}