/* =====================================================================
   FOCO — AS TELAS DE ENTRADA (Esboço 3, 15/09/2026)
   ---------------------------------------------------------------------
   Três telas com identidade da casa, pedidas pelo usuário: *"falta um
   pouco mais de identidade do escritório... algo mais vivo, com nome, com
   logo da foco"*, a entrada do cliente *"única como era"* e a tela de
   escolha *"refeita"*.

     .fc-login    login do escritório (Central; reserva ?local=1 do
                  Contábil e do Clientes)
     .fc-portal   entrada do CLIENTE no relatório gerencial — cartão
                  próprio, sem nada dos sistemas internos
     .fc-escolha  a colmeia de escolha do sistema, logo depois do login

   CÓPIA IDÊNTICA em assets/foco-entrada.css dos cinco sistemas. Fonte da
   verdade: base-visual/foco-entrada.css. Depende do foco-base.css (tokens
   e peças vivas) e do foco-entrada.js (movimento).
   ===================================================================== */

/* ---------------- a marca desenhada ---------------- */
.fc-simbolo.fc-desenha path { stroke: var(--fc-marca); stroke-width: 3; fill-opacity: 0; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: fc-tracar 1.3s var(--fc-curva) forwards, fc-preencher .7s ease .9s forwards; }
.fc-simbolo.fc-desenha path + path { animation-delay: .25s, 1.1s; }
@keyframes fc-tracar { to { stroke-dashoffset: 0; } }
@keyframes fc-preencher { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes fc-sobe { from { transform: translateY(18px); opacity: 0; } }

/* ---------------- LOGIN DO ESCRITÓRIO ---------------- */
.fc-login { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(380px, .8fr); background: var(--fc-bg); color: var(--fc-tinta); font: 14px/1.5 var(--fc-fonte); }
.fc-login-arte { position: relative; display: grid; align-content: center; padding: 48px clamp(28px, 6vw, 88px); overflow: hidden; background: var(--fc-painel); border-right: 1px solid var(--fc-linha); perspective: 900px; }
.fc-rede { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.fc-arte-conteudo { position: relative; display: grid; gap: 24px; max-width: 580px; }
.fc-identidade { display: flex; align-items: center; gap: 28px; }
.fc-identidade .fc-simbolo { width: clamp(92px, 10vw, 132px); will-change: transform; transition: transform .25s var(--fc-curva); }
.fc-identidade-txt { display: grid; gap: 12px; }
.fc-palavra { display: flex; color: var(--fc-tinta); font: 800 clamp(52px, 7vw, 92px)/.95 var(--fc-marca-fonte); letter-spacing: .06em; }
.fc-palavra span { display: inline-block; animation: fc-letra .7s var(--fc-curva) backwards; transition: transform .25s var(--fc-curva), color .2s; }
.fc-palavra span:nth-child(2) { animation-delay: .08s; }
.fc-palavra span:nth-child(3) { animation-delay: .16s; }
.fc-palavra span:nth-child(4) { animation-delay: .24s; }
.fc-palavra span:hover { color: var(--fc-marca); transform: translateY(-5px); }
@keyframes fc-letra { from { transform: translateY(26px); opacity: .2; } }
.fc-sub-marca { color: var(--fc-tinta-2); font: 600 clamp(11px, 1.15vw, 14px)/1 var(--fc-marca-fonte); letter-spacing: .42em; text-transform: uppercase; }
.fc-divisor { width: 56px; height: 3px; background: var(--fc-marca); transform-origin: left; animation: fc-crescer .8s var(--fc-curva) .5s backwards; }
@keyframes fc-crescer { from { transform: scaleX(0); } }
.fc-frase { max-width: 28ch; margin: 0; color: var(--fc-tinta); font: 500 clamp(17px, 1.7vw, 23px)/1.45 var(--fc-marca-fonte); }
.fc-frase em { color: var(--fc-marca); font-style: normal; }
.fc-pilares { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.fc-pilar { display: grid; align-content: start; justify-items: start; gap: 10px; padding: 14px 12px; border: 1px solid var(--fc-linha); border-radius: var(--fc-raio-g); background: color-mix(in srgb, var(--fc-bg) 55%, transparent); transition: transform .3s var(--fc-curva), border-color .3s, background .3s; }
.fc-pilar .fc-ic { width: 28px; height: 28px; color: var(--fc-marca); }
.fc-pilar .fc-ic * { stroke-dasharray: 90; stroke-dashoffset: 0; }
.fc-pilar:hover { transform: translateY(-4px); border-color: var(--fc-marca); background: var(--fc-marca-fundo); }
.fc-pilar:hover .fc-ic * { animation: fc-tracar-ic .9s var(--fc-curva); }
@keyframes fc-tracar-ic { from { stroke-dashoffset: 90; } }
.fc-pilar span { color: var(--fc-tinta-2); font: 600 12px/1.3 var(--fc-marca-fonte); }

/* Todo grid destas telas trava a coluna na largura da tela
   (minmax(0, 1fr)): a coluna automática crescia até o `min(470px, 100%)` do
   cartão e empurrava a página para o lado no celular. */
.fc-login-lado { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; min-width: 0; background: var(--fc-bg); }
.fc-login-topo { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 24px; }
.fc-relogio { margin-right: auto; color: var(--fc-apagada); font: 500 13px/1 var(--fc-mono); font-variant-numeric: tabular-nums; }
.fc-login-form { align-self: center; justify-self: center; display: grid; gap: 18px; width: min(400px, 100% - 48px); padding-block: 24px; animation: fc-sobe .6s var(--fc-curva) .15s backwards; }
.fc-ola { color: var(--fc-marca); font: 700 13px/1 var(--fc-marca-fonte); letter-spacing: .14em; text-transform: uppercase; }
.fc-login-form h1 { margin: 8px 0 0; color: var(--fc-tinta); font: 700 30px/1.15 var(--fc-marca-fonte); letter-spacing: -.01em; text-wrap: balance; }
.fc-guia { margin: 6px 0 0; color: var(--fc-apagada); }
.fc-login-form form { display: grid; gap: 14px; }
.fc-login-nota { margin: 0; color: var(--fc-apagada); font-size: 12px; line-height: 1.6; }
.fc-login-rodape { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--fc-linha); color: var(--fc-apagada); font-size: 12px; }
.fc-login-rodape a { color: var(--fc-tinta-2); }

/* campo com rótulo que flutua */
.fc-flutua { position: relative; }
.fc-flutua input { width: 100%; height: 54px; margin: 0; padding: 20px 46px 6px 14px; border: 1px solid var(--fc-linha-forte); border-radius: var(--fc-raio); outline: none; background: var(--fc-campo); color: var(--fc-tinta); font: 400 15px/1.2 var(--fc-fonte); transition: border-color .2s, box-shadow .2s; }
.fc-flutua label { position: absolute; left: 15px; top: 17px; color: var(--fc-apagada); font: 400 15px/1.2 var(--fc-fonte); pointer-events: none; transform-origin: left top; transition: transform .2s var(--fc-curva), color .2s; }
.fc-flutua input:hover { border-color: var(--fc-apagada); }
.fc-flutua input:focus { border-color: var(--fc-acento); box-shadow: var(--fc-anel); }
.fc-flutua input:focus + label,
.fc-flutua input:not(:placeholder-shown) + label,
.fc-flutua input:-webkit-autofill + label { transform: translateY(-10px) scale(.76); }
.fc-flutua input:focus + label { color: var(--fc-acento); }
.fc-olho { position: absolute; top: 10px; right: 8px; display: grid; place-items: center; width: 34px; height: 34px; margin: 0; padding: 0; border: 0; border-radius: var(--fc-raio); background: none; color: var(--fc-apagada); cursor: pointer; }
.fc-olho:hover { background: var(--fc-hover); color: var(--fc-tinta); }
.fc-olho .fc-ic { width: 18px; height: 18px; }
.fc-olho .fc-risco { stroke-dasharray: 23; stroke-dashoffset: 23; transition: stroke-dashoffset .3s var(--fc-curva); }
.fc-olho[aria-pressed="true"] .fc-risco { stroke-dashoffset: 0; }
.fc-caps { position: absolute; top: 19px; right: 48px; padding: 1px 6px; border-radius: 3px; background: var(--fc-aviso-fundo); color: var(--fc-aviso); font: 600 10px/1.4 var(--fc-mono); letter-spacing: .04em; }
.fc-bt-entrar { width: 100%; height: 50px; font-size: 15px; }
.fc-bt-entrar .fc-ic { transition: transform .3s var(--fc-curva); }
.fc-bt-entrar:hover .fc-ic { transform: translateX(4px); }
.fc-tremer { animation: fc-tremer .42s; }
@keyframes fc-tremer { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

@media (max-width: 960px) {
  .fc-login { grid-template-columns: minmax(0, 1fr); }
  .fc-login-arte { min-height: 340px; padding: 32px 20px; border-right: 0; border-bottom: 1px solid var(--fc-linha); }
  .fc-pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fc-identidade { gap: 16px; }
}
@media (max-width: 520px) {
  .fc-login-arte .fc-pilares { display: none; }
  .fc-login-topo, .fc-login-rodape { padding-inline: 16px; }
}

/* ---------------- ENTRADA DO CLIENTE ---------------- */
.fc-portal { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 100vh; min-height: 100dvh; padding: 40px 16px; overflow: hidden; background: var(--fc-bg); color: var(--fc-tinta); font: 14px/1.5 var(--fc-fonte); }
.fc-portal-cartao { position: relative; display: grid; gap: 22px; width: min(470px, 100%); padding: 34px 32px; background: var(--fc-painel); border: 1px solid var(--fc-linha); border-radius: var(--fc-raio-g); box-shadow: var(--fc-sombra-g); animation: fc-sobe .6s var(--fc-curva) backwards; }
.fc-portal-cab { display: flex; align-items: center; gap: 14px; }
.fc-portal-cab .fc-simbolo { width: 42px; }
.fc-portal-cab strong { display: block; font: 800 22px/1 var(--fc-marca-fonte); letter-spacing: .1em; }
.fc-portal-cab small { display: block; margin-top: 5px; color: var(--fc-apagada); font: 600 10px/1 var(--fc-marca-fonte); letter-spacing: .32em; text-transform: uppercase; }
.fc-portal-cab .fc-modo { margin-left: auto; }
.fc-cadeado { display: block; width: 64px; height: 64px; margin: 2px auto 0; color: var(--fc-marca); }
.fc-cadeado .fc-alca { transform-box: view-box; transform-origin: 58px 38px; transition: transform .5s var(--fc-curva); }
.fc-portal-cartao.fc-aberto .fc-cadeado .fc-alca, .fc-cadeado:hover .fc-alca { transform: translateY(-7px) rotate(-18deg); }
.fc-portal-titulo { display: grid; gap: 6px; text-align: center; }
.fc-portal-titulo h1 { margin: 0; font: 700 24px/1.2 var(--fc-marca-fonte); text-wrap: balance; }
.fc-portal-titulo p { margin: 0; color: var(--fc-apagada); }
.fc-portal-form { display: grid; gap: 18px; }
.fc-portal-rotulo { margin-bottom: 8px; color: var(--fc-apagada); font: 700 11px/1 var(--fc-marca-fonte); letter-spacing: .12em; text-transform: uppercase; }
.fc-codigo { display: grid; grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); gap: 6px; }
.fc-codigo input { width: 100%; min-width: 0; height: 48px; margin: 0; padding: 0; border: 1px solid var(--fc-linha-forte); border-radius: var(--fc-raio); outline: none; background: var(--fc-campo); color: var(--fc-tinta); font: 600 18px/1 var(--fc-mono); text-align: center; text-transform: uppercase; transition: border-color .2s, transform .2s var(--fc-curva), color .2s, box-shadow .2s; }
.fc-codigo input:focus { border-color: var(--fc-marca); box-shadow: 0 0 0 3px var(--fc-marca-fundo); transform: translateY(-2px); }
.fc-codigo input.fc-cheio { border-color: color-mix(in srgb, var(--fc-marca) 60%, var(--fc-linha-forte)); color: var(--fc-marca); }
.fc-codigo.fc-completo input { animation: fc-onda-codigo .5s var(--fc-curva) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes fc-onda-codigo { 40% { transform: translateY(-5px); border-color: var(--fc-marca); } }
.fc-portal .fc-flutua input:focus { border-color: var(--fc-marca); box-shadow: 0 0 0 3px var(--fc-marca-fundo); }
.fc-portal .fc-flutua input:focus + label { color: var(--fc-marca); }
.fc-bt-marca { width: 100%; height: 48px; border-color: var(--fc-marca); background: var(--fc-marca); color: var(--fc-marca-tinta); font-weight: 600; }
.fc-bt-marca:hover:not(:disabled) { border-color: var(--fc-marca); background: color-mix(in srgb, var(--fc-marca) 86%, var(--fc-tinta)); box-shadow: 0 8px 20px -10px var(--fc-marca); }
.fc-portal-pe { color: var(--fc-apagada); font-size: 12px; text-align: center; }
@media (max-width: 440px) {
  .fc-portal-cartao { padding: 26px 18px; }
  .fc-codigo { gap: 4px; }
  .fc-codigo input { height: 42px; font-size: 16px; }
}

/* ---------------- ESCOLHA DO SISTEMA (colmeia) ---------------- */
.fc-escolha { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden auto; background: var(--fc-bg); color: var(--fc-tinta); font: 14px/1.5 var(--fc-fonte); transition: opacity .45s ease, visibility 0s .45s; }
.fc-escolha.fc-saindo { opacity: 0; visibility: hidden; pointer-events: none; }
.fc-escolha .fc-rede { pointer-events: none; }
.fc-escolha-topo { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 28px; }
.fc-marca-mini { display: flex; align-items: center; gap: 10px; }
.fc-marca-mini .fc-simbolo { width: 28px; }
.fc-marca-mini strong { font: 800 17px/1 var(--fc-marca-fonte); letter-spacing: .12em; }
.fc-escolha-acoes { display: flex; align-items: center; gap: 8px; }
.fc-escolha-centro { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; gap: 30px; padding: 8px 20px 24px; }
.fc-saudacao { display: grid; gap: 6px; text-align: center; animation: fc-sobe .6s var(--fc-curva) backwards; }
.fc-saudacao .fc-dia { color: var(--fc-marca); font: 700 12px/1 var(--fc-marca-fonte); letter-spacing: .2em; text-transform: uppercase; }
.fc-saudacao h1 { margin: 0; font: 700 clamp(26px, 3.4vw, 40px)/1.15 var(--fc-marca-fonte); }
.fc-saudacao p { margin: 0; color: var(--fc-apagada); }
.fc-colmeia { --w: 200px; --h: calc(var(--w) * 1.1547); display: grid; grid-template-columns: repeat(3, var(--w)); gap: 0 14px; }
.fc-colmeia-fila2 { grid-column: 1 / -1; display: flex; justify-content: center; gap: 14px; margin-top: calc(var(--h) * -.22); }
.fc-hex { --cor: var(--fc-m-central); position: relative; width: var(--w); height: var(--h); margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; perspective: 700px; animation: fc-hex-entra .6s var(--fc-curva) backwards; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
@keyframes fc-hex-entra { from { transform: translateY(24px) scale(.9); opacity: 0; } }
.fc-hex:focus-visible { outline: none; }
.fc-hex-corpo { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .25s var(--fc-curva), opacity .3s; will-change: transform; }
.fc-hex-borda, .fc-hex-fundo { position: absolute; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.fc-hex-borda { inset: 0; background: var(--fc-linha-forte); transition: background .3s; }
.fc-hex-fundo { inset: 2px; overflow: hidden; background: var(--fc-painel); }
.fc-hex-onda { position: absolute; inset: 0; background: color-mix(in srgb, var(--cor) 18%, var(--fc-painel)); transform: translateY(101%); transition: transform .45s var(--fc-curva); }
.fc-hex:hover .fc-hex-borda, .fc-hex:focus-visible .fc-hex-borda, .fc-hex.fc-marcado .fc-hex-borda { background: var(--cor); }
.fc-hex:hover .fc-hex-onda, .fc-hex:focus-visible .fc-hex-onda, .fc-hex.fc-marcado .fc-hex-onda { transform: none; }
/* O relevo (translateZ) só existe com o mouse em cima: parado, o texto em
   profundidade vira bitmap ampliado e sai borrado. */
.fc-hex-conteudo { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 7px; padding: 0 20px; text-align: center; transition: transform .25s var(--fc-curva); }
.fc-hex:hover .fc-hex-conteudo { transform: translateZ(26px); }
.fc-hex-icone { display: block; width: 44px; height: 44px; color: var(--cor); transition: transform .4s var(--fc-curva); }
.fc-hex-icone svg { display: block; width: 44px; height: 44px; }
.fc-hex:hover .fc-hex-icone { transform: translateY(-4px) scale(1.12); }
.fc-hex-nome { color: var(--fc-tinta); font: 700 17px/1.1 var(--fc-marca-fonte); }
.fc-hex-pulso { display: inline-flex; align-items: center; gap: 6px; max-width: 152px; color: var(--fc-tinta-2); font: 500 12px/1.3 var(--fc-fonte); text-align: left; }
.fc-hex-pulso b { color: var(--fc-tinta); font: 600 13px/1 var(--fc-mono); font-variant-numeric: tabular-nums; }
.fc-hex-pulso i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--cor); animation: fc-pulsar 2s ease-in-out infinite; }
.fc-hex-pulso[data-tom="alerta"] i { background: var(--fc-critico); }
.fc-hex-pulso[data-tom="bom"] i { background: var(--fc-ok); }
.fc-hex-tecla { position: absolute; top: 19%; right: 21%; color: var(--fc-apagada); font: 600 10px/1 var(--fc-mono); }
.fc-hex-dica { max-width: 136px; max-height: 0; overflow: hidden; opacity: 0; color: var(--fc-apagada); font-size: 11px; line-height: 1.35; transition: max-height .35s var(--fc-curva), opacity .3s; }
.fc-hex:hover .fc-hex-dica, .fc-hex:focus-visible .fc-hex-dica, .fc-hex.fc-marcado .fc-hex-dica { max-height: 44px; opacity: 1; }
.fc-hex-aqui { color: var(--cor); font: 700 9px/1 var(--fc-marca-fonte); letter-spacing: .14em; text-transform: uppercase; }
.fc-hex.fc-fora { cursor: not-allowed; }
.fc-hex.fc-fora .fc-hex-corpo { opacity: .45; }
.fc-escolha-pe { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding: 14px; color: var(--fc-apagada); font-size: 12px; }
.fc-escolha-pe kbd { padding: 2px 6px; border: 1px solid var(--fc-linha-forte); border-radius: 3px; background: none; color: var(--fc-tinta-2); font: 500 11px/1 var(--fc-mono); }
.fc-mergulho-hex { position: fixed; z-index: 1000; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); pointer-events: none; transition: left .55s var(--fc-curva), top .55s var(--fc-curva), width .55s var(--fc-curva), height .55s var(--fc-curva), opacity .45s; }
@media (max-width: 760px) {
  .fc-colmeia { --w: 148px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 480px; }
  .fc-colmeia-fila2 { display: contents; }
  .fc-hex-dica { display: none; }
  .fc-escolha-topo { padding-inline: 16px; }
}