/**
 * ==========================================
 * 🎨 CAIXA - ESTILO CUSTOMIZADO (VERSÃO 2 - COM MELHORIAS)
 * ==========================================
 */

/* ============================================
   RESET E BASE
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f5f5f5;
    overflow-x: hidden;
}

/* ============================================
   NAVBAR PRINCIPAL (Bootstrap)
   ============================================ */
.navbar-caixa {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1rem 0;
}

.navbar-caixa .navbar-brand {
    color: white !important;
    font-size: 1.0rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.navbar-logo {
    border-radius: 4px;
    object-fit: contain;
    filter: brightness(1.1);
    height: 40px;
    width: auto;
    margin-right: 1rem;
    vertical-align: middle;
}

.navbar-caixa .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.3s;
}

.navbar-caixa .nav-link:hover {
    color: white !important;
    transform: translateY(-2px);
}

/* Botões da navbar com cores */
.navbar-caixa .btn-nav {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    color: white !important;
}

/* A barra de ações desktop: quando faltar largura, quebra o botão inteiro
   (nunca o texto dentro dele), mantendo tudo alinhado */
.navbar-caixa .navbar-nav {
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    row-gap: 0.35rem;
}

/* Dica de atalho ([F9], [Alt+C]...) dentro do botão */
.navbar-caixa .btn-nav .kbd-hint {
    margin-left: 0.3rem;
    opacity: 0.85;
}

/* Telas desktop estreitas (ex.: monitor 14"): compacta os botões e esconde
   as dicas de atalho pra tudo caber numa linha só */
@media (min-width: 992px) and (max-width: 1650px) {
    .navbar-caixa .btn-nav {
        padding: 0.45rem 0.55rem !important;
        font-size: 0.82rem !important;
    }
    .navbar-caixa .btn-nav i {
        margin-right: 0.25rem !important;
    }
    .navbar-caixa .btn-nav .kbd-hint {
        display: none;
    }
}

.navbar-caixa .btn-info-nav {
    background-color: #3498db !important;
    border: 1px solid #2980b9 !important;
}

.navbar-caixa .btn-info-nav:hover {
    background-color: #2980b9 !important;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.4) !important;
}

.navbar-caixa .btn-warning-nav {
    background-color: #f39c12 !important;
    border: 1px solid #d68910 !important;
}

.navbar-caixa .btn-warning-nav:hover {
    background-color: #d68910 !important;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.4) !important;
}

.navbar-caixa .btn-secondary-nav {
    background-color: #95a5a6 !important;
    border: 1px solid #7f8c8d !important;
}

.navbar-caixa .btn-secondary-nav:hover {
    background-color: #7f8c8d !important;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(149, 165, 166, 0.4) !important;
}

.navbar-caixa .btn-primary-nav {
    background-color: #2980b9 !important;
    border: 1px solid #1f618d !important;
}

.navbar-caixa .btn-primary-nav:hover {
    background-color: #1f618d !important;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(41, 128, 185, 0.4) !important;
}

/* ============================================
   TOP BAR - ATENDENTE E CLIENTE
   ============================================ */
.caixa-topbar {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-bottom: 2px solid rgba(102, 126, 234, 0.2);
}

.caixa-topbar-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #ecf0f1;
    font-size: 0.95rem;
    font-weight: 500;
}

.caixa-topbar-item i {
    font-size: 1.2rem;
    color: #667eea;
}

.caixa-topbar-item span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.caixa-topbar-item strong {
    font-weight: 600;
}

/* ============================================
   LAYOUT PRINCIPAL
   ============================================ */
.caixa-container {
    display: flex;
    height: calc(100vh - 110px);
    gap: 0;
}

/* ============================================
   ÁREA CENTRAL - PRODUTOS E BUSCA
   ============================================ */
.caixa-main {
    flex: 1;
    background: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Campo de busca */
.caixa-search {
    background: white;
    padding: 1rem 1.5rem;
    border-bottom: 2px solid #e0e0e0;
}

.caixa-search-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.caixa-search-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
}

.caixa-search-input-group label {
    font-size: 0.875rem;
    color: #666;
    margin: 0;
}

.caixa-search-input {
    display: flex;
    gap: 0.5rem;
}

.caixa-search-input input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: white;
    width: 100%;
}

.caixa-search-input input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.1);
    background: #f8f9ff;
}

.caixa-search-input input::placeholder {
    color: #95a5a6;
}

