/* ==========================================================================
   PIZZARIA CASA SERENITÀ — folha de estilo única

   A paleta foi tirada do próprio logo (amostrada pixel a pixel):
     creme    #FCF0E4   fundo do emblema
     terracota #9C4824  a palavra "Serenità" e a chama
     oliva    #3C3C1E   a borda externa e os ramos de oliveira
     carvão   #2A2118   a palavra "Casa"
     trigo    #FCE4CC   os tijolos do forno e a pá

   Dois gestos vêm da gravura do emblema:
     1. o ARCO do forno — usado uma única vez, na entrada (login)
     2. o FIO DUPLO (oliva + terracota) que emoldura o logo, reaproveitado
        como divisor discreto sob os rótulos de seção
   ========================================================================== */

:root {
    /* --- cor --- */
    --vinho:      #6E2230;
    --vinho-2:    #571A25;
    --vinho-3:    #431319;
    --terracota:  #9C4824;
    --terracota-2:#853A1B;
    --oliva:      #3F5233;
    --oliva-2:    #33422A;
    --oliva-bg:   #E9EEE3;
    --creme:      #FFFBF4;
    --fundo:      #F6EEE3;
    --fundo-2:    #EFE4D5;
    --carvao:     #2A2118;
    --tinta:      #3B2E22;
    --tinta-2:    #7A6752;
    --tinta-3:    #A2907B;
    --linha:      #E7DAC9;
    --linha-2:    #F0E6D8;
    --trigo:      #E3CDA8;
    --trigo-2:    #C9A87C;
    --alerta:     #B3401E;
    --alerta-bg:  #FBEBE3;
    --aviso-bg:   #FCF2DF;
    --aviso:      #B07A16;

    /* --- forma --- */
    --r:      14px;
    --r-sm:   9px;
    --r-lg:   20px;
    --sombra:     0 1px 2px rgba(60,40,25,.05), 0 4px 14px rgba(60,40,25,.06);
    --sombra-alta:0 2px 4px rgba(60,40,25,.06), 0 12px 32px rgba(60,40,25,.10);

    /* --- tipo --- */
    --display: "Bodoni Moda", "Iowan Old Style", Georgia, serif;
    --corpo:   "Figtree", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--corpo);
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--tinta);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
}

/* números de dinheiro sempre alinhados */
.num, .valor, .card-valor, .tabela td, .tabela th {
    font-variant-numeric: tabular-nums;
}

:focus-visible {
    outline: 2.5px solid var(--terracota);
    outline-offset: 2px;
    border-radius: 4px;
}

a { color: var(--terracota-2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--vinho); }

/* ==========================================================================
   Cabeçalho
   ========================================================================== */

.topo {
    background: linear-gradient(180deg, var(--vinho) 0%, var(--vinho-2) 100%);
    color: #F6E9DA;
    box-shadow: 0 1px 0 rgba(0,0,0,.14), 0 6px 20px rgba(80,25,35,.16);
    position: sticky;
    top: 0;
    z-index: 40;
}

.topo-linha {
    max-width: 1240px;
    margin: 0 auto;
    padding: 13px 22px 12px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.marca {
    display: flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.marca:hover { color: inherit; }

.marca img {
    height: 46px;
    width: auto;
    display: block;
    /* o emblema tem fundo creme; um halo quente encaixa ele no vinho */
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.28));
    flex: 0 0 auto;
}

.marca-texto { min-width: 0; }

.marca-nome {
    display: block;
    font-family: var(--display);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .005em;
    line-height: 1.05;
    color: #FFF6E9;
    white-space: nowrap;
}

.marca-sub {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #C79B93;
    margin-top: 3px;
}

.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.topo-usuario {
    font-size: 14.5px;
    color: #C79B93;
    white-space: nowrap;
    /* nome comprido não empurra o botão Sair para fora */
    max-width: 34ch;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topo-usuario b { color: #FFF6E9; font-weight: 600; }

.btn-sair {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--corpo);
    font-size: 13px;
    font-weight: 600;
    color: #F0D9CF;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    padding: 7px 15px;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.btn-sair:hover { background: rgba(255,255,255,.14); color: #FFF6E9; border-color: rgba(255,255,255,.3); }

/* --- navegação --- */
.menu {
    background: var(--vinho-2);
    border-top: 1px solid rgba(255,255,255,.07);
}
.menu-linha {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.menu-linha::-webkit-scrollbar { display: none; }

.menu-linha a {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 15px 11px;
    color: #CBA79E;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color .16s ease, background .16s ease;
}
.menu-linha a:hover { color: #FFF6E9; background: rgba(255,255,255,.05); }
.menu-linha a.ativo {
    color: #FFF6E9;
    font-weight: 600;
    border-bottom-color: var(--terracota);
    background: rgba(0,0,0,.14);
}
.menu-linha svg { width: 16px; height: 16px; opacity: .85; }

/* ==========================================================================
   Estrutura
   ========================================================================== */

main {
    max-width: 1240px;
    margin: 0 auto;
    padding: 30px 22px 40px;
}

.pag-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.pag-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .19em;
    text-transform: uppercase;
    color: var(--terracota);
    margin: 0 0 7px;
}

h1 {
    font-family: var(--display);
    font-size: clamp(28px, 4.6vw, 38px);
    font-weight: 500;
    letter-spacing: -.008em;
    line-height: 1.08;
    color: var(--carvao);
    margin: 0;
}
h1 small {
    font-family: var(--corpo);
    font-size: .45em;
    font-weight: 500;
    color: var(--tinta-2);
    letter-spacing: 0;
    margin-left: 8px;
}

.subtitulo {
    font-size: 15px;
    color: var(--tinta-2);
    margin: 9px 0 0;
    max-width: 62ch;
    line-height: 1.6;
}

/* rótulo de seção + fio duplo (gesto tirado da borda do emblema) */
.secao {
    margin: 34px 0 14px;
}
.secao h2 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--tinta-2);
    margin: 0 0 8px;
}
.secao::after {
    content: "";
    display: block;
    height: 3px;
    border-top: 1px solid var(--oliva);
    border-bottom: 1px solid var(--terracota);
    opacity: .34;
}

h2 { font-family: var(--corpo); font-size: 18px; font-weight: 600; margin: 0 0 12px; }
h3 { font-family: var(--corpo); font-size: 15px; font-weight: 600; margin: 0 0 8px; }

.nota {
    font-size: 13.5px;
    color: var(--tinta-2);
    line-height: 1.6;
    margin: 10px 0 0;
    max-width: 70ch;
}
.nota code {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 12.5px;
    background: var(--fundo-2);
    padding: 2px 6px;
    border-radius: 5px;
    color: var(--tinta);
}
.nota strong { color: var(--tinta); font-weight: 600; }

/* ==========================================================================
   Cartões
   ========================================================================== */

.painel {
    background: var(--creme);
    border: 1px solid var(--linha);
    border-radius: var(--r);
    box-shadow: var(--sombra);
    padding: 24px 26px;
}
.painel + .painel { margin-top: 16px; }

.painel-topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 16px;
}
.painel-topo h2, .painel-topo h3 { margin: 0; }
.painel-topo .marca-nota { font-size: 13px; color: var(--tinta-2); }

