/* =================================================================
   COMANDA FÁCIL — folha de estilo
   Paleta evoluída do projeto original: marrom quente + dourado.
   Estrutura: tokens → base → componentes → telas → modal → impressão
   ================================================================= */

/* ------------------------------------------------------------ TOKENS */
:root {

    /* superfícies */
    --fundo:          #f6f2ec;
    --superficie:     #ffffff;
    --superficie-alt: #fbf8f3;
    --borda:          #e6ddd1;
    --borda-forte:    #d3c5b2;

    /* identidade (marrom original do projeto) */
    --primaria:        #6a4028;
    --primaria-forte:  #4a2c1a;
    --primaria-suave:  #f0e6dd;
    --dourado:         #c99a4a;
    --dourado-suave:   #fdf3e0;

    /* estados */
    --ok:       #177a45;
    --ok-suave: #e6f5ec;
    --alerta:   #b45309;
    --aviso:    #d97706;
    --erro:     #b42318;
    --erro-suave: #fdecea;
    --info:     #2563a8;

    /* texto */
    --texto:      #2b211b;
    --texto-suave: #6b5d52;
    --texto-inv:  #ffffff;

    /* tipografia */
    --fonte: system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

    /* medidas */
    --raio:        12px;
    --raio-pequeno: 8px;
    --raio-grande:  18px;
    --sombra:       0 1px 2px rgba(43, 33, 27, .06),
                    0 6px 20px rgba(43, 33, 27, .07);
    --sombra-alta:  0 12px 40px rgba(43, 33, 27, .18);
    --largura:      1280px;
    --topo-altura:  62px;

    /* animação */
    --rapido: 140ms;
    --suave:  240ms;
}


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

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

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 16px;
    line-height: 1.5;
    color: var(--texto);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 700; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .95rem; }

p { margin: 0; }

img, svg { max-width: 100%; display: block; }

b, strong { font-weight: 700; }

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

/* foco visível em TUDO (a11y) */
:focus-visible {
    outline: 3px solid var(--dourado);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection { background: var(--dourado-suave); }

/* utilitários */
.oculto-visual {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.pular {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 12px 18px;
    background: var(--primaria);
    color: var(--texto-inv);
    border-radius: 0 0 var(--raio-pequeno) 0;
    font-weight: 600;
    text-decoration: none;
}
.pular:focus { left: 0; }

[hidden] { display: none !important; }


/* ----------------------------------------------------------- BOTÕES */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .62rem 1.05rem;
    border: 1px solid transparent;
    border-radius: var(--raio-pequeno);
    background: var(--superficie-alt);
    color: var(--texto);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--rapido) ease,
                border-color var(--rapido) ease,
                transform var(--rapido) ease,
                box-shadow var(--rapido) ease;
    min-height: 42px;
}

.btn:hover { background: var(--fundo); }
.btn:active { transform: translateY(1px); }

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

.btn--principal {
    background: var(--primaria);
    color: var(--texto-inv);
    border-color: var(--primaria);
}
.btn--principal:hover { background: var(--primaria-forte); border-color: var(--primaria-forte); }

.btn--cozinha {
    background: var(--dourado);
    color: var(--primaria-forte);
    border-color: var(--dourado);
}
.btn--cozinha:hover { background: #b98a3a; }

.btn--fantasma {
    background: transparent;
    border-color: var(--borda);
    color: var(--texto-suave);
}
.btn--fantasma:hover { background: var(--superficie-alt); color: var(--texto); }

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

.btn--perigo {
    background: var(--erro-suave);
    color: var(--erro);
    border-color: #f3c9c6;
}
.btn--perigo:hover { background: var(--erro); color: var(--texto-inv); border-color: var(--erro); }

.btn--pequeno {
    padding: .38rem .7rem;
    font-size: .85rem;
    min-height: 34px;
}

.btn-olho {
    padding: 0 .8rem;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-pequeno);
    background: var(--superficie-alt);
    color: var(--texto-suave);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.btn-olho:hover { background: var(--primaria-suave); color: var(--primaria); }

.botoes-empilhados {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: .8rem;
}


/* ---------------------------------------------------------- CAMPOS */
.campo { margin-bottom: 1rem; }

.campo label,
.campo legend {
    display: block;
    margin-bottom: .32rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--texto);
}

