/* Área do Cliente — mesma linguagem do site asapataria.com.br (ônix + ouro + marfim).
   Só vale na tela pública (body.sp-pagina-publica); o painel da equipe não muda. */
body.sp-pagina-publica {
    --pub-onix: #0f0d0b;
    --pub-onix-2: #191512;
    --pub-ouro: #c2a05a;
    --pub-ouro-claro: #e2cd97;
    --pub-claro: #ebe4d7;
    --pub-claro-2: #a99d8c;
    --pub-fio: rgba(194, 160, 90, .35);
    background:
        radial-gradient(ellipse 70% 50% at 50% 20%, rgba(194, 160, 90, .12), transparent 70%),
        linear-gradient(180deg, var(--pub-onix), var(--pub-onix-2));
    background-attachment: fixed;
    color: var(--pub-claro);
    font-variant-numeric: lining-nums;
}

#sp-login.sp-publico {
    max-width: 560px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 32px 16px 24px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    font: 300 16px/1.6 "Jost", system-ui, sans-serif;
    color: var(--pub-claro);
}

.sp-pub-moldura {
    position: relative;
    padding: 40px 32px 32px;
    border: 1px solid var(--pub-fio);
    text-align: center;
}
.sp-pub-moldura::before {
    content: ""; position: absolute; inset: 6px;
    border: 1px solid rgba(194, 160, 90, .12); pointer-events: none;
}

.sp-pub-marca {
    position: relative;
    display: inline-block;
    font: 600 1.7rem/1 "Cinzel", Georgia, serif;
    letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
    color: transparent;
    background: linear-gradient(180deg, #f0dfae 0%, var(--pub-ouro) 45%, #9c7c3a 100%);
    -webkit-background-clip: text; background-clip: text;
}

.sp-pub-filete { display: flex; align-items: center; gap: 12px; width: 180px; margin: 14px auto 26px; }
.sp-pub-filete span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--pub-ouro)); }
.sp-pub-filete span:last-child { background: linear-gradient(90deg, var(--pub-ouro), transparent); }
.sp-pub-filete i { width: 6px; height: 6px; background: var(--pub-ouro); transform: rotate(45deg); }

.sp-pub-painel { position: relative; }
.sp-pub-painel[hidden] { display: none; }

.sp-pub-sobre {
    margin: 0 0 10px;
    font-size: .72rem; letter-spacing: .32em; text-transform: uppercase; color: var(--pub-ouro);
}
.sp-pub-titulo {
    margin: 0 0 12px;
    font: 500 2.1rem/1.1 "Cormorant Garamond", Garamond, serif; color: #fff;
}
.sp-pub-titulo em { font-style: italic; color: var(--pub-ouro-claro); }
.sp-pub-texto { margin: 0 auto 24px; max-width: 26em; color: var(--pub-claro-2); font-size: .95rem; }

/* Formulário de consulta */
.sp-pub-form { display: grid; gap: 18px; text-align: left; }
.sp-pub-form[hidden] { display: none; }
.sp-pub-form label {
    display: grid; gap: 4px;
    font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--pub-ouro);
}
.sp-pub-form input {
    width: 100%; margin: 0;
    padding: .6em 0;
    font: 300 1.1rem/1.4 "Jost", system-ui, sans-serif; letter-spacing: normal; text-transform: none;
    color: var(--pub-claro); background: transparent;
    border: 0; border-bottom: 1px solid rgba(194, 160, 90, .4); border-radius: 0;
}
.sp-pub-form input:focus { outline: none; border-bottom-color: var(--pub-ouro); }

.sp-pub-btn,
#sp-login.sp-publico #sp-btn-login {
    display: block; width: 100%; margin: 6px 0 0;
    padding: 1em 1.4em;
    font: 400 .8rem/1 "Jost", system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase;
    color: var(--pub-onix); background: var(--pub-ouro);
    border: 1px solid var(--pub-ouro); border-radius: 0; cursor: pointer;
    transition: background .2s;
}
.sp-pub-btn:hover,
#sp-login.sp-publico #sp-btn-login:hover { background: var(--pub-ouro-claro); }
.sp-pub-btn:disabled { opacity: .6; cursor: wait; }

.sp-pub-erro,
#sp-login.sp-publico .sp-erro { min-height: 1.2em; margin: 0; color: #e39b7f; font-size: .9rem; text-align: center; }

.sp-pub-link {
    display: inline-block; margin: 26px 0 0; padding: 4px 0;
    font: 400 .72rem/1 "Jost", system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase;
    color: var(--pub-claro-2); background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer;
}
.sp-pub-link:hover { color: var(--pub-ouro-claro); border-bottom-color: var(--pub-ouro); }

/* Login da equipe — reaproveita os IDs do app.js, só muda a pele */
#sp-login.sp-publico .sp-login-box {
    max-width: none; margin: 8px 0 0; padding: 0;
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
}
#sp-login.sp-publico .sp-login-box input {
    margin: 0 0 16px; padding: .7em 0;
    font: 300 1.05rem/1.4 "Jost", system-ui, sans-serif;
    color: var(--pub-claro); background: transparent;
    border: 0; border-bottom: 1px solid rgba(194, 160, 90, .4); border-radius: 0; box-shadow: none;
}
#sp-login.sp-publico .sp-login-box input:focus { border-bottom-color: var(--pub-ouro); }
#sp-login.sp-publico .sp-login-box input::placeholder { color: #7a7065; }
#sp-login.sp-publico .sp-toggle-senha { filter: grayscale(1) brightness(1.6); }

/* Resultado */
#sp-consulta-resultado[hidden] { display: none; }
.sp-pub-comanda {
    margin: 8px 0 0; padding: 20px 0 0;
    border-top: 1px solid var(--pub-fio); text-align: left;
}
.sp-pub-comanda + .sp-pub-comanda { margin-top: 24px; }
.sp-pub-comanda header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.sp-pub-num { font: 600 1.15rem/1.2 "Cinzel", Georgia, serif; letter-spacing: .06em; color: var(--pub-ouro); }
.sp-pub-ola { font: italic 400 1.35rem/1.2 "Cormorant Garamond", serif; color: #fff; }
.sp-pub-datas { display: flex; flex-wrap: wrap; gap: 24px; margin: 14px 0 0; }
.sp-pub-datas dt { margin: 0; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--pub-claro-2); }
.sp-pub-datas dd { margin: 2px 0 0; font: 400 1.2rem/1.3 "Cormorant Garamond", serif; color: var(--pub-claro); }
.sp-pub-desc { margin: 14px 0 0; color: var(--pub-claro); }
.sp-pub-sub {
    margin: 22px 0 10px;
    font: 400 .7rem/1 "Jost", system-ui, sans-serif; letter-spacing: .26em; text-transform: uppercase; color: var(--pub-ouro);
}
.sp-pub-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.sp-pub-fotos a { display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(194, 160, 90, .25); }
.sp-pub-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.sp-pub-fotos a:hover img { transform: scale(1.04); }

.sp-pub-rodape {
    margin: 18px 0 0; text-align: center;
    font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: #6f665b;
}

@media (max-width: 520px) {
    .sp-pub-moldura { padding: 32px 20px 24px; }
    .sp-pub-titulo { font-size: 1.8rem; }
    .sp-pub-marca { font-size: 1.4rem; }
}