/* =====================================================================
   PLATAFORMA v2 - Design System
   ---------------------------------------------------------------------
   1. Tokens          6. Formularios
   2. Reset/base      7. Tabelas
   3. Tipografia      8. Feedback (badges, toasts, vazio)
   4. Layout          9. Telas (auth, landing, catalogo, pedido, painel)
   5. Botoes         10. Utilitarios
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
:root {
    color-scheme: light;

    /* Marca - indigo/violeta */
    --marca-50:  #efedfb;
    --marca-100: #dedaf6;
    --marca-200: #c1baee;
    --marca-300: #9f94e4;
    --marca-400: #7c6ed8;
    --marca-500: #5f4fcb;
    --marca-600: #4a3aa7;
    --marca-700: #3c2f87;
    --marca-800: #2e2466;
    --marca-900: #1f1846;

    /* Neutros frios */
    --cinza-0:   #ffffff;
    --cinza-25:  #fafbfd;
    --cinza-50:  #f4f6fa;
    --cinza-100: #eaedf3;
    --cinza-200: #dde1ea;
    --cinza-300: #c3cad8;
    --cinza-400: #94a0b5;
    --cinza-500: #6b788f;
    --cinza-600: #4e5a70;
    --cinza-700: #3a4356;
    --cinza-800: #252c3b;
    --cinza-900: #161b26;
    --cinza-950: #0d1017;

    /* Papeis semanticos */
    --fundo:        #e6eaf2;
    --superficie:   #ffffff;
    --superficie-2: #fafbfd;
    --superficie-3: #f0f3f8;
    --borda:        #dce2ec;
    --borda-forte:  #c6cede;

    --tinta:        #161b26;
    --tinta-2:      #4e5a70;
    --tinta-3:      #6b788f;
    --tinta-suave:  #94a0b5;

    --primaria:        #4a3aa7;
    --primaria-hover:  #3c2f87;
    --primaria-suave:  #efedfb;
    --primaria-tinta:  #3c2f87;
    --sobre-primaria:  #ffffff;

    /* Estado */
    --ok:        #0ca30c;
    --ok-tinta:  #04660b;
    --ok-suave:  #e4f6e4;
    --alerta:       #b26a00;
    --alerta-tinta: #8a5200;
    --alerta-suave: #fdf1dc;
    --erro:        #d03b3b;
    --erro-tinta:  #a72a2a;
    --erro-suave:  #fdeaea;
    --info:        #2a78d6;
    --info-tinta:  #1c5cab;
    --info-suave:  #e6f0fd;

    /* Series de graficos (paleta validada) */
    --serie-1: #2a78d6;
    --serie-2: #eb6834;
    --serie-3: #1baf7a;
    --serie-4: #7c5cd6;
    --serie-5: #d1497f;
    --serie-6: #0f95a8;
    --serie-7: #bf8a00;
    --serie-8: #8792a8;
    --grade:   #e1e5ee;
    --eixo:    #c3cad8;

    /* ---------------------------------------------------------------
       Cores dos status de pedido.
       Sequencia validada nos pares adjacentes da ordem em que aparecem
       na interface (amarelo > azul > agua > laranja > violeta > verde >
       vermelho). Nao reaproveitar as cores de UI (--ok, --erro...):
       aquelas sao calibradas para contraste de texto, nao para
       separacao entre categorias.
       O par verde/vermelho fica na faixa limite para deuteranopia, por
       isso toda amostra vem sempre com icone + rotulo ao lado.
       --------------------------------------------------------------- */
    --st-aprovacao:  #e87ba4;
    --st-aguardando: #eda100;
    --st-cotado:     #2a78d6;
    --st-aprovado:   #1baf7a;
    --st-separacao:  #eb6834;
    --st-transito:   #4a3aa7;
    --st-entregue:   #008300;
    --st-recusado:   #e34948;
    --st-cancelado:  #94a0b5;

    /* Formas */
    --r-xs: 6px;
    --r-sm: 9px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-full: 999px;

    /* Elevacao - suave e em camadas */
    --sombra-1: 0 1px 2px rgba(22, 27, 38, .05), 0 1px 1px rgba(22, 27, 38, .04);
    --sombra-2: 0 2px 4px rgba(22, 27, 38, .05), 0 6px 16px -6px rgba(22, 27, 38, .10);
    --sombra-3: 0 8px 24px -8px rgba(22, 27, 38, .16), 0 24px 48px -24px rgba(22, 27, 38, .18);
    --anel: 0 0 0 3px rgba(74, 58, 167, .18);

    /* Medidas */
    --barra-lateral: 264px;
    --barra-lateral-min: 76px;
    --topo: 64px;
    --largura-max: 1400px;

    --fonte: "Inter", "Inter var", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fonte-mono: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, monospace;

    --transicao: 160ms cubic-bezier(.4, 0, .2, 1);
}

html[data-tema="escuro"] {
    color-scheme: dark;

    --fundo:        #0d1017;
    --superficie:   #161b26;
    --superficie-2: #1b2130;
    --superficie-3: #222939;
    --borda:        #29313f;
    --borda-forte:  #3a4356;

    --tinta:        #f2f4f8;
    --tinta-2:      #b9c2d1;
    --tinta-3:      #8e9aae;
    --tinta-suave:  #6b788f;

    --primaria:        #7c6ed8;
    --primaria-hover:  #9f94e4;
    --primaria-suave:  #241f47;
    --primaria-tinta:  #c1baee;
    --sobre-primaria:  #14101f;

    --ok:        #35c04a;
    --ok-tinta:  #7fe08d;
    --ok-suave:  #13301a;
    --alerta:       #e0a02c;
    --alerta-tinta: #f2c15f;
    --alerta-suave: #33260e;
    --erro:        #f06a6a;
    --erro-tinta:  #ff9c9c;
    --erro-suave:  #38191c;
    --info:        #4d93e8;
    --info-tinta:  #8bbaf2;
    --info-suave:  #14243c;

    --serie-1: #3987e5;
    --serie-2: #d95926;
    --serie-3: #199e70;
    --serie-4: #9085e9;
    --serie-5: #d55181;
    --serie-6: #2f9fb2;
    --serie-7: #c98500;
    --serie-8: #7c879b;
    --grade:   #262d3b;
    --eixo:    #3a4356;

    /* Mesmos matizes, degraus escolhidos para a superficie escura */
    --st-aprovacao:  #d55181;
    --st-aguardando: #c98500;
    --st-cotado:     #3987e5;
    --st-aprovado:   #199e70;
    --st-separacao:  #d95926;
    --st-transito:   #9085e9;
    --st-entregue:   #008300;
    --st-recusado:   #e66767;
    --st-cancelado:  #6b788f;

    --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra-2: 0 2px 6px rgba(0, 0, 0, .38), 0 10px 24px -10px rgba(0, 0, 0, .5);
    --sombra-3: 0 12px 32px -12px rgba(0, 0, 0, .6), 0 30px 60px -30px rgba(0, 0, 0, .7);
    --anel: 0 0 0 3px rgba(124, 110, 216, .3);
}