.caixa-quantity-input {
    width: 120px;
}

.caixa-quantity-input label {
    font-size: 0.875rem;
    color: #666;
    margin: 0;
}

.caixa-quantity-input input {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    font-size: 1rem;
}

/* ============================================
   ÁREA DE CONTEÚDO - CAIXA LIVRE / ITENS
   ============================================ */
.caixa-content {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

/* Card de último produto adicionado */
.last-product-card {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 999;
    width: 90%;
    max-width: 400px;
    animation: slideInRight 0.4s ease-out, fadeOutRight 0.4s ease-in 4.6s forwards;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(100px);
    }
}

/* Estado: Caixa Livre (vazio) */
.caixa-empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Sólido e neutro de propósito. Degradê difuso com cor num monitor de
       caixa não lê como design: lê como tela manchada, com defeito. Testado
       em 06/09/2026 e reprovado exatamente por isso. */
    background: #eceef2;
    position: relative;
    overflow: hidden;
}

.caixa-empty::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Sem cor nenhuma: só uma clareada muito de leve no alto, do mesmo cinza.
       Dá um pouco de profundidade sem virar mancha. */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 55%);
    z-index: 1;
}

.caixa-empty-overlay {
    text-align: center;
    padding: 2rem;
}

.caixa-empty-content {
    text-align: center;
    color: #2c3e50;
    z-index: 2;
    position: relative;
}

.caixa-empty-content i {
    font-size: 4rem;
    opacity: 0.3;
    display: block;
    margin-bottom: 1rem;
}

.caixa-empty-content h3 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #34495e;
}

.caixa-empty-content p {
    font-size: 0.95rem;
    color: #7f8c8d;
}

.caixa-empty-logo {
    height: 100px;
    width: auto;
    max-width: 80%;
    object-fit: contain;
    margin-bottom: 1rem;
    opacity: 0.15;
    filter: grayscale(100%);
}

/* ===== Vida na tela de caixa livre =====
   Só o que o compositor da GPU resolve sozinho: transform e opacity. Nada de
   width/top/box-shadow animado, que forçam layout e repaint a cada quadro num
   PDV que às vezes roda em máquina fraca.

   O custo enquanto se vende é ZERO, e não por educação: o caixa.js esconde
   este bloco com `display: none` (caixa.js:1250), e animação de elemento com
   display none não roda em navegador nenhum. Bipou o primeiro produto, para. */

/* Não existe mais camada de cor passeando no fundo. Foi testada em 06/09/2026
   e reprovada pelo motivo certo: mancha colorida difusa num monitor de caixa
   parece tela com defeito, não enfeite. O fundo é cinza sólido e ponto.
   Quem dá vida agora é o código de barras e a passada de luz — branca e
   rápida, lê como brilho passando em vez de mancha parada. */

/* A passada do leitor: uma faixa de luz cruza a tela de vez em quando. É a
   animação temática — diz "bipa um produto" sem escrever de novo. Ela cruza em
   1,6s e some pelos 8s seguintes; sem essa pausa longa vira pisca-pisca, que é
   exatamente o que ele pediu pra evitar. */
.caixa-empty::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -30%;
    width: 22%;
    height: 220%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: rotate(14deg) translate3d(0, 0, 0);
    opacity: 0;
    animation: caixa-leitura 9.6s ease-in-out infinite;
}

@keyframes caixa-leitura {
    0%   { transform: rotate(14deg) translate3d(0, 0, 0);    opacity: 0; }
    3%   { opacity: 0.85; }
    14%  { opacity: 0.85; }
    17%  { transform: rotate(14deg) translate3d(560%, 0, 0); opacity: 0; }
    100% { transform: rotate(14deg) translate3d(560%, 0, 0); opacity: 0; }
}

/* Logo e ícone respiram junto, meio ciclo fora do aurora. */
.caixa-empty-logo,
.caixa-empty-content i {
    animation: caixa-respiro 6s ease-in-out infinite;
}

@keyframes caixa-respiro {
    0%, 100% { transform: scale(1)     translate3d(0, 0, 0); }
    50%      { transform: scale(1.045) translate3d(0, -3px, 0); }
}

/* ===== O código de barras =====
   Desenhado com <span> vazios: nenhuma imagem, nenhuma fonte, nenhum SVG a
   baixar. Cada barra anima só scaleY — transform puro, sem mexer no layout das
   vizinhas (animar height empurraria as outras e forçaria layout a cada
   quadro). São 18 barras de 3px: caixas pequenas, o compositor engole. */