.campo input[type="text"],
.campo input[type="password"],
.campo input[type="number"],
.campo input[type="search"],
.campo input[type="date"],
.campo input[type="tel"],
.campo select,
.campo textarea {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-pequeno);
    background: var(--superficie);
    transition: border-color var(--rapido) ease, box-shadow var(--rapido) ease;
    min-height: 44px;
}

.campo input:focus,
.campo select:focus {
    outline: none;
    border-color: var(--primaria);
    box-shadow: 0 0 0 3px var(--primaria-suave);
}

.campo input::placeholder { color: #a3968b; }

.campo input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--primaria);
    vertical-align: -3px;
    margin-right: .4rem;
}

.campo__ajuda {
    margin-top: .3rem;
    font-size: .8rem;
    color: var(--texto-suave);
}

.campo-com-botao {
    display: flex;
    gap: .5rem;
    align-items: stretch;
}
.campo-com-botao input { flex: 1; min-width: 0; }

.campo--busca { flex: 1; min-width: 200px; margin-bottom: 0; }

.campo--data { margin-bottom: 0; }
.campo--data label { font-size: .78rem; color: var(--texto-suave); margin-bottom: .1rem; }

fieldset.campo {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: .9rem 1rem 1rem;
}
fieldset.campo legend { padding: 0 .35rem; font-size: .95rem; }

.erro {
    margin: .6rem 0 0;
    padding: .55rem .8rem;
    background: var(--erro-suave);
    color: var(--erro);
    border: 1px solid #f3c9c6;
    border-radius: var(--raio-pequeno);
    font-size: .88rem;
    font-weight: 600;
}

.nota {
    font-size: .82rem;
    color: var(--texto-suave);
    margin-top: .5rem;
}

.separador {
    border: none;
    border-top: 1px solid var(--borda);
    margin: 1.4rem 0;
}


/* ----------------------------------------------------------- LOGIN */
.tela-login {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(1100px 500px at 80% -10%, rgba(201,154,74,.28), transparent 60%),
        linear-gradient(140deg, var(--primaria-forte), var(--primaria) 65%, #7d4a2c);
}

.login-box {
    width: 100%;
    max-width: 400px;
    background: var(--superficie);
    border-radius: var(--raio-grande);
    padding: 2.2rem 2rem;
    box-shadow: var(--sombra-alta);
    animation: subir var(--suave) ease both;
}

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

.login-marca { text-align: center; margin-bottom: 1.6rem; }
.login-marca img { margin: 0 auto .6rem; }
.login-marca h1 { font-size: 1.65rem; letter-spacing: -.01em; }
.login-marca h1 b { color: var(--primaria); }
.login-sub { color: var(--texto-suave); font-size: .9rem; margin-top: .2rem; }

.login-erro {
    margin-bottom: 1rem;
    padding: .6rem .8rem;
    background: var(--erro-suave);
    color: var(--erro);
    border: 1px solid #f3c9c6;
    border-radius: var(--raio-pequeno);
    font-size: .88rem;
    font-weight: 600;
}

.login-box .btn--principal { width: 100%; margin-top: .4rem; }

.login-dica {
    margin-top: 1.3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--borda);
    font-size: .8rem;
    color: var(--texto-suave);
    text-align: center;
}

/* Abas "Entrar / Criar conta" — reaproveita .abas/.aba, ajustada ao card. */
.login-abas { margin-top: 1.2rem; gap: .2rem; }
.login-abas .aba { flex: 1; text-align: center; padding: .55rem .5rem; font-size: .92rem; }

/* Texto de apoio acima dos campos do cadastro. */
.cadastro-texto {
    margin: 0 0 1rem;
    padding: .65rem .8rem;
    background: var(--primaria-suave);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    font-size: .82rem;
    line-height: 1.5;
    color: var(--texto-suave);
}
.cadastro-texto b { color: var(--primaria); }


/* ------------------------------------------------------------- TOPO */
.sistema { min-height: 100vh; display: flex; flex-direction: column; }

.topo {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: var(--topo-altura);
    padding: 0 1rem;
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    box-shadow: 0 1px 3px rgba(43,33,27,.05);
}

.topo__marca {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--primaria);
    white-space: nowrap;
}
.topo__nome { font-size: 1rem; }

