/* =========================================================================
 * yve-porta-medida.css — a MEDIDA padrão de toda porta de login da YveTech
 * -------------------------------------------------------------------------
 * Pedido do dono em 04/10/2026: toda janela de login com a mesma proporção
 * em relação à página que o Painel do Catálogo tem no print de referência
 * (tela de 1728 × 965 px, zoom 100%). Lá o cartão mede 440 × 795 px: 25% da
 * largura e 82% da altura, centrado, com 85 px de folga em cima e embaixo.
 *
 * COMO USAR, em qualquer porta, inclusive nas que vierem a existir:
 *
 *     <link rel="stylesheet" href="assets/yve-porta-medida.css">
 *     <form class="… yv-porta-medida">   ← no CARTÃO da porta
 *
 * O que a classe faz:
 *   · largura de 440 px (ou a tela inteira menos as margens, no celular);
 *   · o espaçamento interno do Catálogo (46 × 40 px na tela larga);
 *   · em tela de computador, altura mínima de 795 px, limitada à janela
 *     menos a folga de 85 + 85 px, com o conteúdo centrado na vertical. Porta
 *     com menos conteúdo (logotipo menor, menos links) fica do MESMO tamanho
 *     que a do Catálogo, em vez de encolher. Porta com mais conteúdo cresce.
 *
 * ⚠️  O zoom do navegador muda tudo isso na mesma proporção. Os prints do ERP e
 * do CRM de 04/10 tinham o cartão com 394 px: era o Chrome guardando 90% de
 * zoom para yvetech.com (Cmd+0 volta a 100%). O código já dava 440 px.
 *
 * Especificidade: as folhas de cada porta desenham o cartão com (0,1,0) ou
 * (0,2,0), e algumas carregam DEPOIS desta (o yve-porta.css do RH, do Fiscal
 * e do Controle vem no <body>). O `:root` e a classe repetida dão (0,3,0):
 * a medida vence pela força, sem !important e sem depender da ordem.
 * ========================================================================= */

:root {
  --yv-porta-largura: 440px;
  --yv-porta-altura:  795px;
  --yv-porta-folga:   85px;
}

/* -------------------------------------------------------------------------
   1. O CARTÃO
   ------------------------------------------------------------------------- */
:root .yv-porta-medida.yv-porta-medida {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--yv-porta-largura);
  margin-left: auto;
  margin-right: auto;
  padding: clamp(30px, 5vw, 46px) clamp(24px, 4.4vw, 40px);
  border-radius: 20px;
  /* Coluna flexível também no celular: é ela que deixa pôr o selo do sistema
     ABAIXO do subtítulo (ordem, item 3) sem mexer no HTML de cada porta. */
  display: flex;
  flex-direction: column;
  text-align: center;
  font-family: var(--yv-fonte, "Poppins", system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--yv-texto, #F4F4F4);
}
/* Item de flex não encolhe: o conteúdo continua com a altura que tinha. */
:root .yv-porta-medida.yv-porta-medida > * { flex: none; }
/* No fluxo de bloco, um link solto (inline) ocupava só o próprio texto,
   centrado pelo `text-align` do cartão. Como item de flex, seria esticado. */
:root .yv-porta-medida.yv-porta-medida > :is(span, a, small, strong, em, b, i) { align-self: center; }

/* Altura só em tela de computador. No celular a porta é a própria tela, e
   esticar o cartão empurraria o botão para baixo da dobra. */
@media (min-width: 720px) and (min-height: 700px) {
  :root .yv-porta-medida.yv-porta-medida {
    min-height: min(var(--yv-porta-altura), calc(100vh - 2 * var(--yv-porta-folga)));
    justify-content: center;
  }
}

/* -------------------------------------------------------------------------
   2. A POSIÇÃO EXATA: o cartão centrado na janela, 85 px em cima e embaixo
   -------------------------------------------------------------------------
   (85 + 795 + 85 = 965.) As portas reservavam mais espaço em cima que embaixo
   para a navegação fixa (`.yv-login-nav`): 108/56 na Central de Acesso e
   108/48 nas portas de módulo, e o cartão ficava 26–30 px abaixo do centro
   (111/59 e 115/55). A navegação ocupa uns 40 px no topo: 85 px continuam
   livres dela. */
