/* =========================================================
   ARTESA · COMPONENTES (peças reaproveitadas em todas as telas)
   ========================================================= */

/* cartão */
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; box-shadow: var(--sombra); }
.cartao.suave { background: var(--superficie-2); box-shadow: none; }
.cartao h3 { font-family: var(--f-titulo); font-weight: var(--peso-titulo); font-size: 17px; line-height: 1.2; }
.rotulo { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rotulo-cor, var(--texto2)); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rotulo:has(> svg:first-child) { justify-content: flex-start; } /* ícone + texto ficam juntos à esquerda */
.cartao .rotulo + * { margin-top: 8px; }

/* cartões coloridos (candy) */
.cor-rosa { background: var(--destaque-suave); border-color: transparent; }
.cor-menta { background: var(--sucesso-suave); border-color: transparent; }
.cor-pessego { background: var(--alerta-suave); border-color: transparent; }
.cor-azul { background: var(--info-suave); border-color: transparent; }
.cor-lavanda { background: var(--lavanda-suave); border-color: transparent; }
.cor-amarelo { background: var(--amarelo-suave); border-color: transparent; }

/* botões (grandes, fáceis de tocar) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 20px; border-radius: 16px; font-weight: 800; font-size: 16px; background: var(--destaque); color: var(--sobre-destaque); width: 100%; transition: transform .12s; }
.btn:active { transform: scale(.98); }
.btn svg { width: 20px; height: 20px; }
.btn.sec { background: var(--superficie); color: var(--texto); border: 1.5px solid var(--linha); }
.btn.fantasma { background: transparent; color: var(--destaque-texto); min-height: 44px; padding: 8px 12px; }
.btn.pequeno { min-height: 42px; padding: 8px 14px; font-size: 14.5px; border-radius: 13px; width: auto; }
.btn.perigo { background: var(--perigo-suave); color: var(--perigo); }
.btn.whats { background: #25D366; color: #06331A; }
.linha-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* chips / selos */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 800; white-space: nowrap; line-height: 1.3; }
.chip svg { width: 14px; height: 14px; }
.chip.rosa { background: var(--destaque-suave); color: var(--destaque-texto); }
.chip.menta { background: var(--sucesso-suave); color: var(--sucesso); }
.chip.pessego { background: var(--alerta-suave); color: var(--alerta); }
.chip.azul { background: var(--info-suave); color: var(--info); }
.chip.lavanda { background: var(--lavanda-suave); color: var(--lavanda); }
.chip.amarelo { background: var(--amarelo-suave); color: var(--amarelo); }
.chip.perigo { background: var(--perigo-suave); color: var(--perigo); }
.chip.neutro { background: var(--superficie-2); color: var(--texto2); }

/* filtros roláveis */
.filtros { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtros button { flex: none; min-height: 40px; padding: 8px 15px; border-radius: 99px; font-weight: 800; font-size: 14px; background: var(--superficie); border: 1.5px solid var(--linha); color: var(--texto2); }
.filtros button.ativo { background: var(--texto); color: var(--fundo); border-color: var(--texto); }

/* abas */
.abas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--superficie-2); border-radius: 16px; padding: 4px; gap: 4px; }
.abas button { min-height: 42px; border-radius: 12px; font-weight: 800; font-size: 14px; color: var(--texto2); }
.abas button.ativa { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }

/* listas */
.lista { display: grid; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linha); min-height: 60px; }
.lista > .item:first-child { border-top: 0; padding-top: 4px; }
.item .meio { flex: 1; min-width: 0; }
.item .meio b { display: block; font-size: 15.5px; line-height: 1.25; }
.item .meio small { display: block; font-size: 13px; color: var(--texto2); margin-top: 2px; }
.item .valor { font-weight: 800; font-size: 15.5px; text-align: right; }
.icone-redondo { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.icone-redondo svg { width: 22px; height: 22px; }
/* ícone colorido: o desenho ganha a cor forte do fundo suave (mais presença, contraste acima de 3:1) */
.icone-redondo.cor-rosa { color: var(--destaque-texto); } .icone-redondo.cor-menta { color: var(--sucesso); } .icone-redondo.cor-pessego { color: var(--alerta); }
.icone-redondo.cor-azul { color: var(--info); } .icone-redondo.cor-lavanda { color: var(--lavanda); } .icone-redondo.cor-amarelo { color: var(--amarelo); }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 800; font-size: 16px; }
.seta { color: var(--texto2); flex: none; }
.seta svg { width: 18px; height: 18px; }

