/* =========================================================
   Central da Ceia · componentes
   CSS puro, sem framework. Depende de tokens.css.
   Convenção: .cc-bloco, .cc-bloco__parte, .cc-bloco--variante.
   Estados por atributo sempre que possível (aria-*, data-*).
   ========================================================= */

/* ---------- 1. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cc-papel);
  color: var(--cc-tinta);
  font-family: var(--cc-fonte-texto);
  font-size: var(--cc-t-md);
  line-height: var(--cc-lh-texto);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--cc-cravo); text-underline-offset: 3px; }
:focus-visible { outline: none; box-shadow: var(--cc-foco); border-radius: var(--cc-r-xs); }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--cc-fonte-titulo);
  font-weight: var(--cc-peso-titulo);
  line-height: var(--cc-lh-titulo);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
.cc-num { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.cc-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cc-ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cc-ico--cheio { fill: currentColor; stroke: none; }
.cc-ico--sm { width: 18px; height: 18px; }
.cc-ico--lg { width: 28px; height: 28px; }

/* ---------- 2. Estrutura do app ---------- */
.cc-app {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(var(--cc-altura-nav) + env(safe-area-inset-bottom, 0px));
}
.cc-topo {
  position: sticky; top: 0; z-index: var(--cc-z-nav);
  display: flex; align-items: center; gap: var(--cc-e-2);
  min-height: 56px;
  padding: max(env(safe-area-inset-top, 0px), 6px) var(--cc-e-2) 6px;
  background: color-mix(in srgb, var(--cc-papel) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
}
.cc-topo[data-rolou] { border-bottom-color: var(--cc-borda); }
.cc-topo__titulo { flex: 1; min-width: 0; font-family: var(--cc-fonte-titulo); font-size: var(--cc-t-lg); font-weight: var(--cc-peso-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-marca-mini { display: inline-flex; align-items: center; justify-content: center; width: var(--cc-toque); height: var(--cc-toque); border-radius: var(--cc-r-pill); color: var(--cc-cravo); text-decoration: none; }
.cc-marca-mini svg { width: 32px; height: 32px; }

.cc-tela { width: 100%; max-width: var(--cc-largura-app); margin: 0 auto; padding: var(--cc-e-2) var(--cc-gutter) var(--cc-e-10); }
.cc-tela--larga { max-width: var(--cc-largura-larga); }
.cc-pilha { display: flex; flex-direction: column; gap: var(--cc-e-4); }
.cc-pilha--sm { gap: var(--cc-e-2); }
.cc-pilha--lg { gap: var(--cc-e-6); }
.cc-linha { display: flex; align-items: center; gap: var(--cc-e-2); }
.cc-linha--entre { justify-content: space-between; }
.cc-grade-2 { display: grid; gap: var(--cc-e-4); grid-template-columns: minmax(0, 1fr); }
.cc-grade-centrais { display: grid; gap: var(--cc-e-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Cabeçalho de tela */
.cc-cabeca { padding: var(--cc-e-2) 0 var(--cc-e-4); }
.cc-cabeca__sobre { display: inline-flex; align-items: center; gap: 6px; font-size: var(--cc-t-xs); font-weight: var(--cc-peso-forte); letter-spacing: var(--cc-rastreio-rotulo); text-transform: uppercase; color: var(--cc-mel-texto); }
.cc-cabeca__sobre svg { width: 12px; height: 12px; color: var(--cc-mel); }
.cc-cabeca h1 { font-size: var(--cc-t-2xl); margin-top: var(--cc-e-1); }
.cc-cabeca p { color: var(--cc-tinta-2); margin-top: var(--cc-e-2); }

/* Rótulo de seção ("caixa-alta pequena") */
.cc-rotulo { font-size: var(--cc-t-xs); font-weight: var(--cc-peso-forte); letter-spacing: var(--cc-rastreio-rotulo); text-transform: uppercase; color: var(--cc-tinta-3); }
.cc-secao__titulo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--cc-e-3); margin: var(--cc-e-2) 0 var(--cc-e-3); }
.cc-secao__titulo h2 { font-size: var(--cc-t-xl); }
.cc-dica { font-size: var(--cc-t-sm); color: var(--cc-tinta-3); }
.cc-fio { height: 0; border: 0; border-top: 1.5px dashed var(--cc-borda); margin: var(--cc-e-4) 0; }

/* ---------- 3. Botões ---------- */
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--cc-e-2);
  min-height: var(--cc-toque); padding: 10px 18px;
  border: 1.5px solid transparent; border-radius: var(--cc-r-sm);
  font-size: var(--cc-t-md); font-weight: var(--cc-peso-forte); line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--cc-dur-rapida) var(--cc-curva), transform var(--cc-dur-rapida) var(--cc-curva), box-shadow var(--cc-dur-rapida);
  -webkit-user-select: none; user-select: none;
}
.cc-btn:active { transform: translateY(1px) scale(.99); }
.cc-btn .cc-ico { width: 20px; height: 20px; }
.cc-btn--primario { background: var(--cc-cravo); color: var(--cc-sobre-escuro); box-shadow: inset 0 -2px 0 rgba(0,0,0,.14); }
.cc-btn--primario:hover { background: var(--cc-cravo-forte); }
.cc-btn--secundario { background: var(--cc-cartao); color: var(--cc-tinta); border-color: var(--cc-borda-forte); }
.cc-btn--secundario:hover { background: var(--cc-linho); }
.cc-btn--pinho { background: var(--cc-pinho); color: var(--cc-sobre-escuro); }
.cc-btn--pinho:hover { background: var(--cc-pinho-forte); }
.cc-btn--fantasma { background: transparent; color: var(--cc-cravo); padding-inline: 12px; }
.cc-btn--fantasma:hover { background: var(--cc-cravo-suave); }
.cc-btn--perigo { background: var(--cc-cartao); color: var(--cc-erro); border-color: color-mix(in srgb, var(--cc-erro) 45%, var(--cc-borda)); }
.cc-btn--perigo:hover { background: var(--cc-erro-bg); }
.cc-btn--bloco { display: flex; width: 100%; }
.cc-btn--sm { min-height: var(--cc-toque); padding: 6px 12px; font-size: var(--cc-t-sm); }
.cc-btn[disabled], .cc-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.cc-btn[data-carregando]::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: cc-gira .8s linear infinite; }
.cc-btn-ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--cc-toque); height: var(--cc-toque); padding: 0;
  border: 0; border-radius: var(--cc-r-pill); background: transparent; color: var(--cc-tinta-2);
  transition: background-color var(--cc-dur-rapida);
}
.cc-btn-ico:hover { background: var(--cc-linho); color: var(--cc-tinta); }
.cc-btn-ico--suave { background: var(--cc-linho); }
.cc-fab {
  position: fixed; z-index: var(--cc-z-nav); right: var(--cc-gutter);
  bottom: calc(var(--cc-altura-nav) + env(safe-area-inset-bottom, 0px) + 16px);
  display: inline-flex; align-items: center; gap: var(--cc-e-2);
  min-height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: var(--cc-r-pill);
  background: var(--cc-cravo); color: var(--cc-sobre-escuro); font-weight: var(--cc-peso-forte);
  box-shadow: var(--cc-sombra-3);
}
.cc-fab:hover { background: var(--cc-cravo-forte); }
@keyframes cc-gira { to { transform: rotate(360deg); } }