.grade {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    align-items: start;
}
/* sem min-width:0 o conteúdo largo (tabela) estica a coluna e a página
   passa a rolar na horizontal no celular */
.grade > *, .metricas > *, .canais > * { min-width: 0; }

/* --- cartão de métrica (dashboard) --- */
.metricas {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
}

.card {
    background: var(--creme);
    border: 1px solid var(--linha);
    border-radius: var(--r);
    box-shadow: var(--sombra);
    padding: 19px 20px 18px;
    transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }

.card-ico {
    width: 36px; height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    margin-bottom: 13px;
    background: var(--fundo-2);
    color: var(--tinta-2);
}
.card-ico svg { width: 18px; height: 18px; }

.card-rot {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-2);
    margin-bottom: 6px;
}

.card-valor {
    display: block;
    font-family: var(--display);
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1.05;
    color: var(--carvao);
}

.card-pe {
    display: block;
    font-size: 12.5px;
    color: var(--tinta-2);
    margin-top: 7px;
}

/* acento por natureza do número */
.card.receita .card-ico { background: #F6E4DC; color: var(--terracota-2); }
.card.lucro   .card-ico { background: var(--oliva-bg); color: var(--oliva); }
.card.lucro   .card-valor { color: var(--oliva); }
.card.taxa    .card-ico { background: var(--aviso-bg); color: var(--aviso); }
.card.custo   .card-ico { background: #EDE3D5; color: #856B4C; }
.card.vinho   .card-ico { background: #F4E2E4; color: var(--vinho); }
.card-valor.negativo { color: var(--alerta); }

/* ==========================================================================
   Botões
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--corpo);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--tinta);
    background: var(--creme);
    border: 1px solid var(--linha);
    border-radius: var(--r-sm);
    padding: 11px 17px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .16s ease, border-color .16s ease,
                transform .1s ease, box-shadow .16s ease, color .16s ease;
}
.btn:hover { background: var(--fundo-2); border-color: var(--trigo-2); color: var(--tinta); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }

/* principal: verde oliva */
.btn-ok {
    background: var(--oliva);
    border-color: var(--oliva);
    color: #FBFDF8;
    box-shadow: 0 1px 2px rgba(40,55,30,.16), 0 4px 12px rgba(40,55,30,.14);
}
.btn-ok:hover { background: var(--oliva-2); border-color: var(--oliva-2); color: #fff; }

/* ação de venda: vinho da marca */
.btn-vinho {
    background: var(--vinho);
    border-color: var(--vinho);
    color: #FFF6E9;
    box-shadow: 0 1px 2px rgba(80,25,35,.18), 0 5px 16px rgba(80,25,35,.16);
}
.btn-vinho:hover { background: var(--vinho-2); border-color: var(--vinho-2); color: #FFF6E9; }

.btn-grande { font-size: 16.5px; padding: 15px 26px; border-radius: var(--r); }

.btn-mini { font-size: 12.5px; padding: 7px 12px; border-radius: 7px; }
.btn-mini svg { width: 14px; height: 14px; }

.btn-perigo { color: var(--alerta); border-color: #EBD3CB; }
.btn-perigo:hover { background: var(--alerta-bg); border-color: var(--alerta); color: var(--alerta); }

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

.forma-inline { display: inline; margin: 0; }

/* ==========================================================================
   Formulários
   ========================================================================== */

.form-linha {
    display: flex;
    gap: 12px 20px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.campo > span, .rot {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-2);
}

input, select, textarea {
    font-family: var(--corpo);
    font-size: 15px;
    color: var(--tinta);
    background: #fff;
    border: 1px solid var(--linha);
    border-radius: var(--r-sm);
    padding: 10px 13px;
    transition: border-color .16s ease, box-shadow .16s ease;
}
input:hover, select:hover { border-color: var(--trigo-2); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--terracota);
    box-shadow: 0 0 0 3px rgba(156,72,36,.13);
}
input::placeholder { color: var(--tinta-3); }
input[type="number"] { font-variant-numeric: tabular-nums; }

.w-curto { width: 100px; }
.w-medio { width: 132px; }
.w-largo { width: 210px; }
.w-cheio { width: 100%; }

.qtd {
    width: 84px;
    text-align: center;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

/* ---- contador − / número / + (PDV) ----
   Alvos de 40px: dá para acertar com o dedo no balcão, sem digitar. */
.passo {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--linha);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(60,40,25,.05);
}

.passo-btn {
    width: 40px;
    flex: 0 0 40px;
    border: 0;
    background: var(--fundo-2);
    color: var(--tinta);
    font-family: var(--corpo);
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .13s ease, color .13s ease;
    -webkit-tap-highlight-color: transparent;
}
.passo-btn:hover { background: var(--trigo); }
.passo-btn:active { background: var(--trigo-2); color: #fff; }
.passo-btn:first-child { border-right: 1px solid var(--linha); }
.passo-btn:last-child { border-left: 1px solid var(--linha); }

.passo-num {
    width: 52px;
    flex: 0 0 52px;
    border: 0;
    border-radius: 0;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 9px 0;
    background: transparent;
}
.passo-num:focus { outline: none; box-shadow: none; background: #FFFDF7; }
/* as setinhas nativas saem: já temos as nossas, maiores */
.passo-num::-webkit-outer-spin-button,
.passo-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.passo-num { -moz-appearance: textfield; appearance: textfield; }

/* linha com quantidade escolhida */
.tabela tr.escolhida { background: var(--oliva-bg); }
.tabela tr.escolhida:hover { background: #DFE8D7; }
.tabela tr.escolhida .passo { border-color: var(--oliva); }

/* ==========================================================================
   Tabelas — com respiro, sem cara de planilha
   ========================================================================== */

/* a tabela larga rola dentro do painel; a página nunca rola de lado */
.rolagem { overflow-x: auto; }

.tabela {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14.5px;
}

.tabela th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-2);
    text-align: left;
    padding: 0 14px 10px;
    white-space: nowrap;
    border-bottom: 1px solid var(--linha);
}

.tabela td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--linha-2);
    vertical-align: middle;
}
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr { transition: background .14s ease; }
.tabela tbody tr:hover { background: #FDF8F1; }

.tabela .n, .tabela th.n { text-align: right; }
.tabela .forte { font-weight: 600; color: var(--carvao); }

.vazio { color: var(--tinta-2); font-style: italic; }
.linha-alerta { background: var(--alerta-bg) !important; }

.v-lucro { color: var(--oliva); font-weight: 600; }
.v-custo { color: #856B4C; }
.v-taxa  { color: var(--aviso); }
.v-neg   { color: var(--alerta); font-weight: 600; }

/* ==========================================================================
   O PREÇO — o campo que manda na tela da pizza
   ========================================================================== */

.painel-preco {
    border-color: var(--trigo-2);
    background:
        linear-gradient(180deg, #FFFDF8 0%, var(--creme) 100%);
}

.preco-grade {
    display: grid;
    gap: 22px 30px;
    grid-template-columns: minmax(260px, 320px) 1fr;
    align-items: start;
}

.preco-campo .rot { display: block; margin-bottom: 8px; }

.preco-entrada { display: flex; gap: 9px; align-items: stretch; }

/* o campo de preço é o maior número editável do sistema, de propósito */
.preco-entrada input {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--display);
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -.015em;
    padding: 8px 14px;
    border-width: 2px;
    border-color: var(--trigo-2);
    font-variant-numeric: tabular-nums;
}
.preco-entrada input:focus {
    border-color: var(--terracota);
    box-shadow: 0 0 0 4px rgba(156,72,36,.14);
}
.preco-entrada .btn { flex: 0 0 auto; }

.preco-dica {
    font-size: 12.5px;
    color: var(--tinta-2);
    line-height: 1.5;
    margin: 10px 0 0;
}

.preco-numeros {
    display: grid;
    gap: 14px 20px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    padding-top: 4px;
}
.preco-num { display: flex; flex-direction: column; gap: 5px; }
.preco-num-valor {
    font-family: var(--display);
    font-size: 25px;
    font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--carvao);
}

/* caixa editável dentro da linha de custo */
.caixa-campo { display: inline-flex; align-items: center; gap: 5px; }
.caixa-moeda { font-size: 13px; color: var(--tinta-2); }
.caixa-campo input {
    width: 84px;
    text-align: right;
    padding: 6px 9px;
    font-size: 14.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 780px) {
    .preco-grade { grid-template-columns: 1fr; gap: 20px; }
    .preco-entrada input { font-size: 26px; }
    .preco-numeros { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); }
    .preco-num-valor { font-size: 21px; }
}

/* ==========================================================================
   Preço por canal — 5 cartões lado a lado
   ========================================================================== */

.canais {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
}

.canal {
    background: var(--creme);
    border: 1px solid var(--linha);
    border-radius: var(--r);
    padding: 16px 17px 15px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.canal:hover {
    border-color: var(--trigo-2);
    box-shadow: var(--sombra);
    transform: translateY(-2px);
}
/* o canal sem taxa é a referência: destacado com o fio da marca */
.canal.base { border-color: var(--trigo-2); background: #FFFDF8; }

.canal-nome {
    font-size: 13px;
    font-weight: 700;
    color: var(--carvao);
    display: flex;
    align-items: center;
    gap: 6px;
}
.canal-taxa {
    font-size: 11.5px;
    color: var(--tinta-2);
    margin-bottom: 9px;
}

.canal-preco {
    font-family: var(--display);
    font-size: 27px;
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.05;
    color: var(--carvao);
    font-variant-numeric: tabular-nums;
}

.canal-lucro {
    font-size: 12.5px;
    color: var(--oliva);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-top: 3px;
}
.canal-lucro.negativo { color: var(--alerta); }

/* fita custo | taxa | lucro: a mesma leitura em toda parte */
.fita {
    display: flex;
    height: 7px;
    border-radius: 4px;
    overflow: hidden;
    margin: 11px 0 9px;
    background: var(--fundo-2);
}
.fita i { display: block; height: 100%; }
.f-custo { background: var(--trigo-2); }
.f-taxa  {
    background: var(--aviso);
    background-image: repeating-linear-gradient(
        -45deg, rgba(255,255,255,.4) 0 2px, transparent 2px 5px);
}
.f-lucro { background: var(--oliva); }

.legenda {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--tinta-2);
    margin-bottom: 14px;
}
.legenda span { display: flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: block; }

/* margin-top:auto prende o botão embaixo: os cinco cartões terminam alinhados
   mesmo quando um deles tem a linha extra da taxa de entrega */
.canal-acao { margin-top: auto; padding-top: 11px; }
.canal-acao .btn { width: 100%; }

/* ==========================================================================
   Fita de custo (composição) — leitura em linhas
   ========================================================================== */

.custo-linhas { display: grid; gap: 1px; }

.custo-linha {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--linha-2);
    font-size: 14.5px;
}
.custo-linha:last-child { border-bottom: 0; }
.custo-linha .rotulo { color: var(--tinta); }
.custo-linha .rotulo small { color: var(--tinta-2); font-size: 12.5px; }
.custo-linha .preenche { flex: 1 1 auto; }
.custo-linha .valor {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.custo-linha.total {
    border-top: 2px solid var(--carvao);
    border-bottom: 0;
    margin-top: 7px;
    padding-top: 13px;
}
.custo-linha.total .rotulo {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.custo-linha.total .valor {
    font-family: var(--display);
    font-size: 25px;
    font-weight: 500;
}

/* ==========================================================================
   Clientes e entrega
   ========================================================================== */

/* 460px é o mínimo para os cinco campos do endereço respirarem;
   min(100%, ...) evita estourar em tela estreita */
/* ==========================================================================
   CLIENTES — lista densa

   Uma linha por cliente. A tela antiga era um cartão com o formulário inteiro
   aberto por cliente; com algumas centenas de cadastros virava uma parede de
   caixas de texto, impossível de varrer com o olho. Aqui a linha só mostra, e
   a edição abre no lugar dela, uma por vez.
   ========================================================================== */

/* --- cadastro recolhido --- */
.cli-novo { padding: 0; overflow: hidden; }
.cli-novo > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 19px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--terracota-2);
    list-style: none;
    user-select: none;
}
.cli-novo > summary::-webkit-details-marker { display: none; }
.cli-novo > summary::after {
    content: "";
    margin-left: auto;
    width: 8px; height: 8px;
    border-right: 2px solid var(--tinta-3);
    border-bottom: 2px solid var(--tinta-3);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .18s ease;
}
.cli-novo[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.cli-novo > summary:hover { background: var(--fundo-2); }
.cli-novo > summary svg { width: 17px; height: 17px; }
.cli-novo-corpo { padding: 4px 19px 19px; border-top: 1px solid var(--linha-2); }

/* --- busca --- */
.cli-busca {
    position: relative;
    margin: 22px 0 14px;
}
.cli-busca svg {
    position: absolute;
    left: 15px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    color: var(--tinta-3);
    pointer-events: none;
}
.cli-busca input {
    width: 100%;
    font-size: 16px;
    padding: 13px 16px 13px 44px;
    border-radius: 999px;
    background: var(--creme);
}
/* o "x" nativo do type=search sai do lugar em campo arredondado */
.cli-busca input::-webkit-search-cancel-button { margin-right: 4px; }

.clientes-conta {
    margin: 0 0 12px;
    font-size: 13.5px;
    color: var(--tinta-2);
}
.clientes-conta b { color: var(--carvao); font-size: 15px; }
.clientes-conta-sep { margin: 0 6px; color: var(--tinta-3); }

/* --- a tabela --- */
.painel-lista { padding: 15px 6px 6px; }
.tabela-clientes td { padding: 10px 14px; }
.tabela-clientes .cli-endereco {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tinta-2);
}
.tabela-clientes .cli-compl { color: var(--tinta-3); }
.tabela-clientes .cli-zero { color: var(--tinta-3); }
.tabela-clientes .selo { margin-left: 8px; vertical-align: 1px; }

/* fora do PDV: continua no histórico, mas some da operação */
.tabela-clientes tr.cli-inativo td { background: var(--fundo-2); }
.tabela-clientes tr.cli-inativo .forte { color: var(--tinta-2); }

/* --- a linha virando editor --- */
.cli-edicao-linha > td { padding: 0 !important; background: var(--fundo-2); }
.cli-edicao {
    padding: 18px 19px 16px;
    border-left: 4px solid var(--terracota);
    /* nasce curtinha e cresce: sem isso o editor aparece de estalo e a lista
       inteira dá um salto embaixo dele */
    animation: cli-abrir .18s ease-out;
}
@keyframes cli-abrir {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cli-edicao { animation: none; }
}

.cli-edicao-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.cli-edicao-topo h3 {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 500;
    color: var(--carvao);
    margin: 0;
}

.cli-edicao-pe {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.cli-edicao-acoes { display: flex; gap: 8px; align-items: center; }

/* ações que não são "salvar" ficam separadas por um fio: apagar e esconder
   não podem morar junto do botão que ele aperta toda hora */
.cli-edicao-perigo {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--linha);
}

/* CEP, endereço, bairro, complemento e referência.
   O grid dá a cada campo a largura do que ele guarda: CEP é curto, a rua é
   larga. Em telas estreitas tudo vira uma coluna. */
.endereco-campos {
    display: grid;
    gap: 12px 14px;
    grid-template-columns: 118px minmax(0, 1.9fr) minmax(0, 1.1fr);
    grid-template-areas:
        "cep    rua    bairro"
        "compl  compl  ref";
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--linha-2);
}
.endereco-campos .cep    { grid-area: cep; }
.endereco-campos .rua    { grid-area: rua; }
.endereco-campos .bairro { grid-area: bairro; }
.endereco-campos .compl  { grid-area: compl; }
.endereco-campos .ref    { grid-area: ref; }
.endereco-campos input { width: 100%; min-width: 0; }
.endereco-campos .cep input { font-variant-numeric: tabular-nums; }

/* CEP com indicador de busca dentro do próprio campo */
.cep-linha { position: relative; display: block; }
.cep-girando {
    position: absolute;
    right: 9px;
    top: 50%;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    color: var(--terracota);
    pointer-events: none;
}
.cep-girando svg { width: 16px; height: 16px; animation: girar .9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* retorno da consulta: ocupa a linha inteira embaixo dos campos */
.cep-retorno {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    margin: 2px 0 0;
}
.cep-retorno svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }
.cep-retorno.ok { color: var(--oliva); }
.cep-retorno.erro { color: var(--alerta); }

@media (prefers-reduced-motion: reduce) {
    .cep-girando svg { animation: none; }
}

@media (max-width: 620px) {
    .endereco-campos {
        grid-template-columns: 1fr;
        grid-template-areas: "cep" "rua" "bairro" "compl" "ref";
    }
}

/* bloco de conferência do endereço, no PDV e na venda */
.entrega { margin-top: 18px; }

.entrega-endereco {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--oliva-bg);
    border-left: 3px solid var(--oliva);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    margin-top: 12px;
    font-size: 13.5px;
    line-height: 1.5;
}
.entrega-endereco svg {
    width: 17px; height: 17px;
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--oliva);
}
.entrega-endereco b { font-weight: 600; }

/* ==========================================================================
   Recibo: prévia e opções
   ========================================================================== */

/* a prévia imita a bobina: papel branco, mono, sombra leve */
.previa-papel {
    font-family: ui-monospace, "DejaVu Sans Mono", Menlo, monospace;
    font-size: 12px;
    line-height: 1.45;
    color: #000;
    background: #fff;
    border: 1px solid var(--linha);
    border-radius: var(--r-sm);
    padding: 14px 16px;
    margin: 0;
    overflow-x: auto;
    white-space: pre;
    box-shadow: inset 0 0 0 1px #fff, 0 1px 3px rgba(60,40,25,.07);
}

.previa-acoes {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* lista de caixas de seleção com respiro */
.opcoes {
    display: grid;
    gap: 11px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--linha-2);
}
.opcao {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    cursor: pointer;
    line-height: 1.45;
}
.opcao input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--oliva);
    cursor: pointer;
}
.opcao small { color: var(--tinta-2); }

