/* ==========================================================================
GCN — Geladinho Como Negócio
Design system: tokens, tipografia, componentes
========================================================================== */
@font-face {
font-family: 'Briston';
src: url('../assets/fonts/Briston-Regular.otf') format('opentype');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'BR Hendrix';
src: url('../assets/fonts/BRHendrix-Black.otf') format('opentype');
font-weight: 900;
font-display: swap;
}
:root {
/* ---- cores de marca ---- */
--brand-purple: #7209B7;
--brand-purple-deep: #4B0682;
--brand-purple-light: #9B4FD6;
--brand-pink: #F72585;
--brand-pink-light: #FF6FAE;
--brand-turquoise: #1FD9DD;
--brand-turquoise-deep: #0AA5A8;
/* ---- neutros derivados da marca ---- */
--ink: #1B0B29;
--ink-soft: #5B4C6B;
--ink-faint: #8A7A99;
--cloud: #FAF5FF;
--surface: #FFFFFF;
--mist: #E4D9F0;
--mist-soft: #F1E9FA;
/* roxo da marca é escuro demais pra servir de texto/borda em cima de
fundo escuro (modo noturno) — esse token existe só pra isso, reaponta
pro roxo normal no claro e vira um roxo mais claro no escuro; os
outros usos do roxo (botão, sidebar) continuam em --brand-purple */
--brand-purple-text: var(--brand-purple);
/* ---- semântica ---- */
--positive: #0AA5A8;
--negative: #E11D48;
--warning: #F59E0B;
/* ---- tipografia ----
Briston (fonte da logo) não tem acentuação — usada só no wordmark "GCN."
Baloo 2 carrega a mesma energia arredondada com suporte completo ao português. */
--font-wordmark: 'Briston', cursive;
--font-display: 'Baloo 2', system-ui, sans-serif;
--font-emph: 'BR Hendrix', system-ui, sans-serif;
--font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
/* ---- forma ---- */
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-bubble: 28px;
--radius-pill: 999px;
/* ---- sombra ---- */
--shadow-sm: 0 1px 2px rgba(27, 11, 41, 0.06), 0 1px 1px rgba(27, 11, 41, 0.04);
--shadow-md: 0 6px 20px rgba(114, 9, 183, 0.10), 0 2px 6px rgba(27, 11, 41, 0.06);
--shadow-bubble: 0 10px 0 -4px rgba(27, 11, 41, 0.05), 0 14px 28px rgba(114, 9, 183, 0.16);
/* ---- layout ---- */
--sidebar-w: 264px;
--topbar-h: 72px;
}
/* ---- modo escuro ----
segue o sistema por padrão (prefers-color-scheme) a menos que a pessoa
force uma escolha em Configurações > Aparência (data-theme no ,
gravado em js/theme.js). Só os tokens neutros mudam — as cores de marca
(botões, sidebar) continuam as mesmas nos dois temas, só o "--brand-purple-text"
fica mais claro pra continuar legível em cima de fundo escuro. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--ink: #F1EAFB;
--ink-soft: #C9BBDE;
--ink-faint: #8F7FA8;
--cloud: #150C22;
--surface: #211531;
--mist: #3D2C57;
--mist-soft: #29193D;
--brand-purple-text: #C9A3EA;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2);
--shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
--shadow-bubble: 0 10px 0 -4px rgba(0, 0, 0, 0.2), 0 14px 28px rgba(0, 0, 0, 0.4);
}
}
:root[data-theme="dark"] {
--ink: #F1EAFB;
--ink-soft: #C9BBDE;
--ink-faint: #8F7FA8;
--cloud: #150C22;
--surface: #211531;
--mist: #3D2C57;
--mist-soft: #29193D;
--brand-purple-text: #C9A3EA;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2);
--shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
--shadow-bubble: 0 10px 0 -4px rgba(0, 0, 0, 0.2), 0 14px 28px rgba(0, 0, 0, 0.4);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--cloud);
color: var(--ink);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
/* trava o zoom por toque (beliscão/duplo toque) — o viewport já pede isso
via user-scalable=no, mas alguns navegadores (Safari em especial) só
respeitam de verdade com esse touch-action aqui também */
touch-action: manipulation;
}
body {
min-height: 100vh;
}
/* o atributo hidden sempre vence — evita que qualquer regra de display
de componente (.app, .btn, .view...) precise de um override individual */
[hidden] {
display: none !important;
}
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.1;
margin: 0;
letter-spacing: 0.1px;
}
p { margin: 0; }
button { font-family: inherit; }
a { color: inherit; }
::selection {
background: var(--brand-pink-light);
color: #fff;
}
:focus-visible {
outline: 3px solid var(--brand-turquoise);
outline-offset: 2px;
border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* ==========================================================================
Ícones
========================================================================== */
.icon {
width: 20px;
height: 20px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}
/* ==========================================================================
App shell
========================================================================== */
.app {
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
min-height: 100vh;
}
/* ---- sidebar ---- */
.sidebar {
background: linear-gradient(180deg, var(--brand-purple) 0%, var(--brand-purple-deep) 100%);
color: #fff;
padding: 24px 16px 24px;
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
/* reserva o espaço da barra de rolagem dos dois lados sempre (mesmo sem
rolagem) — sem isso, a barra de rolagem (quando os itens do menu não
cabem na tela) come uma faixa só do lado direito e desloca a logo/texto
centralizados pra esquerda. Com "both-edges" o espaço reservado fica
simétrico, então a centralização se mantém correta com ou sem rolagem. */
scrollbar-gutter: stable both-edges;
z-index: 40;
}
/* marca única no topo da sidebar: logomarca em destaque + nome do app bem
colado embaixo, centralizados — antes tinha a logo pequena do lado da
palavra "GCN." num wordmark cursivo, repetindo a marca (logo + "GCN." +
"geladinho como negócio" na mesma respiração visual). A imagem usada
aqui (gcn-wordmark.png) é a mesma marca "GCN." só que sem o quadrado de
fundo roxo — recortada pra mostrar só as letras, coladas direto no roxo
da sidebar. gcn-logo.png (com o fundo) continua igual em outros lugares
(login, tela de assinatura bloqueada). */
.sidebar-brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 4px 8px 24px;
text-align: center;
}
.sidebar-brand img {
width: 110px;
height: auto;
}
.sidebar-brand-sub {
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #fff;
font-weight: 700;
}
.nav-group-label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.09em;
color: rgba(255,255,255,0.45);
padding: 18px 12px 6px;
font-weight: 700;
}
.nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: var(--radius-pill);
color: rgba(255,255,255,0.72);
font-size: 14.5px;
font-weight: 600;
cursor: pointer;
border: none;
background: transparent;
width: 100%;
text-align: left;
transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.nav-item .icon { color: rgba(255,255,255,0.6); transition: color 0.15s ease; }
.nav-item:hover {
background: rgba(255,255,255,0.08);
color: #fff;
}
.nav-item:hover .icon { color: #fff; }
.nav-item.is-active {
background: #fff;
color: var(--brand-purple);
box-shadow: var(--shadow-sm);
}
.nav-item.is-active .icon { color: var(--brand-pink); }
.sidebar-footer {
margin-top: auto;
padding: 16px 12px 4px;
font-size: 12px;
color: rgba(255,255,255,0.4);
border-top: 1px solid rgba(255,255,255,0.12);
padding-top: 16px;
}
/* ---- topbar ---- */
.topbar {
height: var(--topbar-h);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
border-bottom: 1px solid var(--mist);
background: var(--surface);
position: sticky;
top: 0;
z-index: 30;
}
.topbar-left {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
flex: 1;
}
.back-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--mist-soft);
border: none;
color: var(--brand-purple-text);
font-weight: 700;
font-size: 14px;
padding: 9px 14px 9px 10px;
border-radius: var(--radius-pill);
cursor: pointer;
transition: background 0.15s ease, transform 0.1s ease;
flex-shrink: 0;
}
.back-btn:hover { background: var(--mist); }
.back-btn:active { transform: scale(0.97); }
.hamburger {
display: none;
background: none;
border: none;
color: var(--ink);
cursor: pointer;
padding: 6px;
}
.topbar-title {
font-family: var(--font-display);
font-size: 20px;
color: var(--ink);
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topbar-right {
display: flex;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
.user-chip {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px 6px 6px;
border-radius: var(--radius-pill);
cursor: pointer;
border: none;
background: transparent;
}
.user-chip:hover { background: var(--mist-soft); }
.user-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-pink), var(--brand-purple));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 13px;
font-family: var(--font-emph);
overflow: hidden;
}
/* quando a usuária tem foto/logo cadastrada, a ![]()
preenche o círculo
por cima do gradiente de iniciais (que fica só como fallback) */
.user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
/* prévia circular do avatar em Configurações — sem foto cadastrada, mostra
um ícone de câmera (sinalizando "toque/escolha aqui uma foto") em vez do
círculo colorido de iniciais que o chip do topbar usa */
.avatar-preview {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--mist-soft);
color: var(--ink-faint);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.avatar-preview img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.user-name {
font-size: 13.5px;
font-weight: 700;
color: var(--ink);
}
/* ---- main content ---- */
.main {
min-width: 0;
}
.view {
padding: 32px;
max-width: 1280px;
}
.view-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.view-title {
font-size: 32px;
color: var(--ink);
}
.view-subtitle {
font-size: 14.5px;
color: var(--ink-soft);
margin-top: 6px;
max-width: 52ch;
}
/* ==========================================================================
Segmented control (filtro de período)
========================================================================== */
.segmented {
display: inline-flex;
background: var(--mist-soft);
border-radius: var(--radius-pill);
padding: 4px;
gap: 2px;
}
.segmented button {
border: none;
background: transparent;
padding: 8px 16px;
border-radius: var(--radius-pill);
font-size: 13px;
font-weight: 700;
color: var(--ink-soft);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.segmented button.is-active {
background: var(--brand-purple);
color: #fff;
box-shadow: var(--shadow-sm);
}
/* ==========================================================================
Bubble stat cards — elemento de assinatura
========================================================================== */
.stat-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
margin-bottom: 28px;
}
.bubble-card {
position: relative;
border-radius: var(--radius-bubble);
border: 4px solid var(--bubble-color, var(--brand-purple));
background: var(--surface);
padding: 22px 24px 20px;
box-shadow: var(--shadow-bubble);
overflow: hidden;
}
.bubble-card::after {
content: '';
position: absolute;
width: 120px;
height: 120px;
border-radius: 50%;
background: var(--bubble-color, var(--brand-purple));
opacity: 0.08;
top: -50px;
right: -50px;
}
.bubble-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--bubble-color, var(--brand-purple));
}
.bubble-value {
font-family: var(--font-emph);
font-weight: 900;
font-size: 34px;
color: var(--ink);
margin-top: 10px;
letter-spacing: -0.01em;
}
.bubble-delta {
margin-top: 8px;
font-size: 13px;
font-weight: 700;
color: var(--ink-faint);
display: flex;
align-items: center;
gap: 5px;
}
.bubble-delta.is-positive { color: var(--positive); }
.bubble-delta.is-negative { color: var(--negative); }
/* ---- variante em gradiente com as cores da marca (Faturamento, Lucro,
Volume vendido, A receber) — mesmo cartão, preenchido em vez de só a
borda colorida ---- */
.bubble-card.is-gradient {
border-color: transparent;
}
.bubble-card.is-gradient .bubble-label { color: rgba(255, 255, 255, 0.92); }
.bubble-card.is-gradient .bubble-value { color: #fff; }
.bubble-card.is-gradient .bubble-delta { color: rgba(255, 255, 255, 0.8); }
.bubble-card.is-gradient .bubble-delta.is-positive { color: #fff; }
.bubble-card.is-gradient .bubble-delta.is-negative { color: #fff; }
.bubble-card.is-gradient::after {
background: rgba(255, 255, 255, 0.16);
opacity: 1;
}
.bubble-grad-purple { background: linear-gradient(135deg, var(--brand-purple-light), var(--brand-purple-deep)); }
.bubble-grad-turquoise { background: linear-gradient(135deg, var(--brand-turquoise), var(--brand-turquoise-deep)); }
.bubble-grad-pink { background: linear-gradient(135deg, var(--brand-pink-light), var(--brand-pink)); }
.bubble-grad-amber { background: linear-gradient(135deg, #fbbf24, var(--warning)); }
/* ---- card herói (Dashboard: Volume vendido) — mesma cor/gradiente, só
maior, pra ser o indicador de maior destaque da tela ---- */
.stat-row.is-hero-row { grid-template-columns: 1fr; margin-bottom: 20px; }
.bubble-card.is-hero { padding: 30px 34px 28px; }
.bubble-card.is-hero .bubble-label { font-size: 14px; }
.bubble-card.is-hero .bubble-value { font-size: 48px; }
.bubble-card.is-hero .bubble-delta { font-size: 14px; margin-top: 10px; }
/* ---- controles do cabeçalho (toggle de valores + filtro de período) ---- */
.view-header-controls {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
max-width: 100%;
}
.btn-toggle-values {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: var(--mist-soft);
color: var(--ink-soft);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s ease, color 0.15s ease;
}
.btn-toggle-values:hover { background: var(--mist); color: var(--ink); }
.btn-toggle-values.is-active { background: var(--brand-purple); color: #fff; }
.maskable-value.is-masked { letter-spacing: 0.08em; }
/* ---- cards de estatística compactos (ticket médio, margem, a receber) ---- */
.mini-stat-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 14px;
margin-bottom: 28px;
}
.mini-stat-card {
background: var(--surface);
border: 1px solid var(--mist);
border-radius: var(--radius-md);
padding: 14px 18px;
}
.mini-stat-label {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ink-faint);
}
.mini-stat-value {
font-family: var(--font-emph);
font-weight: 900;
font-size: 21px;
color: var(--ink);
margin-top: 4px;
}
.mini-stat-value.is-warning { color: var(--brand-pink); }
.mini-stat-card.is-tint-turquoise { background: rgba(31, 217, 221, 0.08); border-color: var(--brand-turquoise); }
.mini-stat-card.is-tint-turquoise .mini-stat-value { color: var(--brand-turquoise-deep); }
/* is-tint-purple também é o card de "A receber" no Dashboard: mesma família
de cor do Faturamento (--brand-purple), só que em versão suave/tint em
vez do gradiente sólido — comunica "positivo, mas ainda não realizado",
com menos protagonismo que Faturamento/Lucro. */
.mini-stat-card.is-tint-purple { background: rgba(114, 9, 183, 0.08); border-color: var(--brand-purple-text); }
.mini-stat-card.is-tint-purple .mini-stat-value { color: var(--brand-purple-text); }
/* ---- cards que ocultam/exibem valor ao toque (mesmo estado global) ---- */
.is-tap-maskable {
cursor: pointer;
transition: transform 0.12s ease, box-shadow 0.12s ease;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.is-tap-maskable:hover { transform: translateY(-1px); }
.is-tap-maskable:active { transform: translateY(0); opacity: 0.85; }
/* ==========================================================================
Cards genéricos / painéis
========================================================================== */
.panel {
background: var(--surface);
border: 1px solid var(--mist);
border-radius: var(--radius-lg);
padding: 24px;
}
.panel-row {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 20px;
margin-bottom: 24px;
align-items: stretch;
}
.panel-title {
font-family: var(--font-display);
font-size: 18px;
color: var(--ink);
margin-bottom: 4px;
}
.panel-sub {
font-size: 12.5px;
color: var(--ink-faint);
margin-bottom: 18px;
}
/* ---- lista de destaque (sabor mais vendido) ---- */
.rank-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.rank-item {
display: flex;
align-items: center;
gap: 12px;
}
.rank-swatch {
width: 34px;
height: 34px;
border-radius: 11px;
flex-shrink: 0;
}
/* versão "bolinha" — lista compacta (Vendas por sabor), pra não virar uma
parede de blocos coloridos quando tem muitos sabores */
.rank-swatch.is-dot {
width: 10px;
height: 10px;
border-radius: 3px;
}
.rank-list.is-compact { gap: 4px; }
.rank-list.is-compact .rank-item { gap: 10px; padding: 6px 2px; }
.rank-list.is-compact .rank-name { font-size: 13px; }
.rank-list.is-compact .rank-meta { font-size: 11px; }
/* lista com muitos sabores rola dentro de uma altura fixa, em vez de
esticar a página inteira — igual o app anterior */
.rank-list.is-scroll {
max-height: 280px;
overflow-y: auto;
padding-right: 4px;
}
/* ---- canvas do Chart.js (Vendas por sabor / Faturamento por canal) ---- */
.chart-box { position: relative; height: 260px; }
.rank-info { flex: 1; min-width: 0; }
.rank-name {
font-size: 13.5px;
font-weight: 700;
color: var(--ink);
}
.rank-meta {
font-size: 11.5px;
color: var(--ink-faint);
}
.rank-value {
font-family: var(--font-emph);
font-weight: 900;
font-size: 14px;
color: var(--brand-purple-text);
}
/* ==========================================================================
Grid de receitas
========================================================================== */
.recipe-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.search-box {
display: flex;
align-items: center;
gap: 8px;
background: var(--surface);
border: 1.5px solid var(--mist);
border-radius: var(--radius-pill);
padding: 9px 16px;
min-width: 260px;
color: var(--ink-faint);
}
.search-box input {
border: none;
outline: none;
background: transparent;
font-size: 13.5px;
font-family: inherit;
color: var(--ink);
width: 100%;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
border: none;
border-radius: var(--radius-pill);
padding: 11px 20px;
font-weight: 800;
font-size: 13.5px;
cursor: pointer;
transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
background: var(--brand-purple);
color: #fff;
box-shadow: 0 4px 14px rgba(114, 9, 183, 0.28);
}
.btn-primary:hover { background: var(--brand-purple-deep); }
.btn-ghost {
background: var(--mist-soft);
color: var(--brand-purple-text);
}
.btn-ghost:hover { background: var(--mist); }
.btn-outline {
background: transparent;
border: 2px solid var(--mist);
color: var(--ink-soft);
}
.btn-outline:hover { border-color: var(--brand-purple-text); color: var(--brand-purple-text); }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 8px 14px; font-size: 12.5px; }
.recipe-list-row {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
background: var(--surface);
border: 1px solid var(--mist);
border-radius: var(--radius-md);
padding: 12px 16px;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.recipe-list-row:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--mist);
}
.recipe-list-main {
flex: 1;
min-width: 0;
}
.recipe-list-name {
font-family: var(--font-display);
font-size: 15.5px;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.recipe-list-stats {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
flex-shrink: 0;
}
.recipe-list-stat {
display: flex;
align-items: baseline;
gap: 6px;
}
.recipe-list-stat .recipe-stat-value { font-size: 13px; }
.recipe-stat-label {
color: var(--ink-faint);
font-weight: 700;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.05em;
}
.recipe-stat-value {
font-family: var(--font-emph);
font-weight: 900;
font-size: 15px;
margin-top: 2px;
}
.margin-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 800;
padding: 3px 9px;
border-radius: var(--radius-pill);
background: rgba(10, 165, 168, 0.12);
color: var(--positive);
margin-top: 10px;
}
.margin-badge.is-pdv { background: rgba(114, 9, 183, 0.1); color: var(--brand-purple-text); }
.recipe-list-margins { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.recipe-list-margins .margin-badge { margin-top: 0; }
/* ==========================================================================
Listas de item (ingredientes, preparos, embalagens)
========================================================================== */
.item-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.item-row {
display: flex;
align-items: center;
gap: 16px;
background: var(--surface);
border: 1px solid var(--mist);
border-radius: var(--radius-md);
padding: 14px 16px;
}
/* histórico de movimentações de estoque: lista longa, um lançamento por
linha — reduz padding/fonte pra caber mais sem rolar tanto */
.item-list.is-compact { gap: 6px; }
.item-list.is-compact .item-row { padding: 8px 12px; gap: 10px; }
.item-list.is-compact .item-row-name { font-size: 13px; }
.item-list.is-compact .item-row-meta { font-size: 11px; }
.item-list.is-compact .item-row-cost-value { font-size: 13px; }
.item-list.is-compact .item-row-cost-label { font-size: 9px; }
/* item do Simulador já totalmente coberto (excluído ou "já tenho" cobre
tudo) — risca em vez de sumir, pra dar pra reverter a qualquer momento */
.item-row.is-fully-covered { opacity: 0.6; text-decoration: line-through; }
.item-row-main {
flex: 1;
min-width: 0;
}
.item-row-name {
font-weight: 700;
font-size: 14.5px;
color: var(--ink);
}
.item-row-meta {
font-size: 12px;
color: var(--ink-faint);
margin-top: 2px;
}
.item-row-cost {
text-align: right;
flex-shrink: 0;
}
.item-row-cost-value {
font-family: var(--font-emph);
font-weight: 900;
font-size: 15px;
color: var(--brand-purple-text);
}
/* valor do pedido junto do nome/data (Pedidos, Pedidos de festa) — em vez
de ficar solto do lado direito do card, que no desktop (com o nome
curto e a tela larga) deixava um vão enorme entre os dois e o preço
parecia "perdido", sem ligação visual com o pedido */
.item-row-price {
font-family: var(--font-emph);
font-weight: 900;
font-size: 14px;
color: var(--brand-purple-text);
margin-top: 8px;
}
/* nome/data/preço ficavam muito colados um no outro nesse card — um
pouco mais de respiro só aqui (não mexe no espaçamento nome/data
padrão usado nas outras listas do app) */
.item-row-main:has(.item-row-price) .item-row-meta {
margin-top: 4px;
}
.item-row-cost-label {
font-size: 10px;
color: var(--ink-faint);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
}
.item-row-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}
/* ---- cards que expandem (Pedidos, Clientes...): em vez de deixar os
botões de editar/excluir/baixar sempre visíveis (apertado, muita coisa
pro mesmo espaço), eles ficam escondidos até tocar no card — abre uma
área embaixo, na própria lista, sem popup ---- */
.item-row.is-expandable {
flex-direction: column;
align-items: stretch;
gap: 0;
cursor: pointer;
}
/* precisa vencer as regras "flex-direction: row" e "gap: 10px" das listas
compactas (mais específicas, 3 classes) — senão o card volta a ficar em
linha (bloco fechado e área expandida lado a lado, tudo desalinhado)
em vez de empilhado */
.item-list.is-compact .item-row.is-expandable {
flex-direction: column;
align-items: stretch;
gap: 0;
}
/* o conteúdo do card fechado (nome, custo, selos...) fica num bloco à
parte da área que expande — assim a seta sempre fica no mesmo lugar,
colada na borda de baixo *desse bloco*, tanto fechado quanto aberto.
Antes ela ficava presa à borda de baixo do card inteiro, que muda de
altura ao abrir — a seta "pulava" de lugar e podia parecer que o toque
não funcionava */
.item-row-collapsed {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
padding-bottom: 22px;
}
.item-list.is-compact .item-row-collapsed { gap: 10px; }
/* alvo de toque bem maior que o ícone visível (18px sozinho é pequeno
demais pro dedo acertar com precisão) — o é a área clicável,
o ícone dentro dele é só o desenho */
.item-row-chevron {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 44px;
height: 28px;
display: flex;
align-items: flex-end;
justify-content: center;
color: var(--ink-faint);
transition: transform 0.15s ease;
}
.item-row-chevron .icon { width: 18px; height: 18px; }
.item-row.is-expanded .item-row-chevron { transform: translateX(-50%) rotate(180deg); }
.item-row-expand {
flex-basis: 100%;
display: none;
align-items: center;
justify-content: flex-end;
gap: 6px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--mist);
}
.item-row.is-expanded .item-row-expand { display: flex; }
/* Clientes: cadastro completo + editar/excluir + botão de histórico
disputavam a mesma linha (tamanhos e formatos bem diferentes,
ficava desequilibrado) — aqui empilha em 3 blocos: dados, depois
editar/excluir alinhados à direita, depois o histórico em destaque
ocupando a largura toda */
.item-row-expand.is-client {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.item-row-expand-icons {
display: flex;
justify-content: flex-end;
gap: 6px;
}
/* Clientes: dentro do card expandido cabe o cadastro completo, à esquerda
dos botões de ação */
.item-row-expand-details {
flex: 1;
min-width: 0;
font-size: 13px;
color: var(--ink-soft);
line-height: 1.6;
}
.icon-btn {
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
background: var(--mist-soft);
color: var(--ink-soft);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.icon-btn:hover { background: var(--mist); color: var(--ink); }
.icon-btn.danger:hover { background: rgba(225, 29, 72, 0.12); color: var(--negative); }
.icon-btn.is-whatsapp { background: rgba(37, 211, 102, 0.12); color: #1DA851; }
.icon-btn.is-whatsapp .icon { stroke: none; fill: currentColor; }
.icon-btn.is-whatsapp:hover { background: rgba(37, 211, 102, 0.22); color: #1DA851; }
.empty-state {
text-align: center;
padding: 48px 24px;
color: var(--ink-faint);
font-size: 13.5px;
}
/* ==========================================================================
Formulários (modais de criação/edição)
========================================================================== */
/* placeholder explícito (em vez de depender do cinza padrão do navegador)
pra garantir contraste consistente nos dois temas — cobre todo input/
textarea/select do app de uma vez só, sem precisar repetir por classe */
input::placeholder,
textarea::placeholder {
color: var(--ink-faint);
opacity: 1;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 6px;
}
.field-span2 { grid-column: 1 / -1; }
.field select {
font-family: inherit;
font-size: 14px;
padding: 11px 14px;
border-radius: var(--radius-md);
border: 1.5px solid var(--mist);
color: var(--ink);
background: var(--cloud);
width: 100%;
min-width: 0;
min-height: 46px;
}
.field select:focus { outline: none; border-color: var(--brand-purple-text); background: var(--surface); }
.collapsible-toggle {
display: flex;
align-items: center;
gap: 8px;
background: none;
border: none;
color: var(--brand-purple-text);
font-weight: 700;
font-size: 13px;
cursor: pointer;
padding: 10px 0 4px;
}
.collapsible-toggle .icon { transition: transform 0.15s ease; }
.collapsible-toggle.is-open .icon { transform: rotate(180deg); }
.pill-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(114, 9, 183, 0.1);
border: none;
color: var(--brand-purple-text);
font-weight: 800;
font-size: 12.5px;
padding: 7px 14px;
border-radius: var(--radius-pill);
cursor: pointer;
}
.pill-toggle .icon { transition: transform 0.15s ease; }
.pill-toggle.is-open .icon { transform: rotate(180deg); }
.cost-dot-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--mist-soft);
font-size: 13.5px;
}
.cost-dot-row:last-of-type { border-bottom: none; }
.cost-dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex-shrink: 0;
}
.cost-dot-label { flex: 1; color: var(--ink-soft); }
.cost-dot-value { font-weight: 800; color: var(--ink); }
.cost-dot-row.is-total { font-weight: 800; margin-top: 4px; }
.cost-dot-row.is-total .cost-dot-label { color: var(--ink); }
.cost-dot-row.is-total .cost-dot-value { font-size: 14.5px; }
.tag-preparo {
display: inline-block;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 2px 8px;
border-radius: var(--radius-pill);
background: rgba(114, 9, 183, 0.1);
color: var(--brand-purple-text);
margin-top: 2px;
}
.nutrition-grid { margin-top: 10px; }
.preparo-items-header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 18px 0 10px;
}
.preparo-items-header span:first-child {
font-weight: 700;
font-size: 13px;
color: var(--ink);
}
.preparo-cost-preview, .packaging-cost-preview {
font-size: 12.5px;
font-weight: 700;
color: var(--brand-purple-text);
background: var(--mist-soft);
padding: 8px 12px;
border-radius: var(--radius-sm);
margin-top: 12px;
}
/* flex (não grid de colunas fixas) de propósito — essa linha é reaproveitada
pra formulários com número diferente de campos (2 no Simulador, 3 num
Preparo, 4 num Pedido, 5 no Modo Festa), e min-content de