.caixa-empty-codigo {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    height: 46px;
    margin-top: 1.25rem;
    opacity: 0.34;
}

.caixa-empty-codigo span {
    width: 4px;
    height: 100%;
    border-radius: 1px;
    background: #34495e;
    transform-origin: bottom center;
    animation: caixa-barras 3.4s ease-in-out infinite;
}

/* Alturas irregulares: código de barras de verdade não tem barra toda igual, e
   com todas iguais a onda vira "gráfico de equalizador". */
.caixa-empty-codigo span:nth-child(3n)   { height: 62%; }
.caixa-empty-codigo span:nth-child(4n)   { height: 84%; }
.caixa-empty-codigo span:nth-child(5n)   { height: 46%; }
.caixa-empty-codigo span:nth-child(7n)   { width: 8px; }
.caixa-empty-codigo span:nth-child(11n)  { width: 7px; height: 72%; }

/* A onda atravessa da esquerda pra direita: cada barra entra um pouco depois
   da anterior. O atraso é NEGATIVO pra elas já começarem espalhadas, em vez de
   subirem todas juntas no primeiro ciclo. */
.caixa-empty-codigo span:nth-child(1)  { animation-delay: -3.40s; }
.caixa-empty-codigo span:nth-child(2)  { animation-delay: -3.25s; }
.caixa-empty-codigo span:nth-child(3)  { animation-delay: -3.10s; }
.caixa-empty-codigo span:nth-child(4)  { animation-delay: -2.95s; }
.caixa-empty-codigo span:nth-child(5)  { animation-delay: -2.80s; }
.caixa-empty-codigo span:nth-child(6)  { animation-delay: -2.65s; }
.caixa-empty-codigo span:nth-child(7)  { animation-delay: -2.50s; }
.caixa-empty-codigo span:nth-child(8)  { animation-delay: -2.35s; }
.caixa-empty-codigo span:nth-child(9)  { animation-delay: -2.20s; }
.caixa-empty-codigo span:nth-child(10) { animation-delay: -2.05s; }
.caixa-empty-codigo span:nth-child(11) { animation-delay: -1.90s; }
.caixa-empty-codigo span:nth-child(12) { animation-delay: -1.75s; }
.caixa-empty-codigo span:nth-child(13) { animation-delay: -1.60s; }
.caixa-empty-codigo span:nth-child(14) { animation-delay: -1.45s; }
.caixa-empty-codigo span:nth-child(15) { animation-delay: -1.30s; }
.caixa-empty-codigo span:nth-child(16) { animation-delay: -1.15s; }
.caixa-empty-codigo span:nth-child(17) { animation-delay: -1.00s; }
.caixa-empty-codigo span:nth-child(18) { animation-delay: -0.85s; }

@keyframes caixa-barras {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(0.55); }
}

/* Dois jeitos de desligar, e os dois param TUDO:

   1. `.sem-vida` — o assinante desligou em Configurações do PDV. Decisão da
      loja, vale pra todo mundo do balcão.
   2. `prefers-reduced-motion` — a pessoa pediu menos movimento no próprio
      sistema. Não é enfeite de acessibilidade: tem operador que passa 8h
      nessa tela, e essa escolha é dele, não da loja.

   O aurora vira o degradê estático de antes em vez de sumir: desligar o
   movimento não é motivo pra tela ficar mais feia que era. */
.caixa-empty.sem-vida::before,
.caixa-empty.sem-vida::after,
.caixa-empty.sem-vida .caixa-empty-logo,
.caixa-empty.sem-vida .caixa-empty-content i,
.caixa-empty.sem-vida .caixa-empty-codigo span {
    animation: none;
}

.caixa-empty.sem-vida::after { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .caixa-empty::before,
    .caixa-empty::after,
    .caixa-empty-logo,
    .caixa-empty-content i,
    .caixa-empty-codigo span {
        animation: none;
    }

    .caixa-empty::after { opacity: 0; }
}

/* Estado: Com itens */
.caixa-items {
    padding: 1rem 1.5rem;
}

.caixa-items h5 {
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
}

