/* ═══════════════════════════════════════════════════════════════════════════
   A ENTRADA — login e redefinicao de senha — 17/09/2026
   ═══════════════════════════════════════════════════════════════════════════

   Este arquivo nasceu DENTRO do `login.php`, num `<style>` de 500 linhas. Saiu
   de la quando a tela de redefinir senha apareceu: ela e a mesma casa - mesma
   coluna, mesmos campos, mesmo botao -, e copiar o estilo para o segundo arquivo
   seria criar a segunda definicao da mesma coisa. A que divergisse divergiria em
   silencio, que e o que a Regra 11 existe para impedir.

   Quem usa:
     public_html/admin/login.php
     public_html/admin/recuperar-senha.php

   A coluna da esquerda (`.lg-vitrine`) so aparece no login. Na redefinicao ela
   nao existe: quem chega ali ja conhece o produto, esta com um problema, e a
   unica coisa que interessa e resolver.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   A ENTRADA — 17/09/2026
   ═══════════════════════════════════════════════════════════════════════════

   Duas colunas, e cada uma tem um trabalho diferente.

   A ESQUERDA lembra o que o produto e para. Foto de salao cheio, a manchete, o
   painel de verdade num notebook. Ela e inteira `aria-hidden` e some abaixo de
   1024px: nao ha informacao ali que alguem precise para entrar, e num celular
   ela so empurraria o formulario para baixo da dobra.

   A DIREITA e a unica coisa que importa: entrar. Fundo claro, muito respiro,
   laranja so no que se clica.

   O QUE NAO EXISTE NAO APARECE. O desenho pedido trazia "Lembrar-me",
   "Esqueceu sua senha?" e entrar com Google e Apple. Conferido no codigo em
   17/09: nenhum dos tres existe. Botao que nao faz nada ensina a desconfiar dos
   outros (Regra 10), entao: o "lembrar" real e o do segundo fator e continua la;
   a senha esquecida virou a frase que de fato resolve; e Google e Apple ficam
   com a marca `em breve` do catalogo, desligados de verdade.
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:          #F8F9FA;
    --surface:     #FFFFFF;
    --elevated:    #F1F3F5;
    --border:      rgba(0, 0, 0, 0.09);
    --border-forte:rgba(0, 0, 0, 0.16);
    --accent:      #FF5F1F;
    --accent-esc:  #E5480A;
    --accent-soft: rgba(255, 95, 31, 0.10);
    --pessego:     #FFF1E8;
    --text:        #11131A;
    --muted:       #5B6472;
    --dim:         #98A1AE;
    --danger:      #DC2626;
    --aviso:       #B45309;
    --font-d:      'Outfit', system-ui, sans-serif;
    --font-b:      'Outfit', system-ui, sans-serif;
    --font-m:      'Caveat', 'Segoe Script', cursive;
    --r-md:        10px;
    --r-lg:        16px;
    --sombra:      0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
}

.dark-theme {
    --bg:          #0B0C0F;
    --surface:     #131519;
    --elevated:    #1B1E24;
    --border:      rgba(255, 255, 255, 0.10);
    --border-forte:rgba(255, 255, 255, 0.20);
    --pessego:     rgba(255, 95, 31, 0.07);
    --text:        #F7F8FA;
    --muted:       #9BA3B0;
    --dim:         #6B7480;
    --sombra:      0 1px 2px rgba(0,0,0,.5), 0 8px 30px rgba(0,0,0,.45);
}

html, body { max-width: 100%; overflow-x: hidden; }

body {
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-b);
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
}

/* ── A TELA CHEIA, E SO ELA — 17/09/2026 ──
   No computador a entrada tem de caber na altura: barra de rolagem numa tela de
   login e sinal de que alguma coisa nao coube, e a pessoa nao sabe que ha mais
   coisa embaixo. Entao a grade e travada na altura da janela e quem rola, se
   precisar, e a COLUNA DA DIREITA por dentro — a vitrine da esquerda nunca rola,
   porque nao ha nada nela para procurar.

   No celular isto nao vale: ali a pagina rola como qualquer pagina, que e o que
   o dedo espera. */