textarea {
    resize: vertical;
    min-height: 62px;
    line-height: 1.5;
    font-size: 14.5px;
}

/* ações do topo da tela de venda */
.acoes-pedido { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 640px) {
    .acoes-pedido { width: 100%; }
    .acoes-pedido .btn { flex: 1 1 100%; }
    .previa-papel { font-size: 11px; }
}

/* ==========================================================================
   Avisos
   ========================================================================== */

.avisos { display: grid; gap: 9px; margin-bottom: 24px; }

.aviso {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 17px;
    border-radius: var(--r-sm);
    border-left: 3px solid;
    font-size: 14px;
    line-height: 1.55;
    background: var(--creme);
}
.aviso svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.aviso b { font-weight: 600; }

.aviso-erro   { background: var(--alerta-bg); border-color: var(--alerta); color: #7C2A12; }
.aviso-erro svg { color: var(--alerta); }
.aviso-taxa   { background: var(--aviso-bg); border-color: var(--aviso); color: #7A5410; }
.aviso-taxa svg { color: var(--aviso); }
.aviso-info   { background: #EDF1F4; border-color: #5B7A8C; color: #33505F; }
.aviso-info svg { color: #5B7A8C; }
.aviso-ok     { background: var(--oliva-bg); border-color: var(--oliva); color: #2C3D23; }
.aviso-ok svg { color: var(--oliva); }

.selo {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
}
.selo-ok   { background: var(--oliva-bg); color: var(--oliva); }
.selo-off  { background: var(--fundo-2); color: var(--tinta-2); }
.selo-taxa { background: var(--aviso-bg); color: #8A5F11; }

.salvo { font-size: 12.5px; color: var(--oliva); font-weight: 600; }

/* HTMX */
.htmx-indicator { opacity: 0; transition: opacity .18s ease; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-swapping { opacity: .5; }

/* ==========================================================================
   Gráfico
   ========================================================================== */

.grafico { position: relative; height: 210px; }

/* ==========================================================================
   Rodapé — Configurações mora aqui, fora do menu
   ========================================================================== */

.rodape {
    max-width: 1240px;
    margin: 0 auto;
    padding: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px solid var(--linha);
    font-size: 13px;
    color: var(--tinta-2);
}
.rodape a { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.rodape-links { display: flex; gap: 20px; flex-wrap: wrap; }
.rodape svg { width: 15px; height: 15px; }

/* ==========================================================================
   LOGIN — o único lugar com o arco do forno
   ========================================================================== */

.entrada {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 20px;
    background:
        radial-gradient(1100px 620px at 50% -8%, #8A3040 0%, transparent 62%),
        linear-gradient(170deg, var(--vinho-2) 0%, var(--vinho-3) 100%);
}

.entrada-cartao {
    width: 100%;
    max-width: 424px;
    background: var(--creme);
    /* O ARCO: topo abobadado como a boca do forno do emblema */
    border-radius: 210px 210px var(--r-lg) var(--r-lg) / 128px 128px var(--r-lg) var(--r-lg);
    padding: 54px 40px 36px;
    text-align: center;
    box-shadow: 0 3px 8px rgba(0,0,0,.2), 0 26px 70px rgba(0,0,0,.34);
    /* fio duplo do emblema: oliva por fora, terracota por dentro */
    border: 1px solid var(--oliva);
    outline: 1px solid var(--terracota);
    outline-offset: -7px;
    animation: subir .5s cubic-bezier(.2,.7,.3,1) both;
}

@keyframes subir {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.entrada-cartao img {
    width: 188px;
    max-width: 78%;
    height: auto;
    margin: 0 auto 22px;
    display: block;
}

.entrada-titulo {
    font-family: var(--display);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--tinta-2);
    margin: 0 0 26px;
}

.entrada form { display: grid; gap: 14px; text-align: left; }
.entrada .campo > span { letter-spacing: .12em; }
.entrada input { width: 100%; font-size: 16px; padding: 12px 14px; }
.entrada .btn { width: 100%; margin-top: 6px; padding: 13px; font-size: 15.5px; }

.entrada-erro {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--alerta-bg);
    border-left: 3px solid var(--alerta);
    color: #7C2A12;
    font-size: 13.5px;
    text-align: left;
    padding: 11px 14px;
    border-radius: var(--r-sm);
    margin-bottom: 18px;
}
.entrada-erro svg { width: 17px; height: 17px; flex: 0 0 auto; }

.entrada-pe {
    font-size: 11.5px;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--tinta-3);
    margin: 26px 0 0;
}

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

/* ==========================================================================
   KDS — painel da cozinha (/cozinha)

   Tela de telão: fica ligada o dia inteiro num monitor grande, lida a metros
   de distância por quem está com a mão na massa. Três decisões guiam o visual:

   1. FUNDO QUASE PRETO, carvão morno (não azulado). Cansa menos a vista em
      dez horas de serviço e faz verde/âmbar/vermelho saltarem — em fundo
      claro as três cores brigam com o papel de parede.

   2. A COR É O DADO, não enfeite. O status mora na trilha do topo do card, na
      borda, no cronômetro e na pastilha da fila lá em cima. Dá para ler a
      cozinha inteira de longe sem ler uma palavra.

   3. TIPO FUNCIONAL EM SANS PESADO. A Bodoni da casa é linda, mas serifa de
      fio fino desaparece a quatro metros num painel escuro — ela fica só na
      assinatura da barra e no estado vazio. Número do pedido, item e
      cronômetro são Figtree 800, com números tabulares para não dançarem a
      cada segundo.
   ========================================================================== */

body.kds {
    /* --- superfícies --- */
    --k-fundo:      #131110;   /* carvão quase preto, puxado para o quente */
    --k-topo:       #1B1815;   /* barra superior, um degrau acima do fundo */
    --k-card:       #221E1A;
    --k-card-2:     #2A2521;   /* cabeçalho do card */
    --k-linha:      rgba(248,242,233,.09);

    /* --- tinta --- */
    --k-txt:        #F8F2E9;
    --k-txt-2:      #B5A896;
    --k-txt-3:      #948776;

    /* --- os três estados (calibrados para brilhar em fundo escuro; o oliva
           e o terracota da casa ficam lamacentos aqui) --- */
    --k-ok:         #3ECF7A;
    --k-ok-bg:      #1A2A1F;
    --k-atencao:    #F5AE3C;
    --k-atencao-bg: #2C2418;
    --k-atraso:     #FF5540;
    --k-atraso-bg:  #2E1A16;

    --k-marca:      #D2703F;   /* terracota da casa, clareado para o escuro */
    --k-acao:       #2C6B3E;   /* verde do botão: mais fundo que o verde de
                                  status, para ação não virar estado */
    --k-acao-2:     #347A48;

    background: var(--k-fundo);
    background-image: none;
    color: var(--k-txt);
    /* a página não rola: só a grade rola. Numa TV isso mantém a barra
       superior sempre no lugar sem depender de position: sticky */
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------- barra --- */
.kds-topo-fixo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 26px;
    background: var(--k-topo);
    border-bottom: 1px solid var(--k-linha);
    box-shadow: 0 1px 0 rgba(0,0,0,.5);
}

.kds-marca { display: flex; align-items: center; gap: 14px; min-width: 0; }
.kds-marca img { height: 44px; width: auto; display: block; }
.kds-marca-txt { display: flex; flex-direction: column; line-height: 1; gap: 4px; }
.kds-marca-nome {
    font-family: var(--display);
    font-size: 27px;
    font-weight: 500;
    color: var(--k-txt);
}
.kds-marca-sub {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--k-marca);
}

.kds-topo-dir { display: flex; align-items: center; gap: 22px; }

/* Relógio: hora e minuto é o que se lê; o segundo serve só para provar que a
   tela está viva, então vai menor e apagado — pisca sem chamar atenção. */
.kds-relogio {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-size: 42px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    color: var(--k-txt);
}
.kds-seg {
    font-size: 24px;
    font-weight: 600;
    color: var(--k-txt-3);
    font-variant-numeric: tabular-nums;
    transition: color .4s ease;
}
/* Rede muda há mais de 20 s: os segundos ficam vermelhos. A tela não pode
   mostrar uma fila velha como se fosse a de agora — e isso não custa nenhum
   elemento novo na barra. */
body.kds-sem-rede .kds-seg { color: var(--k-atraso); }

/* Pastilha da fila. Ela assume a cor do pior card da tela: é o resumo de um
   olhar só, sem acrescentar nenhum elemento novo à barra. */
.kds-fila {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 17px;
    border-radius: 999px;
    background: var(--k-card);
    border: 1px solid var(--k-linha);
    transition: background-color .4s ease, border-color .4s ease;
}
.kds-fila b {
    font-size: 25px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--k-txt);
}
.kds-fila span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--k-txt-2);
}
.kds-fila[data-pior="normal"]   { background: var(--k-ok-bg);      border-color: rgba(62,207,122,.45); }
.kds-fila[data-pior="atencao"]  { background: var(--k-atencao-bg); border-color: var(--k-atencao); }
.kds-fila[data-pior="atencao"]  b { color: var(--k-atencao); }
.kds-fila[data-pior="atrasado"] { background: var(--k-atraso-bg);  border-color: var(--k-atraso); }
.kds-fila[data-pior="atrasado"] b { color: var(--k-atraso); }

.kds-som {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--k-txt-3);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}
.kds-som svg { width: 25px; height: 25px; display: block; }
.kds-som:hover { color: var(--k-txt); background: rgba(248,242,233,.07); }
.kds-som:focus-visible { outline: 2px solid var(--k-marca); outline-offset: 2px; }
.kds-som.ligado { color: var(--k-ok); }
/* um ícone por estado; o CSS decide qual aparece */
.kds-som .ico-mudo  { display: block; }
.kds-som .ico-som   { display: none; }
.kds-som.ligado .ico-mudo { display: none; }
.kds-som.ligado .ico-som  { display: block; }

/* O buffer do HTMX nunca aparece. O atributo hidden já resolveria, mas ele
   perde de qualquer regra de display — aqui não tem como escapar. */
#kds-buffer { display: none !important; }

/* ---------------------------------------------------------------- palco --- */
/* O seletor genérico `main` do sistema tem max-width 1240px e margin auto —
   aqui a largura é a tela inteira. */
.kds-palco {
    flex: 1 1 auto;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 20px 24px 18px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #3A342E transparent;
}
.kds-palco::-webkit-scrollbar { width: 10px; }
.kds-palco::-webkit-scrollbar-thumb {
    background: #3A342E;
    border-radius: 999px;
}

/* O invólucro que o JS gerencia. Ele precisa ser flex e esticar: é o que dá
   altura para o "nenhum pedido na fila" se centralizar de verdade e para a
   faixa de desfazer encostar embaixo. */
#kds-tela {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------- grade --- */
.kds-grade {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    align-content: start;
}
.kds-grade:empty { display: none; }

.kds-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--k-card);
    color: var(--k-txt);
    border: 1px solid var(--k-linha);
    border-radius: 18px;
    overflow: hidden;                 /* a base do botão herda o arredondado */
    box-shadow: 0 12px 30px rgba(0,0,0,.45);
    transition: opacity .28s ease, transform .28s ease,
                border-color .4s ease, background-color .4s ease;
}

