/* FUEL — tema claro fixo, acento verde oliva profundo (design §5.1). Oliva só em FAB, CTA, anéis, barras, chips ativos, pílulas e detalhes; a tela é branco quente com leve tom de pedra. Alta densidade bem organizada, sem foto de alimento. */ * { box-sizing: border-box; } :root { --bg: #f7f6f3; --surface: #ffffff; --pedra: #efede8; --texto: #15181a; --texto-2: #6b7075; --linha: #e6e4df; --acento: #4E6B2F; --acento-escuro: #3A5122; --acento-claro: #DCE5CF; --acento-superficie: #F1F5EA; --verde: #2e8b57; --ambar: #c98a1a; --erro: #c0392b; --radius: 18px; --font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace; --topo-h: calc(64px + env(safe-area-inset-top, 0px)); --tabbar-h: calc(66px + env(safe-area-inset-bottom, 0px)); } html, body { overscroll-behavior-y: none; } body { margin: 0; background: var(--bg); color: var(--texto); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; min-height: 100vh; } main#view { max-width: 760px; margin: 0 auto; padding: 14px clamp(16px, 5vw, 40px) calc(var(--tabbar-h) + 44px); } button { font-family: inherit; } [hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---- topo ---- */ /* altura com env() direto (não via var): no iPhone em standalone a var(--topo-h) resolvia sem a área segura e o título ficava embaixo do relógio */ .topo { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: calc(64px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) clamp(16px, 5vw, 40px) 0; background: rgba(247, 246, 243, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); } .volta, .engrenagem { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; color: var(--texto-2); text-decoration: none; cursor: pointer; font-size: 17px; font-weight: 700; border-radius: 999px; border: 1px solid var(--linha); background: var(--surface); } .engrenagem svg { width: 20px; height: 20px; } .engrenagem.ativa { color: var(--acento); border-color: var(--acento); } .marca { margin: 0; font: 900 22px/1 var(--font); letter-spacing: .06em; color: var(--acento); } .marca-grande { font: 900 clamp(40px, 14vw, 64px)/1 var(--font); letter-spacing: .06em; color: var(--acento); } .mote { font: 600 16px var(--font); color: var(--texto-2); margin: 10px 0 0; } .topo-dir { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; } .plano-topo { font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acento); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; } /* ---- tabbar: 5 lugares com FAB central ---- */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-around; align-items: flex-end; background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); border-top: 1px solid var(--linha); padding: 6px 8px calc(10px + env(safe-area-inset-bottom, 0px)); } .tabbar button { background: none; border: none; color: var(--texto-2); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 0; } .tabbar button svg { width: 22px; height: 22px; } .tabbar button.ativa { color: var(--acento); } .fab { flex: 0 0 auto !important; width: 64px; height: 64px; margin-top: -28px; border-radius: 50%; border: 3px solid var(--bg) !important; background: var(--acento) !important; color: #fff !important; display: grid !important; place-items: center; padding: 0 !important; position: relative; box-shadow: 0 10px 22px -10px rgba(78, 107, 47, .7); transition: transform .12s; } .fab svg { width: 30px !important; height: 30px !important; } .fab:active { transform: scale(.94); } .fab-ponto { display: none; position: absolute; top: 6px; right: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--ambar); border: 2px solid var(--bg); } .fab.ponto .fab-ponto { display: block; } .ds-badge { bottom: calc(var(--tabbar-h) + 18px) !important; } .ds-panel { bottom: calc(var(--tabbar-h) + 58px) !important; } body.tela-aberta .ds-badge, body.tela-aberta .ds-panel { display: none !important; } body.tela-aberta .tabbar { display: none; } /* ---- blocos ---- */ .rotulo { font: 700 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-2); margin: 18px 0 8px; } .card { background: var(--surface); border: 1px solid var(--linha); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; box-shadow: 0 8px 24px -20px rgba(21, 24, 26, .3); } .card h2 { margin: 0 0 8px; font: 700 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-2); } .card.toque { cursor: pointer; } .card.aviso-card { border-color: var(--acento-claro); background: var(--acento-superficie); } .titulo { font: 800 clamp(22px, 6.5vw, 30px)/1.1 var(--font); letter-spacing: -.02em; margin: 0; } .num { font: 800 clamp(40px, 13vw, 64px)/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .num small { font-size: .42em; color: var(--texto-2); font-weight: 700; letter-spacing: 0; } .dim { color: var(--texto-2); font-size: 13px; } .centro { text-align: center; } .vazio { text-align: center; padding: 28px 12px; color: var(--texto-2); } .vazio .btn { margin-top: 12px; } .aviso { border: 1px dashed var(--linha); border-radius: 12px; padding: 10px 14px; color: var(--texto-2); font-size: 13px; margin: 14px 0; } .linha-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .entre { justify-content: space-between; } .tag { font: 700 9px var(--mono); letter-spacing: .14em; color: #fff; background: var(--acento); border-radius: 999px; padding: 3px 8px; text-transform: uppercase; white-space: nowrap; } .tag.claro { color: var(--acento); background: var(--acento-claro); } .tag.cinza { color: var(--texto-2); background: var(--pedra); } .tag.ambar { background: var(--ambar); } .pilula { display: inline-flex; align-items: center; gap: 6px; font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--acento); background: var(--acento-superficie); border: 1px solid var(--acento-claro); border-radius: 999px; padding: 4px 10px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .pilula.ambar { color: var(--ambar); background: #fbf3e2; border-color: #f0dfb5; } .kpis { display: grid; gap: 0; } .kpi { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linha); font-size: 14px; } .kpi:last-child { border-bottom: 0; } .kpi b { font-variant-numeric: tabular-nums; text-align: right; } .kpi b.on { color: var(--acento); } .barra { height: 8px; background: var(--pedra); border-radius: 4px; overflow: hidden; } .barra i { display: block; height: 100%; background: var(--texto-2); border-radius: 4px; transition: width .6s cubic-bezier(.2, .8, .3, 1); opacity: .55; } .barra.exata i { background: var(--verde); opacity: 1; } .barra.acima i { background: var(--ambar); opacity: 1; } .barra.fina { height: 5px; } .saudacao { margin: 4px 0 14px; } .saudacao p { margin: 0; font: 600 13px var(--font); color: var(--texto-2); } .sub-cab { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; } .sub-cab .link { align-self: flex-start; padding-left: 0; } .sub-cab .linha-h .titulo { flex: 1; min-width: 0; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* ---- botões ---- */ .btn { border: 1px solid var(--texto); background: var(--texto); color: #fff; border-radius: 14px; padding: 12px 18px; font: 800 14px var(--font); letter-spacing: .01em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .btn.sec { background: var(--surface); color: var(--texto); border-color: var(--linha); } .btn.acento { background: var(--acento); border-color: var(--acento); box-shadow: 0 10px 22px -12px rgba(78, 107, 47, .8); } .btn.acento:active { background: var(--acento-escuro); } .btn.perigo { background: var(--surface); color: var(--erro); border-color: var(--linha); } .btn.largo { width: 100%; padding: 15px 18px; font-size: 16px; } .btn.pequeno { padding: 8px 12px; font-size: 13px; border-radius: 10px; } .btn svg { width: 18px; height: 18px; flex: 0 0 auto; } .btn:disabled { opacity: .4; cursor: default; } .btn.cta { flex-direction: column; gap: 2px; margin: 4px 0 14px; padding: 14px 18px; } .btn.cta small { font: 600 11px var(--font); opacity: .8; letter-spacing: 0; } .link { background: none; border: 0; color: var(--texto-2); font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; padding: 8px; } .link.perigo { color: var(--erro); } .link.acento { color: var(--acento); } .acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; } .acoes.inicio { justify-content: flex-start; } .menu-btn { background: none; border: 0; color: var(--texto-2); font-size: 20px; line-height: 1; padding: 4px 8px; cursor: pointer; border-radius: 8px; } .menu-btn:active { background: var(--pedra); } /* ---- formulário ---- */ label { display: block; font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); margin: 14px 0 6px; } input[type=text], input[type=number], input[type=time], input[type=date], input[type=search], select, textarea { width: 100%; background: var(--surface); color: var(--texto); border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px; font: 15px var(--font); } textarea { min-height: 88px; resize: vertical; line-height: 1.4; } input[type=number] { font-variant-numeric: tabular-nums; } .campo-inline { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; } .campo-inline .unidade { font: 700 12px var(--mono); color: var(--texto-2); min-width: 44px; } .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .segmento { display: flex; border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; background: var(--surface); margin-bottom: 12px; } .segmento button { flex: 1; background: var(--surface); border: 0; padding: 10px 6px; font: 800 13px var(--font); color: var(--texto-2); cursor: pointer; } .segmento button + button { border-left: 1px solid var(--linha); } .segmento button.ativa { background: var(--acento); color: #fff; } .toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); } .toggle:last-child { border-bottom: 0; } .toggle label { margin: 0; } .toggle input { width: 20px; height: 20px; accent-color: var(--acento); } .chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; } .chip { background: var(--surface); border: 1px solid var(--linha); border-radius: 999px; padding: 7px 12px; font: 800 13px var(--font); color: var(--texto); cursor: pointer; font-variant-numeric: tabular-nums; } .chip.ativa { background: var(--acento); border-color: var(--acento); color: #fff; } .chip.pequeno { padding: 5px 10px; font-size: 12px; } .opcoes { display: grid; gap: 8px; margin: 14px 0; } .opcoes button { background: var(--surface); border: 1px solid var(--linha); border-radius: 14px; padding: 13px 14px; font: 700 14px var(--font); color: var(--texto); cursor: pointer; text-align: left; } .opcoes button.ativa { background: var(--acento-superficie); border-color: var(--acento); color: var(--acento); } .opcoes button small { display: block; font-weight: 500; color: var(--texto-2); font-size: 12px; } .menu-lista { display: grid; gap: 4px; margin: 6px 0 0; } .menu-lista button { background: none; border: 0; border-bottom: 1px solid var(--linha); padding: 12px 6px; text-align: left; font: 600 15px var(--font); color: var(--texto); cursor: pointer; } .menu-lista button:last-child { border-bottom: 0; } .menu-lista button.perigo { color: var(--erro); } /* ---- modal e toast ---- */ .modal-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(21, 24, 26, .45); display: grid; place-items: center; padding: 16px; } .modal { background: var(--surface); border: 1px solid var(--linha); border-radius: 20px; padding: 20px; width: min(460px, 100%); max-height: 90vh; overflow: auto; } .modal h2 { margin: 4px 0 6px; font: 800 22px var(--font); letter-spacing: -.01em; } .modal h3 { margin: 14px 0 4px; font: 700 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-2); } .modal ul, .modal ol { padding-left: 20px; margin: 0; } .modal li { margin: 4px 0; } .toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 34px); transform: translate(-50%, 20px); z-index: 95; opacity: 0; pointer-events: none; background: var(--texto); color: #fff; padding: 10px 16px; border-radius: 12px; font: 600 13px var(--font); transition: .18s; max-width: 90vw; text-align: center; } .toast.on { opacity: 1; transform: translate(-50%, 0); } /* ---- retrato (imagem com fallback) ---- */ .retrato { margin: 0; display: grid; place-items: center; position: relative; } .retrato img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .retrato-ph { width: 100%; height: 100%; min-height: 64px; border: 1.5px dashed rgba(78, 107, 47, .45); border-radius: 14px; background: var(--acento-superficie); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px; gap: 3px; margin: 0; overflow: hidden; } .retrato-ph b { font: 800 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--acento); } .retrato-ph small { font: 600 9px var(--mono); color: var(--texto-2); } .anel { position: relative; display: grid; place-items: center; } .anel svg { transform: rotate(-90deg); display: block; } .anel .fundo { fill: none; stroke: var(--acento-claro); } .anel .arco { fill: none; stroke: var(--acento); stroke-linecap: round; transition: stroke-dashoffset .5s ease-out; } .anel .centro { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: 800 var(--anel-fonte, 18px)/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .anel .centro small { font-size: 10px; color: var(--texto-2); font-weight: 700; } .anel-bloco { display: inline-grid; justify-items: center; gap: 6px; } .anel-bloco .legenda { font: 700 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); } /* ---- telas cheias (overlays) ---- */ .tela { position: fixed; inset: 0; z-index: 80; background: var(--bg); display: flex; flex-direction: column; padding: calc(16px + env(safe-area-inset-top, 0px)) clamp(16px, 5vw, 40px) calc(18px + env(safe-area-inset-bottom, 0px)); overflow: auto; } .tela-sair { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1px solid var(--linha); color: var(--texto-2); font-size: 20px; cursor: pointer; z-index: 2; } .tela-cab { padding: 6px 44px 0 0; margin-bottom: 10px; } .tela-cab .titulo { font-size: 24px; } .tela-cab .dim { margin: 4px 0 0; } .tela-acoes { margin-top: auto; padding-top: 16px; display: grid; gap: 10px; } .tela > * { flex: 0 0 auto; } /* itens da coluna flex não encolhem (o segmento com overflow hidden colapsava a 2 px) */ .busca { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 4px 0 10px; } .lista-escolha { display: grid; gap: 2px; } .lista-escolha .grupo { margin: 12px 0 4px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .lista-escolha .grupo b { font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acento); } .lista-escolha .grupo small { font: 700 10px var(--mono); color: var(--texto-2); } .lista-escolha .secao { margin: 18px 0 0; font: 800 13px var(--font); color: var(--texto-2); display: flex; align-items: center; gap: 6px; } .lista-escolha .secao svg { width: 16px; height: 16px; } .escolha { width: 100%; background: var(--surface); border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; cursor: pointer; color: var(--texto); font: 600 14px var(--font); } .escolha small { color: var(--texto-2); font: 700 12px var(--mono); white-space: nowrap; } .escolha.ativa { border-color: var(--acento); background: var(--acento-superficie); } .escolha .check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--linha); display: grid; place-items: center; flex: 0 0 auto; } .escolha.ativa .check { background: var(--acento); border-color: var(--acento); color: #fff; font-size: 12px; } /* ---- Início ---- */ /* hero no layout do concept: coluna de cards à esquerda, retrato de corpo inteiro POR CIMA ancorado à direita, ocupando a altura toda do hero e encostando na borda da tela (o gutter é anulado). Sem retrato: cards em 2 colunas. */ .hero-inicio { position: relative; display: grid; grid-template-columns: minmax(0, 52%) 1fr; margin: 0 0 12px; min-height: 470px; } .hero-inicio.sem-retrato { min-height: 0; grid-template-columns: 1fr; } .hero-inicio.sem-retrato .cards-col { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; } .cards-col { position: relative; z-index: 1; display: grid; grid-auto-rows: 1fr; gap: 8px; min-width: 0; align-content: stretch; } .fig-col { position: absolute; z-index: 2; top: 0; bottom: 0; right: calc(-1 * clamp(16px, 5vw, 40px)); width: 66%; overflow: visible; display: flex; justify-content: flex-end; align-items: flex-end; pointer-events: none; } /* por cima dos cards, a pedido dele (2026-09-24); pointer-events none deixa o toque chegar nos cards */ .retrato.hero-fig { height: 100%; width: auto; max-width: none; display: block; } .retrato.hero-fig img { height: 100%; width: auto; max-width: none; max-height: none; object-fit: contain; object-position: right bottom; display: block; } .retrato.hero-fig .retrato-ph { width: 160px; height: 100%; } .mcard { background: var(--surface); border: 1px solid var(--linha); border-radius: 14px; padding: 9px 10px; display: grid; grid-template-columns: 18px 1fr; grid-auto-rows: min-content; column-gap: 7px; align-content: center; min-width: 0; box-shadow: 0 8px 24px -20px rgba(21, 24, 26, .3); text-align: left; color: var(--texto); font: inherit; cursor: default; } .mcard.toque { cursor: pointer; } .mcard .ic { grid-row: 1 / span 3; width: 18px; height: 18px; color: var(--acento); align-self: start; margin-top: 2px; } .mcard .ic svg { width: 18px; height: 18px; } .mcard .rot { font: 700 9px/1.25 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); overflow-wrap: anywhere; } .mcard .val { font: 800 20px/1.1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .mcard .val small { font-size: 11px; color: var(--texto-2); font-weight: 700; } .mcard .sub { font-size: 11px; color: var(--texto-2); } .mcard.destaque { background: var(--acento); border-color: var(--acento); color: #fff; } .mcard.destaque .ic, .mcard.destaque .rot, .mcard.destaque .sub, .mcard.destaque .val small { color: rgba(255, 255, 255, .8); } @media (min-width: 560px) { .hero-inicio { min-height: 560px; } .mcard .val { font-size: 24px; } } .macros { display: flex; justify-content: space-around; gap: 8px; padding: 6px 0 2px; } .cats { display: grid; gap: 10px; } .cat-linha { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; } .cat-linha .ic { width: 22px; height: 22px; color: var(--texto-2); margin-top: 1px; } .cat-linha .ic svg { width: 22px; height: 22px; } .cat-linha .cat-txt { min-width: 0; display: grid; gap: 4px; } .cat-linha .cat-txt b { font-size: 14px; } .cat-linha .cat-num { font: 700 12px var(--mono); color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .cat-linha.exata .cat-num { color: var(--verde); } .cat-linha.acima .cat-num { color: var(--ambar); } .cat-linha small { font-size: 11.5px; color: var(--texto-2); } /* ---- Dieta ---- */ .dieta-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; } .dieta-cab .titulo { flex: 1; min-width: 0; } .faixa-sim { position: sticky; top: var(--topo-h); z-index: 20; background: var(--acento-superficie); border: 1px solid var(--acento-claro); border-radius: 14px; padding: 10px 12px; margin: -4px 0 12px; display: grid; gap: 8px; } .faixa-sim .rot { font: 800 10px var(--mono); letter-spacing: .16em; color: var(--acento); } .faixa-sim .diff { display: flex; gap: 10px; flex-wrap: wrap; font: 700 13px var(--mono); font-variant-numeric: tabular-nums; } .faixa-sim .diff span { color: var(--texto); } .faixa-sim .diff span.zero { color: var(--texto-2); } .faixa-sim .acoes { margin: 0; justify-content: flex-start; gap: 6px; } .meal-card { padding: 12px 14px 8px; } .meal-cab { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; margin-bottom: 4px; } .meal-cab .ic { width: 26px; height: 26px; color: var(--acento); } .meal-cab .ic svg { width: 26px; height: 26px; } .meal-cab .nome b { font: 800 16px var(--font); display: block; } .meal-cab .nome small { font: 700 11px var(--mono); color: var(--texto-2); letter-spacing: .04em; } .meal-sub { font: 700 11px var(--mono); color: var(--texto-2); text-align: right; font-variant-numeric: tabular-nums; } .food-row { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--linha); background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; cursor: pointer; color: var(--texto); font: inherit; } .food-row .nome { font: 700 14px var(--font); } .food-row .qtd { font: 800 14px var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .food-row .meta { grid-column: 1 / -1; font: 700 11px var(--mono); color: var(--texto-2); letter-spacing: .03em; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .food-row .meta .tag { font-size: 8px; } .meal-vazio { padding: 8px 0; border-top: 1px solid var(--linha); } .meal-add { width: 100%; background: none; border: 0; border-top: 1px solid var(--linha); padding: 10px 0 4px; color: var(--acento); font: 800 13px var(--font); cursor: pointer; text-align: left; } .add-refeicao { margin: 4px 0 14px; } .qtd-resumo { background: var(--acento-superficie); border: 1px solid var(--acento-claro); border-radius: 14px; padding: 12px 14px; margin-top: 14px; display: grid; gap: 4px; } .qtd-resumo b { font: 800 20px var(--font); font-variant-numeric: tabular-nums; } .qtd-resumo small { font: 700 11px var(--mono); color: var(--texto-2); } /* ---- Substituições ---- */ .subst-cab { display: grid; gap: 4px; margin-bottom: 8px; } .subst-cab .titulo { font-size: 26px; } .subst-cab .qtd { font: 700 14px var(--mono); color: var(--texto-2); } .equiv { width: 100%; background: var(--surface); border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; text-align: left; color: var(--texto); font: inherit; cursor: default; margin-bottom: 8px; } .equiv.toque { cursor: pointer; } .equiv .nome { font: 700 15px var(--font); } .equiv .qtd { font: 800 18px var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; } .equiv small { grid-column: 1 / -1; font: 600 11.5px var(--font); color: var(--texto-2); } .equiv .trocar { grid-column: 2; grid-row: 1 / span 2; } .regra { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--linha); } .regra:last-child { border-bottom: 0; } .regra b { font: 700 14px var(--font); } .regra small { color: var(--texto-2); font-size: 12px; } .regra .tag { justify-self: start; margin-bottom: 4px; } /* ---- Planejamento ---- */ .grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .pcard { background: var(--surface); border: 1px solid var(--linha); border-radius: 14px; padding: 10px 12px; min-width: 0; display: grid; gap: 2px; } .pcard .nome { font: 700 13px var(--font); overflow-wrap: anywhere; } .pcard .tot { font: 800 20px var(--font); font-variant-numeric: tabular-nums; } .pcard small { font: 600 11px var(--font); color: var(--texto-2); } .grupo-titulo { font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acento); margin: 14px 0 6px; display: flex; align-items: center; gap: 6px; } .grupo-titulo svg { width: 16px; height: 16px; } .lista-compras { display: grid; gap: 2px; } .compra { display: flex; align-items: center; gap: 12px; padding: 10px 4px; margin: 0; border-bottom: 1px solid var(--linha); cursor: pointer; font: 600 15px var(--font); letter-spacing: 0; text-transform: none; color: var(--texto); } /* é um