@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap");
/* PRÉVIA (2026-10-28): tela de login (equipe e cliente) como um card grande no meio da página, parte preta de um lado (marca e o que a pessoa
   encontra lá dentro) e o formulário no creme do outro. Só liga abrindo com ?tema=card (ver ajustes-ux-local.js). Não é o padrão. */
@media (min-width: 900px) {
  html.tema-login-card, html.tema-login-card body { background: #e6e1d2; }
  html.tema-login-card .en-pagina {
    display: grid; grid-template-columns: 46% minmax(0, 1fr); width: min(1360px, calc(100% - 48px)); height: min(720px, calc(100dvh - 48px)); min-height: 560px; margin: 24px auto; padding: 0;
    border-radius: 30px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(40, 30, 0, .55);
    background: radial-gradient(520px 260px at 92% -60px, #f8dd7a 0, transparent 70%) no-repeat, #f5efe0;
  }
  html.tema-login-card .en-topo { display: none; }
  html.tema-login-card .en-lado {
    grid-column: 1; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
    background: #121110; color: #f6f1e2; padding: 48px 52px;
  }
  html.tema-login-card .en-lado::before {
    content: "maxmize"; align-self: flex-start; position: relative; z-index: 1; font: 400 64px/1 "Archivo Black", "Archivo", sans-serif; letter-spacing: -.01em; color: #f6f1e2;
    padding-right: .5em; background: linear-gradient(#f2c94c, #f2c94c) no-repeat right .02em bottom .06em / .3em .3em;
  }
  html.tema-login-card .en-lado::after { content: ""; position: absolute; right: -120px; top: -120px; bottom: auto; width: 380px; height: 380px; border: 0; border-radius: 50%; background: radial-gradient(circle, rgba(242, 201, 76, .35), transparent 70%); }
  html.tema-login-card .en-lado-meio { position: relative; z-index: 1; max-width: none; margin: auto 0; align-self: stretch; }
  html.tema-login-card .en-lado-selo { background: rgba(255, 255, 255, .1); color: #f2c94c; }
  html.tema-login-card .en-lado h2 { font: 400 36px/1.12 "Archivo Black", "Archivo", sans-serif; letter-spacing: -.01em; color: #f6f1e2; margin: 0 0 22px; }
  html.tema-login-card .en-dia { gap: 0; }
  html.tema-login-card .en-item { background: transparent; border-radius: 0; border-top: 1px solid rgba(255, 255, 255, .12); padding: 12px 0; color: #c9c3b0; font-size: 14px; align-items: flex-start; gap: 14px; }
  html.tema-login-card .en-item::before { content: ""; flex: none; width: 10px; height: 10px; background: #f2c94c; margin-top: 7px; }
  html.tema-login-card .en-item i { min-width: 92px; padding: 0; background: none; color: #f6f1e2; font-size: 16px; font-weight: 800; text-align: left; }
  html.tema-login-card .en-item b { color: #f6f1e2; }
  html.tema-login-card .en-lado-rod { position: relative; z-index: 1; left: auto; right: auto; bottom: auto; text-align: left; color: #a8a290; opacity: 1; margin: 0; }
  html.tema-login-card .en-painel { grid-column: 2; align-self: center; justify-self: center; width: 100%; max-width: 380px; margin: 0; padding: 0 20px; background: none; border-radius: 0; }
  html.tema-login-card .en-painel h1 { font-size: 34px; }
}
html.tema-login-card .en-btn { border-radius: 999px; }
html.tema-login-card .en-campo input { border-radius: 14px; }

/* O painel preto do login do cliente nasce só com o HTML (o CSS do cliente não tem essas peças): define o básico aqui, igual ao da equipe */
html.tema-login-card .en-lado-selo { display: inline-block; margin-bottom: 18px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
html.tema-login-card .en-dia { display: grid; }
html.tema-login-card .en-item { display: flex; }
html.tema-login-card .en-item i { font-style: normal; }

/* ===== LOGIN NO CELULAR: faixa preta com a marca e a frase, folha clara que sobe por cima ===== */
@media (max-width: 899px) {
  html.tema-login-card .en-topo { display: none; }
  html.tema-login-card .en-lado { display: block; flex: none; position: relative; overflow: hidden; background: #121110; color: #f6f1e2; padding: calc(34px + env(safe-area-inset-top, 0px)) 24px 84px; }
  html.tema-login-card .en-lado::before {
    content: "maxmize"; display: inline-block; position: relative; z-index: 1; font: 400 46px/1 "Archivo Black", "Archivo", sans-serif; letter-spacing: -.01em; color: #f6f1e2;
    padding-right: .5em; background: linear-gradient(#f2c94c, #f2c94c) no-repeat right .02em bottom .06em / .3em .3em;
  }
  html.tema-login-card .en-lado::after { content: ""; position: absolute; right: -90px; top: -90px; width: 300px; height: 300px; border: 0; border-radius: 50%; background: radial-gradient(circle, rgba(242, 201, 76, .35), transparent 70%); }
  html.tema-login-card .en-lado-meio { position: relative; z-index: 1; display: block; margin: 12px 0 0; padding: 0; max-width: none; }
  html.tema-login-card .en-lado-selo, html.tema-login-card .en-dia, html.tema-login-card .en-lado-rod { display: none; }
  html.tema-login-card .en-lado h2 { font: 400 19px/1.25 "Archivo Black", "Archivo", sans-serif; letter-spacing: -.01em; color: #f6f1e2; margin: 0; max-width: 270px; }
  html.tema-login-card .en-painel { position: relative; z-index: 2; flex: 1 0 auto; margin-top: -28px; border-radius: 28px 28px 0 0;
    background: radial-gradient(380px 200px at 92% -40px, #f8dd7a 0, transparent 70%) no-repeat, #f5efe0; }
}

/* Títulos do formulário na mesma fonte pesada do desenho */
html.tema-login-card .en-painel h1 { font-family: "Archivo Black", "Archivo", sans-serif; font-weight: 400; letter-spacing: -.01em; }
@media (max-width: 899px) { html.tema-login-card .en-painel h1 { font-size: 26px; } }
@media (max-width: 899px) { html.tema-login-card .en-painel { padding-top: 42px; } }

/* "Mostrar" / "Ocultar" em texto dentro de um botão em pílula (no lugar do olhinho), como no desenho aprovado */
html.tema-login-card .olho-btn { width: auto; right: 8px; top: 7px; bottom: 7px; padding: 0 14px !important; background: #f1ede1 !important; border-radius: 999px !important; font: 700 13px "Hanken Grotesk", sans-serif; color: #1b1a16; }
html.tema-login-card .olho-btn svg { display: none; }
html.tema-login-card .olho-btn::after { content: "Mostrar"; }
html.tema-login-card .olho-btn[aria-label="Ocultar senha"]::after { content: "Ocultar"; }
html.tema-login-card .olho-caixa > input { padding-right: 100px !important; }

/* ===== LOGIN NO CELULAR, 2ª versão: a faixa preta cresce e ocupa a sobra da tela (sem espaço vazio embaixo); marca e frase maiores ===== */
@media (max-width: 899px) {
  html.tema-login-card .en-pagina { min-height: 100vh; min-height: 100dvh; }
  html.tema-login-card .en-lado { flex: 1 0 auto; min-height: 190px; padding: calc(40px + env(safe-area-inset-top, 0px)) 28px 80px; }
  html.tema-login-card .en-lado::before { font-size: clamp(50px, 8.6vh, 68px); }
  html.tema-login-card .en-lado h2 { font-size: clamp(20px, 3.4vh, 28px); line-height: 1.22; max-width: 340px; margin-top: 16px; }
  html.tema-login-card .en-painel { flex: none; }
}
/* telas baixinhas: aperta um pouco o formulário pra caber sem rolar */
@media (max-width: 899px) and (max-height: 720px) {
  html.tema-login-card .en-painel { padding-top: 30px; padding-bottom: 20px; }
  html.tema-login-card .en-painel .en-sub { margin-bottom: 14px; }
  html.tema-login-card .en-campo { margin-bottom: 12px; }
  html.tema-login-card .en-lado { padding-bottom: 66px; }
}
@media (max-width: 899px) and (max-height: 760px) {
  html.tema-login-card .en-painel { padding-top: 24px; padding-bottom: 14px; }
  html.tema-login-card .en-lado { min-height: 150px; padding-bottom: 52px; }
  html.tema-login-card .en-legal-links, html.tema-login-card .legal-links { margin-top: 12px; }
  html.tema-login-card .en-link { margin-top: 12px; }
}

/* ===== Cantos e "flutuar" (a pedido do usuário) =====
   No login a própria página (body) é o card. O navegador só recorta os cantos do body se o html não tiver overflow visível: por isso o html fica "hidden". */
@media (min-width: 900px) {
  html.tema-login-card { overflow: hidden; }
  html.tema-login-card .en-pagina {
    margin: 32px auto; height: min(720px, calc(100dvh - 64px)); border-radius: 30px;
    box-shadow: 0 46px 90px -34px rgba(40, 30, 0, .65), 0 16px 32px -16px rgba(40, 30, 0, .3), 0 0 0 1px rgba(40, 30, 0, .05);
  }
}

/* ===== Profundidade A "Luzes" (escolhida em 2026-10-28): manchas de luz suaves atrás do card e sombra longa embaixo ===== */
@media (min-width: 900px) {
  html.tema-login-card, html.tema-login-card body, html.tema-app-card, html.tema-app-card:has(body.eq-app-fixo), html.tema-app-card body, html.tema-app-card body.eq-app-fixo {
    background:
      radial-gradient(620px 560px at 5% -6%, rgba(242, 201, 76, .6) 0, transparent 70%),
      radial-gradient(680px 620px at 102% 108%, rgba(80, 200, 150, .38) 0, transparent 70%),
      radial-gradient(460px 400px at 76% -14%, rgba(255, 160, 100, .3) 0, transparent 70%),
      #e6e1d2;
    background-attachment: fixed;
  }
  html.tema-login-card .en-pagina, html.tema-app-card .mp-app {
    box-shadow: 0 70px 120px -40px rgba(40, 30, 0, .6), 0 24px 40px -18px rgba(40, 30, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .45);
  }
}

/* Auditoria visual (2026-10-31): área de toque de 44 px no "Mostrar" e nos links (Esqueci minha senha, Privacidade, Termos) sem mudar o
   desenho: o espaço extra é de padding com margem negativa do mesmo tamanho, então nada sai do lugar. */
html.tema-login-card .olho-btn { top: 4px; bottom: 4px; }
html.tema-login-card .en-link a, html.tema-login-card .en-link button, html.tema-login-card .legal-links a { display: inline-block; padding: 14px 6px; margin: -14px -6px; }