/* entrada e saída: o card nasce um pouco abaixo e translúcido, e sai
   encolhendo. Sem isso a grade "pula" a cada atualização. */
.kds-card.entrando { opacity: 0; transform: translateY(16px) scale(.97); }
.kds-card.saindo   { opacity: 0; transform: scale(.93); }
/* enquanto o servidor confirma o Finalizar, o card apaga mas não sai:
   nada desaparece antes da confirmação */
.kds-card.confirmando { opacity: .45; }
.kds-card.confirmando .kds-btn { pointer-events: none; }

/* --- a trilha: quanto do tempo do pedido já queimou ---
   É o elemento que carrega esta tela. A barra enche da esquerda para a
   direita conforme o SLA é consumido e muda de cor no caminho, então dá para
   saber se o pedido está no fim do prazo sem ler o cronômetro. */
.kds-trilha {
    flex: 0 0 auto;
    height: 9px;
    background: rgba(248,242,233,.06);
}
.kds-trilha-fill {
    height: 100%;
    width: 0;
    border-radius: 0 4px 4px 0;
    background: var(--k-ok);
    transition: width 1s linear, background-color .4s ease;
}

.kds-card-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 18px 12px;
    background: var(--k-card-2);
    border-bottom: 1px solid var(--k-linha);
}
/* "#" é ruído, o número é o sinal: cerquilha pequena e apagada, dígito enorme */
.kds-num {
    display: flex;
    align-items: baseline;
    gap: 2px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.kds-num i {
    font-style: normal;
    font-size: 21px;
    font-weight: 700;
    color: var(--k-txt-3);
}
.kds-num b { font-size: 44px; font-weight: 800; }

.kds-topo-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.kds-entrada {
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--k-txt-2);
    line-height: 1;
}
.kds-canal {
    margin: 0;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(248,242,233,.08);
    border: 1px solid var(--k-linha);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--k-txt-2);
    line-height: 1.25;
    white-space: nowrap;
}