/* ---------------------------------------------------------------------
   2. RESET / BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: var(--fonte);
    font-size: 15px;
    line-height: 1.55;
    color: var(--tinta);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}

img, svg, video { display: block; max-width: 100%; }
svg.ico { flex: none; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
    outline: 2px solid var(--primaria);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

::selection { background: var(--marca-200); color: var(--marca-900); }
html[data-tema="escuro"] ::selection { background: var(--marca-700); color: #fff; }

/* Barras de rolagem discretas */
* { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: var(--r-full); border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------------
   3. TIPOGRAFIA
   --------------------------------------------------------------------- */
h1, h2, h3, h4, h5 { line-height: 1.2; font-weight: 650; letter-spacing: -.018em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.06rem; }
h4 { font-size: .95rem; }

.titulo-xl { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; }
.titulo-secao { font-size: 1.15rem; font-weight: 650; letter-spacing: -.02em; }

.rotulo {
    font-size: .69rem;
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-3);
}

.sub { color: var(--tinta-2); font-size: .875rem; }
.mini { color: var(--tinta-3); font-size: .8rem; }
.mono { font-family: var(--fonte-mono); font-size: .82em; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linhas-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------------------------------------------------------------------
   4. LAYOUT
   --------------------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }

/* --- Barra lateral --- */
.lateral {
    width: var(--barra-lateral);
    flex: none;
    background: var(--superficie);
    border-right: 1px solid var(--borda);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 40;
    transition: width var(--transicao);
}

.lateral__marca {
    height: var(--topo);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    flex: none;
    border-bottom: 1px solid var(--borda);
}

.logo {
    width: 34px; height: 34px;
    flex: none;
    border-radius: 10px;
    background: linear-gradient(140deg, var(--marca-500), var(--marca-700) 60%, var(--marca-800));
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 8px -2px rgba(74, 58, 167, .55);
}

.logo__texto { display: flex; flex-direction: column; line-height: 1.1; overflow: hidden; }
.logo__texto b { font-size: .98rem; font-weight: 650; letter-spacing: -.02em; }
.logo__texto span { font-size: .68rem; color: var(--tinta-3); white-space: nowrap; }

.lateral__nav { flex: 1; overflow-y: auto; padding: 14px 12px 20px; }
.nav-grupo + .nav-grupo { margin-top: 18px; }
.nav-grupo__titulo { padding: 0 10px 8px; font-size: .67rem; font-weight: 650; letter-spacing: .11em; text-transform: uppercase; color: var(--tinta-suave); }

.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: var(--r-sm);
    color: var(--tinta-2);
    font-size: .885rem;
    font-weight: 500;
    position: relative;
    transition: background var(--transicao), color var(--transicao);
}
.nav-item + .nav-item { margin-top: 2px; }
.nav-item:hover { background: var(--superficie-3); color: var(--tinta); }
.nav-item.ativo { background: var(--primaria-suave); color: var(--primaria-tinta); font-weight: 600; }
.nav-item.ativo::before {
    content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--primaria);
}
.nav-item__contador {
    margin-left: auto;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: var(--r-full);
    background: var(--superficie-3);
    color: var(--tinta-2);
    font-size: .7rem; font-weight: 650;
    display: grid; place-items: center;
    font-variant-numeric: tabular-nums;
}
.nav-item.ativo .nav-item__contador { background: var(--primaria); color: var(--sobre-primaria); }

.lateral__rodape { flex: none; padding: 12px; border-top: 1px solid var(--borda); }

/* Modo compacto (so icones) */
.app.compacta .lateral { width: var(--barra-lateral-min); }
.app.compacta .logo__texto,
.app.compacta .nav-item span,
.app.compacta .nav-grupo__titulo,
.app.compacta .nav-item__contador,
.app.compacta .cartao-usuario__dados { display: none; }
.app.compacta .nav-item { justify-content: center; padding: 10px; }
.app.compacta .lateral__marca { justify-content: center; padding: 0; }

/* --- Area principal --- */
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topo {
    height: var(--topo);
    flex: none;
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 22px;
    background: color-mix(in srgb, var(--superficie) 93%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--borda);
}

.topo__titulo { font-size: 1rem; font-weight: 650; letter-spacing: -.02em; }
.topo__acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.conteudo { flex: 1; padding: 24px 22px 56px; width: 100%; max-width: var(--largura-max); margin: 0 auto; }
.conteudo--estreito { max-width: 900px; }

.cabecalho-pagina {
    display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
    margin-bottom: 22px;
}
.cabecalho-pagina__texto { min-width: 0; flex: 1; }
.cabecalho-pagina h1 { font-size: 1.5rem; }
.cabecalho-pagina p { color: var(--tinta-2); font-size: .9rem; margin-top: 3px; }
.cabecalho-pagina__acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.migalhas { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--tinta-3); margin-bottom: 6px; }
.migalhas a:hover { color: var(--primaria); }

