/* ====================================================================== POS Web — estilos */
:root {
    /* Mesma paleta da Portaria/Refeitório/Quiosque */
    --cor-cabecalho: #34A9CB;
    --cor-cabecalho-escura: #1E7E9C;
    --azul: #1E7E9C;
    --azul-escuro: #17657D;
    --azul-claro: #DDF0F6;
    --superficie: #ffffff;
    --linha: #D5DDE3;
    --texto-2: #5B6873;

    --cor-fundo: #EEF2F5;
    --cor-painel: #ffffff;
    --cor-barra: #1E7E9C;
    --cor-barra-texto: #ffffff;
    --cor-primaria: #1E7E9C;
    --cor-primaria-escura: #17657D;
    --cor-botao: #008299;
    --cor-selecao: #CDEAF3;
    --cor-sucesso: #2E7D32;
    --cor-erro: #D9302C;
    --cor-aviso: #F7941E;
    --cor-texto: #1F2A33;
    --cor-texto-2: #5B6873;
    --cor-borda: #D5DDE3;
    --cor-linha-par: #F7F9FB;
    --raio: 6px;
    --sombra: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
    /* altura do cabeçalho + friso (diálogos não modais ficam por baixo) */
    --altura-topo: 164px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-size: 15px;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}
input, textarea, select { -webkit-user-select: text; user-select: text; font-family: inherit; }

#app { height: 100%; }
.pagina-vazia { padding: 40px; text-align: center; color: var(--cor-texto-2); }