/* --- corpo: os itens são o motivo da tela existir --- */
.kds-corpo {
    flex: 1 1 auto;
    padding: 15px 18px 14px;
}
.kds-itens {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
    font-size: 27px;
    line-height: 1.2;
    font-weight: 600;
}
.kds-itens li { display: flex; gap: 10px; }
/* a quantidade fica em segundo plano; o nome da pizza é o que se lê de longe */
.kds-itens b {
    font-weight: 800;
    color: var(--k-txt-2);
    font-variant-numeric: tabular-nums;
}
/* Observação do pedido ("sem cebola") — a faixa INVERTIDA.
   É a única superfície clara da tela, e é de propósito: significa "leia isto".
   Não podia usar verde/âmbar/vermelho (esses já querem dizer prazo — uma obs
   em âmbar num card no tempo seria lida como "atenção"), e nem um tom quente
   escuro, que se perderia dentro do card vermelho do atrasado. Clara, ela
   salta igual nos três estados. */
.kds-obs {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 12px 0 0;
    padding: 7px 11px 8px;
    border-radius: 8px;
    background: #F5EDE1;
    /* menor que o nome da pizza de propósito: a pizza é o que se faz, a obs é
       um ajuste nela. Quem carrega o destaque aqui é a faixa clara, não o
       tamanho da letra */
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: #241B14;
}
.kds-obs-rot {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9C4824;              /* terracota da casa, legível no creme */
}

