/* Login "cozy" da Santini (Balcão + Gestão). Cores: creme #fbf6f3 · botão #8a4b5c · logo #784726 · título #4a2c33 */
.tela-login.lc-tela { position: fixed; inset: 0; z-index: 60; margin: 0; padding: 28px; overflow: auto; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(60% 55% at 12% 18%, #f7d9e3 0, transparent 70%), radial-gradient(55% 50% at 88% 82%, #e4dcf5 0, transparent 70%), radial-gradient(45% 40% at 85% 12%, #fde8d6 0, transparent 70%), #f6f1f4; }
/* depois de entrar, a camada do login some (sem isto ela ficava por cima do sistema) */
body:not(.sem-sessao) .tela-login.lc-tela { display: none; }
.lc { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(340px, 45%) 1fr; gap: 10px; padding: 10px; width: min(1180px, 100%); min-height: min(760px, calc(100vh - 56px)); min-height: min(760px, calc(100dvh - 56px)); margin: auto;
  border-radius: 38px; background: rgba(255, 255, 255, .5); border: 2px solid rgba(255, 255, 255, .92); backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 40px 90px -40px rgba(120, 71, 80, .45), 0 10px 30px -18px rgba(120, 71, 80, .25), inset 0 1px 0 rgba(255, 255, 255, .9);
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif; color: #4a2c33; animation: lc-entra-cartao .7s cubic-bezier(.2, .8, .2, 1) both; }

/* ---- cena (esquerda) ---- */
.lc-cena { position: relative; overflow: hidden; border-radius: 28px; background: #c3969f; --px: 0; --py: 0; animation: lc-entra-cena .9s ease-out both; }
.lc-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.lc-svg * { transform-box: fill-box; }
.lc-svg .lc-abajur, .lc-svg .lc-planta, .lc-svg .lc-poltrona, .lc-svg .lc-moca, .lc-svg .lc-brilhos, .lc-svg .lc-nuvem { transition: transform .35s ease-out; }
.lc-svg .lc-nuvem { transform: translate(calc(var(--px) * -10px), calc(var(--py) * -6px)); }
.lc-svg .lc-brilhos { transform: translate(calc(var(--px) * -14px), calc(var(--py) * -10px)); }
.lc-svg .lc-abajur { transform: translate(calc(var(--px) * 16px), calc(var(--py) * 8px)); }
.lc-svg .lc-planta { transform: translate(calc(var(--px) * 16px), calc(var(--py) * 8px)); }
.lc-svg .lc-poltrona, .lc-svg .lc-moca { transform: translate(calc(var(--px) * 6px), calc(var(--py) * 3px)); }
.lc-svg image { image-rendering: auto; }

.lc-svg .lc-respira { transform-box: view-box; transform-origin: 300px 650px; animation: lc-respira 4.2s ease-in-out infinite alternate; }
.lc-svg .lc-cabeca { transform-box: view-box; transform-origin: 300px 410px; animation: lc-cabeca 6s ease-in-out infinite alternate; }
.lc-svg .lc-braco { transform-box: view-box; transform-origin: 368px 448px; animation: lc-acena 6s ease-in-out infinite; }
.lc-svg .lc-olhos { transform-box: view-box; transform-origin: 300px 340px; animation: lc-pisca 5.2s infinite; }
.lc-svg .lc-folhas { transform-box: view-box; transform-origin: 532px 678px; animation: lc-balanca 5s ease-in-out infinite alternate; }
.lc-svg .lc-luz { transform-box: fill-box; transform-origin: center; animation: lc-luz 3.6s ease-in-out infinite alternate; }
.lc-svg .lc-nuvem { animation-name: none; }
.lc-svg .lc-n1 ellipse { animation: lc-nuvem 22s ease-in-out infinite alternate; }
.lc-svg .lc-n2 ellipse { animation: lc-nuvem 28s ease-in-out infinite alternate-reverse; }
.lc-svg .lc-b { transform-origin: center; animation: lc-brilho 3.4s ease-in-out infinite; }
.lc-svg .b2 { animation-delay: .8s; } .lc-svg .b3 { animation-delay: 1.6s; } .lc-svg .b4 { animation-delay: 2.2s; } .lc-svg .b5 { animation-delay: 1.1s; }
.lc.lc-tapa .lc-luz { opacity: .45 !important; transition: opacity .4s; }

@keyframes lc-respira { from { transform: scale(1, 1); } to { transform: scale(1.006, 1.014) rotate(.3deg); } }
@keyframes lc-cabeca { from { transform: rotate(-1.6deg); } to { transform: rotate(1.8deg); } }
@keyframes lc-acena { 0%, 55%, 100% { transform: rotate(0); } 10% { transform: rotate(-9deg); } 20% { transform: rotate(5deg); } 30% { transform: rotate(-8deg); } 40% { transform: rotate(3deg); } 48% { transform: rotate(-3deg); } }
@keyframes lc-pisca { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes lc-balanca { from { transform: rotate(-1.6deg); } to { transform: rotate(1.8deg); } }
@keyframes lc-luz { from { opacity: .62; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
@keyframes lc-nuvem { from { transform: translateX(-26px); } to { transform: translateX(34px); } }
@keyframes lc-brilho { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes lc-entra-cena { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes lc-sobe { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---- painel (direita) ---- */
.lc-painel { display: flex; align-items: center; justify-content: center; padding: 32px 24px; background: transparent; }
.lc-conteudo { width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.lc-marca { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 18px; animation: lc-sobe .7s .1s ease-out both; }
.lc-logo { width: min(300px, 70%); height: auto; color: #784726; display: block; }
.lc-area { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #a98d86; background: #f3e6e1; padding: 5px 14px; border-radius: 999px; }
.lc-area:empty { display: none; }

.lc .caixa-login { max-width: none !important; width: 100%; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; gap: 14px; animation: lc-sobe .7s .25s ease-out both; }
.lc .caixa-login h2 { margin: 0; text-align: center; color: #4a2c33 !important; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; font-weight: 800; letter-spacing: -.01em; }
.lc .caixa-login .texto-apoio { text-align: center; color: #8a7a7e; font-size: 16px; margin: 0 0 8px; }
.lc .caixa-login label { font-size: 14px; color: #7a6468; gap: 6px; font-weight: 600; }
.lc .caixa-login input { background: #fff !important; border: 2px solid #ecdcd6 !important; border-radius: 999px !important; padding: 16px 22px !important; font-size: 17px; color: #4a2c33 !important; box-shadow: 0 6px 16px -12px rgba(138, 75, 92, .45); transition: border-color .2s, box-shadow .2s, transform .2s; }
.lc .caixa-login input::placeholder { color: #b9a9ad; }
.lc .caixa-login input:focus { outline: none; border-color: #c98ca0 !important; box-shadow: 0 0 0 5px rgba(201, 140, 160, .22), 0 6px 16px -12px rgba(138, 75, 92, .45) !important; transform: translateY(-1px); }
.lc .caixa-login .primario { margin-top: 10px; padding: 17px 22px; border-radius: 999px; font-size: 19px; font-weight: 800; letter-spacing: .01em; background: #8a4b5c !important; color: #fff; border: 0; cursor: pointer; box-shadow: 0 14px 24px -14px rgba(138, 75, 92, .8) !important; transition: transform .15s, box-shadow .15s, filter .15s; }
.lc .caixa-login .primario:hover { transform: translateY(-2px); filter: brightness(1.06); }
.lc .caixa-login .primario:active { transform: translateY(1px) scale(.99); }
.lc .caixa-login .msg-erro { border-radius: 18px; text-align: center; animation: lc-treme .4s; }
.lc .link-discreto { color: #8a4b5c; text-align: center; }
@keyframes lc-treme { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.lc-senha { position: relative; display: block; }
.lc-senha input { width: 100%; box-sizing: border-box; padding-right: 56px !important; }
.lc-olho { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 6px; border-radius: 50%; color: #b9a0a8; cursor: pointer; display: flex; }
.lc-olho:hover, .lc-olho--on { color: #8a4b5c; }

/* ---- celular / janela estreita: a cena vira uma faixa no topo ---- */
@media (max-width: 860px) {
  .tela-login.lc-tela { padding: 12px; }
  .lc { grid-template-columns: 1fr; grid-template-rows: 200px 1fr; min-height: calc(100vh - 24px); min-height: calc(100dvh - 24px); border-radius: 30px; padding: 8px; gap: 6px; }
  .lc-svg { inset: auto; left: 0; top: -44px; height: auto; }
  .lc-cena { border-radius: 24px; }
  .lc-painel { align-items: flex-start; padding: 22px 20px 32px; }
  .lc-marca { margin-bottom: 8px; }
  .lc-logo { width: 190px; }
  .lc .caixa-login h2 { font-size: 30px; }
  .lc .caixa-login input { font-size: 16px; }
}
@media (max-height: 640px) and (min-width: 861px) { .lc-painel { align-items: flex-start; } }

@media (prefers-reduced-motion: reduce) {
  .lc *, .lc-cena { animation: none !important; transition: none !important; }
  .lc-svg .lc-abajur, .lc-svg .lc-planta, .lc-svg .lc-poltrona, .lc-svg .lc-moca, .lc-svg .lc-brilhos, .lc-svg .lc-nuvem { transform: none !important; }
}

.lc-esqueci { align-self: flex-end; background: none; border: 0; padding: 2px 10px; margin: -4px 0 0; font: inherit; font-size: 15px; font-weight: 700; color: #8a4b5c; cursor: pointer; border-radius: 999px; }
.lc-esqueci:hover, .lc-esqueci:focus-visible { text-decoration: underline; outline: none; }
.lc-rec { animation: lc-sobe .45s ease-out both; }
.lc-rec h2 { font-size: clamp(26px, 2.6vw, 36px) !important; }
.lc .lc-rec .link-discreto { font-size: 15px; }
.lc .lc-rec .link-discreto { background: none; border: 0; padding: 4px; color: #8a4b5c; text-decoration: underline; cursor: pointer; font-family: inherit; text-align: center; }

@keyframes lc-entra-cartao { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

/* fundo: bolhas flutuando e manchas de cor suaves (o cartão é translúcido e deixa isso aparecer) */
.lc-fundo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.lc-fundo i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95), rgba(255,255,255,.35) 60%, rgba(255,255,255,.1)); box-shadow: 0 6px 20px -8px rgba(138, 75, 92, .25); animation: lc-bolha 14s ease-in-out infinite alternate; }
.lc-fundo i:nth-child(1) { width: 46px; height: 46px; left: 5%; top: 8%; }
.lc-fundo i:nth-child(2) { width: 14px; height: 14px; left: 22%; top: 90%; animation-delay: -3s; animation-duration: 11s; }
.lc-fundo i:nth-child(3) { width: 30px; height: 30px; right: 7%; top: 12%; animation-delay: -6s; }
.lc-fundo i:nth-child(4) { width: 18px; height: 18px; right: 20%; bottom: 7%; animation-delay: -2s; animation-duration: 12s; }
.lc-fundo i:nth-child(5) { width: 64px; height: 64px; left: 1.5%; bottom: 12%; animation-delay: -8s; opacity: .8; }
.lc-fundo i:nth-child(6) { width: 10px; height: 10px; left: 48%; top: 4%; animation-delay: -5s; }
.lc-fundo b { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: lc-mancha 22s ease-in-out infinite alternate; }
.lc-fundo b:nth-child(7) { width: 380px; height: 380px; left: 6%; top: 10%; background: #f4c6d6; }
.lc-fundo b:nth-child(8) { width: 340px; height: 340px; right: 8%; bottom: 6%; background: #d7c9f2; animation-delay: -9s; }
@keyframes lc-bolha { from { transform: translate(0, 0); } to { transform: translate(14px, -26px); } }
@keyframes lc-mancha { from { transform: translate(0, 0) scale(1); } to { transform: translate(50px, -30px) scale(1.12); } }
@media (max-width: 860px) { .lc-fundo i:nth-child(n+4) { display: none; } }
@media (prefers-reduced-motion: reduce) { .lc-fundo *, .lc { animation: none !important; } }

/* ---- "Entrar com o Google" (aparece só se o servidor tiver o Google ligado) ---- */
.lc-google { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 4px; min-height: 44px; }
.lc-ou { width: 100%; display: flex; align-items: center; gap: 12px; color: #8a7a7e; font-size: 13px; }
.lc-ou::before, .lc-ou::after { content: ''; flex: 1; height: 1px; background: #ecdcd6; }
.lc-google-btn { display: flex; justify-content: center; max-width: 100%; color-scheme: light; }

/* resumo "Como entrar" abaixo do formulário */
.lc-ajuda { margin-top: 6px; padding: 12px 14px; border-radius: 16px; background: rgba(138, 75, 92, .07); border: 1px solid rgba(138, 75, 92, .14); font-size: 14px; line-height: 1.45; color: #5a4a4e; text-align: left; }
.lc-ajuda-tit { margin: 0 0 4px; font-weight: 800; font-size: 14px; color: #4a2c33; }
.lc-ajuda ul { margin: 0; padding-left: 18px; }
.lc-ajuda li { margin-bottom: 3px; }
.lc-ajuda-rodape { margin: 6px 0 0; font-size: 13px; color: #7a6a6e; }
.lc-google-nota { margin: 0; font-size: 13px; line-height: 1.4; color: #7a6a6e; text-align: center; }
html[data-tema="escuro"] .lc-ajuda { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); color: #d6d0dd; }
html[data-tema="escuro"] .lc-ajuda-tit { color: #f4f1f8; }
html[data-tema="escuro"] .lc-ajuda-rodape, html[data-tema="escuro"] .lc-google-nota { color: #a9a4b4; }

.lc-google-status { margin: 8px 0 0; text-align: center; font-size: 14px; font-weight: 600; color: #6e4a56; display: flex; align-items: center; justify-content: center; gap: 8px; }
.lc-google-status::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: lc-gira 0.8s linear infinite; }
.lc-google-status[hidden] { display: none; }
.lc-google--espera .lc-google-btn { opacity: 0.55; pointer-events: none; }
@keyframes lc-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lc-google-status::before { animation: none; } }
html[data-tema="escuro"] .lc-google-status { color: #d9c9d0; }