/* ============================================================= Beleza ERP — folha de estilo principal Identidade: futurista em branco e rosa. Cartão branco sobre página rosa clara, rosa vibrante (#CE2A74) nas ações e violeta (#A62FCC) fechando o gradiente. O rosa claro (#F9C6DD) é o realce, sempre com texto escuro em cima. O tema claro é o padrão; o escuro é a mesma paleta em noite quase preta, onde o rosa vira brilho. Os tokens são neutros de propósito (--marca, --apoio): trocar a cor da marca é trocar o valor aqui, sem renomear nada. Controlado por [data-tema] no . ============================================================= */ :root { /* --- marca --- */ --marca: #CE2A74; --marca-clara: #E86FA6; --marca-escura: #A81658; /* tom legível como texto sobre fundo claro */ --marca-suave: #FCEAF3; /* realce de fundo */ /* o violeta só existe como destino do gradiente: é a passagem rosa -> violeta que dá a leitura futurista. Também recebe texto branco, então precisa passar no contraste sozinho. */ --marca-viva: #A62FCC; /* texto escrito EM CIMA da marca. Fixo em branco só funciona enquanto a marca é escura; quando o admin escolhe uma cor clara, o tema calcula o oposto e grava aqui. */ --marca-texto: #FFFFFF; --apoio: #F9C6DD; /* rosa claro: fundo de realce, texto escuro */ --apoio-escuro: #9C3A6E; /* rosa legível como texto sobre fundo claro */ /* gradiente da marca: rosa -> violeta nas ações, rosa -> rosa claro nos realces */ --gradiente-marca: linear-gradient(135deg, var(--marca) 0%, var(--marca-viva) 100%); --gradiente-realce: linear-gradient(90deg, var(--marca) 0%, var(--apoio) 100%); /* realces: anéis discretos, sem brilho neon */ --glow-marca: 0 0 0 3px rgba(206,42,116,.18); --glow-apoio: 0 0 0 3px rgba(249,198,221,.30); --glow-suave: 0 0 0 3px rgba(206,42,116,.10); /* --- semânticas, em versões dessaturadas --- */ --sucesso: #166B56; --alerta: #7E5619; --erro: #A83449; --info: #5B4BD2; /* --- superfícies (tema claro, o padrão) --- Quatro camadas, do mais escuro para o mais claro: página #FBEAF2 sup-2 #F9E2EC sidebar #FDF2F7 cartão e topo #FFFFFF O cartão é branco de propósito: é ele que separa o conteúdo do rosa ao redor. As outras três camadas são rosa claro em graus diferentes, e é essa escada — não sombra forte — que dá o relevo. */ --fundo: #FBEAF2; /* rosa claro */ --superficie: #FFFFFF; /* branco: o cartão é a camada mais clara */ --superficie-2: #F9E2EC; --borda: #F2DCE8; --borda-forte: #E0BACE; /* quase preto com um toque de ameixa, para não brigar com o rosa */ --texto: #1E1620; /* os secundários são escuros de propósito: texto apagado é o que mais tira legibilidade numa tela cheia de dado. --texto-2 passa de 8:1 e --texto-3 de 5:1 sobre o cartão, então servem até em 12px */ --texto-2: #4A3B48; /* o terciário precisa aguentar o fundo de --superficie-2, não só o do cartão */ --texto-3: #6B5A67; --sidebar-fundo: #FDF2F7; --sidebar-texto: #443843; --sidebar-hover: rgba(206,42,116,.08); --sidebar-ativo: rgba(206,42,116,.13); --sidebar-borda: #F2DCE8; --sombra-1: 0 1px 2px rgba(30,22,32,.05), 0 1px 3px rgba(30,22,32,.04); --sombra-2: 0 4px 14px rgba(30,22,32,.08); --sombra-3: 0 14px 34px rgba(30,22,32,.12); /* escala global de texto, controlada pelo painel de acessibilidade */ --escala-fonte: 1; --raio: 12px; --raio-sm: 8px; --raio-lg: 18px; --largura-sidebar: 252px; --altura-topo: 60px; --fonte: "Space Grotesk", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --fonte-titulo: "Space Grotesk", "Segoe UI", system-ui, sans-serif; color-scheme: light; } /* tema escuro: noite quase preta, onde o rosa vira brilho */ [data-tema="dark"] { --marca: #FF8FC4; --marca-clara: #FFB8D9; --marca-escura: #E86FA6; /* no escuro, o tom "escuro" é o mais calmo */ --marca-suave: #2A1220; --marca-viva: #D46BFF; --marca-texto: #200A14; --apoio: #F9C6DD; --apoio-escuro: #F0A8C9; --sucesso: #4FC0A0; --alerta: #D3A162; --erro: #E5808F; --info: #9A8CF0; --fundo: #12090F; --superficie: #1B1017; --superficie-2: #261722; --borda: #35202D; --borda-forte: #4A2E3E; --texto: #F3E8EE; --texto-2: #C3AFBC; --texto-3: #9C8794; --sidebar-fundo: #0E060B; --sidebar-texto: #D5C2CD; --sidebar-hover: rgba(255,143,196,.10); --sidebar-ativo: rgba(255,143,196,.16); --sidebar-borda: rgba(255,143,196,.14); --glow-marca: 0 0 0 3px rgba(255,143,196,.22); --glow-apoio: 0 0 0 3px rgba(249,198,221,.22); --glow-suave: 0 0 0 3px rgba(255,143,196,.12); --sombra-1: 0 1px 2px rgba(0,0,0,.30); --sombra-2: 0 4px 16px rgba(0,0,0,.34); --sombra-3: 0 16px 40px rgba(0,0,0,.42); color-scheme: dark; } /* ============================================================= Ponte com o Bootstrap ------------------------------------------------------------- Componente do Bootstrap que a gente não estilizou pinta branco sozinho — foi o que acontecia com .list-group-item nas buscas de cliente. Em vez de caçar um por um, as variáveis dele passam a apontar para os nossos tokens. Como os tokens já mudam com o tema, isto vale para o claro e para o escuro de uma vez. ============================================================= */ :root, [data-tema="dark"] { --bs-body-bg: var(--superficie); --bs-body-color: var(--texto); --bs-emphasis-color: var(--texto); --bs-secondary-color: var(--texto-2); --bs-secondary-bg: var(--superficie-2); --bs-tertiary-bg: var(--superficie-2); --bs-border-color: var(--borda); } /* o Bootstrap pinta a lista com --bs-body-bg; o hover dela era branco */ .list-group-item { background-color: var(--superficie); border-color: var(--borda); color: var(--texto); } .list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--marca-suave); color: var(--marca-escura); } /* ============================================================= Base ============================================================= */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--fonte); font-size: calc(15px * var(--escala-fonte, 1)); line-height: 1.5; color: var(--texto); -webkit-font-smoothing: antialiased; /* o fundo é a cor sólida MAIS uma lavagem da marca: azul no alto à esquerda, rosa embaixo à direita. `fixed` mantém a lavagem parada enquanto a página rola, senão ela repetiria a cada tela de altura. Quem sobrescrever isto precisa usar `background-color`, não o atalho `background` — o atalho apaga a imagem. */ background-color: var(--fundo); background-image: radial-gradient(900px 520px at 10% -10%, rgba(206,42,116,.10), transparent 62%), radial-gradient(760px 460px at 95% 106%, rgba(166,47,204,.10), transparent 60%); background-attachment: fixed; background-repeat: no-repeat; } [data-tema="dark"] body { background-image: radial-gradient(900px 520px at 10% -10%, rgba(255,143,196,.14), transparent 62%), radial-gradient(760px 460px at 95% 106%, rgba(212,107,255,.12), transparent 60%); } a { color: var(--marca-escura); text-decoration: none; transition: color .14s; } a:hover { color: var(--marca); } [data-tema="dark"] a { color: var(--marca); } [data-tema="dark"] a:hover { color: var(--marca-clara); } h1, h2, h3, h4, h5 { font-family: var(--fonte-titulo); color: var(--texto); font-weight: 700; letter-spacing: -.3px; line-height: 1.2; } /* NÃO devolva um z-index para .app. Ele já teve `z-index: 1`, e isso quebrava TODOS os modais do sistema. O motivo: z-index em elemento posicionado cria um contexto de empilhamento, e os modais ficam dentro do .app. Só que o Bootstrap injeta o .modal-backdrop direto no , fora do .app, com z-index 1050 — que passava a valer contra o contexto inteiro, não contra o modal. O fundo escuro era pintado por cima do modal. O sintoma era traiçoeiro: o modal aparecia normalmente e o teclado funcionava (a ordem de foco não olha a pintura), mas todo clique caía no backdrop, que ainda fechava o modal. Sem z-index, .app continua acima da lavagem do fundo — fundo de elemento é sempre pintado atrás do conteúdo, não precisava de camada nenhuma para isso. O .topo tem o z-index dele mais abaixo. */ .app { position: relative; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 8px; border: 2px solid var(--fundo); } ::-webkit-scrollbar-thumb:hover { background: var(--marca-clara); } /* ============================================================= Layout: sidebar + conteúdo ============================================================= */ .app { display: flex; min-height: 100vh; } .sidebar { width: var(--largura-sidebar); flex: 0 0 var(--largura-sidebar); background: var(--sidebar-fundo); color: var(--sidebar-texto); border-right: 1px solid var(--sidebar-borda); display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 1040; transition: transform .22s ease; } .sidebar__marca { height: var(--altura-topo); display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--sidebar-borda); flex: 0 0 auto; /* a marca é um : sem isto herdaria a cor de link */ color: var(--texto); } .sidebar__marca:hover { color: var(--marca-escura); } .sidebar__marca img { width: 32px; height: 32px; } .sidebar__marca span { font-family: var(--fonte-titulo); font-size: calc(19px * var(--escala-fonte, 1)); font-weight: 700; letter-spacing: .3px; } .sidebar__marca small { display: block; font-family: var(--fonte); font-size: calc(10px * var(--escala-fonte, 1)); font-weight: 600; letter-spacing: 2.2px; color: var(--marca-escura); text-transform: uppercase; } .sidebar__nav { flex: 1 1 auto; overflow-y: auto; padding: 10px 10px 20px; } .sidebar__grupo { font-size: calc(10.5px * var(--escala-fonte, 1)); letter-spacing: 1.5px; text-transform: uppercase; color: var(--texto-3); padding: 16px 12px 6px; font-weight: 700; } .sidebar__item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--raio-sm); color: var(--sidebar-texto); font-size: calc(14px * var(--escala-fonte, 1)); font-weight: 500; margin-bottom: 1px; transition: background .14s ease, color .14s ease; position: relative; } .sidebar__item:hover { background: var(--sidebar-hover); color: var(--marca-escura); } .sidebar__item.ativo { background: var(--sidebar-ativo); color: var(--marca-escura); font-weight: 600; } /* marcador do item ativo: o filete faz a transição azul -> rosa, que é onde a cor de realce aparece na navegação */ .sidebar__item.ativo::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; background-color: var(--marca); background-image: linear-gradient(180deg, var(--marca) 0%, var(--apoio) 100%); border-radius: 0 3px 3px 0; } .sidebar__item.ativo i { color: var(--marca); } .sidebar__item i { font-size: calc(16px * var(--escala-fonte, 1)); width: 18px; text-align: center; opacity: .9; } .sidebar__item .badge { margin-left: auto; } .sidebar__rodape { flex: 0 0 auto; padding: 12px 14px; border-top: 1px solid var(--sidebar-borda); font-size: calc(11.5px * var(--escala-fonte, 1)); color: var(--texto-3); } .conteudo { flex: 1 1 auto; margin-left: var(--largura-sidebar); min-width: 0; display: flex; flex-direction: column; } /* ============================================================= Barra superior ============================================================= */ .topo { height: var(--altura-topo); background: var(--superficie); border-bottom: 1px solid var(--borda); display: flex; align-items: center; gap: 12px; padding: 0 20px; position: sticky; top: 0; z-index: 1030; } .topo__titulo { font-family: var(--fonte-titulo); font-size: calc(19px * var(--escala-fonte, 1)); font-weight: 700; margin: 0; } .topo__acoes { margin-left: auto; display: flex; align-items: center; gap: 6px; } .botao-icone { width: 36px; height: 36px; border: 0; background: transparent; border-radius: 50%; color: var(--texto-2); display: inline-flex; align-items: center; justify-content: center; font-size: calc(16px * var(--escala-fonte, 1)); position: relative; transition: background .14s, color .14s; } .botao-icone:hover { background: var(--marca-suave); color: var(--marca-escura); } .botao-icone .ponto { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--erro); border: 2px solid var(--superficie); } .avatar { width: 34px; height: 34px; border-radius: 50%; background-color: var(--marca); background-image: var(--gradiente-marca); color: var(--marca-texto); display: inline-flex; align-items: center; justify-content: center; font-size: calc(13px * var(--escala-fonte, 1)); font-weight: 700; flex: 0 0 auto; } .avatar--sm { width: 28px; height: 28px; font-size: calc(11.5px * var(--escala-fonte, 1)); } .avatar--lg { width: 64px; height: 64px; font-size: calc(22px * var(--escala-fonte, 1)); } .main { padding: 20px; flex: 1 1 auto; } /* ============================================================= Cartões ============================================================= */ .cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-1); position: relative; } .cartao__cabecalho { padding: 14px 18px; border-bottom: 1px solid var(--borda); display: flex; align-items: center; gap: 10px; } .cartao__titulo { font-family: var(--fonte-titulo); font-size: calc(16px * var(--escala-fonte, 1)); margin: 0; font-weight: 700; } .cartao__corpo { padding: 18px; } .cartao__rodape { padding: 12px 18px; border-top: 1px solid var(--borda); background: var(--superficie-2); border-radius: 0 0 var(--raio) var(--raio); } /* Barra de páginas das listagens */ .paginacao { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .paginacao__conta { color: var(--texto-2); font-size: calc(12.5px * var(--escala-fonte, 1)); white-space: nowrap; } .paginacao .page-link { color: var(--texto); background: var(--superficie); border-color: var(--borda-forte); } .paginacao .page-link:hover { color: var(--marca-escura); background: var(--marca-suave); border-color: var(--marca-clara); } .paginacao .page-item.active .page-link { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); } .paginacao .page-item.disabled .page-link { color: var(--texto-3); background: var(--superficie-2); border-color: var(--borda); } @media (max-width: 575.98px) { /* no celular a contagem some para a barra caber numa linha só */ .paginacao__conta { display: none; } .paginacao nav { margin-left: 0 !important; width: 100%; } .paginacao .pagination { justify-content: center; } } /* --- indicadores do dashboard --- */ .indicador { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra-1); display: flex; align-items: flex-start; gap: 14px; height: 100%; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .indicador:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: var(--marca-clara); } .indicador__icone { width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: calc(19px * var(--escala-fonte, 1)); flex: 0 0 auto; background: var(--marca-suave); color: var(--marca-escura); border: 1px solid rgba(206,42,116,.16); } .indicador__icone--marca { background: rgba(206,42,116,.12); color: var(--marca-escura); } .indicador__icone--sucesso { background: rgba(22,107,86,.12); color: var(--sucesso); } .indicador__icone--erro { background: rgba(168,52,73,.12); color: var(--erro); } .indicador__icone--info { background: rgba(91,75,210,.12); color: var(--info); } [data-tema="dark"] .indicador__icone--marca { color: var(--marca); } .indicador__rotulo { font-size: calc(12px * var(--escala-fonte, 1)); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; color: var(--texto-2); margin: 0 0 4px; } .indicador__valor { font-family: var(--fonte-titulo); font-size: calc(27px * var(--escala-fonte, 1)); font-weight: 700; margin: 0; line-height: 1.1; } .indicador__nota { font-size: calc(12.5px * var(--escala-fonte, 1)); color: var(--texto-2); margin: 3px 0 0; } /* ============================================================= Botões ============================================================= */ .btn { border-radius: var(--raio-sm); font-size: calc(14px * var(--escala-fonte, 1)); font-weight: 600; letter-spacing: .2px; transition: background .16s, box-shadow .16s, border-color .16s, transform .16s; } /* ação principal: gradiente azul -> ciano com texto branco. O `background-color` vem antes do gradiente de propósito: é a cor que sobra se o gradiente não for aplicado, e mantém o botão legível. */ .btn-primary, .btn-primario { background-color: var(--marca); background-image: var(--gradiente-marca); border-color: var(--marca); color: var(--marca-texto); } .btn-primary:hover, .btn-primario:hover, .btn-primary:focus, .btn-primario:focus { background-color: var(--marca-escura); background-image: none; border-color: var(--marca-escura); color: var(--marca-texto); box-shadow: var(--glow-marca); transform: translateY(-1px); } [data-tema="dark"] .btn-primary, [data-tema="dark"] .btn-primario { color: #08131F; } [data-tema="dark"] .btn-primary:hover, [data-tema="dark"] .btn-primario:hover { background: var(--marca-clara); border-color: var(--marca-clara); color: #08131F; } /* ação secundária: contorno suave */ .btn-outline-primary { color: var(--marca-escura); border-color: var(--marca-clara); background: transparent; } .btn-outline-primary:hover { background: var(--marca-suave); border-color: var(--marca); color: var(--marca-escura); box-shadow: var(--glow-suave); } [data-tema="dark"] .btn-outline-primary { color: var(--marca); } /* ação de apoio em areia, para separar do fluxo principal */ .btn-apoio { background: transparent; color: var(--apoio-escuro); border: 1px solid rgba(249,198,221,.45); } .btn-apoio:hover { background: rgba(249,198,221,.10); border-color: var(--apoio); color: var(--apoio-escuro); box-shadow: var(--glow-apoio); } [data-tema="dark"] .btn-apoio { color: var(--apoio); } .btn-marca { background-color: var(--marca); background-image: var(--gradiente-marca); border-color: var(--marca); color: var(--marca-texto); } .btn-marca:hover { background-color: var(--marca-escura); background-image: none; border-color: var(--marca-escura); color: var(--marca-texto); box-shadow: var(--glow-marca); } [data-tema="dark"] .btn-marca { color: #08131F; } .btn-suave { background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto); } .btn-suave:hover { background: var(--marca-suave); border-color: var(--marca-clara); color: var(--marca-escura); box-shadow: var(--glow-suave); } /* ============================================================= Formulários ============================================================= */ .form-label { font-size: calc(13px * var(--escala-fonte, 1)); font-weight: 600; color: var(--texto-2); margin-bottom: 5px; } .form-control, .form-select { background: var(--superficie); border: 1px solid var(--borda-forte); color: var(--texto); border-radius: var(--raio-sm); font-size: calc(14.5px * var(--escala-fonte, 1)); padding: .5rem .72rem; } .form-control:focus, .form-select:focus { background: var(--superficie); border-color: var(--marca-clara); color: var(--texto); box-shadow: var(--glow-marca); } .form-control::placeholder { color: var(--texto-3); } .form-check-input:checked { background-color: var(--marca); border-color: var(--marca); } .form-check-input:focus { box-shadow: var(--glow-suave); } .form-text { color: var(--texto-3); font-size: calc(12px * var(--escala-fonte, 1)); } .secao-form { border-top: 1px solid var(--borda); margin-top: 18px; padding-top: 16px; } .secao-form:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; } .secao-form__titulo { font-size: calc(12px * var(--escala-fonte, 1)); text-transform: uppercase; letter-spacing: 1px; color: var(--marca-escura); font-weight: 700; margin-bottom: 12px; } [data-tema="dark"] .secao-form__titulo { color: var(--marca); } /* ============================================================= Tabelas ============================================================= */ .tabela-wrap { overflow-x: auto; } .table { --bs-table-bg: transparent; color: var(--texto); font-size: calc(14.5px * var(--escala-fonte, 1)); margin: 0; } .table > thead > tr > th { background: var(--superficie-2); color: var(--texto-2); font-size: calc(11.5px * var(--escala-fonte, 1)); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; border-bottom: 1px solid var(--borda); padding: 10px 14px; white-space: nowrap; } .table > tbody > tr > td { border-bottom: 1px solid var(--borda); padding: 11px 14px; vertical-align: middle; color: var(--texto); } .table > tbody > tr:hover > td { background: var(--marca-suave); } .table .acoes { white-space: nowrap; text-align: right; } /* ============================================================= Distintivos e estados ============================================================= */ .badge { font-weight: 700; font-size: calc(11px * var(--escala-fonte, 1)); letter-spacing: .3px; padding: .34em .62em; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 20px; font-size: calc(11.5px * var(--escala-fonte, 1)); font-weight: 700; background: var(--marca-suave); color: var(--marca-escura); border: 1px solid transparent; } .chip--marca { background: rgba(206,42,116,.13); color: var(--marca-escura); } .chip--sucesso { background: rgba(22,107,86,.13); color: var(--sucesso); } .chip--erro { background: rgba(168,52,73,.13); color: var(--erro); } .chip--info { background: rgba(91,75,210,.13); color: var(--info); } .chip--alerta { background: rgba(126,86,25,.14); color: var(--alerta); } .chip--neutro { background: var(--superficie-2); color: var(--texto-2); } [data-tema="dark"] .chip--marca { color: var(--marca); } .ponto-status { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; } /* ============================================================= Agenda ============================================================= */ .agenda-grade { display: grid; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: var(--superficie); min-width: 720px; } .agenda-coluna { border-left: 1px solid var(--borda); position: relative; } .agenda-coluna:first-child { border-left: 0; } .agenda-cabecalho { padding: 10px 12px; background: var(--superficie-2); border-bottom: 1px solid var(--borda); font-weight: 700; font-size: calc(13.5px * var(--escala-fonte, 1)); position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; } .agenda-horas { background: var(--superficie-2); } .agenda-hora { height: 44px; border-bottom: 1px solid var(--borda); font-size: calc(11.5px * var(--escala-fonte, 1)); font-weight: 600; color: var(--texto-3); padding: 3px 8px; text-align: right; } .agenda-slot { height: 44px; border-bottom: 1px solid var(--borda); position: relative; transition: background .12s; } .agenda-slot:hover { background: var(--marca-suave); cursor: pointer; } .agenda-slot--bloqueado { background: repeating-linear-gradient(45deg, var(--superficie-2), var(--superficie-2) 6px, transparent 6px, transparent 12px); cursor: not-allowed; } .agenda-evento { position: absolute; left: 4px; right: 4px; border-radius: var(--raio-sm); padding: 5px 8px; font-size: calc(12.5px * var(--escala-fonte, 1)); line-height: 1.3; overflow: hidden; border-left: 3px solid var(--marca); background: var(--marca-suave); color: var(--texto); box-shadow: var(--sombra-1); cursor: pointer; z-index: 1; } .agenda-evento:hover { box-shadow: var(--sombra-2); z-index: 3; } .agenda-evento strong { display: block; font-size: calc(13px * var(--escala-fonte, 1)); font-weight: 700; } .agenda-evento small { color: var(--texto-2); } /* ============================================================= PDV ============================================================= */ .pdv { display: grid; grid-template-columns: 1fr 380px; gap: 16px; align-items: start; } .pdv__catalogo { min-width: 0; } .pdv__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .pdv__item { border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 11px 12px; background: var(--superficie); cursor: pointer; text-align: left; transition: border-color .14s, transform .14s, box-shadow .14s; } .pdv__item:hover { border-color: var(--marca-clara); transform: translateY(-2px); box-shadow: var(--sombra-2); } .pdv__item h6 { margin: 0 0 3px; font-size: calc(13.5px * var(--escala-fonte, 1)); font-family: var(--fonte); font-weight: 700; } .pdv__item .preco { color: var(--marca-escura); font-weight: 700; font-size: calc(15px * var(--escala-fonte, 1)); } [data-tema="dark"] .pdv__item .preco { color: var(--marca); } .pdv__cupom { position: sticky; top: calc(var(--altura-topo) + 20px); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-2); display: flex; flex-direction: column; max-height: calc(100vh - var(--altura-topo) - 40px); /* Janela baixa: o cupom inteiro rola. Sem isto o flex espremia a lista de itens até sobrar uma fatia de linha, e o operador terminava a venda sem conseguir ver o que estava vendendo. */ overflow-y: auto; } /* min-height é o que impede o esmagamento: overflow diferente de visible faz o min-height automático virar zero, e aí a lista cede todo o espaço para o bloco de pagamento, que é alto. */ .pdv__lista { overflow-y: auto; flex: 1 1 auto; min-height: 150px; } .pdv__linha { display: flex; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--borda); font-size: calc(14px * var(--escala-fonte, 1)); } .pdv__total { flex: 0 0 auto; padding: 14px; border-top: 2px solid var(--borda); background: var(--superficie-2); border-radius: 0 0 var(--raio) var(--raio); } .pdv__total .valor { font-family: var(--fonte-titulo); font-size: calc(30px * var(--escala-fonte, 1)); font-weight: 700; color: var(--marca-escura); } [data-tema="dark"] .pdv__total .valor { color: var(--marca); } /* ============================================================= Utilitários ============================================================= */ .texto-mudo { color: var(--texto-2) !important; } .texto-fraco { color: var(--texto-3) !important; } .texto-destaque{ color: var(--marca-escura) !important; } .texto-apoio { color: var(--apoio-escuro) !important; } .texto-marca { color: var(--marca-escura) !important; } [data-tema="dark"] .texto-destaque, [data-tema="dark"] .texto-marca { color: var(--marca) !important; } [data-tema="dark"] .texto-apoio { color: var(--apoio) !important; } .texto-sucesso{ color: var(--sucesso) !important; } .texto-erro { color: var(--erro) !important; } .fundo-suave { background: var(--superficie-2) !important; } .vazio { text-align: center; padding: 44px 20px; color: var(--texto-3); } .vazio i { font-size: calc(40px * var(--escala-fonte, 1)); opacity: .35; display: block; margin-bottom: 12px; } .barra-progresso { height: 7px; border-radius: 4px; background: var(--superficie-2); overflow: hidden; } .barra-progresso__valor { height: 100%; border-radius: 4px; background-color: var(--marca); background-image: var(--gradiente-marca); } .barra-progresso__valor--meta { background-image: var(--gradiente-realce); } .linha-tempo { position: relative; padding-left: 26px; } .linha-tempo::before { content: ""; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: var(--borda); } .linha-tempo__item { position: relative; padding-bottom: 18px; } .linha-tempo__item::before { content: ""; position: absolute; left: -23px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--marca); border: 2px solid var(--superficie); } .dropdown-menu { background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra-3); border-radius: var(--raio); font-size: calc(14px * var(--escala-fonte, 1)); } .dropdown-item { color: var(--texto); border-radius: 6px; } .dropdown-item:hover { background: var(--marca-suave); color: var(--marca-escura); } [data-tema="dark"] .dropdown-item:hover { color: var(--marca); } .dropdown-divider { border-color: var(--borda); } .modal-content { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg); color: var(--texto); } .modal-header, .modal-footer { border-color: var(--borda); } .modal-title { font-family: var(--fonte-titulo); font-size: calc(18px * var(--escala-fonte, 1)); font-weight: 700; } .nav-tabs { border-bottom: 1px solid var(--borda); gap: 2px; } .nav-tabs .nav-link { color: var(--texto-2); border: 0; border-bottom: 2px solid transparent; font-size: calc(14.5px * var(--escala-fonte, 1)); font-weight: 700; padding: 9px 16px; } .nav-tabs .nav-link:hover { color: var(--marca-escura); border-bottom-color: var(--marca-clara); } .nav-tabs .nav-link.active { color: var(--marca-escura); background: transparent; border-bottom-color: var(--marca); } [data-tema="dark"] .nav-tabs .nav-link:hover, [data-tema="dark"] .nav-tabs .nav-link.active { color: var(--marca); } .alert { border-radius: var(--raio); border: 1px solid transparent; font-size: calc(14.5px * var(--escala-fonte, 1)); } .alert-success { background: rgba(22,107,86,.11); color: var(--sucesso); border-color: rgba(22,107,86,.24); } .alert-danger { background: rgba(168,52,73,.11); color: var(--erro); border-color: rgba(168,52,73,.24); } .alert-warning { background: rgba(126,86,25,.12); color: var(--alerta); border-color: rgba(126,86,25,.26); } .alert-info { background: rgba(91,75,210,.11); color: var(--info); border-color: rgba(91,75,210,.24); } .pagination { --bs-pagination-font-size: calc(14px * var(--escala-fonte, 1)); } .page-link { color: var(--marca-escura); border-color: var(--borda); background: var(--superficie); } .page-item.active .page-link { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); } [data-tema="dark"] .page-link { color: var(--marca); } [data-tema="dark"] .page-item.active .page-link { color: #08131F; } /* ============================================================= Responsivo ------------------------------------------------------------- Regras que valem em qualquer largura vêm primeiro; depois os cortes em 991.98 (some a barra lateral), 767.98 (uma coluna de verdade) e 575.98 (celular estreito). ============================================================= */ .sombra-mobile { display: none; } /* nada de mídia estourando a largura da tela e criando rolagem lateral */ img, svg, video, canvas { max-width: 100%; } /* a tabela rola dentro da própria caixa, não empurra a página. overscroll-behavior evita que o gesto vaze para a navegação do celular quando a rolagem chega ao fim da tabela. */ .tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* menu suspenso mais largo que a tela vira rolagem lateral */ .dropdown-menu { max-width: calc(100vw - 20px); } @media (max-width: 991.98px) { .sidebar { transform: translateX(-100%); } .sidebar.aberta { transform: translateX(0); box-shadow: var(--sombra-3); } .conteudo { margin-left: 0; } .sombra-mobile.ativa { display: block; position: fixed; inset: 0; background: rgba(30,22,32,.38); z-index: 1035; } .pdv { grid-template-columns: 1fr; } .pdv__cupom { position: static; max-height: none; } /* `fixed` no fundo custa caro em celular e trava a rolagem no iOS */ body { background-attachment: scroll; } } @media (max-width: 767.98px) { .main { padding: 16px; } /* o título espreme os botões da direita; ele que trunque */ .topo { gap: 8px; } .topo__titulo { font-size: calc(16.5px * var(--escala-fonte, 1)); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topo__acoes { gap: 2px; } /* campo abaixo de 16px faz o iOS dar zoom sozinho ao focar */ .form-control, .form-select, textarea.form-control { font-size: calc(16px * var(--escala-fonte, 1)); } .indicador { padding: 14px; gap: 12px; } .indicador__icone { width: 38px; height: 38px; font-size: calc(17px * var(--escala-fonte, 1)); } .cartao__cabecalho { padding: 12px 14px; } .cartao__rodape { padding: 12px 14px; } /* a agenda continua rolando na horizontal, mas ocupa menos altura */ .agenda-hora, .agenda-slot { height: 40px; } } @media (max-width: 575.98px) { .main { padding: 12px; } .topo { padding: 0 12px; } .cartao__corpo { padding: 14px; } .indicador__valor { font-size: calc(23px * var(--escala-fonte, 1)); } /* linha de ações no fim da tabela costuma ser o que estoura */ .table > thead > tr > th, .table > tbody > tr > td { padding: 10px 11px; } /* botão isolado ocupa a largura toda em vez de ficar perdido */ .cartao__rodape .btn { width: 100%; } .cartao__rodape .btn + .btn { margin-top: 8px; } } /* Em tela sensível ao toque o alvo cresce, independente da largura: 36px é confortável com o ponteiro do mouse, não com o dedo. */ @media (pointer: coarse) { .botao-icone { width: 42px; height: 42px; } .sidebar__item { padding: 11px 12px; } .dropdown-item { padding-top: 9px; padding-bottom: 9px; } .nav-tabs .nav-link { padding: 11px 16px; } .table .acoes .botao-icone { width: 38px; height: 38px; } } /* respeita quem pediu menos animação no sistema operacional */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ============================================================= Acessibilidade ------------------------------------------------------------- Painel fixo na lateral esquerda. As opções viram atributos no (data-contraste, data-links, data-espaco) e a escala de fonte vira a variável --escala-fonte, que todo font-size do sistema multiplica. Por isso o ajuste pega tudo de uma vez, em vez de precisar de regra por componente. ============================================================= */ /* pular para o conteúdo: primeiro foco da página, só aparece no teclado */ .pular-conteudo { position: fixed; top: 8px; left: 8px; z-index: 2000; transform: translateY(-200%); background: var(--marca); color: var(--marca-texto); padding: 10px 16px; border-radius: var(--raio-sm); font-weight: 700; text-decoration: none; transition: transform .16s; } .pular-conteudo:focus { transform: translateY(0); color: var(--marca-texto); box-shadow: var(--sombra-3); } /* Botão do canto, para as páginas que são só um cartão centralizado e não têm barra onde encaixá-lo. Fica no alto à direita — o mesmo lugar em que ele está nas telas com barra. */ .a11y-canto { position: fixed; top: 12px; right: 12px; z-index: 1044; /* abaixo do .modal-backdrop do Bootstrap (1050) */ width: 38px; height: 38px; border: 1px solid var(--borda-forte); border-radius: 50%; background: var(--superficie); color: var(--marca-escura); font-size: calc(18px * var(--escala-fonte, 1)); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--sombra-2); transition: background .14s, border-color .14s; } .a11y-canto:hover { background: var(--marca-suave); border-color: var(--marca-clara); } .a11y-canto:focus-visible { outline: 3px solid var(--texto); outline-offset: 2px; } .a11y-painel { z-index: 1045; /* logo acima do botão, ainda abaixo do backdrop */ width: min(290px, calc(100vw - 24px)); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-3); padding: 16px; } .a11y-painel[hidden] { display: none; } .a11y-painel h2 { font-size: calc(15px * var(--escala-fonte, 1)); margin: 0 0 2px; display: flex; align-items: center; gap: 8px; } .a11y-painel p { font-size: calc(12px * var(--escala-fonte, 1)); color: var(--texto-2); margin: 0 0 14px; } .a11y-grupo { margin-bottom: 14px; } .a11y-grupo__titulo { font-size: calc(11px * var(--escala-fonte, 1)); text-transform: uppercase; letter-spacing: 1.2px; color: var(--texto-3); font-weight: 700; margin-bottom: 7px; } .a11y-fontes { display: flex; gap: 6px; } .a11y-opcao { flex: 1 1 0; border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto); border-radius: var(--raio-sm); padding: 8px 6px; font-weight: 700; font-size: calc(13px * var(--escala-fonte, 1)); } .a11y-opcao:hover { border-color: var(--marca-clara); } .a11y-opcao[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); } .a11y-interruptor { display: flex; align-items: center; gap: 9px; width: 100%; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); border-radius: var(--raio-sm); padding: 9px 11px; margin-bottom: 6px; text-align: left; font-size: calc(13.5px * var(--escala-fonte, 1)); } .a11y-interruptor:hover { border-color: var(--marca-clara); } .a11y-interruptor i:first-child { color: var(--marca-escura); width: 18px; } .a11y-interruptor .estado { margin-left: auto; font-size: calc(11px * var(--escala-fonte, 1)); color: var(--texto-3); font-weight: 700; text-transform: uppercase; } .a11y-interruptor[aria-pressed="true"] { border-color: var(--marca); background: var(--marca-suave); } .a11y-interruptor[aria-pressed="true"] .estado { color: var(--marca-escura); } .a11y-painel .a11y-restaurar { width: 100%; border: 0; background: transparent; color: var(--texto-2); font-size: calc(12.5px * var(--escala-fonte, 1)); padding: 6px; text-decoration: underline; } /* Variante da barra superior: o botão é um ícone como os outros e o painel desce ancorado nele, igual ao menu de notificações. */ .a11y-topo { position: relative; } .a11y-painel--topo { position: absolute; top: calc(100% + 8px); right: 0; } /* Variante do canto: preso à janela, logo abaixo do botão do canto. Fixed, e não absolute, porque o cartão dessas páginas recorta o que passa da borda (overflow: hidden). */ .a11y-painel--canto { position: fixed; top: 58px; right: 12px; } /* ---------- VLibras ---------- O plugin se ancora sozinho no meio da lateral direita. No PDV isso cai bem em cima do cupom, que é justamente a coluna da direita — o botão cobria o valor total da venda. Movido para o canto inferior esquerdo, o único que sobrou livre: acessibilidade no topo à direita, agente de atendimento no rodapé à direita. O !important é necessário porque o estilo do plugin é injetado depois desta folha. */ [vw-access-button] { position: fixed !important; top: auto !important; right: auto !important; bottom: 16px !important; left: 16px !important; /* abaixo do .modal-backdrop (1050): com um modal aberto, o botão precisa ficar atrás dele, e não boiando sobre a janela */ z-index: 1020 !important; } /* ---------- modos ---------- */ /* alto contraste: preto no branco, borda visível em tudo. Sobrescreve os tokens, então vale para o sistema inteiro. */ html[data-contraste="alto"] { --fundo: #FFFFFF; --superficie: #FFFFFF; --superficie-2: #F0F0F0; --sidebar-fundo: #FFFFFF; --sidebar-texto: #000000; --sidebar-borda: #000000; --borda: #000000; --borda-forte: #000000; --texto: #000000; --texto-2: #000000; --texto-3: #1A1A1A; --marca: #8A0F4C; --marca-escura: #6B0B3B; --marca-clara: #8A0F4C; --marca-suave: #FFE8F1; --marca-viva: #6B0B3B; --marca-texto: #FFFFFF; --apoio: #FFE8F1; --apoio-escuro: #6B0B3B; --sucesso: #0A5A3C; --alerta: #6B4500; --erro: #8A0A1E; --info: #2A2A8A; --sombra-1: none; --sombra-2: none; --sombra-3: 0 0 0 2px #000000; } html[data-contraste="alto"] body { background-image: none; } html[data-contraste="alto"] .cartao, html[data-contraste="alto"] .indicador, html[data-contraste="alto"] .form-control, html[data-contraste="alto"] .form-select { border-width: 2px; } /* links sublinhados: quem não distingue cor precisa da forma */ html[data-links="destacado"] a:not(.btn):not(.sidebar__item):not(.botao-icone) { text-decoration: underline; text-underline-offset: 2px; font-weight: 600; } /* espaçamento maior: ajuda dislexia e leitura em tela */ html[data-espaco="amplo"] body { line-height: 1.9; letter-spacing: .4px; } html[data-espaco="amplo"] p, html[data-espaco="amplo"] li { margin-bottom: .9em; } /* o foco do teclado precisa ser visível em qualquer modo */ :focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; } /* ============================================================= Agente de atendimento (páginas públicas) ------------------------------------------------------------- Canto inferior direito. O VLibras ocupa o meio da direita e o painel de acessibilidade o meio da esquerda — os três não se cobrem, e é por isso que este não pode migrar de canto sem conferir os outros dois. ============================================================= */ .ia-botao { position: fixed; right: 16px; bottom: 16px; z-index: 1400; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 30px; padding: 12px 18px; background-color: var(--marca); background-image: var(--gradiente-marca); color: var(--marca-texto); font-weight: 700; font-size: calc(14px * var(--escala-fonte, 1)); box-shadow: var(--sombra-3); } .ia-botao i { font-size: calc(17px * var(--escala-fonte, 1)); } .ia-botao:hover { filter: brightness(1.06); } .ia-botao:focus-visible { outline: 3px solid var(--texto); outline-offset: 2px; } .ia-painel { position: fixed; right: 16px; bottom: 16px; z-index: 1401; width: min(370px, calc(100vw - 24px)); max-height: min(620px, calc(100vh - 32px)); display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-3); overflow: hidden; } .ia-painel[hidden] { display: none; } .ia-painel:focus { outline: 0; } .ia-cabecalho { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-bottom: 1px solid var(--borda); background: var(--marca-suave); flex: 0 0 auto; } .ia-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background-color: var(--marca); background-image: var(--gradiente-marca); color: var(--marca-texto); font-size: calc(16px * var(--escala-fonte, 1)); } .ia-cabecalho strong { display: block; font-size: calc(14.5px * var(--escala-fonte, 1)); } .ia-cabecalho small { color: var(--texto-2); font-size: calc(11.5px * var(--escala-fonte, 1)); } .ia-fechar { margin-left: auto; border: 0; background: transparent; color: var(--texto-2); width: 34px; height: 34px; border-radius: 50%; } .ia-fechar:hover { background: var(--superficie); color: var(--texto); } .ia-conversa { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .ia-balao { max-width: 92%; padding: 11px 13px; border-radius: var(--raio); font-size: calc(14px * var(--escala-fonte, 1)); line-height: 1.5; } .ia-balao--agente { background: var(--superficie-2); color: var(--texto); border-bottom-left-radius: 4px; align-self: flex-start; } .ia-balao--cliente { background-color: var(--marca); background-image: var(--gradiente-marca); color: var(--marca-texto); font-weight: 600; border-bottom-right-radius: 4px; align-self: flex-end; } .ia-texto { margin: 0; } /* três pontos enquanto a consulta roda */ .ia-pensando { display: flex; gap: 4px; align-items: center; } .ia-pensando span { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-3); animation: iaPulso 1s infinite ease-in-out; } .ia-pensando span:nth-child(2) { animation-delay: .15s; } .ia-pensando span:nth-child(3) { animation-delay: .3s; } @keyframes iaPulso { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } } .ia-item { display: flex; align-items: center; gap: 10px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 9px 10px; margin-top: 8px; } .ia-item img { width: 44px; height: 44px; border-radius: var(--raio-sm); object-fit: cover; flex: 0 0 auto; background: var(--superficie-2); } .ia-item__corpo { min-width: 0; flex: 1 1 auto; } .ia-item__corpo strong { display: block; font-size: calc(13.5px * var(--escala-fonte, 1)); line-height: 1.3; } .ia-item__desc { display: block; font-size: calc(12px * var(--escala-fonte, 1)); color: var(--texto-2); } .ia-item__detalhe { display: block; font-size: calc(13.5px * var(--escala-fonte, 1)); font-weight: 700; color: var(--marca-escura); font-family: var(--fonte-titulo); } .ia-item__acao { flex: 0 0 auto; align-self: center; font-size: calc(12.5px * var(--escala-fonte, 1)); font-weight: 700; color: var(--marca-escura); text-decoration: none; border: 1px solid var(--marca-clara); border-radius: 20px; padding: 5px 11px; } .ia-item__acao:hover { background: var(--marca-suave); color: var(--marca-escura); } .ia-aviso { margin: 10px 0 0; font-size: calc(11.5px * var(--escala-fonte, 1)); color: var(--texto-3); line-height: 1.45; } .ia-opcoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .ia-opcao { border: 1px solid var(--marca-clara); background: var(--superficie); color: var(--marca-escura); border-radius: 20px; padding: 7px 13px; font-size: calc(12.5px * var(--escala-fonte, 1)); font-weight: 600; } .ia-opcao:hover { background: var(--marca-suave); } .ia-envio { display: flex; gap: 7px; padding: 10px 12px 6px; border-top: 1px solid var(--borda); flex: 0 0 auto; } .ia-campo { flex: 1 1 auto; min-width: 0; border: 1px solid var(--borda-forte); border-radius: 20px; background: var(--superficie); color: var(--texto); padding: 9px 14px; font-size: calc(14px * var(--escala-fonte, 1)); font-family: var(--fonte); } .ia-campo::placeholder { color: var(--texto-3); } .ia-campo:focus { outline: 0; border-color: var(--marca); box-shadow: var(--glow-marca); } .ia-enviar { flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background-color: var(--marca); background-image: var(--gradiente-marca); color: var(--marca-texto); font-size: calc(15px * var(--escala-fonte, 1)); } .ia-enviar:hover { filter: brightness(1.06); } .ia-rodape { margin: 0; padding: 0 14px 12px; flex: 0 0 auto; font-size: calc(11px * var(--escala-fonte, 1)); color: var(--texto-3); line-height: 1.4; } /* rótulo só para leitor de tela (o Bootstrap tem, mas as páginas públicas não podem depender de classe de terceiro para isto) */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 575.98px) { /* a vitrine tem barra de ação fixa no rodapé: o agente sobe para não cobrir */ .ia-botao, .ia-painel { bottom: 84px; right: 12px; } .ia-botao span { display: none; } .ia-botao { padding: 14px; border-radius: 50%; } .ia-painel { max-height: calc(100vh - 140px); } } @media print { .sidebar, .topo, .sem-impressao, .ia-botao, .ia-painel, .a11y-canto, .a11y-topo, .a11y-painel, div[vw] { display: none !important; } .conteudo { margin-left: 0; } .main { padding: 0; } .cartao { border: 0; box-shadow: none; } body { background: #fff; } }