/* ---------- 4. Cartões ---------- */
.cc-cartao {
  background: var(--cc-cartao); border: 1px solid var(--cc-borda); border-radius: var(--cc-r-md);
  padding: var(--cc-e-4); box-shadow: var(--cc-sombra-1);
}
.cc-cartao--rebaixado { background: var(--cc-linho); border-color: transparent; box-shadow: none; }
.cc-cartao--destaque { background: var(--cc-noite); color: var(--cc-sobre-escuro); border-color: var(--cc-noite); box-shadow: var(--cc-sombra-2); position: relative; overflow: hidden; }
.cc-cartao--destaque .cc-rotulo, .cc-cartao--destaque .cc-dica { color: #D9CDB8; }
.cc-cartao--destaque::after { /* constelação discreta de papelaria */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.5px 1.5px at 82% 18%, #F2D9A6 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 42%, #F2D9A6 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 30%, #F2D9A6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 70%, #F2D9A6 50%, transparent 51%);
}
.cc-cartao__titulo { font-family: var(--cc-fonte-titulo); font-size: var(--cc-t-lg); font-weight: var(--cc-peso-titulo); }
.cc-cartao__cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--cc-e-3); margin-bottom: var(--cc-e-3); }

/* Cartão de central (início) */
.cc-central {
  position: relative; display: flex; flex-direction: column; gap: var(--cc-e-2);
  min-height: 148px; padding: var(--cc-e-4);
  background: var(--cc-cartao); border: 1px solid var(--cc-borda); border-radius: var(--cc-r-md);
  color: inherit; text-decoration: none; box-shadow: var(--cc-sombra-1);
  transition: transform var(--cc-dur-media) var(--cc-curva), box-shadow var(--cc-dur-media);
}
.cc-central:hover { transform: translateY(-2px); box-shadow: var(--cc-sombra-2); }
.cc-central__ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--cc-cor-suave, var(--cc-linho)); color: var(--cc-cor, var(--cc-tinta)); }
.cc-central__nome { font-family: var(--cc-fonte-titulo); font-size: var(--cc-t-lg); font-weight: var(--cc-peso-titulo); line-height: var(--cc-lh-justa); }
.cc-central__resumo { font-size: var(--cc-t-sm); color: var(--cc-tinta-2); margin-top: auto; }
.cc-central--largo { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; }
.cc-central[data-cor="cravo"] { --cc-cor: var(--cc-cravo); --cc-cor-suave: var(--cc-cravo-suave); }
.cc-central[data-cor="pinho"] { --cc-cor: var(--cc-pinho); --cc-cor-suave: var(--cc-pinho-suave); }
.cc-central[data-cor="mel"]   { --cc-cor: var(--cc-mel-texto); --cc-cor-suave: var(--cc-mel-suave); }
.cc-central[data-cor="noite"] { --cc-cor: var(--cc-noite-2); --cc-cor-suave: var(--cc-noite-suave); }
.cc-central[data-cor="lilas"] { --cc-cor: var(--cc-st-ideia-fg); --cc-cor-suave: var(--cc-st-ideia-bg); }