/* barra de progresso */
.barra { height: 12px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; border: 1px solid var(--linha); }
.barra i { display: block; height: 100%; border-radius: 99px; background: var(--sucesso); }
.barra.rosa i { background: var(--destaque); }

/* números grandes */
.numero { font-family: var(--f-titulo); font-weight: var(--peso-titulo); font-size: 30px; line-height: 1.05; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini { border-radius: 16px; padding: 12px; }
.mini small { display: block; font-size: 12.5px; font-weight: 700; color: var(--texto2); }
.mini b { display: block; font-family: var(--f-titulo); font-weight: var(--peso-titulo); font-size: 20px; margin-top: 2px; }

/* atalhos (botões quadrados) */
.atalhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.atalho { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 12.5px; font-weight: 800; line-height: 1.15; color: var(--texto); }
.atalho .icone-redondo { width: 56px; height: 56px; border-radius: 18px; }
.atalho .icone-redondo svg { width: 26px; height: 26px; }

/* formulários */
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 800; font-size: 14px; }
.campo input, .campo select, .campo textarea {
  min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--linha);
  background: var(--superficie); color: var(--texto); font-size: 16px; width: 100%;
}
.campo textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.campo .ajuda { font-size: 12.5px; color: var(--texto2); }
.campo.erro input { border-color: var(--perigo); }
.campo .msg-erro { font-size: 13px; color: var(--perigo); font-weight: 700; }
.form { display: grid; gap: 14px; }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* interruptor */
.interruptor { position: relative; width: 52px; height: 30px; flex: none; }
.interruptor input { opacity: 0; width: 0; height: 0; position: absolute; }
.interruptor span { position: absolute; inset: 0; border-radius: 99px; background: var(--linha); transition: .2s; }
.interruptor span::before { content: ""; position: absolute; width: 24px; height: 24px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: .2s; }
.interruptor input:checked + span { background: var(--sucesso); }
.interruptor input:checked + span::before { transform: translateX(22px); }

/* caixa de seleção redonda (tarefas) */
.check { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--linha); display: grid; place-items: center; flex: none; background: var(--superficie); color: transparent; }
.check svg { width: 16px; height: 16px; }
.feito .check { background: var(--sucesso); border-color: var(--sucesso); color: var(--superficie); }
.feito .meio b { text-decoration: line-through; color: var(--texto2); }

/* folha que sobe de baixo (formulários e detalhes) */
.veu { position: fixed; inset: 0; z-index: 80; background: rgba(20, 10, 18, .45); display: flex; align-items: flex-end; justify-content: center; animation: aparece .18s; }
.folha { width: min(100%, 440px); max-height: 88vh; overflow: auto; background: var(--fundo); border-radius: 26px 26px 0 0; padding: 10px 16px calc(20px + env(safe-area-inset-bottom)); animation: sobe .22s ease-out; }
.folha .alca { width: 44px; height: 5px; border-radius: 99px; background: var(--linha); margin: 2px auto 12px; }
.folha h2 { font-family: var(--f-titulo); font-weight: var(--peso-titulo); font-size: 21px; margin-bottom: 12px; }
@keyframes sobe { from { transform: translateY(40px); opacity: .4; } }
@keyframes aparece { from { opacity: 0; } }

/* avisinho (toast) */
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 90; background: var(--texto); color: var(--fundo); padding: 12px 18px; border-radius: 14px; font-weight: 800; font-size: 14.5px; box-shadow: var(--sombra-forte); animation: aparece .2s; max-width: 90%; text-align: center; }