/* Grades */
.grade { display: grid; gap: 16px; }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grade--produtos { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.grade--painel { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1080px) { .grade--painel { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   5. BOTOES
   --------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: var(--superficie);
    color: var(--tinta);
    font-size: .875rem;
    font-weight: 550;
    letter-spacing: -.005em;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transicao), border-color var(--transicao), color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn--primario { background: var(--primaria); color: var(--sobre-primaria); box-shadow: var(--sombra-1); }
.btn--primario:hover { background: var(--primaria-hover); }

.btn--contorno { border-color: var(--borda-forte); background: var(--superficie); color: var(--tinta); }
.btn--contorno:hover { background: var(--superficie-3); border-color: var(--tinta-suave); }

.btn--suave { background: var(--superficie-3); color: var(--tinta-2); }
.btn--suave:hover { background: var(--borda); color: var(--tinta); }

.btn--fantasma { background: transparent; color: var(--tinta-2); }
.btn--fantasma:hover { background: var(--superficie-3); color: var(--tinta); }

.btn--perigo { background: var(--erro); color: #fff; }
.btn--perigo:hover { filter: brightness(.92); }

.btn--sucesso { background: var(--ok); color: #fff; }
.btn--sucesso:hover { filter: brightness(.92); }

.btn--sm { height: 33px; padding: 0 11px; font-size: .81rem; border-radius: var(--r-xs); gap: 5px; }
.btn--lg { height: 48px; padding: 0 24px; font-size: .95rem; border-radius: var(--r-md); }
.btn--bloco { width: 100%; }
.btn--icone { width: 40px; padding: 0; }
.btn--icone.btn--sm { width: 33px; }

/* Botao circular do topo */
.btn-topo {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--tinta-2);
    cursor: pointer;
    position: relative;
    transition: background var(--transicao), color var(--transicao);
}
.btn-topo:hover { background: var(--superficie-3); color: var(--tinta); }
.btn-topo__bolha {
    position: absolute; top: 3px; right: 3px;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: var(--r-full);
    background: var(--erro); color: #fff;
    font-size: .64rem; font-weight: 700;
    display: grid; place-items: center;
    border: 2px solid var(--superficie);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   6. CARTOES E SUPERFICIES
   --------------------------------------------------------------------- */
.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
    box-shadow: var(--sombra-1);
}
.cartao__cabecalho {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--borda);
}
.cartao__cabecalho h3 { font-size: .98rem; }
.cartao__cabecalho .btn { margin-left: auto; }
.cartao__corpo { padding: 20px; }
.cartao__corpo--flush { padding: 0; }
.cartao__rodape { padding: 14px 20px; border-top: 1px solid var(--borda); background: var(--superficie-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }

.painel-vidro {
    background: color-mix(in srgb, var(--superficie) 70%, transparent);
    backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
}

/* Cartao de estatistica */
.estat {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
    padding: 18px 18px 16px;
    box-shadow: var(--sombra-1);
    position: relative;
    overflow: hidden;
}
.estat__topo { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.estat__icone {
    width: 32px; height: 32px; flex: none;
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    background: var(--primaria-suave);
    color: var(--primaria-tinta);
}
.estat__rotulo { font-size: .78rem; font-weight: 550; color: var(--tinta-2); }
.estat__valor { font-size: 1.72rem; font-weight: 680; letter-spacing: -.035em; line-height: 1.1; }
.estat__valor small { font-size: .62em; font-weight: 600; color: var(--tinta-3); margin-right: 2px; }
.estat__pe { margin-top: 8px; display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--tinta-3); }

.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 650; font-size: .78rem; }
.delta--alta { color: var(--ok-tinta); }
.delta--baixa { color: var(--erro-tinta); }
.delta--neutro { color: var(--tinta-3); }

/* ---------------------------------------------------------------------
   7. FORMULARIOS
   --------------------------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > label, .campo-rotulo { font-size: .81rem; font-weight: 550; color: var(--tinta-2); }
.campo__ajuda { font-size: .76rem; color: var(--tinta-3); }
.campo__erro { font-size: .78rem; color: var(--erro-tinta); }

.entrada, .selecao, .area {
    width: 100%;
    height: 42px;
    padding: 0 13px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-sm);
    background: var(--superficie);
    color: var(--tinta);
    font-size: .9rem;
    transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.area { height: auto; min-height: 96px; padding: 11px 13px; resize: vertical; line-height: 1.55; }

.entrada::placeholder, .area::placeholder { color: var(--tinta-suave); }
.entrada:hover, .selecao:hover, .area:hover { border-color: var(--tinta-suave); }
.entrada:focus, .selecao:focus, .area:focus {
    outline: none;
    border-color: var(--primaria);
    box-shadow: var(--anel);
}
.entrada:disabled, .selecao:disabled, .area:disabled { background: var(--superficie-3); color: var(--tinta-3); cursor: not-allowed; }

/* O preenchimento automatico do Chrome pinta o campo de azul claro e ignora
   o tema. Nao da para sobrescrever `background`, so a sombra interna. */
.entrada:-webkit-autofill,
.entrada:-webkit-autofill:hover,
.entrada:-webkit-autofill:focus,
.area:-webkit-autofill,
.selecao:-webkit-autofill {
    -webkit-text-fill-color: var(--tinta);
    -webkit-box-shadow: 0 0 0 100px var(--superficie) inset;
    box-shadow: 0 0 0 100px var(--superficie) inset;
    caret-color: var(--tinta);
    /* adia a transicao de fundo indefinidamente, mantendo a cor do tema */
    transition: background-color 9999s ease-in-out 0s;
}
.entrada:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 100px var(--superficie) inset, var(--anel); }

.selecao {
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b788f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.entrada-grupo { position: relative; display: flex; align-items: center; }
.entrada-grupo .ico { position: absolute; left: 12px; color: var(--tinta-3); pointer-events: none; }
.entrada-grupo .entrada { padding-left: 38px; }
.entrada-grupo__fim { position: absolute; right: 6px; }

.form-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grade .col-total { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grade { grid-template-columns: 1fr; } }

/* Interruptor */
.chave { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.chave input { position: absolute; opacity: 0; width: 0; height: 0; }
.chave__trilho {
    width: 40px; height: 23px; flex: none;
    border-radius: var(--r-full);
    background: var(--borda-forte);
    position: relative;
    transition: background var(--transicao);
}
.chave__trilho::after {
    content: ""; position: absolute; top: 2.5px; left: 2.5px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: var(--sombra-1);
    transition: transform var(--transicao);
}
.chave input:checked + .chave__trilho { background: var(--primaria); }
.chave input:checked + .chave__trilho::after { transform: translateX(17px); }
.chave input:focus-visible + .chave__trilho { box-shadow: var(--anel); }

/* Seletor de quantidade */
.qtd { display: inline-flex; align-items: center; border: 1px solid var(--borda-forte); border-radius: var(--r-sm); overflow: hidden; background: var(--superficie); }
.qtd button {
    width: 34px; height: 36px; border: 0; background: transparent; color: var(--tinta-2);
    cursor: pointer; display: grid; place-items: center; transition: background var(--transicao), color var(--transicao);
}
.qtd button:hover { background: var(--superficie-3); color: var(--primaria); }
.qtd input {
    width: 48px; height: 36px; border: 0; text-align: center;
    background: transparent; font-weight: 600; font-size: .88rem;
    font-variant-numeric: tabular-nums;
}
.qtd input:focus { outline: none; }
.qtd input::-webkit-outer-spin-button, .qtd input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.qtd input[type=number] { -moz-appearance: textfield; }

/* Barra de filtros */
.filtros {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 14px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-md);
    margin-bottom: 18px;
}
.filtros .entrada-grupo { flex: 1; min-width: 220px; }
.filtros .entrada, .filtros .selecao { height: 38px; }

/* Seletor de janela de tempo, na barra do grafico */
.periodo {
    display: inline-flex; gap: 2px;
    padding: 3px;
    background: var(--superficie-3);
    border: 1px solid var(--borda);
    border-radius: var(--r-full);
}
.periodo__opcao {
    padding: 5px 12px;
    border-radius: var(--r-full);
    font-size: .78rem; font-weight: 550; white-space: nowrap;
    color: var(--tinta-3);
    transition: background var(--transicao), color var(--transicao);
}
.periodo__opcao:hover { color: var(--tinta); }
.cartao__cabecalho { flex-wrap: wrap; }
.cartao__cabecalho .periodo { margin-left: auto; }
.periodo__opcao.ativo {
    background: var(--superficie);
    color: var(--tinta);
    font-weight: 650;
    box-shadow: var(--sombra-1);
}

/* Fichas de filtro */
.fichas { display: flex; gap: 7px; flex-wrap: wrap; }
.ficha {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px;
    border: 1px solid var(--borda);
    border-radius: var(--r-full);
    background: var(--superficie);
    color: var(--tinta-2);
    font-size: .81rem; font-weight: 500;
    cursor: pointer;
    transition: all var(--transicao);
}
.ficha:hover { border-color: var(--tinta-suave); color: var(--tinta); }
.ficha.ativo { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); font-weight: 600; }

/* ---------------------------------------------------------------------
   8. TABELAS
   --------------------------------------------------------------------- */
.tabela-wrap { overflow-x: auto; border-radius: var(--r-lg); }
.tabela { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabela thead th {
    text-align: left;
    padding: 11px 16px;
    font-size: .72rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
    color: var(--tinta-3);
    background: var(--superficie-2);
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
}
.tabela tbody td { padding: 13px 16px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr { transition: background var(--transicao); }
.tabela tbody tr:hover { background: var(--superficie-2); }
.tabela .direita { text-align: right; }
.tabela .centro { text-align: center; }
.tabela .num { font-variant-numeric: tabular-nums; }
.tabela__acoes { display: flex; gap: 4px; justify-content: flex-end; }

.celula-principal { display: flex; align-items: center; gap: 11px; min-width: 0; }
.celula-principal__texto { min-width: 0; }
/* Vale tanto dentro de .celula-principal quanto isolado numa celula */
.celula-principal > b,
.celula-principal__texto > b { display: block; font-weight: 600; font-size: .885rem; }
.celula-principal > span,
.celula-principal__texto > span { display: block; font-size: .78rem; color: var(--tinta-3); }

/* Miniatura de produto */
.thumb {
    width: 40px; height: 40px; flex: none;
    border-radius: var(--r-sm);
    overflow: hidden;
    display: grid; place-items: center;
    background: var(--superficie-3);
    color: #fff;
    font-weight: 650;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb--lg { width: 64px; height: 64px; border-radius: var(--r-md); }

/* Avatar */
.avatar {
    width: 34px; height: 34px; flex: none;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--primaria-suave);
    color: var(--primaria-tinta);
    font-size: .78rem; font-weight: 650;
    letter-spacing: .01em;
}
.avatar--sm { width: 27px; height: 27px; font-size: .68rem; }
.avatar--lg { width: 54px; height: 54px; font-size: 1.1rem; }

/* ---------------------------------------------------------------------
   9. BADGES, ALERTAS, VAZIO
   --------------------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    height: 23px; padding: 0 9px;
    border-radius: var(--r-full);
    font-size: .74rem; font-weight: 600; letter-spacing: -.005em;
    white-space: nowrap;
    background: var(--superficie-3); color: var(--tinta-2);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge--sem-ponto::before { display: none; }

.badge--neutro  { background: var(--superficie-3);  color: var(--tinta-2); }
.badge--info    { background: var(--info-suave);    color: var(--info-tinta); }
.badge--ok      { background: var(--ok-suave);      color: var(--ok-tinta); }
.badge--alerta  { background: var(--alerta-suave);  color: var(--alerta-tinta); }
.badge--erro    { background: var(--erro-suave);    color: var(--erro-tinta); }
.badge--marca   { background: var(--primaria-suave);color: var(--primaria-tinta); }

.alerta {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 15px;
    border-radius: var(--r-md);
    border: 1px solid var(--borda);
    background: var(--superficie-2);
    font-size: .87rem;
}
.alerta .ico { flex: none; margin-top: 1px; }
.alerta--info   { background: var(--info-suave);   border-color: transparent; color: var(--info-tinta); }
.alerta--ok     { background: var(--ok-suave);     border-color: transparent; color: var(--ok-tinta); }
.alerta--alerta { background: var(--alerta-suave); border-color: transparent; color: var(--alerta-tinta); }
.alerta--erro   { background: var(--erro-suave);   border-color: transparent; color: var(--erro-tinta); }

.vazio { text-align: center; padding: 56px 24px; }
.vazio__icone {
    width: 60px; height: 60px; margin: 0 auto 16px;
    border-radius: var(--r-lg);
    display: grid; place-items: center;
    background: var(--superficie-3);
    color: var(--tinta-suave);
}
.vazio h3 { font-size: 1.02rem; margin-bottom: 5px; }
.vazio p { color: var(--tinta-3); font-size: .875rem; max-width: 420px; margin: 0 auto 18px; }

/* Toasts */
.toasts {
    position: fixed; bottom: 22px; right: 22px; z-index: 200;
    display: flex; flex-direction: column-reverse; gap: 10px;
    max-width: min(380px, calc(100vw - 32px));
    transition: right var(--transicao);
}
/* Com a gaveta aberta, o toast sai da frente do botao de acao */
body:has(.gaveta.aberta) .toasts { right: calc(min(430px, 100vw) + 22px); }
@media (max-width: 620px) { body:has(.gaveta.aberta) .toasts { right: 16px; bottom: auto; top: 76px; } }
.toast {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 15px;
    border-radius: var(--r-md);
    background: var(--superficie);
    border: 1px solid var(--borda);
    box-shadow: var(--sombra-3);
    font-size: .87rem;
    animation: toast-entra 260ms cubic-bezier(.2, .9, .3, 1.2);
}
.toast__fechar { margin-left: auto; background: none; border: 0; color: var(--tinta-suave); cursor: pointer; padding: 2px; }
.toast--ok .ico     { color: var(--ok); }
.toast--erro .ico   { color: var(--erro); }
.toast--alerta .ico { color: var(--alerta); }
.toast--info .ico   { color: var(--info); }
.toast.saindo { animation: toast-sai 200ms ease forwards; }

@keyframes toast-entra { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes toast-sai   { to   { opacity: 0; transform: translateX(24px); } }

/* ---------------------------------------------------------------------
   10. MENU SUSPENSO / MODAL / GAVETA
   --------------------------------------------------------------------- */
.suspenso { position: relative; }
.suspenso__painel {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    min-width: 230px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-md);
    box-shadow: var(--sombra-3);
    padding: 6px;
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98);
    transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
.suspenso.aberto .suspenso__painel { opacity: 1; visibility: visible; transform: none; }
.suspenso__item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border: 0; background: none; text-align: left;
    border-radius: var(--r-xs);
    font-size: .865rem; color: var(--tinta-2);
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
}
.suspenso__item:hover { background: var(--superficie-3); color: var(--tinta); }
.suspenso__item--perigo { color: var(--erro-tinta); }
.suspenso__item--perigo:hover { background: var(--erro-suave); }
.suspenso__sep { height: 1px; background: var(--borda); margin: 6px 4px; }
.suspenso__cabecalho { padding: 10px 11px 8px; border-bottom: 1px solid var(--borda); margin-bottom: 6px; }

/* Cartao do usuario na lateral */
.cartao-usuario {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 9px;
    border-radius: var(--r-sm);
    border: 1px solid var(--borda);
    background: var(--superficie-2);
    cursor: pointer;
    text-align: left;
    transition: background var(--transicao);
}
.cartao-usuario:hover { background: var(--superficie-3); }
.cartao-usuario__dados { min-width: 0; flex: 1; }
.cartao-usuario__dados b { display: block; font-size: .84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-usuario__dados span { display: block; font-size: .73rem; color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Modal */
dialog.modal {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    /* O reset `* { margin: 0 }` la em cima anula o `margin: auto` que o
       navegador da ao dialog, e sem ele o modal abre grudado no canto
       superior esquerdo em vez de centralizado. */
    margin: auto;
    padding: 0;
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
    background: var(--superficie);
    color: var(--tinta);
    box-shadow: var(--sombra-3);
    overflow: visible;
}
dialog.modal--lg { width: min(820px, calc(100vw - 32px)); }
dialog.modal::backdrop { background: rgba(13, 16, 23, .5); backdrop-filter: blur(3px); }
dialog.modal[open] { animation: modal-entra 200ms cubic-bezier(.2, .9, .3, 1.1); }
@keyframes modal-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } }

.modal__cabecalho { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--borda); }
.modal__cabecalho h3 { flex: 1; font-size: 1.02rem; }
.modal__corpo { padding: 20px; overflow-y: auto; max-height: min(62vh, 620px); }
.modal__rodape { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 20px; border-top: 1px solid var(--borda); background: var(--superficie-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* Gaveta (carrinho) */
.gaveta {
    position: fixed; inset: 0 0 0 auto; z-index: 120;
    width: min(430px, 100vw);
    background: var(--superficie);
    border-left: 1px solid var(--borda);
    box-shadow: var(--sombra-3);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(.3, .9, .3, 1);
}
.gaveta.aberta { transform: none; }
.gaveta__cabecalho { display: flex; align-items: center; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--borda); flex: none; }
.gaveta__cabecalho h3 { flex: 1; font-size: 1.02rem; }
.gaveta__corpo { flex: 1; overflow-y: auto; padding: 12px 16px; }
.gaveta__rodape { flex: none; padding: 16px 20px 20px; border-top: 1px solid var(--borda); background: var(--superficie-2); }

.cortina {
    position: fixed; inset: 0; z-index: 110;
    background: rgba(13, 16, 23, .45);
    backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden;
    transition: opacity var(--transicao), visibility var(--transicao);
}
.cortina.visivel { opacity: 1; visibility: visible; }

/* Item do carrinho */
.item-carrinho { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.item-carrinho:last-child { border-bottom: 0; }
.item-carrinho__dados { flex: 1; min-width: 0; }
.item-carrinho__nome { font-size: .865rem; font-weight: 600; line-height: 1.35; margin-bottom: 2px; }
.item-carrinho__meta { font-size: .76rem; color: var(--tinta-3); }
.item-carrinho__pe { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }

.resumo-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .875rem; padding: 5px 0; }
.resumo-linha span { color: var(--tinta-2); }
.resumo-linha b { font-variant-numeric: tabular-nums; font-weight: 600; }
.resumo-linha--total { border-top: 1px solid var(--borda); margin-top: 8px; padding-top: 12px; font-size: 1rem; }
.resumo-linha--total b { font-size: 1.28rem; font-weight: 680; letter-spacing: -.03em; }

/* ---------------------------------------------------------------------
   11. CATALOGO
   --------------------------------------------------------------------- */
.cartao-produto {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.cartao-produto:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: var(--borda-forte); }

.cartao-produto__midia {
    position: relative;
    aspect-ratio: 4 / 3;
    display: grid; place-items: center;
    overflow: hidden;
    background: var(--superficie-3);
}
.cartao-produto__midia img { width: 100%; height: 100%; object-fit: cover; }
.cartao-produto__selo { position: absolute; top: 10px; left: 10px; }
.cartao-produto__corpo { padding: 14px 15px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cartao-produto__categoria { font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-suave); }
.cartao-produto__nome { font-size: .89rem; font-weight: 600; line-height: 1.36; min-height: 2.72em; }
.cartao-produto__nome:hover { color: var(--primaria); }
.cartao-produto__preco { font-size: 1.18rem; font-weight: 680; letter-spacing: -.03em; margin-top: auto; padding-top: 6px; }
.cartao-produto__preco small { font-size: .68rem; font-weight: 550; color: var(--tinta-3); display: block; letter-spacing: 0; }
/* Selo de origem do preço: acompanha o texto, não a largura do cartao */
.cartao-produto__corpo > .badge { align-self: flex-start; }
.cartao-produto__acoes { display: flex; gap: 7px; padding: 0 15px 15px; }
.cartao-produto__acoes .btn { flex: 1; }

/* Detalhe do produto */
.produto-topo { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 24px; }
.produto-topo__capa { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 1; display: grid; place-items: center; }
.produto-topo__capa img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .produto-topo { grid-template-columns: 1fr; } }

.coluna-fixa { position: sticky; top: calc(var(--topo) + 24px); }
@media (max-width: 1080px) { .coluna-fixa { position: static; } }

/* Placeholder grafico deterministico */
.marca-dagua {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    color: rgba(255, 255, 255, .92);
    position: relative;
}
.marca-dagua::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 20% 10%, rgba(255, 255, 255, .22), transparent 60%);
}