.kds-cliente {
    margin: 12px 0 0;
    font-size: 16.5px;
    font-weight: 600;
    color: var(--k-txt-3);
}

/* --- cronômetro --- */
.kds-tempo {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 18px 13px;
    border-top: 1px solid var(--k-linha);
}
.kds-cron {
    font-size: 45px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--k-ok);
    transition: color .4s ease;
}
.kds-selo {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: right;
    color: var(--k-txt-3);
    transition: color .4s ease;
}

/* --- ação --- */
.kds-btn {
    font-family: var(--corpo);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .02em;
    width: 100%;
    color: #F2FBF4;
    background: var(--k-acao);
    border: 0;
    border-radius: 0;
    padding: 19px 16px;
    cursor: pointer;
    transition: background-color .13s ease;
}
.kds-btn:hover { background: var(--k-acao-2); }
.kds-btn:active { background: #245833; }
.kds-btn:focus-visible { outline: 3px solid #9BE8B6; outline-offset: -5px; }

/* --- os três estados --- */
.kds-normal  { border-color: rgba(62,207,122,.28); }

.kds-atencao {
    background: var(--k-atencao-bg);
    border-color: rgba(245,174,60,.5);
}
.kds-atencao .kds-card-topo   { background: rgba(245,174,60,.09); }
.kds-atencao .kds-trilha-fill { background: var(--k-atencao); }
.kds-atencao .kds-cron        { color: var(--k-atencao); }
.kds-atencao .kds-selo        { color: var(--k-atencao); }

/* Atrasado: vermelho pulsando, para ser visto do outro lado da cozinha.
   A pulsação é a OPACIDADE de um anel interno — só isso. O navegador resolve
   no compositor, sem repintar o card, o que importa numa TV que fica horas
   ligada. */
/* A borda fixa aqui é DISCRETA de propósito: se ela já fosse vermelho cheio,
   o anel pulsante por cima não teria para onde crescer e a pulsação
   desapareceria a três metros. O contraste é o aviso. */
.kds-atrasado {
    background: var(--k-atraso-bg);
    border-color: rgba(255,85,64,.28);
    box-shadow: 0 12px 30px rgba(0,0,0,.5), 0 0 30px rgba(255,85,64,.14);
}
.kds-atrasado .kds-card-topo   { background: rgba(255,85,64,.11); }
.kds-atrasado .kds-trilha-fill { background: var(--k-atraso); }
.kds-atrasado .kds-cron        { color: var(--k-atraso); }
.kds-atrasado .kds-selo        { color: var(--k-atraso); }
.kds-atrasado::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 4px var(--k-atraso),
                inset 0 0 60px rgba(255,85,64,.45);
    /* só a OPACIDADE anima: o navegador resolve no compositor, sem repintar o
       card. É o que deixa quatro cards pulsando numa TV por dez horas sem
       esquentar o aparelho. 1,7 s com ease-in-out respira, não pisca. */
    animation: kds-pulso 1.7s ease-in-out infinite;
}
@keyframes kds-pulso {
    0%, 100% { opacity: .12; }
    50%      { opacity: 1; }
}

/* Quem pediu menos movimento não perde o aviso: o anel fica firme e aceso. */
@media (prefers-reduced-motion: reduce) {
    .kds-atrasado::after { animation: none; opacity: 1; }
    .kds-card { transition: none; }
    .kds-card.entrando, .kds-card.saindo { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ fila vazia --- */
.kds-vazio {
    flex: 1 1 auto;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 6px;
    text-align: center;
    padding: 40px 20px 60px;
}
/* Sem filtro: dessaturar o emblema o transformava numa mancha cinza. Com as
   cores dele e opacidade baixa ele fica uma marca-d'água morna, no tom da
   casa, e ainda dá para ler "Casa Serenità". */
.kds-vazio img {
    width: 140px;
    height: auto;
    margin-bottom: 20px;
    opacity: .34;
}
/* Um seletor de classe + elemento (.kds-vazio p) venceria .kds-vazio-titulo e
   comeria o tamanho do título. Cada texto tem a sua própria classe. */
.kds-vazio-titulo {
    font-family: var(--display);
    font-size: 42px;
    font-weight: 500;
    line-height: 1.15;
    color: #E6DACB;
    margin: 0;
}
.kds-vazio-sub {
    margin: 4px 0 0;
    font-size: 18px;
    color: var(--k-txt-3);
}

/* --------------------------------------------------------------- voltar --- */
/* Caminho de volta: "Finalizar" é um botão grande numa TV, e errar é fácil. */
.kds-recentes {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    /* auto = encosta no rodapé do palco: é barra de serviço, não conteúdo */
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--k-linha);
}
.kds-recentes-rot {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--k-txt-3);
    font-weight: 700;
}
.kds-voltar {
    font-family: var(--corpo);
    font-size: 14px;
    font-weight: 700;
    color: var(--k-txt-2);
    background: rgba(248,242,233,.05);
    border: 1px solid var(--k-linha);
    border-radius: 999px;
    padding: 8px 15px;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.kds-voltar:hover { background: rgba(248,242,233,.12); color: var(--k-txt); }

/* ------------------------------------------------------ telas e tamanhos --- */
/* Monitor grande: mais colunas e tipo maior, o telão da cozinha */
@media (min-width: 1700px) {
    .kds-grade { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 20px; }
    .kds-num b { font-size: 52px; }
    .kds-itens { font-size: 30px; }
    .kds-obs { font-size: 19px; }
    .kds-cron { font-size: 52px; }
    .kds-btn { font-size: 24px; padding: 21px 16px; }
    .kds-relogio { font-size: 48px; }
}

/* Tablet/celular: serve para conferir a fila na mão */
@media (max-width: 700px) {
    body.kds { height: auto; min-height: 100vh; overflow: visible; }
    .kds-palco { overflow: visible; padding: 15px 14px 20px; }
    .kds-topo-fixo { padding: 10px 14px; gap: 12px; flex-wrap: wrap; }
    .kds-marca img { height: 34px; }
    .kds-marca-nome { font-size: 20px; }
    .kds-marca-sub { display: none; }
    .kds-topo-dir { gap: 12px; }
    .kds-relogio { font-size: 27px; }
    .kds-seg { font-size: 16px; }
    .kds-fila { padding: 7px 13px; }
    .kds-fila b { font-size: 19px; }
    .kds-fila span { font-size: 11px; }
    .kds-grade { grid-template-columns: 1fr; gap: 13px; }
    .kds-num b { font-size: 34px; }
    .kds-itens { font-size: 22px; }
    .kds-obs { font-size: 15.5px; }
    .kds-cron { font-size: 33px; }
    .kds-btn { font-size: 19px; padding: 16px; }
}


/* Observação do pedido na tela de conferência da venda (tema claro) */
.venda-obs {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 16px 0 0;
    padding: 11px 14px;
    border-radius: var(--r-sm);
    border-left: 4px solid var(--terracota);
    background: var(--aviso-bg);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--tinta);
}
.venda-obs-rot {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--terracota);
}

