:root{
  --black: #0d0d0d;
  --black-2:#151515;
  --gray-1:#1f1f1f;
  --gray-2:#2a2a2a;
  --text:#f3f3f3;

  --orange:#ff6600;
  --orange-500:#ff6600;
  --orange-400:#ff7e1f;
  --orange-300:#ffa14f;
  --orange-700:#e05500;

  /* Laranja fluorescente para o botão de ver senha */
  --neon: #ff7a00;

  --focus: rgba(255,102,0,.45);
  --radius: 20px;
  --shadow: 0 18px 40px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:#1b1b1d;
}

/* ===== Layout ===== */
.page{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:24px;
}

.card{
  width:100%;
  max-width:1120px;
  background:linear-gradient(180deg, var(--black) 0%, var(--black-2) 100%);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns: 1fr 1fr;
  overflow:hidden;
}

/* ===== Coluna esquerda (form) ===== */
.login-pane{
  padding:48px 44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:24px;
}

.title h1{
  font-size:clamp(26px, 3.2vw, 36px);
  font-weight:700;
  letter-spacing:.2px;
  margin:0 0 6px;
}
.title .dot{
  margin-left:.35rem;
  color:var(--orange-400);
}
.subtitle{
  margin:0;
  color:#c3c3c3;
  font-size:14px;
}

/* ===== Form ===== */
.form{display:flex;flex-direction:column;gap:18px}

.field{display:flex;flex-direction:column;gap:8px}
.field label{
  color:#cfcfcf;
  font-size:14px;
  text-transform:lowercase;
}

/* UNIFICAÇÃO DE TAMANHO: inputs iguais e largura total */
.field input{
  width:100%;
  height:48px;                 /* altura unificada */
  border-radius:12px;
  border:1px solid var(--gray-2);
  outline:none;
  background:var(--gray-1);
  color:var(--text);
  padding:0 14px;
  font-size:15px;              /* fonte consistente */
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field input::placeholder{ color:#9f9f9f; }
.field input:focus{
  border-color:var(--orange-500);
  box-shadow:0 0 0 4px var(--focus);
}

/* mostrar/ocultar senha — mesma largura do campo de usuário */
.password-wrap{ position:relative; width:100%; }
.password-wrap input{
  width:100%;
  padding-right:44px;          /* espaço para o botão do olho */
}

/* Botão “exibir senha” em LARANJA FLUORESCENTE com brilho */
.toggle-pass{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:28px;height:28px;
  border:0;outline:0;background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  filter:none;
}
.toggle-pass::before{
  /* ícone olho em SVG, cor fluorescente */
  content:"";
  width:22px;height:22px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z'/><circle cx='12' cy='12' r='3'/></svg>")
    center/contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(255,122,0,.75)); /* brilho */
}
.toggle-pass:is(:hover,:focus)::before{
  filter: drop-shadow(0 0 8px rgba(255,122,0,.95));
}
.toggle-pass.is-on::before{
  /* ícone 'olho cortado' quando visível */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.77 21.77 0 0 1 5.06-5.94M9.9 4.24A10.94 10.94 0 0 1 12 5c7 0 11 7 11 7a21.66 21.66 0 0 1-3.17 4.16M1 1l22 22'/><path d='M14.12 14.12a3 3 0 1 1-4.24-4.24'/></svg>")
    center/contain no-repeat;
}

/* Botão Entrar */
.btn{
  height:48px;                 /* igual aos inputs */
  border-radius:12px;
  border:1px solid transparent;
  color:#101010;
  font-size:15px;              /* igual inputs */
  font-weight:700;
  letter-spacing:.3px;
  cursor:pointer;
  background:linear-gradient(90deg, var(--orange-400), var(--orange-500), var(--orange-700));
  color:#111;
  box-shadow: 0 8px 16px rgba(255,102,0,.25);
  transition:transform .08s ease, filter .2s ease;
}
.btn:active{ transform:translateY(1px); }
.btn:hover{ filter:brightness(1.05); }

.help{
  margin-top:4px;
  font-size:14px;
}
.help a{
  color:var(--orange-300);
  text-decoration:none;
}
.help a:hover{
  color:var(--orange-500);
  text-decoration:underline;
}

/* ===== Coluna direita (imagem) ===== */
.login-illustration{
  background:#000 url("/recebimento/public/css/img/login.png") center/cover no-repeat;
}

/* ===== Responsivo ===== */
@media (max-width: 900px){
  .card{
    grid-template-columns: 1fr; /* esconde imagem */
  }
  .login-illustration{ display:none; }
  .login-pane{ padding:36px 24px; }
}

@media (min-width: 1200px){
  .card{ max-width:1200px; }
}
/* =========================
   Estilos do Rodapé
   ========================= */
 .footer {
            color: #ff7a00;       /* cor da fonte laranja */
      text-align: center;   /* centralizado */
      padding: 9px 7px;
      font-size: 0.9rem;
      font-family: 'DM Sans', sans-serif;
      position: relative;
      bottom: 0;
      width: 100%;
    }