/* ---------------------------------------------------------------------
   12. PEDIDO / LINHA DO TEMPO
   --------------------------------------------------------------------- */
.trilha { display: flex; gap: 4px; margin: 4px 0 0; }
.trilha__passo { flex: 1; height: 4px; border-radius: var(--r-full); background: var(--borda); }
.trilha__passo.feito { background: var(--ok); }
.trilha__passo.atual { background: var(--primaria); }

.linha-tempo { position: relative; padding-left: 30px; }
.linha-tempo::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--borda); }
.linha-tempo__item { position: relative; padding-bottom: 20px; }
.linha-tempo__item:last-child { padding-bottom: 0; }
.linha-tempo__marca {
    position: absolute; left: -30px; top: 1px;
    width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--superficie); border: 2px solid var(--borda); color: var(--tinta-suave);
}
.linha-tempo__item.concluido .linha-tempo__marca { background: var(--ok-suave); border-color: var(--ok); color: var(--ok-tinta); }
.linha-tempo__item.atual .linha-tempo__marca { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); }
.linha-tempo__titulo { font-size: .885rem; font-weight: 600; }
.linha-tempo__meta { font-size: .78rem; color: var(--tinta-3); margin-top: 1px; }
.linha-tempo__nota { margin-top: 6px; font-size: .83rem; color: var(--tinta-2); background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--r-sm); padding: 8px 11px; }