.caixa-items-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.caixa-items-table thead {
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.caixa-items-table th {
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    color: #495057;
}

.caixa-items-table tbody tr {
    border-bottom: 1px solid #dee2e6;
    transition: background-color 0.2s;
}

.caixa-items-table tbody tr:hover {
    background-color: #f8f9fa;
}

.caixa-items-table td {
    padding: 0.75rem;
    font-size: 0.875rem;
    vertical-align: middle;
}

.caixa-items-table input {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.875rem;
}

.caixa-items-table .btn-remove {
    color: #dc3545;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 1.25rem;
    transition: color 0.2s;
}

.caixa-items-table .btn-remove:hover {
    color: #a02622;
}

/* ============================================
   PRODUTO NA TABELA COM IMAGEM
   ============================================ */
.product-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.product-image {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.product-image img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    object-fit: contain;
}

.product-image i {
    font-size: 1.2rem;
    color: #95a5a6;
}

.product-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* ============================================
   FOOTER - TOTAL E INFORMAÇÕES (CENTRALIZADO)
   ============================================ */
.caixa-footer {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    padding: 1.5rem;
    border-top: 2px solid rgba(102, 126, 234, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.caixa-footer-total {
    font-size: 2rem;
    font-weight: 700;
    color: #2ecc71;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}

.caixa-footer-info {
    color: #bdc3c7;
    font-size: 0.9rem;
}

.caixa-footer-actions {
    display: none;
}

/* ============================================
   SIDEBAR DIREITA - BOTÕES DE ATALHO
   ============================================ */
.caixa-sidebar {
    width: 360px;
    background: #ecf0f1;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 1px solid #bdc3c7;
    overflow-y: auto;
}

.caixa-sidebar-btn {
    padding: 1rem 0.75rem;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    width: 100%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.caixa-sidebar-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: left 0.3s ease;
    z-index: 0;
}

.caixa-sidebar-btn:hover::before {
    left: 100%;
}

.caixa-sidebar-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    filter: brightness(1.1);
}

.caixa-sidebar-btn span {
    position: relative;
    z-index: 1;
}

.caixa-sidebar-btn .icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.caixa-sidebar-btn .shortcut {
    font-size: 0.7rem;
    opacity: 0.8;
    font-weight: 400;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Cores dos botões da sidebar */
.btn-info {
    background: #3498db;
}

.btn-warning {
    background: #f39c12;
}

.btn-primary {
    background: #2980b9;
}

.btn-success {
    background: #27ae60;
}

.btn-danger {
    background: #e74c3c;
}

.btn-secondary {
    background: #95a5a6;
}

.btn-purple {
    background: #6c5ce7;
}

.btn-dark {
    background: #2c3e50;
}

/* ============================================
   CARDS
   ============================================ */
.card {
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ============================================
   BOTÕES BOOTSTRAP
   ============================================ */
.btn {
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.3s;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* ============================================
   INPUTS
   ============================================ */
.form-control,
.form-select {
    border-radius: 0.5rem;
    border: 1px solid #e0e0e0;
    transition: all 0.3s;
}

.form-control:focus,
.form-select:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* ============================================
   RESULTADOS DE BUSCA
   ============================================ */
#searchResults {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e3e5ef;
    border-radius: 10px;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    box-shadow: 0 10px 28px rgba(23, 25, 60, 0.18);
}

#searchResults .list-group-item {
    position: relative;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    /* o espaço da esquerda é a pista do cursor: reservado sempre, senão o
       item "pula" 4px quando fica ativo */
    padding: 0.75rem 1rem 0.75rem calc(1rem + 4px);
    cursor: pointer;
    color: #1f2333;
    scroll-margin: 0.5rem 0;
    transition: background-color 0.12s ease, color 0.12s ease;
}

#searchResults .list-group-item:last-child {
    border-bottom: none;
}

/* ---- cursor do MOUSE: claro, mas cinza e leve — nunca compete com o teclado ---- */
#searchResults:not(.kb-nav) .list-group-item:hover:not(.active) {
    background-color: #eef0f8;
    box-shadow: inset 4px 0 0 #c3c8e0;
}

/* Navegando pelas setas o ponteiro fica parado no meio da lista e o :hover
   pintava um segundo item — dois cursores na tela. Enquanto o teclado manda,
   o hover cala a boca (o mousemove tira a classe). */
#searchResults.kb-nav .list-group-item {
    cursor: default;
}

/* ---- cursor do TECLADO/seleção: sólido, legível em qualquer monitor ---- */
#searchResults .list-group-item.active {
    background-color: #5a67d8;
    color: #fff;
    /* barra da esquerda pela sombra interna: não empurra o conteúdo */
    box-shadow: inset 4px 0 0 #363b8f;
}