/* estados: vazio e erro */
.estado { text-align: center; padding: 34px 20px; display: grid; justify-items: center; gap: 10px; }
.estado .icone-redondo { width: 72px; height: 72px; border-radius: 24px; }
.estado .icone-redondo svg { width: 34px; height: 34px; }
.estado h3 { font-family: var(--f-titulo); font-weight: var(--peso-titulo); font-size: 19px; }
.estado p { color: var(--texto2); font-size: 14.5px; max-width: 290px; }
.estado .btn { max-width: 280px; margin-top: 6px; }

/* aviso simulado de notificação */
.notificacao { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--superficie); border: 1px solid var(--linha); box-shadow: var(--sombra-forte); }
.notificacao .icone-redondo { width: 38px; height: 38px; border-radius: 12px; }
.notificacao p { font-size: 14px; line-height: 1.3; flex: 1; }
.notificacao small { color: var(--texto2); font-size: 12px; }

/* sequência de etapas */
.etapas { display: grid; gap: 0; }
.etapa { display: flex; gap: 12px; align-items: flex-start; position: relative; padding-bottom: 14px; }
.etapa::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--linha); }
.etapa:last-child::before { display: none; }
.etapa .bolinha { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 2px solid var(--linha); background: var(--superficie); font-weight: 800; font-size: 13px; color: var(--texto2); z-index: 1; }
.etapa.ok .bolinha { background: var(--sucesso); border-color: var(--sucesso); color: var(--superficie); }
.etapa.agora .bolinha { background: var(--destaque); border-color: var(--destaque); color: var(--sobre-destaque); }
.etapa b { display: block; font-size: 15px; }
.etapa small { color: var(--texto2); font-size: 13px; }

/* mini trilho de etapas na lista */
.trilho { display: flex; gap: 3px; margin-top: 6px; }
.trilho i { flex: 1; height: 6px; border-radius: 99px; background: var(--linha); }
.trilho i.ok { background: var(--sucesso); }
.trilho i.agora { background: var(--destaque); }

/* produtos */
.grade-produtos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.produto { background: var(--superficie); border: 1px solid var(--linha); border-radius: 18px; overflow: hidden; box-shadow: var(--sombra); position: relative; }
.produto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--superficie-2); }
.produto .info { padding: 10px 12px 12px; }
.produto .info b { display: block; font-size: 14.5px; line-height: 1.25; }
.produto .info span { display: block; font-family: var(--f-titulo); font-weight: var(--peso-titulo); font-size: 17px; margin-top: 4px; color: var(--destaque-texto); }
.produto .selo-canto { position: absolute; top: 10px; left: 10px; }
.produto.esgotado img { filter: grayscale(.65) opacity(.7); }

/* conversa da IA */
.conversa { display: grid; gap: 12px; }
.bolha { max-width: 88%; padding: 12px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; white-space: pre-line; }
.bolha.ia { background: var(--superficie); border: 1px solid var(--linha); border-bottom-left-radius: 6px; }
.bolha.eu { background: var(--destaque); color: var(--sobre-destaque); margin-left: auto; border-bottom-right-radius: 6px; font-weight: 700; }
.bolha .acoes { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.digitando span { display: inline-block; width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; background: var(--texto2); animation: pula 1s infinite; }
.digitando span:nth-child(2) { animation-delay: .15s; } .digitando span:nth-child(3) { animation-delay: .3s; }
@keyframes pula { 50% { transform: translateY(-5px); opacity: .5; } }
.entrada-chat { position: fixed; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); width: min(100%, 440px); padding: 10px 12px; background: var(--fundo); border-top: 1px solid var(--linha); display: flex; gap: 8px; z-index: 35; }
.entrada-chat input { flex: 1; min-height: 50px; border-radius: 16px; border: 1.5px solid var(--linha); padding: 0 14px; background: var(--superficie); }
.entrada-chat button { width: 50px; height: 50px; border-radius: 16px; background: var(--destaque); color: var(--sobre-destaque); display: grid; place-items: center; }
.entrada-chat button svg { width: 22px; height: 22px; }

/* texto pronto (legenda, mensagem) */
.texto-pronto { background: var(--superficie-2); border-radius: 14px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; white-space: pre-line; border: 1px dashed var(--linha); }