.topo__nav {
    display: flex;
    gap: .25rem;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: thin;
    padding: .2rem 0;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .8rem;
    border: none;
    border-radius: var(--raio-pequeno);
    background: transparent;
    color: var(--texto-suave);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--rapido) ease, color var(--rapido) ease;
}
.nav-btn:hover { background: var(--superficie-alt); color: var(--texto); }
.nav-btn.ativo { background: var(--primaria-suave); color: var(--primaria); }

.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--aviso);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}

.topo__usuario { display: flex; align-items: center; gap: .6rem; }

.topo__quem {
    font-size: .85rem;
    color: var(--texto-suave);
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topo__quem b { color: var(--texto); }


/* ------------------------------------------------------------- TELAS */
#conteudo { flex: 1; width: 100%; max-width: var(--largura); margin: 0 auto; padding: 1.4rem 1rem 3rem; }

.tela__cabecalho {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}
.tela__cabecalho h2 { letter-spacing: -.01em; }
.tela__cabecalho p { color: var(--texto-suave); font-size: .9rem; margin-top: .15rem; }
.tela__acoes { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }


/* -------------------------------------------------------- FILTROS */
.barra-filtros {
    display: flex;
    gap: .8rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.chips { display: flex; gap: .4rem; flex-wrap: wrap; }

.chip {
    padding: .42rem .8rem;
    border: 1px solid var(--borda-forte);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--texto-suave);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--rapido) ease;
}
.chip:hover { border-color: var(--primaria); color: var(--primaria); }
.chip.ativo { background: var(--primaria); color: var(--texto-inv); border-color: var(--primaria); }


/* ------------------------------------------------------ GRADE CARDS */
.grade-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: .9rem;
}

.card {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 1rem;
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    transition: transform var(--rapido) ease, box-shadow var(--rapido) ease,
                border-color var(--rapido) ease;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(43,33,27,.12);
    border-color: var(--borda-forte);
}

.card__topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

.card__numero {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primaria);
    word-break: break-word;
}

.card__lista { margin: 0; padding-left: 1.1rem; font-size: .88rem; color: var(--texto-suave); }
.card__lista li { margin-bottom: .12rem; }

.card__total { font-size: 1.15rem; font-weight: 700; }

.card__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: .6rem;
    border-top: 1px dashed var(--borda);
}

.card__meta { font-size: .78rem; color: var(--texto-suave); }

.card__acoes { display: flex; gap: .4rem; flex-wrap: wrap; }

.card--vazia {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--texto-suave);
    background: var(--superficie-alt);
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio);
    grid-column: 1 / -1;
}


/* --------------------------------------------------------- STATUS */
.status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .6rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}
.status--aberta     { background: var(--dourado-suave); color: #8a5a00; }
.status--preparo    { background: #fdece0; color: var(--alerta); }
.status--pronto     { background: var(--ok-suave); color: var(--ok); }
.status--estornada  { background: var(--erro-suave); color: var(--erro); }

.tempo {
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--superficie-alt);
    border: 1px solid var(--borda);
    font-size: .78rem;
    font-weight: 700;
    color: var(--texto-suave);
    font-variant-numeric: tabular-nums;
}
.tempo--atrasado { background: var(--erro-suave); color: var(--erro); border-color: #f3c9c6; }


/* --------------------------------------------------- TELA DA COMANDA */
.comanda-topo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.numero-destaque { color: var(--primaria); }

.comanda-meta {
    display: flex;
    gap: .9rem;
    flex-wrap: wrap;
    margin-top: .3rem;
    font-size: .85rem;
    color: var(--texto-suave);
}

.comanda-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.1rem;
    align-items: start;
}


/* ------------------------------------------------------- PRODUTOS */
.produtos-area {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 1rem;
}

.categorias {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin: .9rem 0;
}

.grade-produtos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: .7rem;
    max-height: 58vh;
    overflow-y: auto;
    padding: .2rem;
}

.produto {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .8rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    background: var(--superficie-alt);
    text-align: left;
    cursor: pointer;
    transition: all var(--rapido) ease;
}
.produto:hover {
    border-color: var(--primaria);
    background: var(--primaria-suave);
    transform: translateY(-1px);
}
.produto:active { transform: scale(.98); }