/* ---------------------------------------------------------------------
   13. GRAFICOS (SVG inline)
   --------------------------------------------------------------------- */
.gr { width: 100%; display: block; overflow: visible; font-variant-numeric: tabular-nums; }
.gr__grade { stroke: var(--grade); stroke-width: 1; }
.gr__eixo { stroke: var(--eixo); stroke-width: 1; }
.gr__tick { fill: var(--tinta-3); font-size: 10.5px; }
.gr__barra { fill: var(--serie-1); transition: opacity var(--transicao); }
.gr__col:hover .gr__barra { opacity: .78; }
.gr__valor { fill: var(--tinta-2); font-size: 10.5px; font-weight: 600; }
.gr__faixa { transition: opacity var(--transicao); }
.gr__faixa:hover { opacity: .74; }
.gr__area { fill: var(--serie-1); opacity: .12; }
.gr__linha { fill: none; stroke: var(--serie-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gr__ponto { fill: var(--serie-1); stroke: var(--superficie); stroke-width: 2; }

.grafico { position: relative; }
.gr-dica {
    position: absolute;
    z-index: 5;
    padding: 7px 10px;
    border-radius: var(--r-sm);
    background: var(--cinza-900);
    color: #fff;
    font-size: .78rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--sombra-2);
    transform: translate(-50%, -128%);
    opacity: 0;
    transition: opacity 120ms ease;
}
html[data-tema="escuro"] .gr-dica { background: var(--superficie-3); border: 1px solid var(--borda-forte); }
.gr-dica.visivel { opacity: 1; }

.legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: .78rem; color: var(--tinta-2); }
.legenda__item { display: inline-flex; align-items: center; gap: 6px; }
.legenda__cor { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* Barra de distribuicao */
.barra-dist { display: flex; height: 10px; border-radius: var(--r-full); overflow: hidden; gap: 2px; background: var(--superficie-3); }
.barra-dist__parte { height: 100%; }

.lista-ranking { display: flex; flex-direction: column; gap: 14px; }
.ranking__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .85rem; margin-bottom: 6px; }
.ranking__topo b { font-variant-numeric: tabular-nums; }
.ranking__trilho { height: 7px; border-radius: var(--r-full); background: var(--superficie-3); overflow: hidden; }
.ranking__preenche { height: 100%; border-radius: var(--r-full); background: var(--serie-1); }