@media (min-width: 720px) and (min-height: 700px) {
  body:has(> .yv-porta-medida),            /* acesso.html: o cartão é filho do <body> */
  .yv-porta:has(> .yv-porta-medida) {      /* RH, Fiscal, Controle de Acessos (yve-porta.css) */
    padding-top: var(--yv-porta-folga);
    padding-bottom: var(--yv-porta-folga);
  }
}

/* -------------------------------------------------------------------------
   3. O MIOLO PADRÃO (pedido do dono, 04/10/2026: "as mesmas proporções,
      espaços, medidas internas e externas, espaçamento entre linhas… num
      padrão único, em todas as janelas de login")
   -------------------------------------------------------------------------
   Os valores são os MEDIDOS no Painel do Catálogo (loja-admin.html), a porta
   de referência, na tela de 1728 × 965 (`medida-exata-2026-10-04/planta.mjs`):

     logotipo  148 × 44                         26 px até o título
     título    21,12 px · 600 · −0,015em · 1,6   10 px até o subtítulo
     subtítulo 13,5 px · 300 · 1,6 · cinza       28 px (16 px até o rótulo do sistema)
     sistema   11,5 px · 500 · 0,14em · MAIÚSC.  20 px até o 1º rótulo
     rótulo    13,12 px · 500 · 0,02em · 1,6     7 px até o campo
     campo     51 px · 15 px · 13/16 · raio 11   16 px até o próximo rótulo / botão
     botão     49 px · 15 px · 600 · raio 11
     links     13 px · 1,6 · cinza · 20 + 12 px e linha fina acima; 6 × 18 px entre eles
     ajuda     (.yv-login-suporte, de yve-login.css — já era igual em todas)

   Ordem: logotipo, título, subtítulo, sistema. O selo que algumas portas punham
   numa pílula ACIMA do título (Blog, RH, Fiscal, Controle) vira o rótulo do
   sistema ABAIXO do subtítulo, como o "ERP"/"CRM" da Central e o "Área restrita"
   do Catálogo. Só a ordem visual muda (flex `order`); o HTML fica como está.
   ------------------------------------------------------------------------- */
:root .yv-porta-medida.yv-porta-medida > img.marca { order: -4; }
:root .yv-porta-medida.yv-porta-medida > :is(h1, h2) { order: -3; }
:root .yv-porta-medida.yv-porta-medida > :is(.sub, .yv-sub) { order: -2; }
:root .yv-porta-medida.yv-porta-medida > :is(.acesso-selo, .acesso-destino, .destino) { order: -1; }

/* logotipo */
:root .yv-porta-medida.yv-porta-medida img.marca {
  display: block;
  width: 148px; height: auto;
  margin: 0 auto 26px;
}