/* ------------------------------------------------------------------ estrutura (igual à Portaria) */
.app-shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* cabeçalho: mesmas medidas e informação da Portaria/Refeitório/Quiosque */
.cabecalho { flex: 0 0 auto; min-height: 116px; display: flex; align-items: center; gap: 24px; padding: 10px 28px; color: #fff; background: linear-gradient(90deg, var(--cor-cabecalho-escura), var(--cor-cabecalho)); box-shadow: 0 2px 6px rgba(0,0,0,.12); font-size: 16px; position: relative; z-index: 6; }
.cabecalho-logo { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cabecalho-logo svg { width: 56px; height: 56px; flex: 0 0 auto; }
.cabecalho-titulo { font-size: 28px; font-weight: 700; line-height: 1.1; }
.cabecalho-escola { font-size: 14px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
.cabecalho-versao { font-size: 11px; opacity: .75; }
.cabecalho-espaco { flex: 1; }
.cabecalho-utente { display: flex; align-items: center; gap: 14px; padding: 6px 12px; border-radius: var(--raio); background: rgba(255, 255, 255, .14); }
.cabecalho-utente-dados { text-align: right; }
.cabecalho-utente-nome { font-size: 17px; font-weight: 600; }
.cabecalho-utente-cartao { font-size: 13px; opacity: .9; }
.cabecalho-foto { width: 72px; height: 86px; border-radius: 4px; background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cabecalho-foto.pequena { width: 54px; height: 54px; border-radius: 50%; }
.cabecalho-foto svg { width: 40px; height: 40px; opacity: .8; }
.cabecalho-foto img { width: 100%; height: 100%; object-fit: cover; }
.relogio { display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: end; }
.relogio-dia { font-size: 34px; font-weight: 300; text-align: right; }
.relogio-hora { font-size: 34px; font-weight: 600; }
.relogio-mes { font-size: 15px; text-align: right; opacity: .9; }
.relogio-semana { font-size: 15px; opacity: .9; }
/* painéis informativos no centro do cabeçalho (como o ano escolar da Portaria) */
.painel-info { display: flex; flex-direction: column; align-items: center; padding: 4px 22px; border-left: 1px solid rgba(255,255,255,.35); border-right: 1px solid rgba(255,255,255,.35); }
.painel-info + .painel-info { border-left: 0; }
.painel-info-rotulo { font-size: 15px; opacity: .92; }
.painel-info-valor { font-size: 26px; font-weight: 600; line-height: 1.15; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.painel-info-sub { font-size: 13px; opacity: .9; white-space: nowrap; }
.cabecalho-utente-nome { white-space: nowrap; }

/* friso (ribbon) */
.friso { background: var(--superficie); border-bottom: 1px solid var(--linha); position: relative; z-index: 5; }
.friso-topo { display: flex; align-items: center; padding: 0 12px; height: 40px; gap: 2px; border-bottom: 1px solid var(--linha); }
.friso-topo .espaco { flex: 1; }
.friso-tab { align-self: stretch; background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--texto-2); padding: 0 16px; cursor: pointer; font: inherit; font-size: 15px; }
.friso-tab:hover { color: var(--cor-texto); background: var(--cor-fundo); }
.friso-tab.ativo { color: var(--azul); border-bottom-color: var(--azul); font-weight: 600; }
.friso-corpo { display: flex; gap: 0; padding: 6px 12px 0; height: 64px; overflow-x: auto; overflow-y: hidden; box-shadow: 0 2px 4px rgba(0,0,0,.04); }
.friso-grupo { display: flex; flex-direction: column; border-right: 1px solid var(--linha); padding: 0 8px; }
.friso-grupo:last-child { border-right: 0; }
.friso-botoes { display: flex; gap: 2px; flex: 1; }
.friso-grupo-titulo { text-align: center; font-size: 11px; color: var(--texto-2); padding: 2px 0 4px; white-space: nowrap; }
.friso-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 94px; min-height: 40px; padding: 4px 4px; border: 1px solid transparent; background: transparent; border-radius: 4px; cursor: pointer; font: inherit; font-size: 12px; color: var(--cor-texto); text-align: center; line-height: 1.15; }
.friso-btn:hover:not(:disabled) { background: var(--azul-claro); border-color: #a9d8e6; }
.friso-btn:disabled { opacity: .4; cursor: default; }
.friso-btn.ativo { background: var(--azul-claro); border-color: var(--azul); }

/* barra principal com as áreas (Bufete, Bar, ...) e a Caixa, com ícones */
.friso-areas { height: 48px; overflow-x: auto; overflow-y: hidden; }
.friso-areas .friso-tab { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; white-space: nowrap; }
.friso-areas .friso-tab .icone { font-size: 20px; line-height: 1; }
.friso-areas .friso-tab:disabled { opacity: .4; cursor: default; background: transparent; }
.friso-tab.com-ativo:not(.ativo) { color: var(--azul); }
.seta-caixa { font-size: 11px; opacity: .7; }

/* friso da caixa: minimizar (como no Alunos) */
.friso-colapsar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--texto-2); cursor: pointer; flex: 0 0 auto; }
.friso-colapsar:hover { background: var(--cor-fundo); border-color: var(--linha); color: var(--cor-texto); }
.friso-colapsar svg { width: 18px; height: 18px; }
.friso.colapsado .friso-topo { border-bottom: 0; }
.friso.colapsado.aberto .friso-corpo { position: absolute; left: 0; right: 0; top: 100%; background: var(--superficie); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); box-shadow: 0 8px 18px rgba(0,0,0,.12); }
.friso-fundo { position: fixed; inset: 0; z-index: 4; }

/* menu do operador no cabeçalho (Terminar sessão), como no Alunos */
.menu-utilizador { position: relative; }
button.cabecalho-utente { border: 0; color: inherit; font: inherit; cursor: pointer; }
button.cabecalho-utente:hover, button.cabecalho-utente.aberto { background: rgba(255,255,255,.24); }
.menu-utilizador-fundo { position: fixed; inset: 0; z-index: 40; }
.menu-utilizador-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 41; min-width: 240px; background: var(--superficie); color: var(--cor-texto); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; }
.menu-utilizador-cabecalho { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid var(--linha); margin-bottom: 6px; font-size: 13px; }
.menu-utilizador-cabecalho span { color: var(--texto-2); font-size: 12px; }
.menu-utilizador-lista button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px; border: 0; background: transparent; border-radius: 4px; cursor: pointer; font: inherit; font-size: 15px; color: #a4262c; text-align: left; }
.menu-utilizador-lista button:hover { background: #fdecec; }
.menu-utilizador-lista svg { width: 18px; height: 18px; }

.pos-raiz { display: contents; }
.conteudo { flex: 1; overflow: auto; position: relative; min-height: 0; }
.rodape { background: #fff; border-top: 1px solid var(--cor-borda); padding: 4px 12px; font-size: 12px; color: var(--cor-texto-2); display: flex; justify-content: space-between; }

/* ------------------------------------------------------------------ elementos gerais */
.painel { background: var(--cor-painel); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 12px 14px; }
.titulo { font-size: 18px; font-weight: 600; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--linha); }
.subtitulo { font-size: 15px; color: var(--cor-texto-2); margin: 0 0 8px; }
.linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.coluna { display: flex; flex-direction: column; gap: 8px; }
.espaco { flex: 1; }
.centro { text-align: center; }
.direita { text-align: right; }
.muted { color: var(--cor-texto-2); }
.erro-texto { color: var(--cor-erro); font-weight: bold; }
.ok-texto { color: var(--cor-sucesso); font-weight: bold; }
.grande { font-size: 22px; font-weight: bold; }
.oculto { display: none !important; }

.bt {
    border: none; border-radius: var(--raio); padding: 12px 18px; font-size: 15px; font-weight: bold; cursor: pointer;
    background: var(--superficie); color: var(--cor-texto); min-height: 48px; border: 1px solid var(--linha); font-family: inherit;
}
.bt:hover:not(:disabled) { background: #eef2f7; border-color: #b9c2cd; }
.bt:disabled { opacity: .45; cursor: default; }
.bt.primario { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }
.bt.primario:hover:not(:disabled) { background: var(--cor-primaria-escura); }
.bt.confirmar { background: var(--cor-botao); border-color: var(--cor-botao); color: #fff; min-width: 140px; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.bt.confirmar:hover:not(:disabled) { background: #006F83; }
.bt.cancelar { background: var(--cor-erro); border-color: var(--cor-erro); color: #fff; min-width: 140px; }
.bt.cancelar:hover:not(:disabled) { filter: brightness(.92); background: var(--cor-erro); }
.bt.selecionado { background: var(--cor-selecao); border-color: var(--azul); color: #222; }
.bt.pequeno { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.bt.tile { min-width: 128px; min-height: 110px; white-space: normal; }

.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label { font-size: 14px; color: var(--cor-texto-2); }
.campo input, .campo select, .input {
    padding: 10px 12px; font-size: 16px; border: 1px solid var(--cor-borda); border-radius: 6px; background: #fff; min-height: 44px;
}
.campo input:focus, .campo select:focus, .input:focus { outline: 3px solid rgba(52, 169, 203, .45); border-color: var(--cor-cabecalho); }
.chk { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.chk input { width: 22px; height: 22px; }

table.grelha { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; }
table.grelha th { background: #f0f2f5; color: var(--cor-texto); text-align: left; font-weight: 600; padding: 8px; border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 1; white-space: nowrap; }
table.grelha td { padding: 8px; border-bottom: 1px solid #eceef1; }
table.grelha tbody tr.clicavel:hover td { background: #f1f8fb; }
table.grelha tr:nth-child(even) td { background: var(--cor-linha-par); }
table.grelha tr.sel td { background: var(--cor-selecao) !important; }
table.grelha tr.clicavel { cursor: pointer; }
table.grelha td.num, table.grelha th.num { text-align: right; }
table.grelha tr.vermelho td { background: #fed7d7 !important; }
table.grelha tr.lima td { background: #c6f6d5 !important; }
table.grelha tr.azul td { background: #bee3f8 !important; }
table.grelha tr.doc td { font-weight: bold; background: #edf2f7 !important; }
.grelha-scroll { overflow: auto; max-height: calc(100vh - var(--altura-topo) - 160px); min-height: 120px; background: var(--superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); }

/* ------------------------------------------------------------------ diálogos */
.overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, .35); display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.dialogo {
    background: #fff; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.25); max-width: 94vw; max-height: 94vh; overflow: auto;
    min-width: 420px; display: flex; flex-direction: column;
}
.dialogo.largo { width: 1100px; }
.dialogo .cab { background: var(--superficie); color: var(--cor-texto); padding: 12px 18px; font-weight: 600; font-size: 17px; border-bottom: 1px solid var(--linha); border-top: 4px solid var(--cor-cabecalho); border-radius: 8px 8px 0 0; }
.dialogo .corpo { padding: 18px; }
.dialogo .botoes { padding: 12px 18px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--linha); flex-wrap: wrap; }
.mensagem { min-width: 380px; max-width: 640px; text-align: center; padding: 26px; cursor: pointer; }
.mensagem .icone { font-size: 46px; margin-bottom: 8px; }
.mensagem.Erro .icone { color: var(--cor-erro); }
.mensagem.Sucesso .icone { color: var(--cor-sucesso); }
.mensagem.Aviso .icone { color: var(--cor-aviso); }
.mensagem .texto { font-size: 18px; white-space: pre-line; }
.aguarde { padding: 30px 40px; text-align: center; font-size: 18px; }
.spinner { width: 42px; height: 42px; border: 5px solid #cbd5e0; border-top-color: var(--cor-primaria); border-radius: 50%; animation: gira 1s linear infinite; margin: 0 auto 12px; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ teclados virtuais */
.teclado-num { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.teclado-num button { min-height: 52px; min-width: 0; padding: 0; font-family: inherit; font-size: 22px; font-weight: 600; color: var(--cor-texto); border-radius: var(--raio); border: 1px solid var(--cor-borda); background: #fff; cursor: pointer; }
.teclado-num button:disabled { opacity: .35; cursor: default; }
.teclado-num button:active { background: var(--cor-selecao); }
.teclado-num button.acao { background: #f0f2f5; font-size: 18px; }
.teclado-num button.acao.cancelar { background: var(--cor-erro); border-color: var(--cor-erro); color: #fff; }
.teclado-num button.acao.confirmar { background: var(--cor-botao); border-color: var(--cor-botao); color: #fff; font-size: 24px; }
.teclado { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.teclado .fila { display: flex; gap: 5px; justify-content: center; }
.teclado button { min-width: 48px; min-height: 48px; font-size: 18px; border-radius: 6px; border: 1px solid var(--cor-borda); background: #fff; cursor: pointer; }
.teclado button.largo { min-width: 110px; }
.teclado button.espaco { min-width: 320px; }

/* ------------------------------------------------------------------ ecrã de vendas */
.venda { display: grid; grid-template-columns: 1fr 330px; gap: 8px; padding: 8px; height: 100%; min-height: 0; overflow: hidden; }
.venda .esq { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.venda .dir { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.familias { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.familia {
    height: 104px; border-radius: 8px; background: #fff; border: 2px solid transparent; cursor: pointer; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: relative; box-shadow: var(--sombra);
}
.familia img { max-height: 70px; max-width: 90%; position: absolute; top: 4px; }
.familia .nome { background: rgba(255,255,255,.85); width: 100%; text-align: center; font-weight: bold; font-size: 13px; padding: 3px 2px; z-index: 1; }
.familia.sel { border-color: var(--azul); background: var(--azul-claro); }
.familia.nav { background: var(--cor-cabecalho); color: #fff; justify-content: center; font-size: 26px; }
.produtos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; flex: 1; align-content: start; }
.produto {
    height: 118px; border-radius: 8px; background: #fff; cursor: pointer; position: relative; overflow: hidden; box-shadow: var(--sombra);
    display: flex; flex-direction: column;
}
.produto .cab { display: flex; justify-content: space-between; font-size: 11px; font-weight: bold; padding: 2px 5px; min-height: 16px; }
.produto .cab .stock { color: #888; }
.produto .cab .stock.zero { color: red; }
.produto .cab .stock.minimo { color: #fb8742; }
.produto .img { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.produto .img img { max-height: 60px; max-width: 90%; }
.produto .desc { font-size: 12px; font-weight: bold; text-align: center; padding: 2px 3px 4px; background: rgba(255,255,255,.9); line-height: 1.15; }
.produto.indisponivel { filter: grayscale(1); opacity: .6; }
.produto .estado { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: bold; color: maroon; font-size: 14px; text-align: center; }
.produto .estado.credito { color: #000; }
.produto.nav { background: var(--cor-aviso); color: #fff; justify-content: center; align-items: center; font-size: 15px; font-weight: bold; }

.utente-card { display: flex; gap: 10px; align-items: center; }
.utente-card .foto { width: 84px; height: 104px; border-radius: 6px; background: #edf2f7; object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #a0aec0; overflow: hidden; }
.utente-card .foto img { width: 100%; height: 100%; object-fit: cover; }
.utente-card .dados { flex: 1; min-width: 0; }
.utente-card .nome { font-weight: bold; font-size: 16px; }
.utente-card .saldo { font-size: 20px; font-weight: bold; color: var(--cor-primaria); }

.carrinho { flex: 1; overflow: auto; background: #fff; border: 1px solid var(--linha); border-radius: 8px; min-height: 160px; }
.carrinho .linha-c { display: grid; grid-template-columns: 52px 1fr 70px; padding: 6px; border-bottom: 1px solid #eee; cursor: pointer; font-size: 13px; align-items: center; }
.carrinho .linha-c:nth-child(even) { background: var(--cor-linha-par); }
.carrinho .linha-c.sel { background: var(--cor-selecao); }
.carrinho .linha-c .conj { font-size: 10px; color: #888; }
.carrinho .vazio { padding: 30px; text-align: center; color: #999; }
.totais { background: #fff; border: 1px solid var(--linha); border-radius: 8px; padding: 8px 12px; }
.totais .l { display: flex; justify-content: space-between; font-size: 13px; }
.totais .t { display: flex; justify-content: space-between; font-size: 22px; font-weight: bold; }
.impressora-info { font-size: 11px; color: #777; }

/* ------------------------------------------------------------------ refeições */
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dia {
    background: #fff; border-radius: 8px; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; position: relative; box-shadow: var(--sombra);
}
.dia .n { font-size: 30px; font-weight: bold; }
.dia .m { font-size: 11px; color: #555; }
.dia.fim-semana { background: #f1f5f9; }
.dia.comprada { background: #c6f6d5; }
.dia.inativo { filter: grayscale(1); opacity: .45; cursor: default; }
.dia .marca { position: absolute; right: 6px; bottom: 4px; font-size: 20px; color: var(--cor-primaria); }
.dias-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; font-weight: bold; color: #555; margin-bottom: 4px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tabs button { flex: 1; min-height: 46px; border-radius: var(--raio); border: 2px solid var(--cor-borda); background: #fff; font-weight: 600; font-family: inherit; cursor: pointer; }
.tabs button.ativo { border-color: var(--cor-primaria); background: var(--azul-claro); }
.tabs button.comprada { background: #aeffae; }
.tabs button.escolhida { background: #fdf0db; }
.ementa { border: 1px solid var(--cor-borda); border-radius: 8px; padding: 8px 12px; margin-bottom: 6px; cursor: pointer; }
.ementa.sel { outline: 3px solid var(--cor-cabecalho); }
.ementa.comprada { background: #e1ffe1; }
.ementa.escolhida { background: #fef5e7; }
.ementa .prato { color: maroon; font-weight: bold; font-size: 16px; }

/* ------------------------------------------------------------------ menu principal */
.principal-vazio { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--cor-texto-2); gap: 10px; text-align: center; padding: 24px; }
.principal-vazio .principal-icone svg { width: 120px; height: 120px; color: var(--cor-cabecalho); }
.principal-vazio .entidade { font-size: 26px; font-weight: 600; color: var(--cor-texto); }

/* ------------------------------------------------------------------ login / arranque */
.pagina-centro { flex: 1; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; }
.login { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; text-align: left; }
.login-icone svg { width: 220px; height: 220px; color: var(--cor-cabecalho); }
.login-titulo { font-size: 38px; font-weight: 300; margin: 0 0 18px; }
.login-form { width: 380px; max-width: 100%; }
.login-form .campo { margin-bottom: 14px; gap: 6px; }
.login-form .campo label { font-size: 15px; }
.login-form .campo input { height: 50px; font-size: 20px; width: 100%; }
.login-form .botoes { display: flex; gap: 12px; justify-content: flex-end; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; min-width: 150px; padding: 10px 22px; border: none; border-radius: var(--raio); background: var(--cor-botao); color: #fff; font: inherit; font-size: 18px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.botao:active:not(:disabled) { filter: brightness(.9); }
.botao:disabled { opacity: .45; cursor: default; }
.erro { color: #D9534F; font-weight: 600; }
.login-dica { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; color: var(--cor-texto-2); font-size: 14px; }
.login-dica svg { width: 22px; height: 22px; color: var(--cor-cabecalho); }
.login-teclado { position: relative; z-index: 1; width: min(900px, 100%); }
.login-configurar { position: relative; z-index: 1; color: var(--cor-texto-2); font-size: 13px; }

/* Login dentro de uma caixa delimitada (igual à Portaria) */
.pagina-login { position: relative; }
.caixa-login { position: relative; z-index: 1; background: var(--superficie); border: 1px solid var(--linha); border-top: 5px solid var(--cor-cabecalho); border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 12px 36px rgba(0,0,0,.10); padding: 40px 52px 44px; gap: 44px; max-width: calc(100vw - 32px); }
.caixa-login .login-icone { padding-right: 44px; border-right: 1px solid var(--linha); }
.caixa-login .login-icone svg { width: 170px; height: 170px; }
.caixa-login .login-titulo { font-size: 32px; white-space: nowrap; }
@media (max-width: 900px) {
    .caixa-login { padding: 28px 24px 32px; gap: 20px; }
    .caixa-login .login-icone { padding-right: 0; border-right: 0; }
    .caixa-login .login-icone svg { width: 110px; height: 110px; }
    .caixa-login .login-titulo { white-space: normal; }
}
/* Arranque (configuração do posto) na mesma caixa */
.caixa-arranque { width: 560px; text-align: left; padding: 28px 36px 32px; }
.caixa-arranque-icone { text-align: center; }
.caixa-arranque-icone svg { width: 72px; height: 72px; color: var(--cor-cabecalho); }
.caixa-arranque h3 { font-weight: 600; margin: 10px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--linha); }
.caixa-arranque h4 { font-weight: 600; margin: 16px 0 8px; }
.caixa-arranque .campo { margin-bottom: 10px; }
.caixa-arranque .botoes { display: flex; justify-content: flex-end; }

/* Marcas de água: GIAE (direita) e Microabreu (esquerda) */
.marca-agua { position: fixed; bottom: 24px; width: 104px; height: 38.4px; background-repeat: no-repeat; background-size: contain; opacity: .16; pointer-events: none; user-select: none; z-index: 0; }
.marca-agua-esquerda { left: 28px; background-image: url("../img/logo-giae.png"); background-position: left bottom; }
.marca-agua-direita { right: 28px; background-image: url("../img/logo-microabreu.png"); background-position: right bottom; }
@media (max-width: 700px) { .marca-agua { width: 140px; height: 60px; bottom: 12px; } }

/* ------------------------------------------------------------------ configurar */
.cfg-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.cfg-tabs { border-bottom: 1px solid var(--linha); gap: 2px; }
.cfg-tabs button { padding: 10px 16px; border: 1px solid transparent; border-bottom: 0; border-radius: 4px 4px 0 0; background: transparent; color: var(--cor-texto-2); font: inherit; cursor: pointer; }
.cfg-tabs button.ativo { background: #fff; border-color: var(--linha); color: var(--cor-texto); font-weight: 600; margin-bottom: -1px; }
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px 18px; }
.cfg-bloco { border: 1px solid var(--cor-borda); border-radius: 8px; padding: 10px 14px; }
.cfg-bloco { background: var(--superficie); }
.cfg-bloco h4 { margin: 0 0 8px; font-weight: 600; padding-bottom: 6px; border-bottom: 1px solid var(--linha); }

@media (max-width: 1100px) {
    .venda { grid-template-columns: 1fr 290px; }
    .familias, .produtos { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------------ complementos */
.overlay.abaixo-menu { top: var(--altura-topo); }
.teclado button.ativo { background: var(--cor-selecao); }
.painel-codbarras { position: fixed; right: 20px; bottom: 20px; width: 300px; background: #fff; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.3); z-index: 900; padding: 10px 14px; }
.painel-codbarras .estado-leitura { font-weight: bold; color: var(--cor-sucesso); }
.painel-codbarras .estado-leitura.inativo { color: #757575; cursor: pointer; }
.painel-codbarras .codigo { font-size: 20px; font-weight: bold; min-height: 28px; text-align: center; }
.input.vermelho { background: #ffd6d6; }
.acoes-venda { display: flex; gap: 6px; flex-wrap: wrap; }
.acoes-venda .bt { flex: 1; min-height: 50px; }

/* ------------------------------------------------------------------ vendas: famílias na lateral, produtos com scroll */
.conteudo:has(> .venda) { overflow: hidden; }
.venda.com-familias { grid-template-columns: 180px minmax(0, 1fr) 330px; }
.familias-lateral { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.venda.com-familias .familias { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 2px; scrollbar-width: thin; }
.venda.com-familias .familia { flex: 0 0 86px; height: 86px; }
.venda.com-familias .familia img { max-height: 54px; }
.pagina-btn { flex: 0 0 auto; height: 40px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); color: var(--azul); font-size: 18px; cursor: pointer; }
.pagina-btn:hover { background: var(--azul-claro); }
.venda.com-familias .produtos { flex: 1; min-height: 0; overflow-y: auto; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); grid-auto-rows: 118px; padding: 2px; scrollbar-width: thin; }
.produtos-rodape { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.produtos-rodape .bt.pequeno { min-height: 40px; }
/* coluna direita compacta para caber no ecrã (1366x768) sem scroll */
.venda .dir { gap: 6px; }
.venda .dir .painel { padding: 8px 10px; }
.venda .dir .utente-card .foto { width: 56px; height: 68px; font-size: 26px; }
.venda .dir .utente-card .nome { font-size: 15px; }
.venda .dir .utente-card .saldo { font-size: 18px; }
.venda .dir .carrinho { min-height: 60px; }
.venda .dir .totais { padding: 4px 10px; }
.venda .dir .totais .t { font-size: 20px; }
.venda .dir .input { min-height: 36px; padding: 4px 10px; }
.venda .dir .teclado-num { gap: 4px; }
.venda .dir .teclado-num button { min-height: 40px; font-size: 19px; }
.venda .dir .acoes-venda { gap: 6px; }
.venda .dir .acoes-venda .bt { min-height: 38px; padding: 6px 8px; font-size: 13px; }
.venda .dir .acoes-venda .bt.grande { font-size: 17px; min-height: 48px; }
@media (max-width: 1100px) {
    .venda.com-familias { grid-template-columns: 140px minmax(0, 1fr) 290px; }
}