/* ---------------------------------------------------------------------
   14. AUTENTICACAO E LANDING
   --------------------------------------------------------------------- */
.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
@media (max-width: 940px) { .auth { grid-template-columns: 1fr; } .auth__vitrine { display: none; } }

.auth__form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--superficie); }
.auth__caixa { width: 100%; max-width: 380px; }

.auth__vitrine {
    position: relative;
    padding: clamp(40px, 4.5vw, 84px);
    display: flex; flex-direction: column; justify-content: space-between;
    color: #fff;
    background:
        radial-gradient(110% 80% at 85% 5%, rgba(159, 148, 228, .5), transparent 55%),
        radial-gradient(90% 70% at 10% 95%, rgba(43, 120, 214, .38), transparent 55%),
        linear-gradient(160deg, var(--marca-700), var(--marca-900) 70%, #14102b);
    overflow: hidden;
}
.auth__vitrine::before {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent 75%);
}
.auth__vitrine > * { position: relative; }
.auth__vitrine h2 {
    font-size: clamp(2rem, 3.4vw, 3.15rem);
    letter-spacing: -.035em;
    line-height: 1.12;
    max-width: 16ch;
}
.auth__vitrine p {
    color: rgba(255, 255, 255, .74);
    margin-top: 20px;
    max-width: 46ch;
    font-size: clamp(1.02rem, 1.25vw, 1.24rem);
    line-height: 1.6;
}

.vitrine-selo {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    height: 32px;
    padding: 0 14px;
    font-size: .86rem;
}

.vitrine-rodape {
    display: flex; align-items: center; gap: 10px;
    color: rgba(255, 255, 255, .62);
    font-size: .92rem;
}

/* Carrossel de mensagens: os slides ocupam a mesma celula do grid, entao a
   altura e a do maior deles e nada "pula" na troca. */
.vitrine-palco { display: grid; flex: 1; align-content: center; }
.vitrine-slide {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 34px;
    min-height: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .6s ease, transform .6s ease, visibility .6s;
}
.vitrine-slide.ativo { opacity: 1; visibility: visible; transform: none; }

.vitrine-controles { display: flex; align-items: center; gap: 16px; }

.vitrine-pausa {
    width: 30px; height: 30px; flex: none; padding: 0;
    display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
    transition: background var(--transicao), border-color var(--transicao);
}
.vitrine-pausa:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }
.vitrine-pausa:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* o icone alterna conforme o estado, sem trocar o DOM */
.vitrine-pausa .vitrine-pausa__tocar { display: none; }
.vitrine-pausa.pausado .vitrine-pausa__pausar { display: none; }
.vitrine-pausa.pausado .vitrine-pausa__tocar { display: block; }

.vitrine-pontos { display: flex; gap: 8px; }
.vitrine-ponto {
    width: 26px; height: 4px; padding: 0;
    border: 0; border-radius: var(--r-full);
    background: rgba(255, 255, 255, .28);
    cursor: pointer;
    transition: background var(--transicao), width var(--transicao);
}
.vitrine-ponto:hover { background: rgba(255, 255, 255, .5); }
.vitrine-ponto.ativo { background: rgba(255, 255, 255, .9); width: 34px; }
.vitrine-ponto:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .vitrine-slide { transition: opacity .2s ease; transform: none; }
}

.vitrine__provas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.vitrine__prova b {
    display: block;
    font-size: clamp(1.75rem, 2.4vw, 2.5rem);
    font-weight: 680;
    letter-spacing: -.035em;
    line-height: 1.1;
}
.vitrine__prova span {
    display: block;
    margin-top: 4px;
    font-size: .88rem;
    color: rgba(255, 255, 255, .64);
    line-height: 1.4;
}

/* Landing */
.marketing { background: var(--superficie); }
.topo-publico {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 16px;
    height: 68px; padding: 0 24px;
    max-width: var(--largura-max); margin: 0 auto;
}
.topo-publico__links { margin-left: auto; display: flex; align-items: center; gap: 6px; }
@media (max-width: 720px) { .topo-publico__links .some-mobile { display: none; } }

.heroi {
    position: relative;
    padding: 76px 24px 90px;
    text-align: center;
    overflow: hidden;
}
.heroi::before {
    content: ""; position: absolute; inset: -30% -10% auto; height: 720px;
    background:
        radial-gradient(48% 42% at 50% 30%, color-mix(in srgb, var(--marca-400) 26%, transparent), transparent 70%),
        radial-gradient(38% 34% at 78% 55%, color-mix(in srgb, var(--serie-1) 18%, transparent), transparent 70%);
    filter: blur(12px);
    pointer-events: none;
}
.heroi__conteudo { position: relative; max-width: 820px; margin: 0 auto; }
.heroi__selo {
    display: inline-flex; align-items: center; gap: 7px;
    height: 32px; padding: 0 14px; margin-bottom: 22px;
    border-radius: var(--r-full);
    border: 1px solid var(--borda);
    background: var(--superficie);
    box-shadow: var(--sombra-1);
    font-size: .79rem; font-weight: 550; color: var(--tinta-2);
}
.heroi p.chamada { font-size: clamp(1rem, 2vw, 1.14rem); color: var(--tinta-2); max-width: 60ch; margin: 20px auto 0; }
.heroi__acoes { display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }

