/*
 * Central NST - telas publicas no traco a mao (08/10/2026): Login, Rastreio e Portal do Cliente.
 * Mesma linguagem da pagina inicial (nst-traco.css): linhas serias nos formularios e cartoes,
 * tracos a mao (grifo, rabiscos, moldura, letra manuscrita) controlados pela aba Visual do Config. Site.
 * Textos e imagens vem do painel (site/includes/nst_publico.php).
 */
:root {
    --nst-navy: #0B1F3A;
    --nst-navy-2: #16325C;
    --nst-azul: #1D4ED8;
    --nst-azul-claro: #DBEAFE;
    --nst-ambar: #F59E0B;
    --nst-laranja: #E8572A;
    --nst-verde: #16A34A;
    --nst-texto: #1E293B;
    --nst-suave: #475569;
    --nst-linha: #E2E8F0;
    --nst-fundo: #F1F5F9;
    --nst-mao: 'Caveat', 'Segoe Print', cursive;
}
body.nst-pub { margin: 0; font-family: 'Open Sans', system-ui, sans-serif; color: var(--nst-texto); background: #fff; }
.nst-pub *, .nst-pub *::before, .nst-pub *::after { box-sizing: border-box; }
.nst-pub h1, .nst-pub h2, .nst-pub h3, .nst-pub h4, .nst-pub h5 { font-family: 'Montserrat', sans-serif; letter-spacing: -0.01em; }

/* ── marca (logo + nome) ─────────────────────────────────────────────── */
.nst-pub-marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.nst-pub-marca img { height: 44px; width: auto; }
.nst-marca { display: inline-flex; flex-direction: column; line-height: 1; }
.nst-marca b { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.02rem; color: var(--nst-navy); letter-spacing: .04em; }
.nst-marca i { font-family: var(--nst-mao); font-style: normal; font-weight: 700; font-size: 1.15rem; color: var(--nst-ambar); margin-top: 1px; }
.nst-pub-claro .nst-marca b { color: #fff; }

/* ── barra de cima das paginas publicas ──────────────────────────────── */
.nst-pub-topo { background: #fff; border-bottom: 1px solid var(--nst-linha); }
.nst-pub-topo .nst-pub-topo-in { max-width: 1200px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ── botao voltar ao site (no lugar da etiqueta vermelha) ────────────── */
.nst-pub-voltar {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px;
    border: 1.5px solid var(--nst-linha); background: #fff; color: var(--nst-navy); font-weight: 700; font-size: .88rem;
    text-decoration: none; transition: .2s ease; white-space: nowrap;
}
.nst-pub-voltar:hover { border-color: var(--nst-navy); color: var(--nst-navy); transform: translateX(-3px); }

/* ── faixa azul-marinho com rabiscos ─────────────────────────────────── */
.nst-pub-hero {
    position: relative; color: #fff; overflow: hidden;
    background-color: var(--nst-navy);
    background-image: url("../../loja/assets/traco/rabiscos.svg"), linear-gradient(135deg, var(--nst-navy-2) 0%, var(--nst-navy) 70%);
    background-size: 900px auto, cover; background-repeat: repeat, no-repeat;
}
.nst-pub-selo {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
    background: var(--nst-ambar); color: var(--nst-navy); font-weight: 800; font-size: .78rem; letter-spacing: .06em;
    transform: rotate(-2deg); box-shadow: 2px 3px 0 rgba(0, 0, 0, .18);
}
.nst-pub-titulo { font-weight: 800; line-height: 1.12; margin: 14px 0 10px; }
.nst-pub-titulo::after {
    content: ""; display: block; width: min(300px, 60%); height: 18px; margin-top: 8px;
    background: url("../../loja/assets/traco/grifo.svg") no-repeat left center / contain;
}
.nst-pub-titulo em { font-style: normal; color: var(--nst-ambar); }
.nst-pub-sub { color: rgba(255, 255, 255, .85); font-size: 1.08rem; line-height: 1.6; max-width: 560px; }
.nst-pub-desenho { pointer-events: none; }
.nst-pub-desenho img, .nst-pub-desenho .nst-svg { width: 100%; height: auto; display: block; }

/* ── cartoes: linha seria + moldura a mao no hover ───────────────────── */
.nst-pub-card {
    position: relative; background: #fff; border: 1px solid var(--nst-linha); border-radius: 18px;
    box-shadow: 0 10px 30px rgba(11, 31, 58, .10); color: var(--nst-texto);
}
.nst-pub-card-mao::after {
    content: ""; position: absolute; inset: -7px; pointer-events: none; border: 2px solid var(--nst-ambar);
    border-radius: 22px 14px 24px 12px / 14px 24px 12px 22px; transform: rotate(-.7deg); opacity: .9;
}
.nst-pub-card h2, .nst-pub-card h3 { color: var(--nst-navy); }
.nst-pub-sec-titulo { font-weight: 800; color: var(--nst-navy); }
.nst-pub-sec-titulo::after {
    content: ""; display: block; width: 140px; height: 13px; margin: 8px auto 0;
    background: url("../../loja/assets/traco/grifo.svg") no-repeat center / contain;
}
.nst-pub-passo { position: relative; transition: transform .2s ease; }
.nst-pub-passo::after {
    content: ""; position: absolute; inset: -6px; pointer-events: none; border: 2px solid var(--nst-navy);
    border-radius: 20px 12px 22px 12px / 12px 22px 12px 20px; opacity: 0; transform: rotate(.7deg); transition: .25s ease;
}
.nst-pub-passo:hover { transform: translateY(-4px); }
.nst-pub-passo:hover::after { opacity: .5; }
.nst-pub-num { font-family: var(--nst-mao); font-weight: 700; font-size: 2rem; color: var(--nst-ambar); line-height: 1; }

/* ── campos e botoes ─────────────────────────────────────────────────── */
.nst-pub-rotulo { display: block; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--nst-suave); margin-bottom: 6px; }
.nst-pub-campo { position: relative; margin-bottom: 14px; }
.nst-pub-campo > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #94A3B8; pointer-events: none; }
.nst-pub-campo input, .nst-pub-input {
    width: 100%; height: 54px; padding: 0 16px 0 44px; border: 1.5px solid #CBD5E1; border-radius: 12px;
    background: #F8FAFC; font-size: 1rem; color: var(--nst-texto); transition: .2s ease; outline: none;
}
.nst-pub-input { padding-left: 16px; }
.nst-pub-campo input:focus, .nst-pub-input:focus { border-color: var(--nst-azul); background: #fff; box-shadow: 0 0 0 4px rgba(29, 78, 216, .12); }
.nst-pub-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px;
    border: 0; border-radius: 12px; background: var(--nst-navy); color: #fff; font-family: 'Montserrat', sans-serif;
    font-weight: 800; letter-spacing: .03em; font-size: 1rem; transition: .2s ease; cursor: pointer; text-decoration: none;
}
.nst-pub-btn:hover { background: var(--nst-azul); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(29, 78, 216, .25); }
.nst-pub-btn:disabled { background: #94A3B8; transform: none; box-shadow: none; cursor: not-allowed; }
.nst-pub-btn-ambar { background: var(--nst-ambar); color: var(--nst-navy); }
.nst-pub-btn-ambar:hover { background: #FBBF24; color: var(--nst-navy); }
.nst-pub-btn::after {
    content: ""; width: 24px; height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14'%3E%3Cpath d='M1 8 Q9 5 17 7 T24 6 M18 1 L24 6 L18 12' fill='none' stroke='%23F59E0B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.nst-pub-btn-ambar::after, .nst-pub-btn.sem-seta::after { display: none; }
.nst-pub-aviso { border-radius: 12px; padding: 12px 16px; font-weight: 600; font-size: .92rem; display: flex; gap: 10px; align-items: flex-start; }
.nst-pub-aviso.erro { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.nst-pub-aviso.ok { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }
.nst-pub-aviso.info { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }

/* ── rodape ──────────────────────────────────────────────────────────── */
.nst-pub-rodape { background: var(--nst-navy); color: rgba(255, 255, 255, .75); text-align: center; padding: 26px 16px; font-size: .88rem; position: relative; }
.nst-pub-rodape::before { content: ""; position: absolute; left: 50%; top: 10px; width: 140px; height: 12px; transform: translateX(-50%); background: url("../../loja/assets/traco/grifo.svg") no-repeat center / contain; opacity: .8; }
.nst-pub-rodape a { color: #fff; text-decoration: none; font-weight: 600; }
.nst-pub-rodape a:hover { color: var(--nst-ambar); }

/* ── LOGIN ───────────────────────────────────────────────────────────── */
.nst-login { display: flex; min-height: 100vh; min-height: 100dvh; }
.nst-login-arte { flex: 0 0 56%; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px, 4vw, 56px); }
.nst-login-arte .nst-pub-desenho { max-width: 520px; width: 78%; margin: 3vh auto; }
.nst-login-etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.nst-login-etiquetas span { padding: 6px 14px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .45); font-weight: 700; font-size: .8rem; letter-spacing: .04em; }
.nst-login-arte h2 { font-weight: 800; font-size: clamp(1.5rem, 2.3vw, 2.3rem); margin: 0 0 8px; }
.nst-login-arte p { color: rgba(255, 255, 255, .85); margin: 0; line-height: 1.55; max-width: 520px; }
.nst-login-form { flex: 1 1 auto; display: flex; flex-direction: column; padding: clamp(16px, 3vh, 36px) clamp(22px, 5vw, 80px); background: #fff; overflow-y: auto; }
.nst-login-topo { display: flex; justify-content: flex-end; min-height: 42px; }
.nst-login-caixa { width: 100%; max-width: 420px; margin: auto; padding: 20px 0; }
.nst-login-caixa .nst-pub-marca { display: flex; justify-content: center; margin-bottom: 14px; }
.nst-login-caixa .nst-pub-marca img { height: 64px; }
.nst-login-caixa h1 { text-align: center; font-weight: 800; font-size: clamp(1.4rem, 2.6vh, 1.8rem); color: var(--nst-navy); margin: 6px 0 4px; }
.nst-login-caixa h1::after { content: ""; display: block; width: 120px; height: 12px; margin: 6px auto 0; background: url("../../loja/assets/traco/grifo.svg") no-repeat center / contain; }
.nst-login-instrucao { text-align: center; color: var(--nst-suave); margin: 0 0 22px; }
.nst-login-msg { margin-top: 16px; text-align: center; font-family: var(--nst-mao); font-size: 1.35rem; color: var(--nst-azul); }
.nst-login-rodape { margin-top: 28px; padding-top: 14px; border-top: 1px dashed #CBD5E1; text-align: center; font-size: .8rem; color: #94A3B8; }
.nst-login-rodape b { display: block; color: var(--nst-suave); font-size: .85rem; margin-bottom: 2px; }
@media (max-width: 991.98px) { .nst-login-arte { display: none; } .nst-login-form { padding: 12px 20px 20px; } }

/* tela "para onde voce quer ir?" */
.nst-escolher { min-height: 100vh; display: grid; place-items: center; padding: 24px; text-align: center; }
.nst-escolher .op { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.nst-escolher a.cartao { display: block; min-width: 220px; padding: 26px 30px; border-radius: 18px; background: rgba(255, 255, 255, .07); border: 1.5px solid rgba(255, 255, 255, .25); color: #fff; text-decoration: none; transition: .2s ease; }
.nst-escolher a.cartao:hover { border-color: var(--nst-ambar); transform: translateY(-3px); }
.nst-escolher a.cartao i { font-size: 1.8rem; color: var(--nst-ambar); display: block; margin-bottom: 12px; }
.nst-escolher a.cartao strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 1.05rem; margin-bottom: 4px; }
.nst-escolher a.cartao span { font-size: .85rem; color: rgba(255, 255, 255, .8); }
.nst-escolher a.sair { display: inline-block; margin-top: 26px; color: rgba(255, 255, 255, .7); font-size: .85rem; text-decoration: none; border-bottom: 1px dotted currentColor; }

/* ── botao voltar ao topo (o mesmo da pagina inicial) ────────────────── */
.nst-pub-subir {
    position: fixed; right: 30px; bottom: 30px; z-index: 999; width: 50px; height: 50px; border: 0; border-radius: 50%;
    background: var(--nst-navy); color: #fff; font-size: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, .3);
    display: none; place-items: center; cursor: pointer; transition: background .3s, transform .3s;
}
.nst-pub-subir.mostra { display: grid; }
.nst-pub-subir:hover { background: var(--nst-azul); transform: translateY(-5px); }
.nst-pub-subir.acima { right: 21px; bottom: 90px; }   /* no rastreio, acima do botao do WhatsApp */

/* ── interruptores da aba Visual (classes no <body>) ─────────────────── */
.nst-sem-grifo .nst-pub-titulo::after, .nst-sem-grifo .nst-pub-sec-titulo::after, .nst-sem-grifo .nst-login-caixa h1::after,
.nst-sem-grifo .nst-pub-rodape::before { display: none; }
.nst-sem-rabiscos .nst-pub-hero { background-image: linear-gradient(135deg, var(--nst-navy-2) 0%, var(--nst-navy) 70%); }
.nst-pub-hero.nst-malha-on { background-image: linear-gradient(135deg, var(--nst-navy-2) 0%, var(--nst-navy) 70%); }   /* malha de tracos, #1071 */
.nst-sem-manuscrito .nst-marca i, .nst-sem-manuscrito .nst-pub-num, .nst-sem-manuscrito .nst-login-msg { font-family: 'Montserrat', sans-serif; font-size: 1rem; }
.nst-sem-molduras .nst-pub-card-mao::after, .nst-sem-molduras .nst-pub-passo::after { display: none; }
.nst-sem-molduras .nst-pub-passo:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
    .nst-pub-btn, .nst-pub-voltar, .nst-pub-passo, .nst-pub-passo::after { transition: none !important; }
    .nst-pub-btn:hover, .nst-pub-passo:hover { transform: none; }
}