/* Números de resumo */
.cc-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cc-e-2); }
.cc-resumo__item { padding: var(--cc-e-3); border-radius: var(--cc-r-sm); background: var(--cc-linho); min-width: 0; }
.cc-resumo__valor { display: block; font-size: var(--cc-t-lg); font-weight: var(--cc-peso-forte); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-resumo__valor--ok { color: var(--cc-pinho); }
.cc-resumo__valor--alerta { color: var(--cc-erro); }
.cc-destaque-num { font-size: var(--cc-t-3xl); font-weight: var(--cc-peso-forte); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ---------- 5. Campos ---------- */
.cc-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cc-campo__rotulo { font-size: var(--cc-t-sm); font-weight: var(--cc-peso-forte); color: var(--cc-tinta-2); }
.cc-campo__ajuda { font-size: var(--cc-t-sm); color: var(--cc-tinta-3); }
.cc-campo__erro { display: none; align-items: center; gap: 6px; font-size: var(--cc-t-sm); color: var(--cc-erro); font-weight: var(--cc-peso-medio); }
.cc-campo[data-erro] .cc-campo__erro { display: flex; }
.cc-entrada, .cc-area, .cc-selecao {
  width: 100%; min-height: var(--cc-toque); padding: 10px 12px;
  background: var(--cc-cartao); border: 1.5px solid var(--cc-borda-forte); border-radius: var(--cc-r-sm);
  font-size: var(--cc-t-md); /* 16 px: o iPhone não dá zoom */
  transition: border-color var(--cc-dur-rapida), box-shadow var(--cc-dur-rapida);
}
.cc-entrada::placeholder, .cc-area::placeholder { color: #776B60; }
.cc-entrada:focus, .cc-area:focus, .cc-selecao:focus { outline: none; border-color: var(--cc-noite-2); box-shadow: 0 0 0 3px var(--cc-noite-suave); }
.cc-campo[data-erro] .cc-entrada { border-color: var(--cc-erro); }
.cc-area { min-height: 96px; resize: vertical; line-height: var(--cc-lh-texto); }
.cc-selecao { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23554A42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }

/* Entrada de dinheiro */
.cc-dinheiro { position: relative; display: flex; align-items: center; }
.cc-dinheiro__moeda { position: absolute; left: 12px; font-size: var(--cc-t-sm); font-weight: var(--cc-peso-forte); color: var(--cc-tinta-3); pointer-events: none; }
.cc-dinheiro .cc-entrada { padding-left: 40px; text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--cc-peso-medio); }
.cc-dinheiro--grande .cc-entrada { min-height: 56px; font-size: var(--cc-t-xl); }
.cc-dinheiro--grande .cc-dinheiro__moeda { font-size: var(--cc-t-md); }

/* Contador (+ e -) */
.cc-contador { display: inline-flex; align-items: center; border: 1.5px solid var(--cc-borda-forte); border-radius: var(--cc-r-sm); background: var(--cc-cartao); }
.cc-contador button { width: var(--cc-toque); height: var(--cc-toque); border: 0; background: transparent; color: var(--cc-cravo); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--cc-r-sm); }
.cc-contador button:hover { background: var(--cc-cravo-suave); }
.cc-contador output { min-width: 40px; text-align: center; font-weight: var(--cc-peso-forte); font-size: var(--cc-t-lg); font-variant-numeric: tabular-nums; }

/* Opções em pílula (escolha única) */
.cc-opcoes { display: flex; flex-wrap: wrap; gap: var(--cc-e-2); }
.cc-opcao { position: relative; }
.cc-opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cc-opcao span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--cc-borda-forte); border-radius: var(--cc-r-pill); font-size: var(--cc-t-sm); font-weight: var(--cc-peso-medio); background: var(--cc-cartao); transition: all var(--cc-dur-rapida); }
.cc-opcao input:checked + span { background: var(--cc-noite); border-color: var(--cc-noite); color: var(--cc-sobre-escuro); }
.cc-opcao input:focus-visible + span { box-shadow: var(--cc-foco); }

/* Interruptor (liga e desliga) */
.cc-interruptor { position: relative; display: inline-flex; align-items: center; gap: var(--cc-e-3); min-height: var(--cc-toque); cursor: pointer; }
.cc-interruptor input { appearance: none; -webkit-appearance: none; margin: 0; width: 48px; height: 28px; border-radius: 14px; background: var(--cc-borda-forte); position: relative; cursor: pointer; transition: background-color var(--cc-dur-media); flex: none; }
.cc-interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--cc-sombra-1); transition: transform var(--cc-dur-media) var(--cc-curva-mola); }
.cc-interruptor input:checked { background: var(--cc-pinho); }
.cc-interruptor input:checked::after { transform: translateX(20px); }
.cc-interruptor input:focus-visible { box-shadow: var(--cc-foco); }