@media (min-width: 1024px) {
    html, body { height: 100%; overflow: hidden; }
    .lg { height: 100dvh; }
    .lg-acesso { min-height: 0; overflow-y: auto; }
}

/* A grade. 62 / 38, como pedido. */
.lg {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100dvh;
}
@media (min-width: 1024px) {
    .lg { grid-template-columns: 62fr 38fr; }
}

/* ══════════════════ A MARCA ══════════════════
   "Lota" em laranja e o ponto na cor do texto — o ponto e parte do nome, e por
   isso ele muda de cor com o tema em vez de ficar preto fixo e sumir no escuro. */
.lg-marca {
    /* Definidas em Configurações › Marca & Aparência, e publicadas no `<head>`
       só quando alguém troca: sem elas, vale o desenho de sempre. */
    font-family: var(--logo-f, var(--font-d));
    font-weight: var(--logo-w, 900);
    letter-spacing: -.045em;
    color: var(--accent);
    line-height: 1;
    white-space: nowrap;
}
.lg-marca i { font-style: normal; color: var(--text); }
.lg-vitrine .lg-marca i { color: #FFFFFF; }

/* ═══════════════════════════════════════════════════════════════════════════
   COLUNA ESQUERDA — A VITRINE
   ═══════════════════════════════════════════════════════════════════════════ */
.lg-vitrine { display: none; }

@media (min-width: 1024px) {
.lg-vitrine {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 40px 48px 32px;
    background: #0A0705;
    color: #FFFFFF;
}
/* ── O SALAO, DESENHADO ──
   Enquanto a foto nao chega, o ambiente e feito de gradientes: base quase preta
   com fundo de tijolo quente, e uma dezena de circulos ambar de tamanhos e
   opacidades diferentes fazendo o bokeh das luminarias ao fundo. Nao imita uma
   foto e nao tenta: ele da a MESMA leitura — noite, luz quente, profundidade —
   sem pesar um byte e sem depender de um arquivo que ainda nao existe.

   O CAMINHO E RELATIVO A ESTE ARQUIVO, e nao a pagina — 17/09/2026. Enquanto o
   CSS morava dentro do `login.php`, `../assets/img/` resolvia a partir de
   `/admin/` e estava certo. Extraido para `/assets/css/`, o mesmo texto passou a
   apontar para `/assets/assets/img/` e a foto sumiu em silencio: os gradientes
   abaixo assumiram, e a tela continuou bonita e errada. */
.lg-vitrine::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        /* A FOTO, ancorada no PE. A imagem e mais alta que a coluna, entao
           `cover` corta - e o corte tem de sair de CIMA, onde so ha sala escura,
           e nunca de baixo, onde esta o notebook. Por isso `center bottom`. */
        url('../img/login-salao.jpg') center bottom / cover no-repeat,
        /* Por baixo, o mesmo salao desenhado: e o que aparece no instante antes
           de a foto chegar, e o que fica se ela um dia faltar. Sem isto, os dois
           casos dao uma coluna preta. */
        /* o bokeh — os pontos maiores e mais opacos vem por ultimo, e por isso
           aparecem na frente, como o que esta mais perto da camera */
        radial-gradient(circle 60px at 74% 13%, rgba(255,186,110,.50), transparent 62%),
        radial-gradient(circle 34px at 21% 22%, rgba(255,171,92,.42), transparent 64%),
        radial-gradient(circle 88px at 46% 7%,  rgba(255,158,74,.26), transparent 66%),
        radial-gradient(circle 26px at 87% 31%, rgba(255,196,128,.38), transparent 62%),
        radial-gradient(circle 44px at 9% 47%,  rgba(255,150,70,.24), transparent 66%),
        radial-gradient(circle 20px at 60% 27%, rgba(255,205,150,.34), transparent 60%),
        radial-gradient(circle 120px at 92% 62%, rgba(255,120,40,.20), transparent 70%),
        radial-gradient(circle 70px at 33% 68%, rgba(255,140,60,.16), transparent 70%),
        radial-gradient(circle 150px at 15% 88%, rgba(255,110,35,.16), transparent 72%),
        /* a sala: um halo quente ao fundo, sobre a base de madeira escura */
        radial-gradient(130% 80% at 50% 18%, #3A2114 0%, #1C100A 52%, #0B0705 100%);
}
/* O veu. Escuro em cima, onde mora a manchete; mais fechado embaixo, onde o
   mockup precisa de contraste. Sem ele o texto branco some nas luzes ambar —
   e ele continua necessario depois que a foto entrar, pelo mesmo motivo. */
.lg-vitrine::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(8,6,4,.72) 0%, rgba(8,6,4,.62) 30%, rgba(8,6,4,.20) 55%, rgba(8,6,4,.14) 72%, rgba(8,6,4,.88) 92%, rgba(8,6,4,.95) 100%),
        radial-gradient(120% 70% at 12% 8%, rgba(255,95,31,.16) 0%, transparent 60%);
    z-index: -1;
}

