/* ===========================================================================
   VtrSuite — folha de estilo única.

   Tudo o que é cor passa por variáveis (tokens). Um tema é só um conjunto de
   valores para esses tokens: não há classes duplicadas por tema nem folhas
   alternativas para manter em sincronia. Acrescentar um tema é acrescentar um
   bloco [data-vtr-tema="..."] no fim da secção de temas.

   Índice
     1. Tokens e temas
     2. Estrutura do backoffice
     3. Componentes
     4. Autenticação
     5. Montra (módulo Loja)
     6. Terminal (módulo POS)
     7. Impressão e responsivo
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tokens e temas
   --------------------------------------------------------------------------- */

:root {
    --vtr-sidebar-width: 250px;
    --vtr-topbar-height: 58px;
    --vtr-radius: .6rem;

    /* Tema claro — valores por omissão */
    --vtr-bg: #f5f6f9;
    --vtr-surface: #ffffff;
    --vtr-surface-2: #fafbfc;
    --vtr-text: #10182b;
    --vtr-text-muted: #6d7383;
    --vtr-border: #e6e8ee;
    --vtr-border-soft: #eef0f4;

    --vtr-accent: #2563eb;
    --vtr-accent-fg: #ffffff;
    --vtr-accent-soft: rgba(37, 99, 235, .12);

    --vtr-sidebar-bg: #10182b;
    --vtr-sidebar-fg: #b9c2d6;
    --vtr-sidebar-fg-active: #ffffff;
    --vtr-sidebar-title: #6b7690;

    --vtr-auth-de: #10182b;
    --vtr-auth-para: #1e3a8a;

    --vtr-sombra: 0 1px 2px rgba(16, 24, 43, .04);
    --vtr-sombra-forte: 0 6px 18px rgba(16, 24, 43, .1);

    /* Terminal POS.
       Deriva do tema: como o var() só é resolvido no elemento que o usa, basta
       declarar isto uma vez — cada tema muda os tokens --vtr-* e o terminal
       acompanha sozinho. Um tema só precisa de repetir aqui o que quiser
       afinar (ver o bloco "escuro"). */
    --pos-bg: var(--vtr-bg);
    --pos-barra: var(--vtr-sidebar-bg);
    --pos-barra-fg: var(--vtr-sidebar-fg);
    --pos-barra-fg-forte: var(--vtr-sidebar-fg-active);
    --pos-painel: var(--vtr-surface);
    --pos-tecla: var(--vtr-surface-2);
    --pos-campo: var(--vtr-surface);
    --pos-zebra: var(--vtr-surface-2);
    --pos-borda: var(--vtr-border);
    --pos-texto: var(--vtr-text);
    --pos-texto-fraco: var(--vtr-text-muted);
    --pos-realce: var(--vtr-accent);
    --pos-realce-fg: var(--vtr-accent-fg);
    --pos-seleccao: var(--vtr-accent-soft);
    --pos-preco: var(--vtr-accent);

    /* Cores de estado: dizem o que se passa antes de se ler seja o que for.
       São as únicas que não derivam do tema — verde é livre, âmbar é ocupado,
       vermelho é perigo, em qualquer tema. */
    --pos-ok: #16a34a;
    --pos-ok-fg: #ffffff;
    --pos-ok-texto: #15803d;
    --pos-alerta: #d97706;
    --pos-perigo: #dc2626;
    --pos-perigo-borda: #fca5a5;
    --pos-perigo-bg: #fee2e2;
    --pos-perigo-fg: #991b1b;
    --pos-aviso-bg: #fef3c7;
    --pos-aviso-borda: #f59e0b;
    --pos-aviso-fg: #78350f;
    --pos-info-bg: #dbeafe;
    --pos-info-borda: #3b82f6;
    --pos-info-fg: #1e3a8a;
    --pos-icone-escritorio: #7c3aed;
}

[data-vtr-tema="escuro"] {
    --vtr-bg: #0f1626;
    --vtr-surface: #16203a;
    --vtr-surface-2: #1b2740;
    --vtr-text: #e8ebf2;
    --vtr-text-muted: #8e9ab5;
    --vtr-border: #263353;
    --vtr-border-soft: #22304d;

    --vtr-accent: #3b82f6;
    --vtr-accent-fg: #ffffff;
    --vtr-accent-soft: rgba(59, 130, 246, .18);

    --vtr-sidebar-bg: #0b1120;
    --vtr-sidebar-fg: #9aa6c2;
    --vtr-sidebar-fg-active: #ffffff;
    --vtr-sidebar-title: #5b6685;

    --vtr-auth-de: #0b1120;
    --vtr-auth-para: #1e3a8a;

    --vtr-sombra: 0 1px 2px rgba(0, 0, 0, .3);
    --vtr-sombra-forte: 0 8px 24px rgba(0, 0, 0, .45);

    /* No escuro o terminal não pode ser um painel branco: os estados mudam
       para as versões que se lêem em fundo escuro. */
    --pos-campo: #0f172a;
    --pos-zebra: #1a2440;
    --pos-preco: #7dd3fc;
    --pos-ok-texto: #4ade80;
    --pos-alerta: #fbbf24;
    --pos-perigo: #f87171;
    --pos-perigo-borda: #7f1d1d;
    --pos-perigo-bg: #7f1d1d;
    --pos-perigo-fg: #fecaca;
    --pos-aviso-bg: #422006;
    --pos-aviso-borda: #a16207;
    --pos-aviso-fg: #fde68a;
    --pos-info-bg: #0c2340;
    --pos-info-borda: #1d4ed8;
    --pos-info-fg: #bfdbfe;
    --pos-icone-escritorio: #a78bfa;
}

[data-vtr-tema="azul"] {
    --vtr-bg: #eef3fb;
    --vtr-surface: #ffffff;
    --vtr-surface-2: #f5f9ff;
    --vtr-text: #0b2545;
    --vtr-text-muted: #5a7291;
    --vtr-border: #d5e2f5;
    --vtr-border-soft: #e4edf9;

    --vtr-accent: #0369a1;
    --vtr-accent-fg: #ffffff;
    --vtr-accent-soft: rgba(3, 105, 161, .12);

    --vtr-sidebar-bg: #0b2545;
    --vtr-sidebar-fg: #a9c2de;
    --vtr-sidebar-fg-active: #ffffff;
    --vtr-sidebar-title: #5f83a8;

    --vtr-auth-de: #0b2545;
    --vtr-auth-para: #0369a1;
}

[data-vtr-tema="esmeralda"] {
    --vtr-bg: #f2f8f5;
    --vtr-surface: #ffffff;
    --vtr-surface-2: #f7fbf9;
    --vtr-text: #10261c;
    --vtr-text-muted: #5b7a6b;
    --vtr-border: #d8e8df;
    --vtr-border-soft: #e6f1ec;

    --vtr-accent: #047857;
    --vtr-accent-fg: #ffffff;
    --vtr-accent-soft: rgba(4, 120, 87, .12);

    --vtr-sidebar-bg: #10261c;
    --vtr-sidebar-fg: #a7c5b5;
    --vtr-sidebar-fg-active: #ffffff;
    --vtr-sidebar-title: #5f8672;

    --vtr-auth-de: #10261c;
    --vtr-auth-para: #047857;
}

[data-vtr-tema="grafite"] {
    --vtr-bg: #f4f4f5;
    --vtr-surface: #ffffff;
    --vtr-surface-2: #fafafa;
    --vtr-text: #18181b;
    --vtr-text-muted: #71717a;
    --vtr-border: #e4e4e7;
    --vtr-border-soft: #efeff1;

    --vtr-accent: #3f3f46;
    --vtr-accent-fg: #ffffff;
    --vtr-accent-soft: rgba(63, 63, 70, .1);

    --vtr-sidebar-bg: #18181b;
    --vtr-sidebar-fg: #a1a1aa;
    --vtr-sidebar-fg-active: #ffffff;
    --vtr-sidebar-title: #6b6b74;

    --vtr-auth-de: #18181b;
    --vtr-auth-para: #3f3f46;
}

/*
 | Laranja: laranja e branco. Pensado para lojas com montra virada à rua — o
 | fundo é branco quente, o laranja fica reservado ao que é para carregar. Um
 | ecrã inteiro de laranja cansa em meia hora de balcão.
 */
[data-vtr-tema="laranja"] {
    --vtr-bg: #fff7f1;
    --vtr-surface: #ffffff;
    --vtr-surface-2: #fff3e9;
    --vtr-text: #2a1608;
    --vtr-text-muted: #8a6a53;
    --vtr-border: #f6ddc9;
    --vtr-border-soft: #fbeadd;

    /* #c2410c e não o laranja vivo: com branco por cima dá 5.2:1, e o vivo
       ficava-se pelos 3.6:1 — não passava em botões nem em ligações. */
    --vtr-accent: #c2410c;
    --vtr-accent-fg: #ffffff;
    --vtr-accent-soft: rgba(194, 65, 12, .12);

    --vtr-sidebar-bg: #7c2d12;
    --vtr-sidebar-fg: #fcd9bd;
    --vtr-sidebar-fg-active: #ffffff;
    --vtr-sidebar-title: #e0a171;

    --vtr-auth-de: #7c2d12;
    --vtr-auth-para: #ea580c;

    --vtr-sombra: 0 1px 2px rgba(85, 34, 8, .06);
    --vtr-sombra-forte: 0 6px 18px rgba(85, 34, 8, .14);
}

/*
 | Alto contraste: para balcões com muita luz e para quem tem dificuldade a
 | distinguir tons próximos. Bordas mais escuras e foco sempre visível.
 */
[data-vtr-tema="contraste"] {
    --vtr-bg: #ffffff;
    --vtr-surface: #ffffff;
    --vtr-surface-2: #f2f2f2;
    --vtr-text: #000000;
    --vtr-text-muted: #333333;
    --vtr-border: #000000;
    --vtr-border-soft: #666666;

    --vtr-accent: #0000cc;
    --vtr-accent-fg: #ffffff;
    --vtr-accent-soft: rgba(0, 0, 204, .15);

    --vtr-sidebar-bg: #000000;
    --vtr-sidebar-fg: #ffffff;
    --vtr-sidebar-fg-active: #ffff00;
    --vtr-sidebar-title: #cccccc;

    --vtr-auth-de: #000000;
    --vtr-auth-para: #0000cc;

    --vtr-sombra: none;
    --vtr-sombra-forte: none;

    /* Os estados do terminal também perdem os meios-tons. */
    --pos-zebra: #f2f2f2;
    --pos-ok-texto: #006600;
    --pos-alerta: #8a4b00;
    --pos-perigo: #a30000;
    --pos-perigo-borda: #a30000;
    --pos-perigo-bg: #ffffff;
    --pos-perigo-fg: #a30000;
    --pos-aviso-bg: #ffffff;
    --pos-aviso-borda: #000000;
    --pos-aviso-fg: #000000;
    --pos-info-bg: #ffffff;
    --pos-info-borda: #000000;
    --pos-info-fg: #000000;
    --pos-icone-escritorio: #0000cc;
}

[data-vtr-tema="contraste"] .card,
[data-vtr-tema="contraste"] .form-control,
[data-vtr-tema="contraste"] .form-select { border-width: 2px; }

[data-vtr-tema="contraste"] a { text-decoration: underline; }

:focus-visible { outline: 3px solid var(--vtr-accent); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   2. Estrutura do backoffice
   --------------------------------------------------------------------------- */

body.vtr-app { background: var(--vtr-bg); color: var(--vtr-text); min-height: 100vh; }

.vtr-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--vtr-sidebar-width);
    background: var(--vtr-sidebar-bg);
    color: var(--vtr-sidebar-fg);
    padding: .75rem 0;
    overflow-y: auto;
    z-index: 1040;
    transition: transform .2s ease;
}

.vtr-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem 1.15rem 1.1rem;
    color: var(--vtr-sidebar-fg-active);
    font-weight: 600;
    letter-spacing: .2px;
}

.vtr-brand i { color: var(--vtr-accent); font-size: 1.25rem; }
.vtr-brand img { max-height: 30px; max-width: 150px; object-fit: contain; }

.vtr-nav-title {
    padding: 1.1rem 1.15rem .35rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--vtr-sidebar-title);
}

/*
 | Grupos de modulos: um <details> por modulo, sem JS obrigatorio. O grupo da
 | pagina actual chega aberto do servidor; o resto do estado e memoria do
 | browser (ver app.js).
 */
.vtr-nav-grupo-titulo {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem 1.15rem;
    color: var(--vtr-sidebar-fg);
    font-size: .9rem;
    border-left: 3px solid transparent;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.vtr-nav-grupo-titulo::-webkit-details-marker { display: none; }
.vtr-nav-grupo-titulo:hover { color: var(--vtr-sidebar-fg-active); background: rgba(255, 255, 255, .05); }
.vtr-nav-grupo-titulo:focus-visible { outline: 2px solid var(--vtr-accent); outline-offset: -2px; }
.vtr-nav-grupo-titulo > i:first-child { width: 1.1rem; text-align: center; opacity: .9; }
.vtr-nav-grupo-titulo > span { flex: 1 1 auto; }
.vtr-nav-grupo-titulo.activo { color: var(--vtr-sidebar-fg-active); border-left-color: var(--vtr-accent); }

.vtr-nav-seta { font-size: .7rem; opacity: .55; transition: transform .15s ease; }
.vtr-nav-grupo[open] > .vtr-nav-grupo-titulo { color: var(--vtr-sidebar-fg-active); }
.vtr-nav-grupo[open] > .vtr-nav-grupo-titulo .vtr-nav-seta { transform: rotate(180deg); }

.vtr-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem 1.15rem;
    color: var(--vtr-sidebar-fg);
    font-size: .9rem;
    border-left: 3px solid transparent;
}

.vtr-sidebar .nav-link:hover { color: var(--vtr-sidebar-fg-active); background: rgba(255, 255, 255, .05); }

.vtr-sidebar .nav-link.active {
    color: var(--vtr-sidebar-fg-active);
    background: var(--vtr-accent-soft);
    border-left-color: var(--vtr-accent);
}

.vtr-sidebar .nav-link i { width: 1.1rem; text-align: center; opacity: .9; }

/* As entradas de um grupo recuam e ganham um fio-guia ate ao titulo. */
.vtr-nav-grupo > ul { margin-left: 1.75rem; border-left: 1px solid rgba(255, 255, 255, .12); }
.vtr-sidebar .vtr-nav-grupo > ul .nav-link { padding: .4rem 1.15rem .4rem .8rem; font-size: .86rem; }

.vtr-main { margin-left: var(--vtr-sidebar-width); display: flex; flex-direction: column; min-height: 100vh; }

.vtr-topbar {
    height: var(--vtr-topbar-height);
    background: var(--vtr-surface);
    border-bottom: 1px solid var(--vtr-border);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 1.25rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.vtr-content { flex: 1; padding: 1.5rem 1.25rem; }
.vtr-page-header { margin-bottom: 1.15rem; }

/* Separadores de ecra (Definicoes): sublinhado em vez de caixas — em ecra
   estreito rolam na horizontal em vez de partirem para varias linhas. */
.vtr-abas {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: .15rem;
    border-bottom: 1px solid var(--vtr-border);
}

.vtr-abas .nav-link {
    padding: .5rem .9rem;
    color: var(--vtr-text-muted);
    white-space: nowrap;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.vtr-abas .nav-link:hover { color: var(--vtr-text); background: var(--vtr-surface-2); }
.vtr-abas .nav-link.active {
    color: var(--vtr-accent);
    background: transparent;
    border-bottom-color: var(--vtr-accent);
    font-weight: 600;
}
.vtr-abas .nav-link i { margin-right: .35rem; opacity: .85; }
.vtr-footer {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    padding: .9rem 1.25rem; font-size: .8rem; color: var(--vtr-text-muted);
    border-top: 1px solid var(--vtr-border-soft);
}
.vtr-rodape-produto { font-weight: 600; color: var(--vtr-text); }
.vtr-auth-rodape {
    display: flex; flex-direction: column; align-items: center; gap: .15rem;
    margin-top: 1.25rem; font-size: .78rem; color: rgba(255, 255, 255, .75); text-align: center;
}
.painel-rodape {
    margin-top: 1.25rem; padding-top: .75rem; border-top: 1px solid var(--pos-borda);
    color: var(--pos-texto-fraco); font-size: .78rem; line-height: 1.6;
}
.painel-rodape strong { color: var(--pos-texto); }
.vtr-rodape-produto .text-muted { font-weight: 400; }
.vtr-rodape-separador { opacity: .5; }
/* Os direitos de autor encostam à direita e passam para baixo em ecrã estreito. */
.vtr-rodape-direitos { margin-left: auto; }
@media (max-width: 767.98px) {
    .vtr-rodape-direitos { margin-left: 0; width: 100%; }
    .vtr-rodape-separador { display: none; }
    .vtr-footer { gap: .15rem .5rem; }
}

.vtr-backdrop { display: none; position: fixed; inset: 0; background: rgba(9, 12, 20, .45); z-index: 1035; }
.vtr-backdrop.show { display: block; }

/* ---------------------------------------------------------------------------
   3. Componentes
   --------------------------------------------------------------------------- */

/* Ponte para o Bootstrap.
   Os componentes de origem — botões, ligações, paginação, focos — vinham com
   o azul de fábrica e ignoravam o tema. Em vez de os reescrever, dão-se-lhes
   as variáveis do próprio Bootstrap já apontadas à cor do tema. */
:root {
    --bs-primary: var(--vtr-accent);
    --bs-link-color: var(--vtr-accent);
    --bs-link-hover-color: var(--vtr-accent);
    --bs-border-color: var(--vtr-border);
}

.btn-primary {
    --bs-btn-bg: var(--vtr-accent);
    --bs-btn-border-color: var(--vtr-accent);
    --bs-btn-color: var(--vtr-accent-fg);
    --bs-btn-hover-bg: var(--vtr-accent);
    --bs-btn-hover-border-color: var(--vtr-accent);
    --bs-btn-hover-color: var(--vtr-accent-fg);
    --bs-btn-active-bg: var(--vtr-accent);
    --bs-btn-active-border-color: var(--vtr-accent);
    --bs-btn-active-color: var(--vtr-accent-fg);
    --bs-btn-disabled-bg: var(--vtr-accent);
    --bs-btn-disabled-border-color: var(--vtr-accent);
    --bs-btn-disabled-color: var(--vtr-accent-fg);
}
.btn-primary:hover, .btn-primary:focus-visible { filter: brightness(1.1); }

.btn-outline-primary {
    --bs-btn-color: var(--vtr-accent);
    --bs-btn-border-color: var(--vtr-accent);
    --bs-btn-hover-bg: var(--vtr-accent);
    --bs-btn-hover-border-color: var(--vtr-accent);
    --bs-btn-hover-color: var(--vtr-accent-fg);
    --bs-btn-active-bg: var(--vtr-accent);
    --bs-btn-active-border-color: var(--vtr-accent);
    --bs-btn-active-color: var(--vtr-accent-fg);
}

.text-primary { color: var(--vtr-accent) !important; }
.bg-primary, .text-bg-primary { background-color: var(--vtr-accent) !important; color: var(--vtr-accent-fg) !important; }
.border-primary { border-color: var(--vtr-accent) !important; }
.link-primary { color: var(--vtr-accent) !important; }

.pagination {
    --bs-pagination-color: var(--vtr-accent);
    --bs-pagination-hover-color: var(--vtr-accent);
    --bs-pagination-focus-color: var(--vtr-accent);
    --bs-pagination-active-bg: var(--vtr-accent);
    --bs-pagination-active-border-color: var(--vtr-accent);
}

.form-check-input:checked { background-color: var(--vtr-accent); border-color: var(--vtr-accent); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--vtr-accent);
    box-shadow: 0 0 0 .2rem var(--vtr-accent-soft);
}
.progress-bar { background-color: var(--vtr-accent); }
.spinner-border, .spinner-grow { color: var(--vtr-accent); }

.card {
    background: var(--vtr-surface);
    color: var(--vtr-text);
    border: 1px solid var(--vtr-border);
    border-radius: var(--vtr-radius);
    box-shadow: var(--vtr-sombra);
}

.card-header {
    background: var(--vtr-surface);
    border-bottom: 1px solid var(--vtr-border-soft);
    font-weight: 600;
    font-size: .9rem;
}

/* Definições fiscais: o estado técnico aparece primeiro; a edição operacional
   fica dividida em blocos curtos e a configuração protegida permanece visível. */
.fiscal-overview { overflow: hidden; }
.fiscal-overview::before {
    content: "";
    display: block;
    height: 3px;
    background: var(--vtr-accent);
}
.fiscal-check {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    min-height: 92px;
    padding: .8rem;
    background: var(--vtr-surface-2);
    border: 1px solid var(--vtr-border-soft);
    border-radius: calc(var(--vtr-radius) - 2px);
}
.fiscal-check > div:last-child { min-width: 0; }
.fiscal-check-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fiscal-check-label,
.fiscal-check-help {
    display: block;
    color: var(--vtr-text-muted);
    font-size: .72rem;
    line-height: 1.25;
}
.fiscal-check strong { margin: .1rem 0; font-size: .9rem; }
.fiscal-card-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-top: .8rem;
    padding-bottom: .8rem;
}
.fiscal-card-header span {
    display: block;
    margin-top: .12rem;
    color: var(--vtr-text-muted);
    font-size: .76rem;
    font-weight: 400;
}
.fiscal-section-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--vtr-accent);
    background: var(--vtr-accent-soft);
}
.fiscal-note { max-width: 34rem; line-height: 1.45; }
.fiscal-save-bar { border-color: var(--vtr-accent); }
.fiscal-details .list-group-item > span:first-child,
.fiscal-details .list-group-item > strong,
.fiscal-details .list-group-item > small { display: block; }
.fiscal-details .list-group-item > span:first-child,
.fiscal-details .list-group-item > small { color: var(--vtr-text-muted); font-size: .76rem; }
.fiscal-details .list-group-item > strong { margin: .08rem 0; font-size: .9rem; }
.fiscal-status-list .list-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: .86rem;
}

