/* Origem visual: portal-cliente-v2/portal-cliente/src/login.css (11/09/2026).
   Copia autonoma para o ERP: somente login de producao, sem estilos do app autenticado. */
:root {
  --grafite: #2b2b2b; --grafite-2: #5c5c5c; --borda-forte: #d4d4d1;
  --erro: #b42318; --erro-fundo: #fceceb;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #1c1c1c; color: var(--grafite); }
body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
h1, h2, p { margin: 0; }
.campo { display: flex; flex-direction: column; }
.campo label { color: var(--grafite); }
.campo input { font: inherit; border: 1px solid var(--borda-forte); background: #fff; color: var(--grafite); min-width: 0; }
.campo input:focus { border-color: #8b1c1c; outline: 3px solid #f6e9e9; }
.lg {
  --lg-fundo: #1c1c1c; --lg-texto: #f2f2f2; --lg-suave: #a9a9a9;
  --lg-apagado: #6f6f6f; --lg-linha: #343434;
  --lg-vermelho: #e0262a; --lg-vermelho-escuro: #c41f23;
  min-height: 100vh; background: var(--lg-fundo); color: var(--lg-texto);
  display: grid; grid-template-rows: auto 1fr auto; padding: 24px 22px 20px;
  position: relative; overflow: hidden; isolation: isolate;
}
.lg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 45% 55% at 50% 52%, rgba(224,38,42,0.09), transparent 70%); pointer-events: none; z-index: -1; }
.lg-topo { display: flex; align-items: center; }
.lg-pilula { display: inline-flex; align-items: center; gap: 14px; border: 1px solid #3a3a3a; border-radius: 10px; padding: 8px 18px 8px 12px; background: rgba(255,255,255,0.03); color: #d8d8d8; font-size: 0.95rem; }
.lg-pilula img { height: 30px; width: auto; display: block; }
.lg-pilula .sep { width: 1px; height: 20px; background: #4a4a4a; }
.lg-logo-branco { filter: brightness(0) invert(1); }
.lg-corpo { display: grid; grid-template-columns: 1fr; align-items: center; gap: 32px; padding: 28px 0; }
.lg-esq { display: flex; flex-direction: column; justify-content: center; gap: 24px; min-width: 0; }
.lg-texto h1 { font-size: 2.1rem; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; color: var(--lg-texto); }
.lg-texto h1 span { color: var(--lg-vermelho); display: block; }
.lg-texto p { color: var(--lg-suave); font-size: 1rem; margin-top: 18px; max-width: 36ch; line-height: 1.6; }
.lg-onda { display: none; }
.lg-cartao { background: #fff; color: var(--grafite); border-radius: 16px; padding: 28px 22px 24px; width: 100%; max-width: 420px; min-width: 0; margin: 0 auto; box-shadow: 0 24px 70px rgba(0,0,0,0.5); }
.lg-cartao h2 { font-size: 1.75rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin: 0; color: var(--grafite); }
.lg-cartao .sub { color: var(--grafite-2); font-size: 0.9375rem; line-height: 1.5; margin: 8px 0 26px; }
.lg-cartao .campo { margin-bottom: 18px; gap: 8px; }
.lg-cartao .campo label { font-size: 0.9375rem; font-weight: 600; }
.lg-cartao .campo input { height: 48px; min-height: 48px; padding: 0 14px; border-radius: 8px; font-size: 1rem; }
.lg-cartao .campo input::placeholder { color: #9a9a9a; }
.lg-rotulo-senha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lg-senha { position: relative; }
.lg-cartao .lg-senha input { width: 100%; padding-right: 46px; }
.lg-olho { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; background: none; border: none; color: #7a7a7a; cursor: pointer; display: inline-grid; place-items: center; border-radius: 6px; }
.lg-olho[hidden] { display: none; }
.lg-olho:hover { color: var(--grafite); }
.lg-olho-risco { display: none; }
.lg-olho[aria-pressed="true"] .lg-olho-risco { display: block; }
.lg-entrar { width: 100%; height: 48px; border: none; border-radius: 8px; background: var(--lg-vermelho); color: #fff; font-weight: 600; font-size: 1rem; cursor: pointer; margin-top: 6px; }
.lg-entrar:hover { background: var(--lg-vermelho-escuro); }
.lg-erro { border-left: 3px solid var(--erro); background: var(--erro-fundo); color: var(--erro); padding: 10px 12px; border-radius: 6px; font-size: 0.875rem; margin-bottom: 14px; overflow-wrap: anywhere; }
.lg-dir { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; }
.lg-stat .n { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #fff; }
.lg-stat .r { margin-top: 8px; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lg-suave); line-height: 1.5; }
.lg-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.75rem; color: var(--lg-apagado); padding-right: 48px; flex-wrap: wrap; }
/* MOBILE-005: alvo de toque sem cobrir o texto da senha. */
@media (max-width: 760px) {
  .lg-olho { width: 44px; height: 44px; right: 2px; }
  .lg-cartao .lg-senha input { padding-right: 52px; }
}
@media (min-width: 1000px) {
  .lg { padding: clamp(28px,3.2vh,44px) clamp(32px,3vw,56px) clamp(22px,2.6vh,34px); }
  .lg-corpo { grid-template-columns: 1fr auto 1fr; gap: clamp(24px,3vw,64px); padding: 0; }
  .lg-esq { align-self: stretch; gap: clamp(20px,4vh,48px); }
  .lg-texto h1 { font-size: clamp(2.4rem,3.1vw,3.7rem); }
  .lg-texto p { font-size: clamp(1rem,1.02vw,1.2rem); }
  .lg-onda { display: block; height: clamp(190px,34vh,400px); width: 100%; max-width: 100%; object-fit: contain; object-position: left bottom; opacity: 0.3; margin-left: clamp(0px,4vw,90px); pointer-events: none; user-select: none; }
  .lg-cartao { margin: 0; padding: clamp(32px,2.4vw,40px) clamp(30px,2.4vw,40px) clamp(26px,2vw,32px); width: clamp(380px,24vw,440px); max-width: none; }
  .lg-dir { flex-direction: column; align-items: center; justify-content: center; gap: 0; }
  .lg-dir .lg-stat { padding: clamp(16px,2.6vh,28px) 0; border-bottom: 1px solid var(--lg-linha); min-width: clamp(140px,11vw,200px); }
  .lg-dir .lg-stat:last-child { border-bottom: none; }
  .lg-stat .n { font-size: clamp(2.8rem,3.6vw,4.4rem); }
  .lg-stat .r { font-size: clamp(0.68rem,0.62vw,0.8rem); }
  .lg-pilula img { height: clamp(30px,2.2vw,38px); }
  .lg-pilula { font-size: clamp(0.95rem,0.9vw,1.08rem); }
  .lg-rodape { font-size: clamp(0.75rem,0.66vw,0.84rem); padding-right: 56px; }
}