/* pontos do desafio */
.dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dias span { aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--superficie-2); color: var(--texto2); border: 1.5px solid var(--linha); }
.dias span.ok { background: var(--sucesso); color: var(--superficie); border-color: var(--sucesso); }
.dias span.hoje { background: var(--destaque); color: var(--sobre-destaque); border-color: var(--destaque); }

/* medalhas */
.medalhas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.medalha { text-align: center; padding: 12px 6px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--linha); }
.medalha .emoji { font-size: 30px; line-height: 1.1; }
.medalha b { display: block; font-size: 12.5px; line-height: 1.2; margin-top: 4px; }
.medalha.bloqueada { opacity: .45; filter: grayscale(1); }

/* gráfico de barras simples */
.grafico { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 10px; }
.grafico div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; }
.grafico i { width: 100%; border-radius: 10px 10px 4px 4px; background: var(--destaque); display: block; }
.grafico i.parcial { background: repeating-linear-gradient(45deg, var(--destaque) 0 8px, var(--destaque-suave) 8px 16px); }
.grafico small { font-size: 12px; font-weight: 700; color: var(--texto2); }
.grafico em { font-style: normal; font-size: 12px; font-weight: 800; }

/* galeria de fotos */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.galeria img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 12px; }

/* painel de demonstração (só existe no protótipo) */
.demo-opcoes { display: grid; gap: 14px; }
.demo-opcoes .grupo { display: grid; gap: 8px; }
.demo-opcoes .grupo > b { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto2); }
.demo-opcoes .opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-opcoes button { min-height: 42px; padding: 8px 14px; border-radius: 12px; border: 1.5px solid var(--linha); background: var(--superficie); font-weight: 800; font-size: 14px; }
.demo-opcoes button.ativo { background: var(--destaque); color: var(--sobre-destaque); border-color: var(--destaque); }
.faixa-prototipo { font-size: 12px; font-weight: 800; text-align: center; padding: 6px; background: var(--amarelo-suave); color: var(--amarelo); }

/* área de toque confortável no celular (≈44px) sem mudar o desenho:
   uma "moldura invisível" em volta dos itens pequenos que a gente toca */
button.chip, a.chip, .interruptor, .titulo-secao a { position: relative; }
button.chip::after, a.chip::after { content: ""; position: absolute; inset: -9px -4px; }
.interruptor::after { content: ""; position: absolute; inset: -8px -4px; }
.titulo-secao a::after { content: ""; position: absolute; inset: -11px -6px; }

/* botão de falar (VOZ): círculo grande com microfone; pulsa enquanto ouve */
.voz-botao { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 10px 16px 10px 10px; border-radius: 22px; background: var(--superficie); border: 1.5px solid var(--linha); text-align: left; font-weight: 800; font-size: 16px; color: var(--texto); }
.voz-circulo { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--destaque); color: var(--sobre-destaque); box-shadow: 0 6px 16px rgba(160, 30, 100, .25); }
.voz-circulo svg { width: 28px; height: 28px; }
.voz-botao.ouvindo { border-color: var(--destaque-texto); }
.voz-botao.ouvindo .voz-circulo { animation: voz-pulsa 1.1s ease-in-out infinite; }
@keyframes voz-pulsa { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--destaque) 60%, transparent); } 50% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--destaque) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .voz-botao.ouvindo .voz-circulo { animation: none; outline: 4px solid var(--destaque-texto); } }
.campo-voz { min-height: 96px; font-size: 16px; line-height: 1.45; }

/* cartões que trocam de cor (no Candy Vibrante não fica nada branco): 1 rosado, 2 lilás, 3 menta, 4 pêssego, na ordem em que aparecem.
   Vale no app da aluna e no painel; o catálogo da cliente final continua com a cor da loja dela.
   Nos temas sem essas cores, continua a superfície normal. */