@media (min-width: 1200px) {
    .fiscal-sidebar {
        position: sticky;
        top: calc(var(--vtr-topbar-height) + 1rem);
    }
}

@media (max-width: 575.98px) {
    .fiscal-check { min-height: 105px; padding: .7rem; }
    .fiscal-check-icon { width: 30px; height: 30px; }
    .fiscal-save-bar .btn { width: 100%; }
}

.vtr-stat-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem;
}

.vtr-stat-value { font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.vtr-stat-label { font-size: .78rem; color: var(--vtr-text-muted); }

.table > :not(caption) > * > * { padding: .6rem .75rem; }
thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--vtr-text-muted); font-weight: 600; }

/* Selector de tema na barra superior */
.vtr-temas { display: flex; gap: .25rem; align-items: center; }
.vtr-tema-botao {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid transparent; padding: 0; cursor: pointer;
}
.vtr-tema-botao.activo { border-color: var(--vtr-text); }
.vtr-tema-claro     { background: linear-gradient(135deg, #ffffff 50%, #2563eb 50%); border-color: #d5d8e0; }
.vtr-tema-escuro    { background: linear-gradient(135deg, #16203a 50%, #3b82f6 50%); }
.vtr-tema-azul      { background: linear-gradient(135deg, #0b2545 50%, #0369a1 50%); }
.vtr-tema-esmeralda { background: linear-gradient(135deg, #10261c 50%, #047857 50%); }
.vtr-tema-grafite   { background: linear-gradient(135deg, #18181b 50%, #71717a 50%); }
.vtr-tema-laranja   { background: linear-gradient(135deg, #ffffff 50%, #ea580c 50%); border-color: #f6ddc9; }
.vtr-tema-contraste { background: linear-gradient(135deg, #000000 50%, #ffff00 50%); }

/* Abas dos formulários.
   A aba activa liga-se ao cartão por baixo: sem essa costura, o cartão
   parece uma caixa solta e deixa de se perceber que o conteúdo é da aba. */
.vtr-form-tabs {
    border-bottom: 1px solid var(--vtr-border);
    gap: .15rem;
}
.vtr-form-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: var(--vtr-radius) var(--vtr-radius) 0 0;
    padding: .55rem .95rem;
    color: var(--vtr-text-muted);
    font-weight: 600;
    font-size: .9rem;
}
.vtr-form-tabs .nav-link:hover {
    border-color: var(--vtr-border-soft);
    background: var(--vtr-surface-2);
    color: var(--vtr-text);
}
.vtr-form-tabs .nav-link.active {
    border-color: var(--vtr-border) var(--vtr-border) var(--vtr-surface);
    background: var(--vtr-surface);
    color: var(--vtr-accent);
}
/* O canto que encosta na aba activa fica a direito, para o cartão continuar
   a linha da aba em vez de a cortar. */
.vtr-tab-card, .vtr-tab-extra > .card:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -1px;
}

/* Painel de resumo ao lado dos campos. */
.vtr-resumo-destaque {
    padding: .85rem 1rem;
    border: 1px solid var(--vtr-accent-soft);
    border-radius: var(--vtr-radius);
    background: var(--vtr-accent-soft);
    color: var(--vtr-accent);
}
.vtr-resumo-destaque .h3 { color: var(--vtr-text); }

.vtr-resumo-lista > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--vtr-border-soft);
}
.vtr-resumo-lista > div:last-child { border-bottom: 0; padding-bottom: 0; }
.vtr-resumo-lista dt {
    font-weight: 500;
    font-size: .85rem;
    color: var(--vtr-text-muted);
}
.vtr-resumo-lista dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

/* O cabeçalho de cada cartão do formulário é um rótulo, não um título de
   página: pesa o suficiente para separar assuntos e não mais do que isso. */
.vtr-tab-corpo .card-header {
    background: var(--vtr-surface-2);
    font-weight: 600;
    font-size: .9rem;
}


/* ---------------------------------------------------------------------------
   4. Autenticação
   --------------------------------------------------------------------------- */

.vtr-auth {
    min-height: 100vh;
    /* Coluna, e não linha: o rodapé com a versão fica debaixo do cartão e não
       ao lado dele. */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--vtr-auth-de) 0%, var(--vtr-auth-para) 100%);
    padding: 1.5rem;
}

.vtr-auth-card {
    width: 100%; max-width: 400px;
    background: var(--vtr-surface); color: var(--vtr-text);
    border-radius: 1rem; padding: 2rem;
    box-shadow: 0 18px 45px rgba(6, 11, 25, .35);
}

.vtr-auth-brand {
    display: flex; align-items: center; justify-content: center; gap: .55rem;
    font-weight: 600; font-size: 1.15rem; margin-bottom: 1.5rem;
}

.vtr-auth-brand i { color: var(--vtr-accent); }
.vtr-auth-logo { max-height: 64px; max-width: 220px; object-fit: contain; margin: 0 auto 1rem; display: block; }

/* ---------------------------------------------------------------------------
   5. Montra (módulo Loja)
   --------------------------------------------------------------------------- */

body.loja { background: var(--vtr-surface); color: var(--vtr-text); display: flex; flex-direction: column; min-height: 100vh; }
body.loja main { flex: 1; }

.loja-topo { background: var(--vtr-surface); border-bottom: 1px solid var(--vtr-border); position: sticky; top: 0; z-index: 1030; }
.loja-marca { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: 1.1rem; text-decoration: none; color: inherit; white-space: nowrap; }
.loja-marca i { color: var(--vtr-accent); }
.loja-marca img { max-height: 34px; max-width: 160px; object-fit: contain; }
.loja-pesquisa { max-width: 22rem; width: 100%; }

.loja-categorias { background: var(--vtr-surface-2); }
.loja-cat { font-size: .875rem; color: var(--vtr-text-muted); text-decoration: none; white-space: nowrap; padding: .15rem 0; border-bottom: 2px solid transparent; }
.loja-cat:hover { color: var(--vtr-text); }
.loja-cat.activa { color: var(--vtr-accent); border-bottom-color: var(--vtr-accent); font-weight: 600; }

.loja-artigo { overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; }
.loja-artigo:hover { box-shadow: var(--vtr-sombra-forte); transform: translateY(-2px); }
.loja-artigo h2 a, .loja-artigo h3 a { color: inherit; text-decoration: none; }

.loja-imagem { display: block; position: relative; aspect-ratio: 4 / 3; background: var(--vtr-surface-2); overflow: hidden; }
.loja-imagem img { width: 100%; height: 100%; object-fit: cover; }

.loja-sem-imagem {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; color: var(--vtr-text-muted); opacity: .5; font-size: 2rem;
}

.loja-etiqueta {
    position: absolute; top: .5rem; left: .5rem;
    color: #fff; font-size: .7rem; font-weight: 600;
    padding: .15rem .45rem; border-radius: .3rem;
}

.loja-preco { font-weight: 600; color: var(--vtr-text); }

.loja-imagem-grande {
    aspect-ratio: 4 / 3; background: var(--vtr-surface-2); border-radius: var(--vtr-radius);
    overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.loja-imagem-grande img { width: 100%; height: 100%; object-fit: contain; }

.loja-miniatura {
    width: 68px; height: 68px; padding: 0; border: 2px solid transparent;
    border-radius: .4rem; overflow: hidden; background: var(--vtr-surface-2); cursor: pointer;
}
.loja-miniatura.activa { border-color: var(--vtr-accent); }
.loja-miniatura img { width: 100%; height: 100%; object-fit: cover; }

.loja-descricao { white-space: pre-line; }
.loja-carrinho-miniatura { width: 52px; height: 52px; object-fit: cover; border-radius: .35rem; }
.loja-rodape { border-top: 1px solid var(--vtr-border-soft); background: var(--vtr-surface-2); }

.loja-admin-imagem { width: 132px; border: 1px solid var(--vtr-border); border-radius: .5rem; overflow: hidden; background: var(--vtr-surface); }
.loja-admin-imagem img { width: 100%; height: 96px; object-fit: cover; display: block; }
.loja-admin-imagem figcaption {
    display: flex; align-items: center; justify-content: space-between;
    padding: .25rem .4rem; border-top: 1px solid var(--vtr-border-soft);
}

/* ---------------------------------------------------------------------------
   6. Terminal (módulo POS)

   O terminal segue o tema escolhido, como o resto da aplicação: quem quer o
   balcão escuro põe o tema Escuro; quem tem a loja cheia de luz põe um tema
   claro. Aqui não há uma única cor escrita à mão — tudo sai dos tokens
   --pos-* declarados na secção 1, que por sua vez derivam do tema.
   --------------------------------------------------------------------------- */

body.pos-body {
    /* Medidas do terminal.
       Ficam aqui em vez de espalhadas pelas regras porque é assim que o ecrã
       se adapta: a secção 7 só muda estes números conforme o monitor, e todo
       o terminal encolhe junto. */
    --pos-barra-h: 70px;
    --pos-gap: .6rem;
    --pos-venda-w: 380px;
    /* Botão de artigo. Num POS o que interessa é quantos cabem no ecrã sem
       rolar: a fotografia é para reconhecer o artigo, não para o mostrar.
       Os números são de ecrã táctil: o dedo tapa o que vai carregar, por isso
       o alvo tem de ser maior do que aquilo que o rato precisaria. */
    --pos-artigo-min: 150px;
    --pos-figura: 76px;
    --pos-artigo-corpo: 4.2rem;
    --pos-tecla-h: 56px;
    --pos-total: 1.5rem;

    background: var(--pos-bg); color: var(--pos-texto);
    height: 100vh;
    height: 100dvh; /* nos tablets a barra do browser aparece e desaparece */
    overflow: hidden; display: flex; flex-direction: column;
}

/* --- A barra do terminal ---------------------------------------------------

   Quatro zonas separadas por fios: de quem e a casa, que software esta a
   correr, o que ha para fazer, e que horas sao. Cada uma responde a uma
   pergunta diferente -- misturadas numa tira so, ninguem encontrava nenhuma.

   Flutua em vez de estar colada ao topo: o ecra do posto e o mesmo o dia
   inteiro, e uma barra com ar a volta le-se como painel de instrumentos e nao
   como moldura do browser. */

.pos-barra {
    display: flex; align-items: stretch; gap: 0;
    min-height: var(--pos-barra-h);
    margin: .5rem .5rem 0; padding: .45rem .6rem;
    background: var(--pos-barra);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 1rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    flex: 0 0 auto;
}

.pos-barra-zona { display: flex; align-items: center; gap: .5rem; padding: 0 .85rem; }
.pos-barra-zona + .pos-barra-zona { border-left: 1px solid rgba(255, 255, 255, .1); }

/* --- zona 1: a casa --- */

.pos-barra-casa { padding-left: .35rem; }

.pos-barra-menu {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 auto;
    color: var(--pos-barra-fg); text-decoration: none;
    border-radius: .6rem; font-size: 1.35rem;
}
.pos-barra-menu:hover { background: rgba(255, 255, 255, .12); color: var(--pos-barra-fg-forte); }

.pos-marca {
    display: flex; align-items: center; gap: .6rem;
    padding: .25rem .5rem .25rem .25rem;
    background: transparent; border: 0; border-radius: .7rem;
    color: var(--pos-barra-fg); text-decoration: none; text-align: left;
}
.pos-marca:hover { background: rgba(255, 255, 255, .08); color: var(--pos-barra-fg); }

/* O logotipo em quadrado com cantos: e assim que se le como marca, e nao como
   uma imagem que alguem deixou cair na barra. */
.pos-marca-logo {
    width: 42px; height: 42px; flex: 0 0 auto;
    object-fit: cover; border-radius: .65rem;
    background: #fff;
}
.pos-marca-inicial {
    display: flex; align-items: center; justify-content: center;
    background: var(--pos-realce); color: var(--pos-realce-fg);
    font-size: 1.35rem; font-weight: 700;
}

.pos-marca-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pos-marca-nome {
    font-size: 1.02rem; font-weight: 700;
    color: var(--pos-barra-fg-forte, var(--pos-barra-fg));
    max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pos-marca-sub { font-size: .8rem; opacity: .72; }
.pos-marca-seta { font-size: .75rem; opacity: .6; }

/* --- zona 2: o software --- */

.pos-barra-centro { flex: 1; min-width: 0; justify-content: flex-start; }

.pos-produto-icone {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: 0 0 auto;
    background: var(--pos-realce); color: var(--pos-realce-fg);
    border-radius: .55rem; font-weight: 800; font-size: 1.1rem;
}

.pos-barra-centro-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pos-barra-centro-txt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pos-barra-produto {
    font-size: 1.05rem; font-weight: 700;
    color: var(--pos-barra-fg-forte, var(--pos-barra-fg));
}
.pos-barra-versao {
    margin-left: .3rem; padding: .1rem .4rem;
    background: var(--pos-realce); color: var(--pos-realce-fg);
    border-radius: .35rem; font-size: .72rem; font-weight: 700;
    vertical-align: middle;
}

.pos-barra-licenca {
    display: flex; align-items: center; gap: .4rem;
    font-size: .82rem; color: var(--pos-barra-fg); opacity: .82;
}

/* A luz verde diz o que uma frase nao diz tao depressa: esta boa. Vermelha
   quando nao esta -- e ai o operador tem de reparar antes de vender. */
.pos-pisca {
    width: 8px; height: 8px; flex: 0 0 auto;
    background: #22c55e; border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
}
.pos-barra-licenca.invalida { opacity: 1; color: #fca5a5; }
.pos-barra-licenca.invalida .pos-pisca { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .2); }

/* --- zona 3: as teclas --- */

.pos-barra-accoes { gap: .4rem; }

.pos-barra-btn {
    display: flex; align-items: center; gap: .45rem;
    min-height: 46px; padding: .5rem .9rem;
    background: rgba(255, 255, 255, .06); border: 1px solid transparent;
    color: var(--pos-barra-fg); text-decoration: none; border-radius: .7rem;
    font-size: .95rem; font-weight: 600; line-height: 1;
}
.pos-barra-btn i { font-size: 1.2rem; }
.pos-barra-btn:hover { background: rgba(255, 255, 255, .14); color: var(--pos-barra-fg-forte); }

/* O ecra onde ja se esta fica marcado: sem isto, num terminal aberto o dia
   todo, perde-se a nocao de onde se esta. */
.pos-barra-btn.activo {
    background: rgba(255, 255, 255, .1);
    border-color: var(--pos-realce);
    color: var(--pos-barra-fg-forte);
}

/* A tecla das mesas e a que mais se usa numa casa com servico a mesa: leva a
   cor de realce, como o "MESAS" dos terminais de restauracao. */
.pos-barra-btn.destaque { background: var(--pos-realce); color: var(--pos-realce-fg); }
.pos-barra-btn.destaque:hover { filter: brightness(1.08); color: var(--pos-realce-fg); }

.pos-barra-btn > span {
    max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Estado da AT: a cor esta na tecla toda e nao num pontinho ao lado. Ao balcao
   ninguem procura sinais discretos -- ou se ve de relance, ou nao serve. */
.pos-at.bem { color: #4ade80; }
.pos-at.aviso { background: rgba(250, 204, 21, .16); color: #fde047; }
.pos-at.mal { background: rgba(239, 68, 68, .2); color: #fca5a5; }
.pos-at.mal:hover, .pos-at.aviso:hover { color: #fff; }

.pos-at-conta {
    min-width: 1.25rem; padding: 0 .3rem;
    background: rgba(255, 255, 255, .2); border-radius: .4rem;
    font-size: .78rem; text-align: center;
}

/* --- zona 4: o relogio --- */

.pos-relogio {
    flex-direction: column; align-items: flex-end; justify-content: center;
    gap: .1rem; padding-right: .35rem;
    color: var(--pos-barra-fg-forte, var(--pos-barra-fg));
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.pos-relogio-data {
    display: flex; align-items: center; gap: .35rem;
    font-size: .92rem; font-weight: 600; opacity: .8;
}
.pos-relogio-hora {
    display: flex; align-items: center; gap: .45rem;
    font-size: 2.1rem; font-weight: 700; letter-spacing: .01em;
}
.pos-relogio-hora i { font-size: 1.5rem; opacity: .65; }

.pos-main { flex: 1; min-height: 0; padding: var(--pos-gap); display: flex; flex-direction: column; gap: var(--pos-gap); }
.pos-main .alert { margin-bottom: 0; }

.pos-aviso {
    display: flex; gap: .6rem; align-items: flex-start;
    background: var(--pos-aviso-bg); border: 1px solid var(--pos-aviso-borda); color: var(--pos-aviso-fg);
    padding: .6rem .8rem; border-radius: .5rem; font-size: .85rem; flex: 0 0 auto;
}
.pos-aviso i { font-size: 1.1rem; }
.pos-aviso code { color: inherit; font-weight: 600; }
.pos-aviso-info { background: var(--pos-info-bg); border-color: var(--pos-info-borda); color: var(--pos-info-fg); }
.pos-aviso-info .alert-link { color: inherit; }

.pos { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr var(--pos-venda-w); gap: var(--pos-gap); }

.pos-catalogo { display: flex; flex-direction: column; min-height: 0; gap: .5rem; }

.pos-procura {
    display: flex; align-items: center; gap: .5rem;
    background: var(--pos-painel); border: 1px solid var(--pos-borda); border-radius: .5rem; padding: .35rem .6rem;
}
.pos-procura i { color: var(--pos-texto-fraco); font-size: 1.2rem; }
.pos-procura input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--pos-texto); font-size: 1rem; padding: .45rem 0; }
.pos-procura input::placeholder { color: var(--pos-texto-fraco); }

/* Tira de separadores: seta, lista que rola, seta. A lista é o único
   elemento que rola; as setas ficam fixas nas pontas, para o dedo as
   encontrar sempre no mesmo sítio. */
.pos-tira { display: flex; align-items: stretch; gap: .3rem; flex: 0 0 auto; min-width: 0; }
.pos-tira-seta {
    flex: 0 0 auto; width: 64px; min-height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--pos-painel); border: 1px solid var(--pos-borda); border-radius: .5rem;
    color: var(--pos-texto); font-size: 1.9rem; line-height: 1; cursor: pointer;
}
.pos-tira-seta:active { background: var(--pos-seleccao); }

/* A barra de rolagem some-se: quem tem ecrã táctil arrasta, quem não tem usa
   as setas, e a barra só roubava altura à grelha. */
.pos-familias { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .2rem; flex: 1 1 auto; min-width: 0;
                scrollbar-width: none; scroll-behavior: smooth; }
.pos-familias::-webkit-scrollbar { display: none; }
.pos-familia {
    flex: 0 0 auto; min-height: 56px; padding: .55rem 1.15rem;
    background: var(--pos-painel); border: 1px solid var(--pos-borda); border-radius: .5rem;
    color: var(--pos-texto); font-size: 1.02rem; cursor: pointer; white-space: nowrap;
}
.pos-familia.activa { background: var(--pos-realce); border-color: var(--pos-realce); color: var(--pos-realce-fg); font-weight: 600; }

/* Segunda linha de separadores: as sub-famílias da família aberta. Os botões
   são os mesmos das famílias — o dedo já sabe onde carregar e do tamanho que
   são; muda a linha em que estão. */
.pos-subfamilias { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .2rem; flex: 1 1 auto; min-width: 0;
                   scrollbar-width: none; scroll-behavior: smooth; }
.pos-subfamilias::-webkit-scrollbar { display: none; }

/* Cor escolhida no backoffice. A cor de letra vem com ela, calculada a partir
   da luminância, para que um amarelo não fique com texto branco por cima. */
.pos-familia[data-cor] { background: var(--cor); border-color: var(--cor); color: var(--cor-fg); }
.pos-familia[data-cor].activa {
    box-shadow: inset 0 0 0 2px var(--cor-fg); font-weight: 600;
}

.pos-grelha {
    flex: 1; min-height: 0; overflow-y: auto;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--pos-artigo-min), 1fr));
    /* Com numero de colunas escolhido, e o numero que manda e a largura que se
       ajusta -- ao contrario do automatico, onde manda a largura. */
    gap: .5rem; align-content: start; padding-right: .2rem;
}

/* Botão de artigo: fotografia por cima, nome e preço por baixo. */
.pos-artigo {
    position: relative; padding: 0; overflow: hidden;
    display: flex; flex-direction: column; text-align: left;
    background: var(--pos-tecla); border: 1px solid var(--pos-borda); border-radius: .6rem;
    color: var(--pos-texto); cursor: pointer; transition: transform .06s ease, background .12s ease;
}
/* Altura igual para todos: figura + duas linhas de nome + preço. Assim a
   grelha fica alinhada e nada é cortado, tenha o artigo um nome curto ou
   "AGUA 50CL CARVALHELHOS". */
.pos-artigo { height: auto; min-height: calc(var(--pos-figura) + var(--pos-artigo-corpo)); }
.pos-artigo:hover { background: var(--pos-seleccao); }
.pos-artigo:active { transform: scale(.97); }

/* Altura fixa, e não aspect-ratio: num browser que não o suporte a figura
   colapsava, o botão encolhia e o nome e o preço ficavam de fora — que é
   precisamente a única coisa que o botão tem de mostrar. */
.pos-artigo-figura {
    position: relative; width: 100%; height: var(--pos-figura);
    background: var(--pos-zebra); overflow: hidden; flex: 0 0 auto;
}
.pos-artigo-figura img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Um artigo sem fotografia não precisa de meio botão para duas letras: a
   marca de água encolhe e o nome fica com o espaço. Numa cafetaria, onde
   quase nada tem foto, é a diferença entre ler o botão e adivinhá-lo. */
.pos-artigo.sem-foto { height: auto; min-height: calc(var(--pos-figura) * .5 + var(--pos-artigo-corpo)); }
.pos-artigo.sem-foto .pos-artigo-figura { height: calc(var(--pos-figura) * .5); }
.pos-artigo.sem-foto .pos-artigo-inicial { font-size: 1.1rem; }

/* Sem fotografia: iniciais do artigo, para o botão continuar distinguível. */
.pos-artigo-inicial {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 700; letter-spacing: .05em;
    color: var(--pos-texto-fraco); background: var(--pos-tecla);
}

/* O nome e o preço nunca são espremidos: é o que se lê antes de carregar.
   Altura mínima, não fixa -- a grelha estica os botões da mesma linha para
   ficarem iguais, e nenhum ajuste de tamanho corta o nome. */
.pos-artigo-corpo {
    padding: .35rem .55rem .45rem;
    display: flex; flex-direction: column; gap: .1rem; flex: 0 0 auto;
    justify-content: flex-end; min-height: var(--pos-artigo-corpo);
}
/* Duas linhas no máximo, com reticências: "AGUA 50CL CARVALHELHOS" empurrava
   o preço para fora do botão, e o preço é a outra metade do que interessa. */
.pos-artigo-nome {
    font-size: .9rem; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.pos-artigo-preco { font-size: 1.05rem; font-weight: 600; color: var(--pos-preco); }
.pos-artigo-esgotado {
    position: absolute; top: .35rem; right: .35rem; z-index: 2;
    background: var(--pos-perigo-bg); color: var(--pos-perigo-fg); font-size: .65rem; padding: .05rem .3rem; border-radius: .25rem;
}

/* Modo compacto: sem fotografias, cabem mais artigos no ecrã. */
.pos-grelha.compacta { grid-template-columns: repeat(auto-fill, minmax(calc(var(--pos-artigo-min) - 18px), 1fr)); }
.pos-grelha.compacta .pos-artigo-figura { display: none; }
.pos-grelha.compacta .pos-artigo { height: auto; min-height: 92px; justify-content: center; }
.pos-grelha.compacta .pos-artigo-corpo { height: auto; justify-content: center; }

.pos-vazio { color: var(--pos-texto-fraco); text-align: center; padding: 2rem 1rem; font-size: .9rem; }

.pos-venda {
    display: flex; flex-direction: column; min-height: 0;
    background: var(--pos-painel); border: 1px solid var(--pos-borda); border-radius: .6rem; overflow: hidden;
}
.pos-venda-topo {
    display: flex; justify-content: space-between; align-items: center;
    padding: .5rem .75rem; border-bottom: 1px solid var(--pos-borda); font-size: .9rem; color: var(--pos-texto);
}
.pos-terminal { color: var(--pos-texto-fraco); font-size: .78rem; }

/* Barra programável por cima do carrinho: o sítio onde a mão já está. */
.pos-atalhos {
    display: flex; flex-wrap: wrap; gap: .3rem;
    padding: .4rem .5rem; border-bottom: 1px solid var(--pos-borda);
}
.pos-atalho {
    flex: 1 1 auto; min-width: 5rem; min-height: 54px;
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    padding: .4rem .6rem; border: 1px solid var(--pos-borda); border-radius: .45rem;
    background: var(--pos-tecla); color: var(--pos-texto); text-decoration: none;
    font-size: .85rem; cursor: pointer;
}
.pos-atalho:hover { border-color: var(--pos-realce); color: var(--pos-texto); }
.pos-atalho i { font-size: 1.1rem; }
.pos-atalho.perigo { color: var(--pos-perigo); border-color: var(--pos-perigo-borda); }

.pos-linhas { flex: 1; min-height: 0; overflow-y: auto; padding: .35rem; }

.pos-linha {
    display: grid; grid-template-columns: 1fr auto auto auto; gap: .4rem; align-items: center;
    padding: .45rem .5rem; border-radius: .4rem; cursor: pointer;
}

/* Quantidade na própria linha: substituiu o teclado numérico, que ocupava um
   terço da coluna da venda para fazer o mesmo com mais passos. */
.pos-linha-qtd { display: inline-flex; align-items: center; gap: .15rem; }
.pos-qtd-botao {
    width: 32px; height: 32px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--pos-borda); border-radius: .35rem;
    background: var(--pos-tecla); color: var(--pos-texto); cursor: pointer;
}
.pos-qtd-botao:active { background: var(--pos-realce); color: var(--pos-realce-fg); }
.pos-linha-quantidade { min-width: 1.6rem; text-align: center; font-variant-numeric: tabular-nums; }
.pos-linha:nth-child(odd) { background: var(--pos-zebra); }
.pos-linha.seleccionada { background: var(--pos-seleccao); box-shadow: inset 3px 0 0 var(--pos-realce); }
.pos-linha-nome { font-size: .85rem; min-width: 0; }
.pos-linha-detalhe { display: block; color: var(--pos-texto-fraco); font-size: .72rem; }

/* Miniatura da linha de venda.
   Flutua a esquerda para o nome e o detalhe correrem ao lado sem precisar de
   mais um no no DOM. Sem fotografia a linha fica exactamente como antes. */
.pos-linha-miniatura {
    float: left;
    width: 2.1rem; height: 2.1rem;
    margin: .05rem .45rem .05rem 0;
    border-radius: .3rem;
    object-fit: cover;
    background: var(--pos-zebra);
}
.pos-linha-total { font-weight: 600; font-variant-numeric: tabular-nums; }
.pos-linha-remover { background: transparent; border: 0; color: var(--pos-perigo); padding: .2rem .35rem; cursor: pointer; }

.pos-totais { padding: .5rem .75rem; border-top: 1px solid var(--pos-borda); font-size: .85rem; }
.pos-totais > div { display: flex; justify-content: space-between; color: var(--pos-texto-fraco); }
.pos-totais .pos-total { color: var(--pos-texto); font-size: var(--pos-total); font-weight: 600; margin-top: .2rem; }
.pos-totais span { font-variant-numeric: tabular-nums; }

.pos-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; padding: .5rem; }
.pos-teclado button {
    min-height: var(--pos-tecla-h); background: var(--pos-tecla); border: 1px solid var(--pos-borda); border-radius: .45rem;
    color: var(--pos-texto); font-size: 1.1rem; cursor: pointer;
}
.pos-teclado button:active { background: var(--pos-realce); color: var(--pos-realce-fg); }
.pos-tecla-larga { grid-column: span 3; font-size: .9rem !important; }
.pos-tecla-perigo { color: var(--pos-perigo) !important; border-color: var(--pos-perigo-borda) !important; }

.pos-visor { text-align: right; padding: 0 .75rem .4rem; color: var(--pos-preco); font-variant-numeric: tabular-nums; min-height: 1.4rem; font-size: .9rem; }

.pos-cliente { display: grid; grid-template-columns: 1fr 120px; gap: .3rem; padding: 0 .5rem .5rem; }
/* Dentro da janela há espaço: os campos ficam em coluna e a lista respira. */
.modal .pos-cliente { display: flex; flex-direction: column; gap: .5rem; padding: 0; }
.modal .pos-cliente input { width: 100%; }
.modal .pos-cliente-lista { max-height: 16rem; }
.pos-atalho.activo { border-color: var(--pos-realce); background: var(--pos-seleccao); font-weight: 600; }
.pos-atalho span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9rem; }
.pos-cliente input {
    background: var(--pos-campo); border: 1px solid var(--pos-borda); border-radius: .4rem;
    color: var(--pos-texto); padding: .45rem .55rem; font-size: .85rem;
}

.pos-accoes { display: grid; grid-template-columns: 1fr 1.4fr; gap: .4rem; padding: .5rem; }
.pos-btn {
    min-height: calc(var(--pos-tecla-h) + 12px); border: 0; border-radius: .5rem; font-size: 1rem; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.pos-btn-nif { background: var(--pos-tecla); border: 1px solid var(--pos-borda); color: var(--pos-texto); }
.pos-btn-pagar { background: var(--pos-ok); color: var(--pos-ok-fg); font-size: 1.2rem; }
.pos-btn-pagar:disabled { background: var(--pos-tecla); color: var(--pos-texto-fraco); cursor: not-allowed; }

/* Tabela de preços em vigor no posto. */
.pos-grupos { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-bottom: .5rem; }
.pos-grupos-rotulo { color: var(--pos-texto-fraco); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.pos-grupo {
    border: 1px solid var(--pos-borda); background: transparent; color: var(--pos-texto-fraco);
    border-radius: 999px; padding: .2rem .7rem; font-size: .8rem; cursor: pointer;
}
.pos-grupo.activo { background: var(--pos-realce); border-color: var(--pos-realce); color: var(--pos-realce-fg); font-weight: 600; }
.pos-grupo-gerir { text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; border-style: dashed; }

/* Modais dentro do POS: a moldura é a do terminal, seja qual for o tema. */
.pos-body .modal-content {
    background: var(--pos-painel); color: var(--pos-texto); border: 1px solid var(--pos-borda);
}
.pos-body .modal-header, .pos-body .modal-footer { border-color: var(--pos-borda); }
.pos-body .modal-body .text-muted, .pos-body .modal-body .form-text { color: var(--pos-texto-fraco) !important; }
/* O X do Bootstrap é uma imagem preta: só se inverte quando o fundo é escuro. */
[data-bs-theme="dark"] .pos-body .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.pos-body .form-control, .pos-body .form-select {
    background: var(--pos-campo); color: var(--pos-texto); border-color: var(--pos-borda);
}
.pos-body .form-control:focus, .pos-body .form-select:focus { background: var(--pos-campo); color: var(--pos-texto); }
.pos-body .btn-outline-secondary { color: var(--pos-texto); border-color: var(--pos-borda); }
.pos-body .btn-outline-secondary:hover { background: var(--pos-tecla); color: var(--pos-texto); }
.pos-body .pos-mesa-botao,
.pos-body .pos-preco-opcao { background: var(--pos-tecla); color: var(--pos-texto); border-color: var(--pos-borda); }
.pos-body .pos-mesas-zona,
.pos-body .pos-mesa-lugares,
.pos-body .pos-mesa-tempo,
.pos-body .pos-preco-regra { color: var(--pos-texto-fraco); }
.pos-body .conta-dividir-linha { border-color: var(--pos-borda); }

/* Ecrãs do backoffice mostrados dentro de um modal do POS: a moldura é a do
   terminal, o conteúdo é o mesmo de sempre. */
.vtr-modal-titulo { margin-bottom: .75rem; }
.vtr-modal-titulo h1, .vtr-modal-titulo h2 { font-size: 1.1rem; margin: 0; }
.vtr-modal-titulo p { margin: .15rem 0 0; }
/* Dentro do modal o título já está na barra da janela — repeti-lo por baixo é
   ocupar duas linhas para dizer o mesmo. Fica a legenda, que acrescenta. */
#posModalPainelCorpo .vtr-modal-titulo h1,
#posModalPainelCorpo .vtr-modal-titulo h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#posModalPainelCorpo .vtr-modal-titulo:has(p) { margin-bottom: .6rem; }
.pos-body .modal-xl .modal-body { background: var(--pos-bg); }
.pos-body .vtr-modal-corpo .card {
    background: var(--pos-painel); border-color: var(--pos-borda); color: var(--pos-texto);
}
.pos-body .vtr-modal-corpo .card-header { background: transparent; border-color: var(--pos-borda); }
.pos-body .vtr-modal-corpo .table { --bs-table-color: var(--pos-texto); --bs-table-bg: transparent; }
.pos-body .vtr-modal-corpo .table > :not(caption) > * > * { border-color: var(--pos-borda); }
.pos-body .vtr-modal-corpo .text-muted { color: var(--pos-texto-fraco) !important; }
.pos-body .vtr-modal-corpo .alert { border-color: var(--pos-borda); }
.pos-body .vtr-modal-corpo .badge.text-bg-light { background: var(--pos-tecla) !important; color: var(--pos-texto) !important; }

/* ---- painel do posto ---- */
.painel { padding: .75rem .85rem 1.25rem; overflow-y: auto; }

/* --- as cores dos assuntos -------------------------------------------------

   Treze cartoes iguais obrigam a ler treze titulos para achar um. Com uma cor
   por assunto -- dinheiro em verde, fiscal em azul, configuracao em roxo --
   acha-se pelo canto do olho, que e como se trabalha com as maos ocupadas.

   Cor em canal RGB e nao em hexadecimal: o mesmo valor serve o icone (cheio) e
   o quadrado atras dele (a 12% ), e assim os dois nunca se desencontram. */

.cor-laranja  { --cor: 234, 88, 12; }
.cor-verde    { --cor: 22, 163, 74; }
.cor-azul     { --cor: 37, 99, 235; }
.cor-roxo     { --cor: 124, 58, 237; }
.cor-rosa     { --cor: 219, 39, 119; }
.cor-vermelho { --cor: 220, 38, 38; }
.cor-agua     { --cor: 13, 148, 136; }
.cor-amarelo  { --cor: 217, 119, 6; }
.cor-cinza    { --cor: 100, 116, 139; }

.painel-numeros {
    display: grid; gap: .5rem; margin-bottom: .85rem;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.painel-numero {
    display: flex; align-items: center; gap: .6rem;
    background: var(--pos-painel); border: 1px solid var(--pos-borda);
    border-radius: .7rem; padding: .6rem .7rem;
}
.painel-numero-icone, .painel-botao-icone {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex: 0 0 auto;
    background: rgba(var(--cor, 234, 88, 12), .12);
    color: rgb(var(--cor, 234, 88, 12));
    border-radius: .6rem;
}
.painel-numero-icone i, .painel-botao-icone i { font-size: 1.15rem; color: inherit; }

.painel-numero-txt { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.painel-numero-txt > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-numero-rotulo { color: var(--pos-texto-fraco); font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; }
.painel-numero-valor { font-size: 1.3rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.painel-numero-valor span { font-size: .85rem; color: var(--pos-texto-fraco); font-weight: 400; }
.painel-numero-valor.fechada { color: var(--pos-alerta); font-size: 1.05rem; }
.painel-numero-extra { color: var(--pos-texto-fraco); font-size: .72rem; }

.painel-botoes { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); }

/* O cartao e uma grelha de tres: quadrado, texto, seta. A seta encostada a
   direita e o que diz que aquilo abre alguma coisa -- um cartao sem ela
   parece um numero para ler. */
.painel-botao {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    gap: .65rem;
    min-height: 0; padding: .55rem .65rem; width: 100%; text-align: left; cursor: pointer;
    background: var(--pos-painel); border: 1px solid var(--pos-borda); border-radius: .7rem;
    color: var(--pos-texto); text-decoration: none;
}
.painel-botao:hover {
    border-color: rgb(var(--cor, 234, 88, 12));
    color: var(--pos-texto);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}
.painel-botao > .painel-botao-icone { grid-column: 1; grid-row: 1; }
.painel-botao-txt {
    display: flex; flex-direction: column; gap: .05rem; min-width: 0;
    grid-column: 2; grid-row: 1;
}
.painel-botao-txt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-botao-titulo { font-size: .92rem; font-weight: 700; line-height: 1.2; }
.painel-botao-nota { color: var(--pos-texto-fraco); font-size: .72rem; line-height: 1.2; }
.painel-botao-seta { grid-column: 3; grid-row: 1; color: var(--pos-texto-fraco); font-size: .85rem; }

/* O que se usa a toda a hora fica com a cor do cartao no fundo: e o primeiro
   sitio onde o olho pousa quando o painel abre. */
.painel-botao.principal {
    background: rgba(var(--cor, 234, 88, 12), .07);
    border-color: rgba(var(--cor, 234, 88, 12), .5);
}
.painel-botao-forma { display: contents; }

/* Escolher o tema a partir do terminal: quem está ao balcão não entra nas
   definições, mas o ecrã é o dele. */
.painel-aspecto {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--pos-borda);
}
.painel-aspecto-rotulo { color: var(--pos-texto-fraco); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.painel-aspecto-nome { color: var(--pos-texto-fraco); font-size: .8rem; }
.painel-aspecto .vtr-tema-botao { width: 28px; height: 28px; }
.painel-aspecto .vtr-tema-botao.activo { border-color: var(--pos-texto); }

.painel-procura { margin-bottom: 1rem; }

/* ---- ecrã de clientes (procura, ficha, lista) ---- */
.painel-clientes-topo {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem;
}
.painel-clientes-topo .painel-procura { flex: 1 1 18rem; margin-bottom: 0; }

/* Consumidor final: sem ficha, só o NIF que vai no documento. */
.painel-cliente-avulso {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    border: 1px dashed var(--pos-borda); border-radius: .5rem;
    padding: .6rem .75rem; margin-bottom: .75rem;
}
.painel-cliente-avulso-titulo { color: var(--pos-texto-fraco); font-size: .8rem; }
.painel-cliente-avulso input { flex: 1 1 8rem; max-width: 14rem; }

.painel-cliente-accoes { grid-column: 2; grid-row: 3; display: flex; gap: .25rem; justify-content: flex-end; }
.painel-cliente { grid-template-rows: auto auto auto; }
.painel-clientes { display: flex; flex-direction: column; gap: .5rem; }
.painel-cliente {
    display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center;
    background: var(--pos-painel); border: 1px solid var(--pos-borda);
    border-left: 4px solid var(--pos-borda); border-radius: .5rem; padding: .7rem .9rem;
}
.painel-cliente.vencido { border-left-color: var(--pos-perigo); }
.painel-cliente-nome { font-size: 1.05rem; font-weight: 600; }
.painel-cliente-detalhe { grid-column: 1; color: var(--pos-texto-fraco); font-size: .78rem; }
.painel-cliente-valores { grid-row: 1 / span 2; grid-column: 2; text-align: right; }
.painel-cliente-saldo { display: block; font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.painel-cliente-vencido { color: var(--pos-perigo); font-size: .78rem; }
.painel-cliente-adiantado { color: var(--pos-ok-texto); font-size: .78rem; }
.painel-nota { color: var(--pos-texto-fraco); font-size: .8rem; margin-top: 1rem; }

/* Conta corrente no terminal: leitura rápida antes de receber. */
.conta-pos-resumo {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem; margin-bottom: 1rem;
}
.conta-pos-indicador {
    background: var(--pos-painel); border: 1px solid var(--pos-borda);
    border-radius: .55rem; padding: .75rem .85rem;
}
.conta-pos-indicador span {
    display: block; color: var(--pos-texto-fraco); font-size: .75rem;
    text-transform: uppercase; letter-spacing: .035em;
}
.conta-pos-indicador strong {
    display: block; margin-top: .1rem; font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
}
.conta-pos-indicador.conta-pos-alerta {
    border-color: var(--pos-perigo); color: var(--pos-perigo);
}
.conta-pos-tabela .conta-pos-check { width: 2.6rem; text-align: center; }
.conta-pos-tabela label { cursor: pointer; }

/* ---- devolução de embalagens (SDR) ---- */
.sdr-contagem { display: flex; flex-direction: column; gap: .5rem; max-width: 22rem; }
.sdr-linha { display: flex; align-items: center; gap: .5rem; }
.sdr-linha .pos-qtd-botao { width: 48px; height: 48px; font-size: 1.2rem; }
.sdr-linha input { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.sdr-total { margin: 0; font-size: 1.1rem; }
.sdr-config { margin-top: .5rem; }
.sdr-config summary { cursor: pointer; }

/* A linha do deposito no carrinho: existe, soma, mas nao se mexe -- por isso
   nao tem os botoes de quantidade nem o x, e fica visivelmente a parte. */
.pos-linha-deposito {
    grid-template-columns: 1fr auto auto;
    cursor: default;
    font-style: italic;
    color: var(--pos-texto-fraco);
}
.pos-linha-deposito .pos-linha-total { font-style: normal; color: var(--pos-texto); }

/* ---- fotografias na ficha do artigo ---- */
.artigo-fotos {
    display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end;
    margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--pos-borda);
}
.artigo-foto { position: relative; margin: 0; }
.artigo-foto img {
    width: 96px; height: 96px; object-fit: cover;
    border: 1px solid var(--pos-borda); border-radius: .5rem; display: block;
}
.artigo-foto form { position: absolute; top: .2rem; right: .2rem; }
.artigo-foto-nova { min-width: 14rem; }

/* Interruptor do talão, ao lado do botão de finalizar. Desligado não fica
   escondido: fica visivelmente desligado, para ninguém descobrir só quando o
   cliente pede o talão. */
.pos-talao {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.75rem;
    padding: .5rem .9rem;
    font-size: .95rem;
    color: var(--pos-texto-fraco);
    background: var(--pos-tecla);
    border: 1px solid var(--pos-borda);
    border-radius: .5rem;
    cursor: pointer;
}

.pos-talao i { font-size: 1.1rem; }
.pos-talao.activo {
    color: var(--pos-realce);
    background: var(--pos-seleccao);
    border-color: var(--pos-realce);
    font-weight: 600;
}
.pos-talao:not(.activo) span { text-decoration: line-through; }

/* ---- comunicação à AT: o resumo que se lê à entrada ---- */
.com-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.com-tile {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .8rem 1rem;
    background: var(--vtr-surface);
    border: 1px solid var(--vtr-border);
    border-left: 3px solid var(--vtr-border);
    border-radius: var(--vtr-radius);
}

.com-tile.perigo { border-left-color: var(--pos-perigo); }
.com-tile.bom { border-left-color: var(--pos-ok); }

.com-tile-rotulo {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--vtr-text-muted);
}

.com-tile-valor { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.com-tile-nota { font-size: .8rem; color: var(--vtr-text-muted); }

.com-tile-accoes { display: flex; flex-direction: column; justify-content: center; gap: .4rem; }

/* ---- acesso à AT ---- */

/* O que é só de leitura (utilizador, ambiente, contagem) numa linha, sem se
   disfarçar de campo editável. */
.at-identidade {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 0 0 1rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--vtr-border-soft);
}

.at-identidade dt {
    font-size: .75rem;
    font-weight: 400;
    color: var(--vtr-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.at-identidade dd { margin: .15rem 0 0; font-weight: 600; }

/* A explicação de como a senha é guardada importa, mas não tem de gritar. */
.at-nota { margin-top: .5rem; font-size: .8rem; color: var(--vtr-text-muted); }
.at-nota summary { cursor: pointer; color: var(--vtr-accent); }
.at-nota[open] summary { margin-bottom: .25rem; }

/* ---- procurar fotografia para o artigo ---- */

/* O modal das imagens abre por cima da ficha, que também é um modal. O
   Bootstrap dá aos dois o mesmo nível, e o segundo pano de fundo ficava por
   baixo do primeiro modal — a ficha não escurecia e parecia continuar activa. */
#posModalImagens { z-index: 1075; }
.modal-backdrop ~ .modal-backdrop { z-index: 1070; }

.pos-imagens-procura { margin-bottom: .75rem; }
.pos-imagens-nota { margin-bottom: .6rem; }

/* O achado pelo código de barras: é o produto, não um parecido. */
.pos-imagens-exacto {
    margin: 0 0 .6rem;
    padding: .5rem .65rem;
    color: var(--pos-ok-texto);
    background: var(--pos-seleccao);
    border: 1px solid var(--pos-ok);
    border-radius: .4rem;
}

/* Resultados que já não são o que foi pedido vêm depois deste aviso. */
.pos-imagens-aviso {
    margin: .9rem 0 .6rem;
    padding: .5rem .65rem;
    color: var(--pos-aviso-fg);
    background: var(--pos-aviso-bg);
    border: 1px solid var(--pos-aviso-borda);
    border-radius: .4rem;
}

.pos-imagens-grelha {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: .5rem;
}

.pos-imagem-opcao { margin: 0; }
.pos-imagem-opcao button {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    width: 100%;
    padding: 0 0 .4rem;
    overflow: hidden;
    text-align: left;
    background: var(--pos-tecla);
    color: var(--pos-texto);
    border: 1px solid var(--pos-borda);
    border-radius: .5rem;
    cursor: pointer;
}

.pos-imagem-opcao button:hover { border-color: var(--pos-realce); background: var(--pos-seleccao); }
.pos-imagem-opcao button.a-guardar { opacity: .5; pointer-events: none; }
.pos-imagem-opcao img {
    width: 100%;
    height: 7rem;
    object-fit: cover;
    display: block;
    background: var(--pos-zebra);
}

.pos-imagem-titulo {
    padding: .3rem .45rem 0;
    font-size: .78rem;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pos-imagem-creditos {
    padding: 0 .45rem;
    font-size: .68rem;
    color: var(--pos-texto-fraco);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.artigo-foto-procurar { margin-bottom: .9rem; }

/* Imagem escolhida mas ainda não carregada: o tracejado diz que ainda não está
   lá — é a diferença entre o que se escolheu e o que ficou gravado. */
.vtr-previa { margin: .6rem 0 0; }
.vtr-previa img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    display: block;
    border: 1px dashed var(--vtr-accent);
    border-radius: .5rem;
    background: var(--pos-tecla);
}

.vtr-previa figcaption {
    display: flex;
    flex-direction: column;
    max-width: 12rem;
    margin-top: .25rem;
    font-size: .75rem;
    color: var(--pos-texto-fraco);
}

.vtr-previa-estado { color: var(--vtr-accent); }
.vtr-previa-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ficha do artigo por separadores. Os separadores são dedo, não rato: linha
   única que rola na horizontal e alvo com altura de toque. */
.artigo-abas {
    flex-wrap: nowrap;
    /* Só na horizontal: com `overflow-x` sozinho, o browser assume `auto` na
       vertical e desenha uma barra de deslocamento em cima dos separadores. */
    overflow-x: auto;
    overflow-y: hidden;
    gap: .15rem;
    border-bottom: 1px solid var(--pos-borda);
}

.artigo-abas .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.75rem;
    padding: .55rem 1rem;
    color: var(--pos-texto-fraco);
    background: transparent;
    white-space: nowrap;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.artigo-abas .nav-link:hover { color: var(--pos-texto); }
.artigo-abas .nav-link.active {
    color: var(--pos-realce);
    background: transparent;
    border-bottom-color: var(--pos-realce);
    font-weight: 600;
}
.artigo-abas .badge { font-size: .7rem; }

.artigo-abas-corpo { padding-top: 1rem; }
/* Dentro do separador as fotografias já estão sozinhas: o traço que as separava
   do resto do formulário deixa de fazer sentido. */
.artigo-abas-corpo .artigo-fotos { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

.artigo-rodape {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding-top: .9rem;
    border-top: 1px solid var(--pos-borda);
}

/* ---- ecrã dos botões do terminal ---- */
.atalhos-lista { display: flex; flex-direction: column; gap: .35rem; }
.atalho-linha {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    border: 1px solid var(--pos-borda); border-radius: .5rem; padding: .5rem .7rem;
}
.atalho-linha.activo { border-color: var(--pos-realce); background: var(--pos-seleccao); }
.atalho-ordem { display: flex; gap: .25rem; }

/* ---- modal das mesas ---- */
.pos-mesas-zona { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--pos-texto-fraco); margin: 1rem 0 .5rem; }
.pos-mesas-zona:first-child { margin-top: 0; }
.pos-mesas-grelha { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.pos-mesa-botao {
    display: flex; flex-direction: column; gap: .1rem; align-items: flex-start;
    min-height: 5rem; padding: .55rem .7rem; text-align: left; cursor: pointer;
    border: 1px solid var(--pos-borda); border-left: 4px solid var(--pos-ok); border-radius: .5rem;
    background: var(--pos-tecla); color: var(--pos-texto); text-decoration: none;
}
.pos-mesa-botao:hover { border-color: var(--pos-realce); }
.pos-mesa-botao.ocupada { border-left-color: var(--pos-alerta); }
.pos-mesa-botao:disabled { opacity: .5; cursor: progress; }
.pos-mesa-nome { font-size: 1.15rem; font-weight: 700; line-height: 1.1; }
.pos-mesa-lugares, .pos-mesa-tempo { color: var(--pos-texto-fraco); font-size: .72rem; }
.pos-mesa-total { margin-top: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos-mesa-livre { margin-top: auto; color: var(--pos-ok-texto); font-size: .78rem; }

/* ---- modal das tabelas de preços ---- */
.pos-precos-lista { display: flex; flex-direction: column; gap: .4rem; }
.pos-preco-opcao {
    display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: center;
    padding: .7rem .85rem; border: 1px solid var(--pos-borda); border-radius: .5rem;
    background: var(--pos-tecla); color: var(--pos-texto); cursor: pointer; text-align: left;
}
.pos-preco-opcao:hover { border-color: var(--pos-realce); }
.pos-preco-opcao.activo { border-color: var(--pos-realce); background: var(--pos-seleccao); font-weight: 600; }
.pos-preco-nome { font-size: 1rem; }
.pos-preco-regra { color: var(--pos-texto-fraco); font-size: .8rem; }

/* Botão do salão na barra: é o que se procura com o dedo, tem de saltar à vista. */
.pos-barra-btn.destaque { background: var(--pos-realce); color: var(--pos-realce-fg); border-radius: .4rem; }
.pos-barra-btn.destaque:hover { filter: brightness(1.1); }

/* ---- salão ---- */
.salao { padding: .75rem 1rem 1.5rem; overflow-y: auto; }
.salao-zona + .salao-zona { margin-top: 1.25rem; }
.salao-titulo {
    display: flex; align-items: baseline; gap: .6rem; color: var(--pos-texto);
    font-size: 1rem; font-weight: 600; margin: .75rem 0 .5rem;
}
.salao-titulo span { color: var(--pos-texto-fraco); font-size: .78rem; font-weight: 400; }

.salao-grelha {
    display: grid; gap: .6rem;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
.salao-mesa-forma { display: contents; }

/* A mesa é o alvo do dedo: grande, com o total sempre visível. Verde = livre,
   âmbar = ocupada — a cor diz o estado antes de se ler o que quer que seja. */
.salao-mesa {
    display: flex; flex-direction: column; gap: .15rem; align-items: flex-start;
    width: 100%; min-height: 6.5rem; padding: .7rem .8rem;
    border: 1px solid var(--pos-borda); border-left: 4px solid var(--pos-ok);
    border-radius: .6rem; background: var(--pos-painel); color: var(--pos-texto);
    text-decoration: none; text-align: left; cursor: pointer;
}
.salao-mesa:hover { border-color: var(--pos-realce); }
.salao-mesa.ocupada { border-left-color: var(--pos-alerta); background: var(--pos-zebra); }
.salao-mesa-nome { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.salao-mesa-lugares, .salao-mesa-tempo { color: var(--pos-texto-fraco); font-size: .75rem; }
.salao-mesa-total { margin-top: auto; font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.salao-mesa-livre { margin-top: auto; color: var(--pos-ok-texto); font-size: .8rem; }
.salao-mesa-contas { color: var(--pos-alerta); font-size: .72rem; }

.salao-separadas { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; align-items: center; }
.salao-separadas-titulo { color: var(--pos-texto-fraco); font-size: .75rem; }
.salao-separada {
    display: inline-flex; gap: .4rem; align-items: center;
    border: 1px dashed var(--pos-borda); border-radius: 999px;
    padding: .3rem .8rem; color: var(--pos-texto); text-decoration: none; font-size: .85rem;
}
.salao-separada:hover { border-color: var(--pos-realce); }

.salao-rodape { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.salao-rodape .pos-btn { flex: 0 0 auto; padding: .6rem 1rem; text-decoration: none; }

/* ---- conta aberta ---- */
.conta-topo { display: flex; justify-content: space-between; align-items: center; }
.conta-voltar { color: var(--pos-texto-fraco); text-decoration: none; font-size: .85rem; }
.conta-voltar:hover { color: var(--pos-texto); }

.conta-barra {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .4rem .75rem; border-bottom: 1px solid var(--pos-borda);
}
.conta-grupo {
    background: var(--pos-campo); color: var(--pos-texto); border: 1px solid var(--pos-borda);
    border-radius: .4rem; padding: .25rem .5rem; font-size: .8rem;
}
.conta-grupo-fixo { color: var(--pos-texto-fraco); font-size: .8rem; }

/* O estado da gravação é informação de segurança: se falhar, o empregado tem
   de ver que aquele artigo não ficou registado. */
.conta-guardado { font-size: .75rem; color: var(--pos-ok-texto); }
.conta-guardado.a-guardar { color: var(--pos-alerta); }
.conta-guardado.erro { color: var(--pos-perigo); font-weight: 600; }

.conta-teclado { grid-template-rows: repeat(4, 1fr); }
.conta-accoes { display: flex; gap: .4rem; padding: .5rem .75rem 0; }
.conta-accoes .pos-btn { flex: 1; font-size: .85rem; padding: .55rem .4rem; }
.conta-abandonar { padding: 0 .75rem .75rem; }
.pos-btn-perigo-suave { background: transparent; border: 1px solid var(--pos-perigo-borda); color: var(--pos-perigo); width: 100%; }

.conta-dividir-lista { display: flex; flex-direction: column; gap: .25rem; max-height: 50vh; overflow-y: auto; }
.conta-dividir-linha {
    display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center;
    padding: .45rem .6rem; border: 1px solid var(--pos-borda); border-radius: .4rem; cursor: pointer;
}
.conta-dividir-linha:has(input:checked) { border-color: var(--pos-realce); background: var(--pos-seleccao); }

/* ---- cliente e venda a prazo ---- */
.pos-cliente-busca { display: flex; gap: .35rem; }
.pos-cliente-busca input { flex: 1; }
.pos-cliente-lista {
    list-style: none; margin: .35rem 0 0; padding: 0; max-height: 12rem; overflow-y: auto;
    border: 1px solid var(--pos-borda); border-radius: .4rem; background: var(--pos-campo);
}
.pos-cliente-item {
    display: flex; flex-direction: column; gap: .1rem; width: 100%; text-align: left;
    background: transparent; border: 0; border-bottom: 1px solid var(--pos-borda);
    color: var(--pos-texto); padding: .45rem .6rem; cursor: pointer; font-size: .85rem;
}
.pos-cliente-item:hover { background: var(--pos-zebra); }
.pos-cliente-item span { color: var(--pos-texto-fraco); font-size: .75rem; }
.pos-cliente-item span.vencido { color: var(--pos-perigo); }
.pos-cliente-vazio { color: var(--pos-texto-fraco); font-size: .8rem; padding: .5rem .6rem; }
.pos-cliente-escolhido {
    margin-top: .35rem; padding: .35rem .5rem; border-radius: .4rem;
    background: var(--pos-seleccao); color: var(--pos-texto); font-size: .82rem;
}

.pos-meio-credito { grid-column: span 3; }
.pos-credito-aviso {
    display: flex; gap: .5rem; align-items: flex-start;
    background: var(--pos-seleccao); border-radius: .4rem; padding: .5rem .6rem;
    font-size: .85rem; margin-bottom: 1rem;
}
.pos-credito-aviso.erro { background: rgba(220, 38, 38, .12); color: var(--pos-perigo); }

.pos-meios { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-bottom: 1rem; }
.pos-meio { min-height: 52px; border: 1px solid var(--pos-borda); background: var(--pos-tecla); color: var(--pos-texto); border-radius: .5rem; font-size: .85rem; cursor: pointer; }
.pos-meio.activo { background: var(--pos-realce); border-color: var(--pos-realce); color: var(--pos-realce-fg); font-weight: 600; }

/* ---------------------------------------------------------------------------
   7. Adaptação ao ecrã, impressão

   O mesmo software corre num monitor de 27" no escritório, num portátil de
   1366x768 e num tablet de balcão. Não há "versão para telemóvel": há um
   layout que encolhe. Repare-se que quase tudo o que muda aqui são os tokens
   de medida do terminal (secção 6) — as regras em si ficam onde estão.

   Também se olha para a ALTURA, e não só para a largura: um portátil de
   1366x768 tem largura que chegue e falta-lhe altura, e é aí que o teclado
   numérico e o total deixavam de caber.
   --------------------------------------------------------------------------- */

/* Monitores mais estreitos: a coluna da venda encolhe antes dos artigos. É a
   parte fixa; os botões de artigo reorganizam-se sozinhos. */
@media (max-width: 1399.98px) {
    body.pos-body { --pos-venda-w: 340px; --pos-artigo-min: 140px; --pos-figura: 70px; }
}

@media (max-width: 1199.98px) {
    body.pos-body { --pos-venda-w: 300px; --pos-artigo-min: 132px; --pos-gap: .45rem; --pos-total: 1.3rem; --pos-figura: 66px; }
    .pos-barra-centro { display: none; }
    .pos-btn { font-size: .9rem; }
    .painel { padding: .75rem 1rem 1.5rem; }
}

/* Pouca altura (portáteis 1366x768, ecrãs de balcão deitados): o que encolhe
   é o teclado e os espaçamentos, nunca o alvo do dedo abaixo do razoável. */
@media (max-height: 820px) {
    body.pos-body { --pos-barra-h: 48px; --pos-tecla-h: 50px; --pos-gap: .45rem; }
}

@media (max-height: 700px) {
    body.pos-body {
        --pos-barra-h: 44px; --pos-tecla-h: 46px; --pos-total: 1.25rem;
        --pos-artigo-min: 126px; --pos-figura: 60px; --pos-artigo-corpo: 3.9rem;
    }
    .pos-aviso { padding: .4rem .6rem; font-size: .8rem; }
    .painel-numero { padding: .55rem .75rem; }
    .painel-numero-valor { font-size: 1.4rem; }
    .painel-botao { min-height: 5.5rem; padding: .75rem; }
}

/* Tablet e ecrãs pequenos: a venda passa para baixo do catálogo e a barra
   fica só com ícones — o nome de cada botão custava mais do que valia. */
@media (max-width: 991.98px) {
    .vtr-sidebar { transform: translateX(-100%); }
    .vtr-sidebar.show { transform: translateX(0); }
    .vtr-main { margin-left: 0; }

    /* Empilhado: catálogo em cima, venda em baixo.
       E, ao contrário do ecrã grande, a página passa a rolar. Espremer tudo
       em 600px de altura acabava sempre com o botão de pagar cortado — mais
       vale a barra ficar colada ao topo e o resto correr. */
    body.pos-body { height: auto; min-height: 100dvh; overflow-y: auto; }
    .pos-barra { position: sticky; top: .5rem; z-index: 5; }
    .pos-main { overflow: visible; }
    .pos { grid-template-columns: 1fr; grid-template-rows: auto auto; }
    .pos-grelha { overflow: visible; }
    .pos-venda { max-height: none; height: auto; }
    .pos-linhas { max-height: 40vh; }
    .painel, .salao { overflow: visible; }
    .pos-teclado { grid-template-columns: repeat(6, 1fr); }
    .pos-tecla-larga { grid-column: span 3; }

    .pos-barra { padding: .35rem; margin: .35rem .35rem 0; }
    .pos-barra-centro { display: none; }
    .pos-barra-btn span { display: none; }
    .pos-barra-btn.destaque span { display: inline; }
    .pos-barra-btn { padding: .45rem .55rem; font-size: 1rem; }
    .pos-marca-logo { width: 34px; height: 34px; }
}

/* Telemóvel e ecrãs de bolso: uma coluna, sem números a rebentar a linha. */
@media (max-width: 575.98px) {
    .loja-pesquisa { order: 3; max-width: none; }
    .loja-topo .container { flex-wrap: wrap; }

    body.pos-body { --pos-artigo-min: 118px; --pos-total: 1.2rem; --pos-figura: 56px; }

    /* A barra do terminal deixa de caber: cai o relógio, cai o nome da casa,
       e o que sobra passa a deslizar em vez de empurrar a página para o lado. */
    .pos-barra { padding: .3rem; margin: .3rem .3rem 0; }
    .pos-relogio { border-left: 0; padding-left: .35rem; }
    .pos-relogio-data { display: none; }
    .pos-marca-txt { display: none; }
    .pos-marca-logo { width: 30px; height: 30px; }
    .pos-barra-accoes { flex: 1; overflow-x: auto; justify-content: flex-end; scrollbar-width: none; }
    .pos-barra-accoes::-webkit-scrollbar { display: none; }
    .pos-barra-btn { flex: 0 0 auto; }
    .pos-numeros, .painel-numeros { grid-template-columns: repeat(2, 1fr); }
    .painel-botoes { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
    .painel-botao { min-height: 5rem; }
    .painel-botao-titulo { font-size: 1rem; }
    .painel-cliente { grid-template-columns: 1fr; }
    .painel-cliente-valores { grid-row: auto; grid-column: 1; text-align: left; }
    .conta-pos-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pos-cliente { grid-template-columns: 1fr; }
    .pos-accoes { grid-template-columns: 1fr; }
    .salao-grelha, .pos-mesas-grelha { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
    .vtr-topbar .vtr-temas { display: none; }
}

/* Ecrãs tácteis: alvos maiores, porque o dedo não tem a pontaria do rato. */
@media (pointer: coarse) {
    /* Não se pode escrever --pos-tecla-h em função de si própria (a variável
       ficaria em ciclo e o browser deitava-a fora): põe-se o mínimo na regra. */
    .pos-teclado button, .pos-btn { min-height: 56px; font-size: 1.02rem; }
    .pos-barra-btn, .painel-botao { min-height: 56px; }
    /* Os separadores são o que mais se carrega ao balcão: ficam acima do
       mínimo, não em cima dele. */
    .pos-familia { min-height: 60px; padding: .6rem 1.25rem; font-size: 1.06rem; }
    .pos-artigo { min-height: 132px; }
    .pos-grelha.compacta .pos-artigo { min-height: 104px; }
    .pos-atalho { min-height: 60px; }
    .pos-tira-seta { width: 68px; min-height: 64px; font-size: 2rem; }
    .pos-procura input { font-size: 1.1rem; padding: .6rem 0; }
}

@media print {
    .vtr-sidebar, .vtr-topbar, .vtr-footer, .btn, .pagination { display: none !important; }
    .vtr-main { margin: 0; }
    .card { box-shadow: none; border: 0; }
}

/* ---------------------------------------------------------------------------
   Ajuste automatico do POS ao ecra real do browser.
   Estas regras ficam no fim para corrigirem os tokens antigos sem mexer na
   logica do terminal: o mesmo HTML muda entre monitor, tablet, portatil baixo
   e telemovel conforme largura, altura, orientacao e tipo de ponteiro.
   --------------------------------------------------------------------------- */
body.pos-body {
    --pos-barra-h: clamp(42px, 6.2dvh, 54px);
    --pos-gap: clamp(.32rem, .75dvw, .7rem);
    --pos-venda-w: clamp(300px, 29vw, 430px);
    --pos-artigo-min: clamp(92px, 8.2vw, 136px);
    --pos-figura: clamp(42px, 8.5dvh, 74px);
    --pos-artigo-corpo: clamp(3.1rem, 7dvh, 4rem);
    --pos-tecla-h: clamp(38px, 5.7dvh, 50px);
    --pos-total: clamp(1.18rem, 2.3dvh, 1.55rem);
}

.pos, .pos-catalogo, .pos-venda { min-width: 0; }
.pos-barra, .pos-main, .pos { max-width: 100vw; }
.pos-barra-accoes { min-width: 0; }
.pos-barra-btn, .pos-atalho, .pos-btn, .pos-familia { white-space: nowrap; }
.pos-linha { min-width: 0; grid-template-columns: minmax(0, 1fr) auto auto auto; }
.pos-linha-nome { overflow: hidden; text-overflow: ellipsis; }
.pos-linha-total { white-space: nowrap; }
.pos-accoes { flex: 0 0 auto; }

/* Portateis baixos e monitores 16:9 pequenos: mantem tudo no ecra sem cortar o
   botao Pagar. A venda fica mais estreita e os atalhos deixam de crescer. */
@media (min-width: 992px) and (max-height: 760px) {
    body.pos-body {
        --pos-venda-w: clamp(286px, 25vw, 335px);
        --pos-artigo-min: clamp(88px, 7.2vw, 108px);
        --pos-figura: clamp(34px, 6.8dvh, 48px);
        --pos-artigo-corpo: 3.05rem;
        --pos-tecla-h: 36px;
        --pos-total: 1.16rem;
        --pos-gap: .34rem;
    }
    .pos-procura { padding: .25rem .45rem; }
    .pos-procura input { padding: .3rem 0; font-size: .92rem; }
    .pos-familia { min-height: 34px; padding: .28rem .65rem; font-size: .82rem; }
    .pos-atalhos { flex-wrap: nowrap; overflow-x: auto; padding: .28rem .35rem; scrollbar-width: none; }
    .pos-atalhos::-webkit-scrollbar { display: none; }
    .pos-atalho { flex: 0 0 auto; min-height: 36px; padding: .28rem .45rem; font-size: .78rem; }
    .pos-linha { padding: .32rem .4rem; gap: .28rem; }
    .pos-qtd-botao { width: 28px; height: 28px; }
    .pos-totais { padding: .34rem .55rem; }
    .pos-accoes { padding: .35rem; }
    .pos-btn { min-height: 42px; }
}

/* Ecras muito largos: aproveita o espaco sem deixar a coluna da venda gigante. */
@media (min-width: 1700px) and (min-height: 850px) {
    body.pos-body { --pos-venda-w: 430px; --pos-artigo-min: 142px; --pos-figura: 82px; --pos-artigo-corpo: 4.25rem; }
}

/* Tablet horizontal: continua lado a lado, mas com carrinho compacto. */
@media (min-width: 900px) and (max-width: 1180px) and (orientation: landscape) {
    body.pos-body { height: 100dvh; overflow: hidden; --pos-venda-w: clamp(286px, 31vw, 330px); --pos-artigo-min: 96px; --pos-figura: 46px; --pos-artigo-corpo: 3.15rem; }
    .pos { grid-template-columns: minmax(0, 1fr) var(--pos-venda-w); }
    .pos-barra-centro { display: none; }
    .pos-barra-btn span { display: none; }
    .pos-barra-btn.destaque span { display: inline; }
    .pos-atalho span { max-width: 6.5rem; }
}

/* Tablet vertical e janelas estreitas: empilha, mas limita a altura da grelha
   para o carrinho e o pagar ficarem sempre acessiveis no mesmo fluxo. */
@media (max-width: 991.98px) {
    body.pos-body {
        --pos-artigo-min: clamp(94px, 22vw, 128px);
        --pos-figura: clamp(42px, 7dvh, 62px);
        --pos-artigo-corpo: 3.25rem;
    }
    .pos-main { padding: var(--pos-gap); }
    .pos { gap: var(--pos-gap); }
    .pos-grelha {
        max-height: min(58dvh, 34rem);
        overflow-y: auto;
        padding-right: .15rem;
    }
    .pos-venda { min-height: min(38dvh, 24rem); }
    .pos-linhas { max-height: min(32dvh, 18rem); }
    .pos-atalhos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .pos-atalhos::-webkit-scrollbar { display: none; }
    .pos-atalho { flex: 0 0 auto; }
}

/* Telemovel: barra e botoes deixam de rebentar horizontalmente. */
@media (max-width: 575.98px) {
    body.pos-body {
        --pos-gap: .35rem;
        --pos-artigo-min: clamp(84px, 29vw, 112px);
        --pos-figura: 38px;
        --pos-artigo-corpo: 3.05rem;
    }
    .pos-main { padding: .35rem; }
    .pos-procura { gap: .35rem; padding: .28rem .4rem; }
    .pos-procura input { min-width: 0; font-size: .92rem; }
    .pos-grelha { gap: .35rem; max-height: 54dvh; }
    .pos-artigo-corpo { padding: .25rem .35rem .3rem; }
    .pos-artigo-nome { font-size: .7rem; }
    .pos-artigo-preco { font-size: .8rem; }
    .pos-venda-topo, .pos-totais { padding-left: .5rem; padding-right: .5rem; }
    .pos-linha { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome total" "qtd remover"; }
    .pos-linha-nome { grid-area: nome; }
    .pos-linha-qtd { grid-area: qtd; }
    .pos-linha-total { grid-area: total; }
    .pos-linha-remover { grid-area: remover; justify-self: end; }
    .pos-accoes { gap: .35rem; padding: .4rem; }
    .pos-btn { min-height: 46px; font-size: .95rem; }
    .pos-btn-pagar { font-size: 1.05rem; }
    .pos-meios { grid-template-columns: 1fr 1fr; }
    .pos-meio-credito { grid-column: span 2; }
}

/* Altura extrema, como browser aberto em meia janela: sacrifica fotos antes de
   sacrificar o fluxo de pagamento. */
@media (max-height: 620px) and (min-width: 992px) {
    body.pos-body { --pos-figura: 0px; --pos-artigo-corpo: 3rem; --pos-artigo-min: 92px; }
    .pos-artigo-figura { display: none; }
    .pos-artigo, .pos-artigo.sem-foto { height: auto; min-height: var(--pos-artigo-corpo); }
    .pos-artigo-corpo { justify-content: center; }
    .pos-barra-centro { display: none; }
    .pos-relogio { border-left: 0; }
    .pos-relogio-data { display: none; }
}

/* Correcao final: tablets horizontais pequenos tambem sao ecras de balcão.
   Esta regra vem depois do breakpoint de 991px para ganhar a cascata. */
@media (min-width: 900px) and (max-width: 991.98px) and (orientation: landscape) {
    body.pos-body {
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
        --pos-venda-w: clamp(282px, 31vw, 315px);
        --pos-artigo-min: 90px;
        --pos-figura: 40px;
        --pos-artigo-corpo: 3rem;
        --pos-gap: .32rem;
    }
    .pos-main { overflow: hidden; }
    .pos { grid-template-columns: minmax(0, 1fr) var(--pos-venda-w); grid-template-rows: minmax(0, 1fr); min-height: 0; }
    .pos-grelha { max-height: none; overflow-y: auto; }
    .pos-venda { min-height: 0; height: auto; }
    .pos-linhas { max-height: none; }
    .pos-barra-btn span { display: none; }
    .pos-barra-btn.destaque span { display: inline; }
}

/* Aviso fiscal no rodape do terminal: deixa de empurrar o ponto de venda para
   baixo no topo, mas continua visivel antes das janelas de pagamento/mesa. */
.pos-footer-aviso {
    flex: 0 0 auto;
    margin-top: var(--pos-gap);
    padding-block: .42rem;
    font-size: .78rem;
}
.pos-footer-aviso i { font-size: .95rem; }
.pos-footer-aviso strong { margin-right: .25rem; }

@media (min-width: 992px) {
    .pos-footer-aviso {
        align-items: center;
        padding-block: .35rem;
    }
}

@media (max-height: 700px), (max-width: 575.98px) {
    .pos-footer-aviso {
        font-size: .72rem;
        padding: .32rem .48rem;
    }
}

/* Correcao valida do painel direito - sobrepoe tentativa incompleta anterior. */
.pos-venda { min-width: 0; }
.pos-atalhos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.8rem, 1fr));
    gap: .35rem;
    overflow: visible;
}
.pos-atalho {
    min-width: 0;
    width: 100%;
    justify-content: center;
}
.pos-atalho span {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pos-linha { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.pos-linha-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1200px) {
    body.pos-body { --pos-venda-w: clamp(410px, 24vw, 470px); }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    body.pos-body { --pos-venda-w: clamp(340px, 34vw, 390px); }
    .pos-atalhos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .pos-atalhos {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
        overflow: visible;
    }
    .pos-atalho { flex: initial; }
}

/* ---------------------------------------------------------------------------
   8. Aspecto moderno do backoffice

   Fica no fim de propósito: são só afinações por cima da secção 2, para o
   backoffice ter o mesmo ar do painel novo — barra lateral clara, entrada
   activa em pastilha, cartões com cantos largos e sombra fraca, e ícones em
   quadrado de cor. Nada aqui muda estrutura nem HTML; quem quiser voltar
   atrás apaga esta secção inteira.
   --------------------------------------------------------------------------- */

:root {
    --vtr-radius: .9rem;
    --vtr-topbar-height: 66px;
    --vtr-sidebar-width: 268px;

    --vtr-bg: #f4f6fa;
    --vtr-border: #e9ecf2;
    --vtr-border-soft: #f1f3f7;

    /* A barra lateral passa a clara. Os tokens do POS derivam destes, por isso
       a barra do terminal acompanha sozinha. */
    --vtr-sidebar-bg: #ffffff;
    --vtr-sidebar-fg: #5b6478;
    --vtr-sidebar-fg-active: #10182b;
    --vtr-sidebar-title: #98a1b5;

    --vtr-sombra: 0 1px 2px rgba(16, 24, 43, .05);
    --vtr-sombra-forte: 0 10px 30px rgba(16, 24, 43, .08);

    /* A barra do terminal fica escura de propósito. Ela deriva da barra
       lateral, que agora é branca, e um POS com a barra branca perde o
       contraste que o empregado usa para se orientar de relance. */
    --pos-barra: #10182b;
    --pos-barra-fg: #b9c2d6;
    --pos-barra-fg-forte: #ffffff;
}

/* No tema escuro a barra volta a ser escura: uma barra branca num ecrã escuro
   é uma lanterna apontada a quem trabalha à noite. */
[data-bs-theme="dark"] {
    --vtr-sidebar-bg: #111827;
    --vtr-sidebar-fg: #9aa4bb;
    --vtr-sidebar-fg-active: #ffffff;
    --vtr-sidebar-title: #6b7690;
    --vtr-border: #232c3f;
    --vtr-border-soft: #1c2434;
}

/* --- barra lateral -------------------------------------------------------- */

.vtr-app .vtr-sidebar {
    border-right: 1px solid var(--vtr-border);
    padding: .5rem .6rem 1rem;
}

.vtr-app .vtr-brand {
    padding: .9rem .65rem 1rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.vtr-app .vtr-brand i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--vtr-accent-soft);
    font-size: 1rem;
}

.vtr-app .vtr-nav-title {
    padding: 1.15rem .75rem .35rem;
    font-weight: 600;
    font-size: .66rem;
}

/* A entrada activa deixa de ser uma barra à esquerda e passa a pastilha. */
.vtr-app .vtr-sidebar .nav-link,
.vtr-app .vtr-nav-grupo-titulo {
    border-left: 0;
    border-radius: .7rem;
    padding: .58rem .75rem;
    margin: .1rem 0;
    font-size: .92rem;
    font-weight: 500;
}

.vtr-app .vtr-sidebar .nav-link:hover,
.vtr-app .vtr-nav-grupo-titulo:hover {
    background: var(--vtr-border-soft);
    color: var(--vtr-sidebar-fg-active);
}

.vtr-app .vtr-sidebar .nav-link.active {
    background: var(--vtr-accent-soft);
    color: var(--vtr-accent);
    font-weight: 600;
}

.vtr-app .vtr-sidebar .nav-link.active i { color: var(--vtr-accent); opacity: 1; }
.vtr-app .vtr-nav-grupo-titulo.activo { color: var(--vtr-sidebar-fg-active); }
.vtr-app .vtr-nav-grupo > ul { margin-left: 1.4rem; border-left-color: var(--vtr-border); }

/* --- barra de topo -------------------------------------------------------- */

.vtr-app .vtr-topbar {
    border-bottom: 1px solid var(--vtr-border);
    padding: 0 1.4rem;
    gap: .6rem;
}

/* Sinais de estado em pastilha, com contorno em vez de bloco de cor: só o que
   está mal é que deve gritar. */
.vtr-app .vtr-topbar .vtr-estado {
    border-radius: 999px;
    padding: .42rem .85rem;
    font-weight: 600;
    font-size: .78rem;
}

.vtr-app .vtr-topbar .btn {
    border-radius: .7rem;
    font-weight: 500;
}

/* --- conteúdo, cartões e tabelas ------------------------------------------ */

.vtr-app .vtr-content { padding: 1.6rem 1.4rem 2rem; }

.vtr-app .vtr-page-header h1,
.vtr-app .vtr-page-header .h4 { font-weight: 700; letter-spacing: -.01em; }

.vtr-app .card {
    border-radius: var(--vtr-radius);
    border-color: var(--vtr-border);
    box-shadow: var(--vtr-sombra);
}

.vtr-app .card-header {
    background: transparent;
    border-bottom: 1px solid var(--vtr-border-soft);
    font-weight: 600;
    padding: .85rem 1.1rem;
}

.vtr-app .card-body { padding: 1.1rem; }

/* Ícone do cartão de estatística: quadrado de cor, como no painel novo. */
.vtr-app .vtr-stat-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.vtr-app .vtr-stat-value { font-size: 1.75rem; font-weight: 700; }

.vtr-app .table > thead > tr > th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--vtr-text-muted);
    font-weight: 600;
    border-bottom-color: var(--vtr-border);
}

.vtr-app .table > tbody > tr > td { border-color: var(--vtr-border-soft); }

.vtr-app .btn { border-radius: .7rem; font-weight: 500; }
.vtr-app .btn-sm { border-radius: .6rem; }
.vtr-app .badge { border-radius: 999px; padding: .38em .7em; font-weight: 600; }
.vtr-app .form-control, .vtr-app .form-select { border-radius: .7rem; border-color: var(--vtr-border); }
.vtr-app .list-group-item { border-color: var(--vtr-border-soft); }

.vtr-app .vtr-footer { border-top: 1px solid var(--vtr-border); }

/* --- quem esta a usar o sistema, no fundo da barra lateral ---------------- */

/* A barra passa a coluna para o cartao do utilizador poder encostar ao fundo
   sem depender da altura da lista de menus. */
.vtr-app .vtr-sidebar { display: flex; flex-direction: column; }
.vtr-app .vtr-sidebar > .nav { flex: 1 1 auto; }

.vtr-app .vtr-sidebar-user {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .6rem;
    border: 1px solid var(--vtr-border);
    border-radius: .9rem;
    background: var(--vtr-surface);
}

.vtr-app .vtr-sidebar-avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vtr-accent);
    color: var(--vtr-accent-fg);
    font-weight: 700;
    font-size: .95rem;
}

/* O email e quase sempre maior do que o espaco que ha: corta-se com
   reticencias em vez de empurrar a barra para o lado. */
.vtr-app .vtr-sidebar-user-texto { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.vtr-app .vtr-sidebar-user-nome { font-size: .88rem; font-weight: 600; color: var(--vtr-sidebar-fg-active); }
.vtr-app .vtr-sidebar-user-email {
    font-size: .74rem;
    color: var(--vtr-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- cartao de estatistica ------------------------------------------------ */

/* O numero e o que se le de longe; o rotulo e a nota vivem por baixo dele. */
.vtr-app .card-body .fs-4 { font-size: 1.75rem !important; font-weight: 700; letter-spacing: -.02em; }
.vtr-app .vtr-stat-icon i { line-height: 1; }
.vtr-app .card-header .bi { font-size: 1rem; vertical-align: -.1em; }

/* Barras dos graficos e progressos com o azul do tema, em vez do cinzento
   herdado do texto. */
.vtr-app .card-body svg rect { color: var(--vtr-accent); }
.vtr-app .progress { border-radius: 999px; background: var(--vtr-border-soft); }
.vtr-app .progress-bar { border-radius: 999px; background: var(--vtr-accent); }

/* ---------------------------------------------------------------------------
   9. Montra ao estilo katespero.net

   A montra do VtrSuite passa a usar a linguagem visual do menu digital que a
   casa ja tem online: vermelho coral como cor de accao, cinzento-azulado
   escuro no rodape, cartoes brancos de cantos largos e fotografia quadrada.
   Os valores vem do proprio site (--primary #e74c3c, --dark #2c3e50,
   --text #333, --border #ddd, --light #ecf0f1, container 1200px).

   Fica confinado a `body.loja`: o backoffice e o terminal nao mudam.
   --------------------------------------------------------------------------- */

body.loja {
    --loja-primaria: #e74c3c;
    --loja-primaria-escura: #c0392b;
    --loja-escura: #2c3e50;
    --loja-texto: #333333;
    --loja-borda: #dddddd;
    --loja-claro: #ecf0f1;
    --loja-largura: 1200px;

    background: #ffffff;
    color: var(--loja-texto);
    font-size: 1rem;
}

body.loja .container { max-width: var(--loja-largura); }

/* --- cabecalho ------------------------------------------------------------ */

body.loja .loja-topo {
    background: #ffffff;
    border-bottom: 1px solid var(--loja-borda);
    box-shadow: 0 2px 12px rgba(44, 62, 80, .06);
}

body.loja .loja-marca {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--loja-escura);
}

body.loja .loja-marca i { color: var(--loja-primaria); }

/* Procura em pastilha: e o gesto mais repetido de um menu digital. */
body.loja .loja-pesquisa .input-group { border-radius: 999px; overflow: hidden; border: 1px solid var(--loja-borda); }
body.loja .loja-pesquisa .form-control,
body.loja .loja-pesquisa .btn { border: 0; box-shadow: none; }
body.loja .loja-pesquisa .form-control { padding-left: 1rem; }
body.loja .loja-pesquisa .btn { color: var(--loja-primaria); background: transparent; }

body.loja .loja-topo .btn-primary {
    background: var(--loja-primaria);
    border-color: var(--loja-primaria);
    border-radius: 999px;
    padding: .5rem 1.1rem;
    font-weight: 600;
}
body.loja .loja-topo .btn-primary:hover { background: var(--loja-primaria-escura); border-color: var(--loja-primaria-escura); }

/* --- separadores de familia ----------------------------------------------- */

body.loja .loja-categorias { background: #ffffff; }

body.loja .loja-cat {
    border-bottom: 0;
    border-radius: 999px;
    padding: .45rem 1rem;
    background: var(--loja-claro);
    color: var(--loja-escura);
    font-weight: 600;
    font-size: .9rem;
    transition: background .12s ease, color .12s ease;
}

body.loja .loja-cat:hover { background: #dfe6e9; color: var(--loja-escura); }

body.loja .loja-cat.activa {
    background: var(--loja-primaria);
    border-bottom: 0;
    color: #ffffff;
}

/* --- cartao de artigo ------------------------------------------------------ */

body.loja .loja-artigo {
    border: 1px solid #eeeeee;
    border-radius: .9rem;
    box-shadow: 0 1px 3px rgba(44, 62, 80, .06);
}

body.loja .loja-artigo:hover {
    box-shadow: 0 12px 28px rgba(44, 62, 80, .12);
    transform: translateY(-3px);
}

/* Fotografia quadrada, como no menu: a grelha fica regular e a comida ocupa
   o espaco todo do botao. */
body.loja .loja-imagem { aspect-ratio: 1 / 1; background: var(--loja-claro); }

body.loja .loja-artigo h2 a,
body.loja .loja-artigo h3 a { font-weight: 700; color: var(--loja-escura); }

body.loja .loja-preco {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--loja-primaria);
}

body.loja .loja-etiqueta { border-radius: 999px; padding: .2rem .6rem; letter-spacing: .02em; }
body.loja .loja-etiqueta.bg-danger { background: var(--loja-primaria) !important; }

body.loja .btn-primary {
    background: var(--loja-primaria);
    border-color: var(--loja-primaria);
    font-weight: 600;
}
body.loja .btn-primary:hover { background: var(--loja-primaria-escura); border-color: var(--loja-primaria-escura); }
body.loja .btn-outline-primary { color: var(--loja-primaria); border-color: var(--loja-primaria); }
body.loja .btn-outline-primary:hover { background: var(--loja-primaria); border-color: var(--loja-primaria); color: #fff; }
body.loja a { color: var(--loja-primaria-escura); }

/* --- rodape ---------------------------------------------------------------- */

body.loja .loja-rodape {
    background: var(--loja-escura);
    border-top: 0;
    color: #ecf0f1;
}
body.loja .loja-rodape .text-muted { color: #b8c4cf !important; }
body.loja .loja-rodape a { color: #ffffff; }

/* --- ficha do artigo ------------------------------------------------------- */

body.loja .loja-imagem-grande { border-radius: .9rem; background: var(--loja-claro); }
body.loja .loja-miniatura.activa { border-color: var(--loja-primaria); }

/* --- banner de entrada e botao de adicionar -------------------------------- */

/* O banner do menu digital: bloco escuro com a cor da casa a atravessa-lo, o
   artigo em destaque a esquerda e a fotografia a direita. Em telemovel a
   fotografia passa para cima e o texto para baixo. */
body.loja .loja-destaque {
    display: grid;
    grid-template-columns: 1fr minmax(0, 42%);
    align-items: stretch;
    gap: 0;
    border-radius: 1.1rem;
    overflow: hidden;
    background: linear-gradient(120deg, #1f2937 0%, var(--loja-primaria) 62%, #f39c12 140%);
    color: #ffffff;
    box-shadow: 0 14px 34px rgba(231, 76, 60, .22);
}

body.loja .loja-destaque-texto {
    padding: 2rem 2.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .35rem;
}

body.loja .loja-destaque-etiqueta {
    align-self: flex-start;
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: .25rem .8rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.loja .loja-destaque-nome {
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -.02em;
    margin: .4rem 0 0;
}

body.loja .loja-destaque-resumo { margin: 0; opacity: .9; max-width: 46ch; }

body.loja .loja-destaque-preco {
    font-size: 2rem;
    font-weight: 800;
    margin: .6rem 0 1rem;
}

body.loja .loja-destaque-figura { display: block; overflow: hidden; }
body.loja .loja-destaque-figura img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 767.98px) {
    body.loja .loja-destaque { grid-template-columns: 1fr; }
    body.loja .loja-destaque-figura { order: -1; height: 190px; }
    body.loja .loja-destaque-texto { padding: 1.4rem 1.3rem; }
}

/* Botao de adicionar na grelha: e o mesmo gesto do menu -- carregar e ir
   embora, sem abrir a ficha. */
body.loja .loja-adicionar {
    border-radius: 999px;
    font-weight: 600;
    padding: .45rem .9rem;
}

/* --- topo e rodape da montra ---------------------------------------------- */

body.loja .loja-barra {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: .85rem;
    padding-bottom: .85rem;
}

body.loja .loja-marca { gap: .7rem; }

body.loja .loja-marca-simbolo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: .8rem;
    background: var(--loja-primaria);
    color: #ffffff;
    font-size: 1.3rem;
}

body.loja .loja-marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
body.loja .loja-marca-texto strong { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
body.loja .loja-marca-texto small { font-size: .74rem; font-weight: 500; color: #7a8794; }

/* Accoes do topo: icone em cima, palavra em baixo, como no menu digital. */
body.loja .loja-accoes { display: flex; align-items: center; gap: .35rem; margin-left: auto; }

body.loja .loja-accao {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    min-width: 68px;
    padding: .45rem .6rem;
    border-radius: .7rem;
    color: var(--loja-escura);
    text-decoration: none;
    font-size: .74rem;
    font-weight: 600;
}

body.loja .loja-accao i { font-size: 1.2rem; }
body.loja .loja-accao:hover { background: var(--loja-claro); color: var(--loja-primaria-escura); }
body.loja .loja-accao-carrinho { color: var(--loja-primaria); }

body.loja .loja-accao-conta {
    position: absolute;
    top: .15rem;
    right: .5rem;
    min-width: 18px;
    height: 18px;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--loja-primaria);
    color: #ffffff;
    font-size: .68rem;
    line-height: 18px;
    text-align: center;
}

body.loja .loja-barra-procura { padding-bottom: .75rem; }
body.loja .loja-pesquisa { max-width: none; margin: 0 auto; }

/* --- rodape ---------------------------------------------------------------- */

body.loja .loja-rodape { padding-top: 2rem; }

body.loja .loja-rodape-corpo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    padding-bottom: 1.5rem;
}

body.loja .loja-rodape-bloco strong { display: block; margin-bottom: .7rem; font-size: .95rem; }

body.loja .loja-pagamentos { display: flex; flex-wrap: wrap; gap: .4rem; }

body.loja .loja-pagamento {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: .45rem;
    padding: .3rem .65rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
}

body.loja .loja-compromissos { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
body.loja .loja-compromissos li { font-size: .84rem; color: #c7d1da; }
body.loja .loja-compromissos i { color: #ffffff; margin-right: .4rem; }

/* Faixa de contacto: destacada do resto do rodape por uma linha, como no
   menu digital, para o telefone e a morada nao se perderem no meio do texto. */
body.loja .loja-rodape-contacto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
    padding: 1.1rem 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: .88rem;
}

body.loja .loja-rodape-contacto a { color: #ffffff; text-decoration: none; }
body.loja .loja-rodape-contacto a:hover { text-decoration: underline; }
body.loja .loja-rodape-contacto i { color: var(--loja-primaria); margin-right: .35rem; }

body.loja .loja-rodape-identidade { display: flex; align-items: center; gap: .7rem; margin-right: auto; }
body.loja .loja-rodape-identidade strong { display: block; font-weight: 800; letter-spacing: .01em; }
body.loja .loja-rodape-identidade small { color: #b8c4cf; }

body.loja .loja-rodape-simbolo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--loja-primaria);
    color: #ffffff;
}

body.loja .loja-rodape-nif { color: #b8c4cf; font-size: .8rem; }

body.loja .loja-rodape-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    padding: 1rem 0 1.4rem;
    font-size: .8rem;
    color: #b8c4cf;
}

@media (max-width: 575.98px) {
    body.loja .loja-accao { min-width: 56px; padding: .4rem .35rem; }
    body.loja .loja-accao span { display: none; }
    body.loja .loja-accao i { font-size: 1.35rem; }
    body.loja .loja-marca-texto small { display: none; }
}

/* ---------------------------------------------------------------------------
   10. Terminal ao jeito dos POS de restauracao

   Familias e sub-familias deixam de ser tiras que rolam e passam a blocos de
   teclas de cor que ocupam duas linhas -- e o desenho que o pessoal do balcao
   ja conhece: ve-se tudo de uma vez, sem arrastar. As setas continuam la para
   quando houver mais familias do que cabem.
   --------------------------------------------------------------------------- */

.pos-familias,
.pos-subfamilias {
    flex-wrap: nowrap;   /* uma linha, sempre: a segunda rouba altura a grelha */
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.pos-familias::-webkit-scrollbar,
.pos-subfamilias::-webkit-scrollbar { display: none; }

/* Teclas de familia: largura minima para o dedo, nome centrado, maiusculas
   como nos terminais de restauracao. */
.pos-familia {
    flex: 0 0 auto;
    min-width: 128px;
    max-width: 220px;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: .95rem;
    display: inline-flex;
    align-items: center;
}

.pos-subfamilia { min-width: 118px; font-size: .9rem; }

/* A tira nao quebra: e a barra de setas mais a lista que rola entre elas. */
.pos-tira { flex-wrap: nowrap; }

/* A seta no fim do curso fica apagada, nao desaparece: se desaparecesse, a
   tira alargava e o que estava debaixo do dedo saltava de sitio. */
.pos-tira-seta[disabled] { opacity: .3; pointer-events: none; }

/* Fio de navegacao: FAMILIA -> SUB-FAMILIA. */
.pos-fio {
    flex: 0 0 auto;
    padding: .4rem .75rem;
    background: var(--pos-painel);
    border: 1px solid var(--pos-borda);
    border-radius: .5rem;
    color: var(--pos-texto-fraco);
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* --- painel de venda ------------------------------------------------------- */

.pos-venda-topo { font-weight: 600; }

.pos-venda-total {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--pos-preco);
}

/* Cabecalho das colunas: Qtd | Descricao | Valor, alinhado com as linhas. */
.pos-linhas-cabecalho {
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    gap: .5rem;
    padding: .35rem .75rem;
    border-bottom: 1px solid var(--pos-borda);
    color: var(--pos-texto-fraco);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.pos-linhas-cabecalho span:last-child { text-align: right; }

/* Ultima conta e ultimo troco: a faixa que todos os balcoes tem. */
.pos-ultima {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    padding: .5rem .75rem;
    border-top: 1px solid var(--pos-borda);
    background: var(--pos-zebra);
}

.pos-ultima span { display: flex; flex-direction: column; line-height: 1.2; }
.pos-ultima small { color: var(--pos-texto-fraco); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
.pos-ultima strong { font-size: 1.05rem; font-weight: 700; }
.pos-ultima span:last-child { text-align: right; }

@media (max-width: 575.98px) {
    .pos-familia { min-width: 104px; font-size: .88rem; }
    .pos-subfamilia { min-width: 96px; }
}

/* ---------------------------------------------------------------------------
   13. Teclas do posto na barra

   As teclas viveram na barra, passaram para uma coluna a direita e voltaram:
   a coluna tirava largura a grelha de artigos -- que e onde os dedos andam --
   e obrigava a procurar no canto do ecra o que se usa a toda a hora. Em cima,
   ficam todas na mesma linha, a distancia de um olhar.
   --------------------------------------------------------------------------- */

.pos-corpo {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* A tecla das mesas e a que mais se usa numa casa com servico a mesa: leva a
   cor de realce, como o "MESAS" dos terminais de restauracao. */
.pos-barra-btn.destaque {
    background: var(--pos-realce);
    color: var(--pos-realce-fg);
}

.pos-barra-btn.destaque:hover { filter: brightness(1.08); color: var(--pos-realce-fg); }

/* Nomes compridos (um grupo de precos chamado "Esplanada Verao") cortam-se em
   vez de empurrarem o relogio para fora da barra. */
.pos-barra-btn span {
    max-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (pointer: coarse) {
    .pos-barra-btn { min-height: 48px; padding: .5rem 1rem; }
}

/* Barra estreita: os rotulos saem e ficam os icones, que continuam a ser
   alvos de dedo. O relogio encolhe mas nao desaparece -- e para isso que la
   esta. */
@media (max-width: 991.98px) {
    .pos-relogio-hora { font-size: 1.6rem; }
    .pos-relogio-data { font-size: .9rem; }
    .pos-relogio { padding-left: .5rem; }
    .pos-operador > span { display: none; }
    .pos-operador { max-width: none; padding: .35rem .45rem; }
}

/* ---------------------------------------------------------------------------
   11. Ecra de pagamento

   O total e o que o cliente pergunta e o operador confirma: fica em grande, no
   centro, entre dois fios. Os meios sao cartoes de toque com icone; a conta
   corrente e uma barra a parte, cheia de cor, porque nao e um meio de
   pagamento -- e a decisao de nao receber agora.
   --------------------------------------------------------------------------- */

.pos-pagamento .modal-content {
    border: 0;
    border-radius: 1.1rem;
    overflow: hidden;
    background: var(--pos-painel);
    color: var(--pos-texto);
}

.pos-pagamento .modal-header {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.1rem 1.3rem;
    border-bottom: 1px solid var(--pos-borda);
}

.pos-pag-simbolo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--pos-seleccao);
    color: var(--pos-realce);
    font-size: 1.4rem;
}

.pos-pagamento .modal-title { font-weight: 700; letter-spacing: -.01em; }

.pos-pag-fechar {
    margin-left: auto;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: .8rem;
    background: var(--pos-tecla);
    color: var(--pos-texto);
    font-size: 1.05rem;
    cursor: pointer;
}
.pos-pag-fechar:hover { background: var(--pos-zebra); }

.pos-pagamento .modal-body { padding: 1.4rem 1.3rem; }

/* Total entre dois fios com um ponto na ponta: e o unico numero que interessa
   nesta janela, e tem de se ler do outro lado do balcao. */
.pos-pag-total { text-align: center; margin-bottom: 1.6rem; }
.pos-pag-total-rotulo { display: block; color: var(--pos-texto-fraco); font-size: .95rem; }

.pos-pag-total-valor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: .35rem;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
}

.pos-pag-total-valor::before,
.pos-pag-total-valor::after {
    content: "";
    flex: 1 1 0;
    height: 2px;
    max-width: 190px;
    background: var(--pos-realce);
    border-radius: 999px;
    position: relative;
}

/* O ponto de cada fio, virado para o numero. */
.pos-pag-total-valor::before { box-shadow: 6px 0 0 0 var(--pos-realce); }
.pos-pag-total-valor::after { box-shadow: -6px 0 0 0 var(--pos-realce); }

.pos-pag-titulo {
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 .8rem;
}

/* --- meios ---------------------------------------------------------------- */

.pos-pagamento .pos-meios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .7rem;
}

.pos-pagamento .pos-meio {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 74px;
    padding: .9rem 1rem;
    background: var(--pos-painel);
    border: 1px solid var(--pos-borda);
    border-radius: .8rem;
    color: var(--pos-texto);
    font-size: 1.02rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

.pos-pagamento .pos-meio i { font-size: 1.5rem; color: var(--pos-realce); }
.pos-pagamento .pos-meio:hover { background: var(--pos-tecla); }

.pos-pagamento .pos-meio.activo {
    border-color: var(--pos-realce);
    box-shadow: inset 0 0 0 1px var(--pos-realce);
    font-weight: 700;
}

/* A conta corrente atravessa a largura toda e vem cheia de cor: e uma decisao
   diferente das outras, e nao pode ser escolhida por distraccao. */
.pos-pagamento .pos-meio-credito {
    grid-column: 1 / -1;
    background: var(--pos-realce);
    border-color: var(--pos-realce);
    color: var(--pos-realce-fg);
    font-weight: 700;
    min-height: 66px;
}

.pos-pagamento .pos-meio-credito i { color: var(--pos-realce-fg); }
.pos-pagamento .pos-meio-credito:hover { background: var(--pos-realce); filter: brightness(1.07); }
.pos-pagamento .pos-meio-credito.activo { box-shadow: inset 0 0 0 2px var(--pos-realce-fg); }
.pos-pag-total-valor + .pos-pag-titulo { margin-top: 0; }
.pos-meio-seta { margin-left: auto; font-size: 1.1rem !important; }

/* --- aviso e numerario ----------------------------------------------------- */

.pos-pagamento .pos-credito-aviso {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: 1rem;
    padding: .9rem 1rem;
    border-radius: .8rem;
    background: var(--pos-seleccao);
    border: 0;
    color: var(--pos-texto);
    font-size: .95rem;
}

.pos-pagamento .pos-credito-aviso > i { font-size: 1.3rem; color: var(--pos-realce); }
.pos-pagamento .pos-credito-aviso.erro { background: var(--pos-perigo-bg); color: var(--pos-perigo-fg); }
.pos-pagamento .pos-credito-aviso.erro > i { color: var(--pos-perigo); }

.pos-pag-numerario { margin-top: 1.1rem; }

/* --- rodape ---------------------------------------------------------------- */

.pos-pagamento .modal-footer {
    gap: .6rem;
    padding: 1rem 1.3rem 1.2rem;
    border-top: 1px solid var(--pos-borda);
}

.pos-pagamento .modal-footer .btn,
.pos-pagamento .modal-footer .pos-talao {
    min-height: 58px;
    border-radius: .8rem;
    font-weight: 600;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
}

.pos-pagamento .modal-footer .btn-outline-secondary { margin-right: auto; }
.pos-pagamento .modal-footer .btn-success { background: #1a7f37; border-color: #1a7f37; }

@media (max-width: 575.98px) {
    .pos-pagamento .pos-meios { grid-template-columns: repeat(2, 1fr); }
    .pos-pagamento .modal-footer .btn-outline-secondary { margin-right: 0; }
    .pos-pag-total-valor::before,
    .pos-pag-total-valor::after { max-width: 60px; }
}

/* ---------------------------------------------------------------------------
   12. Terminal: cartoes de artigo e carrinho detalhado

   Botao de artigo com fotografia grande, selo das iniciais no canto e uma
   barra de "+" em baixo; no carrinho, cada linha mostra a miniatura, o preco
   unitario, o contador e o total da linha. E o desenho que o balcao pediu.
   --------------------------------------------------------------------------- */

/* --- procura --------------------------------------------------------------- */

.pos-procura {
    border-radius: .9rem;
    padding: .5rem .9rem;
    box-shadow: 0 1px 3px rgba(16, 24, 43, .05);
}
.pos-procura input { font-size: 1.05rem; }

/* --- separadores ----------------------------------------------------------- */

/* O nome da familia aberta, com o fio por baixo, em vez da pastilha cinzenta. */
.pos-fio {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: .2rem 0 .5rem;
    color: var(--pos-texto);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .02em;
    position: relative;
}

.pos-fio::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 3px;
    border-radius: 999px;
    background: var(--pos-realce);
}

/* --- botao de artigo -------------------------------------------------------- */

.pos-artigo {
    background: var(--pos-painel);
    border-radius: .9rem;
    box-shadow: 0 1px 3px rgba(16, 24, 43, .05);
    height: auto;
    min-height: calc(var(--pos-figura) + var(--pos-artigo-corpo));
}

.pos-artigo.sem-foto { height: auto; }

.pos-artigo-figura { background: transparent; }
.pos-artigo-figura img { object-fit: contain; padding: .5rem; }

/* Selo das iniciais no canto, por cima da fotografia. */
.pos-artigo-selo {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 2;
    min-width: 28px;
    height: 28px;
    padding: 0 .4rem;
    border-radius: .5rem;
    background: var(--pos-seleccao);
    color: var(--pos-realce);
    font-size: .78rem;
    font-weight: 800;
    line-height: 28px;
    text-align: center;
}

.pos-artigo-nome { font-size: .95rem; font-weight: 600; }
.pos-artigo-preco { font-size: 1.15rem; font-weight: 800; color: var(--pos-realce); }

/* O cartao inteiro e o botao que adiciona: nao precisa de um "+" desenhado a
   dizer o que ja e obvio, e essa barra roubava tres centimetros de altura a
   cada artigo -- numa grelha de cem, e uma linha inteira que se perde. */
.pos-grelha.compacta .pos-artigo { min-height: 0; }

/* --- painel de venda -------------------------------------------------------- */

.pos-venda { border-radius: .9rem; }
.pos-venda-topo { padding: .9rem 1rem; font-size: 1.05rem; }
.pos-venda-total { font-size: 1.3rem; color: var(--pos-realce); }

/* Atalhos como pastilhas brancas, e o de anular a vermelho. */
.pos-atalho {
    border-radius: .7rem;
    background: var(--pos-painel);
    font-size: .85rem;
    font-weight: 600;
}
.pos-atalho:hover { background: var(--pos-tecla); }

/* Linha do carrinho: miniatura, nome e preco unitario, contador, total e o
   caixote. As colunas sao fixas para os numeros ficarem alinhados de cima a
   baixo, que e como se confere uma conta. */
.pos-linha {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--pos-borda-soft, var(--pos-borda));
}

.pos-linha-nome {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
    min-width: 0;
}

.pos-linha-miniatura {
    grid-row: span 2;
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: .5rem;
}

.pos-linha-detalhe { grid-column: 2; color: var(--pos-texto-fraco); font-size: .78rem; font-weight: 500; }

.pos-linha-qtd {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border: 1px solid var(--pos-borda);
    border-radius: .6rem;
    padding: .15rem;
}

.pos-qtd-botao {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: .45rem;
    background: transparent;
    color: var(--pos-texto);
    cursor: pointer;
}
.pos-qtd-botao:hover { background: var(--pos-tecla); }
.pos-linha-quantidade { min-width: 1.6rem; text-align: center; font-weight: 700; }

.pos-linha-total { font-weight: 700; min-width: 5.5rem; text-align: right; }

.pos-linha-remover {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--pos-perigo);
    cursor: pointer;
}
.pos-linha-remover:hover { background: var(--pos-perigo-bg); }

/* --- totais e rodape --------------------------------------------------------- */

.pos-totais { padding: .9rem 1rem; }
.pos-totais > div { display: flex; justify-content: space-between; padding: .15rem 0; color: var(--pos-texto-fraco); }
.pos-totais .pos-total {
    margin-top: .5rem;
    padding-top: .6rem;
    border-top: 1px solid var(--pos-borda);
    color: var(--pos-texto);
    font-size: 1.5rem;
    font-weight: 800;
}

/* Faixa da ultima conta: fundo de realce suave, rotulos em maiusculas e o
   troco a cor -- e o numero que se confere com a mao ainda na gaveta. */
.pos-ultima {
    background: var(--pos-seleccao);
    border-top: 0;
    padding: .7rem 1rem;
}
.pos-ultima small { font-weight: 700; }
.pos-ultima strong { font-size: 1.1rem; }
.pos-ultima span:last-child strong { color: var(--pos-realce); }

.pos-accoes { padding: .8rem 1rem 1rem; gap: .6rem; }
.pos-btn { border-radius: .7rem; font-weight: 600; }
.pos-btn-pagar { background: #1a7f37; border-color: #1a7f37; font-size: 1.15rem; }

/* --- modo de formacao ------------------------------------------------------ */

/* Aviso no terminal: quem esta a treinar tem de saber que esta a treinar, e
   quem chega a meio do turno tem de perceber porque e que os documentos saem
   marcados. */
.pos-aviso-formacao {
    background: var(--pos-aviso-bg);
    border-color: var(--pos-aviso-borda);
    color: var(--pos-aviso-fg);
    font-weight: 500;
}

/* No talao, a marca vem antes de tudo o resto e em caixa alta: e a primeira
   coisa que se le no papel. */
.talao .talao-formacao {
    margin: 0 0 .4rem;
    padding: .3rem 0;
    border-top: 1px dashed #000;
    border-bottom: 1px dashed #000;
    text-align: center;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* --- impressao de documentos em varias paginas ----------------------------- */

/* Ponto 2.2.11 do Despacho n.o 8632/2014: numa impressao com mais de uma
   pagina, todas tem de exibir o tipo e o numero do documento e a numeracao das
   paginas. Faz-se com um cabecalho e um rodape fixos, que o browser repete em
   cada folha, e com os contadores de pagina do CSS. No ecra nao se veem. */

.doc-impressao-cabecalho,
.doc-impressao-rodape { display: none; }

@media print {
    @page { margin: 14mm 12mm 16mm; }

    .doc-impressao-cabecalho {
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding-bottom: 2mm;
        border-bottom: 1px solid #000;
        font-size: 9pt;
        font-weight: 700;
    }

    .doc-impressao-rodape {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding-top: 2mm;
        border-top: 1px solid #000;
        font-size: 9pt;
        text-align: right;
    }

    /* O numero da pagina e do total sai dos contadores do browser: nao ha
       forma de o saber no servidor sem paginar a folha nos. */
    .doc-impressao-rodape::after {
        content: "Página " counter(page) " de " counter(pages);
    }

    /* O conteudo respira para nao passar por baixo do cabecalho nem do rodape
       repetidos. */
    .vtr-content, .vtr-main { padding-top: 10mm; padding-bottom: 10mm; }

    /* Uma tabela de linhas cortada a meio de uma linha e ilegivel. */
    table { page-break-inside: auto; }
    tr { page-break-inside: avoid; page-break-after: auto; }
    thead { display: table-header-group; }
}

/* ---------------------------------------------------------------------------
   14. Caixa do posto

   O ecra onde o dinheiro se confere. Tres cartoes a esquerda -- o estado, os
   movimentos, o fecho -- e o historico a direita, porque e o que se consulta e
   nao o que se faz.

   Cada cartao tem o seu icone em quadrado de cor: a caixa aberta em verde
   (esta bem), os movimentos em roxo (mexe-se no dinheiro), o fecho em laranja
   (accao com consequencias). Quem chega ao ecra sabe onde pousar o olho antes
   de ler um titulo.
   --------------------------------------------------------------------------- */

.caixa { display: flex; flex-direction: column; gap: .85rem; }

.caixa-posto {
    display: flex; align-items: center; gap: .5rem;
    margin: 0; color: var(--pos-texto-fraco); font-size: .95rem;
}
.caixa-posto-etiqueta {
    padding: .15rem .6rem;
    background: rgba(234, 88, 12, .12); color: var(--pos-realce);
    border-radius: .5rem; font-weight: 700;
}

.caixa-grelha { display: grid; gap: .85rem; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.caixa-coluna { display: flex; flex-direction: column; gap: .85rem; min-width: 0; }

.caixa-cartao {
    background: var(--pos-painel);
    border: 1px solid var(--pos-borda);
    border-radius: .9rem;
    overflow: hidden;
}

.caixa-cartao-topo {
    display: flex; align-items: center; gap: .65rem;
    padding: .8rem .9rem;
    border-bottom: 1px solid var(--pos-borda);
}
.caixa-titulo { margin: 0; font-size: 1.05rem; font-weight: 700; }

.caixa-icone {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 auto;
    background: rgba(var(--cor, 234, 88, 12), .12);
    color: rgb(var(--cor, 234, 88, 12));
    border-radius: .65rem; font-size: 1.15rem;
}

/* A data de abertura encosta-se a direita: e informacao de contexto, nao o
   assunto do cartao. */
.caixa-desde {
    margin-left: auto; display: flex; align-items: center; gap: .35rem;
    color: var(--pos-texto-fraco); font-size: .85rem; white-space: nowrap;
}

.caixa-cartao-corpo { padding: .9rem; }
.caixa-nota { color: var(--pos-texto-fraco); font-size: .88rem; margin: 0 0 .75rem; }

/* --- os quatro numeros --- */

.caixa-numeros {
    display: grid; gap: .5rem;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.caixa-numero {
    display: flex; flex-direction: column; gap: .1rem; align-items: center;
    padding: .7rem .5rem; text-align: center;
    border: 1px solid var(--pos-borda); border-radius: .7rem;
}
.caixa-numero strong { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.caixa-numero span { color: var(--pos-texto-fraco); font-size: .8rem; }

/* O esperado e o unico numero que se confere com as maos: e o unico com cor. */
.caixa-numero.destaque {
    border-color: rgba(234, 88, 12, .35);
    background: rgba(234, 88, 12, .05);
}
.caixa-numero.destaque strong { color: var(--pos-realce); }

.caixa-aviso {
    display: flex; align-items: center; gap: .45rem; justify-content: center;
    margin: .7rem 0 0; padding: .55rem .7rem;
    background: rgba(127, 143, 166, .1); border-radius: .6rem;
    color: var(--pos-texto-fraco); font-size: .85rem;
}

.caixa-meios {
    display: flex; flex-wrap: wrap; gap: .25rem 1.1rem;
    margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--pos-borda);
    color: var(--pos-texto-fraco); font-size: .9rem;
}
.caixa-meios strong { color: var(--pos-texto); }

/* --- formularios --- */

.caixa-forma { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .6rem; }
.caixa-campo { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.caixa-campo-largo { flex: 1 1 14rem; }
.caixa-campo-tipo { flex: 0 0 8rem; }
.caixa-campo-valor { flex: 0 0 10rem; }
.caixa-campo-contagem { flex: 0 0 11rem; }
.caixa-rotulo { color: var(--pos-texto-fraco); font-size: .85rem; }

/* O botao alinha com os campos e nao com as etiquetas: numa linha de
   formulario, o que se carrega fica a altura do que se escreve. */
.caixa-forma > .btn { margin-top: 1.55rem; }
.caixa-btn-fechar { min-width: 8rem; }

.caixa-esperado { margin: .35rem 0 0; color: var(--pos-texto-fraco); font-size: .85rem; }
.caixa-esperado strong { color: var(--pos-realce); }

/* --- movimentos e fechos --- */

.caixa-movimentos, .caixa-fechos { width: 100%; border-collapse: collapse; }
.caixa-movimentos { margin-top: .85rem; }

.caixa-movimentos td, .caixa-fechos td, .caixa-fechos th {
    padding: .5rem .6rem; border-top: 1px solid var(--pos-borda); font-size: .88rem;
}
.caixa-fechos th {
    border-top: 0; color: var(--pos-texto-fraco); font-size: .72rem;
    text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
.caixa-mov-data { color: var(--pos-texto-fraco); white-space: nowrap; }
.caixa-mov-valor { text-align: right; font-weight: 700; white-space: nowrap; }
.caixa-mov-valor.entrada { color: #16a34a; }
.caixa-mov-valor.saida { color: var(--pos-alerta); }

.caixa-diferenca { font-weight: 700; }
.caixa-diferenca.certa { color: #16a34a; }
.caixa-diferenca.errada { color: var(--pos-alerta); }

.caixa-vazio {
    display: flex; flex-direction: column; align-items: center; gap: .7rem;
    padding: 2rem 1rem; color: var(--pos-texto-fraco); font-size: .9rem;
}
.caixa-vazio-icone {
    display: flex; align-items: center; justify-content: center;
    width: 76px; height: 76px; border-radius: 50%;
    background: rgba(127, 143, 166, .12); font-size: 1.9rem;
}

@media (max-width: 991.98px) {
    .caixa-grelha { grid-template-columns: minmax(0, 1fr); }
}


/* ---------------------------------------------------------------------------
   15. Modal das mesas

   Uma mesa reconhece-se pelo desenho antes de se ler o nome. Num ecra tactil,
   com o cliente a espera, e a diferenca entre tocar certo a primeira e ter de
   ler quatro rotulos.
   --------------------------------------------------------------------------- */

.pos-mesas-modal .modal-content { border: 0; border-radius: 1rem; overflow: hidden; }

.pos-mesas-cabeca { align-items: center; gap: .75rem; padding: 1rem 1.15rem; }
.pos-mesas-cabeca .modal-title { font-size: 1.35rem; font-weight: 700; margin: 0; }

.pos-mesas-icone {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex: 0 0 auto;
    background: rgba(234, 88, 12, .12); color: var(--pos-realce);
    border-radius: .7rem; font-size: 1.3rem;
}

.pos-mesas-zona {
    display: flex; align-items: center; gap: .55rem;
    margin: 1rem 0 .75rem; font-size: 1.05rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .02em;
}
.pos-mesas-zona:first-child { margin-top: 0; }
.pos-mesas-zona i { color: var(--pos-realce); font-size: 1.25rem; }

.pos-mesas-grelha {
    display: grid; gap: .6rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.pos-mesa-botao {
    display: flex; align-items: center; gap: .5rem;
    padding: .7rem .9rem .7rem .5rem; width: 100%; text-align: left; cursor: pointer;
    background: var(--pos-painel); border: 1px solid var(--pos-borda); border-radius: 1rem;
    color: var(--pos-texto); text-decoration: none;
}
.pos-mesa-botao:hover { border-color: var(--pos-realce); color: var(--pos-texto); }
.pos-mesa-botao.livre { background: rgba(234, 88, 12, .03); border-color: rgba(234, 88, 12, .2); }
.pos-mesa-botao.ocupada { border-color: rgba(234, 88, 12, .45); }

.pos-mesa-figura { width: 92px; height: 74px; flex: 0 0 auto; }
.pos-mesa-txt { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; min-width: 0; }
.pos-mesa-nome {
    font-size: 1.15rem; font-weight: 700;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pos-mesa-lugares { color: var(--pos-texto-fraco); font-size: .9rem; }

/* O estado numa pastilha: le-se de relance, e a bolinha diz o mesmo que a cor
   para quem nao a distingue. */
.pos-mesa-estado {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: .15rem; padding: .2rem .6rem;
    border-radius: .5rem; font-size: .92rem; font-weight: 700;
}
.pos-mesa-estado::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.pos-mesa-estado.livre { background: rgba(22, 163, 74, .12); color: #16a34a; }
.pos-mesa-estado.ocupada { background: rgba(234, 88, 12, .14); color: var(--pos-realce); }


/* Artigos por linha, escolhidos no painel de dimensões. A classe entra no body
   porque o painel mexe em tokens do body -- e assim a regra vale para a grelha
   normal e para a compacta sem as duplicar. */
body.pos-colunas-fixas .pos-grelha,
body.pos-colunas-fixas .pos-grelha.compacta {
    grid-template-columns: repeat(var(--pos-artigo-colunas, 5), minmax(0, 1fr));
}


/* Puxar a barra das familias com o dedo ou com o rato.

   No dedo o browser ja fazia o scroll; pan-x diz-lhe que so o horizontal e
   dele, para o gesto nao roubar o scroll vertical da pagina. O rato e por
   nossa conta -- ver ligarArrasto() em pos.js. */
.pos-familias,
.pos-subfamilias {
    touch-action: pan-x;
    cursor: grab;
    overscroll-behavior-x: contain;
}
.pos-familias.pos-tira-arrastar,
.pos-subfamilias.pos-tira-arrastar { cursor: grabbing; scroll-behavior: auto; }

/* ---------------------------------------------------------------------------
   16. Ajustar o terminal com o rato

   Pegas por cima do ecrã real, e não um painel ao lado: o que se está a
   dimensionar é o que se está a ver. As réguas do painel continuam lá para
   quem prefere números.
   --------------------------------------------------------------------------- */

.pos-ajuste-camada { position: fixed; inset: 0; z-index: 1080; pointer-events: none; }

/* Enquanto se ajusta, o terminal não responde a toques: um clique a passar
   para um artigo punha-o no carrinho a meio da arrumação. */
body.pos-ajustar .pos-corpo { pointer-events: none; }
body.pos-ajustar .pos-catalogo,
body.pos-ajustar .pos-venda { outline: 1px dashed rgba(234, 88, 12, .45); outline-offset: -2px; }

.pos-ajuste-barra {
    position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem .7rem;
    background: var(--pos-barra); color: var(--pos-barra-fg);
    border-radius: .9rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
    pointer-events: auto;
}
.pos-ajuste-dica { display: flex; align-items: center; gap: .4rem; font-size: .9rem; padding-right: .5rem; }

.pos-ajuste-btn {
    padding: .45rem .8rem; border: 0; border-radius: .55rem;
    background: rgba(255, 255, 255, .12); color: var(--pos-barra-fg);
    font-size: .9rem; font-weight: 600; cursor: pointer;
}
.pos-ajuste-btn:hover { background: rgba(255, 255, 255, .2); }
.pos-ajuste-btn.principal { background: var(--pos-realce); color: var(--pos-realce-fg); }

/* A pega é o elemento que se agarra: fica centrada no bordo que move, com o
   nome do que dimensiona e a medida actual. */
.pos-ajuste-pega {
    position: absolute; transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: .4rem;
    padding: .3rem .6rem; border: 0; border-radius: .5rem;
    background: var(--pos-realce); color: var(--pos-realce-fg);
    font-size: .78rem; font-weight: 700; line-height: 1; white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    pointer-events: auto; touch-action: none;
}
.pos-ajuste-pega.esquerda, .pos-ajuste-pega.direita { cursor: ew-resize; }
.pos-ajuste-pega.baixo { cursor: ns-resize; }
.pos-ajuste-pega:hover, .pos-ajuste-pega.a-puxar { filter: brightness(1.1); }
.pos-ajuste-pega.a-puxar { box-shadow: 0 0 0 4px rgba(234, 88, 12, .3); }

.pos-ajuste-valor {
    padding: .05rem .35rem;
    background: rgba(0, 0, 0, .22); border-radius: .35rem;
    font-variant-numeric: tabular-nums;
}

/* Com dezassete pegas no ecrã, o nome de cada uma tapava o que se quer ver.
   Fica o símbolo; o nome e a medida aparecem com o rato em cima, ou enquanto
   se arrasta -- que é quando fazem falta. */
.pos-ajuste-pega i { font-size: .95rem; }
.pos-ajuste-pega .pos-ajuste-nome,
.pos-ajuste-pega .pos-ajuste-valor { display: none; }
.pos-ajuste-pega:hover .pos-ajuste-nome,
.pos-ajuste-pega:hover .pos-ajuste-valor,
.pos-ajuste-pega.a-puxar .pos-ajuste-nome,
.pos-ajuste-pega.a-puxar .pos-ajuste-valor { display: inline; }
.pos-ajuste-pega:hover, .pos-ajuste-pega.a-puxar { z-index: 2; }

/* ---------------------------------------------------------------------------
   17. Tudo dimensionável

   O modo de ajuste começou com seis medidas e a pergunta seguinte foi
   inevitável: "e os botões?". Cada coisa que se vê no terminal passa a ter o
   seu token, com o valor de origem igual ao que estava escrito à mão -- quem
   não tocar em nada não vê diferença nenhuma.

   Este bloco fica no fim do ficheiro de propósito: as regras destes elementos
   estão espalhadas por vários blocos anteriores (adaptação a ecrãs baixos, ao
   tema, ao toque) e a última regra é que manda. Reescrevê-las uma a uma no
   sítio onde nasceram obrigaria a mexer em código que já está afinado.
   --------------------------------------------------------------------------- */

body.pos-body {
    --pos-btn-h: 68px;          /* Pagar, Cliente/Conta */
    --pos-btn-fs: 1.15rem;
    --pos-atalho-h: 54px;       /* barra por cima do carrinho */
    --pos-atalho-fs: .85rem;
    --pos-procura-fs: 1.05rem;  /* leitor de código de barras */
    --pos-linha-h: .7rem;       /* espessura de cada linha do carrinho */
    --pos-linha-fs: .95rem;
    --pos-artigo-nome: .95rem;
    --pos-artigo-preco: 1.15rem;
    --pos-familia-fs: .95rem;
    --pos-subtecla-h: 46px;     /* subfamílias */
    --pos-seta-w: 64px;         /* setas das tiras */
    --pos-barra-btn-h: 46px;    /* teclas da barra do topo */
    --pos-relogio-fs: 2.1rem;
    --pos-venda-total-fs: 1.15rem;
    --pos-meio-h: 52px;         /* meios de pagamento */
}

.pos-btn { min-height: var(--pos-btn-h); font-size: var(--pos-btn-fs); }
.pos-btn-pagar { font-size: calc(var(--pos-btn-fs) + .05rem); }

.pos-atalho { min-height: var(--pos-atalho-h); font-size: var(--pos-atalho-fs); }
.pos-procura input { font-size: var(--pos-procura-fs); }

.pos-linha { padding: var(--pos-linha-h) 1rem; font-size: var(--pos-linha-fs); }

.pos-artigo-nome { font-size: var(--pos-artigo-nome); }
.pos-artigo-preco { font-size: var(--pos-artigo-preco); }

.pos-familia { font-size: var(--pos-familia-fs); min-height: var(--pos-tecla-h); }
.pos-subfamilia { min-height: var(--pos-subtecla-h); }
.pos-tira-seta { width: var(--pos-seta-w); }

.pos-barra-btn { min-height: var(--pos-barra-btn-h); }
.pos-relogio-hora { font-size: var(--pos-relogio-fs); }
.pos-venda-total { font-size: var(--pos-venda-total-fs); }
.pos-meio { min-height: var(--pos-meio-h); }

/* Mais coisas do cartão de artigo, e o cabeçalho da família: a mesma ideia,
   um token por medida, com o valor de origem igual ao que estava escrito. */
body.pos-body {
    --pos-fio-fs: 1rem;             /* BATATAS, por cima da grelha */
    --pos-inicial-fs: 1.5rem;       /* BL, R -- artigo sem fotografia */
    --pos-selo-fs: .78rem;          /* RP -- selo sobre a fotografia */
    --pos-selo-h: 28px;
}

.pos-fio { font-size: var(--pos-fio-fs); }
.pos-artigo-inicial { font-size: var(--pos-inicial-fs); }
.pos-artigo-selo {
    font-size: var(--pos-selo-fs);
    min-width: var(--pos-selo-h);
    height: var(--pos-selo-h);
    line-height: var(--pos-selo-h);
}

/* Pega de canto: redimensiona o cartao nas duas direccoes. */
.pos-ajuste-pega.canto { cursor: nwse-resize; }

/* ---------------------------------------------------------------------------
   18. Barra de estado

   O produto, a versão e a licença estavam no meio da barra de cima -- o sítio
   mais valioso do ecrã, gasto com informação que se consulta uma vez por mês.
   Descem para uma faixa fina no fundo: continua à vista para quem liga a pedir
   apoio, e deixa de disputar espaço com as teclas.
   --------------------------------------------------------------------------- */

.pos-status {
    display: flex; align-items: center; gap: .75rem;
    flex: 0 0 auto; min-height: 30px;
    margin: 0 .5rem .4rem; padding: .25rem .75rem;
    background: var(--pos-barra); color: var(--pos-barra-fg);
    border-radius: .6rem;
    font-size: .8rem; line-height: 1;
}

.pos-status-produto { display: flex; align-items: center; gap: .4rem; font-weight: 700; }
.pos-status .pos-produto-icone { width: 20px; height: 20px; border-radius: .35rem; font-size: .78rem; }
.pos-status .pos-barra-versao { font-size: .68rem; padding: .05rem .3rem; }

.pos-status-licenca {
    display: flex; align-items: center; gap: .4rem;
    opacity: .82; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pos-status-licenca.invalida { opacity: 1; color: #fca5a5; }
.pos-status-licenca.invalida .pos-pisca { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .2); }

/* O que fica encostado à direita: a edição comercial e o posto, que é o que se
   confirma antes de fechar uma caixa. */
.pos-status-fim {
    margin-left: auto; display: flex; align-items: center; gap: .5rem;
    opacity: .75; white-space: nowrap;
}
.pos-status-posto {
    padding: .1rem .45rem;
    background: rgba(255, 255, 255, .12); border-radius: .35rem;
    font-weight: 700; opacity: 1;
}

@media (max-width: 767.98px) {
    .pos-status-licenca { display: none; }
}

/* Sem o bloco do software no meio, nada empurrava as teclas: ficavam coladas
   ao nome da casa, com o vazio todo a direita. O grupo das accoes e o relogio
   passam a encostar-se a direita, e o espaco que sobra fica entre as duas
   coisas que nao se confundem uma com a outra. */
.pos-barra-accoes { margin-left: auto; }

/* ---------------------------------------------------------------------------
   19. Procura e avisos na mesma linha

   O campo de procura ocupava a largura toda do catálogo para receber meia dúzia
   de letras -- ou nem isso, quando é o leitor de código de barras a escrever.
   Fica com metade, e a outra metade recebe os avisos, que andavam espalhados
   pelo topo e por um rodapé que ninguém lê.
   --------------------------------------------------------------------------- */

.pos-procura-linha {
    display: flex; align-items: stretch; gap: var(--pos-gap);
    flex: 0 0 auto; min-width: 0;
}

.pos-procura-linha .pos-procura { flex: 0 1 var(--pos-procura-w, 50%); min-width: 0; }

.pos-avisos {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; justify-content: center; gap: .25rem;
}

/* Aviso em linha, não em caixa: aqui é para se ler de passagem, e uma caixa com
   moldura roubava a altura que a grelha precisa. */
.pos-avisos .pos-aviso {
    display: flex; align-items: center; gap: .45rem;
    margin: 0; padding: .3rem .6rem;
    border-radius: .5rem; font-size: .82rem; line-height: 1.25;
}
.pos-avisos .pos-aviso i { flex: 0 0 auto; font-size: 1rem; }
.pos-avisos .pos-aviso span { overflow: hidden; text-overflow: ellipsis; }

/* Um só aviso ocupa a linha toda; três empilham-se sem crescer. */
.pos-avisos:empty { display: none; }

@media (max-width: 991.98px) {
    .pos-procura-linha { flex-direction: column; }
    .pos-procura-linha .pos-procura { flex: 0 0 auto; }
}

/* O aviso encolhe ao texto em vez de esticar pela metade toda: uma caixa
   amarela do tamanho do espaço disponível parece um erro maior do que é, e a
   moldura vazia à direita não diz nada a ninguém. */
.pos-avisos { align-items: flex-start; }
.pos-avisos .pos-aviso { width: auto; max-width: 100%; }

/* O nome da casa por inteiro: cortá-lo aos vinte caracteres dava "Vitor Manuel
   Conde G...", e um nome fiscal é sempre comprido. A barra tem espaço desde que
   o bloco do software desceu para a barra de estado. */
.pos-marca-nome { max-width: none; }
.pos-marca-sub { display: flex; align-items: center; gap: .4rem; }

/* O número de série ao lado da edição: é o que a assistência pergunta a seguir
   à versão, e estava só no ecrã da licença, dentro do escritório. */
.pos-marca-serie {
    padding: .05rem .35rem;
    background: rgba(255, 255, 255, .12); border-radius: .3rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem; letter-spacing: .02em;
}

/* ==========================================================================
   14. Nenhum botão esconde o seu texto
   ==========================================================================
   Um botão de terminal existe para ser lido de relance e carregado sem
   hesitação. "Botões do ter…", "Agua 50c…" ou um nome cortado a meia altura
   obrigam quem está ao balcão a adivinhar -- e a adivinhar depressa, com
   clientes à espera. Vale mais o botão crescer do que o nome encolher.

   Duas famílias, com soluções diferentes:

   - Na área livre (cartões de artigo, teclas, famílias, mesas, botões do
     painel) o texto passa a quebrar em quantas linhas precisar. Os botões
     têm min-height, não altura fixa, por isso crescem em vez de cortar.

   - Na barra do topo, onde a altura é apertada, o texto continua numa linha
     mas deixa de ter limite de largura: é o botão que alarga.

   Fica de fora o que não é botão -- linhas do carrinho, email da barra
   lateral, créditos de imagens -- onde as reticências continuam a ser a
   escolha certa. */

.pos-artigo-nome,
.pos-atalho span,
.painel-botao-txt > span,
.painel-numero-txt > *,
.pos-mesa-nome,
.pos-familia,
.pos-btn,
.pos-tecla,
.pos-atalho,
.painel-botao {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    max-width: none;
    overflow-wrap: anywhere;
}

/* O clamp de duas linhas era o que cortava o nome do artigo. Sem ele o nome
   sai inteiro, e o cartão acompanha. */
.pos-artigo-nome {
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
}

/* O cartão nunca corta o que o corpo mostrar, seja qual for o tamanho
   escolhido no ajuste por rato. */
.pos-artigo,
.pos-artigo.sem-foto {
    height: auto;
    overflow: visible;
}

.pos-artigo-figura { border-radius: .6rem .6rem 0 0; }

.pos-artigo-corpo {
    height: auto;
    overflow: visible;
}

/* Barra do topo: uma linha, sem limite de largura. */
.pos-barra-btn,
.pos-barra-btn span {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}

/* ==========================================================================
   15. Modais de gestão: largura para o que lá está dentro
   ==========================================================================
   Os modais do terminal herdavam os 800px do `modal-lg` do Bootstrap. Chega
   para escolher uma mesa; não chega para a página das séries, que é uma
   tabela de sete colunas ao lado de um painel de criação. Nesses 800px a
   coluna da tabela ficava com 494px e o texto partia-se palavra a palavra --
   "Comunicação / confirmada", "Abrir / verificação AT" -- até a página deixar
   de se ler.

   Alarga-se só o que precisa: os modais cujo conteúdo traz um `.row`, ou
   seja, os que trazem um layout de colunas. O modal das mesas, que não traz,
   mantém o tamanho que tinha.

   A tabela ganha uma largura mínima. Se ainda assim não couber -- num ecrã
   estreito -- o `.table-responsive` do Bootstrap desliza na horizontal, que
   é o que ele existe para fazer, em vez de espremer as células. */

.pos-body .modal-dialog:has(.vtr-modal-corpo .row) {
    max-width: min(1200px, 95vw);
}

.pos-body .vtr-modal-corpo .table-responsive > .table {
    min-width: 42rem;
}

/* A regra dos botões não se aplica a tabelas: aqui as palavras partem-se nos
   sítios normais, ou não se partem de todo. */
.pos-body .vtr-modal-corpo .table td,
.pos-body .vtr-modal-corpo .table th {
    overflow-wrap: normal;
}