.produto__nome {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}

.produto__preco {
    font-size: .98rem;
    font-weight: 700;
    color: var(--primaria);
    font-variant-numeric: tabular-nums;
}

.vazio {
    grid-column: 1 / -1;
    padding: 2.2rem 1rem;
    text-align: center;
    color: var(--texto-suave);
    font-size: .9rem;
}


/* ---------------------------------------------------------- RESUMO */
.resumo {
    position: sticky;
    top: calc(var(--topo-altura) + 14px);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 1rem;
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--topo-altura) - 28px);
}

.resumo h3 { margin-bottom: .8rem; padding-bottom: .7rem; border-bottom: 1px solid var(--borda); }

.itens-resumo {
    overflow-y: auto;
    flex: 1;
    margin-bottom: .8rem;
    max-height: 42vh;
}

.item-resumo {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .4rem .6rem;
    align-items: center;
    padding: .6rem 0;
    border-bottom: 1px dashed var(--borda);
}
.item-resumo:last-child { border-bottom: none; }

.item-resumo__nome { font-size: .9rem; font-weight: 600; word-break: break-word; }
.item-resumo__preco { font-size: .85rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.item-resumo__total { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

.controles-qtd {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    grid-column: 1 / -1;
}

.qtd-btn {
    width: 30px; height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-pequeno);
    background: var(--superficie);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    color: var(--texto);
}
.qtd-btn:hover { background: var(--primaria-suave); border-color: var(--primaria); color: var(--primaria); }

.qtd-valor {
    min-width: 26px;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.btn-remover {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--erro);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    padding: .25rem .4rem;
    border-radius: var(--raio-pequeno);
}
.btn-remover:hover { background: var(--erro-suave); }

.resumo__totais {
    padding-top: .7rem;
    border-top: 2px solid var(--borda);
    margin-bottom: .9rem;
}

.linha-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    font-size: .92rem;
    color: var(--texto-suave);
    margin-bottom: .3rem;
}
.linha-total strong { color: var(--texto); font-variant-numeric: tabular-nums; }

.linha-total--grande { font-size: 1.1rem; }
.linha-total--grande strong { font-size: 1.5rem; color: var(--primaria); }
.linha-total--grande strong.negativo { color: var(--ok); }

.resumo__botoes { display: flex; flex-direction: column; gap: .5rem; }
.resumo__botoes .btn { width: 100%; }


/* --------------------------------------------------------- CAIXA */
.grade-metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .8rem;
    margin-bottom: 1.1rem;
}

.metrica {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: .9rem 1rem;
    box-shadow: var(--sombra);
}
.metrica h3 { font-size: .82rem; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.metrica__valor { font-size: 1.5rem; font-weight: 700; margin: .25rem 0 .1rem; font-variant-numeric: tabular-nums; }
.metrica p { font-size: .8rem; color: var(--texto-suave); }
.metrica--principal { background: var(--primaria); border-color: var(--primaria); }
.metrica--principal h3,
.metrica--principal p { color: rgba(255,255,255,.78); }
.metrica--principal .metrica__valor { color: #fff; }

.painel-duas-colunas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.painel {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 1rem;
    box-shadow: var(--sombra);
}

.painel h3 { margin-bottom: .8rem; }
.painel h4 { margin-bottom: .5rem; color: var(--texto-suave); }

.painel__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    flex-wrap: wrap;
    margin-bottom: .8rem;
}
.painel__cabecalho h3 { margin-bottom: 0; }

.tabela-simples { display: flex; flex-direction: column; }

.tabela-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .55rem 0;
    border-bottom: 1px dashed var(--borda);
    font-size: .9rem;
}
.tabela-linha:last-child { border-bottom: none; }
.tabela-linha__valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-linha--total { border-top: 2px solid var(--borda); border-bottom: none; margin-top: .3rem; padding-top: .7rem; font-size: 1rem; }
.tabela-linha--estornada .tabela-linha__valor { text-decoration: line-through; color: var(--erro); }

.barra-progresso {
    height: 6px;
    border-radius: 999px;
    background: var(--fundo);
    overflow: hidden;
    margin-top: .3rem;
}
.barra-progresso span { display: block; height: 100%; background: var(--dourado); border-radius: 999px; }