:is(.app, .painel) .cartao:not([class*="cor-"]):not(.suave) { background: var(--cartao-fundo, var(--superficie)); --cartao-fundo: var(--cartao-1); }
:is(.app, .painel) .cartao:not([class*="cor-"]):not(.suave):nth-child(4n+2) { --cartao-fundo: var(--cartao-2); }
:is(.app, .painel) .cartao:not([class*="cor-"]):not(.suave):nth-child(4n+3) { --cartao-fundo: var(--cartao-3); }
:is(.app, .painel) .cartao:not([class*="cor-"]):not(.suave):nth-child(4n+4) { --cartao-fundo: var(--cartao-4); }
.notificacao { background: var(--notif-fundo, var(--superficie)); }

/* QUADROS: blocos coloridos de 2 em 2 (Meu Dia). Cada quadro é um atalho com ícone, título, número e uma linha. */
.quadros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.quadro { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 152px; padding: 14px;
  border-radius: 24px; background: var(--q, var(--destaque-suave)); color: var(--texto); box-shadow: var(--sombra); text-align: left; }
.quadro::after { content: ""; position: absolute; right: -36px; bottom: -36px; width: 116px; height: 116px; border-radius: 50%; background: var(--q-bolha, rgba(255, 255, 255, .38)); z-index: -1; }
.quadro::before { content: ""; position: absolute; right: 26px; top: -22px; width: 54px; height: 54px; border-radius: 50%; background: var(--q-bolha, rgba(255, 255, 255, .28)); z-index: -1; }
.quadro.largo { grid-column: 1 / -1; min-height: 0; }
.quadro:active { transform: scale(.98); }
.q-icone { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--q-icone-fundo, rgba(255, 255, 255, .72)); color: var(--destaque-texto); margin-bottom: 6px; font-size: 24px; }
.q-icone svg { width: 22px; height: 22px; }
.q-rot { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rotulo-cor, var(--texto2)); }
.q-num { font-family: var(--f-titulo); font-weight: var(--peso-titulo); font-size: 22px; line-height: 1.12; }
.quadro.largo .q-num { font-size: 19px; }
.q-txt { font-size: 13px; font-weight: 700; color: var(--texto2); line-height: 1.32; }
.q-barra { margin-top: auto; width: 100%; height: 10px; border-radius: 99px; background: var(--q-icone-fundo, rgba(255, 255, 255, .72)); overflow: hidden; }
.q-barra i { display: block; height: 100%; border-radius: 99px; background: var(--destaque-texto); }
.q-acao { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 99px; font-weight: 800; font-size: 14px; background: var(--destaque); color: var(--sobre-destaque); }
.q-acao svg { width: 18px; height: 18px; }
.q-ponto { position: absolute; top: 12px; right: 12px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 99px; display: grid; place-items: center; font-size: 13px; font-weight: 900; background: var(--perigo); color: var(--superficie); }
.q-rosa { --q: var(--q-rosa, var(--destaque-suave)); } .q-lilas { --q: var(--q-lilas, var(--lavanda-suave)); } .q-menta { --q: var(--q-menta, var(--sucesso-suave)); }
.q-pessego { --q: var(--q-pessego, var(--alerta-suave)); } .q-azul { --q: var(--q-azul, var(--info-suave)); } .q-amarelo { --q: var(--q-amarelo, var(--amarelo-suave)); }
[data-modo="escuro"] .quadro { --q-bolha: rgba(255, 255, 255, .07); }

/* QUADROS DE 3 EM 3 (Meu Dia, pedido da Cátia: "três quadros, um do lado do outro, para diminuir a informação").
   Cada quadrinho mostra só o ícone, o nome e um número; os detalhes ficam na tela que ele abre. */
