/* ========================================================================= SANITIX — Design System v2 Direção: software clínico de segurança alimentar. O motivo visual central é a própria etiqueta física (die-cut, com furo circular) e o código de cores de validade (fresco / vencendo / vencido), que é literalmente a função núcleo do produto — não decoração, é o vocabulário do sistema. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root { /* Cor — petróleo clínico, não o azul genérico de dashboard */ --ink-900: #0A1830; --petrol-800: #12294C; --petrol-700: #10495B; --petrol-600: #155C71; --petrol-500: #1C7293; --petrol-100: #E4EEF0; --paper-50: #F6FAF9; --paper-100: #EDF3F1; --line: #DCE6E3; /* Semântica de validade — o coração do produto */ --fresh-500: #2E9E6B; --fresh-600: #268358; --fresh-100: #E1F3EA; --amber-500: #DB9B2E; --amber-100: #FBEDD6; --red-500: #D64545; --red-100: #FBE4E4; /* Azul da marca (monograma) */ --brand-blue-700: #1B3FC4; --brand-blue-500: #2F62F0; --brand-blue-300: #6C93F7; --text-900: #101E20; --text-600: #4A5D5F; --text-400: #83979A; --heading: var(--ink-900); /* títulos (no escuro vira claro; --ink-900 continua sendo fundo escuro) */ --accent-text: var(--petrol-700); /* petróleo usado como COR DE TEXTO/link */ --surface: #fff; /* cartões, topbar, painéis, inputs */ --paper-200: #E4E7E2; --brand-blue-100: #EAF0FE; --violet-500: #7C5CE0; --violet-100: #EFEAFB; --sky-500: #1FA2D6; --sky-100: #E2F3FB; --red-200: #F3C9C9; --red-700: #A02A2A; --shadow-pop: 0 10px 30px -8px rgba(11,32,39,.22); /* Tipografia */ --font-display: 'Sora', system-ui, sans-serif; --font-body: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* Layout */ --sidebar-w: 264px; --topbar-h: 68px; --radius: 10px; --radius-tag: 14px; --shadow-card: 0 1px 2px rgba(11,32,39,.04), 0 6px 20px -8px rgba(11,32,39,.12); } /* ------------------------------------------------------------------------- Tema escuro Ativado por (ver partials/head.php, tema_do.php e o bloco "Tema" em app.js). Só redefine os tokens: nenhum componente precisa saber que existe um tema escuro. A regra é a mesma do claro — petróleo como marca, verde/âmbar/vermelho como vocabulário de validade — mas em superfícies escuras azuladas (não preto puro), com os tons "100" virando tintas escuras e os tons de texto invertidos. ------------------------------------------------------------------------- */ html[data-theme="dark"] { color-scheme: dark; --paper-50: #0F1720; /* fundo da página */ --paper-100: #1A2530; /* hover / faixas / zebra */ --paper-200: #24313D; --surface: #161F29; /* cartões, topbar, painéis, inputs */ --line: #283644; --petrol-100: #12303C; --petrol-500: #2F93B8; --accent-text: #7FC7DF; --heading: #F2F7F8; --text-900: #E4ECEF; --text-600: #A7B8BF; --text-400: #7A8D95; --fresh-100: #10301F; --fresh-500: #3DB57E; --fresh-600: #5CC996; --amber-100: #3A2B10; --amber-500: #E8AB42; --red-100: #3C1A1B; --red-200: #5B2729; --red-500: #E45C5C; --red-700: #F4A0A0; --brand-blue-100: #1A2644; --brand-blue-300: #8FAEF9; --violet-500: #A78BFA; --violet-100: #2A2352; --sky-500: #4CC0EE; --sky-100: #10333F; --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 6px 20px -8px rgba(0,0,0,.55); --shadow-pop: 0 12px 32px -8px rgba(0,0,0,.65); } html[data-theme="dark"] .btn-primary { background: var(--petrol-600); } html[data-theme="dark"] .btn-primary:hover { background: var(--petrol-500); } /* Imagens enviadas (logo do restaurante, fotos) ficam um pouco menos ofuscantes sobre fundo escuro — sem mexer nas cores de status. */ html[data-theme="dark"] img:not(.no-dim) { filter: brightness(.92); } html[data-theme="dark"] .tenant-id__logo:has(img) { background: #fff; } /* Impressão sempre em papel branco: se estiver no escuro, os tokens de texto voltam pra tinta escura (app.js também troca o atributo antes de imprimir; isto aqui é a rede de segurança). */ @media print { html[data-theme="dark"] { --text-900: #101E20; --text-600: #4A5D5F; --text-400: #83979A; --heading: #0A1830; --surface: #fff; --paper-50: #fff; --paper-100: #EDF3F1; --line: #DCE6E3; } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper-50); color: var(--text-900); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* nunca rolar para o lado, nem no mobile */ width: 100%; } h1, h2, h3, .font-display { font-family: var(--font-display); color: var(--heading); margin: 0; letter-spacing: -0.01em; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ------------------------------------------------------------------------- App shell ------------------------------------------------------------------------- */ .app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; transition: grid-template-columns .28s cubic-bezier(.4,0,.2,1); grid-template-rows: var(--topbar-h) 1fr; grid-template-areas: "sidebar topbar" "sidebar main"; min-height: 100vh; } /* ------------------------------------------------------------------------- Sidebar ------------------------------------------------------------------------- */ .sidebar { grid-area: sidebar; background: linear-gradient(184deg, var(--petrol-800), var(--ink-900)); color: #E8F1F0; display: flex; flex-direction: column; /* Cápsula flutuante: descolada das bordas, cantos arredondados, sombra — em vez de uma coluna colada na esquerda da janela. */ position: sticky; top: 12px; height: calc(100vh - 24px); margin: 12px 0 12px 12px; width: calc(var(--sidebar-w) - 12px); border-radius: 22px; box-shadow: 0 18px 40px -20px rgba(10,24,48,.6), inset 0 1px 0 rgba(255,255,255,.08); z-index: 30; transition: width .28s cubic-bezier(.4,0,.2,1); overflow: visible; /* o botão de recolher fica meio pra fora */ } .sidebar::before { /* brilho suave no topo da cápsula */ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px 160px at 20% -10%, rgba(255,255,255,.12), transparent 60%); } /* Botão redondo na borda: recolhe/expande (só desktop). */ .sidebar__toggle { position: absolute; top: 24px; right: -14px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text-600); display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px -4px rgba(10,24,48,.35); transition: transform .2s ease, color .15s ease, box-shadow .15s ease; } .sidebar__toggle:hover { color: var(--accent-text); box-shadow: 0 6px 16px -4px rgba(10,24,48,.45); } .sidebar__toggle svg { transition: transform .28s ease; } @media (min-width: 981px) { .sidebar__toggle { display: inline-flex; } } .sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 16px 20px 12px; border-bottom: 1px solid rgba(255,255,255,.08); min-height: 62px; } .sidebar__brand-text { white-space: nowrap; overflow: hidden; } .brand-mark { width: 34px; height: 34px; position: relative; flex-shrink: 0; } .brand-mark svg { width: 100%; height: 100%; display: block; } .sidebar__brand-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #fff; line-height: 1.1; } .sidebar__brand-sub { font-size: 11px; color: #9FB4E0; letter-spacing: .04em; text-transform: uppercase; } .sidebar__nav { flex: 1; overflow-y: auto; padding: 6px 10px; /* Se ainda sobrar item de mais pra caber (tela baixa), pelo menos a barra de rolagem fica fina e discreta em vez da cinza padrão do sistema operacional — Firefox e Chrome/Edge/Safari cada um com sua própria propriedade pra isso. */ /* Sem barra de rolagem visível (continua rolando com a roda do mouse / dedo) — a barra aparecia dentro da cápsula e estragava o visual, e o traço do item ativo (::before, fora do item) gerava rolagem lateral. */ overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; } .sidebar__nav::-webkit-scrollbar { display: none; width: 0; height: 0; } .nav-group-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #7B93C9; padding: 8px 10px 3px; white-space: nowrap; } .nav-group-label:first-child { padding-top: 4px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 4px 10px; border-radius: 10px; color: #CBD8F0; font-size: 13px; font-weight: 500; margin-bottom: 1px; position: relative; white-space: nowrap; transition: background .15s ease, color .15s ease, transform .15s ease; } .nav-item:hover { background: rgba(255,255,255,.07); color: #fff; transform: translateX(2px); } .nav-item.is-active { background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .nav-item.is-active::before { content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--fresh-500); box-shadow: 0 0 10px rgba(46,158,107,.7); } .nav-item__icon-wrap { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease; } .nav-item.is-active .nav-item__icon-wrap { background: rgba(255,255,255,.12); } .nav-item__icon { width: 17px; height: 17px; flex-shrink: 0; opacity: .92; } .nav-item__label { overflow: hidden; text-overflow: ellipsis; } .nav-item__badge { margin-left: auto; font-family: var(--font-mono); font-size: 11px; background: var(--amber-500); color: #241a02; border-radius: 999px; padding: 1px 7px; font-weight: 600; } /* Vencido de verdade (não só "vencendo em breve") chama mais atenção que o amarelo padrão — mesma lógica de urgência do status-dot--red. */ .nav-item__badge--red { background: var(--red-500); color: #fff; } .sidebar__footer { padding: 6px 14px 8px; border-top: 1px solid rgba(255,255,255,.08); flex-shrink: 0; } .sidebar__footer-version { font-size: 10px; color: #8098C4; font-family: var(--font-mono); padding: 0 6px; margin-top: 4px; } /* Indicação por WhatsApp — mesma cor de marca do WhatsApp, num "pill" discreto (não é uma ação do dia a dia, não precisa competir com o menu de verdade), mas com um leve brilho no hover pra convidar o clique. */ .sidebar__indicar { display: flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 7px; background: rgba(37, 211, 102, .12); border: 1px solid rgba(37, 211, 102, .25); color: #B7F5CE; font-size: 12px; font-weight: 600; text-decoration: none; transition: background .15s ease, border-color .15s ease; } .sidebar__indicar:hover { background: rgba(37, 211, 102, .22); border-color: rgba(37, 211, 102, .45); color: #fff; } .sidebar__indicar svg { flex-shrink: 0; color: #25D366; } /* ---- Menu recolhido (só ícones) — ---- */ @media (min-width: 981px) { html.sidebar-collapsed { --sidebar-w: 88px; } html.sidebar-collapsed .sidebar__toggle svg { transform: rotate(180deg); } html.sidebar-collapsed .sidebar__brand { justify-content: center; padding-left: 0; padding-right: 0; } html.sidebar-collapsed .sidebar__brand-text, html.sidebar-collapsed .nav-item__label, html.sidebar-collapsed .sidebar__footer-version { display: none; } html.sidebar-collapsed .sidebar__nav { padding: 6px 10px; } html.sidebar-collapsed .nav-group-label { padding: 0; height: 1px; margin: 6px 18px; background: rgba(255,255,255,.12); } html.sidebar-collapsed .nav-group-label span { display: none; } html.sidebar-collapsed .nav-group-label:first-child { display: none; } html.sidebar-collapsed .nav-item { justify-content: center; padding: 2px 0; gap: 0; width: 56px; margin: 1px auto; } html.sidebar-collapsed .nav-item:hover { transform: none; } html.sidebar-collapsed .nav-item__icon-wrap { width: 36px; height: 36px; border-radius: 11px; } html.sidebar-collapsed .nav-item__icon { width: 19px; height: 19px; } html.sidebar-collapsed .nav-item.is-active::before { left: -10px; top: 9px; bottom: 9px; } html.sidebar-collapsed .nav-item__badge { position: absolute; top: 2px; right: 4px; margin: 0; font-size: 9.5px; padding: 0 5px; min-width: 17px; height: 17px; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--ink-900); } html.sidebar-collapsed .sidebar__footer { padding: 8px 0 12px; display: flex; justify-content: center; } html.sidebar-collapsed .sidebar__indicar { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 12px; } html.sidebar-collapsed .sidebar__indicar svg { width: 17px; height: 17px; } } /* Tooltip flutuante do menu recolhido (um só elemento, posicionado pelo app.js — dentro do menu ele seria cortado pela rolagem). */ .sidebar-tip { position: fixed; z-index: 90; pointer-events: none; background: var(--ink-900); color: #fff; font-size: 12.5px; font-weight: 600; padding: 7px 11px; border-radius: 9px; box-shadow: 0 10px 24px -8px rgba(10,24,48,.6); white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity .12s ease, transform .12s ease; } .sidebar-tip::before { content: ""; position: absolute; left: -5px; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-right-color: var(--ink-900); border-left: 0; } .sidebar-tip.is-visible { opacity: 1; transform: translateX(0); } html[data-theme="dark"] .sidebar-tip { background: var(--petrol-700); } html[data-theme="dark"] .sidebar-tip::before { border-right-color: var(--petrol-700); } /* ------------------------------------------------------------------------- Topbar ------------------------------------------------------------------------- */ .topbar { grid-area: topbar; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 20; gap: 12px; min-width: 0; /* permite os filhos encolherem/truncarem em vez de estourar a largura */ } .topbar__left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; } .topbar__menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--text-900); flex-shrink: 0; } /* Identidade do cliente (empresa logada), não confundir com a marca Sanitix da sidebar */ .tenant-id { display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 14px; border-right: 1px solid var(--line); flex-shrink: 0; text-decoration: none; color: inherit; border-radius: 8px; transition: background 0.15s ease; } .tenant-id:hover { background: var(--paper-100); } .tenant-id__logo { width: 34px; height: 34px; border-radius: 9px; background: var(--paper-100); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--accent-text); flex-shrink: 0; overflow: hidden; } .tenant-id__logo img { width: 100%; height: 100%; object-fit: cover; } .tenant-id__text { min-width: 0; line-height: 1.25; } .tenant-id__name { display: block; font-weight: 600; font-size: 13.5px; color: var(--text-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; } .tenant-id__sub { display: block; font-size: 11.5px; color: var(--text-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; } .topbar__search { position: relative; width: 100%; max-width: 320px; min-width: 0; } .topbar__search-field { display: flex; align-items: center; gap: 8px; background: var(--paper-100); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; width: 100%; color: var(--text-400); font-size: 13px; min-width: 0; } .topbar__search-field input { border: none; background: none; outline: none; font-family: var(--font-body); font-size: 13.5px; width: 100%; color: var(--text-900); min-width: 0; } /* Painel de resultados — mesmo espírito do .notif-menu__panel (só aparece com .is-open no pai, e some sozinho ao clicar fora — ver app.js). */ .search-panel { display: none; position: absolute; top: calc(100% + 8px); left: 0; width: 380px; max-width: min(380px, 90vw); max-height: 420px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card), 0 12px 28px rgba(16, 30, 32, 0.12); padding: 8px; z-index: 60; } .topbar__search.is-open .search-panel { display: block; } .search-panel__grupo + .search-panel__grupo { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); } .search-panel__grupo-titulo { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-400); padding: 6px 10px 4px; } .search-panel__item { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: inherit; } .search-panel__item:hover { background: var(--paper-100); } .search-panel__item-titulo { font-size: 13.5px; font-weight: 600; color: var(--text-900); } .search-panel__item-sub { font-size: 12px; color: var(--text-400); } .search-panel__vazio { padding: 14px 10px; font-size: 13px; color: var(--text-400); text-align: center; } .topbar__right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .version-chip { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--accent-text); background: var(--petrol-100); border: 1px solid #CFE1E3; border-radius: 999px; padding: 5px 12px 5px 10px; cursor: pointer; transition: background .15s ease; flex-shrink: 0; } .version-chip:hover { background: var(--paper-100); } /* Status de verdade do Sanitix Print Bridge — chip separado do version-chip de propósito, pra nunca mais confundir "sistema atualizado" com "impressora conectada" (são coisas bem diferentes). */ .bridge-chip { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-600); background: var(--paper-100); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 10px; text-decoration: none; transition: background .15s ease; flex-shrink: 0; } .bridge-chip:hover { background: var(--paper-100); } .bridge-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-400); flex-shrink: 0; } .bridge-chip--online { color: var(--accent-text); background: var(--fresh-100); border-color: #BFE6D2; } .bridge-chip--online .bridge-chip__dot { background: var(--fresh-500); box-shadow: 0 0 0 3px var(--fresh-100); } .bridge-chip--offline { color: var(--red-700); background: var(--red-100); border-color: var(--red-200); } .bridge-chip--offline .bridge-chip__dot { background: var(--red-500); box-shadow: 0 0 0 3px var(--red-100); } .version-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fresh-500); box-shadow: 0 0 0 3px var(--fresh-100); flex-shrink: 0; } /* Enquanto a aba fica aberta, o app.js compara com a versão de verdade no servidor de tempos em tempos — se alguém publicou uma atualização nesse meio tempo, o chip muda de cor pra avisar (ver aviso-de-versão abaixo, que é o que realmente força a atualização da tela). */ .version-chip--desatualizado .version-chip__dot { background: var(--amber-500); box-shadow: 0 0 0 3px var(--amber-100); } .aviso-nova-versao { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999; background: var(--ink-900, #12294C); color: #fff; border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; box-shadow: 0 12px 30px -8px rgba(0,0,0,.4); font-size: 13.5px; max-width: 460px; margin: 0 auto; } .aviso-nova-versao__texto { flex: 1; min-width: 200px; } .aviso-nova-versao__btn { background: rgba(255,255,255,.15); border: none; color: #fff; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; flex-shrink: 0; } .aviso-nova-versao__btn:hover { background: rgba(255,255,255,.25); } .icon-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: none; border: none; cursor: pointer; color: var(--text-600); position: relative; flex-shrink: 0; } .icon-btn:hover { background: var(--paper-100); color: var(--text-900); } /* Variante com contorno — pra ícone de ação isolado dentro de um card (ex.: editar/testar em "Tamanho da etiqueta", ações da lista de impressoras), onde o botão "invisível" padrão (sem fundo/borda) não dá nenhuma pista visual de que é clicável. */ .icon-btn--outline { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(16,30,32,.04); } .icon-btn--outline:hover { background: var(--paper-100); border-color: var(--petrol-500); color: var(--accent-text); } .icon-btn--outline.icon-btn--principal { background: var(--petrol-100); border-color: #BFD9DE; color: var(--accent-text); } .icon-btn--outline.icon-btn--principal:hover { background: var(--petrol-500); border-color: var(--petrol-500); color: #fff; } .icon-btn--outline.icon-btn--perigo:hover { background: var(--red-100); border-color: var(--red-500); color: var(--red-700); } .icon-btn__dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--red-500); border: 1.5px solid var(--surface); } .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--petrol-500); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 13px; cursor: pointer; flex-shrink: 0; } /* ------------------------------------------------------------------------- Menu de usuário / grupo — mostra quem está logado e, quando o login é compartilhado por um grupo (ex.: "Cozinha - Turno Manhã"), permite escolher qual pessoa do grupo está de fato operando no momento. ------------------------------------------------------------------------- */ .user-menu { position: relative; min-width: 0; } .user-menu__btn { display: flex; align-items: center; gap: 9px; background: none; border: none; cursor: pointer; padding: 5px 6px 5px 5px; border-radius: 999px; min-width: 0; max-width: 190px; } .user-menu__btn:hover { background: var(--paper-100); } .user-menu__text { min-width: 0; line-height: 1.2; text-align: left; } .user-menu__name { display: block; font-size: 13px; font-weight: 600; color: var(--text-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-menu__role { display: block; font-size: 11px; color: var(--text-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-menu__chevron { flex-shrink: 0; color: var(--text-400); transition: transform .15s ease; } .user-menu.is-open .user-menu__chevron { transform: rotate(180deg); } .user-menu__panel { position: absolute; top: calc(100% + 10px); right: 0; width: 264px; max-width: calc(100vw - 24px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 8px; display: none; z-index: 40; } .user-menu.is-open .user-menu__panel { display: block; } .user-menu__panel-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-400); font-weight: 600; padding: 8px 10px 6px; } .user-list__item { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; cursor: pointer; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; color: var(--text-900); text-align: left; } .user-list__item:hover { background: var(--paper-100); } .user-list__item.is-active { background: var(--petrol-100); } .user-list__item .avatar { width: 28px; height: 28px; font-size: 11px; background: var(--petrol-500); } .user-list__item.is-active .avatar { background: var(--fresh-500); } .user-list__item__check { margin-left: auto; color: var(--fresh-500); flex-shrink: 0; visibility: hidden; } .user-list__item.is-active .user-list__item__check { visibility: visible; } .user-menu__divider { height: 1px; background: var(--line); margin: 6px 4px; } .user-menu__logout { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; cursor: pointer; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; color: var(--red-500); font-weight: 600; text-align: left; } .user-menu__logout:hover { background: var(--red-100); } .user-menu__link { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; cursor: pointer; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; color: var(--text-900); font-weight: 600; text-align: left; text-decoration: none; } .user-menu__link:hover { background: var(--paper-100); } /* Seletor de tema (Claro / Escuro / Automático) dentro do menu do usuário. A escolha é gravada em login.tema (ver tema_do.php) e aplicada em — o bloco "Tema" em app.js cuida da troca ao vivo. */ .theme-switch { padding: 6px 10px 10px; } .theme-switch__label { display: flex; align-items: center; justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-400); font-weight: 600; margin-bottom: 8px; } .theme-switch__state { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-600); } .theme-switch__options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--paper-100); border: 1px solid var(--line); border-radius: 10px; padding: 4px; } .theme-switch__btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 4px 6px; border: none; border-radius: 7px; background: transparent; color: var(--text-600); font-family: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; } .theme-switch__btn svg { width: 17px; height: 17px; } .theme-switch__btn:hover { color: var(--text-900); } .theme-switch__btn.is-active { background: var(--surface); color: var(--accent-text); box-shadow: var(--shadow-card); } .theme-switch__btn:focus-visible { outline: 2px solid var(--petrol-500); outline-offset: 1px; } /* Atalho lua/sol na topbar: mostra o ícone do tema PARA ONDE vai trocar. */ .theme-toggle .theme-toggle__sun { display: none; } html[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: none; } html[data-theme="dark"] .theme-toggle .theme-toggle__sun { display: block; } .theme-toggle svg { transition: transform .25s ease; } .theme-toggle:hover svg { transform: rotate(-15deg); } /* Checkboxes de perfis de acesso (funcionarios.php) — chips marcáveis, agrupados em "Perfis" e "Grupos de login". */ .perfil-check-grupo { margin-bottom: 12px; } .perfil-check-grupo__titulo { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-400); font-weight: 600; margin-bottom: 6px; } .perfil-check-grid { display: flex; flex-wrap: wrap; gap: 8px; } .perfil-check { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13.5px; font-weight: 500; color: var(--text-900); cursor: pointer; user-select: none; transition: border-color .15s ease, background .15s ease; } .perfil-check:hover { border-color: var(--petrol-500); } .perfil-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--petrol-600); cursor: pointer; } .perfil-check:has(input:checked) { border-color: var(--petrol-500); background: var(--petrol-100); color: var(--accent-text); } .perfil-check--grupo:has(input:checked) { border-color: var(--amber-500); background: var(--amber-100); color: var(--text-900); } @media (max-width: 720px) { .perfil-check { min-height: 44px; } } /* Transição suave só quando o usuário troca o tema (classe colocada pelo app.js por alguns ms) — sem isso, cada carregamento de página "piscaria". */ html.theme-transition, html.theme-transition * { transition: background-color .25s ease, border-color .25s ease, color .15s ease !important; } /* Sininho da topbar — alertas de vencimento de verdade (ver alertasVencimento() em conexaopdo.php), mesmo padrão visual do user-menu ao lado. */ .notif-menu { position: relative; } .notif-menu__panel { position: absolute; top: calc(100% + 10px); right: 0; width: 300px; max-width: calc(100vw - 24px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 8px; display: none; z-index: 40; } .notif-menu.is-open .notif-menu__panel { display: block; } .notif-menu__header { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-400); font-weight: 600; padding: 8px 10px 6px; } .notif-menu__list { max-height: 320px; overflow-y: auto; } .notif-menu__empty { padding: 18px 10px; font-size: 13px; color: var(--text-400); text-align: center; } .notif-menu__item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 8px; text-decoration: none; } .notif-menu__item:hover { background: var(--paper-100); } .notif-menu__item-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; } .notif-menu__item-dot--vencida { background: var(--red-500); } .notif-menu__item-dot--vencendo { background: var(--amber-500); } .notif-menu__item-body { min-width: 0; } .notif-menu__item-nome { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-900); } .notif-menu__item-meta { display: block; font-size: 12px; color: var(--text-600); } .notif-menu__footer { display: block; text-align: center; margin-top: 4px; padding: 9px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--accent-text); text-decoration: none; border-top: 1px solid var(--line); } .notif-menu__footer:hover { background: var(--paper-100); } /* Bloqueio de "quem é você" — login de grupo (ex.: Cozinha) tem que escolher uma pessoa antes de fazer qualquer coisa. Cobre a tela toda, sem X pra fechar de propósito (não dá pra pular essa escolha). */ .quemsou-overlay { position: fixed; inset: 0; background: rgba(16, 30, 32, .55); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; } .quemsou-card { background: var(--surface); border-radius: 16px; padding: 28px; max-width: 380px; width: 100%; box-shadow: 0 20px 50px -12px rgba(11,32,39,.35); } .quemsou-card h2 { margin: 0 0 6px; font-size: 19px; } .quemsou-card p { margin: 0 0 18px; font-size: 13.5px; color: var(--text-600); } .quemsou-lista { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; } .quemsou-item { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--paper-100); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 14.5px; font-weight: 600; color: var(--text-900); cursor: pointer; text-align: left; } .quemsou-item:hover { background: var(--petrol-100); border-color: var(--petrol-500); } .quemsou-item .avatar { width: 32px; height: 32px; font-size: 12px; background: var(--petrol-500); flex-shrink: 0; } /* ------------------------------------------------------------------------- Main content ------------------------------------------------------------------------- */ .main { grid-area: main; padding: 28px 32px 60px; max-width: 1680px; width: 100%; /* Item de grid dentro de .app-shell: sem isso, o mínimo "auto" padrão do grid deixa qualquer conteúdo interno largo (ex.: uma linha de cards lado a lado) esticar essa coluna inteira além do espaço disponível, em vez de encolher/quebrar linha — é isso que causava telas passando da largura no celular mesmo com media queries "corretas". */ min-width: 0; } .page-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; } .page-header h1 { font-size: 24px; font-weight: 700; } .page-header p { color: var(--text-600); margin: 4px 0 0; font-size: 13.5px; } .btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; padding: 10px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent; font-family: var(--font-body); } .btn-primary { background: var(--petrol-700); color: #fff; } .btn-primary:hover { background: var(--petrol-800); } .btn-ghost { background: var(--surface); border-color: var(--line); color: var(--text-900); } .btn-ghost:hover { background: var(--paper-100); } .btn-whatsapp { background: #25D366; color: #fff; } .btn-whatsapp:hover { background: #1EBE5A; } .btn-whatsapp:disabled { opacity: .65; cursor: default; } /* ------------------------------------------------------------------------- Die-cut tag card — o elemento-assinatura: cartão com recorte circular, igual a uma etiqueta física com furo, usado nos KPIs do dashboard. ------------------------------------------------------------------------- */ .tag-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-bottom: 28px; } .tag-card { --accent: var(--petrol-500); --accent-bg: var(--petrol-100); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tag); padding: 18px 20px 18px 26px; position: relative; box-shadow: var(--shadow-card); overflow: hidden; } .tag-card--link { display: block; text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; } .tag-card--link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(11,32,39,.18); } /* furo da etiqueta */ .tag-card::before { content: ""; position: absolute; left: -9px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--paper-50); border: 1px solid var(--line); } .tag-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent); } .tag-card--fresh { --accent: var(--fresh-500); --accent-bg: var(--fresh-100); } .tag-card--amber { --accent: var(--amber-500); --accent-bg: var(--amber-100); } .tag-card--red { --accent: var(--red-500); --accent-bg: var(--red-100); } .tag-card__label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-600); font-weight: 600; } .tag-card__value { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--heading); margin: 6px 0 2px; } .tag-card__delta { font-family: var(--font-mono); font-size: 12px; color: var(--accent); background: var(--accent-bg); display: inline-block; padding: 2px 8px; border-radius: 999px; } /* ------------------------------------------------------------------------- KPI tile — versão mais limpa/minimal do card de estatística, usada no Dashboard (ícone único acima do número, sem faixa colorida nem furo de etiqueta). A cor só aparece quando tem algo de verdade pra sinalizar (ok/atenção/alerta) — no estado neutro o ícone fica na cor da marca, sem gritar cor nenhuma. O "tag-card" com o furo continua vivo nas telas que são sobre a etiqueta física em si (Vencimentos, etc.). ------------------------------------------------------------------------- */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 28px; } .kpi-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow-card); display: block; text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; } a.kpi-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(11,32,39,.18); } .kpi-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--petrol-100); color: var(--accent-text); margin-bottom: 14px; } .kpi-tile__icon--fresh { background: var(--fresh-100); color: var(--fresh-600); } .kpi-tile__icon--amber { background: var(--amber-100); color: var(--amber-500); } .kpi-tile__icon--red { background: var(--red-100); color: var(--red-500); } .kpi-tile__label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-400); font-weight: 600; } .kpi-tile__value { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--heading); margin: 4px 0 3px; } .kpi-tile__sub { font-size: 12.5px; color: var(--text-600); } .kpi-tile__sub--fresh { color: var(--fresh-600); font-weight: 600; } .kpi-tile__sub--amber { color: var(--amber-500); font-weight: 600; } .kpi-tile__sub--red { color: var(--red-500); font-weight: 600; } .kpi-tile__data { font-weight: 500; opacity: .7; font-size: 11.5px; } /* Mini-quadro dos 3 turnos dentro do tile de Temperatura */ .kpi-temp-turnos { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 4px; } .kpi-temp-turno { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12.5px; padding: 2px 8px; border-radius: 7px; background: var(--paper-100); color: var(--text-600); } .kpi-temp-turno__nome { font-weight: 600; } .kpi-temp-turno__pct { font-weight: 700; font-variant-numeric: tabular-nums; } .kpi-temp-turno.is-parcial { background: var(--amber-100); color: var(--amber-500); } .kpi-temp-turno.is-ok { background: var(--fresh-100); color: var(--fresh-600); } .kpi-temp-turno.is-atual { outline: 1.5px solid currentColor; outline-offset: -1.5px; } .kpi-tile--v3.is-ativo .kpi-temp-turno { background: rgba(255,255,255,.18); color: var(--kpi-text); } /* Duas colunas lado a lado (Temperatura de hoje | Checklists de hoje) — empilha em telas estreitas. Os `.panel` de dentro perdem a margem própria de empilhamento porque quem cuida do espaçamento aqui é o `gap` do grid, não o `.panel + .panel` (que ainda vale fora daqui). */ .dash-grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; margin-bottom: 20px; } .dash-grid-2 .panel { margin-top: 0 !important; } @media (max-width: 900px) { .dash-grid-2 { grid-template-columns: 1fr; } } /* Mini-gráfico de temperatura do dia — SVG responsivo (viewBox mantém a proporção, então os pontos continuam redondos em qualquer largura de tela) dentro do painel "Temperatura de hoje" do Dashboard. */ .temp-sparkline-legenda { display: flex; gap: 20px; margin-bottom: 14px; font-size: 13px; color: var(--text-600); } .temp-sparkline-legenda strong { color: var(--heading); font-family: var(--font-display); } .temp-sparkline-box svg { width: 100%; height: auto; display: block; } /* Grade de gráficos de rosca (Por funcionário/local/conservação) — um card por gráfico, empilha em telas estreitas. */ .donut-grid { display: grid; /* 3 colunas SEMPRE do mesmo tamanho (não "auto-fit", que deixa a largura de cada card variar dependendo de quanto texto de legenda tem dentro) — só empilha em 1 coluna na tela estreita, ver media query abaixo. */ grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; } .donut-card { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; } /* Garante que o cabeçalho dos 3 cards fique com a MESMA altura mesmo se um título for maior e quebrar linha em telas estreitas — sem isso, o card com título maior "empurra" a rosquinha pra baixo em relação aos outros dois. */ .donut-grid .panel__header { min-height: 56px; } /* `.panel + .panel { margin-top: 20px }` é pra painéis empilhados verticalmente (fora de um grid) — dentro do grid lado a lado, essa regra empurrava só o 2º e o 3º card pra baixo (o 1º nunca "é o + de outro painel"), desalinhando as 3 rosquinhas. Mesma correção já feita em .dash-grid-2 acima. */ .donut-grid .panel { margin-top: 0 !important; } @media (max-width: 860px) { .donut-grid { grid-template-columns: 1fr; } } .donut-card svg { flex-shrink: 0; } .donut-legenda { width: 100%; margin-top: 6px; } .donut-legenda-item { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--paper-100); font-size: 12.5px; } .donut-legenda-item:last-child { border-bottom: none; } .donut-legenda-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .donut-legenda-nome { flex: 1; min-width: 0; color: var(--text-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .donut-legenda-qtd { font-family: var(--font-mono); font-weight: 600; color: var(--text-600); flex-shrink: 0; } /* Alternador "Por dia" / "Por mês" do gráfico de barras de período — mesma ideia visual das abas de login (pílula dupla, uma ativa). */ .periodo-toggle { display: inline-flex; background: var(--paper-100); border-radius: 999px; padding: 3px; gap: 2px; } .periodo-toggle__btn { border: none; background: transparent; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-600); cursor: pointer; font-family: inherit; } .periodo-toggle__btn.is-active { background: var(--surface); color: var(--accent-text); box-shadow: var(--shadow-card); } /* Lista "Checklists de hoje" — uma categoria por linha com uma bolinha de status à direita (igual a um check-list de verdade riscando os itens do dia), bem mais simples que abrir o histórico completo do checklist. */ .checklist-hoje-lista { display: flex; flex-direction: column; } .checklist-hoje-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--paper-100); font-size: 13.5px; color: var(--text-900); } .checklist-hoje-item:last-child { border-bottom: none; } .checklist-hoje-item__check { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--fresh-100); color: var(--fresh-600); flex-shrink: 0; } .checklist-hoje-item__check--alerta { background: var(--red-100); color: var(--red-500); } /* ------------------------------------------------------------------------- Painel / card genérico ------------------------------------------------------------------------- */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); } /* Espaço entre painéis empilhados — sem isso eles ficam colados um no outro (`.main` não tem gap próprio, e cada `.panel` é só uma div comum sem margem por padrão). */ .panel + .panel { margin-top: 20px; } .panel__header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); } .panel__header h2 { font-size: 15.5px; font-weight: 600; } /* Faltava — sem isso qualquer texto solto (não dentro de tabela) dentro de um painel fica colado na borda esquerda/superior. */ .panel__body { padding: 18px 22px; } /* Painel "em destaque" — usado pra ações/módulos que não são só um resumo passivo (ex.: gerar/baixar um relatório), pra não se confundir visualmente com os cards de estatística ao redor. */ .panel--destaque { border-left: 4px solid var(--petrol-500); } .panel--destaque .panel__header { background: var(--petrol-100); border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; } /* Tabela de etiquetas */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Tabela direto dentro de um painel: as células (.table th/td) já têm 22px de padding próprio — sem isso aqui, o padding novo do .panel__body somaria com o da célula e a tabela ficaria recuada demais (e desalinhada do título no cabeçalho do painel). */ .panel__body > .table-scroll { margin: 0 -22px; } .table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; } .table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-400); font-weight: 600; padding: 12px 22px; border-bottom: 1px solid var(--line); } .table td { padding: 14px 22px; border-bottom: 1px solid var(--paper-100); color: var(--text-900); } .table tr:last-child td { border-bottom: none; } /* Zebra bem leve nas tabelas de dados também — mesma lógica do .profile-item, só que aqui na linha inteira da tabela. */ .table tbody tr:nth-child(even) td { background: var(--paper-50); } .table td.mono, .table th.mono { font-family: var(--font-mono); } .status-dot { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12.5px; } .status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--text-400)); } .status-dot--fresh { color: var(--fresh-500); --dot: var(--fresh-500); } .status-dot--amber { color: var(--amber-500); --dot: var(--amber-500); } .status-dot--red { color: var(--red-500); --dot: var(--red-500); } /* ------------------------------------------------------------------------- Filtros de status — Todas / A vencer / Vencidas / Em dia. Equivalente moderno aos três blocos coloridos do "Validades" antigo. ------------------------------------------------------------------------- */ .status-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .status-filter { --accent: var(--text-400); display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; color: var(--text-900); cursor: pointer; min-height: 40px; } .status-filter__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .status-filter:hover { border-color: var(--accent); } .status-filter.is-active { background: var(--accent); border-color: var(--accent); color: #fff; } .status-filter.is-active .status-filter__dot { background: #fff; } .status-filter--todas { --accent: var(--ink-900); } html[data-theme="dark"] .status-filter--todas { --accent: var(--text-400); } html[data-theme="dark"] .status-filter--todas.is-active { --accent: var(--petrol-600); } .status-filter--fresh { --accent: var(--fresh-500); } .status-filter--amber { --accent: var(--amber-500); } .status-filter--red { --accent: var(--red-500); } .btn-success { background: var(--fresh-600, var(--fresh-500)); color: #fff; } .btn-success:hover { filter: brightness(.93); } /* ------------------------------------------------------------------------- Dar baixa por QR code — abre a câmera do celular, lê o código impresso na etiqueta e mostra a etiqueta encontrada com as ações de sempre (dar baixa / renovar), igual ao módulo antigo. ------------------------------------------------------------------------- */ .qr-modal-overlay { position: fixed; inset: 0; background: rgba(10,24,48,.78); z-index: 100; display: none; align-items: center; justify-content: center; padding: 16px; } .qr-modal-overlay.is-open { display: flex; } .qr-modal { background: var(--ink-900); width: 100%; max-width: 420px; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -15px rgba(0,0,0,.5); } .qr-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 14px 18px; color: #fff; } .qr-modal__header h3 { font-size: 15px; color: #fff; } .qr-modal__close { background: none; border: none; color: #fff; cursor: pointer; padding: 8px; border-radius: 8px; } .qr-modal__close:hover { background: rgba(255,255,255,.1); } .qr-video-wrap { position: relative; aspect-ratio: 1 / 1; background: #000; overflow: hidden; } .qr-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; } .qr-scan-frame { position: absolute; inset: 14%; border: 3px solid var(--fresh-500); border-radius: 18px; box-shadow: 0 0 0 2000px rgba(0,0,0,.45); pointer-events: none; } .qr-modal__hint { color: #C9D8F5; text-align: center; font-size: 13px; padding: 14px 18px 4px; } .qr-modal__error { display: none; color: #FFD9D9; background: rgba(214,69,69,.25); border-radius: 8px; padding: 10px 14px; margin: 10px 18px 0; font-size: 13px; text-align: center; } .qr-modal__error.is-visible { display: block; } .qr-manual { display: flex; gap: 8px; padding: 14px 18px 18px; } .qr-manual input { flex: 1; border-radius: 8px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; padding: 10px 12px; font-family: var(--font-mono); font-size: 13.5px; } .qr-manual input::placeholder { color: rgba(255,255,255,.45); } .qr-manual button { background: var(--petrol-500); color: #fff; border: none; border-radius: 8px; padding: 0 16px; font-weight: 600; cursor: pointer; font-size: 13.5px; } .qr-result { display: none; background: var(--surface); padding: 22px 20px 20px; } .qr-result.is-visible { display: block; } .qr-result__codigo { font-family: var(--font-mono); font-size: 12px; color: var(--text-400); margin-bottom: 4px; } .qr-result__produto { font-size: 19px; margin-bottom: 4px; } .qr-result__meta { font-size: 13.5px; color: var(--text-600); margin-bottom: 14px; } .qr-result__actions { display: flex; gap: 10px; } .qr-result__actions .btn { flex: 1; justify-content: center; } .qr-result__again { display: block; margin: 14px auto 0; background: none; border: none; color: var(--accent-text); font-weight: 600; font-size: 13px; cursor: pointer; text-align: center; } /* ------------------------------------------------------------------------- Cards de etiqueta para celular — cozinheiro usa no aparelho, precisa ser grande, direto e tocável de primeira, sem tabela pra espremer o dedo. Some abaixo de 720px, no lugar da tabela (ver .table-scroll). ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- Ficha de etiqueta — a lista de Vencimentos no formato da própria etiqueta impressa, pra bater o olho e reconhecer na hora. Usada em qualquer tamanho de tela (não é só uma versão mobile). ------------------------------------------------------------------------- */ .etiqueta-fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .etiqueta-ficha { --accent: var(--text-400); --accent-bg: var(--paper-100); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; } .etiqueta-ficha--fresh { --accent: var(--fresh-500); --accent-bg: var(--fresh-100); } .etiqueta-ficha--amber { --accent: var(--amber-500); --accent-bg: var(--amber-100); } .etiqueta-ficha--red { --accent: var(--red-500); --accent-bg: var(--red-100); } .etiqueta-ficha__header { background: var(--accent-bg); padding: 14px 14px 12px 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); } .etiqueta-ficha__titulo { font-size: 17px; font-weight: 700; color: var(--heading); line-height: 1.25; } .etiqueta-ficha__subtitulo { font-size: 12.5px; color: var(--text-600); margin-top: 3px; } .etiqueta-ficha__excluir { flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--text-400); padding: 4px; border-radius: 6px; } .etiqueta-ficha__excluir:hover { color: var(--red-500); background: var(--red-100); } .etiqueta-ficha__check { flex-shrink: 0; display: flex; align-items: center; padding-top: 2px; } .etiqueta-ficha__check input { width: 18px; height: 18px; accent-color: var(--accent-text); cursor: pointer; } .etiqueta-ficha.is-selecionada { outline: 2px solid var(--petrol-600); outline-offset: -1px; } /* Barra de ações em massa — só some quando ninguém está selecionado. */ .bulk-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--ink-900); color: #fff; border-radius: 12px; padding: 12px 18px; margin-bottom: 16px; } .bulk-bar[hidden] { display: none; } .bulk-bar__check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; } .bulk-bar__check input { width: 18px; height: 18px; accent-color: var(--brand-blue-300); cursor: pointer; } .bulk-bar__actions { display: flex; gap: 8px; flex-wrap: wrap; } .bulk-bar .btn-ghost { background: transparent; border-color: rgba(255,255,255,.3); color: #EAF0FB; } .bulk-bar .btn-ghost:hover { background: rgba(255,255,255,.12); } .bulk-bar__count { font-size: 13px; color: #BBCBEF; } .btn-danger { background: var(--red-500); color: #fff; } .btn-danger:hover { filter: brightness(.93); } .etiqueta-ficha__body { padding: 12px 16px 14px; flex: 1; } .etiqueta-ficha__grupo { margin-bottom: 10px; } .etiqueta-ficha__grupo:last-child { margin-bottom: 0; } .etiqueta-ficha__linha { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; padding: 3px 0; } .etiqueta-ficha__linha label { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-400); flex-shrink: 0; } .etiqueta-ficha__linha span { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-900); text-align: right; } .etiqueta-ficha__linha span:empty::before { content: '—'; color: var(--text-400); } .etiqueta-ficha__status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--accent); margin-top: 4px; } .etiqueta-ficha__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .etiqueta-ficha__footer { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); } .etiqueta-ficha__footer .btn { flex: 1; justify-content: center; padding: 9px 12px; font-size: 13px; } /* Botão flutuante — atalho de uma tocada pra ação principal da tela, sempre visível mesmo com a lista rolando. Só existe no mobile: no desktop já tem o botão equivalente fixo no cabeçalho da página. */ .fab-button { display: none; position: fixed; right: 18px; bottom: 22px; width: 58px; height: 58px; border: none; border-radius: 50%; background: var(--petrol-700); color: #fff; align-items: center; justify-content: center; box-shadow: 0 10px 24px -6px rgba(16,73,91,.55); z-index: 25; cursor: pointer; } .fab-button:active { background: var(--petrol-800); } /* Variante "principal" — ação de maior destaque de uma tela (ex.: Nova etiqueta no Dashboard), com o gradiente da marca em vez da cor sólida padrão, pra ficar visualmente diferente de um FAB "utilitário" (como o scanner de QR code em Vencimentos) e chamar mais atenção. */ .fab-button--principal { background: linear-gradient(135deg, #6C93F7, #2F62F0); box-shadow: 0 10px 26px -6px rgba(47,98,240,.55), 0 0 0 0 rgba(47,98,240,.35); animation: fabPrincipalPulse 2.4s ease-in-out infinite; } .fab-button--principal:active { background: linear-gradient(135deg, #5c81de, #2451c9); } @keyframes fabPrincipalPulse { 0%, 100% { box-shadow: 0 10px 26px -6px rgba(47,98,240,.55), 0 0 0 0 rgba(47,98,240,.35); } 50% { box-shadow: 0 10px 26px -6px rgba(47,98,240,.55), 0 0 0 10px rgba(47,98,240,0); } } /* Variante "etiqueta" — só o FAB de Nova etiqueta do Dashboard, em verde escuro pra remeter a segurança alimentar/"tudo certo" e se diferenciar do azul padrão usado nos FABs "principal" das outras telas (Catálogo). */ .fab-button--etiqueta { background: linear-gradient(135deg, #1F7A4D, #0E4A2C); box-shadow: 0 10px 26px -6px rgba(14,74,44,.55), 0 0 0 0 rgba(14,74,44,.35); animation: fabEtiquetaPulse 2.4s ease-in-out infinite; } .fab-button--etiqueta:active { background: linear-gradient(135deg, #18613e, #0a3a22); } @keyframes fabEtiquetaPulse { 0%, 100% { box-shadow: 0 10px 26px -6px rgba(14,74,44,.55), 0 0 0 0 rgba(14,74,44,.35); } 50% { box-shadow: 0 10px 26px -6px rgba(14,74,44,.55), 0 0 0 10px rgba(14,74,44,0); } } /* ------------------------------------------------------------------------- Criação rápida de etiqueta — a tela que o cozinheiro mais usa no dia. Menos campos, alvos grandes, atalhos por toque em vez de digitação. ------------------------------------------------------------------------- */ .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 24px 24px 28px; max-width: 560px; } .form-section { margin-bottom: 22px; } .form-section:last-child { margin-bottom: 0; } .form-section__label { font-size: 12.5px; font-weight: 600; color: var(--text-600); margin-bottom: 10px; display: block; } .quick-chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { border: 1px solid var(--line); background: var(--paper-100); color: var(--text-900); border-radius: 999px; padding: 10px 16px; font-size: 13.5px; font-weight: 500; cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; } .chip:hover { background: var(--paper-100); } .chip.is-active { background: var(--petrol-700); border-color: var(--accent-text); color: #fff; } .chip--duration { font-family: var(--font-mono); } .field-select { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font-family: var(--font-body); font-size: 14.5px; color: var(--text-900); background: var(--surface); min-height: 46px; } .field-select:focus { outline: none; border-color: var(--petrol-500); box-shadow: 0 0 0 3px var(--petrol-100); } .readonly-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--paper-100); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px 6px 6px; font-size: 13.5px; color: var(--text-900); font-weight: 500; } .readonly-pill .avatar { width: 26px; height: 26px; font-size: 10.5px; } .readonly-pill__hint { color: var(--text-400); font-weight: 400; margin-left: 2px; } .custom-datetime { display: none; margin-top: 10px; } .custom-datetime.is-visible { display: block; } .custom-datetime input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font-family: var(--font-body); font-size: 14.5px; min-height: 46px; } .form-card__submit { margin-top: 26px; } /* ------------------------------------------------------------------------- Wizard de nova etiqueta — categoria → produto → local de guarda, em blocos grandes de toque (como o sistema antigo), com busca pra pular direto ao produto. Feito pra quem está em pé, com o celular na mão. ------------------------------------------------------------------------- */ .wizard { width: 100%; } .wizard__responsavel { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .wizard__responsavel-label { font-size: 12.5px; color: var(--text-400); } .wizard__search { position: relative; margin-bottom: 18px; } .wizard__search .field-input { padding: 13px 16px; } .wizard__search input { font-size: 15px; } #wizard-mic-btn { flex-shrink: 0; } #wizard-mic-btn.is-listening { background: var(--red-500); color: #fff; animation: wizardMicPulse 1.2s ease-in-out infinite; } @keyframes wizardMicPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(214,69,69,.45); } 50% { box-shadow: 0 0 0 8px rgba(214,69,69,0); } } .wizard__mic-status { margin: 8px 2px 0; font-size: 12.5px; color: var(--accent-text); font-weight: 600; cursor: pointer; } .wizard__mic-status.is-erro { color: var(--red-500); } .wizard__search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-pop); max-height: 320px; overflow-y: auto; z-index: 30; display: none; } .wizard__search-results.is-open { display: block; } .wizard__search-result { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: none; border: none; cursor: pointer; padding: 12px 16px; text-align: left; font-size: 14px; color: var(--text-900); border-bottom: 1px solid var(--paper-100); } .wizard__search-result:last-child { border-bottom: none; } .wizard__search-result:hover { background: var(--paper-100); } .wizard__search-result span { color: var(--text-400); font-size: 12.5px; } .wizard__search-empty { padding: 16px; color: var(--text-400); font-size: 13.5px; } .wizard__search-empty--aviso { color: var(--red-500); } .wizard__search-empty--aviso strong { color: var(--text-900); } .wizard__crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; } .crumb { background: none; border: none; font-size: 13px; font-weight: 600; color: var(--text-400); cursor: default; padding: 4px 2px; } .crumb.is-done { color: var(--accent-text); cursor: pointer; } .crumb.is-done:hover { text-decoration: underline; } .crumb.is-active { color: var(--text-900); } .crumb__sep { color: var(--text-400); font-size: 13px; } .wizard__panel { display: none; } .wizard__panel.is-active { display: block; } .wizard__step-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 4px; } .wizard__step-title { font-size: 19px; margin: 0 0 18px; } .wizard__back { display: inline-flex; align-items: center; gap: 8px; background: var(--paper-100); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; color: var(--text-900); font-weight: 600; font-size: 13.5px; padding: 9px 14px; margin-bottom: 18px; } .wizard__back:hover { background: var(--paper-100); } .wizard__panel-title { display: none; } /* substituído por wizard__step-eyebrow */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; } .tile { background: var(--paper-100); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; min-height: 84px; padding: 16px 20px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; text-align: left; transition: border-color .12s ease, background .12s ease, transform .06s ease, box-shadow .12s ease; } .tile:hover { border-color: var(--petrol-500); background: var(--surface); box-shadow: var(--shadow-card); } .tile:active { transform: scale(.98); } .tile__label { font-weight: 700; font-size: 16px; color: var(--text-900); line-height: 1.25; } .tile__meta { font-size: 12.5px; color: var(--text-600); } .tile-grid--local .tile__meta { display: inline-block; font-family: var(--font-mono); font-size: 12px; color: var(--accent-text); background: var(--petrol-100); border-radius: 999px; padding: 2px 9px; } .wizard__toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px); background: var(--ink-900); color: #fff; border-radius: 12px; padding: 14px 20px; display: flex; align-items: center; gap: 10px; box-shadow: 0 14px 34px -10px rgba(10,24,48,.5); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 60; max-width: calc(100vw - 32px); } .wizard__toast.is-visible { opacity: 1; transform: translate(-50%, 0); } .wizard__toast-icon { width: 26px; height: 26px; border-radius: 50%; background: var(--fresh-500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .wizard__toast-text { font-size: 13.5px; line-height: 1.35; } .wizard__toast-text strong { display: block; font-size: 14px; } /* Aviso (etiqueta salva, mas algo pede atenção -- ex.: não saiu pra impressora) e erro (nada foi salvo) -- o mesmo toast, só troca de cor, pra nunca parecer "deu tudo certo" quando não deu. */ .wizard__toast.is-aviso .wizard__toast-icon { background: var(--amber-500); } .wizard__toast.is-erro .wizard__toast-icon { background: var(--red-500); } /* Impressão de etiqueta ("Impressão normal", modo navegador) — o resto da tela (sidebar, topbar, wizard) some, só o(s) bloco(s) de etiqueta em #print-labels aparece(m). Sem isso, window.print() imprimia a página inteira do app, não uma etiqueta de verdade. */ .only-print { display: none; } @media print { html, body { background: #fff !important; } body * { visibility: hidden; } #print-labels, #print-labels * { visibility: visible; } #print-labels { display: block; position: absolute; top: 0; left: 0; width: 100%; } /* Mesmo desenho do ZPL/PDF (print_service.php): produto sempre grande, corpo que estica/encolhe conforme o número de linhas (--escala, posta pelo app.js) e rodapé preso no fim da etiqueta. */ .print-label { --escala: 1; box-sizing: border-box; width: 100%; padding: 4mm; font-family: Arial, Helvetica, sans-serif; color: #000; line-height: 1.2; display: flex; flex-direction: column; page-break-after: always; overflow: hidden; } .print-label:last-child { page-break-after: auto; } .print-label__topo { display: flex; flex-direction: column; gap: 1px; } .print-label__produto { font-size: 17px; font-weight: 700; line-height: 1.15; } .print-label__metodo { font-size: 9px; } .print-label__metodo:empty { display: none; } .print-label__regua { border-top: 1px solid #000; margin: 4px 0; } .print-label__corpo { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-evenly; min-height: 0; } .print-label__linha { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: calc(9px * var(--escala)); font-weight: 600; } .print-label__linha--fixa { font-size: calc(10.5px * var(--escala)); font-weight: 700; } .print-label__linha b { text-align: right; white-space: nowrap; } .print-label__linha[hidden] { display: none; } .print-label__resp { font-size: calc(9px * var(--escala)); margin: 0 0 6px; } .print-label__rodape { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 6px; } .print-label__empresa { display: flex; flex-direction: column; font-size: 7px; line-height: 1.35; min-width: 0; } .print-label__empresa strong { font-size: 8px; font-weight: 700; } .print-label__qr { width: 20mm; height: 20mm; flex-shrink: 0; } .print-label__codigo { font-size: 13px; font-weight: 700; margin-top: 3px; } } /* ------------------------------------------------------------------------- Etapa final — confira e imprima. Reproduz o "etiquetafin.php" antigo: dados complementares da etiqueta, anexo de rastreio e quantidade, tudo antes de gerar. Aqui sim faz sentido centralizar como um recibo — as etapas de escolha (categoria/produto/local) usam a tela toda, mas conferir os dados é mais claro num cartão de largura controlada. ------------------------------------------------------------------------- */ .confirm-wrap { max-width: 640px; margin: 0 auto; } .confirm-eyebrow { text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 4px; } .confirm-subtitle { text-align: center; font-size: 13.5px; color: var(--text-600); margin: 0 0 20px; } .confirm-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 24px 26px 28px; } .confirm-card__title { font-size: 20px; margin-bottom: 2px; } .confirm-card__subtitle { font-size: 13.5px; color: var(--text-600); margin-bottom: 20px; } .confirm-row { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--paper-100); } .confirm-row:last-of-type { border-bottom: none; } .confirm-row label { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-600); } .confirm-row__value { font-size: 14px; color: var(--text-900); } .confirm-group { display: flex; gap: 8px; } .confirm-group input[type="date"], .confirm-group input[type="time"] { border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font-family: var(--font-body); font-size: 13.5px; min-height: 40px; } .confirm-group input[type="date"] { flex: 1.3; } .confirm-group input[type="time"] { flex: 1; } .confirm-input, .confirm-select { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font-family: var(--font-body); font-size: 13.5px; min-height: 40px; background: var(--surface); } .confirm-input:focus, .confirm-select:focus, .confirm-group input:focus { outline: none; border-color: var(--petrol-500); box-shadow: 0 0 0 3px var(--petrol-100); } .confirm-peso { display: flex; gap: 8px; } .confirm-peso .confirm-input { flex: 1; } .confirm-peso .confirm-select { width: 78px; flex-shrink: 0; } .confirm-upload { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .confirm-upload h3 { font-size: 14px; margin-bottom: 10px; } .dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1.5px dashed var(--line); border-radius: 10px; padding: 22px; text-align: center; cursor: pointer; color: var(--text-600); font-size: 13px; background: var(--paper-100); transition: border-color .12s ease, background .12s ease; } .dropzone:hover, .dropzone.is-dragover { border-color: var(--petrol-500); background: var(--petrol-100); } .dropzone svg { color: var(--text-400); flex-shrink: 0; } .dropzone strong { color: var(--accent-text); } .dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .dropzone-preview { display: none; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-top: 10px; font-size: 13.5px; } .dropzone-preview.is-visible { display: flex; } .dropzone-preview__remove { background: none; border: none; color: var(--red-500); cursor: pointer; font-size: 12.5px; font-weight: 600; } /* ------------------------------------------------------------------------- Pré-visualização da etiqueta (Nova etiqueta → Confirmar) — imita o layout real impresso (barra preta pro nome do produto e validade, linhas simples pro resto) e atualiza ao vivo enquanto a pessoa preenche o formulário. Linha sem conteúdo simplesmente não aparece (ver [data-linha-preview] no app.js). ------------------------------------------------------------------------- */ .etiqueta-preview-wrap { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); } .etiqueta-preview-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-400); margin: 0 0 10px; text-align: center; } .etiqueta-preview { max-width: 300px; margin: 0 auto; background: #fff; /* simula o papel da etiqueta — branco nos dois temas */ border: 1px solid #101E20; padding: 10px 12px; font-family: var(--font-body); color: #101418; } .etiqueta-preview__produto { font-size: 13.5px; font-weight: 700; text-transform: uppercase; line-height: 1.25; } .etiqueta-preview__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 3px; font-size: 11px; text-transform: uppercase; } .etiqueta-preview__peso { font-weight: 700; flex-shrink: 0; } .etiqueta-preview__regua { border-top: 1px solid #101418; margin: 6px 0; } .etiqueta-preview__linha { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 2px 0; font-size: 11px; text-transform: uppercase; } .etiqueta-preview__linha[hidden] { display: none; } .etiqueta-preview__label { color: #4A5D5F; font-weight: 600; flex-shrink: 0; } .etiqueta-preview__valor { text-align: right; color: #101418; font-weight: 700; word-break: break-word; } .etiqueta-preview__rodape { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: 4px; } .etiqueta-preview__resp { font-size: 10.5px; font-weight: 600; text-transform: uppercase; } .etiqueta-preview__qr { width: 30px; height: 30px; background: #fff; flex-shrink: 0; } .confirm-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .confirm-footer input[type="number"] { width: 64px; text-align: center; border: 1px solid var(--line); border-radius: 8px; padding: 9px; font-size: 14px; min-height: 42px; } .confirm-footer .btn { padding: 11px 20px; } .confirm-back { margin-bottom: 16px; } @media (max-width: 560px) { .confirm-card { padding: 18px 16px 22px; } .confirm-row { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; } .confirm-footer { flex-wrap: wrap; } .confirm-footer .btn { flex: 1; } } @media (max-width: 480px) { .tile-grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------------- Configurações — navegação em abas + cards de conteúdo. ------------------------------------------------------------------------- */ .settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; } .settings-nav { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 88px; } .settings-nav__item { display: flex; align-items: center; gap: 10px; background: none; border: none; text-align: left; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--text-600); cursor: pointer; } .settings-nav__item svg { flex-shrink: 0; opacity: .8; } .settings-nav__item:hover { background: var(--paper-100); color: var(--text-900); } .settings-nav__item.is-active { background: var(--petrol-100); color: var(--accent-text); } .settings-nav__item.is-active svg { opacity: 1; } .settings-content { min-width: 0; } .settings-panel { display: none; } .settings-panel.is-active { display: block; } .settings-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card); padding: 22px 24px 24px; margin-bottom: 18px; } .settings-card__title { font-size: 15.5px; margin-bottom: 3px; } .settings-card__desc { font-size: 13px; color: var(--text-600); margin-bottom: 18px; } .settings-card__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } .settings-card__row--logo { grid-template-columns: 160px 1fr; align-items: start; } .settings-card__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; } /* Toggle liga/desliga — pra notificações e monitoramento */ .settings-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--paper-100); } .settings-switch:last-child { border-bottom: none; } .settings-switch__text strong { display: block; font-size: 13.5px; color: var(--text-900); } .settings-switch__text span { font-size: 12.5px; color: var(--text-600); } .switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; } .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .switch__track { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background .15s ease; pointer-events: none; } .switch__track::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s ease; } .switch input:checked + .switch__track { background: var(--fresh-500); } .switch input:checked + .switch__track::before { transform: translateX(18px); } .switch input:focus-visible + .switch__track { outline: 2px solid var(--petrol-500); outline-offset: 2px; } /* Seletor de modo de impressão — duas opções grandes, tipo cartão */ .mode-select { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; } .mode-option { border: 1.5px solid var(--line); border-radius: 10px; padding: 14px 16px; cursor: pointer; position: relative; } .mode-option input { position: absolute; opacity: 0; width: 1px; height: 1px; } .mode-option__title { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; } .mode-option__desc { font-size: 12.5px; color: var(--text-600); margin-top: 4px; } .mode-option__radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; position: relative; } .mode-option input:checked ~ .mode-option__radio { border-color: var(--accent-text); } .mode-option input:checked ~ .mode-option__radio::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--petrol-600); } .mode-option:has(input:checked) { border-color: var(--petrol-500); background: var(--petrol-100); } /* Listas de dispositivos / impressoras (Bridge) */ .device-list, .printer-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; } .device-item, .printer-item { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; } .device-item__dot, .printer-item__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-400); flex-shrink: 0; } .device-item__dot.is-online { background: var(--fresh-500); } .device-item__body, .printer-item__body { flex: 1; min-width: 0; } .device-item__nome, .printer-item__nome { font-weight: 600; font-size: 13.5px; } .device-item__meta, .printer-item__meta { font-size: 12px; color: var(--text-600); font-family: var(--font-mono); } .printer-item__badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent-text); background: var(--petrol-100); border-radius: 999px; padding: 3px 9px; flex-shrink: 0; } .printer-item__default { font-size: 11px; font-weight: 700; color: var(--fresh-600); flex-shrink: 0; } .device-item__actions, .printer-item__actions { display: flex; gap: 4px; flex-shrink: 0; } /* Fila de impressão (Ajustes > Impressão) -- lista compacta status + quando + botão Reimprimir só nas linhas que falharam. */ .printer-jobs-list { display: flex; flex-direction: column; gap: 8px; } .printer-jobs-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; } .printer-jobs-item__info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; } .printer-jobs-item__meta { font-size: 12px; color: var(--text-600); } @media (max-width: 500px) { .printer-jobs-item { flex-wrap: wrap; } } /* No celular não cabe tudo numa linha só (nome + badge + "Padrão" + 3 botões de ação) — em vez de espremer cada palavra numa linha, o nome ganha a largura toda numa linha e o resto (badge/ações) desce pra segunda linha. */ @media (max-width: 500px) { .device-item, .printer-item { flex-wrap: wrap; } .device-item__body, .printer-item__body { flex-basis: 100%; } .printer-item__badge, .printer-item__default { margin-top: 4px; } } .add-inline { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; } .add-inline .field-input { flex: 1; min-width: 200px; padding: 9px 12px; } .add-inline input { font-size: 13.5px; } .bridge-download { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--paper-100); border-left: 4px solid var(--petrol-500); border-radius: 10px; padding: 16px 18px; margin-bottom: 20px; flex-wrap: wrap; } .bridge-download__text strong { display: block; font-size: 14px; } .bridge-download__text span { font-size: 12.5px; color: var(--text-600); } .token-mask { display: inline-block; font-family: var(--font-mono); font-size: 12px; color: var(--text-600); background: var(--paper-100); border-radius: 6px; padding: 2px 8px; word-break: break-all; max-width: 100%; vertical-align: bottom; } /* Sanitix Print Bridge — configuração em etapas numeradas, pra quem nunca instalou nada assim antes conseguir seguir sem se perder. */ .bridge-steps { display: flex; flex-direction: column; } .bridge-step { display: flex; gap: 18px; position: relative; padding-bottom: 28px; } .bridge-step:last-child { padding-bottom: 0; } .bridge-step:not(:last-child)::before { content: ''; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--line); } .bridge-step__num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--petrol-100); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; z-index: 1; } .bridge-step.is-done .bridge-step__num { background: var(--fresh-500); color: #fff; } .bridge-step__body { flex: 1; min-width: 0; padding-top: 4px; } .bridge-step__body h3 { font-size: 15px; font-weight: 700; color: var(--text-900); margin: 0 0 4px; } .bridge-step__body > p { font-size: 13px; color: var(--text-600); margin: 0 0 14px; line-height: 1.5; } .copy-box { display: flex; align-items: center; gap: 10px; background: var(--paper-100); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; max-width: 480px; } .copy-box code { font-family: var(--font-mono); font-size: 13.5px; color: var(--text-900); flex: 1; word-break: break-all; } .profile-list { display: flex; flex-direction: column; gap: 10px; } .profile-item { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; } .profile-item__icon { width: 38px; height: 38px; border-radius: 10px; background: var(--petrol-100); color: var(--accent-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .profile-item__body { flex: 1; min-width: 160px; } .profile-item__nome { font-weight: 700; font-size: 14px; } .profile-item__desc { font-size: 12.5px; color: var(--text-600); } .profile-item__count { font-size: 12.5px; color: var(--text-400); font-family: var(--font-mono); flex-shrink: 0; } .profile-item.is-inativo { opacity: .55; } /* Zebra bem leve — ajuda o olho a acompanhar a linha numa lista longa, sem competir com as cores de status (ativo/inativo, etc). Vale pra qualquer lista que use esse componente (Funcionários, Perfis, Chamados, Mensagens, Configurações, Checklists...). */ .profile-item:nth-child(even) { background: var(--paper-50); } .profile-item__grupo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent-text); background: var(--petrol-100); border-radius: 999px; padding: 3px 9px; flex-shrink: 0; } /* Agrupa status/contagem e ações num wrapper próprio pra dar pra jogar pra uma linha nova no celular (ver media query abaixo) sem precisar de nenhuma lista separada, como foi preciso no Catálogo — aqui o próprio card sabe se reorganizar. */ .profile-item__meta, .profile-item__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; } @media (max-width: 720px) { .profile-item__meta, .profile-item__actions { flex-basis: 100%; margin-left: 52px; /* alinha com o texto, pulando a largura do avatar/ícone */ } } /* ------------------------------------------------------------------------- Formulário de perfil — permissões agrupadas por área. As flags do banco são a fonte de verdade de acesso (não o nome do perfil). ------------------------------------------------------------------------- */ .perm-groups { display: flex; flex-direction: column; gap: 20px; } .perm-group__title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-400); margin-bottom: 10px; } .perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; } .perm-item { display: flex; align-items: center; gap: 9px; padding: 7px 4px; font-size: 13.5px; color: var(--text-900); cursor: pointer; } .perm-item input { width: 17px; height: 17px; accent-color: var(--accent-text); cursor: pointer; flex-shrink: 0; } /* ------------------------------------------------------------------------- Documentos da empresa — grid de cartões por tipo (Alvará, Licença Sanitária, Dedetização etc.), cada um com a cor da borda batendo com o status de validade (mesma paleta de status-dot). ------------------------------------------------------------------------- */ .doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; } .doc-card { border: 1px solid var(--line); border-left: 3px solid var(--text-400); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background: var(--paper-50); } .doc-card--fresh { border-left-color: var(--fresh-500); } .doc-card--amber { border-left-color: var(--amber-500); } .doc-card--red { border-left-color: var(--red-500); } .doc-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .doc-card__nome { font-weight: 700; font-size: 14px; color: var(--text-900); } .doc-card__ident { display: block; font-weight: 500; font-size: 12px; color: var(--text-600); margin-top: 1px; } .doc-card__meta { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--text-600); } .doc-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .doc-card__actions .btn { padding: 6px 12px; font-size: 12.5px; } .doc-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .doc-card__historico, .doc-card__add-link { font-size: 12px; color: var(--accent-text); font-weight: 600; } /* ------------------------------------------------------------------------- Documentos agrupados — quando um mesmo tipo tem mais de um documento (ex.: duas dedetizações, vários extintores), todos ficam num único quadrado, cada um como um mini-card interno com seu próprio status. O quadrado ocupa a linha inteira do grid pra os mini-cards respirarem. ------------------------------------------------------------------------- */ .doc-card--group { grid-column: 1 / -1; } .doc-card__count { flex-shrink: 0; font-size: 11.5px; font-weight: 600; color: var(--text-600); background: var(--paper-100); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; } .doc-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 2px; } .doc-item { border: 1px solid var(--line); border-left: 3px solid var(--text-400); border-radius: 9px; background: var(--surface); padding: 11px 13px; display: flex; flex-direction: column; gap: 7px; } .doc-item--fresh { border-left-color: var(--fresh-500); } .doc-item--amber { border-left-color: var(--amber-500); } .doc-item--red { border-left-color: var(--red-500); } .doc-item__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .doc-item__title { font-weight: 700; font-size: 13px; color: var(--text-900); line-height: 1.3; } .doc-item__meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-600); } .doc-item__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 2px; } .doc-item__actions .btn { padding: 5px 10px; font-size: 12px; } .doc-item__historico { font-size: 12px; color: var(--accent-text); font-weight: 600; margin-left: auto; } .doc-card__footer--group { justify-content: space-between; margin-top: 2px; } .hist-substituido { font-size: 11px; color: var(--text-400); margin-left: 6px; font-style: italic; } /* Histórico em cards pro celular — a tabela (.table-scroll) some em ≤720px, então sem isto o "Ver histórico" ficava sem nada visível no celular. */ .hist-mobile-list { display: none; } .hist-item { border: 1px solid var(--line); border-left: 3px solid var(--text-400); border-radius: 9px; background: var(--surface); padding: 11px 13px; display: flex; flex-direction: column; gap: 7px; } .hist-item + .hist-item { margin-top: 10px; } .hist-item--fresh { border-left-color: var(--fresh-500); } .hist-item--amber { border-left-color: var(--amber-500); } .hist-item--red { border-left-color: var(--red-500); } .hist-item__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .hist-item__head .status-dot { flex-shrink: 0; white-space: nowrap; } .hist-item__title { font-weight: 700; font-size: 13.5px; color: var(--text-900); line-height: 1.3; flex: 1; min-width: 0; overflow-wrap: anywhere; } .hist-item__meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-600); } .hist-item__meta .hist-substituido { margin-left: 0; } .hist-item__actions { margin-top: 2px; } .hist-item__actions .btn { padding: 6px 12px; font-size: 12.5px; } @media (max-width: 720px) { .hist-mobile-list { display: block; } } .hist-item__check { display: flex; align-items: center; gap: 8px; min-width: 0; } .hist-item__check input { flex-shrink: 0; } .btn-excluir-sel:not(:disabled) { color: var(--red-500); } .btn-excluir-sel:disabled { opacity: .5; cursor: default; } /* Documentos complementares (anexos ligados a uma emissão) — listados embaixo do documento no card e no histórico, com o link pra adicionar. */ .doc-card__compl, .doc-item__compl { display: flex; flex-direction: column; gap: 4px; } .doc-compl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 12px; } .doc-compl__label { color: var(--text-600); font-weight: 600; } .doc-compl__item { color: var(--accent-text); font-weight: 600; } .doc-compl__item + .doc-compl__item::before { content: ""; } .doc-compl--hist { margin-top: 4px; } .doc-compl__add { font-size: 12px; color: var(--accent-text); font-weight: 600; align-self: flex-start; } /* Editar documento em tela cheia: dados à esquerda, complementares à direita (empilha no celular). */ .doc-edit-layout { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; } .doc-edit-form { flex: 1 1 520px; min-width: 0; } .doc-edit-side { flex: 1 1 340px; min-width: 0; } .doc-compl-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; } .doc-compl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; background: var(--surface); } .doc-compl-row__info { min-width: 0; } .doc-compl-row__info strong { font-size: 13px; color: var(--text-900); } .doc-compl-row__meta { display: block; font-size: 11.5px; color: var(--text-600); } .doc-compl-row__acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .doc-compl-row__acts .btn { padding: 5px 10px; font-size: 12px; } .doc-compl-add { border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 4px; display: flex; flex-direction: column; gap: 10px; } /* "Adicionar outro documento fora da lista" — um por grupo (quadradão). */ .doc-add-tipo { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); } .doc-add-tipo__form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .doc-add-tipo__form .field-input { flex: 1 1 260px; max-width: 420px; } /* ------------------------------------------------------------------------- Mural de avisos (Dashboard) — cartões coloridos por tipo, ver mensagens.php/tiposMensagem(). Empilha com um respiro pequeno entre eles, e some com uma transição suave ao dispensar (ver app.js). ------------------------------------------------------------------------- */ .avisos-mural { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; } .aviso-card { --accent: var(--brand-blue-500); --accent-bg: var(--brand-blue-100); display: flex; align-items: flex-start; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow-card); } .aviso-card--blue { --accent: var(--brand-blue-500); --accent-bg: var(--brand-blue-100); } .aviso-card--amber { --accent: var(--amber-500); --accent-bg: var(--amber-100); } .aviso-card--red { --accent: var(--red-500); --accent-bg: var(--red-100); } .aviso-card__icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--accent-bg); color: var(--accent); } .aviso-card__body { flex: 1; min-width: 0; } .aviso-card__titulo { font-weight: 700; font-size: 14.5px; color: var(--text-900); margin-bottom: 3px; } .aviso-card__texto { font-size: 13.5px; color: var(--text-600); line-height: 1.5; white-space: pre-wrap; } .aviso-card__fechar { flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--text-400); padding: 4px; border-radius: 6px; display: flex; } .aviso-card__fechar:hover { background: var(--paper-100); color: var(--text-600); } /* ------------------------------------------------------------------------- Chamados (Suporte) — anexos (foto/vídeo/áudio) e a conversa em si (bolhas tipo chat, uma cor pra você, outra pro suporte). ------------------------------------------------------------------------- */ .anexos-chamado__botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .anexos-chamado__botoes .btn { font-size: 12.5px; padding: 7px 12px; } .anexos-chamado__botoes .btn.is-gravando { background: var(--red-100); border-color: var(--red-500); color: var(--red-700); animation: chamadoPulso 1.1s ease-in-out infinite; } @keyframes chamadoPulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(226,54,54,.35); } 50% { box-shadow: 0 0 0 6px rgba(226,54,54,0); } } .anexos-chamado__lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .anexo-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--paper-100); border: 1px solid var(--line); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 12px; color: var(--text-900); max-width: 220px; } .anexo-chip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .anexo-chip button { flex-shrink: 0; border: none; background: var(--paper-200); border-radius: 50%; width: 18px; height: 18px; line-height: 1; cursor: pointer; color: var(--text-600); font-size: 13px; } .anexo-chip button:hover { background: var(--red-100); color: var(--red-500); } .chamado-thread { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; } .chamado-linha { display: flex; gap: 10px; max-width: 84%; align-items: flex-start; } .chamado-linha--usuario { align-self: flex-end; flex-direction: row-reverse; } .chamado-linha--admin { align-self: flex-start; } .chamado-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; margin-top: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--petrol-800, var(--ink-900)); color: #fff; font-weight: 800; font-size: 13px; } .chamado-avatar--admin { background: var(--fresh-500); } .chamado-msg { min-width: 0; border-radius: 14px; padding: 12px 14px; font-size: 13.5px; } .chamado-msg--usuario { background: var(--petrol-800, var(--ink-900)); color: #fff; border-bottom-right-radius: 4px; } .chamado-msg--admin { background: var(--paper-100); color: var(--text-900); border-bottom-left-radius: 4px; border: 1px solid var(--line); } .chamado-evento { align-self: center; font-size: 11.5px; color: var(--text-400); background: var(--paper-50); border: 1px dashed var(--line); border-radius: 999px; padding: 4px 12px; text-align: center; max-width: 92%; } .chamado-evento--ok { color: var(--fresh-500); border-color: var(--fresh-500); } .chamado-msg__meta { font-size: 11px; opacity: .7; margin-bottom: 4px; font-weight: 600; } .chamado-msg__texto { white-space: pre-wrap; line-height: 1.45; } .chamado-msg__anexos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .chamado-anexo-img { max-width: 160px; max-height: 160px; border-radius: 8px; display: block; object-fit: cover; } .chamado-anexo-video { max-width: 240px; border-radius: 8px; display: block; } .chamado-anexo-audio { max-width: 240px; } .chamado-estrelas { display: flex; gap: 4px; } .chamado-estrelas button { background: none; border: none; cursor: pointer; font-size: 26px; line-height: 1; color: var(--line); padding: 0; } .chamado-estrelas button.is-ativa { color: #ffbe3f; } .perfil-form-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 4px; } .status-pill { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-radius: 999px; padding: 3px 10px; flex-shrink: 0; } .status-pill--ativo { color: var(--fresh-600); background: var(--fresh-100); } .status-pill--inativo { color: var(--text-400); background: var(--paper-100); } .status-pill--conforme { color: var(--fresh-600); background: var(--fresh-100); } .status-pill--nao-conforme { color: var(--red-500); background: var(--red-100); } /* ------------------------------------------------------------------------- Ronda de temperatura (temperaturas.php, aba Equipamentos) — checklist de todos os equipamentos de uma rodada, preenche vários e envia de uma vez. ------------------------------------------------------------------------- */ .temp-ronda-quem { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-600); background: var(--paper-100); border-radius: 999px; padding: 6px 12px; white-space: nowrap; } .temp-ronda-quem svg { flex-shrink: 0; color: var(--petrol-500); } .temp-ronda-quem__sep { color: var(--text-400); } .temp-rodada-progresso { margin: 16px 0 18px; } .temp-rodada-progresso__barra { height: 8px; border-radius: 999px; background: var(--paper-100); overflow: hidden; margin-bottom: 6px; } .temp-rodada-progresso__fill { height: 100%; background: var(--petrol-500); border-radius: 999px; transition: width .3s ease; } .temp-rodada-progresso span { font-size: 12.5px; color: var(--text-600); } .temp-rodada-progresso strong { color: var(--text-900); } .temp-checklist { display: flex; flex-direction: column; gap: 8px; } .temp-checklist__item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-50); } .temp-checklist__item.is-feito { background: var(--surface); border-color: var(--fresh-100); } .temp-checklist__item.is-erro { background: var(--red-100); border-color: var(--red-500); } .field-input-plain.is-invalido { border-color: var(--red-500); background: var(--surface); } .temp-checklist__erro { font-size: 11.5px; font-weight: 600; color: var(--red-500); } .temp-checklist__nome { font-weight: 700; font-size: 13.5px; color: var(--text-900); display: flex; flex-direction: column; gap: 2px; min-width: 150px; } .temp-checklist__faixa { font-size: 11.5px; font-weight: 500; color: var(--text-400); } .temp-checklist__inputs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .temp-checklist__inputs[hidden] { display: none; } .field-input-plain { border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; font-size: 13px; font-family: inherit; } .temp-checklist__inputs input[name*="observacao"], .temp-checklist__inputs input[data-name*="observacao"] { width: 200px; } .temp-num-wrap { display: flex; align-items: center; gap: 6px; } .temp-num-wrap input { width: 110px; } .temp-sinal-btn { width: 32px; height: 34px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text-600); font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer; } .temp-sinal-btn:hover { background: var(--paper-100); border-color: var(--petrol-500); color: var(--accent-text); } .temp-checklist__pendente { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--amber-500); } .temp-checklist__resultado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .temp-checklist__resultado[hidden] { display: none; } .temp-checklist__meta { font-size: 11.5px; color: var(--text-400); } .temp-faixa-chip { font-size: 11px; font-weight: 600; color: var(--red-500); background: var(--red-100); padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .temp-faixa-chip strong { font-weight: 700; } .temp-checklist__editar-btn { border: none; background: none; padding: 0; font-size: 12px; font-weight: 700; color: var(--accent-text); cursor: pointer; text-decoration: underline; } /* ------------------------------------------------------------------------- Preencher checklist — Conforme / Não conforme / N/A no lugar da grade de 11 botões (0 a 10) do sistema antigo, que não explicava o que cada número significava. ------------------------------------------------------------------------- */ .checklist-progress { position: sticky; top: 0; background: var(--paper-50); padding: 10px 0 14px; z-index: 15; margin-bottom: 4px; } .checklist-progress__label { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-600); margin-bottom: 6px; font-family: var(--font-mono); } .checklist-progress__bar { height: 7px; border-radius: 999px; background: var(--paper-100); overflow: hidden; } .checklist-progress__fill { height: 100%; background: var(--petrol-600); width: 0%; transition: width .15s ease; } .check-category { margin-bottom: 26px; } .check-category__title { font-size: 15px; font-weight: 700; color: var(--heading); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .check-item { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; } .check-item.is-respondido { border-color: var(--fresh-500); } .check-item__pergunta { font-size: 14px; font-weight: 600; color: var(--text-900); margin-bottom: 10px; } .check-answers { display: flex; gap: 8px; flex-wrap: wrap; } .check-answer-btn { flex: 1; min-width: 108px; border: 1.5px solid var(--line); border-radius: 8px; padding: 10px 8px; text-align: center; font-weight: 600; font-size: 13px; cursor: pointer; background: var(--surface); color: var(--text-600); } .check-answer-btn:hover { border-color: var(--petrol-500); } .check-answer-btn.is-active[data-valor="conforme"] { background: var(--fresh-100); border-color: var(--fresh-500); color: var(--fresh-600); } .check-answer-btn.is-active[data-valor="nao_conforme"] { background: var(--red-100); border-color: var(--red-500); color: var(--red-500); } .check-answer-btn.is-active[data-valor="na"] { background: var(--paper-100); border-color: var(--text-400); color: var(--text-600); } .check-item__extra-toggle { display: inline-block; font-size: 12.5px; color: var(--accent-text); font-weight: 600; cursor: pointer; margin-top: 10px; background: none; border: none; padding: 0; } .check-item__extra { display: none; margin-top: 10px; gap: 10px; flex-direction: column; } .check-item__extra.is-open { display: flex; } .check-item__extra textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font-family: var(--font-body); font-size: 13.5px; resize: vertical; min-height: 64px; } .check-item__foto-preview { font-size: 12px; color: var(--text-600); } .checklist-resultado-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card); padding: 26px; text-align: center; max-width: 420px; margin: 0 auto; } .checklist-resultado-card__pct { font-family: var(--font-display); font-size: 44px; font-weight: 700; margin: 10px 0 4px; } .checklist-resultado-card__pct.is-bom { color: var(--fresh-600); } .checklist-resultado-card__pct.is-ruim { color: var(--red-500); } /* ------------------------------------------------------------------------- Catálogo (Categorias, Produtos, Locais) — busca ao vivo, reordenar por setas (sem precisar de biblioteca de arrastar-e-soltar) e linha vazia. ------------------------------------------------------------------------- */ .catalog-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; } .catalog-toolbar .field-input { flex: 1; min-width: 220px; padding: 9px 14px; } .catalog-toolbar .field-select { min-width: 180px; width: auto; } .reorder-btns { display: flex; flex-direction: column; gap: 1px; } .reorder-btns button { background: none; border: none; color: var(--text-400); cursor: pointer; padding: 1px 4px; line-height: 1; } .reorder-btns button:hover:not(:disabled) { color: var(--accent-text); } .reorder-btns button:disabled { opacity: .25; cursor: default; } /* Tempo de conservação — um card por método (Ambiente, Resfriada, Congelada... o nome vem do cadastro de Métodos), cada um com sua própria validade/faixa de temperatura pra este produto específico. */ .conservacao-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .conservacao-card { border: 1.5px solid var(--line); border-radius: 10px; padding: 14px; background: var(--paper-100); opacity: .6; transition: opacity .15s, border-color .15s, background .15s; } .conservacao-card.is-ativo { opacity: 1; border-color: var(--petrol-500); background: var(--surface); } .conservacao-card__header { margin-bottom: 10px; } .conservacao-card__meta { display: block; margin-top: 4px; font-size: 12px; color: var(--text-400); } .conservacao-card__toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; } .conservacao-card__body { display: flex; flex-direction: column; gap: 10px; } .conservacao-card__body .field { margin: 0; } .conservacao-card__body label { font-size: 12px; color: var(--text-600); font-weight: 600; display: block; margin-bottom: 4px; } .conservacao-card:not(.is-ativo) .conservacao-card__body { pointer-events: none; opacity: .5; } .catalog-empty-row td { text-align: center; color: var(--text-400); padding: 28px 0; } /* Lista em cards pro celular — a tabela (.table-scroll) some em telas estreitas (ver regra geral mais abaixo), e sem isso o Catálogo inteiro ficava sem nenhuma lista visível no celular. Os cards usam os MESMOS atributos data-nome/data-busca-extra/data-categoria-id das linhas da tabela, então a busca e o filtro de categoria (que já existiam) passam a filtrar os dois ao mesmo tempo sem precisar de nenhum JS novo. */ .catalog-mobile-list { display: none; } .catalog-item { display: flex; gap: 10px; padding: 14px 2px; border-bottom: 1px solid var(--line); } .catalog-item:last-child { border-bottom: none; } .catalog-item__reorder { flex-shrink: 0; padding-top: 2px; } .catalog-item__body { flex: 1; min-width: 0; } .catalog-item__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .catalog-item__nome { font-weight: 700; font-size: 14.5px; color: var(--text-900); } .catalog-item__meta { font-size: 12.5px; color: var(--text-600); margin-top: 2px; } .catalog-item__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .catalog-item__actions form { margin: 0; } .catalog-item.is-inativo { opacity: .6; } .catalog-empty-mobile { text-align: center; color: var(--text-400); padding: 28px 0; font-size: 13.5px; } @media (max-width: 720px) { .catalog-mobile-list { display: block; } } .catalog-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--line); } .catalog-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 10px 4px; margin-bottom: -1px; font-size: 14px; font-weight: 600; color: var(--text-600); cursor: pointer; } .catalog-tab.is-active { color: var(--accent-text); border-bottom-color: var(--accent-text); } .quick-add-toggle { font-size: 12.5px; color: var(--accent-text); font-weight: 600; cursor: pointer; background: none; border: none; padding: 0; margin-top: 6px; } .quick-add-panel { display: none; gap: 10px; align-items: flex-end; background: var(--paper-100); border-radius: 8px; padding: 12px; margin-top: 8px; flex-wrap: wrap; } .quick-add-panel.is-open { display: flex; } .quick-add-panel .field { margin-bottom: 0; flex: 1; min-width: 140px; } /* ------------------------------------------------------------------------- Formulário com preview ao vivo — usa a tela toda de um jeito útil (não só esticando um card vazio): enquanto a pessoa preenche à esquerda, a direita mostra como aquilo vai aparecer de verdade no sistema. ------------------------------------------------------------------------- */ .form-with-preview { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; } .form-preview { position: sticky; top: 88px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; box-shadow: var(--shadow-card); } .form-preview__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-400); margin-bottom: 14px; } .form-preview__tile { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: var(--paper-100); } .form-preview__tile-nome { font-weight: 700; font-size: 16px; color: var(--heading); line-height: 1.3; word-break: break-word; } .form-preview__tile-meta { font-size: 12.5px; color: var(--text-600); margin-top: 4px; } .form-preview__hint { font-size: 12px; color: var(--text-400); margin-top: 14px; line-height: 1.4; } /* Faixa de temperatura — indicador visual + preenchimento automático pelo método escolhido, editável por cima se o local precisar de algo diferente. */ .temp-range { margin: 4px 0 16px; } .temp-range__track { position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #2F62F0 0%, #6C93F7 22%, var(--fresh-500) 48%, var(--amber-500) 74%, var(--red-500) 100%); } .temp-range__highlight { position: absolute; top: -3px; bottom: -3px; border: 2px solid var(--ink-900); border-radius: 999px; background: rgba(255,255,255,.4); min-width: 12px; transition: left .12s ease, width .12s ease; } .temp-range__scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-400); font-family: var(--font-mono); margin-top: 5px; } .temp-range__value { text-align: center; font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; color: var(--heading); margin-top: 8px; } @media (max-width: 900px) { .form-with-preview { grid-template-columns: 1fr; } .form-preview { position: static; } } @media (max-width: 860px) { .settings-layout { grid-template-columns: 1fr; } .settings-nav { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; margin-bottom: 4px; } .settings-nav__item { white-space: nowrap; } .settings-card__row { grid-template-columns: 1fr; } .mode-select { grid-template-columns: 1fr; } } /* No celular, a ação principal fica fixa embaixo — sempre visível, sem precisar rolar até o fim do formulário pra confirmar. */ @media (max-width: 720px) { .form-card { padding: 18px 16px 90px; border: none; box-shadow: none; max-width: none; } .form-card__submit { display: none; } .sticky-action { position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); z-index: 25; } .sticky-action .btn { width: 100%; padding: 14px; font-size: 15px; } } @media (min-width: 721px) { .sticky-action { display: none; } } @media (max-width: 720px) { .table-scroll { display: none; } .fab-button { display: flex; } /* Nesse ponto o botão do cabeçalho vira redundante com o FAB — MAS só nas páginas que realmente têm um FAB (Dashboard, Vencimentos, Catálogo). Escondia sem essa condição em TODA página com `.page-header .btn-primary` (ex.: Funcionários, Documentos, Checklists...), sumindo com o botão de "+ Novo" no celular sem nenhum substituto — bug real, achado pela Priscilla em Funcionários. */ body:has(.fab-button) .page-header .btn-primary { display: none; } /* alvos de toque maiores — mãos ocupadas, sem tempo de mirar */ .icon-btn { width: 42px; height: 42px; } .nav-item { padding: 12px; font-size: 15px; } .btn { padding: 12px 18px; } } /* ------------------------------------------------------------------------- Login ------------------------------------------------------------------------- */ .login-screen { min-height: 100vh; min-height: 100dvh; /* encolhe com o teclado no tablet/celular (fallback: 100vh) */ display: flex; background: var(--ink-900); } .login-side { flex: 1.1; background: radial-gradient(600px 400px at 15% 20%, rgba(47,98,240,.16), transparent 60%), radial-gradient(700px 500px at 85% 85%, rgba(47,98,240,.30), transparent 60%), linear-gradient(160deg, var(--ink-900), var(--petrol-800)); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .login-side__brand { display: flex; align-items: center; gap: 10px; } .login-side__brand-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; } /* Logo do próprio restaurante (Ajustes > Dados da empresa) — cartão branco por baixo pra qualquer logo (fundo transparente, escuro, claro) ficar legível em cima do gradiente escuro da tela de login. */ .login-side__logo-card { display: inline-flex; align-items: center; background: #fff; /* a logo do cliente foi feita pra fundo claro — fica branco nos dois temas */ border-radius: 14px; padding: 10px 18px; box-shadow: 0 10px 28px rgba(0,0,0,.22); } .login-side__logo-card img { display: block; max-height: 42px; max-width: 230px; object-fit: contain; } .login-side__pitch h2 { font-size: 32px; color: #fff; max-width: 420px; line-height: 1.25; font-weight: 600; } .login-side__pitch p { color: #BBCBEF; max-width: 400px; font-size: 14px; margin-top: 12px; } .login-side__tags { display: flex; gap: 14px; margin-top: 34px; } .mini-tag { font-family: var(--font-mono); font-size: 12px; border-radius: var(--radius-tag); padding: 10px 14px 10px 20px; position: relative; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #EAF0FB; } .mini-tag::before { content: ""; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--ink-900); border: 1px solid rgba(255,255,255,.12); } .mini-tag b { color: var(--brand-blue-300); } .login-side__foot { font-family: var(--font-mono); font-size: 11.5px; color: #7B93C9; } /* "Powered by Sanitix" — só aparece quando a logo do restaurante já ocupou o topo; fica centralizada mais pra baixo, discreta, só pra deixar claro qual é a plataforma por trás sem competir com a marca do cliente. */ .login-side__poweredby { display: flex; align-items: center; justify-content: center; gap: 7px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.10); } .login-side__poweredby-label { font-size: 11px; color: #7B93C9; letter-spacing: .02em; } .login-side__poweredby-name { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: #EAF0FB; } /* Banner "instalar como app" — flutua sobre qualquer tela, canto inferior, pra não atrapalhar o que a pessoa estava fazendo. */ .pwa-install-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 500; max-width: 420px; margin: 0 auto; background: var(--ink-900); color: #EAF0FB; border-radius: 14px; padding: 16px 18px; box-shadow: 0 16px 40px rgba(0,0,0,.28); display: flex; flex-direction: column; gap: 12px; } .pwa-install-banner__text { font-size: 13.5px; line-height: 1.4; } .pwa-install-steps { margin: 10px 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; } .pwa-install-steps li { display: list-item; } .pwa-install-steps svg { vertical-align: -3px; margin-right: 2px; } .pwa-install-banner__aviso { display: block; font-size: 11.5px; color: #9db0d8; margin-top: 2px; } .pwa-install-banner__actions { display: flex; justify-content: flex-end; gap: 8px; } .pwa-install-banner__actions .btn-ghost { color: #BBCBEF; } .pwa-install-banner__actions .btn-ghost:hover { background: rgba(255,255,255,.08); } .login-form-wrap { flex: 1; display: flex; align-items: flex-start; /* com margin auto no filho, centraliza quando cabe e rola quando não cabe (teclado aberto) */ justify-content: center; overflow-y: auto; background: var(--paper-50); padding: 40px; } /* Centraliza verticalmente quando há espaço; quando o teclado cobre a tela, as margens automáticas viram 0 e o formulário rola em vez de sumir. */ .login-form-wrap > div { margin-top: auto; margin-bottom: auto; } .login-form { width: 100%; max-width: 360px; } .login-form h1 { font-size: 22px; margin-bottom: 4px; } .login-form > p { color: var(--text-600); font-size: 13.5px; margin: 0 0 28px; } .login-tab { color: var(--text-600); transition: .15s; } .login-tab.is-active { background: var(--surface); color: var(--accent-text); box-shadow: 0 1px 3px rgba(0,0,0,.08); } /* Desenho de padrão (desbloqueio tipo celular) — grade 3×3, ver inicializarPatternLock() em app.js. touch-action:none evita o celular tentar rolar a página enquanto a pessoa arrasta o dedo desenhando. */ .pattern-lock { position: relative; width: 220px; height: 220px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); touch-action: none; user-select: none; -webkit-user-select: none; } .pattern-lock__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .pattern-lock__svg polyline { fill: none; stroke: var(--petrol-500); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } .pattern-lock__dot { display: flex; align-items: center; justify-content: center; cursor: pointer; } .pattern-lock__dot::before { content: ''; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); transition: background .1s, border-color .1s, transform .1s; } .pattern-lock__dot.is-active::before { background: var(--petrol-500); border-color: var(--petrol-500); transform: scale(1.3); } .pattern-lock-wrap { text-align: center; } .pattern-lock-wrap [data-pattern-clear] { margin-top: 14px; } .field { margin-bottom: 16px; max-width: 480px; } .field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-600); margin-bottom: 6px; } .field-input { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 11px 14px; } .field-input:focus-within { border-color: var(--petrol-500); box-shadow: 0 0 0 3px var(--petrol-100); } .field-input input { border: none; outline: none; width: 100%; font-family: var(--font-body); font-size: 14px; background: none; color: var(--text-900); } .field-input svg { flex-shrink: 0; color: var(--text-400); } .field-error { color: var(--red-500); font-size: 12px; min-height: 16px; margin-top: 5px; } .login-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; font-size: 13px; } .login-row a { color: var(--accent-text); font-weight: 600; } .login-row a:hover { text-decoration: underline; } .btn-block { width: 100%; justify-content: center; padding: 12px; font-size: 14px; } .login-form__footer { margin-top: 28px; font-size: 12px; color: var(--text-400); display: flex; justify-content: space-between; font-family: var(--font-mono); } /* ------------------------------------------------------------------------- Responsivo ------------------------------------------------------------------------- */ @media (max-width: 980px) { .app-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); height: 100%; margin: 0; border-radius: 0 22px 22px 0; transform: translateX(-100%); transition: transform .22s ease; z-index: 50; } .sidebar.is-open { transform: translateX(0); } .sidebar__toggle { display: none; } .topbar__menu-btn { display: flex; } .topbar__search { display: none; } .main { padding: 20px 16px 48px; } } /* Some primeiro o nome da empresa (fica só a logo), pro avatar/usuário continuar visível — a identidade de quem está logado é mais importante de caber na tela do que o texto do cliente. */ @media (max-width: 640px) { .tenant-id__text { display: none; } .tenant-id { border-right: none; padding-right: 0; } .topbar { padding: 0 14px; gap: 8px; } } /* Depois esconde o texto do usuário, mantendo só o avatar clicável */ @media (max-width: 460px) { .user-menu__text { display: none; } .user-menu__btn { padding: 4px; } .version-chip { display: none; } .bridge-chip span:last-child { display: none; } .bridge-chip { padding: 5px 8px; } } @media (max-width: 480px) { .tag-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; } .tag-card { padding: 14px 16px 14px 22px; } .tag-card__value { font-size: 26px; } } /* Logo do restaurante (ou marca genérica) no topo do login em celular — sem isso, some junto com o painel escuro da esquerda (que só existe em telas largas), e quem usa celular nunca via a logo. Fica display:none por padrão AQUI (antes da media query abaixo), pra a regra de tela estreita conseguir vencer o empate de especificidade — as duas regras têm o mesmo peso (uma classe só), e sem essa ordem a última do arquivo ganhava sempre, escondendo isso em qualquer tamanho de tela. */ .login-mobile-brand { display: none; align-items: center; justify-content: center; gap: 10px; margin-bottom: 28px; } .login-mobile-brand__logo { background: #fff; /* idem: fundo claro atrás da logo em qualquer tema */ border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; box-shadow: var(--shadow-card); } .login-mobile-brand__logo img { display: block; max-height: 34px; max-width: 200px; object-fit: contain; } .login-mobile-brand__nome { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--heading); } @media (max-width: 720px) { .login-side { display: none; } .login-form-wrap { padding: 24px; } .login-mobile-brand { display: flex; } .login-ios-install-card:not([hidden]) { display: flex; } } /* Cartão "Instalar no iPhone" — só em celular, e só quando o JS confirma que é iOS e ainda não está instalado (ver app.js). */ .login-ios-install-card { display: none; width: 100%; align-items: center; gap: 12px; margin-top: 22px; padding: 14px 16px; background: linear-gradient(135deg, var(--ink-900), var(--petrol-800, var(--ink-900))); color: #fff; border: none; border-radius: 14px; cursor: pointer; text-align: left; font: inherit; } .login-ios-install-card[hidden] { display: none; } .login-ios-install-card__icone { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; } .login-ios-install-card__texto { flex: 1; display: flex; flex-direction: column; gap: 2px; } .login-ios-install-card__texto strong { font-size: 13.5px; } .login-ios-install-card__texto span { font-size: 11.5px; color: #BBCBEF; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* Foco visível para navegação por teclado */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--petrol-500); outline-offset: 2px; } /* ------------------------------------------------------------------------- Manual do Sistema (manual.php) — conteúdo explicativo por capítulo + botão de baixar só aquele capítulo em PDF (ver manual_pdf.php). ------------------------------------------------------------------------- */ .manual-cap-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .manual-download-btn { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--accent-text); font-size: 12.5px; font-weight: 700; text-decoration: none; transition: background .12s ease, border-color .12s ease; } .manual-download-btn:hover { background: var(--paper-100); border-color: var(--petrol-500); } .manual-content h3 { font-size: 15px; color: var(--accent-text); margin: 20px 0 8px; } .manual-content h3:first-child { margin-top: 0; } .manual-content h4 { font-size: 13.5px; color: var(--text-900); margin: 14px 0 6px; } .manual-content p { font-size: 13.5px; color: var(--text-900); line-height: 1.6; margin: 0 0 10px; max-width: 68ch; } .manual-content ul, .manual-content ol { margin: 0 0 12px; padding-left: 20px; } .manual-content li { font-size: 13.5px; color: var(--text-900); line-height: 1.6; margin-bottom: 6px; } .manual-content strong { color: var(--text-900); } .manual-content .manual-dica { background: var(--paper-100); border-left: 3px solid var(--petrol-500); border-radius: 0 8px 8px 0; padding: 10px 14px; margin: 14px 0; font-size: 13px; color: var(--text-600); max-width: 68ch; } .manual-content .manual-dica strong { color: var(--accent-text); } /* ========================================================================= DASHBOARD v3 — hero com "Saúde do dia", KPIs com estado, gráfico de área, linha do tempo das últimas etiquetas. Tudo por token: funciona no escuro. ========================================================================= */ /* ---- Hero ------------------------------------------------------------- */ .dash-hero { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; padding: 28px 30px; border-radius: 20px; background: linear-gradient(135deg, var(--petrol-800) 0%, var(--petrol-700) 55%, var(--petrol-600) 100%); color: #fff; overflow: hidden; margin-bottom: 22px; box-shadow: 0 18px 40px -22px rgba(11,32,39,.55); isolation: isolate; } .dash-hero__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(520px 260px at 85% -20%, rgba(255,255,255,.16), transparent 60%), radial-gradient(420px 220px at 10% 120%, rgba(46,158,107,.25), transparent 60%), repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 28px); } .dash-hero__main { min-width: 0; display: flex; flex-direction: column; } .dash-hero__eyebrow { margin: 0 0 6px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.65); font-weight: 600; } .dash-hero__titulo { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 10px; } .dash-hero__status { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.88); } .dash-hero__status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fresh-500); box-shadow: 0 0 0 4px rgba(46,158,107,.28); } .dash-hero__status--amber .dash-hero__status-dot { background: var(--amber-500); box-shadow: 0 0 0 4px rgba(219,155,46,.3); } .dash-hero__status--red .dash-hero__status-dot { background: var(--red-500); box-shadow: 0 0 0 4px rgba(214,69,69,.3); animation: dash-pulse 1.6s ease-in-out infinite; } @keyframes dash-pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(214,69,69,.3); } 50% { box-shadow: 0 0 0 8px rgba(214,69,69,.12); } } .dash-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; } .dash-acao { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); transition: background .15s ease, transform .15s ease; } .dash-acao:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); } .dash-acao--primaria { background: #fff; color: var(--petrol-700); border-color: #fff; } .dash-acao--primaria:hover { background: var(--paper-50); } .dash-saude { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); min-width: 0; } .dash-saude__anel { width: 118px; height: 118px; flex-shrink: 0; } .dash-saude__trilho { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 10; } .dash-saude__arco { fill: none; stroke-width: 10; stroke-linecap: round; stroke: var(--fresh-500); animation: dash-anel 1.1s cubic-bezier(.22,.8,.3,1) both; } @keyframes dash-anel { from { stroke-dashoffset: var(--dash-total); } } .dash-saude__anel--amber .dash-saude__arco { stroke: var(--amber-500); } .dash-saude__anel--red .dash-saude__arco { stroke: var(--red-500); } .dash-saude__nota { font-family: var(--font-display); font-size: 30px; font-weight: 700; fill: #fff; } .dash-saude__rotulo { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; fill: rgba(255,255,255,.6); } .dash-saude__texto { min-width: 0; } .dash-saude__titulo { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; margin-bottom: 6px; } .dash-saude__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .dash-saude__lista a { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.9); } .dash-saude__lista a:hover { text-decoration: underline; } .dash-saude__pill { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .dash-saude__pill--red { background: var(--red-500); } .dash-saude__pill--amber { background: var(--amber-500); } .dash-saude__pill--fresh { background: var(--fresh-500); } .dash-saude__lista--etq a strong { font-family: var(--font-display); font-size: 15px; min-width: 34px; text-align: right; } .dash-saude__lista--etq { gap: 7px; } .dash-saude__mais { font-size: 12px; color: rgba(255,255,255,.6); } .dash-saude__ok { margin: 0; font-size: 12.5px; color: rgba(255,255,255,.78); line-height: 1.45; } /* ---- KPIs ------------------------------------------------------------- */ .kpi-grid--v3 { grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 12px; margin-bottom: 22px; } .kpi-tile--v3 { --kpi: var(--petrol-500); --kpi-bg: var(--petrol-100); --kpi-text: var(--accent-text); position: relative; padding: 16px 18px 15px; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; } .kpi-tile--v3::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 0 0 4px 4px; background: var(--kpi); opacity: .55; transition: opacity .15s ease; } .kpi-tile--v3.is-ativo::before, .kpi-tile--v3:hover::before { opacity: 1; } /* Cada KPI com o fundo na própria cor (suave), como os cards da ronda de temperatura — de relance já se sabe o que é bom, atenção ou alerta. */ .kpi-tile--v3 { background: color-mix(in srgb, var(--kpi-bg) 75%, var(--surface)); border-color: color-mix(in srgb, var(--kpi) 32%, var(--line)); } .kpi-tile--v3.is-ativo { background: color-mix(in srgb, var(--kpi-bg) 80%, var(--surface)); border-color: color-mix(in srgb, var(--kpi) 45%, var(--line)); } .kpi-tile--v3 .kpi-tile__icon { background: var(--surface); box-shadow: 0 1px 2px rgba(11,32,39,.06); } @supports not (background: color-mix(in srgb, red, blue)) { .kpi-tile--v3 { background: var(--kpi-bg); } } .kpi-tile--fresh { --kpi: var(--fresh-500); --kpi-bg: var(--fresh-100); --kpi-text: var(--fresh-600); } .kpi-tile--amber { --kpi: var(--amber-500); --kpi-bg: var(--amber-100); --kpi-text: var(--amber-500); } .kpi-tile--red { --kpi: var(--red-500); --kpi-bg: var(--red-100); --kpi-text: var(--red-500); } .kpi-tile--neutro { --kpi: var(--text-400); --kpi-bg: var(--paper-100); --kpi-text: var(--text-600); } .kpi-tile--blue { --kpi: var(--brand-blue-500); --kpi-bg: var(--brand-blue-100); --kpi-text: var(--brand-blue-500); } .kpi-tile--violet { --kpi: var(--violet-500); --kpi-bg: var(--violet-100); --kpi-text: var(--violet-500); } .kpi-tile--sky { --kpi: var(--sky-500); --kpi-bg: var(--sky-100); --kpi-text: var(--sky-500); } .kpi-tile--v3 .kpi-tile__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .kpi-tile--v3 .kpi-tile__icon { width: 36px; height: 36px; margin: 0; border-radius: 11px; background: var(--kpi-bg); color: var(--kpi-text); } .kpi-tile--v3 .kpi-tile__value { font-size: 32px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 2px 0 2px; } .kpi-tile--v3.is-ativo .kpi-tile__value { color: var(--kpi-text); } .kpi-tile--v3 .kpi-tile__sub { font-size: 12.5px; } .kpi-tile--v3.is-ativo .kpi-tile__sub { color: var(--kpi-text); font-weight: 600; } .kpi-tile__delta { font-weight: 700; font-size: 12px; padding: 2px 6px; border-radius: 6px; } .kpi-tile__delta--up { color: var(--fresh-600); background: var(--fresh-100); } .kpi-tile__delta--down { color: var(--red-500); background: var(--red-100); } .kpi-tile__mini { width: 70px; height: 24px; } .kpi-tile__mini rect { fill: var(--line); } .kpi-tile__mini rect.is-hoje { fill: var(--kpi); } html[data-theme="dark"] .kpi-tile__mini rect { fill: var(--paper-200); } /* ---- Painéis do dashboard -------------------------------------------- */ .dash-grid { display: grid; gap: 18px; margin-bottom: 22px; } .dash-grid--principal { grid-template-columns: 1.6fr 1fr; } /* "Últimas etiquetas" acompanha a altura do gráfico ao lado: o card entra com altura 0 no cálculo da linha do grid (quem manda é o gráfico) e depois estica até ela — o que não couber na lista fica cortado. */ .dash-grid--principal .panel--lista { height: 0; min-height: 100%; display: flex; flex-direction: column; overflow: hidden; } .dash-grid--principal .panel--lista .panel__body--lista { flex: 1; min-height: 0; overflow: hidden; } @media (max-width: 900px) { .dash-grid--principal .panel--lista { height: auto; min-height: 0; } } .dash-grid--dupla { grid-template-columns: 1.3fr 1fr; } .dash-grid .panel { margin-top: 0 !important; } .panel--dash { border-radius: 16px; } .panel__header--dash { align-items: flex-start; gap: 12px; padding: 18px 22px 14px; border-bottom: none; } .panel__header--dash h2 { font-size: 15px; } .panel__sub { margin: 3px 0 0; font-size: 12.5px; color: var(--text-400); } .panel__sub strong { color: var(--text-900); font-weight: 600; } .panel__body--grafico { padding: 4px 16px 14px; } .panel__body--lista { padding: 0 22px 12px; } .btn-ghost--sm { padding: 7px 12px; font-size: 12.5px; border-radius: 9px; } .dash-secao { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 12px; } .dash-secao__titulo { font-size: 15px; font-weight: 600; } .dash-secao__sub { font-size: 12.5px; color: var(--text-400); } .dash-secao__sub strong { color: var(--text-900); } .dash-vazio { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 16px; text-align: center; color: var(--text-400); font-size: 13.5px; border: 1px dashed var(--line); border-radius: 12px; margin: 10px 0 6px; } .dash-vazio--compacto { padding: 26px 12px; } /* ---- Gráfico de área -------------------------------------------------- */ .dash-area { width: 100%; height: auto; display: block; } .dash-area__guia { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; } .dash-area__eixo { font-size: 10px; fill: var(--text-400); font-family: var(--font-mono); } .dash-area__dot { fill: var(--surface); stroke: var(--petrol-500); stroke-width: 2.5; transition: r .12s ease; } .dash-area__ponto:hover .dash-area__dot { r: 6; fill: var(--petrol-500); } /* ---- Linha do tempo --------------------------------------------------- */ .dash-timeline { list-style: none; margin: 0; padding: 0; } .dash-timeline__item { position: relative; display: flex; gap: 12px; padding: 11px 0 11px 2px; border-bottom: 1px solid var(--line); } .dash-timeline__item:last-child { border-bottom: none; } .dash-timeline__item.is-cortado { display: none; } /* não coube na altura do card (ver app.js) */ .dash-timeline__dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--text-400); box-shadow: 0 0 0 3px var(--paper-100); } .dash-timeline__dot--fresh { background: var(--fresh-500); box-shadow: 0 0 0 3px var(--fresh-100); } .dash-timeline__dot--amber { background: var(--amber-500); box-shadow: 0 0 0 3px var(--amber-100); } .dash-timeline__dot--red { background: var(--red-500); box-shadow: 0 0 0 3px var(--red-100); } .dash-timeline__corpo { min-width: 0; flex: 1; } .dash-timeline__linha1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .dash-timeline__produto { font-weight: 600; font-size: 13.5px; color: var(--text-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-timeline__meta { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--text-400); margin-top: 2px; } .dash-timeline__meta .mono { font-family: var(--font-mono); } .dash-timeline__hora { margin-left: auto; font-family: var(--font-mono); } .pill-status { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; flex-shrink: 0; background: var(--paper-100); color: var(--text-600); } .pill-status--fresh { background: var(--fresh-100); color: var(--fresh-600); } .pill-status--amber { background: var(--amber-100); color: var(--amber-500); } .pill-status--red { background: var(--red-100); color: var(--red-500); } /* ---- Roscas ----------------------------------------------------------- */ .donut-grid--v3 { gap: 18px; margin-bottom: 22px; } .donut-card--v3 { padding-top: 6px; } .donut-card--v3 svg { filter: drop-shadow(0 6px 14px rgba(11,32,39,.12)); } .donut-legenda--v3 .donut-legenda-item { display: grid; grid-template-columns: 10px 1fr auto auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 4px; align-items: center; padding: 8px 0; } .donut-legenda--v3 .donut-legenda-pct { font-size: 12px; color: var(--text-400); font-family: var(--font-mono); } .donut-legenda--v3 .donut-legenda-barra { grid-column: 2 / -1; height: 4px; border-radius: 999px; background: var(--paper-100); overflow: hidden; } .donut-legenda--v3 .donut-legenda-barra span { display: block; height: 100%; border-radius: 999px; } /* ---- Sparkline de temperatura ---------------------------------------- */ .temp-sparkline-box svg { width: 100%; height: auto; display: block; } .temp-sparkline-box .temp-linha { stroke: var(--petrol-500); } .temp-sparkline-box .temp-area { fill: url(#gradTemp); } .temp-sparkline-box .temp-ponto--ok { fill: var(--fresh-500); stroke: var(--surface); stroke-width: 2; } .temp-sparkline-box .temp-ponto--fora { fill: var(--red-500); stroke: var(--surface); stroke-width: 2; } .temp-sparkline-box .temp-eixo { font-size: 10px; fill: var(--text-400); font-family: var(--font-mono); } /* ---- Responsivo ------------------------------------------------------- */ @media (max-width: 980px) { .dash-hero { grid-template-columns: 1fr; padding: 22px 20px; } .dash-grid--principal, .dash-grid--dupla { grid-template-columns: 1fr; } } @media (max-width: 720px) { .dash-hero { border-radius: 16px; } .dash-hero__titulo { font-size: 26px; } .dash-acao { flex: 1 1 calc(50% - 10px); justify-content: center; min-height: 44px; } .dash-saude { padding: 14px; gap: 14px; } .dash-saude__anel { width: 96px; height: 96px; } .kpi-grid--v3 { grid-template-columns: repeat(2, 1fr); gap: 10px; } .kpi-tile--v3 { padding: 14px 14px 13px; } .kpi-tile--v3 .kpi-tile__value { font-size: 26px; } .kpi-tile__mini { display: none; } } /* ========================================================================= TEMPERATURA v3 — rodada em cards (grade), pré-visualização dentro/fora enquanto digita, barra fixa de envio, etapas de alimento em chips. ========================================================================= */ .temp-header { align-items: flex-end; } .temp-alerta { padding: 12px 16px; border-radius: 12px; font-size: 13.5px; margin-bottom: 16px; border: 1px solid; } .temp-alerta--erro { background: var(--red-100); border-color: var(--red-500); color: var(--red-700); } .temp-alerta--ok { background: var(--fresh-100); border-color: var(--fresh-500); color: var(--fresh-600); } /* Abas horizontais (mesmo mecanismo do settings-nav, layout diferente) */ .settings-nav--tabs { flex-direction: row; flex-wrap: wrap; gap: 4px; position: static; background: var(--paper-100); border: 1px solid var(--line); border-radius: 14px; padding: 4px; margin-bottom: 18px; width: max-content; max-width: 100%; } .settings-nav--tabs .settings-nav__item { padding: 9px 14px; border-radius: 10px; font-size: 13.5px; } .settings-nav--tabs .settings-nav__item.is-active { background: var(--surface); box-shadow: var(--shadow-card); } .settings-nav__badge { margin-left: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--amber-500); color: #241a02; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } /* Resumo da rodada */ .temp-ronda { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 16px 20px; border-radius: 16px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); } .temp-ronda__anel svg { width: 72px; height: 72px; display: block; } .temp-ronda__trilho { fill: none; stroke: var(--paper-100); stroke-width: 7; } .temp-ronda__arco { fill: none; stroke: var(--petrol-500); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .6s ease; } .temp-ronda__arco--ok { stroke: var(--fresh-500); } .temp-ronda__arco--fora { stroke: var(--red-500); } .temp-ronda__pct { font-family: var(--font-display); font-weight: 700; font-size: 15px; fill: var(--heading); } .temp-ronda__texto h2 { font-size: 16px; margin: 0 0 2px; } .temp-ronda__texto p { margin: 0 0 8px; font-size: 12.5px; color: var(--text-600); } .temp-ronda__texto strong { color: var(--text-900); } .temp-ronda__chips { display: flex; flex-wrap: wrap; gap: 6px; } .temp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text-600); background: var(--paper-100); } .temp-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-400); } .temp-chip--fresh { color: var(--fresh-600); background: var(--fresh-100); } .temp-chip--fresh i { background: var(--fresh-500); } .temp-chip--red { color: var(--red-500); background: var(--red-100); } .temp-chip--red i { background: var(--red-500); } .temp-ronda__acoes { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } /* Progresso por turno do dia (Manhã/Tarde/Noite) */ .temp-turnos { margin-bottom: 16px; } .temp-turnos__titulo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-500); margin: 0 0 8px 2px; } .temp-turnos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .temp-turno-card { padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); } .temp-turno-card.is-atual { border-color: var(--petrol-500); box-shadow: 0 0 0 1px var(--petrol-500), var(--shadow-card); } .temp-turno-card[data-turno-card] { cursor: pointer; transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease; } .temp-turno-card[data-turno-card]:hover { transform: translateY(-1px); } .temp-turno-card.is-selecionado { border-color: var(--petrol-500); box-shadow: 0 0 0 2px var(--petrol-500), var(--shadow-card); } .temp-turno-readonly__cab { font-size: 13px; color: var(--text-600); margin: 2px 0 12px; } .temp-turno-card__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .temp-turno-card__nome { font-size: 13.5px; font-weight: 700; color: var(--heading); } .temp-turno-card__nome small { font-weight: 600; color: var(--petrol-500); font-size: 11px; } .temp-turno-card__pct { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text-500); } .temp-turno-card.is-parcial .temp-turno-card__pct { color: var(--amber-600, #b45309); } .temp-turno-card.is-ok .temp-turno-card__pct { color: var(--fresh-600); } .temp-turno-card__barra { height: 7px; border-radius: 999px; background: var(--paper-100); margin: 8px 0 7px; overflow: hidden; } .temp-turno-card__barra span { display: block; height: 100%; border-radius: 999px; background: var(--text-400); transition: width .6s ease; } .temp-turno-card.is-parcial .temp-turno-card__barra span { background: var(--amber-500); } .temp-turno-card.is-ok .temp-turno-card__barra span { background: var(--fresh-500); } .temp-turno-card__sub { font-size: 12px; color: var(--text-600); } @media (max-width: 560px) { .temp-turnos__grid { grid-template-columns: 1fr; } } /* Grade de equipamentos */ .temp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; } .temp-card { --tc: var(--text-400); --tc-bg: var(--paper-100); position: relative; overflow: hidden; padding: 14px 14px 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .temp-card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--tc); } .temp-card:focus-within { border-color: var(--petrol-500); box-shadow: 0 0 0 3px var(--petrol-100), var(--shadow-card); } /* Fundo de cada card acompanha o estado — de relance dá pra ver o que já foi feito (verde/vermelho), o que falta (âmbar) e o que deu erro. */ .temp-card--pendente { --tc: var(--amber-500); --tc-bg: var(--amber-100); background: color-mix(in srgb, var(--amber-100) 55%, var(--surface)); border-color: color-mix(in srgb, var(--amber-500) 35%, var(--line)); } .temp-card--ok { --tc: var(--fresh-500); --tc-bg: var(--fresh-100); background: color-mix(in srgb, var(--fresh-100) 70%, var(--surface)); border-color: color-mix(in srgb, var(--fresh-500) 40%, var(--line)); } .temp-card--fora { --tc: var(--red-500); --tc-bg: var(--red-100); background: color-mix(in srgb, var(--red-100) 70%, var(--surface)); border-color: color-mix(in srgb, var(--red-500) 45%, var(--line)); } .temp-card--neutro { --tc: var(--petrol-500); --tc-bg: var(--petrol-100); background: color-mix(in srgb, var(--petrol-100) 60%, var(--surface)); } .temp-card--erro { --tc: var(--red-500); --tc-bg: var(--red-100); background: var(--red-100); border-color: var(--red-500); } /* navegadores sem color-mix: cai no tom "100" puro */ @supports not (background: color-mix(in srgb, red, blue)) { .temp-card--pendente { background: var(--amber-100); } .temp-card--ok { background: var(--fresh-100); } .temp-card--fora { background: var(--red-100); } .temp-card--neutro { background: var(--petrol-100); } } .temp-card--pendente .temp-card__status { color: #fff; background: var(--amber-500); } .temp-card--pendente .temp-card__icone { color: var(--amber-500); background: var(--surface); } .temp-card--ok .temp-card__status, .temp-card--fora .temp-card__status, .temp-card--neutro .temp-card__status { background: var(--tc); color: #fff; } .temp-card--ok .temp-card__icone, .temp-card--fora .temp-card__icone, .temp-card--neutro .temp-card__icone { background: var(--surface); } .temp-card .temp-card__input, .temp-card .temp-card__obs, .temp-card .temp-sinal-btn, .temp-card .temp-card__obs-toggle, .temp-card .temp-card__editar { background: var(--surface); } .temp-card__topo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-bottom: 10px; } .temp-card__icone { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--tc-bg); color: var(--tc); } .temp-card__nome { min-width: 0; flex: 1; display: flex; flex-direction: column; } .temp-card__nome strong { font-size: 13.5px; line-height: 1.25; color: var(--text-900); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; } .temp-card__nome span { font-size: 11.5px; color: var(--text-400); font-family: var(--font-mono); overflow-wrap: anywhere; } .temp-card__status { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; line-height: 1; padding: 5px 9px; border-radius: 999px; background: var(--tc); color: #fff; flex-shrink: 0; white-space: nowrap; max-width: 100%; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); } .temp-card__inputs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .temp-card__inputs[hidden] { display: none; } .temp-num-wrap--card { position: relative; flex: 1 1 150px; } .temp-num-wrap--card .temp-card__input { width: 100%; font-family: var(--font-display); font-size: 22px; font-weight: 700; padding: 8px 40px 8px 12px; border-radius: 10px; letter-spacing: -0.01em; } .temp-num-wrap__unidade { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text-400); pointer-events: none; } .temp-card__obs-toggle { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text-400); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .temp-card__obs-toggle:hover, .temp-card__obs-toggle.is-ativo { color: var(--accent-text); border-color: var(--petrol-500); } .temp-card__obs { flex: 1 1 100%; font-size: 13px; } .temp-card__obs[hidden] { display: none; } .temp-card__erro { flex: 1 1 100%; font-size: 11.5px; font-weight: 600; color: var(--red-500); } /* Aviso "Atenção" quando a leitura está fora do padrão */ .temp-card__aviso { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 2px 0 8px; padding: 7px 10px; border-radius: 9px; background: var(--red-100); border: 1px solid color-mix(in srgb, var(--red-500) 35%, transparent); font-size: 12.5px; color: var(--red-500); } .temp-card__aviso[hidden] { display: none; } .temp-card__aviso strong { font-weight: 800; letter-spacing: .01em; } .temp-card__aviso [data-temp-aviso-motivo] { color: var(--text-700, var(--text-600)); font-weight: 600; } .temp-card__resultado { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .temp-card__resultado[hidden] { display: none; } .temp-card__valor { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--tc); letter-spacing: -0.02em; line-height: 1; } .temp-card--neutro .temp-card__valor { color: var(--text-900); } .temp-card__valor small { font-size: 13px; margin-left: 2px; color: var(--text-400); font-weight: 600; } .temp-card__meta { flex: 1; min-width: 0; font-size: 11.5px; color: var(--text-400); line-height: 1.4; } .temp-card__editar { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--text-600); cursor: pointer; } .temp-card__editar:hover { border-color: var(--petrol-500); color: var(--accent-text); } /* pré-visualização enquanto digita (classe colocada pelo app.js) */ .temp-card.is-previa-ok { --tc: var(--fresh-500); --tc-bg: var(--fresh-100); background: color-mix(in srgb, var(--fresh-100) 70%, var(--surface)); border-color: color-mix(in srgb, var(--fresh-500) 40%, var(--line)); } .temp-card.is-previa-fora { --tc: var(--red-500); --tc-bg: var(--red-100); background: color-mix(in srgb, var(--red-100) 70%, var(--surface)); border-color: color-mix(in srgb, var(--red-500) 45%, var(--line)); } .temp-card.is-previa-ok .temp-card__status, .temp-card.is-previa-fora .temp-card__status { color: #fff; background: var(--tc); } .temp-card.is-previa-ok .temp-card__icone, .temp-card.is-previa-fora .temp-card__icone { color: var(--tc); background: var(--surface); } /* Barra fixa de envio (aparece quando há algo digitado) */ .temp-barra { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 10px 12px 10px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-pop); } .temp-barra__texto { font-size: 13px; color: var(--text-600); } .temp-barra__texto strong { color: var(--text-900); } .temp-barra.is-pronta { border-color: var(--petrol-500); } /* Etapas de alimento em chips selecionáveis */ .field--cheio { max-width: none; } .temp-etapas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; } .temp-etapa { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; cursor: pointer; background: var(--surface); border: 1px solid var(--line); transition: border-color .15s ease, background .15s ease; } .temp-etapa input { position: absolute; opacity: 0; width: 0; height: 0; } .temp-etapa:hover { border-color: var(--petrol-500); } .temp-etapa:has(input:checked) { border-color: var(--petrol-500); background: var(--petrol-100); box-shadow: 0 0 0 3px var(--petrol-100); } .temp-etapa__icone { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--paper-100); color: var(--accent-text); } .temp-etapa:has(input:checked) .temp-etapa__icone { background: var(--surface); } .temp-etapa__texto { display: flex; flex-direction: column; min-width: 0; } .temp-etapa__texto strong { font-size: 13px; color: var(--text-900); } .temp-etapa__texto small { font-size: 11.5px; color: var(--text-400); font-family: var(--font-mono); } .temp-previa { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; min-height: 16px; } .temp-previa--ok { color: var(--fresh-600); } .temp-previa--fora { color: var(--red-500); } .temp-previa--neutro { color: var(--text-400); font-weight: 500; } /* Histórico: filtros e tabela compacta */ .temp-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; } .temp-filtros__acoes { display: flex; gap: 8px; grid-column: span 2; justify-content: flex-end; } .temp-filtros__acoes .btn { display: inline-flex; align-items: center; gap: 6px; } .table--compacta th { font-size: 11px; } .table--compacta td { padding-top: 9px; padding-bottom: 9px; } .temp-td-valor { font-weight: 700; } .temp-td-valor--ok { color: var(--fresh-600); } .temp-td-valor--fora { color: var(--red-500); } .text-right { text-align: right; } /* Parâmetros em cartões */ .temp-param-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 18px; } .temp-param { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); cursor: text; } .temp-param:focus-within { border-color: var(--petrol-500); box-shadow: 0 0 0 3px var(--petrol-100); } .temp-param__icone { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--petrol-100); color: var(--accent-text); } .temp-param__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; } .temp-param__texto strong { font-size: 13px; color: var(--text-900); } .temp-param__texto small { font-size: 11.5px; color: var(--text-400); } .temp-param__campo { display: flex; align-items: center; gap: 4px; } .temp-param__campo input { width: 76px; text-align: right; font-family: var(--font-display); font-weight: 700; font-size: 16px; padding: 7px 8px; border-radius: 9px; } .temp-param__campo span { font-size: 12px; color: var(--text-400); } @media (max-width: 720px) { .temp-ronda { grid-template-columns: auto 1fr; } .temp-ronda__acoes { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; } .temp-grid { grid-template-columns: 1fr; } .temp-filtros__acoes { grid-column: 1 / -1; } .temp-barra { bottom: 76px; } /* acima do FAB / barra do celular */ .settings-nav--tabs { width: 100%; } .settings-nav--tabs .settings-nav__item { flex: 1 1 45%; justify-content: center; } } /* Quem está registrando + relógio, em destaque no cabeçalho de Temperatura */ .temp-quem { display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 14px; background: linear-gradient(135deg, var(--petrol-800), var(--petrol-600)); color: #fff; box-shadow: 0 10px 24px -14px rgba(10,24,48,.6); } .temp-quem__avatar { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.16); font-family: var(--font-display); font-weight: 700; font-size: 15px; } .temp-quem__texto, .temp-quem__relogio { display: flex; flex-direction: column; line-height: 1.15; } .temp-quem small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.65); font-weight: 600; } .temp-quem strong { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; color: #fff; white-space: nowrap; } .temp-quem__relogio { padding-left: 12px; border-left: 1px solid rgba(255,255,255,.18); } .temp-quem__relogio strong { font-family: var(--font-mono); font-size: 15px; font-variant-numeric: tabular-nums; } @media (max-width: 720px) { .temp-quem { width: 100%; } .temp-quem__texto { flex: 1; min-width: 0; } .temp-quem strong { white-space: normal; } } .temp-ultimas { margin-top: 18px; } .temp-ultimas__botao { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; user-select: none; } .temp-ultimas__botao::-webkit-details-marker { display: none; } .temp-ultimas__qtd { font-family: var(--font-mono); font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--paper-100); color: var(--text-600); } .temp-ultimas__seta { transition: transform .2s ease; color: var(--text-400); } .temp-ultimas[open] .temp-ultimas__seta { transform: rotate(180deg); } .temp-ultimas[open] .temp-ultimas__botao { border-color: var(--petrol-500); color: var(--accent-text); } /* ------------------------------------------------------------------------- Pré-visualização fiel à etiqueta impressa (etiquetas.php) — reproduz a etiqueta térmica de verdade: produto grande + modo de conservação no canto, réguas, MANIPULAÇÃO/VALIDADE em caixa alta com o valor à direita, responsável, e no rodapé os dados da empresa com o código "#" e o QR. Sempre em papel branco/tinta preta, nos dois temas. ------------------------------------------------------------------------- */ .etiqueta-real { max-width: 300px; margin: 0 auto; padding: 10px 12px 10px; background: #fff; color: #111; border: 1px solid #c9cfd4; font-family: Arial, Helvetica, sans-serif; font-size: 10.5px; line-height: 1.3; border-radius: 3px; box-shadow: 0 1px 0 #e6e9ec, 0 10px 24px -12px rgba(11,32,39,.35); } .etiqueta-real__topo { display: flex; flex-direction: column; gap: 1px; } .etiqueta-real__produto { font-size: 15px; font-weight: 700; line-height: 1.15; min-height: 17px; } .etiqueta-real__metodo { font-size: 10px; font-weight: 500; color: #333; } .etiqueta-real__metodo:empty { display: none; } .etiqueta-real__regua { border-top: 1px solid #111; margin: 6px 0 5px; } .etiqueta-real__linha { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 2px 0; } .etiqueta-real__linha[hidden] { display: none; } .etiqueta-real__label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #111; flex-shrink: 0; } .etiqueta-real__valor { font-size: 10.5px; font-weight: 700; text-align: right; color: #111; word-break: break-word; } .etiqueta-real__linha--extra .etiqueta-real__label, .etiqueta-real__linha--extra .etiqueta-real__valor { font-weight: 600; font-size: 9.5px; } .etiqueta-real__resp { font-size: 9px; margin: 0 0 10px; color: #111; } .etiqueta-real__resp[hidden] { display: none; } .etiqueta-real__rodape { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; } .etiqueta-real__empresa { display: flex; flex-direction: column; font-size: 7.5px; line-height: 1.35; color: #222; min-width: 0; } .etiqueta-real__empresa strong { font-size: 8.5px; font-weight: 700; } .etiqueta-real__empresa span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .etiqueta-real__dica { color: #888; font-style: italic; white-space: normal !important; } .etiqueta-real__codigo { font-size: 15px; font-weight: 700; letter-spacing: .02em; margin-top: 3px; color: #111; } .etiqueta-real__codigo em { font-style: normal; color: #b5bcc2; letter-spacing: .12em; } .etiqueta-real__qr { width: 58px; height: 58px; flex-shrink: 0; background: #fff; } /* ========================================================================= ETIQUETAS v3 — stepper, tiles com inicial, confirmação em duas colunas (formulário | etiqueta + imprimir). ========================================================================= */ .etq-header { align-items: flex-end; } .etq-header__acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .etq-quem { padding-right: 14px; } .etq-quem .temp-quem__avatar { width: 34px; height: 34px; border-radius: 10px; font-size: 13px; } .etq-quem strong { font-size: 14px; } .etq-stepper { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .etq-stepper__step { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--paper-100); border: 1px solid var(--line); color: var(--text-400); font-size: 13px; font-weight: 600; min-width: 0; transition: background .15s ease, border-color .15s ease, color .15s ease; } .etq-stepper__num { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; } .etq-stepper__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .etq-stepper__step.is-active { background: var(--surface); border-color: var(--petrol-500); color: var(--text-900); box-shadow: var(--shadow-card); } .etq-stepper__step.is-active .etq-stepper__num { background: var(--petrol-600); border-color: var(--petrol-600); color: #fff; } .etq-stepper__step.is-done { color: var(--fresh-600); background: var(--fresh-100); border-color: transparent; } .etq-stepper__step.is-done .etq-stepper__num { background: var(--fresh-500); border-color: var(--fresh-500); color: #fff; font-size: 0; } .etq-stepper__step.is-done .etq-stepper__num::before { content: "✓"; font-size: 13px; } .etq-search .field-input { border-radius: 14px; padding: 14px 18px; box-shadow: var(--shadow-card); } .tile--v3 { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; min-height: 70px; background: var(--surface); border-radius: 14px; } .tile--v3:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(11,32,39,.25); } .tile--v3:active { transform: scale(.985); } .tile__ini { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 17px; background: var(--petrol-100); color: var(--accent-text); } .tile__ini[data-ini="1"] { background: var(--fresh-100); color: var(--fresh-600); } .tile__ini[data-ini="2"] { background: var(--amber-100); color: var(--amber-500); } .tile__ini[data-ini="3"] { background: var(--violet-100); color: var(--violet-500); } .tile__ini[data-ini="4"] { background: var(--sky-100); color: var(--sky-500); } .tile__ini[data-ini="5"] { background: var(--brand-blue-100); color: var(--brand-blue-500); } .tile__ini--local { background: var(--paper-100); color: var(--text-600); } .tile__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .tile--v3 .tile__label { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; } .tile--v3 .tile__meta { font-size: 12px; } .tile-grid--local .tile--v3 .tile__meta { display: inline; font-family: inherit; background: none; color: var(--text-600); padding: 0; } .tile__validade { display: inline-block; font-family: var(--font-mono); font-size: 11.5px; color: var(--accent-text); background: var(--petrol-100); border-radius: 999px; padding: 1px 8px; } .tile__seta { color: var(--text-400); flex-shrink: 0; opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; } .tile--v3:hover .tile__seta { opacity: 1; transform: none; } /* Confirmação em duas colunas */ .confirm-wrap--v3 { max-width: 1120px; } .confirm-topo { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .confirm-topo .confirm-back { margin: 0; } .confirm-topo .confirm-eyebrow, .confirm-topo .confirm-subtitle { text-align: left; margin: 0; } .confirm-grid { display: grid; grid-template-columns: 1.25fr .9fr; gap: 20px; align-items: start; } .confirm-card--form { padding: 20px 22px 24px; border-radius: 16px; } .confirm-card__cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .confirm-card__cabeca .confirm-card__subtitle { margin-bottom: 0; } .confirm-manip { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex-shrink: 0; } .confirm-manip small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-400); font-weight: 600; } .confirm-manip strong { font-size: 13.5px; color: var(--text-900); } .confirm-campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 16px; } .confirm-campo label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-600); margin-bottom: 6px; } .confirm-campo--destaque { grid-column: 1 / -1; padding: 12px 14px; border-radius: 12px; background: var(--petrol-100); } .confirm-campo--destaque label { color: var(--accent-text); } .confirm-campo--destaque .confirm-group input { background: var(--surface); } .confirm-wrap--v3 .confirm-upload { margin-top: 18px; padding-top: 16px; } .confirm-lado { position: sticky; top: 88px; } .etiqueta-preview-wrap--v3 { margin: 0; padding: 18px 18px 6px; border: 1px solid var(--line); border-radius: 16px 16px 0 0; background: var(--paper-100); border-bottom: none; } .etiqueta-preview-wrap--v3 .etiqueta-preview-eyebrow { margin-top: 0; } .confirm-footer--v3 { margin: 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 0 0 16px 16px; background: var(--surface); justify-content: space-between; } .confirm-qtd { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-600); } .confirm-imprimir { flex: 1; justify-content: center; padding: 12px 20px !important; font-size: 15px; } @media (max-width: 980px) { .confirm-grid { grid-template-columns: 1fr; } .confirm-lado { position: static; } } @media (max-width: 720px) { .etq-stepper { grid-template-columns: repeat(4, 1fr); gap: 4px; } .etq-stepper__step { padding: 8px 6px; justify-content: center; } .etq-stepper__label { display: none; } .etq-stepper__step.is-active .etq-stepper__label { display: inline; } .confirm-campos { grid-template-columns: 1fr; } .confirm-card__cabeca { flex-direction: column; } .confirm-manip { align-items: flex-start; text-align: left; } .etq-header__acoes { width: 100%; } .etq-quem { flex: 1; } } /* ========================================================================= RELATÓRIOS v3 — hero da fiscalização, KPIs coloridos, painéis do mês ========================================================================= */ .rel-hero { grid-template-columns: 1.5fr 1fr; margin-bottom: 20px; } .rel-hero__titulo { font-size: 26px; margin-bottom: 8px; } .rel-hero__texto { margin: 0 0 16px; font-size: 13.5px; color: rgba(255,255,255,.82); line-height: 1.5; max-width: 560px; } .rel-hero__form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .rel-hero__mes { display: flex; flex-direction: column; gap: 4px; } .rel-hero__mes span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.65); font-weight: 600; } .rel-hero__mes input { min-height: 42px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); color: #fff; font-family: var(--font-body); font-size: 14px; color-scheme: dark; } .rel-hero__mes input:focus { outline: none; border-color: #fff; } .dash-acao--whats { background: #25D366; border-color: #25D366; color: #fff; } .dash-acao--whats:hover { background: #1fbf5a; } .dash-acao[disabled] { opacity: .7; cursor: wait; } .rel-hero__check { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 12.5px; color: rgba(255,255,255,.75); line-height: 1.4; cursor: pointer; } .rel-hero__check input { margin-top: 2px; accent-color: #fff; } .rel-hero__lado { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); } .rel-hero__itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; } .rel-hero__itens li { display: flex; align-items: center; gap: 10px; } .rel-hero__check-ico { width: 22px; height: 22px; border-radius: 50%; background: rgba(46,158,107,.35); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .rel-hero__nota { margin: 0; font-size: 12px; color: rgba(255,255,255,.55); } .kpi-grid--rel { grid-template-columns: repeat(4, 1fr); } .rel-grid { grid-template-columns: repeat(2, 1fr); } .rel-grid > .panel:last-child:nth-child(odd) { grid-column: 1 / -1; } /* painel sozinho na última linha ocupa a largura toda */ .rel-ring { display: flex; align-items: center; gap: 16px; padding: 4px 0 8px; } .rel-ring__svg { width: 72px; height: 72px; flex-shrink: 0; } .rel-ring__trilho { fill: none; stroke: var(--paper-100); stroke-width: 7; } .rel-ring__arco { fill: none; stroke: var(--petrol-500); stroke-width: 7; stroke-linecap: round; } .rel-ring__svg--fresh .rel-ring__arco { stroke: var(--fresh-500); } .rel-ring__svg--amber .rel-ring__arco { stroke: var(--amber-500); } .rel-ring__svg--red .rel-ring__arco { stroke: var(--red-500); } .rel-ring__pct { font-family: var(--font-display); font-weight: 700; font-size: 14px; fill: var(--heading); } .rel-ring__num { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--heading); line-height: 1; } .rel-ring__rotulo { font-size: 12.5px; color: var(--text-600); margin-top: 3px; } .rel-equipe__icone { width: 60px; height: 60px; border-radius: 16px; background: var(--violet-100); color: var(--violet-500); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .rel-minis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .rel-mini { padding: 12px 10px; border-radius: 12px; background: var(--paper-100); text-align: center; } .rel-mini strong { display: block; font-family: var(--font-display); font-size: 24px; color: var(--heading); line-height: 1; } .rel-mini span { font-size: 11.5px; color: var(--text-600); text-transform: uppercase; letter-spacing: .04em; } .rel-mini--fresh { background: var(--fresh-100); } .rel-mini--fresh strong { color: var(--fresh-600); } .rel-mini--red { background: var(--red-100); } .rel-mini--red strong { color: var(--red-500); } .rel-mini--amber { background: var(--amber-100); } .rel-mini--amber strong { color: var(--amber-600, #B7791F); } .rel-mini--blue { background: var(--brand-blue-100); } .rel-mini--blue strong { color: var(--brand-blue-700, #1B3FC4); } a.rel-mini { text-decoration: none; display: block; transition: transform .12s ease, box-shadow .12s ease; } a.rel-mini:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); } .rel-barras { list-style: none; margin: 0; padding: 0 0 8px; } .rel-barra { display: grid; grid-template-columns: 24px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 5px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); } .rel-barra:last-child { border-bottom: none; } .rel-barra__pos { width: 24px; height: 24px; border-radius: 8px; background: var(--paper-100); color: var(--text-600); font-family: var(--font-mono); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; grid-row: 1 / 3; } .rel-barra:first-child .rel-barra__pos { background: var(--amber-100); color: var(--amber-500); } .rel-barra__nome { font-size: 13.5px; font-weight: 600; color: var(--text-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rel-barra__qtd { font-family: var(--font-mono); font-weight: 700; color: var(--text-900); } .rel-barra__trilho { grid-column: 2 / 4; height: 6px; border-radius: 999px; background: var(--paper-100); overflow: hidden; } .rel-barra__trilho span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--petrol-500), var(--petrol-600)); } @media (max-width: 980px) { .rel-hero { grid-template-columns: 1fr; } .kpi-grid--rel { grid-template-columns: repeat(2, 1fr); } .rel-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .rel-hero__form .dash-acao { flex: 1 1 100%; } .rel-hero__mes { width: 100%; } .rel-minis { grid-template-columns: repeat(2, 1fr); } } .rel-panel-acoes { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .rel-pdf-btn { width: 36px; height: 36px; border-radius: 10px; color: var(--accent-text); } .rel-pdf-btn:hover { background: var(--petrol-100); border-color: var(--petrol-500); } .rel-wa-btn { color: #1fa855; } .rel-wa-btn:hover { background: rgba(37,211,102,.12); border-color: #25D366; } .rel-wa-btn[disabled] { opacity: .7; cursor: wait; } .rel-wa-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(31,168,85,.3); border-top-color: #1fa855; animation: rel-spin .8s linear infinite; display: inline-block; } @keyframes rel-spin { to { transform: rotate(360deg); } } /* ------------------------------------------------------------------------- Senha mascarada — campo type="text" com os caracteres escondidos por CSS. Motivo: o Chrome/Edge mostram o aviso "Verificar as senhas salvas" (senha encontrada em vazamento) sempre que um type="password" é enviado; sem o type="password" o navegador não interfere. Em navegador sem suporte ao -webkit-text-security (Firefox), o app.js devolve o type="password". ------------------------------------------------------------------------- */ .senha-mascarada { -webkit-text-security: disc; } .senha-mascarada.is-visivel { -webkit-text-security: none; } /* ------------------------------------------------------------------------- FINANCEIRO (financeiro.php) — resumo da assinatura pro login master ------------------------------------------------------------------------- */ .page-header .fin-btn-painel { align-self: center; white-space: nowrap; } .fin-sit { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 18px; margin-bottom: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-card); } .fin-sit__icone { width: 54px; height: 54px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .fin-sit__texto { flex: 1; min-width: 0; } .fin-sit__eyebrow { margin: 0 0 2px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-400); } .fin-sit h2 { margin: 0 0 4px; font-size: 20px; } .fin-sit p { margin: 0; font-size: 13.5px; color: var(--text-600); } .fin-sit__acao { white-space: nowrap; } .fin-sit--fresh { border-color: color-mix(in srgb, var(--fresh-500) 45%, var(--line)); background: color-mix(in srgb, var(--fresh-100) 60%, var(--surface)); } .fin-sit--fresh .fin-sit__icone { background: var(--fresh-500); color: #fff; } .fin-sit--amber { border-color: var(--amber-500); background: color-mix(in srgb, var(--amber-100) 75%, var(--surface)); } .fin-sit--amber .fin-sit__icone { background: var(--amber-500); color: #fff; } .fin-sit--amber h2 { color: #7a4a0a; } .fin-sit--red { border-color: var(--red-500); background: color-mix(in srgb, var(--red-100) 75%, var(--surface)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red-500) 12%, transparent); } .fin-sit--red .fin-sit__icone { background: var(--red-500); color: #fff; animation: fin-pulsa 1.6s ease-in-out infinite; } .fin-sit--red h2 { color: var(--red-500); } .fin-sit--sky { border-color: var(--sky-500); background: color-mix(in srgb, var(--sky-100) 70%, var(--surface)); } .fin-sit--sky .fin-sit__icone { background: var(--sky-500); color: #fff; } @keyframes fin-pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } @supports not (background: color-mix(in srgb, red 50%, blue)) { .fin-sit--fresh { background: var(--fresh-100); } .fin-sit--amber { background: var(--amber-100); } .fin-sit--red { background: var(--red-100); } .fin-sit--sky { background: var(--sky-100); } } html[data-theme="dark"] .fin-sit--amber h2 { color: #f5c26b; } .fin-tabela { width: 100%; border-collapse: collapse; font-size: 13px; } .fin-tabela th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-400); padding: 8px 6px; border-bottom: 1px solid var(--line); } .fin-tabela td { padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: top; } .fin-tabela tbody tr:nth-child(even) { background: var(--paper-50); } .fin-tabela tbody tr:last-child td { border-bottom: none; } .fin-num { text-align: right; white-space: nowrap; } .fin-dados { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0 0 16px; font-size: 13.5px; } .fin-dados dt { color: var(--text-400); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; } .fin-dados dd { margin: 0; color: var(--text-900); font-weight: 500; } .fin-ajuda { border-top: 1px dashed var(--line); padding-top: 14px; font-size: 13px; color: var(--text-600); } .fin-ajuda strong { display: block; color: var(--text-900); margin-bottom: 6px; } .fin-ajuda ul { margin: 0 0 12px; padding-left: 18px; } .fin-ajuda li { margin: 3px 0; } @media (max-width: 720px) { .fin-sit { flex-wrap: wrap; } .fin-sit__acao { width: 100%; text-align: center; } .fin-dados { grid-template-columns: 1fr; gap: 2px 0; } .fin-dados dd { margin-bottom: 8px; } .fin-tabela th:nth-child(3), .fin-tabela td:nth-child(3) { display: none; } } /* ------------------------------------------------------------------------- SUPORTE (chamados.php) — linha do tempo, chips, estado do chamado e lista ------------------------------------------------------------------------- */ .chm-stepper { display: flex; list-style: none; margin: 18px 0 4px; padding: 0; } .chm-stepper li { flex: 1; position: relative; text-align: center; font-size: 11px; font-weight: 600; color: var(--text-400); padding-top: 26px; } .chm-stepper li::before { content: ''; position: absolute; top: 8px; left: 0; right: 0; height: 2px; background: var(--line); } .chm-stepper li:first-child::before { left: 50%; } .chm-stepper li:last-child::before { right: 50%; } .chm-stepper li i { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); box-sizing: border-box; } .chm-stepper li.is-done { color: var(--text-900); } .chm-stepper li.is-done::before { background: var(--petrol-700); } .chm-stepper li.is-done i { background: var(--petrol-700); border-color: var(--petrol-700); } .chm-stepper li.is-done i::after { content: ''; position: absolute; left: 4px; top: 5px; width: 6px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); } .chm-stepper li.is-atual { color: var(--petrol-700); } .chm-stepper li.is-atual i { border-color: var(--petrol-700); box-shadow: 0 0 0 4px color-mix(in srgb, var(--petrol-700) 15%, transparent); } .chm-stepper li.is-atual.is-fim { color: var(--fresh-500); } .chm-stepper li.is-atual.is-fim i { background: var(--fresh-500); border-color: var(--fresh-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fresh-500) 18%, transparent); } .chm-stepper li.is-atual.is-fim i::after { content: ''; position: absolute; left: 4px; top: 5px; width: 6px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); } .chm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; } .chm-chip--sky { background: var(--sky-100); color: var(--sky-500); } .chm-chip--violet { background: var(--violet-100); color: var(--violet-500); } .chm-chip--amber { background: var(--amber-100); color: #a15c00; } .chm-chip--fresh { background: var(--fresh-100); color: var(--fresh-500); } html[data-theme="dark"] .chm-chip--amber { color: #f5c26b; } .chm-pulse { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: chmPulse 1.4s ease-in-out infinite; } @keyframes chmPulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } } .chm-estado { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper-50); margin-top: 18px; } .chm-estado__icone { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .chm-estado--sky { background: var(--sky-100); border-color: color-mix(in srgb, var(--sky-500) 40%, var(--line)); } .chm-estado--sky .chm-estado__icone { background: var(--sky-500); } .chm-estado--violet { background: var(--violet-100); border-color: color-mix(in srgb, var(--violet-500) 40%, var(--line)); } .chm-estado--violet .chm-estado__icone { background: var(--violet-500); } .chm-estado--amber { background: var(--amber-100); border-color: var(--amber-500); } .chm-estado--amber .chm-estado__icone { background: var(--amber-500); } .chm-estado--fresh { background: var(--fresh-100); border-color: color-mix(in srgb, var(--fresh-500) 45%, var(--line)); } .chm-estado--fresh .chm-estado__icone { background: var(--fresh-500); } .chm-estado__titulo { margin: 0 0 2px; font-size: 14.5px; font-weight: 800; color: var(--text-900); } .chm-estado__texto { margin: 0; font-size: 13px; color: var(--text-600); line-height: 1.55; } .chm-estado__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .chm-estado__acoes .btn { font-size: 12.5px; padding: 8px 14px; } .chm-link { border-color: transparent; background: transparent; color: var(--text-600); } .chm-estrelas-ro { color: #ffbe3f; font-size: 16px; letter-spacing: 1px; } .chm-estrelas-ro span { color: var(--line); } .chm-painel { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 16px; } .chm-grupo { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-400); margin: 18px 0 10px; } .chm-grupo:first-child { margin-top: 0; } .chm-lista { display: flex; flex-direction: column; gap: 10px; } .chm-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-decoration: none; color: inherit; transition: .2s; } .chm-item:hover { border-color: var(--petrol-700); box-shadow: var(--shadow-card); transform: translateY(-1px); } .chm-item--vez { border-color: var(--amber-500); background: color-mix(in srgb, var(--amber-100) 45%, var(--surface)); } .chm-item__icone { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .chm-item--sky .chm-item__icone { background: var(--sky-100); color: var(--sky-500); } .chm-item--violet .chm-item__icone { background: var(--violet-100); color: var(--violet-500); } .chm-item--amber .chm-item__icone { background: var(--amber-100); color: var(--amber-500); } .chm-item--fresh .chm-item__icone { background: var(--fresh-100); color: var(--fresh-500); } .chm-item__corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .chm-item__titulo { font-size: 14px; font-weight: 800; color: var(--text-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chm-item__sub { font-size: 12px; color: var(--text-600); } .chm-item__sub span { color: var(--text-400); } .chm-item__dir { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } .chm-item__quando { font-size: 11px; color: var(--text-400); } .chm-vazio { text-align: center; padding: 36px 12px; color: var(--text-600); } .chm-vazio__icone { width: 64px; height: 64px; border-radius: 20px; background: var(--sky-100); color: var(--sky-500); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; } .chm-vazio strong { display: block; font-size: 15px; color: var(--text-900); margin-bottom: 4px; } .chm-vazio p { font-size: 13px; margin: 0 0 14px; } @supports not (background: color-mix(in srgb, red 50%, blue)) { .chm-item--vez { background: var(--amber-100); } } @media (max-width: 640px) { .chm-item { flex-wrap: wrap; } .chm-item__dir { flex-direction: row; width: 100%; justify-content: space-between; } .chamado-linha { max-width: 96%; } .chm-stepper li { font-size: 9.5px; } } /* CNPJ inválido (js: SanitixCnpj) */ .field-input input.is-invalid { box-shadow: inset 0 0 0 1.5px var(--red-500); } .field-hint { margin: 6px 0 0; font-size: 12px; color: var(--text-400); } /* Relatórios → Documentos da empresa em quadradinhos (mesma família dos .rel-mini) */ .rel-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; } .rel-doc { display: flex; flex-direction: column; gap: 3px; padding: 12px 12px 10px; border-radius: 12px; background: var(--paper-100); text-decoration: none; color: inherit; border-left: 4px solid var(--text-400); transition: transform .12s ease, box-shadow .12s ease; min-width: 0; } .rel-doc:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); } .rel-doc strong { font-size: 13px; color: var(--heading); line-height: 1.25; overflow-wrap: anywhere; } .rel-doc em { font-style: normal; font-size: 11px; color: var(--text-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rel-doc b { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--heading); margin-top: 4px; } .rel-doc span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--text-600); } .rel-doc--fresh { background: var(--fresh-100); border-left-color: var(--fresh-500); } .rel-doc--fresh span { color: var(--fresh-600); } .rel-doc--amber { background: var(--amber-100); border-left-color: var(--amber-500); } .rel-doc--amber span { color: var(--amber-600, #B7791F); } .rel-doc--red { background: var(--red-100); border-left-color: var(--red-500); } .rel-doc--red span, .rel-doc--red b { color: var(--red-500); } .rel-doc--neutro { border-left-color: var(--sky-500); background: var(--sky-100); } .rel-doc--neutro span { color: var(--sky-500); } .rel-doc--neutro b { font-size: 12px; text-transform: lowercase; font-family: inherit; font-weight: 600; color: var(--text-600); } /* Nº/Ref. da empresa — embaixo da marca na sidebar e no card Identidade (Configurações) */ .sidebar__brand-ref { margin-top: 3px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: #9FB4E0; opacity: .8; } html.sidebar-collapsed .sidebar__brand-ref { display: none; } .settings-card { position: relative; } .empresa-ref { position: absolute; top: 18px; right: 20px; text-align: right; line-height: 1.15; } .empresa-ref small { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-400); } .empresa-ref strong { font-family: var(--font-mono); font-size: 13px; color: var(--text-600); font-weight: 700; } /* Dashboard: aviso de chamado de suporte respondido (todos veem; quem abriu tem destaque) */ .chamado-aviso { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper-50); } .chamado-aviso--meu { border-color: var(--amber-500); background: color-mix(in srgb, var(--amber-100) 60%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber-500) 14%, transparent); } @supports not (background: color-mix(in srgb, red 50%, blue)) { .chamado-aviso--meu { background: var(--amber-100); } } .chamado-aviso__icone { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--petrol-700); color: #fff; } .chamado-aviso--meu .chamado-aviso__icone { background: var(--amber-500); } .chamado-aviso__corpo { flex: 1; min-width: 0; } .chamado-aviso__corpo > strong { display: block; font-size: 14.5px; color: var(--text-900); margin-bottom: 4px; } .chamado-aviso__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .chamado-aviso__lista li { font-size: 13px; color: var(--text-600); } .chamado-aviso__lista b { font-family: var(--font-mono); color: var(--text-900); } .chamado-aviso__lista span { display: block; font-size: 11.5px; color: var(--text-400); } .chamado-aviso__nota { margin: 8px 0 0; font-size: 12px; color: var(--text-400); } .chamado-aviso__btn { align-self: center; white-space: nowrap; } @media (max-width: 640px) { .chamado-aviso { flex-wrap: wrap; } .chamado-aviso__btn { width: 100%; text-align: center; } } /* ========================================================================= HIGIENIZAÇÃO (higienizacao.php) — checklist do turno, hortifrúti e plano ========================================================================= */ .hig-turnos { display: inline-flex; background: var(--paper-100); border-radius: 999px; padding: 3px; gap: 2px; } .hig-turno { padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--text-600); text-decoration: none; transition: .15s; } .hig-turno:hover { color: var(--text-900); } .hig-turno.is-ativo { background: var(--surface); color: var(--petrol-700); box-shadow: var(--shadow-card); } .hig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 4px; } .hig-card { --hc: var(--text-400); position: relative; border-radius: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--hc); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 10px; } .hig-card--pendente { --hc: var(--sky-500); } .hig-card--ok { --hc: var(--fresh-500); background: color-mix(in srgb, var(--fresh-100) 45%, var(--surface)); } .hig-card--fora { --hc: var(--red-500); background: color-mix(in srgb, var(--red-100) 45%, var(--surface)); } .hig-card--neutro { --hc: var(--amber-500); background: color-mix(in srgb, var(--amber-100) 45%, var(--surface)); } @supports not (background: color-mix(in srgb, red 50%, blue)) { .hig-card--ok { background: var(--fresh-100); } .hig-card--fora { background: var(--red-100); } .hig-card--neutro { background: var(--amber-100); } } .hig-card__topo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; } .hig-card__icone { width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--hc); color: #fff; flex-shrink: 0; } .hig-card__nome strong { display: block; font-size: 13.5px; line-height: 1.25; color: var(--text-900); overflow-wrap: anywhere; } .hig-card__nome span { display: block; font-size: 11.5px; color: var(--text-400); overflow-wrap: anywhere; } .hig-card__tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 4px 8px; border-radius: 999px; background: var(--paper-100); color: var(--text-600); white-space: nowrap; } .hig-card__tag--amber { background: var(--amber-500); color: #fff; } .hig-opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .hig-op { position: relative; } .hig-op input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .hig-op span { display: block; text-align: center; padding: 9px 6px; border-radius: 10px; font-size: 12px; font-weight: 700; border: 1.5px solid var(--line); background: var(--surface); color: var(--text-600); cursor: pointer; transition: .15s; } .hig-op input:focus-visible + span { outline: 2px solid var(--petrol-500); outline-offset: 2px; } .hig-op--ok input:checked + span { background: var(--fresh-500); border-color: var(--fresh-500); color: #fff; } .hig-op--nok input:checked + span { background: var(--red-500); border-color: var(--red-500); color: #fff; } .hig-op--nr input:checked + span { background: var(--amber-500); border-color: var(--amber-500); color: #fff; } .hig-extra { display: none; } .hig-card__linha { display: flex; gap: 8px; align-items: center; } .hig-card__linha .field-input-plain { flex: 1; min-width: 0; } .hig-foto { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-600); border: 1px dashed var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; white-space: nowrap; } .hig-foto:hover { border-color: var(--petrol-500); color: var(--petrol-700); } .hig-foto input { display: none; } .hig-card__feito { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--text-600); } .hig-card__feito em { font-style: italic; width: 100%; } .hig-card__feito .hig-acao { color: var(--red-500); font-style: normal; } .hig-foto-link { font-size: 11.5px; color: var(--petrol-700); text-decoration: underline; } .hig-pop { font-size: 12px; color: var(--text-600); } .hig-pop summary { cursor: pointer; font-weight: 600; color: var(--petrol-700); } .hig-pop p { margin: 6px 0 0; line-height: 1.55; white-space: pre-wrap; } .hig-dupla { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; } .hig-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; } .hig-etapas { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; } .hig-etapas span { font-size: 11.5px; color: var(--text-600); background: var(--paper-100); border-radius: 999px; padding: 5px 11px; } .hig-horas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .hig-horas .field-input-plain { width: 128px; min-width: 110px; } .hig-form-grid .field--largo { grid-column: 1 / -1; } .hig-horas span { font-size: 12.5px; color: var(--text-400); } /* Campo de hora: digitação (HH:MM) + botão que abre o relógio nativo */ .hig-hora-campo { position: relative; display: inline-flex; align-items: center; } .hig-hora-campo .hig-hora-txt { width: 96px; min-width: 84px; padding-right: 32px; text-align: center; letter-spacing: 1px; font-variant-numeric: tabular-nums; } .hig-hora-pick { position: absolute; right: 28px; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .hig-hora-relogio { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--petrol-500); display: inline-flex; padding: 3px; border-radius: 6px; } .hig-hora-relogio:hover { background: var(--paper-100); } .hig-previa { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; margin: 14px 0; } .hig-previa strong { font-size: 14px; } .hig-previa span { font-size: 12.5px; } .hig-previa--ok { background: var(--fresh-100); color: var(--fresh-600); } .hig-previa--fora { background: var(--red-100); color: var(--red-500); } .hig-lista-dia { display: flex; flex-direction: column; gap: 8px; } .hig-item-dia { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--paper-50); border-left: 3px solid var(--fresh-500); } .hig-item-dia--fora { border-left-color: var(--red-500); background: color-mix(in srgb, var(--red-100) 40%, var(--paper-50)); } .hig-item-dia strong { display: block; font-size: 13px; color: var(--text-900); } .hig-item-dia span { display: block; font-size: 11.5px; color: var(--text-600); } .hig-item-dia__meta { color: var(--text-400) !important; } .hig-item-dia__motivo { color: var(--red-500) !important; } .hig-filtro { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } .hig-filtro .field { margin: 0; } .hig-check-turnos { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--text-600); padding-top: 6px; } .hig-check-ativo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-600); margin-top: 12px; } .hig-plano-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .hig-plano-toolbar .btn svg { vertical-align: -2px; } @media (max-width: 980px) { .hig-dupla { grid-template-columns: 1fr; } } @media (max-width: 640px) { .hig-grid { grid-template-columns: 1fr; } .hig-opcoes { grid-template-columns: 1fr; } }