#searchResults .list-group-item.active strong,
#searchResults .list-group-item.active .text-success,
#searchResults .list-group-item.active .text-muted,
#searchResults .list-group-item.active small {
    color: #fff !important;
}

/* Chip "Enter": diz o que a tecla faz com o item que está marcado */
#searchResults .pdv-kb-hint {
    display: none;
    margin-left: 0.75rem;
    padding: 0.1rem 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

#searchResults .list-group-item.active .pdv-kb-hint {
    display: inline-block;
}

/* Badge de quantidade */
#quantityBadge {
    animation: pulse 1s infinite;
    font-size: 0.9rem;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* ============================================
   MODAIS
   ============================================ */
.modal-content {
    border-radius: 8px;
    border: none;
}

.modal-header {
    border-radius: 8px 8px 0 0;
    padding: 1rem 1.5rem;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
}

/* ============================================
   LOADING OVERLAY
   ============================================ */
.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.loading-overlay.active {
    display: flex;
}

.spinner-border {
    width: 3rem;
    height: 3rem;
}

/* ============================================
   SCROLLBAR CUSTOMIZADA
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ============================================
   ANIMAÇÕES
   ============================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* ============================================
   STICKY HEADER
   ============================================ */
.sticky-top {
    position: sticky;
    top: 80px;
    z-index: 100;
}

/* ============================================
   PRINT
   ============================================ */
@media print {
    body * {
        visibility: hidden;
    }

    .receipt,
    .receipt * {
        visibility: visible;
    }

    .receipt {
        position: absolute;
        left: 0;
        top: 0;
    }
}

/* ============================================
   RESPONSIVO
   ============================================ */
@media (max-width: 1024px) {
    .caixa-sidebar {
        position: fixed;
        right: -350px;
        top: 0;
        height: 100vh;
        width: 350px;
        background: white;
        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
        overflow-y: auto;
        z-index: 1000;
        transition: right 0.3s ease;
        padding: 1rem;
    }

    .caixa-sidebar.active {
        right: 0;
    }
}

@media (max-width: 992px) {
    .caixa-container {
        flex-direction: column;
        height: calc(100vh - 160px);
    }

    .caixa-main {
        height: 100%;
    }

    .navbar-caixa .btn-nav {
        margin: 0.25rem 0 !important;
    }

    .caixa-topbar {
        display: none;
    }

    .caixa-search {
        padding: 0.6rem 0.8rem;
        border-bottom: 1px solid #e0e0e0;
        flex-shrink: 0;
    }

    .caixa-search-input {
        gap: 0.3rem;
    }

    .caixa-search-input input {
        padding: 0.5rem 0.8rem;
        font-size: 0.95rem;
    }

    .caixa-search-input-group label {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }

    .caixa-items {
        padding: 0.5rem 0.8rem;
    }

    .caixa-items-table {
        font-size: 0.75rem;
    }

    .caixa-items-table th {
        padding: 0.4rem 0.3rem;
        font-size: 0.7rem;
    }

    .caixa-items-table td {
        padding: 0.4rem 0.3rem;
        font-size: 0.7rem;
    }

    .caixa-items-table input {
        padding: 0.2rem 0.3rem;
        font-size: 0.7rem;
    }

    .caixa-items-table th:first-child,
    .caixa-items-table td:first-child {
        display: none;
    }

    .caixa-footer {
        flex-shrink: 0;
        padding: 0.6rem 0.8rem;
        gap: 0.3rem;
    }

    .caixa-footer-total {
        font-size: 2rem;
    }

    .caixa-footer-info {
        font-size: 0.75rem;
    }

    .product-image {
        width: 30px;
        height: 30px;
    }

    .product-cell {
        gap: 0.5rem;
    }
}

@media (max-width: 768px) {
    .sticky-top {
        position: relative;
        top: 0;
    }
}

@media (max-width: 1200px) {
    .caixa-sidebar {
        width: 280px;
    }
}

/* Botão escaner barcode / qrcode */
.btn-scan-camera {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none;
    color: white !important;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-scan-camera:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white !important;
    transform: scale(1.05);
}

