/* ==========================================================================
   KDS — Painel da Cozinha (v1.2)
   Um card por MESA/SESSÃO. Leitura rápida, textos grandes, status com
   diferenciação visual forte. Complementa css/style.css.
   ========================================================================== */

body { background-color: var(--bg-principal); margin: 0; }

.topo-kds {
    background: var(--bg-secundario); padding: 16px 20px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; border-bottom: 1px solid var(--borda);
    position: sticky; top: 0; z-index: 50; flex-wrap: wrap;
}
.topo-kds h1 { color: var(--cor-primaria); font-size: 1.5rem; margin: 0; }
.topo-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-kds {
    padding: 12px 18px; font-size: 1.05rem; font-weight: bold;
    border: none; border-radius: 8px; cursor: pointer; white-space: nowrap;
}

/* ---- GRADE DE MESAS (1 card por sessão) ---- */
.grid-mesas {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px; padding: 20px;
}
.card-mesa {
    background: var(--bg-secundario); border-radius: 12px;
    border: 1px solid var(--borda); overflow: hidden; cursor: pointer;
    display: flex; flex-direction: column;
    box-shadow: 0 4px 12px rgba(0,0,0,.10); transition: transform .15s;
}
.card-mesa:hover { transform: translateY(-2px); }
.card-topo {
    padding: 16px; text-align: center; color: #fff;
    font-weight: bold; border-bottom: 4px solid rgba(0,0,0,.10);
}
.card-mesa-numero { font-size: 2rem; line-height: 1.1; }
.card-status { font-size: .95rem; font-weight: normal; opacity: .95; }
.card-sessao { font-size: .8rem; font-weight: normal; opacity: .85; }

.status-novo { background-color: #e57373; }
.status-preparo { background-color: #ffb74d; }
.status-entrega { background-color: #81c784; }

.card-corpo { padding: 14px 16px; flex: 1; }
.resumo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    font-size: 1rem; font-weight: bold; padding: 6px 12px;
    border-radius: 999px; border: 2px solid transparent;
}
.chip-novo { background: #fdecea; color: #b3261e; border-color: #f5b5b0; }
.chip-preparo { background: #fff4e0; color: #8a5a00; border-color: #ffd699; }
.chip-pronto { background: #e8f5e9; color: #1b6b1b; border-color: #a5d6a7; }
.chip-entregue { background: #f0f0f0; color: #777; border-color: #ddd; }
.chip-cancelado { background: #eceff1; color: #607d8b; border-color: #cfd8dc; }

.card-rodape {
    padding: 10px 16px; border-top: 1px solid var(--borda);
    font-size: .85rem; color: var(--texto-secundario);
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.aviso-novo {
    background: #e57373; color: #fff; font-weight: bold;
    padding: 8px 16px; text-align: center; font-size: 1rem; letter-spacing: .5px;
    animation: piscar 1.6s ease-in-out infinite;
}
@keyframes piscar { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }

.vazio {
    text-align: center; padding: 60px 20px;
    color: var(--texto-secundario); font-size: 1.2rem; grid-column: 1 / -1;
}

/* ---- MODAIS ---- */
.fundo-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 1000;
    display: flex; justify-content: center; align-items: flex-start;
    padding: 20px; overflow-y: auto;
}
.fundo-modal.oculto { display: none !important; }
.caixa-modal {
    background: var(--bg-secundario); width: 100%; max-width: 900px;
    border-radius: 14px; padding: 20px; margin: auto;
    max-height: 92vh; overflow-y: auto;
}
.caixa-modal h2 { color: var(--texto-principal); margin-bottom: 4px; }
.cabecalho-modal {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; border-bottom: 1px solid var(--borda);
    padding-bottom: 14px; margin-bottom: 16px;
}
.btn-x {
    background: none; border: none; font-size: 2rem; line-height: 1;
    cursor: pointer; color: var(--texto-secundario);
}

/* ---- DETALHE DA SESSÃO ---- */
.grupo-titulo {
    font-size: 1.15rem; font-weight: bold; margin: 18px 0 10px 0;
    padding: 8px 12px; border-radius: 8px; display: flex;
    justify-content: space-between; align-items: center;
}
.grupo-novos { background: #fdecea; color: #b3261e; }
.grupo-preparo { background: #fff4e0; color: #8a5a00; }
.grupo-prontos { background: #e8f5e9; color: #1b6b1b; }
.grupo-entregues { background: #f0f0f0; color: #666; }
.grupo-cancelados { background: #eceff1; color: #607d8b; }

.pedido-bloco {
    border: 1px solid var(--borda); border-radius: 10px;
    margin-bottom: 12px; overflow: hidden;
}
.pedido-cabecalho {
    background: var(--bg-principal); padding: 10px 14px; font-weight: bold;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
    font-size: .95rem; color: var(--texto-principal);
}

.item-linha {
    padding: 12px 14px; border-top: 1px solid var(--borda);
    display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
}
.item-linha.concluido { opacity: .55; }
.item-linha.concluido .item-titulo { text-decoration: line-through; }
.item-esquerda { flex: 1; }
.item-titulo { font-size: 1.3rem; font-weight: bold; color: var(--texto-principal); }
.item-meta { font-size: .9rem; color: var(--texto-secundario); margin-top: 3px; }
.item-obs {
    font-size: .95rem; color: #b3261e; font-style: italic;
    background: #ffebee; padding: 5px 8px; border-radius: 5px;
    display: inline-block; margin-top: 6px;
}
.item-prefs { font-size: .9rem; color: #6b4a00; margin-top: 4px; }
.selo-agora {
    background: #e3f2fd; color: #0d47a1; border: 1px solid #90caf9;
    font-size: .85rem; font-weight: bold; padding: 4px 10px;
    border-radius: 999px; display: inline-block; margin-top: 6px;
}
.item-timeline {
    font-size: .85rem; color: var(--texto-secundario);
    margin-top: 6px; line-height: 1.6;
}
.item-acoes { display: flex; flex-direction: column; gap: 8px; min-width: 170px; }
.btn-item {
    padding: 12px 14px; font-size: 1rem; font-weight: bold;
    border: none; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.btn-preparar { background: #ffb74d; color: #000; }
.btn-pronto { background: #a2d9a2; color: #000; }
.btn-entregar { background: #c8e6c9; color: #1b5e20; }
.btn-cancelar-item { background: #fff; color: #b3261e; border: 1px solid #f5b5b0; }
.selo-status {
    font-size: .85rem; font-weight: bold; padding: 5px 10px;
    border-radius: 6px; text-align: center;
}

/* ---- HISTÓRICO ---- */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.filtros input {
    padding: 10px; border-radius: 8px; border: 1px solid var(--borda);
    background: var(--bg-principal); color: var(--texto-principal); font-size: .95rem;
}
table.tabela-historico { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.tabela-historico th, table.tabela-historico td {
    padding: 10px; text-align: left; border-bottom: 1px solid var(--borda);
    color: var(--texto-principal);
}
table.tabela-historico th { background: var(--bg-principal); font-size: .85rem; }
table.tabela-historico tr:hover td { background: var(--bg-principal); cursor: pointer; }

@media (max-width: 640px) {
    .item-linha { flex-direction: column; }
    .item-acoes { width: 100%; min-width: 0; }
}