/* opção "manter conectado" na tela de entrada */
.entrada-manter { margin-top: 4px; font-size: 13.5px; }
.entrada-manter small { color: var(--tinta-2); }

/* ==========================================================================
   Celular e tablet
   ========================================================================== */

@media (max-width: 860px) {
    .grade { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    body { font-size: 15px; }
    main { padding: 22px 15px 34px; }

    .topo-linha { padding: 11px 15px 10px; gap: 11px; }
    .marca img { height: 38px; }
    .marca-nome { font-size: 17px; }
    .marca-sub { display: none; }
    .topo-usuario { display: none; }
    .menu-linha { padding: 0 15px; }
    .menu-linha a { padding: 11px 12px 10px; font-size: 13.5px; }
    .menu-linha svg { display: none; }

    h1 { font-size: 27px; }
    .pag-topo { align-items: stretch; gap: 14px; }
    .pag-topo .btn-grande { width: 100%; }

    .metricas { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 11px; }
    .card { padding: 15px 16px; }
    .card-ico { width: 30px; height: 30px; border-radius: 9px; margin-bottom: 10px; }
    .card-ico svg { width: 15px; height: 15px; }
    .card-valor { font-size: 24px; }

    .painel { padding: 18px 17px; border-radius: var(--r-sm); }
    .canais { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
    .canal-preco { font-size: 23px; }

    .form-linha { gap: 11px 14px; }
    .form-linha .campo { flex: 1 1 150px; }
    .form-linha .campo input, .form-linha .campo select { width: 100%; }
    .form-linha .btn { flex: 1 1 100%; }

    .entrada-cartao { padding: 42px 24px 30px; }
    .entrada-cartao img { width: 150px; }
}