.lg-topo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lg-topo .lg-marca { font-size: 34px; }
.lg-eyebrow {
    font-family: var(--font-d);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.62);
}

.lg-meio { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; margin: 34px 0 0; }

.lg-h1 {
    font-family: var(--font-d);
    font-size: clamp(38px, 3.5vw, 56px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.035em;
    max-width: 14ch;
}
.lg-h1 em { font-style: normal; color: var(--accent); }
.lg-chamada {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.62;
    color: rgba(255,255,255,.76);
    max-width: 52ch;
}

/* O bilhete escrito a mao. Inclinado de leve, como quem anotou na margem. */
.lg-bilhete {
    font-family: var(--font-m);
    font-size: 25px;
    line-height: 1.24;
    color: #FFA871;
    transform: rotate(-3deg);
    text-align: left;
    max-width: 19ch;
    padding-top: 4px;
}
.lg-bilhete svg { display: block; margin-top: 4px; width: 118px; height: 12px; overflow: visible; }

/* ── OS BENEFICIOS E A PROVA ── */
.lg-vitrine > div:last-child { margin-top: auto; }
.lg-benef { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-top: 24px; }
.lg-benef div { display: flex; gap: 10px; align-items: flex-start; }
.lg-benef svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.7; flex-shrink: 0; margin-top: 1px; }
.lg-benef p { font-size: 11.5px; line-height: 1.45; color: rgba(255,255,255,.80); }