.venda-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    flex-wrap: wrap;
    padding: .7rem 0;
    border-bottom: 1px dashed var(--borda);
}
.venda-card:last-child { border-bottom: none; }
.venda-card__info { flex: 1; min-width: 180px; }
.venda-card__titulo { font-weight: 700; }
.venda-card__detalhe { font-size: .82rem; color: var(--texto-suave); margin-top: .15rem; }
.venda-card__valor { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.venda-card--estornada { opacity: .68; }
.venda-card--estornada .venda-card__valor { text-decoration: line-through; color: var(--erro); }


/* ------------------------------------------------------- CADASTROS */
.abas {
    display: flex;
    gap: .3rem;
    margin-bottom: 1.1rem;
    border-bottom: 2px solid var(--borda);
}

.aba {
    padding: .6rem 1.1rem;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    background: transparent;
    color: var(--texto-suave);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--rapido) ease;
}
.aba:hover { color: var(--texto); }
.aba.ativo { color: var(--primaria); border-bottom-color: var(--primaria); }

.tabela-wrap {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    overflow: hidden;
    box-shadow: var(--sombra);
}

table { width: 100%; border-collapse: collapse; }

thead th {
    text-align: left;
    padding: .7rem .9rem;
    background: var(--superficie-alt);
    border-bottom: 1px solid var(--borda);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-suave);
    white-space: nowrap;
}

tbody td {
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--borda);
    font-size: .9rem;
    vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--superficie-alt); }

td.alinha-direita, th.alinha-direita { text-align: right; }
td.acoes { white-space: nowrap; }
td.acoes .btn + .btn { margin-left: .35rem; }

.celula-valor { font-variant-numeric: tabular-nums; font-weight: 600; }

.selo {
    display: inline-block;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}
.selo--admin  { background: var(--dourado-suave); color: #8a5a00; }
.selo--func   { background: var(--primaria-suave); color: var(--primaria); }
.selo--ativo  { background: var(--ok-suave); color: var(--ok); }
.selo--inativo{ background: var(--fundo); color: var(--texto-suave); }


/* -------------------------------------------------------- CONFIG */
.sobre p { margin-bottom: .5rem; font-size: .9rem; }


/* --------------------------------------------------------- MODAIS */
.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(43, 33, 27, .55);
    backdrop-filter: blur(3px);
    animation: aparecer var(--rapido) ease both;
}

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

.modal__conteudo {
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--superficie);
    border-radius: var(--raio-grande);
    padding: 1.5rem;
    box-shadow: var(--sombra-alta);
    animation: subir var(--suave) ease both;
}

.modal--largo .modal__conteudo { max-width: 560px; }

.modal__conteudo h2 { margin-bottom: 1rem; }

.modal__texto {
    color: var(--texto-suave);
    font-size: .92rem;
    margin-bottom: 1rem;
    line-height: 1.55;
}

.modal__resumo {
    margin-bottom: 1.1rem;
    padding: .7rem .9rem;
    background: var(--primaria-suave);
    border-radius: var(--raio-pequeno);
    font-size: .92rem;
    color: var(--texto-suave);
}
.modal__resumo strong { color: var(--primaria); font-size: 1.2rem; margin-left: .3rem; }

.modal__botoes {
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 1.3rem;
}

.grade-pagamentos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .6rem;
    margin-top: .6rem;
}

.pagamento-campo label {
    display: block;
    margin-bottom: .25rem;
    font-size: .82rem;
    color: var(--texto-suave);
}
.pagamento-campo input {
    width: 100%;
    padding: .5rem .6rem;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-pequeno);
    font-variant-numeric: tabular-nums;
    min-height: 42px;
}
.pagamento-campo input:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-suave); }
.pagamento-campo input.preenchido { border-color: var(--ok); background: var(--ok-suave); }


/* --------------------------------------------------------- TOASTS */
.toasts {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    max-width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .75rem .9rem;
    border-radius: var(--raio-pequeno);
    background: var(--texto);
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    box-shadow: var(--sombra-alta);
    animation: toastEntrar var(--suave) ease both;
}