/* título (o da porta: filho direto, ou no painel da Central de Acesso) */
:root .yv-porta-medida.yv-porta-medida > :is(h1, h2),
:root .yv-porta-medida.yv-porta-medida > section > :is(h1, h2) {
  margin: 0 0 10px; padding: 0;
  font-size: 1.32rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.6;
  color: var(--yv-texto, #F4F4F4);
  text-align: center;
}

/* subtítulo */
:root .yv-porta-medida.yv-porta-medida :is(.sub, .yv-sub) {
  margin: 0 0 28px;
  font-size: 13.5px; font-weight: 300; line-height: 1.6;
  color: var(--yv-texto-mudo, #9A9AA5);
  text-align: center;
}

/* o sistema ("ERP", "CRM", "Área restrita", "Recursos Humanos"…) */
:root .yv-porta-medida.yv-porta-medida :is(.destino, .acesso-destino, .acesso-selo) {
  display: block;
  align-self: stretch;
  margin: -12px 0 20px; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.6;
  color: var(--yv-acento);
  text-shadow: 0 0 18px rgba(var(--yv-acento-rgb), .35);
  text-align: center;
}

/* rótulos dos campos (a caixa de seleção tem o dela) */
:root .yv-porta-medida.yv-porta-medida label:not(:has(input[type="checkbox"], input[type="radio"])) {
  display: block;
  margin: 0 0 7px; padding: 0;
  font-size: .82rem; font-weight: 500; letter-spacing: .02em; line-height: 1.6; text-transform: none;
  color: var(--yv-texto, #F4F4F4);
  text-align: left;
}
:root .yv-porta-medida.yv-porta-medida .yv-campo-codigo > label { text-align: center; }   /* o código de 2 etapas */

/* o bloco de cada campo: 16 px até o próximo */
:root .yv-porta-medida.yv-porta-medida :is(.campo, .field) {
  display: block;
  gap: 0;
  margin: 0 0 16px;
}

/* campos */
:root .yv-porta-medida.yv-porta-medida :is(input[type="text"], input[type="email"], input[type="password"], input:not([type])):not(.yv-codigo) {
  box-sizing: border-box;
  width: 100%; height: 51px;
  margin: 0; padding: 13px 16px;
  border: 1px solid var(--yv-linha, rgba(255, 255, 255, .08));
  border-radius: 11px;
  background: rgba(255, 255, 255, .035);
  box-shadow: none;
  color: var(--yv-texto, #F4F4F4);
  font-family: inherit; font-size: 15px; line-height: normal;
}
:root .yv-porta-medida.yv-porta-medida :is(.senha-caixa, .yv-senha) input { padding-right: 50px; }
:root .yv-porta-medida.yv-porta-medida :is(input[type="text"], input[type="email"], input[type="password"], input:not([type])):not(.yv-codigo):hover {
  border-color: var(--yv-linha-forte, rgba(255, 255, 255, .16));
}
:root .yv-porta-medida.yv-porta-medida :is(input[type="text"], input[type="email"], input[type="password"], input:not([type])):not(.yv-codigo):focus {
  outline: none;
  border-color: var(--yv-acento);
  background: rgba(255, 255, 255, .05);
  box-shadow: 0 0 0 3px rgba(var(--yv-acento-rgb), .16);
}

/* o botão de entrar: 49 px (14 + 21 + 14), 10 px acima — que o bloco de 16 px
   do campo engole no fluxo do formulário */
:root .yv-porta-medida.yv-porta-medida :is(button[type="submit"], input[type="submit"]) {
  box-sizing: border-box;
  width: 100%; min-height: 49px; height: auto;
  margin: 10px 0 0; padding: 14px 18px;
  border: 0; border-radius: 11px;
  font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: .01em; line-height: 1.4;
}

/* os links ("Primeiro acesso", "Esqueci minha senha", "Conhecer o sistema") */
:root .yv-porta-medida.yv-porta-medida :is(.login-acoes, .rodape-acoes) {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: 6px 18px;
  margin: var(--yv-e4, 20px) 0 0; padding: var(--yv-e3, 12px) 0 0;
  border-top: 1px solid var(--yv-linha, rgba(255, 255, 255, .08));
  font-size: 13px; line-height: 1.6;
}
:root .yv-porta-medida.yv-porta-medida :is(.login-acoes, .rodape-acoes):has(> :only-child) { grid-template-columns: auto; }
:root .yv-porta-medida.yv-porta-medida :is(.login-acoes, .rodape-acoes) .yv-suporte-sep { display: none; }
:root .yv-porta-medida.yv-porta-medida :is(.login-acoes, .rodape-acoes) > :is(a, button) {
  justify-self: center;
  margin: 0; padding: 4px 2px;
  border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  background: none; box-shadow: none;
  color: var(--yv-texto-mudo, #9A9AA5);
  font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1.6; letter-spacing: normal;
  text-decoration: none; text-shadow: none;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, text-shadow .2s ease;
}
:root .yv-porta-medida.yv-porta-medida :is(.login-acoes, .rodape-acoes) > :is(a, button):is(:hover, :focus-visible) {
  color: var(--yv-acento);
  border-bottom-color: rgba(var(--yv-acento-rgb), .45);
  text-shadow: 0 0 12px rgba(var(--yv-acento-rgb), .4);
  outline: none;
}
:root .yv-porta-medida.yv-porta-medida :is(.login-acoes, .rodape-acoes) > :is(.login-demo, .elo-demo) { grid-column: 1 / -1; }

/* CRM (crm.html, o login da demonstração): a página desenha o login com regras de ID (`#loginScreen .input`,
   `.field`, `.btn`), mais fortes que as de classe daqui. E ali o próprio cartão é o <form>, uma coluna flexível:
   a margem de cima do botão não se funde com a de baixo do campo, como no fluxo de bloco do Catálogo. */
#loginScreen .yv-porta-medida.yv-porta-medida .field { margin: 0 0 16px; }
#loginScreen .yv-porta-medida.yv-porta-medida .input { font-size: 15px; }
#loginScreen .yv-porta-medida.yv-porta-medida .btn[type="submit"] { margin-top: 0; padding: 14px 18px; font-size: 15px; }

/* No celular estreito (até 360 px) os dois primeiros links não cabem lado a lado. */
@media (max-width: 360px) {
  :root .yv-porta-medida.yv-porta-medida :is(.login-acoes, .rodape-acoes) { grid-template-columns: auto; }
}

/* -------------------------------------------------------------------------
   Central de Acesso com os dois portais lado a lado (central-de-acesso.html)
   -------------------------------------------------------------------------
   Lá são DUAS portas na mesma linha. Centrar o conteúdo de cada uma deixaria
   os títulos do ERP e do CRM em alturas diferentes, porque uma tem mais texto
   que a outra. Nos portais, o conteúdo começa no topo e o formulário ocupa o
   resto, como já era (`.portal form { flex: 1 0 auto }`). */
@media (min-width: 720px) and (min-height: 700px) {
  :root .portal.yv-porta-medida.yv-porta-medida { justify-content: flex-start; }
  :root .portal.yv-porta-medida.yv-porta-medida > form { flex: 1 0 auto; }
}

/* -------------------------------------------------------------------------
   Área do Cliente (loja-conta.html, em www.yvetech.store)
   -------------------------------------------------------------------------
   Não é uma porta só: a mesma página mostra o cartão de visitante (entrar ou
   cadastrar) e, depois do login, o painel do cliente, largo. O título de
   cima ("Área do cliente" + `#conta-chamada`) é das DUAS situações, e o
   `loja-conta.js` escreve nele ("Olá, Fulano.", "Você saiu da sua conta.").
   Por isso ele não pode sair do lugar nem ser duplicado.

   A página envolve o título e o cartão de visitante em `.conta-porta`. Fora
   do estado de visitante, o envoltório é `display: contents`, não existe para
   o layout, e o painel do cliente fica como era. Com o visitante à vista, o
   envoltório vira a porta na medida padrão: o título passa a ser o topo do
   cartão, como "Painel do catálogo" na referência.
   ------------------------------------------------------------------------- */
.conta-porta { display: contents; }

.conta-porta:has(> #conta-visitante:not([hidden])) {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--yv-porta-largura);
  margin: 0 auto;
  padding: clamp(30px, 5vw, 46px) clamp(24px, 4.4vw, 40px);
  border: 1px solid var(--conta-borda, rgba(255, 255, 255, .08));
  border-radius: 20px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--conta-violeta-rgb, 91, 42, 134), .22) 0%, transparent 60%),
    var(--conta-superficie, #120f18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
@media (min-width: 720px) and (min-height: 700px) {
  .conta-porta:has(> #conta-visitante:not([hidden])) {
    min-height: min(var(--yv-porta-altura), calc(100vh - 2 * var(--yv-porta-folga)));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .conta-porta:has(> #conta-visitante:not([hidden])) > * { flex: none; }
}

/* O título vira o topo do cartão: o tamanho dos títulos das outras portas. */
.conta-porta:has(> #conta-visitante:not([hidden])) > .conta-topo { margin: 0 0 22px; }
.conta-porta:has(> #conta-visitante:not([hidden])) > .conta-topo h1 { font-size: 1.32rem; margin-bottom: 8px; }
.conta-porta:has(> #conta-visitante:not([hidden])) > .conta-topo p {
  font-size: 13.5px;
  line-height: 1.6;
  text-align: center;
  hyphens: manual;   /* a folha da página hifeniza, e o nome da marca saía partido ("YveTe-ch") */
}

/* A página reserva 160–172 px no topo para a barra fixa da loja e 96 px
   embaixo. Com a porta na altura padrão, sobravam 2 px fora da tela e a página
   rolava. Na porta, o topo fica logo abaixo da barra, e o pé encolhe. */
@media (min-width: 720px) and (min-height: 700px) {
  .conta-palco:has(> .conta-porta > #conta-visitante:not([hidden])) { padding-top: 110px; padding-bottom: 40px; }
}

/* O cartão de visitante fica DENTRO da porta: perde a própria moldura. */
.conta-porta > #conta-visitante {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}
.conta-porta > #conta-visitante .conta-abas { margin-bottom: 22px; }

/* Entrar: o título e o texto de ajuda repetem o topo da porta e saem. O
   botão ocupa a largura toda, como em todas as portas, e os dois links vão
   numa linha embaixo dele, centrados. */
.conta-porta > #conta-visitante #painel-entrar > h2,
.conta-porta > #conta-visitante #painel-entrar > .conta-ajuda { display: none; }
.conta-porta > #conta-visitante #painel-entrar > .conta-acoes {
  justify-content: center;
  gap: 10px 18px;
  margin-top: 22px;
}
.conta-porta > #conta-visitante #painel-entrar > .conta-acoes > .conta-botao { flex: 1 0 100%; }

/* O miolo padrão também aqui (as peças da loja têm nomes próprios). */
.conta-porta:has(> #conta-visitante:not([hidden])) > .conta-topo { margin: 0; }
.conta-porta:has(> #conta-visitante:not([hidden])) > .conta-topo h1 { margin: 0 0 10px; line-height: 1.6; letter-spacing: -.015em; font-weight: 600; color: var(--yv-texto, #F4F4F4); }
.conta-porta:has(> #conta-visitante:not([hidden])) > .conta-topo p { margin: 0 0 28px; font-weight: 300; color: var(--yv-texto-mudo, #9A9AA5); }
.conta-porta > #conta-visitante .conta-abas { margin-bottom: 20px; }
.conta-porta > #conta-visitante .conta-grade { gap: 16px; }
.conta-porta > #conta-visitante .conta-campo { gap: 0; }
.conta-porta > #conta-visitante .conta-campo label {
  display: block;
  margin: 0 0 7px;
  font-size: .82rem; font-weight: 500; letter-spacing: .02em; line-height: 1.6; text-transform: none;
  color: var(--yv-texto, #F4F4F4);
  text-align: left;
}
.conta-porta > #conta-visitante .conta-campo :is(input[type="text"], input[type="email"], input[type="password"], input:not([type])) {
  box-sizing: border-box;
  height: 51px; padding: 13px 16px;
  border-radius: 11px;
  font-size: 15px; line-height: normal;
}
.conta-porta > #conta-visitante .conta-campo .senha-caixa input { padding-right: 50px; }
/* a linha de erro reservava altura mesmo vazia: 16 px viravam ~30 entre os campos */
.conta-porta > #conta-visitante .conta-campo .conta-erro:empty { display: none; }
.conta-porta > #conta-visitante #painel-entrar > .conta-acoes { margin-top: 16px; }
.conta-porta > #conta-visitante #painel-entrar > .conta-acoes > .conta-botao {
  min-height: 49px; padding: 14px 18px;
  border-radius: 11px;
  font-size: 15px; font-weight: 600; letter-spacing: .01em; line-height: 1.4;
}
/* os links no padrão das portas: cinza, sem sublinhado, acento no hover */
.conta-porta > #conta-visitante #painel-entrar > .conta-acoes > .conta-link {
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  color: var(--yv-texto-mudo, #9A9AA5);
  font-size: 13px; font-weight: 400; line-height: 1.6;
  text-decoration: none;
}
.conta-porta > #conta-visitante #painel-entrar > .conta-acoes > .conta-link:is(:hover, :focus-visible) {
  color: var(--yv-acento, #00E5A0);
  border-bottom-color: currentColor;
  text-decoration: none;
}
/* a posição exata (85 px em cima e embaixo) onde a barra fixa da loja não encosta no cartão */
@media (min-width: 1280px) and (min-height: 700px) {
  .conta-palco:has(> .conta-porta > #conta-visitante:not([hidden])) { padding-top: 85px; padding-bottom: 85px; }
}