.faixa-numeros {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1px; background: var(--borda);
    border: 1px solid var(--borda); border-radius: var(--r-lg); overflow: hidden;
    max-width: var(--largura-max); margin: 0 auto;
}
.faixa-numeros > div { background: var(--superficie); padding: 22px 20px; text-align: center; }
.faixa-numeros b { display: block; font-size: 1.75rem; font-weight: 680; letter-spacing: -.035em; }
.faixa-numeros span { font-size: .8rem; color: var(--tinta-3); }

.secao { padding: 76px 24px; max-width: var(--largura-max); margin: 0 auto; }
.secao--alt { background: var(--fundo); max-width: none; }
.secao--alt > * { max-width: var(--largura-max); margin-inline: auto; }
.secao__cabecalho { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.secao__cabecalho h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.03em; }
.secao__cabecalho p { color: var(--tinta-2); margin-top: 12px; }

.recurso { padding: 26px; border: 1px solid var(--borda); border-radius: var(--r-lg); background: var(--superficie); transition: transform var(--transicao), box-shadow var(--transicao); }
.recurso:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.recurso__icone {
    width: 42px; height: 42px; border-radius: var(--r-md); margin-bottom: 16px;
    display: grid; place-items: center;
    background: var(--primaria-suave); color: var(--primaria-tinta);
}
.recurso h3 { font-size: 1rem; margin-bottom: 7px; }
.recurso p { font-size: .875rem; color: var(--tinta-2); }

.passo { position: relative; padding: 26px; border: 1px solid var(--borda); border-radius: var(--r-lg); background: var(--superficie); }
.passo__num {
    width: 34px; height: 34px; border-radius: var(--r-sm); margin-bottom: 14px;
    display: grid; place-items: center;
    background: var(--primaria); color: var(--sobre-primaria);
    font-weight: 680; font-size: .95rem;
}
.passo h3 { font-size: .98rem; margin-bottom: 6px; }
.passo p { font-size: .865rem; color: var(--tinta-2); }