@keyframes toastEntrar {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.toast--ok     { background: var(--ok); }
.toast--erro   { background: var(--erro); }
.toast--aviso  { background: var(--alerta); }
.toast--info   { background: var(--info); }

.toast.saindo { animation: toastSair var(--suave) ease both; }
@keyframes toastSair { to { opacity: 0; transform: translateY(8px); } }


/* ------------------------------------------------------ IMPRESSÃO */
.area-impressao { display: none; }

@media print {

    @page { margin: 12mm; }

    body { background: #fff; font-size: 12pt; }

    .tela-login, .topo, .toasts, .pular,
    .tela__acoes, .barra-filtros, .abas,
    .card__acoes, .resumo__botoes, .painel__cabecalho .chips,
    #telaComandas, #telaComanda, #telaCozinha,
    #telaCadastros, #telaConfig,
    .modal, .btn, button {
        display: none !important;
    }

    .sistema, #conteudo { display: block !important; max-width: none; padding: 0; margin: 0; }
    .tela { display: none !important; }
    .painel, .metrica, .card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
    }
    .grade-metricas { grid-template-columns: repeat(3, 1fr); }
    .metrica--principal { background: #fff !important; border: 2px solid #000 !important; }
    .metrica--principal .metrica__valor,
    .metrica--principal h3,
    .metrica--principal p { color: #000 !important; }

    .area-impressao { display: block !important; }
    .area-impressao .ticket {
        width: 76mm;
        font-family: "Courier New", monospace;
        font-size: 11pt;
        color: #000;
    }
    .area-impressao .ticket__titulo { text-align: center; font-weight: 700; font-size: 13pt; margin-bottom: 4pt; }
    .area-impressao .ticket__linha { border-top: 1px dashed #000; margin: 4pt 0; }
    .area-impressao .ticket__item { display: flex; justify-content: space-between; gap: 6pt; }
    .area-impressao .ticket__total { font-weight: 700; font-size: 12pt; }
    .area-impressao .ticket__pe { text-align: center; font-size: 9pt; margin-top: 6pt; }
}


/* ------------------------------------------------------- RESPONSIVO */
@media (max-width: 1080px) {
    .comanda-layout { grid-template-columns: 1fr 300px; }
}

@media (max-width: 900px) {
    .comanda-layout { grid-template-columns: 1fr; }
    .resumo { position: static; max-height: none; }
    .itens-resumo { max-height: none; }
    .grade-produtos { max-height: none; }
}

@media (max-width: 780px) {
    :root { --topo-altura: auto; }

    .topo {
        flex-wrap: wrap;
        height: auto;
        padding: .6rem .8rem;
        gap: .5rem;
    }
    .topo__nav { order: 3; width: 100%; padding-bottom: .1rem; }
    .topo__usuario { margin-left: auto; }
    .topo__quem { max-width: 130px; }

    #conteudo { padding: 1rem .8rem 2.5rem; }

    .tela__cabecalho { align-items: flex-start; }
    .tela__acoes { width: 100%; }
    .tela__acoes .btn { flex: 1; }

    .modal { padding: 0; align-items: flex-end; }
    .modal__conteudo {
        max-width: none;
        max-height: 94vh;
        border-radius: var(--raio-grande) var(--raio-grande) 0 0;
        animation: subirMobile var(--suave) ease both;
    }
    @keyframes subirMobile { from { transform: translateY(30px); opacity: .5; } to { transform: none; opacity: 1; } }

    .toasts { left: 16px; right: 16px; max-width: none; }

    /* tabelas viram cartões */
    .tabela-wrap thead { display: none; }
    .tabela-wrap tbody tr {
        display: block;
        padding: .8rem;
        border-bottom: 1px solid var(--borda);
    }
    .tabela-wrap tbody td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: .3rem 0;
        border: none;
        text-align: right;
    }
    .tabela-wrap tbody td::before {
        content: attr(data-rotulo);
        font-weight: 700;
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--texto-suave);
        text-align: left;
    }
    .tabela-wrap tbody td.acoes { justify-content: flex-end; padding-top: .6rem; }
}

@media (max-width: 480px) {
    .grade-cards { grid-template-columns: 1fr; }
    .grade-produtos { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
    .login-box { padding: 1.6rem 1.2rem; }
    .metrica__valor { font-size: 1.25rem; }
}


/* ------------------------------------------------- MOVIMENTO REDUZIDO */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}