/* ============================================================
   IDENTIDADE VISUAL DA SMART CLEAN (site) — 10/2026
   A mesma do app (app-nativo/src/ui/tema.ts): fundo cor de papel, tinta azul-marinho,
   o verde-limão da logo como destaque e o degradê da logo só no botão principal.
   Títulos em Fraunces (serifa), o resto em Manrope. As fontes vêm do nosso servidor
   (sem Google Fonts): funcionam igual em qualquer rede e não mandam visita a terceiros.

   Todo módulo carrega este arquivo ANTES do próprio CSS e usa as variáveis --sc-*.
   Ícones ilustrados: /shared/assets/img/icones/<nome>.webp (os mesmos do app).
   ============================================================ */

@font-face { font-family: 'Fraunces'; src: url('../fonts/Fraunces_600SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/Fraunces_700Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/Manrope_400Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/Manrope_500Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/Manrope_600SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/Manrope_700Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/Manrope_800ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
    --sc-papel: #F6F4EE;
    --sc-cartao: #FFFEFB;
    --sc-tinta: #101828;
    --sc-tinta-2: #4A5466;
    --sc-tinta-3: #737B8A;
    --sc-linha: #E6E1D5;
    --sc-linha-forte: #D6CFBF;
    --sc-marca: #B4CC0A;
    --sc-marca-esc: #6E8A05;
    --sc-marca-clara: #F1F5D8;

    /* um tom por assunto, sempre os mesmos do app */
    --sc-areia: #EFE8D8;
    --sc-salvia: #E3ECD9;
    --sc-nevoa: #E2EAF2;
    --sc-lavanda: #ECE6F1;
    --sc-pessego: #F6E6DA;

    --sc-ok: #2E7D32;      --sc-ok-bg: #E3F1DE;
    --sc-alerta: #9A5B06;  --sc-alerta-bg: #FBEFD5;
    --sc-erro: #B42318;    --sc-erro-bg: #FBE4E1;
    --sc-info: #1E4E8C;    --sc-info-bg: #E2EAF2;

    --sc-degrade: linear-gradient(100deg, #DDE330 0%, #A9D23F 55%, #6FBF5C 100%);
    --sc-sombra: 0 6px 18px rgba(16, 24, 40, .10);
    --sc-sombra-leve: 0 2px 8px rgba(16, 24, 40, .06);
    --sc-anel: 0 0 0 4px rgba(180, 204, 10, .28);

    --sc-fonte: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --sc-fonte-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* Peças comuns (opcionais: o módulo usa quando quiser) */
.sc-titulo { font-family: var(--sc-fonte-titulo); font-weight: 600; letter-spacing: -.01em; color: var(--sc-tinta); }

.sc-botao-principal {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 0 22px; border: 0; border-radius: 14px;
    background: var(--sc-degrade); color: var(--sc-tinta);
    font: 800 15px/1 var(--sc-fonte); cursor: pointer;
    box-shadow: var(--sc-sombra); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.sc-botao-principal:hover { filter: saturate(1.08) brightness(1.02); box-shadow: 0 10px 24px rgba(16, 24, 40, .14); transform: translateY(-1px); }
.sc-botao-principal:active { transform: translateY(0); }
.sc-botao-principal:focus-visible { outline: none; box-shadow: var(--sc-anel), var(--sc-sombra); }
.sc-botao-principal:disabled { opacity: .55; cursor: not-allowed; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
    .sc-botao-principal { transition: none; }
}

/* ------------------------------------------------------------
   Entrada dos módulos com login próprio (RH, Financeiro, Estoque, CRM)
   A mesma da entrada do Hub. "html body" vence o .login-overlay de cada módulo
   sem depender da ordem dos arquivos (este carrega ANTES do CSS do módulo).
   A entrada do Hub não tem a classe .login-overlay, então não é tocada.
   ------------------------------------------------------------ */
html body .login-overlay {
    background:
        linear-gradient(180deg, rgba(246,244,238,.06) 0%, rgba(246,244,238,.35) 55%, var(--sc-papel) 96%) center top / 100% calc(92vw + 4px) no-repeat,
        url('/shared/assets/img/marca/topo-corredor.jpg') center top / 100% 92vw no-repeat,
        var(--sc-papel);
    font-family: var(--sc-fonte);
}
html body .login-overlay::before { display: none; }
html body .login-overlay .login-box {
    background: var(--sc-cartao);
    border: 1px solid var(--sc-linha);
    border-radius: 26px;
    box-shadow: 0 18px 50px rgba(16, 24, 40, .12);
    padding: 36px 32px;
    color: var(--sc-tinta);
}
html body .login-overlay .login-logo,
html body .login-overlay .login-logo img { max-width: 180px; margin-left: auto; margin-right: auto; }
html body .login-overlay .login-logo { margin-bottom: 18px; }
html body .login-overlay .sc-login-titulo {
    font-family: var(--sc-fonte-titulo); font-weight: 600; letter-spacing: -.01em;
    font-size: 1.9rem; line-height: 1.15; color: var(--sc-tinta);
    text-align: center; margin: 0 0 6px;
}
html body .login-overlay .sc-login-sub {
    color: var(--sc-tinta-2); font-size: .95rem; text-align: center; margin: 0 0 22px;
}
html body .login-overlay .login-box label {
    display: block; color: var(--sc-tinta-2); font-weight: 600; font-size: .88rem;
    letter-spacing: 0; text-transform: none; margin-bottom: 6px;
}
html body .login-overlay .login-box label i { display: none; }
html body .login-overlay .login-box input[type=text],
html body .login-overlay .login-box input[type=password] {
    width: 100%; box-sizing: border-box;
    background: #FFFFFF; border: 1px solid var(--sc-linha-forte); border-radius: 14px;
    min-height: 52px; padding: 0 16px; font: 500 16px/1.2 var(--sc-fonte); color: var(--sc-tinta);
}
html body .login-overlay .login-box input:focus { border-color: var(--sc-marca); box-shadow: var(--sc-anel); outline: none; }
html body .login-overlay .login-box button[type=submit] {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--sc-degrade); color: var(--sc-tinta); border: 0; border-radius: 14px;
    min-height: 52px; font: 800 1rem/1 var(--sc-fonte); letter-spacing: 0;
    box-shadow: var(--sc-sombra); cursor: pointer; margin-top: 6px;
}
html body .login-overlay .login-box button[type=submit]:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(16, 24, 40, .14); filter: saturate(1.08); background: var(--sc-degrade); color: var(--sc-tinta); }
html body .login-overlay .login-box button[type=submit]:focus-visible { outline: none; box-shadow: var(--sc-anel), var(--sc-sombra); }
html body .login-overlay .login-box button[type=submit] i { display: none; }
html body .login-overlay .login-error {
    background: var(--sc-erro-bg); color: var(--sc-erro); border: 0; border-radius: 12px;
    padding: 12px 14px; font-size: .9rem;
}

/* Computador: a foto à esquerda e o formulário à direita, no papel (igual ao Hub) */
@media (min-width: 960px) {
    html body .login-overlay {
        background: var(--sc-papel);
        justify-content: flex-end;
        padding-right: max(7vw, 56px);
    }
    html body .login-overlay::before {
        display: block; content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 58%;
        background:
            linear-gradient(90deg, rgba(246,244,238,0) 55%, var(--sc-papel) 100%),
            url('/shared/assets/img/marca/topo-corredor-largo.jpg') 30% center / cover no-repeat;
        pointer-events: none;
    }
    html body .login-overlay .login-box { position: relative; width: 420px; max-width: 420px; padding: 44px 40px; }
}