/* ========================================================================== SISTEMA DE CHECKLISTS - RECANTO MAESTRO Design system compartilhado. Tokens vindos do guia de identidade (guia_identidade_la_terrazza_checklist). Cada restaurante sobrescreve apenas as variaveis de --marca-* em uma classe no (tema-lt, tema-ru). O resto do sistema nao muda. Principios aplicados: - resposta no toque (pointer-down), nunca so no final - molas criticamente amortecidas por padrao; curva com leve overshoot apenas onde houve gesto/conquista - materiais translucidos para a moldura, superficies solidas para conteudo - tracking tipografico especifico por tamanho ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { /* marca - padrao (sobrescrito por tema-lt / tema-ru) */ --marca-primaria: #4C5747; --marca-profunda: #384736; --marca-suporte: #50614F; --marca-acento: #C7A383; --marca-acento-sub: #E8D9C7; --marca-marfim: #FEFEFD; --marca-sobre-escuro: #FEFEFD; /* superficies */ --pagina: #F4F2EC; --superficie: #FEFEFD; --superficie-2:#EFEDE5; --borda: #D4D1C7; --borda-suave: #E4E1D8; /* texto */ --tinta: #253026; --tinta-media: #5C6459; --tinta-suave: #6E7569; /* 4.8:1 sobre a superficie: le-se em pe, com sol */ /* Cores dos graficos. Sao mais saturadas que as cores de estado do resto do app de proposito: numa barra fina, lado a lado, o tom calmo da interface nao se distingue. Este trio passou nos cinco testes de paleta, inclusive separacao para daltonismo (protan/deutan/tritan) e contraste sobre a superficie clara. Nunca use estas cores fora de grafico, e nunca use as de estado dentro de um. */ --g-ok: #2E7D52; --g-meio: #B87C10; --g-ruim: #B23A32; --g-neutro:#C9C6BC; --g-marca: #6E7F68; /* estados semanticos */ --ok: #496C58; --ok-fundo: #E7F0EA; --atencao: #B67D49; --atencao-fundo: #FAEFE2; --atraso: #98544C; --atraso-fundo: #F8E9E7; /* tipografia */ --fonte-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --fonte-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; /* medidas */ --raio-p: 8px; --raio: 12px; --raio-g: 18px; --raio-max: 999px; /* sombras: leves e difusas, mais densas conforme a superficie sobe */ --sombra-0: 0 1px 2px rgba(37, 48, 38, .04); --sombra-1: 0 1px 2px rgba(37, 48, 38, .05), 0 2px 8px rgba(37, 48, 38, .04); --sombra-2: 0 2px 4px rgba(37, 48, 38, .06), 0 8px 24px rgba(37, 48, 38, .07); --sombra-3: 0 8px 16px rgba(37, 48, 38, .08), 0 24px 56px rgba(37, 48, 38, .12); /* molas: criticamente amortecida (padrao) e com leve overshoot (conquista) */ --mola: cubic-bezier(.32, .72, 0, 1); --mola-suave: cubic-bezier(.4, 0, .2, 1); --mola-conquista: cubic-bezier(.34, 1.42, .48, 1); --t-rapido: 140ms; --t: 260ms; --t-lento: 420ms; --lateral-w: 268px; --topo-h: 68px; color-scheme: light; } /* Tema La Terrazza di Recanto */ .tema-lt { --marca-primaria: #4C5747; --marca-profunda: #384736; --marca-suporte: #50614F; --marca-acento: #C7A383; --marca-acento-sub: #EADBC8; --marca-sobre-escuro: #FEFEFD; --pagina: #F4F2EC; } /* Tema Ristorante Universitario */ .tema-ru { --marca-primaria: #D11319; --marca-profunda: #9E0F14; --marca-suporte: #B81217; --marca-acento: #E8A87C; --marca-acento-sub: #F7E2D2; --marca-sobre-escuro: #FFFFFF; --pagina: #F7F3F1; --tinta: #2B1A18; --tinta-media: #6B5450; --tinta-suave: #7E6A65; --borda: #E3D6D2; --borda-suave: #EFE6E3; --superficie-2: #F2E9E6; } /* -------------------------------------------------------------------------- 2. RESET E BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--fonte-ui); font-size: 15px; line-height: 1.55; color: var(--tinta); background: var(--pagina); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; border: 0; background: none; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { margin: 0; font-weight: 600; } /* tracking especifico por tamanho, nunca um valor unico */ .display { font-family: var(--fonte-display); font-size: clamp(30px, 5vw, 42px); line-height: 1.06; letter-spacing: -.02em; font-weight: 600; } .titulo-tela { font-family: var(--fonte-display); font-size: clamp(25px, 3.4vw, 31px); line-height: 1.14; letter-spacing: -.015em; font-weight: 600; } .titulo-secao { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); } .rotulo { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--tinta-media); margin-bottom: 7px; } .svg-icone { width: 1em; height: 1em; display: inline-block; vertical-align: -.13em; flex: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; } :focus-visible { outline: 2px solid var(--marca-acento); outline-offset: 2px; border-radius: 4px; } /* -------------------------------------------------------------------------- 3. ESTRUTURA: LATERAL + CONTEUDO -------------------------------------------------------------------------- */ .lateral { position: fixed; inset: 0 auto 0 0; width: var(--lateral-w); background: var(--marca-profunda); color: var(--marca-sobre-escuro); display: flex; flex-direction: column; z-index: 60; transition: transform var(--t-lento) var(--mola); } .lateral__marca { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,.09); } .lateral__logo { display: block; width: 100%; max-width: 168px; height: auto; } .lateral__logo--svg { max-width: 176px; } .lateral__sub { margin: 10px 0 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 600; } .lateral__nav { flex: 1; overflow-y: auto; padding: 12px 12px 20px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; } .lateral__nav::-webkit-scrollbar { width: 6px; } .lateral__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; } .lateral__grupo { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.4); font-weight: 600; padding: 18px 10px 7px; } .item-menu { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--raio-p); color: rgba(255,255,255,.78); font-size: 14px; font-weight: 500; position: relative; transition: background var(--t-rapido) var(--mola-suave), color var(--t-rapido); } .item-menu:hover { background: rgba(255,255,255,.07); color: #fff; } .item-menu:active { background: rgba(255,255,255,.12); } .item-menu.is-ativo { background: rgba(255,255,255,.13); color: #fff; font-weight: 600; } .item-menu.is-ativo::before { content: ''; position: absolute; left: -12px; top: 50%; width: 3px; height: 20px; margin-top: -10px; border-radius: 0 3px 3px 0; background: var(--marca-acento); } .item-menu__ic { font-size: 17px; opacity: .85; } .item-menu__txt { flex: 1; min-width: 0; } .item-menu__pct { font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 600; color: rgba(255,255,255,.55); padding: 2px 7px; border-radius: var(--raio-max); background: rgba(255,255,255,.08); transition: all var(--t) var(--mola); } .item-menu.is-completo .item-menu__pct { background: var(--marca-acento); color: var(--marca-profunda); } .lateral__rodape { padding: 12px; border-top: 1px solid rgba(255,255,255,.09); } .cracha { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--raio); background: rgba(255,255,255,.06); } .cracha__av { width: 34px; height: 34px; border-radius: var(--raio-max); background: var(--marca-acento); color: var(--marca-profunda); display: grid; place-items: center; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; flex: none; } .cracha__txt { flex: 1; min-width: 0; } .cracha__nome { font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cracha__turno { font-size: 11.5px; color: rgba(255,255,255,.55); } .cracha__sair { width: 30px; height: 30px; border-radius: var(--raio-p); display: grid; place-items: center; color: rgba(255,255,255,.6); transition: all var(--t-rapido); flex: none; } .cracha__sair:hover { background: rgba(255,255,255,.12); color: #fff; } .cracha__sair:active { transform: scale(.92); } .conteudo { margin-left: var(--lateral-w); min-height: 100vh; } /* barra superior: material translucido, conteudo desliza por baixo */ .barra-topo { position: sticky; top: 0; z-index: 40; min-height: var(--topo-h); display: flex; align-items: center; gap: 14px; padding: 12px 30px; background: color-mix(in srgb, var(--pagina) 78%, transparent); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); } /* efeito de borda no scroll, nao um filete duro */ .barra-topo::after { content: ''; position: absolute; left: 0; right: 0; bottom: -18px; height: 18px; background: linear-gradient(color-mix(in srgb, var(--pagina) 70%, transparent), transparent); pointer-events: none; } .barra-topo__ttl { flex: 1; min-width: 0; } .barra-topo__ttl h1 { font-family: var(--fonte-display); font-size: 25px; line-height: 1.15; letter-spacing: -.015em; font-weight: 600; } .barra-topo__ttl p { margin: 1px 0 0; font-size: 13px; color: var(--tinta-suave); } .barra-topo__dir { display: flex; align-items: center; gap: 9px; flex: none; } .hamburguer { display: none; width: 40px; height: 40px; border-radius: var(--raio-p); place-items: center; color: var(--tinta-media); font-size: 19px; transition: all var(--t-rapido); } .hamburguer:active { transform: scale(.93); background: var(--superficie-2); } .veu { position: fixed; inset: 0; z-index: 50; background: rgba(37,48,38,.4); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity var(--t) var(--mola-suave); } .veu.is-on { opacity: 1; pointer-events: auto; } .pagina { padding: 6px 30px 90px; max-width: 1080px; animation: entrar-pagina var(--t-lento) var(--mola) both; } @keyframes entrar-pagina { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 4. PILULAS DE ESTADO -------------------------------------------------------------------------- */ .pilula { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--raio-max); font-size: 12.5px; font-weight: 600; background: var(--superficie); border: 1px solid var(--borda); color: var(--tinta-media); white-space: nowrap; transition: all var(--t) var(--mola); } .pilula .svg-icone { font-size: 14px; } .pilula--ok { background: var(--ok-fundo); border-color: transparent; color: var(--ok); } .pilula--pend { background: var(--atencao-fundo); border-color: transparent; color: var(--atencao); } .pilula--atraso { background: var(--atraso-fundo); border-color: transparent; color: var(--atraso); } .pilula--off { background: var(--superficie-2); border-color: transparent; color: var(--tinta-suave); } .pilula--acento { background: var(--marca-acento); border-color: transparent; color: var(--marca-profunda); } .pilula-bt { cursor: pointer; } .pilula-bt:active { transform: scale(.96); } .pilula__curto { display: none; } /* -------------------------------------------------------------------------- 5. BOTOES -------------------------------------------------------------------------- */ .bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: var(--raio-p); font-size: 14.5px; font-weight: 600; letter-spacing: .005em; transition: transform 110ms var(--mola-suave), background var(--t-rapido), box-shadow var(--t-rapido), opacity var(--t-rapido); will-change: transform; } .bt:active { transform: scale(.972); } .bt--principal { background: var(--marca-profunda); color: var(--marca-sobre-escuro); box-shadow: var(--sombra-1); } .bt--principal:hover { background: var(--marca-primaria); } .bt--acento { background: var(--marca-acento); color: var(--marca-profunda); box-shadow: var(--sombra-1); } .bt--acento:hover { filter: brightness(1.04); } .bt--linha { background: var(--superficie); border: 1px solid var(--borda); color: var(--tinta-media); } .bt--linha:hover { border-color: var(--tinta-suave); color: var(--tinta); } .bt--fantasma { color: var(--tinta-media); padding: 9px 12px; } .bt--fantasma:hover { background: var(--superficie-2); } .bt--bloco { width: 100%; } .bt[disabled] { opacity: .45; pointer-events: none; } /* -------------------------------------------------------------------------- 6. CARTOES E SETORES -------------------------------------------------------------------------- */ .cartao { background: var(--superficie); border: 1px solid var(--borda-suave); border-radius: var(--raio); box-shadow: var(--sombra-1); } .setor { background: var(--superficie); border: 1px solid var(--borda-suave); border-radius: var(--raio-g); box-shadow: var(--sombra-1); margin-bottom: 16px; overflow: hidden; transition: box-shadow var(--t) var(--mola-suave); } .setor:hover { box-shadow: var(--sombra-2); } .setor__topo { display: flex; align-items: center; gap: 13px; padding: 17px 20px; border-bottom: 1px solid var(--borda-suave); } .setor__ic { width: 40px; height: 40px; flex: none; border-radius: var(--raio-p); display: grid; place-items: center; background: var(--superficie-2); color: var(--marca-primaria); font-size: 19px; } .setor__ttl { flex: 1; min-width: 0; } .setor__ttl h2 { font-size: 16.5px; font-weight: 650; letter-spacing: -.005em; } .setor__ttl p { margin: 2px 0 0; font-size: 13px; color: var(--tinta-suave); } .setor__lista { padding: 7px; } .setor__pe { padding: 16px 20px 19px; border-top: 1px solid var(--borda-suave); background: color-mix(in srgb, var(--superficie-2) 45%, transparent); } /* -------------------------------------------------------------------------- 7. TAREFA - o elemento central do app -------------------------------------------------------------------------- */ .tarefa { display: flex; align-items: flex-start; gap: 13px; width: 100%; padding: 12px 13px; border-radius: var(--raio); text-align: left; position: relative; transition: background var(--t-rapido) var(--mola-suave), transform 110ms var(--mola-suave); will-change: transform; -webkit-tap-highlight-color: transparent; } .tarefa:hover { background: var(--superficie-2); } /* resposta no toque, nao na soltura */ .tarefa:active { transform: scale(.988); background: var(--superficie-2); } .tarefa__cx { width: 25px; height: 25px; flex: none; margin-top: 1px; border-radius: 8px; border: 1.8px solid var(--borda); background: var(--superficie); display: grid; place-items: center; color: #fff; transition: background var(--t) var(--mola), border-color var(--t) var(--mola), transform var(--t) var(--mola-conquista); } .tarefa__cx .svg-icone { width: 15px; height: 15px; stroke-width: 2.6; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset var(--t) var(--mola) 40ms; } .tarefa.is-feita .tarefa__cx { background: var(--ok); border-color: var(--ok); transform: scale(1.06); } .tarefa.is-feita .tarefa__cx .svg-icone { stroke-dashoffset: 0; } .tarefa__txt { flex: 1; min-width: 0; padding-top: 1px; } .tarefa__nome { display: inline; font-size: 14.5px; font-weight: 550; color: var(--tinta); /* o risco e um fundo que cresce da esquerda para a direita, como uma caneta. Sendo inline com decoracao clonada, cada linha de um nome comprido recebe o seu proprio risco, em vez de um traco perdido entre as duas linhas. */ background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% 1.6px; background-position: 0 56%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 340ms var(--mola), color var(--t) var(--mola-suave); } .tarefa.is-feita .tarefa__nome { color: var(--tinta-suave); background-size: 100% 1.6px; } .tarefa__como { display: block; margin-top: 3px; font-size: 12.8px; line-height: 1.5; color: var(--tinta-suave); } .tarefa.is-feita .tarefa__como { opacity: .55; } /* assinatura da tarefa: a hora e quem marcou. Com duas pessoas no checklist ao mesmo tempo, é isto que evita refazer o que a outra já fez. */ .tarefa__hora { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--tinta-suave); flex: none; align-self: center; opacity: 0; transform: translateX(-4px); transition: all var(--t) var(--mola); white-space: nowrap; line-height: 1.25; } .tarefa.is-feita .tarefa__hora { opacity: 1; transform: none; } .tarefa__h { font-weight: 600; } .tarefa__quem { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; color: var(--tinta-suave); max-width: 92px; overflow: hidden; text-overflow: ellipsis; } /* quando foi outra pessoa, ganha a cor do acento: chama o olho */ .tarefa__quem.is-outro { color: var(--marca-primaria); background: var(--marca-acento-sub); padding: 1px 6px; border-radius: var(--raio-max); } /* aviso de que alguém marcou agora, em outro aparelho */ @keyframes chegou-de-fora { 0% { background: var(--marca-acento-sub); } 100% { background: transparent; } } .tarefa.chegou { animation: chegou-de-fora 1.6s var(--mola-suave); } .pilula--vivo { background: var(--ok-fundo); border-color: transparent; color: var(--ok); } .ponto-vivo { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; animation: pulsar-vivo 2.4s ease-in-out infinite; } @keyframes pulsar-vivo { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* botao de ajuda por tarefa */ .tarefa__ajuda { width: 22px; height: 22px; flex: none; align-self: center; border-radius: var(--raio-max); display: grid; place-items: center; color: var(--tinta-suave); font-size: 14px; transition: all var(--t-rapido); } .tarefa__ajuda:hover { background: var(--marca-acento-sub); color: var(--marca-primaria); } .tarefa__ajuda:active { transform: scale(.9); } /* -------------------------------------------------------------------------- 8. ANEL DE PROGRESSO E PAINEL -------------------------------------------------------------------------- */ .painel-progresso { display: flex; align-items: center; gap: 18px; padding: 18px 22px; background: var(--superficie); border: 1px solid var(--borda-suave); border-radius: var(--raio-g); box-shadow: var(--sombra-1); margin-bottom: 20px; flex-wrap: wrap; } .painel-progresso__txt { flex: 1; min-width: 180px; } .painel-progresso__txt strong { display: block; font-size: 16px; font-weight: 650; letter-spacing: -.005em; } .painel-progresso__txt span { font-size: 13.3px; color: var(--tinta-suave); } .anel { position: relative; width: 66px; height: 66px; flex: none; } .anel svg { transform: rotate(-90deg); display: block; } .anel__tr { fill: none; stroke: var(--superficie-2); stroke-width: 6; } .anel__pr { fill: none; stroke: var(--ok); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 620ms var(--mola), stroke var(--t); } .anel__n { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } /* -------------------------------------------------------------------------- 9. BLOCOS DE HORARIO -------------------------------------------------------------------------- */ .blocos { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 10px; margin-bottom: 18px; } .bloco-bt { padding: 13px 15px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda-suave); text-align: left; position: relative; transition: all var(--t) var(--mola); box-shadow: var(--sombra-0); } .bloco-bt:hover { border-color: var(--borda); box-shadow: var(--sombra-1); } .bloco-bt:active { transform: scale(.985); } .bloco-bt.is-ativo { border-color: var(--marca-primaria); box-shadow: 0 0 0 1px var(--marca-primaria), var(--sombra-1); } .bloco-bt__h { display: block; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .bloco-bt__d { display: block; font-size: 12px; color: var(--tinta-suave); margin-top: 1px; } .bloco-bt__b { position: absolute; top: 11px; right: 12px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 7px; border-radius: var(--raio-max); background: var(--superficie-2); color: var(--tinta-suave); transition: all var(--t) var(--mola); } .bloco-bt.is-completo .bloco-bt__b { background: var(--ok-fundo); color: var(--ok); } .bloco-bt__janela { display: block; margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--tinta-suave); } /* -------------------------------------------------------------------------- 10. SELOS -------------------------------------------------------------------------- */ .selo { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: var(--raio-max); font-variant-numeric: tabular-nums; flex: none; transition: all var(--t) var(--mola); } .selo--ok { background: var(--ok-fundo); color: var(--ok); } .selo--pend { background: var(--superficie-2); color: var(--tinta-suave); } /* -------------------------------------------------------------------------- 11. CAMPOS -------------------------------------------------------------------------- */ .campo { margin-bottom: 16px; } .entrada, .obs, select.entrada, textarea.obs { width: 100%; padding: 11px 13px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--superficie); color: var(--tinta); font-size: 14.5px; transition: border-color var(--t-rapido), box-shadow var(--t-rapido); } .entrada:focus, .obs:focus { outline: none; border-color: var(--marca-primaria); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-primaria) 14%, transparent); } .obs { min-height: 74px; resize: vertical; line-height: 1.5; font-family: inherit; } select.entrada { appearance: none; cursor: pointer; background-image: none; padding-right: 36px; } .campo-seta { position: relative; } .campo-seta::after { content: ''; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.8px solid var(--tinta-suave); border-bottom: 1.8px solid var(--tinta-suave); transform: rotate(45deg); pointer-events: none; } /* produtos disponiveis */ .produtos { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; } .prod { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 10px; border-radius: var(--raio-max); border: 1px solid var(--borda); background: var(--superficie); font-size: 13px; font-weight: 550; color: var(--tinta-media); cursor: pointer; transition: all var(--t) var(--mola); -webkit-tap-highlight-color: transparent; } .prod:active { transform: scale(.95); } .prod__p { width: 15px; height: 15px; flex: none; border-radius: var(--raio-max); border: 1.6px solid var(--borda); display: grid; place-items: center; transition: all var(--t) var(--mola); } .prod.is-ok { background: var(--ok-fundo); border-color: transparent; color: var(--ok); } .prod.is-ok .prod__p { background: var(--ok); border-color: var(--ok); } .prod.is-falta { background: var(--atraso-fundo); border-color: transparent; color: var(--atraso); } .prod.is-falta .prod__p { background: var(--atraso); border-color: var(--atraso); } /* -------------------------------------------------------------------------- 12. AVISOS -------------------------------------------------------------------------- */ .aviso { padding: 15px 18px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda-suave); border-left: 3px solid var(--marca-acento); margin-bottom: 18px; } .aviso h3 { font-size: 13.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; } .aviso p { margin: 4px 0 0; font-size: 13.5px; color: var(--tinta-media); } .aviso--forte { border-left-color: var(--atraso); background: var(--atraso-fundo); } .aviso--forte h3 { color: var(--atraso); } .aviso--forte p { color: color-mix(in srgb, var(--atraso) 80%, var(--tinta)); } .vazio { padding: 34px 20px; text-align: center; color: var(--tinta-suave); font-size: 13.5px; } /* -------------------------------------------------------------------------- 13. GRADE DE CARTOES DE MODULO -------------------------------------------------------------------------- */ .grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 13px; } .cartao-modulo { display: block; padding: 17px 18px 15px; background: var(--superficie); border: 1px solid var(--borda-suave); border-radius: var(--raio-g); box-shadow: var(--sombra-1); position: relative; transition: transform var(--t) var(--mola), box-shadow var(--t) var(--mola); will-change: transform; } .cartao-modulo:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); } .cartao-modulo:active { transform: translateY(0) scale(.99); } .cartao-modulo__ic { width: 38px; height: 38px; border-radius: var(--raio-p); display: grid; place-items: center; background: var(--superficie-2); color: var(--marca-primaria); font-size: 18px; margin-bottom: 12px; } .cartao-modulo__t { font-size: 15px; font-weight: 650; letter-spacing: -.005em; } .cartao-modulo__s { font-size: 12.5px; color: var(--tinta-suave); margin-top: 1px; } .cartao-modulo__pct { position: absolute; top: 17px; right: 18px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tinta-suave); } .cartao-modulo.is-completo .cartao-modulo__pct { color: var(--ok); } .cartao-modulo.is-completo .cartao-modulo__ic { background: var(--ok-fundo); color: var(--ok); } .barra { height: 5px; border-radius: 3px; background: var(--superficie-2); margin-top: 12px; overflow: hidden; } .barra i { display: block; height: 100%; background: var(--ok); border-radius: 3px; transition: width 620ms var(--mola); } /* -------------------------------------------------------------------------- 14. HEROI (cartao principal do dia) -------------------------------------------------------------------------- */ .heroi { display: flex; align-items: center; gap: 20px; padding: 24px 26px; border-radius: var(--raio-g); background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--marca-suporte) 75%, transparent) 0%, transparent 62%), var(--marca-profunda); color: var(--marca-sobre-escuro); margin-bottom: 20px; box-shadow: var(--sombra-2); flex-wrap: wrap; position: relative; overflow: hidden; } .heroi__t { flex: 1; min-width: 220px; } .heroi__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 5px; } .heroi__t h2 { font-family: var(--fonte-display); font-size: 27px; line-height: 1.15; letter-spacing: -.015em; font-weight: 600; display: flex; align-items: center; gap: 11px; } .heroi__t p { margin: 7px 0 0; font-size: 14px; color: rgba(255,255,255,.72); } .heroi .bt--acento { flex: none; } /* -------------------------------------------------------------------------- 15. TRILHA DO ROTEIRO -------------------------------------------------------------------------- */ .trilha { display: flex; align-items: stretch; gap: 8px; margin-bottom: 20px; } .trilha__e { flex: 1; padding: 12px 14px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda-suave); position: relative; transition: all var(--t) var(--mola); } .trilha__e.is-atual { border-color: var(--marca-primaria); box-shadow: 0 0 0 1px var(--marca-primaria), var(--sombra-1); } .trilha__e.is-ok { background: var(--ok-fundo); border-color: transparent; } .trilha__h { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--tinta-suave); text-transform: uppercase; display: flex; align-items: center; gap: 5px; } .trilha__e.is-ok .trilha__h { color: var(--ok); } .trilha__n { font-size: 14.5px; font-weight: 650; margin-top: 3px; } .trilha__p { font-size: 11.5px; color: var(--tinta-suave); margin-top: 1px; } .trilha__janela { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--tinta-suave); font-variant-numeric: tabular-nums; } .trilha__janela .svg-icone { font-size: 12px; } /* a janela desta etapa, escrita por extenso */ .faixa-janela { display: flex; align-items: flex-start; gap: 9px; padding: 12px 16px; margin-bottom: 18px; border-radius: var(--raio); background: var(--superficie-2); color: var(--tinta-media); font-size: 13.2px; line-height: 1.5; } .faixa-janela b { color: var(--tinta); font-weight: 650; } .faixa-janela .svg-icone { flex: none; margin-top: 2px; font-size: 16px; color: var(--marca-primaria); } /* -------------------------------------------------------------------------- 16. TABELAS -------------------------------------------------------------------------- */ .tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.tab { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; } table.tab th { text-align: left; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 650; padding: 10px 13px; border-bottom: 1px solid var(--borda-suave); white-space: nowrap; } table.tab td { padding: 12px 13px; border-bottom: 1px solid var(--borda-suave); vertical-align: middle; } table.tab tr:last-child td { border-bottom: 0; } .td-sub { color: var(--tinta-suave); font-size: 12.5px; } .num { font-variant-numeric: tabular-nums; } /* linha de registro */ .linha-reg { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--borda-suave); font-size: 13.5px; } .linha-reg:last-child { border-bottom: 0; } .linha-reg__ok { width: 22px; height: 22px; flex: none; border-radius: var(--raio-max); background: var(--ok); color: #fff; display: grid; place-items: center; } .linha-reg__ok .svg-icone { width: 13px; height: 13px; stroke-width: 2.8; } .linha-reg__ok.is-neutro { background: var(--superficie-2); color: var(--tinta-suave); } .linha-reg__i { flex: 1; min-width: 0; } .linha-reg__i b { display: block; font-weight: 600; } .linha-reg__i span { font-size: 12.3px; color: var(--tinta-suave); } /* -------------------------------------------------------------------------- 17. PASSOS NUMERADOS -------------------------------------------------------------------------- */ .passos { margin: 0; padding-left: 20px; font-size: 13.8px; line-height: 1.75; color: var(--tinta-media); } .passos li { margin-bottom: 8px; } .passos code { background: var(--superficie-2); padding: 2px 6px; border-radius: 5px; font-size: 12.5px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* -------------------------------------------------------------------------- 18. TELA DE ENTRADA (login e escolha de colaborador) -------------------------------------------------------------------------- */ .entrada-tela { min-height: 100vh; display: grid; place-items: center; padding: 26px 20px; background: radial-gradient(90% 70% at 50% -10%, color-mix(in srgb, var(--marca-suporte) 55%, transparent) 0%, transparent 60%), var(--marca-profunda); } .entrada__cx { width: 100%; max-width: 396px; background: var(--superficie); border-radius: 22px; padding: 32px 30px 28px; box-shadow: var(--sombra-3); animation: subir-cx 520ms var(--mola) both; } @keyframes subir-cx { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } } .entrada__logo { display: block; width: 100%; max-width: 218px; margin: 0 auto 6px; height: auto; } .entrada__logo--escuro { filter: brightness(.24) saturate(1.6); } .entrada__sub { text-align: center; font-size: 12px; letter-spacing: .11em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 600; margin: 0 0 24px; } .entrada__erro { display: none; margin: 0 0 14px; padding: 10px 13px; border-radius: var(--raio-p); background: var(--atraso-fundo); color: var(--atraso); font-size: 13px; font-weight: 550; } .entrada__erro.is-on { display: block; animation: tremer 380ms var(--mola-suave); } @keyframes tremer { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-3px); } 40%, 60% { transform: translateX(3px); } } .entrada__rodape { margin: 18px 0 0; text-align: center; font-size: 12px; color: var(--tinta-suave); line-height: 1.5; } /* lista de colaboradores */ .equipe { display: grid; gap: 9px; margin-bottom: 20px; } .equipe__p { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie); text-align: left; transition: all var(--t) var(--mola); } .equipe__p:hover { border-color: var(--marca-primaria); background: var(--superficie-2); } .equipe__p:active { transform: scale(.985); } .equipe__p.is-sel { border-color: var(--marca-primaria); box-shadow: 0 0 0 1px var(--marca-primaria); background: var(--superficie); } .equipe__av { width: 38px; height: 38px; flex: none; border-radius: var(--raio-max); background: var(--marca-acento-sub); color: var(--marca-primaria); display: grid; place-items: center; font-size: 13px; font-weight: 700; } .equipe__p.is-sel .equipe__av { background: var(--marca-primaria); color: var(--marca-sobre-escuro); } .equipe__n { flex: 1; font-size: 14.5px; font-weight: 600; } .equipe__c { color: var(--marca-primaria); opacity: 0; transition: opacity var(--t); } .equipe__p.is-sel .equipe__c { opacity: 1; } /* -------------------------------------------------------------------------- 19. HUB (selecao de restaurante) -------------------------------------------------------------------------- */ /* A tela inicial é da rede, não de um restaurante. Por isso ela é neutra: fundo claro, texto grafite, e a cor fica por conta de cada cartão. Assim nenhuma casa parece dona do sistema, e cabe quantas vierem. */ .hub { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 52px 22px; background: radial-gradient(70% 46% at 50% 0%, #FBFAF7 0%, transparent 64%), #F1EFE9; color: #2C2E29; text-align: center; } .hub__marca { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: #96968C; font-weight: 700; margin-bottom: 15px; } .hub__t { font-family: var(--fonte-display); font-size: clamp(34px, 6.4vw, 54px); line-height: 1.04; letter-spacing: -.022em; font-weight: 600; margin: 0 0 12px; max-width: 15ch; color: #23251F; } .hub__p { font-size: 15px; color: #6E7068; max-width: 46ch; margin: 0 auto 42px; line-height: 1.6; } .hub__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; width: 100%; max-width: 780px; } .hub__cartao { display: flex; flex-direction: column; padding: 14px 14px 18px; border-radius: 20px; background: #FFFFFF; border: 1px solid #E4E1D8; box-shadow: 0 1px 2px rgba(35,37,31,.05), 0 4px 14px rgba(35,37,31,.05); transition: transform var(--t) var(--mola), box-shadow var(--t) var(--mola), border-color var(--t); will-change: transform; position: relative; overflow: hidden; } .hub__cartao:hover { transform: translateY(-3px); border-color: #D4D1C7; box-shadow: 0 4px 10px rgba(35,37,31,.07), 0 18px 40px rgba(35,37,31,.12); } .hub__cartao:active { transform: translateY(-1px) scale(.994); } /* A placa carrega a cor da casa. O logo do La Terrazza é claro e precisa de fundo escuro; o do Ristorante é vermelho e precisa de fundo claro. */ .hub__placa { border-radius: 13px; min-height: 132px; display: grid; place-items: center; padding: 22px 20px; margin-bottom: 15px; } .hub__placa img { width: 100%; max-width: 196px; height: auto; display: block; } .hub__placa--escura { background: #384736; } .hub__placa--clara { background: #FBF4F2; border: 1px solid #F0E2DE; } .hub__nome { font-size: 15.5px; font-weight: 650; letter-spacing: -.005em; color: #23251F; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } .hub__cn { font-size: 12.8px; font-weight: 500; color: #85877D; margin-top: 2px; } .hub__seta { position: absolute; right: 16px; bottom: 16px; color: #B9BAAF; font-size: 17px; transition: transform var(--t) var(--mola), color var(--t); } .hub__cartao:hover .hub__seta { transform: translateX(3px); color: #6E7068; } /* fica ao lado do nome, nunca por cima do logo */ .hub__tag { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--raio-max); background: #EFEDE5; color: #8A8C82; white-space: nowrap; } .hub__rodape { margin-top: 42px; font-size: 12.3px; color: #9A9C92; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; justify-content: center; padding: 0 8px; } .hub__rodape .svg-icone { flex: none; } /* -------------------------------------------------------------------------- 20. CELEBRACAO (fim de etapa / fim de dia) -------------------------------------------------------------------------- */ .festa { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 22px; background: rgba(37,48,38,.5); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); animation: surgir var(--t) var(--mola-suave) both; } @keyframes surgir { from { opacity: 0; } to { opacity: 1; } } .festa__cx { width: 100%; max-width: 396px; background: var(--superficie); border-radius: 22px; padding: 32px 28px 26px; text-align: center; box-shadow: var(--sombra-3); /* materializa: escala + desfoque juntos, nao um fade simples */ animation: materializar 560ms var(--mola-conquista) both; } @keyframes materializar { from { opacity: 0; transform: scale(.9) translateY(12px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } } .festa__ic { width: 66px; height: 66px; margin: 0 auto 16px; border-radius: var(--raio-max); display: grid; place-items: center; background: var(--ok-fundo); color: var(--ok); font-size: 30px; animation: pulso-ic 640ms var(--mola-conquista) 120ms both; } @keyframes pulso-ic { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } .festa__t { font-family: var(--fonte-display); font-size: 27px; line-height: 1.2; letter-spacing: -.015em; font-weight: 600; margin-bottom: 9px; } .festa__p { font-size: 14.3px; color: var(--tinta-media); line-height: 1.6; margin: 0 0 22px; } .festa__frase { font-family: var(--fonte-display); font-size: 17px; font-style: italic; line-height: 1.45; color: var(--marca-primaria); padding: 15px 17px; margin: 0 0 20px; background: var(--superficie-2); border-radius: var(--raio); } .festa__bts { display: grid; gap: 8px; } /* caixa de comentário dentro do aviso de salvar */ .festa__campo { text-align: left; margin: 0 0 16px; } .festa__campo .obs { min-height: 82px; } /* aviso do que não dá para desfazer */ .festa__aviso { display: flex; align-items: flex-start; gap: 8px; text-align: left; margin: 0 0 16px; padding: 11px 13px; border-radius: var(--raio-p); background: var(--atencao-fundo); color: color-mix(in srgb, var(--atencao) 86%, var(--tinta)); font-size: 12.8px; line-height: 1.5; font-weight: 550; } .festa__aviso .svg-icone { flex: none; margin-top: 2px; font-size: 15px; } /* -------------------------------------------------------------------------- 21. INFOGRAFICOS -------------------------------------------------------------------------- */ .metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 12px; margin-bottom: 20px; } .metrica { padding: 16px 18px; background: var(--superficie); border: 1px solid var(--borda-suave); border-radius: var(--raio); box-shadow: var(--sombra-0); } .metrica__n { font-size: 29px; font-weight: 700; letter-spacing: -.028em; font-variant-numeric: tabular-nums; line-height: 1.05; font-family: var(--fonte-display); } .metrica__r { font-size: 12.3px; color: var(--tinta-suave); margin-top: 3px; } .metrica--ok .metrica__n { color: var(--ok); } .metrica--atencao .metrica__n { color: var(--atencao); } .metrica--atraso .metrica__n { color: var(--atraso); } /* barras por dia */ .grafico { padding: 18px 20px 14px; } .gr-barras { display: flex; align-items: flex-end; gap: 6px; height: 132px; margin-bottom: 9px; } .gr-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 3px; } .gr-b { width: 100%; border-radius: 5px 5px 3px 3px; background: var(--marca-acento-sub); min-height: 3px; transition: height 620ms var(--mola); position: relative; } .gr-b.is-alto { background: var(--ok); } .gr-b.is-medio { background: var(--atencao); } .gr-b.is-baixo { background: var(--atraso); } .gr-rot { display: flex; gap: 6px; font-size: 10.5px; color: var(--tinta-suave); text-align: center; } .gr-rot span { flex: 1; } .legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--tinta-suave); } .legenda i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; } /* linha de colaborador */ .pessoa-linha { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--borda-suave); } .pessoa-linha:last-child { border-bottom: 0; } .pessoa-linha__av { width: 32px; height: 32px; flex: none; border-radius: var(--raio-max); background: var(--marca-acento-sub); color: var(--marca-primaria); display: grid; place-items: center; font-size: 11.5px; font-weight: 700; } .pessoa-linha__n { flex: 1; font-size: 14px; font-weight: 600; min-width: 0; } .pessoa-linha__b { width: 96px; flex: none; } /* -------------------------------------------------------------------------- 21b. LINHA DE EDICAO DE ITEM (tela da gestao) -------------------------------------------------------------------------- */ .item-edit { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: var(--raio); transition: background var(--t-rapido); } .item-edit:hover { background: var(--superficie-2); } .item-edit__txt { flex: 1; min-width: 0; } .item-edit__txt b { display: block; font-size: 14.3px; font-weight: 600; color: var(--tinta); } .item-edit__txt span { display: block; font-size: 12.5px; color: var(--tinta-suave); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-edit .bt { padding: 8px; flex: none; width: 38px; height: 38px; display: grid; place-items: center; font-size: 16px; } /* -------------------------------------------------------------------------- 22. FOLHA INFERIOR (ajuda contextual) -------------------------------------------------------------------------- */ .folha { position: fixed; inset: auto 0 0 0; z-index: 95; background: var(--superficie); border-radius: 22px 22px 0 0; padding: 10px 24px 30px; box-shadow: 0 -8px 42px rgba(37,48,38,.2); max-height: 78vh; overflow-y: auto; transform: translateY(100%); transition: transform 420ms var(--mola); } .folha.is-on { transform: none; } .folha__alca { width: 38px; height: 4px; border-radius: 2px; background: var(--borda); margin: 0 auto 16px; } .folha__t { font-size: 17px; font-weight: 650; margin-bottom: 7px; } .folha__p { font-size: 14px; line-height: 1.6; color: var(--tinta-media); margin: 0 0 18px; } .folha__tag { display: inline-block; margin-bottom: 12px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--marca-primaria); } /* -------------------------------------------------------------------------- 22b. RELATORIO DA GESTAO Regras que valem para todos os graficos daqui: - marca fina, ponta arredondada de 4px ancorada na linha de base - 2px de respiro entre segmentos de uma barra empilhada, para a divisao existir mesmo sem cor - legenda sempre que houver duas series ou mais, e valor escrito junto quando cabe: a cor nunca e a unica pista - eixo e grade discretos; o dado e que tem peso -------------------------------------------------------------------------- */ /* faixa de destaque no topo do relatorio */ .rel-topo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; } .rel-caixa { padding: 16px 18px; background: var(--superficie); border: 1px solid var(--borda-suave); border-radius: var(--raio); box-shadow: var(--sombra-0); } .rel-caixa__n { font-family: var(--fonte-display); font-size: 32px; font-weight: 700; line-height: 1.02; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .rel-caixa__r { font-size: 12.5px; color: var(--tinta-suave); margin-top: 4px; } .rel-caixa__s { font-size: 12px; color: var(--tinta-media); margin-top: 7px; font-weight: 550; } .rel-caixa--ok .rel-caixa__n { color: var(--g-ok); } .rel-caixa--meio .rel-caixa__n { color: var(--g-meio); } .rel-caixa--ruim .rel-caixa__n { color: var(--g-ruim); } /* legenda: sempre presente com duas series ou mais */ .rel-legenda { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--tinta-media); padding: 12px 20px 2px; } .rel-legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; } /* ---- barra horizontal: uma serie, identidade pelo rotulo da linha ---- */ .rel-linha { display: grid; grid-template-columns: 30px minmax(96px, 1.1fr) minmax(80px, 2.4fr) auto; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--borda-suave); } .rel-linha:last-child { border-bottom: 0; } .rel-linha__ic { width: 30px; height: 30px; border-radius: var(--raio-max); display: grid; place-items: center; background: var(--marca-acento-sub); color: var(--marca-primaria); font-size: 12px; font-weight: 700; } .rel-linha__n { font-size: 13.6px; font-weight: 600; min-width: 0; } .rel-linha__n small { display: block; font-size: 11.5px; font-weight: 500; color: var(--tinta-suave); margin-top: 1px; } .rel-linha__v { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .rel-trilho { height: 10px; border-radius: 5px; background: var(--superficie-2); overflow: hidden; display: flex; gap: 2px; /* respiro entre segmentos */ } .rel-trilho i { display: block; height: 100%; border-radius: 2px 5px 5px 2px; transition: width 620ms var(--mola); min-width: 0; } .rel-trilho i:first-child { border-radius: 5px 2px 2px 5px; } .rel-trilho i:only-child { border-radius: 5px; } .rel-trilho .s-ok { background: var(--g-ok); } .rel-trilho .s-meio { background: var(--g-meio); } .rel-trilho .s-ruim { background: var(--g-ruim); } .rel-trilho .s-marca{ background: var(--g-marca); } /* ---- colunas por dia: empilhadas, com respiro entre segmentos ---- */ .rel-dias { padding: 16px 20px 10px; } .rel-dias__area { display: flex; align-items: flex-end; gap: 5px; height: 148px; } .rel-dias__col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; cursor: default; } .rel-dias__col i { display: block; width: 100%; min-height: 3px; border-radius: 2px; transition: height 620ms var(--mola); } .rel-dias__col i:first-child { border-radius: 4px 4px 2px 2px; } .rel-dias__col:hover i { filter: brightness(1.08); } .rel-dias__rot { display: flex; gap: 5px; margin-top: 8px; font-size: 10.5px; color: var(--tinta-suave); text-align: center; font-variant-numeric: tabular-nums; } .rel-dias__rot span { flex: 1; } .rel-dias__rot b { display: block; font-weight: 600; color: var(--tinta-media); } /* ---- pequenos multiplos: um mini grafico por pessoa ---- */ .rel-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; padding: 16px 20px 18px; } .rel-mini__cx { border: 1px solid var(--borda-suave); border-radius: var(--raio); padding: 12px 13px 10px; background: var(--superficie); /* sem isto o nome sem quebra segura a largura minima do cartao e a grade transborda no celular: o item de grade nasce com min-width auto */ min-width: 0; } .rel-mini__t { font-size: 12.8px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rel-mini__s { font-size: 11.5px; color: var(--tinta-suave); margin-bottom: 9px; font-variant-numeric: tabular-nums; } .rel-mini__g { display: flex; align-items: flex-end; gap: 3px; height: 42px; } .rel-mini__g i { flex: 1; display: block; min-height: 2px; background: var(--g-marca); border-radius: 3px 3px 2px 2px; transition: height 620ms var(--mola); } .rel-mini__g i.is-zero { background: var(--g-neutro); } /* ---- histograma por hora ---- */ .rel-horas { padding: 16px 20px 12px; } .rel-horas__area { display: flex; align-items: flex-end; gap: 2px; height: 96px; } .rel-horas__area i { flex: 1; display: block; min-height: 2px; background: var(--g-marca); border-radius: 3px 3px 2px 2px; transition: height 620ms var(--mola); } .rel-horas__area i.is-vazio { background: var(--superficie-2); } .rel-horas__area i.is-janela { background: var(--g-ok); } .rel-horas__rot { display: flex; gap: 2px; margin-top: 7px; font-size: 10px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; } .rel-horas__rot span { flex: 1; text-align: center; } /* ---- pendencias ---- */ .rel-pend { padding: 4px 0; } .rel-pend__g { padding: 11px 20px; border-bottom: 1px solid var(--borda-suave); } .rel-pend__g:last-child { border-bottom: 0; } .rel-pend__t { display: flex; align-items: center; gap: 9px; font-size: 13.6px; font-weight: 650; } .rel-pend__t .selo { margin-left: auto; } .rel-pend__i { margin: 6px 0 0 0; padding-left: 2px; font-size: 12.6px; color: var(--tinta-suave); line-height: 1.6; } /* dica que segue o ponteiro nos graficos */ .rel-dica { position: fixed; z-index: 120; padding: 8px 11px; border-radius: var(--raio-p); background: var(--marca-profunda); color: var(--marca-sobre-escuro); font-size: 12px; line-height: 1.45; box-shadow: var(--sombra-2); pointer-events: none; opacity: 0; transition: opacity var(--t-rapido); max-width: 220px; } .rel-dica.is-on { opacity: 1; } .rel-dica b { display: block; font-weight: 700; margin-bottom: 2px; } @media (max-width: 620px) { .rel-linha { grid-template-columns: 30px 1fr auto; grid-template-areas: 'ic nome valor' 'barra barra barra'; row-gap: 8px; } .rel-linha__ic { grid-area: ic; } .rel-linha__n { grid-area: nome; } .rel-linha__v { grid-area: valor; } .rel-trilho { grid-area: barra; } .rel-mini { grid-template-columns: 1fr 1fr; gap: 9px; padding: 14px 15px 16px; } .rel-dias, .rel-horas { padding: 14px 15px 10px; } .rel-legenda { padding: 12px 15px 2px; gap: 12px; } .rel-horas__rot span:nth-child(even) { color: transparent; } } /* -------------------------------------------------------------------------- 23. RESPONSIVO -------------------------------------------------------------------------- */ @media (max-width: 1000px) { .lateral { transform: translateX(-100%); box-shadow: var(--sombra-3); } .lateral.is-aberta { transform: none; } .conteudo { margin-left: 0; } .hamburguer { display: grid; } .item-menu { padding: 11px 11px; } /* 44px de alvo, para o dedo */ .barra-topo { padding: 11px 17px; } .pagina { padding: 4px 17px 84px; } .barra-topo__ttl h1 { font-size: 21px; } .barra-topo__ttl p { font-size: 12px; } } @media (max-width: 620px) { body { font-size: 15px; } /* nada pode empurrar a largura da tela */ .conteudo { width: 100%; max-width: 100vw; overflow-x: clip; } .pagina { max-width: 100%; } .barra-topo { flex-wrap: nowrap; gap: 10px; max-width: 100vw; } /* base zero: o titulo ocupa o que sobrar depois da pilula, em vez de pedir a largura do proprio texto e empurrar tudo */ .barra-topo__ttl { min-width: 0; flex: 1 1 0; } .barra-topo__dir { min-width: 0; flex: 0 1 auto; } /* a pilula nao encolhe: quem cede espaco e o titulo, que ja tem reticencias. O teto de 46vw mais abaixo evita que ela domine a barra num celular estreito. */ .barra-topo__dir .pilula { min-width: 0; flex-shrink: 0; } .barra-topo__ttl h1 { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .barra-topo__ttl p { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* a data ja aparece no painel de progresso: no celular so o estado do envio */ #pilulaData { display: none; } .barra-topo__dir .pilula { max-width: 42vw; overflow: hidden; } .barra-topo__dir .pilula span { overflow: hidden; text-overflow: ellipsis; } /* no celular vale o rotulo curto: o titulo da tela vem primeiro */ .barra-topo__dir .pilula__longo { display: none; } .barra-topo__dir .pilula__curto { display: inline; } .painel-progresso { padding: 15px; gap: 13px; } .painel-progresso__txt { min-width: 130px; } .painel-progresso .bt { width: 100%; } .trilha { flex-direction: column; } .heroi { padding: 20px; gap: 15px; } .heroi__t h2 { font-size: 23px; } .heroi .bt { width: 100%; } .painel-progresso { padding: 16px; gap: 14px; } .setor__topo { padding: 15px 16px; } .setor__lista { padding: 5px; } .setor__pe { padding: 14px 16px 17px; } /* 16px nos campos: abaixo disso o iPhone dá zoom sozinho ao focar, e a tela fica torta no meio do checklist */ .entrada, .obs, select.entrada, textarea.obs { font-size: 16px; } /* alvo de toque maior: operacao em pe, com pressa */ .tarefa { padding: 14px 12px; gap: 12px; } .tarefa__cx { width: 27px; height: 27px; } .tarefa__nome { font-size: 15px; } /* o botao de ajuda precisa caber no dedo, nao so no ponteiro */ .tarefa__ajuda { width: 42px; height: 42px; font-size: 17px; } .cracha__sair { width: 40px; height: 40px; } .pilula { padding: 8px 13px; } .prod { padding: 9px 14px 9px 11px; } .grade { grid-template-columns: 1fr 1fr; gap: 10px; } .cartao-modulo { padding: 14px 15px 13px; } .cartao-modulo__ic { width: 34px; height: 34px; font-size: 16px; margin-bottom: 9px; } .cartao-modulo__t { font-size: 13.8px; } .cartao-modulo__s { font-size: 11.5px; } .metricas { grid-template-columns: 1fr 1fr; } .blocos { grid-template-columns: 1fr; } .hub { padding: 34px 18px; } .hub__grade { grid-template-columns: 1fr; max-width: 420px; } .hub__cartao { padding: 12px 12px 15px; } .hub__placa { min-height: 108px; padding: 18px; } .hub__placa img { max-width: 172px; } /* a barra de salvar ocupa a largura toda e o botao fica cheio */ .barra-salvar .cartao { padding: 13px 15px; } .barra-salvar .bt { width: 100%; } /* tabelas largas rolam dentro do proprio cartao */ table.tab { min-width: 470px; } .festa__cx { padding: 26px 21px 22px; } .folha { padding: 10px 18px 26px; } .aviso { padding: 13px 15px; } .grafico { padding: 15px 15px 12px; } .pessoa-linha { padding: 11px 15px; gap: 10px; flex-wrap: wrap; } /* o nome nao encolhe ate virar tres linhas: a pilula desce quando falta espaco */ .pessoa-linha__n { flex: 1 1 150px; } .pessoa-linha .pilula { margin-right: 0 !important; } .pessoa-linha__b { width: 100%; } .linha-reg { padding: 11px 15px; flex-wrap: wrap; } } @media (max-width: 380px) { .grade { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 24. ACESSIBILIDADE -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .tarefa__nome::after { transition: none; } } @media (prefers-reduced-transparency: reduce) { .barra-topo { background: var(--pagina); backdrop-filter: none; -webkit-backdrop-filter: none; } .festa { background: rgba(37,48,38,.82); backdrop-filter: none; -webkit-backdrop-filter: none; } .hub__cartao { background: rgba(255,255,255,.12); backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (prefers-contrast: more) { .setor, .cartao, .cartao-modulo, .painel-progresso { border-color: var(--tinta-suave); } .tarefa__cx { border-color: var(--tinta-media); } } @media print { .lateral, .barra-topo__dir, .hamburguer, .veu, .festa { display: none !important; } .conteudo { margin-left: 0; } .setor { break-inside: avoid; box-shadow: none; } }