.quadros.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.quadro.mini { min-height: 0; aspect-ratio: 1 / 1.08; padding: 10px 8px; border-radius: 20px; align-items: center; justify-content: center; text-align: center; gap: 1px; }
.quadro.mini::after { width: 70px; height: 70px; right: -24px; bottom: -24px; }
.quadro.mini::before { width: 34px; height: 34px; right: 12px; top: -14px; }
.quadro.mini .q-icone { width: 40px; height: 40px; border-radius: 13px; margin-bottom: 5px; font-size: 22px; }
.quadro.mini .q-icone svg { width: 21px; height: 21px; }
.q-nome { font-size: 12.5px; font-weight: 800; line-height: 1.15; color: var(--texto2); overflow-wrap: anywhere; }
.quadro.mini .q-num { font-size: 18px; line-height: 1.1; overflow-wrap: anywhere; }
.quadro.mini .q-ponto { top: 7px; right: 7px; min-width: 22px; height: 22px; font-size: 12px; padding: 0 5px; }
.q-icone.q-emoji { color: var(--texto); }   /* emoji no lugar do ícone: a cor do texto garante o contraste */

/* QUADROS CALMOS (pedido da Cátia, 03/10: "o colorido deixa as vistas cansadas"):
   todos os quadros da mesma cor, e só um DETALHE colorido diferencia um do outro.
   a = o quadradinho do ícone colorido · b = uma faixinha colorida no alto · c = fundo rosinha e o desenho do ícone colorido */
:root { --q-unico: #FFF8FB; --q-borda: #F4CFE0; --q-unico-c: #FFD9E8; }
[data-modo="escuro"] { --q-unico: #2C1631; --q-borda: #4E2A55; --q-unico-c: #3A1D40; }
.q-rosa { --q-forte: #D23A74; } .q-lilas { --q-forte: #7653D1; } .q-menta { --q-forte: #17936A; }
.q-pessego { --q-forte: #D06A1E; } .q-azul { --q-forte: #2A76CF; } .q-amarelo { --q-forte: #A9850A; }
[data-modo="escuro"] .q-rosa { --q-forte: #FF8DB9; } [data-modo="escuro"] .q-lilas { --q-forte: #C2AEFF; } [data-modo="escuro"] .q-menta { --q-forte: #7FE0B8; }
[data-modo="escuro"] .q-pessego { --q-forte: #FFB27A; } [data-modo="escuro"] .q-azul { --q-forte: #8CC2FF; } [data-modo="escuro"] .q-amarelo { --q-forte: #F2D35C; }
[data-quadros] .quadro { background: var(--q-unico); box-shadow: 0 1px 0 var(--q-borda), 0 4px 14px rgba(150, 60, 100, .08); border: 1.5px solid var(--q-borda); }
[data-quadros] .quadro::before, [data-quadros] .quadro::after { display: none; }
[data-quadros="a"] .quadro .q-icone { background: var(--q); color: var(--destaque-texto); }
[data-quadros="b"] .quadro { border-top: 7px solid var(--q-forte); }
[data-quadros="b"] .quadro .q-icone { background: var(--fundo-app); color: var(--q-forte); }
[data-quadros="c"] .quadro { background: var(--q-unico-c); border-color: transparent; }
[data-quadros="c"] .quadro .q-icone { background: var(--superficie); color: var(--q-forte); }
[data-quadros] .q-icone.q-emoji { color: var(--texto); }
/* os cartões também deixam de mudar de cor (rosa, lilás, menta, pêssego) e ficam todos iguais */
[data-quadros] :is(.app, .painel) .cartao:not([class*="cor-"]):not(.suave):nth-child(n) { --cartao-fundo: var(--q-unico); }
.titulo-bloco { font-family: var(--f-titulo); font-weight: var(--peso-titulo); font-size: 18px; line-height: 1.2; }   /* título de cada bloco (menu Mais) */

/* relatório dia a dia (Encomendas): tabela simples, números alinhados */
.rel-tabela { display: grid; border-top: 1.5px solid var(--linha); font-variant-numeric: tabular-nums; }
.rel-tabela > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr); gap: 8px; padding: 8px 2px; border-bottom: 1.5px solid var(--linha); font-size: 14px; align-items: center; }
.rel-tabela > div span:not(:first-child) { text-align: right; font-weight: 700; }
.rel-tabela small { display: block; color: var(--texto2); font-weight: 700; font-size: 12px; }
.rel-tabela .rel-cab { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--rotulo-cor, var(--texto2)); }
.rel-tabela .rel-total { font-weight: 800; border-bottom: 0; }

/* FICHA DA CLIENTE (Encomendas) e telas "formais": fundo branco, linhas finas, poucos detalhes coloridos (pedido da Cátia, 02/10) */
.folha.formal { background: var(--superficie); }
.fc { display: grid; gap: 4px; }
.fc-cab { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
.fc-sigla { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 800; border: 2px solid var(--destaque); color: var(--destaque-texto); background: var(--superficie); }
.fc-nome { display: block; font-size: 18px; font-family: var(--f-titulo); font-weight: var(--peso-titulo); }
.fc-tel { display: block; font-size: 14px; color: var(--texto2); font-weight: 700; }
.fc-pag { display: grid; gap: 2px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--linha); border-left: 4px solid var(--alerta); border-radius: 12px; background: var(--superficie); }
.fc-pag.quitado { border-left-color: var(--sucesso); }
.fc-pag b { font-family: var(--f-titulo); font-size: 24px; font-variant-numeric: tabular-nums; }
.fc-pag.devendo b { color: var(--perigo); } .fc-pag.quitado b { color: var(--sucesso); }
.fc-pag small { color: var(--texto2); font-weight: 700; }
.fc-rot, .fc-titulo { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texto2); }
.fc-titulo { margin: 16px 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--linha); }
.fc-dados { display: grid; margin: 0; }
.fc-dados div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--linha); font-size: 14.5px; }
.fc-dados dt { color: var(--texto2); font-weight: 700; } .fc-dados dd { margin: 0; text-align: right; font-weight: 700; }
.fc-itens { display: grid; }
.fc-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px dashed var(--linha); }
.fc-item > img, .fc-sem-foto { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; border: 1px solid var(--linha); }
.fc-sem-foto { display: grid; place-items: center; color: var(--texto2); background: var(--superficie-2); }
.fc-item b { display: block; font-size: 15px; line-height: 1.3; } .fc-item small { display: block; color: var(--texto2); font-weight: 700; font-size: 13px; margin-top: 2px; }
.fc-valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* tela inteira branca e formal (Detalhe da encomenda) */
.app.tela-branca { background: var(--superficie); }
.tela-branca .cartao, .tela-branca .cartao.suave { background: var(--superficie) !important; border: 1px solid var(--linha); box-shadow: none; }