/* Campo de senha do PDV: type=text mascarado via CSS pra o navegador NÃO
   tratar como campo de senha (sem oferecer salvar nem autocomplete). */
.pdv-password-masked {
    -webkit-text-security: disc;
    text-security: disc;
    /* Fonte que mantém os "bolinhas" alinhadas se o navegador cair no fallback */
    letter-spacing: 0.15em;
}

/* Sininho de vendas pendentes/pausadas — bem chamativo de propósito:
   precisa puxar o olho do operador pra não deixar venda acumular. */
.pending-bell-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    cursor: pointer;
    animation: bellGlow 1.2s ease-in-out infinite;
}

.pending-bell-wrapper:hover {
    transform: scale(1.06);
    filter: brightness(1.08);
}

.pending-bell-label {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.pending-bell-icon {
    font-size: 1.6rem;
    color: #fff;
    transform-origin: top center;
    animation: bellRing 0.9s ease-in-out infinite;
}

.pending-bell-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    background: #fff;
    color: #dc3545;
    font-size: 0.75rem;
    font-weight: 800;
    min-width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #dc3545;
    animation: badgePulse 0.9s ease-in-out infinite;
}

/* Brilho pulsante ao redor do botão */
@keyframes bellGlow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }

    50% {
        box-shadow: 0 0 14px 6px rgba(220, 53, 69, 0.55);
    }
}

@keyframes bellRing {

    0%,
    100% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(18deg);
    }

    20% {
        transform: rotate(-16deg);
    }

    30% {
        transform: rotate(14deg);
    }

    40% {
        transform: rotate(-12deg);
    }

    50% {
        transform: rotate(8deg);
    }

    60% {
        transform: rotate(-6deg);
    }

    70% {
        transform: rotate(0deg);
    }
}

@keyframes badgePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.35);
    }
}
/* ============================================
   ♿ ACESSIBILIDADE — ESCALA DE FONTE E BARRA DE ATALHOS
   (controles na topbar; estado salvo por usuário)
   ============================================ */

/* Controles na topbar */
.caixa-a11y {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.caixa-a11y-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.18rem;
}

.caixa-a11y-btn {
    background: rgba(255, 255, 255, 0.12);
    color: #ecf0f1;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    padding: 0.32rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: background 0.2s ease, transform 0.2s ease;
}

.caixa-a11y-btn:hover {
    background: rgba(255, 255, 255, 0.24);
    transform: translateY(-1px);
}

.caixa-a11y-btn-plus {
    font-size: 1rem;
}

.caixa-a11y-fs-label {
    min-width: 2rem;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: #bdc3c7;
}

.caixa-a11y-sidebar-toggle .ti {
    font-size: 1.15rem;
}

/* ----- Escala de fonte (variável aplicada via classe no <body>) -----
   Em fs-0 nenhuma regra dispara: o layout fica idêntico ao original. */
body { --cfs: 1; }
body.caixa-fs-1 { --cfs: 1.12; }
body.caixa-fs-2 { --cfs: 1.26; }
body.caixa-fs-3 { --cfs: 1.42; }

body:is(.caixa-fs-1, .caixa-fs-2, .caixa-fs-3) .caixa-topbar-item { font-size: calc(0.95rem * var(--cfs)); }
body:is(.caixa-fs-1, .caixa-fs-2, .caixa-fs-3) .caixa-search-input input { font-size: calc(0.95rem * var(--cfs)); }
body:is(.caixa-fs-1, .caixa-fs-2, .caixa-fs-3) .caixa-search-input-group label { font-size: calc(0.875rem * var(--cfs)); }
body:is(.caixa-fs-1, .caixa-fs-2, .caixa-fs-3) .caixa-items h5 { font-size: calc(0.95rem * var(--cfs)); }
body:is(.caixa-fs-1, .caixa-fs-2, .caixa-fs-3) .caixa-items-table th { font-size: calc(0.875rem * var(--cfs)); }
body:is(.caixa-fs-1, .caixa-fs-2, .caixa-fs-3) .caixa-items-table td { font-size: calc(0.875rem * var(--cfs)); }
body:is(.caixa-fs-1, .caixa-fs-2, .caixa-fs-3) .caixa-items-table input { font-size: calc(0.875rem * var(--cfs)); }
body:is(.caixa-fs-1, .caixa-fs-2, .caixa-fs-3) .caixa-sidebar-btn { font-size: calc(0.875rem * var(--cfs)); }
body:is(.caixa-fs-1, .caixa-fs-2, .caixa-fs-3) .caixa-sidebar-btn .icon { font-size: calc(1.5rem * var(--cfs)); }
body:is(.caixa-fs-1, .caixa-fs-2, .caixa-fs-3) .caixa-sidebar-btn .shortcut { font-size: calc(0.7rem * var(--cfs)); }
body:is(.caixa-fs-1, .caixa-fs-2, .caixa-fs-3) .caixa-footer-total { font-size: calc(2rem * var(--cfs)); }
body:is(.caixa-fs-1, .caixa-fs-2, .caixa-fs-3) .caixa-footer-info { font-size: calc(0.9rem * var(--cfs)); }