/* ---------- 6. Linha de lista com caixa de marcar ---------- */
.cc-lista { list-style: none; margin: 0; padding: 0; background: var(--cc-cartao); border: 1px solid var(--cc-borda); border-radius: var(--cc-r-md); overflow: hidden; }
.cc-lista--solta { background: transparent; border: 0; border-radius: 0; }
.cc-item { display: flex; align-items: center; gap: var(--cc-e-2); min-height: 56px; padding: 6px var(--cc-e-2) 6px var(--cc-e-1); border-top: 1px solid var(--cc-borda); }
.cc-item:first-child { border-top: 0; }
.cc-item__marca { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--cc-toque); height: var(--cc-toque); cursor: pointer; }
.cc-check {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 24px; height: 24px; border: 2px solid var(--cc-borda-forte); border-radius: var(--cc-r-xs);
  background: var(--cc-cartao) center / 16px no-repeat; cursor: pointer;
  transition: background-color var(--cc-dur-rapida), border-color var(--cc-dur-rapida), transform var(--cc-dur-media) var(--cc-curva-mola);
}
.cc-check:checked {
  background-color: var(--cc-pinho); border-color: var(--cc-pinho); transform: scale(1.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF4E6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.cc-check:focus-visible { box-shadow: var(--cc-foco); }
.cc-item__corpo { flex: 1; min-width: 0; padding: 4px 0; }
.cc-item__texto { display: block; overflow-wrap: anywhere; transition: color var(--cc-dur-media); }
.cc-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--cc-t-sm); color: var(--cc-tinta-3); }
.cc-item__valor { flex: none; font-weight: var(--cc-peso-forte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-item:has(.cc-check:checked) .cc-item__texto { color: var(--cc-tinta-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--cc-cravo) 55%, transparent); text-decoration-thickness: 1.5px; }
.cc-item__meta .cc-num { white-space: nowrap; }
.cc-avatar { flex: none; width: 36px; height: 36px; margin-left: 8px; border-radius: 50%; display: grid; place-items: center; background: var(--cc-av, var(--cc-linho)); color: var(--cc-tinta); font-family: var(--cc-fonte-titulo); font-weight: var(--cc-peso-titulo); font-size: var(--cc-t-md); }
.cc-item--grupo { min-height: 40px; background: var(--cc-linho); padding: 8px var(--cc-e-4); font-size: var(--cc-t-xs); font-weight: var(--cc-peso-forte); letter-spacing: var(--cc-rastreio-rotulo); text-transform: uppercase; color: var(--cc-tinta-2); justify-content: space-between; }
.cc-item--add { color: var(--cc-cravo); font-weight: var(--cc-peso-forte); }
.cc-item--add button { all: unset; display: flex; align-items: center; gap: var(--cc-e-2); width: 100%; min-height: var(--cc-toque); padding-left: 10px; cursor: pointer; }
.cc-item--add button:focus-visible { box-shadow: var(--cc-foco); border-radius: var(--cc-r-xs); }

/* ---------- 7. Chips de status ---------- */
.cc-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 28px; padding: 3px 10px 3px 8px; border: 0; border-radius: var(--cc-r-pill);
  background: var(--cc-linho); color: var(--cc-tinta-2);
  font-size: var(--cc-t-sm); font-weight: var(--cc-peso-forte); line-height: 1.2; white-space: nowrap;
}
.cc-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
button.cc-chip { min-height: var(--cc-toque); padding-block: 0; position: relative; } /* alvo de toque de 44 px */
button.cc-chip > span { display: inline-flex; align-items: center; min-height: 30px; }
.cc-chip--ideia      { background: var(--cc-st-ideia-bg);      color: var(--cc-st-ideia-fg); }
.cc-chip--ideia::before { background: transparent; border: 2px solid currentColor; width: 9px; height: 9px; }
.cc-chip--comprado   { background: var(--cc-st-comprado-bg);   color: var(--cc-st-comprado-fg); }
.cc-chip--embrulhado { background: var(--cc-st-embrulhado-bg); color: var(--cc-st-embrulhado-fg); }
.cc-chip--embrulhado::before { border-radius: 2px; transform: rotate(45deg); }
.cc-chip--entregue   { background: var(--cc-st-entregue-bg);   color: var(--cc-st-entregue-fg); }
.cc-chip--entregue::before { width: 10px; height: 10px; background: none; border-radius: 0; -webkit-mask: none; border: solid currentColor; border-width: 0 2.5px 2.5px 0; width: 5px; height: 9px; transform: rotate(45deg) translate(-1px, -1px); }
.cc-chip--neutro { background: var(--cc-linho); color: var(--cc-tinta-2); }
.cc-chip--neutro::before { display: none; }
.cc-chip--ok { background: var(--cc-ok-bg); color: var(--cc-pinho-forte); }
.cc-chip--atencao { background: var(--cc-atencao-bg); color: var(--cc-atencao); }
.cc-chip--erro { background: var(--cc-erro-bg); color: var(--cc-erro); }
button.cc-chip { transition: transform var(--cc-dur-media) var(--cc-curva-mola); background: none; padding: 0; }
button.cc-chip > span { padding: 3px 10px 3px 8px; border-radius: var(--cc-r-pill); gap: 6px; }
button.cc-chip::before { display: none; }
button.cc-chip > span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
button.cc-chip.cc-chip--ideia > span { background: var(--cc-st-ideia-bg); }
button.cc-chip.cc-chip--ideia > span::before { background: transparent; border: 2px solid currentColor; width: 9px; height: 9px; box-sizing: border-box; }
button.cc-chip.cc-chip--comprado > span { background: var(--cc-st-comprado-bg); }
button.cc-chip.cc-chip--embrulhado > span { background: var(--cc-st-embrulhado-bg); }
button.cc-chip.cc-chip--embrulhado > span::before { border-radius: 2px; transform: rotate(45deg); }
button.cc-chip.cc-chip--entregue > span { background: var(--cc-st-entregue-bg); }
button.cc-chip.cc-chip--entregue > span::before { background: none; border-radius: 0; border: solid currentColor; border-width: 0 2.5px 2.5px 0; width: 5px; height: 9px; transform: rotate(45deg) translate(-1px, -1px); }
button.cc-chip:active { transform: scale(.95); }
.cc-chips { display: flex; flex-wrap: wrap; gap: var(--cc-e-2); }