/* 🎤 pequeno dentro dos campos de digitar (App.microfones) */
.voz-campo { position: relative; display: block; min-width: 0; }
.voz-campo > input, .voz-campo > textarea { width: 100%; padding-right: 50px !important; }
.voz-mini { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--destaque-texto); background: transparent; z-index: 1; }
.voz-campo.area .voz-mini { top: 6px; transform: none; }
.voz-mini svg { width: 20px; height: 20px; }
.voz-mini.ouvindo { background: var(--destaque); color: var(--sobre-destaque); animation: voz-pulsa 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .voz-mini.ouvindo { animation: none; } }

/* A Cátia no ateliê dela: o botão que volta ao Painel (aparece só quando ela entrou pelo "🧵 Meu ateliê") */
.chip-painel { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px; border-radius: 99px; flex: none;
  background: var(--superficie); color: var(--destaque-texto); border: 1.5px solid var(--linha); font-size: 13px; font-weight: 800; white-space: nowrap; text-decoration: none; }

/* 🛒 lista de compras do ateliê (Materiais → Comprar): o quadradinho de marcar e o item já comprado riscado */
.lc-check { width: 44px; height: 44px; flex: none; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--texto); cursor: pointer; border-radius: 12px; }
.lc-check:focus-visible { outline: 3px solid var(--destaque); }
.lc-feito b { text-decoration: line-through; color: var(--texto2); }

/* botões de escolha (os mesmos da vitrine), usados também no perfil de Reels */
.v-escolhas { display: flex; flex-wrap: wrap; gap: 8px; }
.v-escolhas button { min-height: 44px; padding: 8px 14px; border-radius: 14px; border: 1.5px solid var(--linha); background: var(--superficie); color: var(--texto); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.v-escolhas button.ativo { border-color: var(--destaque-texto); background: var(--destaque-suave); color: var(--destaque-texto); }