.lg-prova { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }
.lg-prova > svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 1.7; flex-shrink: 0; }
.lg-prova b { display: block; font-size: 12.5px; font-weight: 700; }
.lg-prova small { display: block; font-size: 11px; color: rgba(255,255,255,.62); margin-top: 2px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COLUNA DIREITA — A ENTRADA
   ═══════════════════════════════════════════════════════════════════════════ */
.lg-acesso {
    position: relative;
    isolation: isolate;
    overflow: hidden;   /* a mancha do canto fica dentro da coluna */
    background: var(--surface);
    display: flex;
    flex-direction: column;
    padding: 20px 20px 28px;
    min-height: 100dvh;
}
@media (min-width: 1024px) { .lg-acesso { padding: 26px 40px 30px; } }

/* ── A MANCHA PESSEGO DO CANTO ──
   Ela vive numa CAMADA que a recorta, e nao solta dentro da coluna. O motivo e
   concreto e custou uma medicao: solta, com `bottom: -90px`, ela transbordava a
   coluna — e no instante em que a coluna ganhou `overflow-y: auto` para nao
   rolar a pagina inteira, esses 90px viraram barra de rolagem. Em TODA tela,
   sempre os mesmos 90px, que foi o que entregou a causa.

   Aqui a camada ocupa a coluna exata e recorta; a mancha desenhada dentro dela
   pode sair do quadro a vontade sem criar area rolavel nenhuma. */
.lg-mancha {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}
.lg-mancha::after {
    content: '';
    position: absolute;
    right: -70px; bottom: -90px;
    width: 340px; height: 340px;
    background: var(--pessego);
    border-radius: 47% 53% 39% 61% / 55% 42% 58% 45%;
}

.lg-conta { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.lg-conta span { font-size: 12.5px; color: var(--muted); }
.btn-demo {
    font-family: var(--font-d);
    font-size: 12.5px; font-weight: 700;
    color: var(--accent);
    border: 1.5px solid var(--accent);
    border-radius: 9px;
    padding: 9px 15px;
    text-decoration: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.btn-demo:hover { background: var(--accent); color: #fff; }

.lg-miolo { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 22px 0 14px; }
.lg-caixa { width: 100%; max-width: 396px; }

.lg-caixa > .lg-marca { display: block; font-size: 48px; text-align: center; margin: 0 auto 18px; }
/* O LOGO ENVIADO, quando existe — Configurações › Marca & Aparência, 18/09/2026.
   Ocupa o lugar do nome escrito, com a mesma folga embaixo. O teto de altura é o
   que impede um PNG de 600×600 de empurrar o formulário para fora da tela. */
.lg-caixa > .lg-marca-img { display: block; max-width: 260px; max-height: 76px;
    object-fit: contain; margin: 0 auto 18px; }
.lg-titulo { font-family: var(--font-d); font-size: 29px; font-weight: 800; letter-spacing: -.03em; text-align: center; line-height: 1.15; }
.lg-sub { font-size: 13.5px; line-height: 1.55; color: var(--muted); text-align: center; margin: 8px 0 22px; }

/* ── AVISOS ── */
.lg-alerta { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.5; padding: 12px 13px; border-radius: var(--r-md); margin-bottom: 18px; }
.lg-alerta svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; stroke: currentColor; fill: none; stroke-width: 2; }
.lg-alerta.erro  { color: var(--danger); background: rgba(220,38,38,.09); border: 1px solid rgba(220,38,38,.22); }
.lg-alerta.aviso { color: var(--aviso);  background: rgba(180,83,9,.09);  border: 1px solid rgba(180,83,9,.24); }
/* Verde para o que DEU CERTO - "mandamos o codigo". A tela so tinha erro e
   aviso, e um recado de sucesso em ambar diria a coisa errada. */
.lg-alerta.ok    { color: #0E7C66;       background: rgba(14,124,102,.09); border: 1px solid rgba(14,124,102,.24); }

/* ── CAMPOS ── */
.lg-campo { margin-bottom: 16px; }
.lg-campo > label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.lg-inp { position: relative; display: flex; align-items: center; }
.lg-inp > svg { position: absolute; left: 14px; width: 17px; height: 17px; stroke: var(--dim); fill: none; stroke-width: 1.8; pointer-events: none; transition: stroke .15s; }
.lg-inp input {
    width: 100%;
    font-family: var(--font-b);
    font-size: 15px;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--border-forte);
    border-radius: var(--r-md);
    padding: 14px 15px 14px 43px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.lg-inp input::placeholder { color: var(--dim); }
.lg-inp input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.lg-inp:focus-within > svg { stroke: var(--accent); }
.lg-olho {
    position: absolute; right: 6px;
    background: none; border: 0; cursor: pointer;
    padding: 9px; line-height: 0; border-radius: 8px; color: var(--dim);
}
.lg-olho:hover { color: var(--text); }
.lg-olho svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.lg-inp:has(.lg-olho) input { padding-right: 46px; }

/* ── O BOTAO ── */
.btn-entrar {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    font-family: var(--font-d); font-size: 15.5px; font-weight: 800;
    color: #fff; background: var(--accent);
    border: 0; border-radius: var(--r-md);
    min-height: 50px; padding: 0 18px;
    cursor: pointer;
    transition: background .15s, transform .08s;
}
.btn-entrar:hover { background: var(--accent-esc); }
.btn-entrar:active { transform: scale(.99); }
.btn-entrar svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.4; }

/* ── DIVISOR E OS QUE AINDA NAO EXISTEM ── */
.lg-ou { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; font-size: 11.5px; color: var(--dim); }
.lg-ou::before, .lg-ou::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.lg-social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lg-social button {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-b); font-size: 13px; font-weight: 600;
    color: var(--text); background: var(--surface);
    border: 1.5px solid var(--border); border-radius: var(--r-md);
    min-height: 46px; padding: 0 10px;
    position: relative;
}
.lg-social button svg { width: 17px; height: 17px; flex-shrink: 0; }
/* A marca `em breve` do catalogo: existe no desenho, nao existe no produto. */
.lg-social button[disabled] { opacity: .5; cursor: not-allowed; }
.lg-social em {
    position: absolute; top: -8px; right: 8px;
    font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: 20px; padding: 1px 6px;
}

/* ── RODAPE DO FORMULARIO ── */
.lg-ajuda { font-size: 12px; line-height: 1.55; color: var(--muted); text-align: center; margin-top: 15px; }
.lg-termos { font-size: 11.5px; line-height: 1.6; color: var(--dim); text-align: center; margin-top: 13px; }
.lg-termos a { color: var(--accent); text-decoration: none; font-weight: 600; }
.lg-termos a:hover { text-decoration: underline; }

.lg-pe { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.lg-voltar { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); text-decoration: none; }
.lg-voltar:hover { color: var(--text); }
.lg-voltar svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

.lg-temas { display: flex; background: var(--elevated); border: 1px solid var(--border); border-radius: 9px; padding: 2px; }
.lg-tema { background: none; border: 0; color: var(--muted); padding: 6px 9px; border-radius: 7px; cursor: pointer; line-height: 0; }
.lg-tema svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.lg-tema:hover { color: var(--text); }
.lg-tema.on { color: var(--accent); background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* O bilhete do pe, so onde ha espaco para ele respirar. */
.lg-assina { display: none; }
@media (min-width: 1024px) and (min-height: 760px) {
    .lg-assina {
        display: block;
        font-family: var(--font-m);
        font-size: 21px; line-height: 1.22;
        color: var(--accent);
        transform: rotate(-3deg);
        text-align: right;
        margin: 18px 4px 0 auto;
        max-width: 17ch;
    }
    .lg-assina svg { display: block; margin: 3px 0 0 auto; width: 92px; height: 10px; overflow: visible; }
}

/* ── NOTEBOOK BAIXO ──
   Em 1366x768, que ainda e a tela mais comum de escritorio, a coluna fica
   apertada e a prova social encostava nos beneficios. Aqui ela so respira
   menos: nada sai, porque o que sobrou ja e o essencial. */
@media (min-width: 1024px) and (max-height: 819px) {
    .lg-vitrine { padding: 30px 44px 26px; }
    .lg-h1 { font-size: 38px; }
    .lg-chamada { font-size: 14px; }
    .lg-benef { margin-top: 16px; }
    .lg-prova { margin-top: 14px; padding-top: 14px; }
}

/* ── O CELULAR ──
   O iOS da zoom em campo abaixo de 16px, e a pessoa tem de pincar de volta a
   cada campo. Alvo abaixo de 44px e dificil de acertar com o dedo. */
@media (max-width: 767px) {
    .lg-acesso { justify-content: flex-start; }
    .lg-mancha::after { width: 210px; height: 210px; right: -80px; bottom: -70px; }
    .lg-conta { justify-content: space-between; }
    .lg-caixa > .lg-marca { font-size: 42px; }
    .lg-titulo { font-size: 25px; }
    input, button, .btn-demo { font-size: 16px; }
    .lg-inp input { min-height: 48px; }
    button, .btn-entrar, .lg-social button { min-height: 48px; }
    .lg-social { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ── TELA BAIXA ──
   Em 1366x768 sobra pouco depois da barra do navegador. Aqui a coluna da direita
   encolhe o respiro em vez de ganhar barra de rolagem: a diferenca entre caber e
   rolar, numa tela de login, sao uns 60px de margem. */
@media (min-width: 1024px) and (max-height: 800px) {
    .lg-miolo { padding: 12px 0 8px; }
    .lg-caixa > .lg-marca { font-size: 40px; margin-bottom: 12px; }
    .lg-titulo { font-size: 25px; }
    .lg-sub { margin: 7px 0 16px; }
    .lg-campo { margin-bottom: 13px; }
    .lg-ou { margin: 14px 0 10px; }
    .lg-ajuda { margin-top: 12px; }
    .lg-termos { margin-top: 10px; }
    .lg-pe { margin-top: 14px; }
    .lg-assina { display: none; }
}