/* ---------- 8. Barra de progresso ("fita") ---------- */
.cc-progresso { display: flex; flex-direction: column; gap: 6px; }
.cc-progresso__topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--cc-e-2); font-size: var(--cc-t-sm); color: var(--cc-tinta-2); }
.cc-progresso__topo strong { color: var(--cc-tinta); font-variant-numeric: tabular-nums; }
.cc-progresso__trilho { position: relative; height: 10px; border-radius: var(--cc-r-pill); background: var(--cc-linho); overflow: hidden; }
.cc-progresso__fita {
  position: absolute; inset: 0 auto 0 0; width: var(--cc-valor, 0%); border-radius: inherit;
  background-color: var(--cc-pinho);
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.16) 0 6px, transparent 6px 12px);
  transition: width var(--cc-dur-lenta) var(--cc-curva);
}
.cc-progresso--cravo .cc-progresso__fita { background-color: var(--cc-cravo); }
.cc-progresso--mel .cc-progresso__fita { background-color: var(--cc-mel); }
.cc-progresso--estourou .cc-progresso__fita { background-color: var(--cc-erro); }
.cc-progresso--fino .cc-progresso__trilho { height: 6px; }
.cc-cartao--destaque .cc-progresso__trilho { background: rgba(255,255,255,.14); }
.cc-cartao--destaque .cc-progresso__fita { background-color: var(--cc-mel); }
.cc-cartao--destaque .cc-progresso__topo, .cc-cartao--destaque .cc-progresso__topo strong { color: var(--cc-sobre-escuro); }

/* Anel de progresso (início) */
.cc-anel { --cc-valor: 0; width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--cc-mel) calc(var(--cc-valor) * 1%), rgba(255,255,255,.16) 0); }
.cc-anel::before { content: ""; grid-area: 1 / 1; width: 52px; height: 52px; border-radius: 50%; background: var(--cc-noite); }
.cc-anel span { grid-area: 1 / 1; position: relative; font-weight: var(--cc-peso-forte); font-size: var(--cc-t-sm); font-variant-numeric: tabular-nums; }

/* ---------- 9. Navegação inferior (5 centrais) ---------- */
.cc-nav {
  position: fixed; z-index: var(--cc-z-nav); left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  height: calc(var(--cc-altura-nav) + env(safe-area-inset-bottom, 0px));
  padding: 0 4px env(safe-area-inset-bottom, 0px);
  background: var(--cc-cartao); border-top: 1px solid var(--cc-borda);
  box-shadow: 0 -6px 18px -12px rgba(60, 40, 25, .25);
}
.cc-nav__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; padding: 6px 2px; color: var(--cc-tinta-3); text-decoration: none;
  font-size: 11.5px; font-weight: var(--cc-peso-medio); line-height: 1.1; letter-spacing: .005em;
  position: relative;
}
.cc-nav__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-nav__item .cc-ico { width: 24px; height: 24px; transition: transform var(--cc-dur-media) var(--cc-curva-mola); }
.cc-nav__item[aria-current="page"] { color: var(--cc-cravo); font-weight: var(--cc-peso-forte); }
.cc-nav__item[aria-current="page"]::before { content: ""; position: absolute; top: 6px; width: 48px; height: 30px; border-radius: var(--cc-r-pill); background: var(--cc-cravo-suave); z-index: -1; }
.cc-nav__item[aria-current="page"] .cc-ico { transform: translateY(-1px); }
.cc-nav__item:focus-visible { box-shadow: inset 0 0 0 2px var(--cc-noite-2); border-radius: var(--cc-r-sm); }
.cc-nav__marca { display: none; }

/* ---------- 10. Abas ---------- */
.cc-abas {
  display: flex; gap: 4px; margin: 0 calc(var(--cc-gutter) * -1) var(--cc-e-4); padding: 0 var(--cc-gutter);
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  border-bottom: 1px solid var(--cc-borda);
}
.cc-abas::-webkit-scrollbar { display: none; }
.cc-aba {
  flex: none; scroll-snap-align: start; position: relative;
  min-height: var(--cc-toque); padding: 10px 12px; border: 0; background: none;
  color: var(--cc-tinta-3); font-weight: var(--cc-peso-medio); font-size: var(--cc-t-sm); white-space: nowrap;
}
.cc-aba[aria-selected="true"] { color: var(--cc-tinta); font-weight: var(--cc-peso-forte); }
.cc-aba[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--cc-cravo); }
.cc-aba:focus-visible { box-shadow: inset 0 0 0 2px var(--cc-noite-2); }
.cc-painel[hidden] { display: none; }
.cc-painel { animation: cc-surge var(--cc-dur-media) var(--cc-curva); }
@keyframes cc-surge { from { opacity: 0; transform: translateY(4px); } }