.cta-final {
    position: relative; overflow: hidden;
    margin: 0 24px 76px;
    padding: 60px 32px;
    border-radius: var(--r-xl);
    text-align: center;
    color: #fff;
    background:
        radial-gradient(90% 120% at 15% 0%, rgba(159, 148, 228, .45), transparent 60%),
        linear-gradient(140deg, var(--marca-700), var(--marca-900));
    max-width: calc(var(--largura-max) - 48px);
    margin-inline: auto;
}
.cta-final h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.03em; }
.cta-final p { color: rgba(255, 255, 255, .74); margin: 12px auto 26px; max-width: 52ch; }
.cta-final .btn--primario { background: #fff; color: var(--marca-800); }
.cta-final .btn--primario:hover { background: rgba(255, 255, 255, .88); }
.cta-final .btn--contorno { border-color: rgba(255, 255, 255, .35); color: #fff; background: transparent; }
.cta-final .btn--contorno:hover { background: rgba(255, 255, 255, .12); }

.rodape { border-top: 1px solid var(--borda); padding: 40px 24px; background: var(--superficie); }
.rodape__interno { max-width: var(--largura-max); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.rodape__interno .mini { margin-left: auto; }

/* ---------------------------------------------------------------------
   15. PALETA DE COMANDOS
   --------------------------------------------------------------------- */
.paleta {
    position: fixed; inset: 0; z-index: 160;
    display: none;
    padding-top: 12vh;
    justify-content: center;
    background: rgba(13, 16, 23, .5);
    backdrop-filter: blur(4px);
}
.paleta.aberta { display: flex; }
.paleta__caixa {
    width: min(560px, calc(100vw - 32px));
    height: fit-content; max-height: 62vh;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
    box-shadow: var(--sombra-3);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: modal-entra 180ms ease;
}
.paleta__busca { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--borda); }
.paleta__busca input { flex: 1; border: 0; background: none; font-size: .95rem; outline: none; }
.paleta__lista { overflow-y: auto; padding: 8px; }
.paleta__item {
    display: flex; align-items: center; gap: 11px;
    width: 100%; padding: 10px 12px;
    border: 0; background: none; text-align: left;
    border-radius: var(--r-sm);
    color: var(--tinta-2); font-size: .885rem;
    cursor: pointer;
}
.paleta__item:hover, .paleta__item.marcado { background: var(--primaria-suave); color: var(--primaria-tinta); }
.paleta__item small { margin-left: auto; color: var(--tinta-suave); font-size: .74rem; }
.paleta__vazio { padding: 26px; text-align: center; color: var(--tinta-3); font-size: .875rem; }

kbd {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 20px; padding: 0 5px;
    border: 1px solid var(--borda-forte); border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--superficie-2);
    font-family: var(--fonte); font-size: .7rem; font-weight: 600; color: var(--tinta-3);
}

/* ---------------------------------------------------------------------
   16. RESPONSIVO
   --------------------------------------------------------------------- */
.so-mobile { display: none; }

@media (max-width: 960px) {
    .lateral {
        position: fixed; left: 0; top: 0; bottom: 0;
        transform: translateX(-100%);
        transition: transform 240ms cubic-bezier(.3, .9, .3, 1);
        box-shadow: var(--sombra-3);
    }
    .app.menu-aberto .lateral { transform: none; }
    .so-mobile { display: inline-flex; }
    .conteudo { padding: 18px 16px 48px; }
    .topo { padding: 0 14px; }
    .grade--produtos { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
    .esconde-mobile { display: none !important; }
    .secao, .heroi { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 560px) {
    .cabecalho-pagina { align-items: flex-start; flex-direction: column; }
    .cabecalho-pagina__acoes { width: 100%; }
    .cabecalho-pagina__acoes .btn { flex: 1; }
    .estat__valor { font-size: 1.5rem; }
    .toasts { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

/* ---------------------------------------------------------------------
   17. UTILITARIOS
   --------------------------------------------------------------------- */
/* Alternancia de icone conforme o tema ativo */
html[data-tema="escuro"] .so-claro { display: none; }
html:not([data-tema="escuro"]) .so-escuro { display: none; }

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.entre { justify-content: space-between; }
.centro-y { align-items: center; }
.centro-x { justify-content: center; }
.enrola { flex-wrap: wrap; }
.cresce { flex: 1; min-width: 0; }
.g4 { gap: 4px; } .g6 { gap: 6px; } .g8 { gap: 8px; } .g10 { gap: 10px; }
.g12 { gap: 12px; } .g16 { gap: 16px; } .g20 { gap: 20px; } .g24 { gap: 24px; }
.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; } .mt32 { margin-top: 32px; }
.mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; } .mb16 { margin-bottom: 16px; } .mb24 { margin-bottom: 24px; }
.direita { text-align: right; } .centro { text-align: center; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cor-ok { color: var(--ok-tinta); } .cor-erro { color: var(--erro-tinta); }
.cor-alerta { color: var(--alerta-tinta); }
.cor-suave { color: var(--tinta-3); } .cor-marca { color: var(--primaria); }
.divisor { height: 1px; background: var(--borda); border: 0; margin: 16px 0; }

/* ---------------------------------------------------------------------
   18. IMPRESSAO
   --------------------------------------------------------------------- */
/* Blocos que so existem no papel */
.folha-cabecalho, .folha-partes, .folha-rodape { display: none; }

@media print {
    @page { size: A4 portrait; margin: 14mm 12mm; }

    /* ------------------------------------------------------------------
       O tema escuro nao pode vazar para o papel: os tokens sao reescritos
       para a versao clara, senao texto quase branco sai invisivel.
       ------------------------------------------------------------------ */
    :root, html[data-tema="escuro"] {
        --fundo: #fff; --superficie: #fff; --superficie-2: #fff; --superficie-3: #f2f2f2;
        --borda: #d4d4d4; --borda-forte: #b0b0b0;
        --tinta: #000; --tinta-2: #333; --tinta-3: #555; --tinta-suave: #777;
        --primaria: #000; --primaria-tinta: #000; --primaria-suave: #f2f2f2;
        --ok-tinta: #000; --erro-tinta: #000; --alerta-tinta: #000; --info-tinta: #000;
        --sombra-1: none; --sombra-2: none; --sombra-3: none;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 10.5pt;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* --- Cromo da aplicacao sai de cena --- */
    .lateral, .topo, .toasts, .gaveta, .cortina, .paleta,
    .btn, .btn-topo, .suspenso, .migalhas, .cabecalho-pagina__acoes,
    .trilha, .linha-tempo__marca, .thumb, .avatar, .cartao-produto__midia,
    .nao-imprime, dialog,
    /* o cabecalho do documento ja traz codigo, status e data */
    .cabecalho-pagina, .alerta--info { display: none !important; }

    /* --- Estrutura em coluna unica --- */
    .app, .principal { display: block; }
    .conteudo { padding: 0; max-width: none; margin: 0; }
    .grade, .grade--2, .grade--3, .grade--4, .grade--painel { display: block; }
    .grade > * + *, .flex-col > * + * { margin-top: 8mm; }
    .coluna-fixa { position: static; }

    /* --- Cabecalho do documento --- */
    .folha-cabecalho {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12mm;
        padding-bottom: 4mm;
        margin-bottom: 5mm;
        border-bottom: 2px solid #000;
    }
    .folha-emitente { display: flex; gap: 3mm; align-items: flex-start; }
    .folha-logo {
        width: 11mm; height: 11mm; flex: none;
        border: 1.5pt solid #000; border-radius: 2mm;
        display: grid; place-items: center; color: #000;
    }
    .folha-emitente b { display: block; font-size: 13pt; letter-spacing: -.02em; }
    .folha-emitente span { display: block; font-size: 8pt; color: #444; line-height: 1.45; }

    .folha-documento { text-align: right; }
    .folha-tipo {
        display: block; font-size: 7.5pt; font-weight: 700;
        letter-spacing: .12em; text-transform: uppercase; color: #555;
    }
    .folha-documento b {
        display: block; font-size: 15pt; font-weight: 700;
        font-family: var(--fonte-mono); letter-spacing: -.02em; margin: 1mm 0;
    }
    .folha-documento span { font-size: 8pt; color: #444; }

    /* --- Cliente / entrega / condicoes --- */
    .folha-partes {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6mm;
        margin-bottom: 6mm;
        padding: 3mm 0;
        border-bottom: .5pt solid #bbb;
        break-inside: avoid;
    }
    .folha-partes > div > span { display: block; font-size: 8.5pt; color: #444; line-height: 1.5; }
    .folha-partes b { display: block; font-size: 9.5pt; margin-bottom: .5mm; }
    .folha-rotulo {
        font-size: 7pt !important; font-weight: 700; letter-spacing: .1em;
        text-transform: uppercase; color: #666 !important; margin-bottom: 1mm;
    }

    /* --- Cartoes viram blocos simples --- */
    .cartao, .estat {
        border: .5pt solid #ccc; border-radius: 0;
        box-shadow: none; break-inside: avoid;
    }
    .cartao__cabecalho {
        padding: 2.5mm 3mm; border-bottom: .5pt solid #ccc;
        background: #f5f5f5;
    }
    .cartao__cabecalho h3 { font-size: 10pt; }
    .cartao__cabecalho .ico { display: none; }
    .cartao__corpo { padding: 3mm; }
    .cartao__rodape { padding: 3mm; border-top: .5pt solid #ccc; background: transparent; }

    /* --- Tabela de itens --- */
    .tabela-wrap { overflow: visible; }
    .tabela { font-size: 9.5pt; }
    .tabela thead { display: table-header-group; }   /* repete o cabecalho a cada pagina */
    .tabela tfoot { display: table-footer-group; }
    .tabela tr { break-inside: avoid; }
    .tabela thead th {
        padding: 2mm 2.5mm; font-size: 7.5pt;
        background: #f5f5f5 !important; border-bottom: .5pt solid #999;
    }
    .tabela tbody td { padding: 2mm 2.5mm; border-bottom: .5pt solid #ddd; }
    .tabela tbody tr:hover { background: transparent; }
    .celula-principal { display: block; }

    /* --- Totais --- */
    .resumo-linha { font-size: 10pt; padding: 1mm 0; }
    .resumo-linha--total { border-top: 1pt solid #000; }
    .resumo-linha--total b { font-size: 13pt; }

    /* --- Linha do tempo --- */
    .linha-tempo { padding-left: 0; }
    .linha-tempo::before { display: none; }
    .linha-tempo__item { padding-bottom: 3mm; break-inside: avoid; }
    .linha-tempo__nota { background: #f7f7f7; border-color: #ddd; }

    /* --- Badges legiveis em preto e branco --- */
    .badge {
        border: .5pt solid #666 !important;
        background: transparent !important;
        color: #000 !important;
        font-size: 8pt;
    }
    .badge::before { display: none; }

    /* --- Rodape --- */
    .folha-rodape {
        display: block;
        margin-top: 8mm; padding-top: 3mm;
        border-top: .5pt solid #bbb;
        font-size: 7.5pt; color: #666; text-align: center;
    }

    /* Nao quebrar titulo separado do conteudo */
    h1, h2, h3 { break-after: avoid; }
    a { text-decoration: none; color: #000; }
}