/* ----- Modo da barra de atalhos (somente desktop; o off-canvas mobile fica intacto) ----- */
@media (min-width: 1025px) {
    /* Encolhida: só ícones */
    body.caixa-sidebar-icons .caixa-sidebar {
        width: 76px;
    }
    body.caixa-sidebar-icons .caixa-sidebar-btn {
        justify-content: center;
        padding: 0.95rem 0.4rem;
    }
    body.caixa-sidebar-icons .caixa-sidebar-btn span {
        display: none;
    }
    body.caixa-sidebar-icons .caixa-sidebar-btn .icon {
        font-size: calc(1.7rem * var(--cfs));
    }

    /* Oculta: libera toda a largura para o carrinho */
    body.caixa-sidebar-hidden .caixa-sidebar {
        display: none;
    }
}

/* =========================================================================
   MENU DO CELULAR — grade de ícones
   =========================================================================
   O menu de hambúrguer do PDV tinha 19 botões empilhados, cada um com o seu
   gradiente inline: ninguém achava nada com pressa. Aqui ele vira grade de 3
   por linha, agrupada por assunto, com um estilo de bloco só — a cor sobrou
   pras três ações que mexem em dinheiro (pagar, pausar, cancelar).

   Vale só abaixo de lg (992px), que é onde o <li> mobile existe. O desktop
   continua com os botões em linha na navbar.
   ========================================================================= */
@media (max-width: 991.98px) {
    /* Menu comprido não pode empurrar a tela: rola dentro do próprio menu */
    .navbar-caixa .navbar-collapse {
        max-height: calc(100dvh - 130px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pdv-menu {
        padding-bottom: 0.75rem;
    }

    .pdv-menu-sec {
        font-size: calc(0.68rem * var(--cfs, 1));
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.65);
        padding: 0.9rem 0.25rem 0.5rem;
    }

    .pdv-menu-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .pdv-menu-grid-duo {
        grid-template-columns: repeat(2, 1fr);
    }

    .navbar-caixa .pdv-tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        /* alvo de toque folgado: a mão que opera o caixa está ocupada */
        min-height: 82px;
        padding: 0.7rem 0.3rem;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.16);
        color: #fff;
        font-size: calc(0.72rem * var(--cfs, 1));
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        cursor: pointer;
        transition: transform 0.12s ease, background 0.12s ease;
    }

    .navbar-caixa .pdv-tile i {
        font-size: calc(1.45rem * var(--cfs, 1));
        line-height: 1;
    }

    .navbar-caixa .pdv-tile:active {
        transform: scale(0.96);
        background: rgba(255, 255, 255, 0.22);
    }

    .navbar-caixa .pdv-tile:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 2px;
    }

    /* As únicas cores do menu: as ações que mexem no dinheiro da venda */
    .navbar-caixa .pdv-tile-pay {
        background: #27ae60;
        border-color: #1e8449;
    }

    .navbar-caixa .pdv-tile-warn {
        background: #f39c12;
        border-color: #d68910;
    }

    .navbar-caixa .pdv-tile-danger {
        background: #e74c3c;
        border-color: #c0392b;
    }

    .navbar-caixa .pdv-tile-comanda {
        background: #f4511e;
        border-color: #d84315;
    }

    /* Sair fica escuro: destaca sem competir com as ações de venda */
    .navbar-caixa .pdv-tile-out {
        background: rgba(0, 0, 0, 0.32);
        border-color: rgba(255, 255, 255, 0.2);
    }

    @media (prefers-reduced-motion: reduce) {
        .navbar-caixa .pdv-tile {
            transition: none;
        }
        .navbar-caixa .pdv-tile:active {
            transform: none;
        }
    }
}