/* Abas em pílula (segmentado, ex.: iPhone ou Android) */
.cc-segmento { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--cc-r-pill); background: var(--cc-linho); }
.cc-segmento button { min-height: var(--cc-toque); padding: 6px 16px; border: 0; border-radius: var(--cc-r-pill); background: transparent; font-weight: var(--cc-peso-medio); color: var(--cc-tinta-2); }
.cc-segmento button[aria-selected="true"] { background: var(--cc-cartao); color: var(--cc-tinta); font-weight: var(--cc-peso-forte); box-shadow: var(--cc-sombra-1); }

/* ---------- 11. Modal (folha de baixo no celular) ---------- */
.cc-modal {
  width: 100%; max-width: 100%; max-height: 92dvh; margin: auto auto 0; padding: 0;
  border: 0; border-radius: var(--cc-r-lg) var(--cc-r-lg) 0 0;
  background: var(--cc-cartao); color: var(--cc-tinta); box-shadow: var(--cc-sombra-3);
}
.cc-modal[open] { animation: cc-sobe var(--cc-dur-lenta) var(--cc-curva); }
.cc-modal::backdrop { background: rgba(30, 22, 18, .45); }
.cc-modal__alca { width: 40px; height: 4px; border-radius: 4px; background: var(--cc-borda-forte); margin: 10px auto 0; }
.cc-modal__cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--cc-e-2); padding: var(--cc-e-2) var(--cc-e-2) 0 var(--cc-e-5); }
.cc-modal__cabeca h2 { font-size: var(--cc-t-xl); }
.cc-modal__corpo { padding: var(--cc-e-3) var(--cc-e-5) var(--cc-e-4); }
.cc-modal__acoes { display: flex; gap: var(--cc-e-2); padding: var(--cc-e-3) var(--cc-e-5) calc(var(--cc-e-5) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cc-borda); }
.cc-modal__acoes > * { flex: 1; }
@keyframes cc-sobe { from { transform: translateY(24px); opacity: 0; } }

/* ---------- 12. Avisos ---------- */
.cc-aviso {
  display: flex; align-items: flex-start; gap: var(--cc-e-3);
  padding: var(--cc-e-3) var(--cc-e-3) var(--cc-e-3) var(--cc-e-4);
  border-radius: var(--cc-r-md); border: 1px solid transparent;
  background: var(--cc-info-bg); color: var(--cc-tinta); font-size: var(--cc-t-sm);
}
.cc-aviso > .cc-ico { margin-top: 1px; color: var(--cc-info); }
.cc-aviso__corpo { flex: 1; min-width: 0; }
.cc-aviso__corpo strong { display: block; font-size: var(--cc-t-md); margin-bottom: 2px; }
.cc-aviso__acoes { display: flex; flex-wrap: wrap; gap: var(--cc-e-2); margin-top: var(--cc-e-3); }
.cc-aviso .cc-btn-ico { margin: -10px -8px -10px 0; }
.cc-aviso--ok { background: var(--cc-ok-bg); } .cc-aviso--ok > .cc-ico { color: var(--cc-ok); }
.cc-aviso--atencao { background: var(--cc-atencao-bg); border-color: #EBD3A1; } .cc-aviso--atencao > .cc-ico { color: var(--cc-atencao); }
.cc-aviso--erro { background: var(--cc-erro-bg); } .cc-aviso--erro > .cc-ico { color: var(--cc-erro); }
.cc-aviso--noite { background: var(--cc-noite); color: var(--cc-sobre-escuro); } .cc-aviso--noite > .cc-ico { color: var(--cc-mel); }
.cc-aviso--noite .cc-btn-ico { color: var(--cc-sobre-escuro); } .cc-aviso--noite .cc-btn-ico:hover { background: rgba(255,255,255,.1); }

/* Toast (confirmação rápida, some sozinho) */
.cc-toast {
  position: fixed; z-index: var(--cc-z-aviso); left: 50%; transform: translate(-50%, 16px);
  bottom: calc(var(--cc-altura-nav) + env(safe-area-inset-bottom, 0px) + 16px);
  display: flex; align-items: center; gap: var(--cc-e-3); width: max-content; max-width: calc(100% - 32px);
  padding: 12px 8px 12px 16px; border-radius: var(--cc-r-sm);
  background: var(--cc-tinta); color: var(--cc-sobre-escuro); font-size: var(--cc-t-sm); box-shadow: var(--cc-sombra-3);
  opacity: 0; pointer-events: none; transition: opacity var(--cc-dur-media), transform var(--cc-dur-media) var(--cc-curva);
}
.cc-toast[data-visivel] { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cc-toast .cc-btn { min-height: 36px; padding: 4px 10px; color: #F2C98A; background: transparent; }

/* ---------- 13. Estado vazio ---------- */
.cc-vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--cc-e-3); padding: var(--cc-e-8) var(--cc-e-4); border: 1.5px dashed var(--cc-borda); border-radius: var(--cc-r-lg); background: color-mix(in srgb, var(--cc-cartao) 60%, transparent); }
.cc-vazio__arte { width: 112px; height: 112px; margin-bottom: var(--cc-e-1); }
.cc-vazio h3 { font-size: var(--cc-t-xl); }
.cc-vazio p { max-width: 32ch; color: var(--cc-tinta-2); }
.cc-vazio .cc-btn { margin-top: var(--cc-e-2); }

/* ---------- 14. Tabela editável ---------- */
.cc-tabela-envolto { background: var(--cc-cartao); border: 1px solid var(--cc-borda); border-radius: var(--cc-r-md); overflow: hidden; }
.cc-tabela { width: 100%; border-collapse: collapse; font-size: var(--cc-t-md); }
.cc-tabela th { text-align: left; font-size: var(--cc-t-xs); font-weight: var(--cc-peso-forte); letter-spacing: var(--cc-rastreio-rotulo); text-transform: uppercase; color: var(--cc-tinta-3); background: var(--cc-linho); padding: 10px 12px; white-space: nowrap; }
.cc-tabela td { padding: 4px 6px; border-top: 1px solid var(--cc-borda); vertical-align: middle; }
.cc-tabela .cc-col-num { text-align: right; width: 1%; white-space: nowrap; }
.cc-tabela .cc-col-acao { width: 1%; }
.cc-celula {
  width: 100%; min-height: var(--cc-toque); padding: 8px 8px; border: 1.5px solid transparent; border-radius: var(--cc-r-xs);
  background: transparent; font-size: var(--cc-t-md);
}
.cc-celula:hover { background: var(--cc-linho); }
.cc-celula:focus { outline: none; background: var(--cc-cartao); border-color: var(--cc-noite-2); }
.cc-celula--num { text-align: right; font-variant-numeric: tabular-nums; min-width: 96px; }
.cc-tabela tfoot td { background: var(--cc-linho); font-weight: var(--cc-peso-forte); padding: 12px; font-variant-numeric: tabular-nums; }
.cc-tabela tr[data-estourou] .cc-celula--num, .cc-saldo--neg { color: var(--cc-erro); font-weight: var(--cc-peso-forte); }
.cc-saldo--pos { color: var(--cc-pinho); font-weight: var(--cc-peso-forte); }
.cc-tabela__add { padding: 4px; border-top: 1px solid var(--cc-borda); }

/* No celular, cada linha vira um cartão com rótulos */
@media (max-width: 599px) {
  .cc-tabela--empilha thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cc-tabela--empilha, .cc-tabela--empilha tbody, .cc-tabela--empilha tr, .cc-tabela--empilha td { display: block; width: 100%; }
  .cc-tabela--empilha tbody tr { position: relative; padding: 8px 52px 8px 8px; border-top: 1px solid var(--cc-borda); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 4px; }
  .cc-tabela--empilha td.cc-col-cheia { padding-right: 0; }
  .cc-tabela--empilha tbody tr:first-child { border-top: 0; }
  .cc-tabela--empilha td { border: 0; padding: 2px 0; }
  .cc-tabela--empilha td[data-rotulo]::before { content: attr(data-rotulo); display: block; padding: 4px 8px 0; font-size: var(--cc-t-xs); font-weight: var(--cc-peso-forte); letter-spacing: var(--cc-rastreio-rotulo); text-transform: uppercase; color: var(--cc-tinta-3); }
  .cc-tabela--empilha td.cc-col-cheia { grid-column: 1 / -1; }
  .cc-tabela--empilha td.cc-col-cheia .cc-celula { font-weight: var(--cc-peso-forte); }
  .cc-tabela--empilha .cc-col-num { text-align: left; width: auto; }
  .cc-tabela--empilha .cc-celula--num { text-align: left; min-width: 0; }
  .cc-tabela--empilha td.cc-col-acao { position: absolute; top: 8px; right: 4px; width: auto; }
  .cc-tabela--empilha tfoot { display: block; }
  .cc-tabela--empilha tfoot tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 4px; background: var(--cc-linho); padding: 4px 52px 8px 8px; }
  .cc-tabela--empilha tfoot td { display: block; width: auto; padding: 4px 8px; text-align: left; }
  .cc-tabela--empilha tfoot td:first-child { grid-column: 1 / -1; font-family: var(--cc-fonte-titulo); }
  .cc-tabela--empilha tfoot td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: var(--cc-t-xs); letter-spacing: var(--cc-rastreio-rotulo); text-transform: uppercase; color: var(--cc-tinta-3); }
  .cc-tabela--empilha tfoot td:empty { display: none; }
}

/* ---------- 15. Matriz de urgência ---------- */
.cc-matriz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cc-e-2); }
.cc-quad { min-height: 132px; padding: var(--cc-e-3); border-radius: var(--cc-r-md); display: flex; flex-direction: column; gap: 6px; }
.cc-quad h3 { font-family: var(--cc-fonte-texto); font-size: var(--cc-t-sm); font-weight: var(--cc-peso-forte); }
.cc-quad p { font-size: var(--cc-t-xs); color: var(--cc-tinta-2); }
.cc-quad ul { margin: 4px 0 0; padding-left: 18px; font-size: var(--cc-t-sm); }
.cc-quad--1 { background: var(--cc-q1); } .cc-quad--2 { background: var(--cc-q2); }
.cc-quad--3 { background: var(--cc-q3); } .cc-quad--4 { background: var(--cc-q4); }
.cc-quad__num { font-variant-numeric: tabular-nums; font-family: var(--cc-fonte-titulo); font-size: var(--cc-t-2xl); line-height: 1; margin-top: auto; }

/* ---------- 16. Linha do tempo (cronograma) ---------- */
.cc-tempo { list-style: none; margin: 0; padding: 0; }
.cc-tempo__etapa { position: relative; padding: 0 0 var(--cc-e-5) 36px; }
.cc-tempo__etapa::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 0; border-left: 2px dashed var(--cc-borda); }
.cc-tempo__etapa:last-child::before { display: none; }
.cc-tempo__marco { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--cc-mel-suave); color: var(--cc-mel-texto); }
.cc-tempo__marco svg { width: 14px; height: 14px; }
.cc-tempo__etapa[data-feito] .cc-tempo__marco { background: var(--cc-pinho); color: var(--cc-sobre-escuro); }
.cc-tempo__titulo { font-family: var(--cc-fonte-titulo); font-size: var(--cc-t-lg); font-weight: var(--cc-peso-titulo); line-height: 24px; }
.cc-tempo__data { font-size: var(--cc-t-sm); color: var(--cc-tinta-3); margin-bottom: var(--cc-e-2); }

/* ---------- 17. Passos (instalação) ---------- */
.cc-passos { list-style: none; margin: 0; padding: 0; counter-reset: passo; display: flex; flex-direction: column; gap: var(--cc-e-3); }
.cc-passos li { counter-increment: passo; display: flex; gap: var(--cc-e-3); align-items: flex-start; }
.cc-passos li::before { content: counter(passo); flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--cc-noite); color: var(--cc-sobre-escuro); font-weight: var(--cc-peso-forte); font-size: var(--cc-t-sm); }
.cc-tecla { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--cc-r-xs); border: 1px solid var(--cc-borda-forte); background: var(--cc-cartao); font-weight: var(--cc-peso-forte); font-size: var(--cc-t-sm); white-space: nowrap; vertical-align: 1px; }
.cc-tecla svg { width: 16px; height: 16px; }

/* ---------- 18. Zona de arquivo (importar backup) ---------- */
.cc-zona { display: flex; flex-direction: column; align-items: center; gap: var(--cc-e-2); padding: var(--cc-e-6) var(--cc-e-4); text-align: center; border: 2px dashed var(--cc-borda-forte); border-radius: var(--cc-r-md); background: var(--cc-cartao); cursor: pointer; transition: background-color var(--cc-dur-rapida), border-color var(--cc-dur-rapida); }
.cc-zona:hover, .cc-zona[data-arrastando] { background: var(--cc-noite-suave); border-color: var(--cc-noite-2); }
.cc-zona input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cc-zona:focus-within { box-shadow: var(--cc-foco); }

/* ---------- 19. Responsivo ---------- */
@media (min-width: 600px) {
  :root { --cc-gutter: 24px; }
  .cc-grade-centrais { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cc-modal { max-width: 520px; margin: auto; border-radius: var(--cc-r-lg); }
  .cc-modal__alca { display: none; }
  .cc-cabeca h1 { font-size: 2rem; }
  .cc-tela { max-width: 680px; }
}
@media (min-width: 900px) {
  :root { --cc-altura-nav: 0px; }
  .cc-app { padding-bottom: 0; padding-left: 232px; }
  .cc-nav {
    top: 0; right: auto; width: 232px; height: auto;
    display: flex; flex-direction: column; gap: 2px; padding: var(--cc-e-5) var(--cc-e-3);
    border-top: 0; border-right: 1px solid var(--cc-borda); box-shadow: none; background: var(--cc-linho);
  }
  .cc-nav__marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; color: var(--cc-tinta); text-decoration: none; font-family: var(--cc-fonte-titulo); font-weight: var(--cc-peso-titulo); font-size: var(--cc-t-lg); line-height: 1.1; }
  .cc-nav__marca svg { width: 36px; height: 36px; }
  .cc-nav__item { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: var(--cc-r-sm); font-size: var(--cc-t-md); color: var(--cc-tinta-2); }
  .cc-nav__item:hover { background: var(--cc-linho-2); }
  .cc-nav__item[aria-current="page"] { background: var(--cc-cartao); box-shadow: var(--cc-sombra-1); }
  .cc-nav__item[aria-current="page"]::before { display: none; }
  .cc-topo .cc-marca-mini { display: none; }
  .cc-topo { padding-inline: var(--cc-e-6); }
  .cc-tela { max-width: 760px; padding-top: var(--cc-e-4); }
  .cc-tela--larga { max-width: var(--cc-largura-larga); }
  .cc-tela--larga .cc-grade-2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .cc-fab { bottom: 24px; right: 32px; }
  .cc-toast { bottom: 24px; }
}
@media (min-width: 1200px) {
  .cc-grade-centrais { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}