:root {
    --fundo: #f4f5f3;
    --cartao: #ffffff;
    --texto: #1c1f1d;
    --texto-2: #5d645f;
    --texto-3: #8a918c;
    --borda: #e2e5e1;
    --tema: #15803d;
    --tema-forte: #116632;
    --tema-suave: #e7f5ec;
    --tema-borda: #b9e0c6;
    --marca-cor: #a9824f; /* dourado do "Fit" da logo, igual em todas as telas */
    --marca-texto: #1f1d1a; /* quase preto do "Rotina" da logo */
    --laranja: #a85207;
    --laranja-suave: #fff5e6;
    --laranja-borda: #f3d3a3;
    --vermelho: #b91c1c;
    --vermelho-suave: #fdeeee;
    --vermelho-borda: #f4c4c4;
    --raio: 14px;
    --sombra: 0 1px 2px rgba(20, 30, 25, .05), 0 6px 18px rgba(20, 30, 25, .05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: only light; }
body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--tema); }
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .75rem; }

/* Sem setinhas em campos numéricos */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* ───── Estrutura ───── */
.topo {
    background: var(--cartao);
    border-bottom: 1px solid var(--borda);
    position: sticky; top: 0; z-index: 10;
}
.topo-in {
    max-width: 720px; margin: 0 auto; padding: 5px 16px; /* barra fina (a dona achou a de 63 px larga demais) */
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.topo nav { display: flex; gap: 6px; align-items: center; }
.container { max-width: 720px; margin: 0 auto; padding: 18px 16px 48px; }
.rodape { text-align: center; color: var(--texto-3); font-size: .8rem; padding: 0 16px 32px; }

.cartao {
    background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: 18px; margin-bottom: 14px;
}
.cartao-centro { max-width: 420px; margin: 24px auto; }
/* Marca "Rotina Fit" — "Rotina" quase preto e "Fit" dourado, letras em traço (SVG em auth/_marca.blade.php). */
/* Tamanho discreto (pedido da dona: "não vai colocar ela gigante"). */
.marca-login { margin: 16px 0 20px; line-height: 0; } /* espaço em cima: a dona achou grudada na borda */
.marca-login svg { display: block; width: 100%; max-width: 160px; height: auto; margin: 0 auto; }
.marca-login .letras { stroke: var(--marca-texto); }
.marca-login .letras .destaque { stroke: var(--marca-cor); }
.marca-login .pingo { fill: var(--marca-texto); }
.marca-login .pingo.destaque { fill: var(--marca-cor); }
/* No topo do site: a mesma logo, pequena e discreta. */
.marca-login.marca-topo { display: block; margin: 0 0 0 auto; } /* sempre do lado direito da barra */
.marca-login.marca-topo svg { width: auto; height: 17px; max-width: none; margin: 0; }
/* Início: logo à esquerda e engrenagem à direita (o menu dela abre para dentro da tela). */
.marca-login.marca-topo.marca-esquerda { margin: 0; }
.topo-icones-direita { margin-left: auto; }
.topo-icones-direita .menu-engrenagem-lista { left: auto; right: 0; }
.login-acao { text-align: center; }
.login-acao .btn { min-width: 160px; }
.login-titulo { text-align: center; font-size: 1.15rem; margin: -4px 0 14px; }
.feito.manter-conectado .txt, .feito.manter-conectado input:checked ~ .txt { color: var(--texto); }
/* Login: só a logo e o botão Entrar ficam laranja; foco dos campos, caixinha e link em cinza (pedido da dona). */
.login-cartao .campo input:focus { outline-color: var(--borda); border-color: var(--texto-3); }
.login-cartao .feito input:checked + .marca-feito { background: var(--texto-2); border-color: var(--texto-2); }
.login-cartao p a { color: var(--texto-2); }
.sub { color: var(--texto-2); font-size: .92rem; }
.sub.acesso-vale { font-size: .74rem; } /* 20% menor que o .sub (a dona achou grande) */
.pequeno { font-size: .85rem; color: var(--texto-2); }

/* ───── Botões ───── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 10px 18px; border-radius: 12px; border: 1px solid transparent;
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s;
}
.btn-primario { background: var(--tema); color: #fff; }
.btn-primario:hover { background: var(--tema-forte); }
.btn-suave { background: var(--tema-suave); color: var(--tema-forte); border-color: var(--tema-borda); }
.btn-suave:hover { filter: brightness(.97); }
.btn-neutro { background: var(--cartao); color: var(--texto); border-color: var(--borda); }
.btn-neutro:hover { background: #f0f2ef; }
.btn-link { background: none; border: none; color: var(--texto-2); padding: 8px 10px; min-height: 0; font-weight: 500; }
.btn-bloco { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }

.acoes {
    display: flex; gap: 10px; justify-content: space-between; align-items: center;
    margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--borda);
}
.acoes .btn-primario { flex: 1; max-width: 280px; margin-left: auto; }

/* ───── Formulários ───── */
.campo { margin-bottom: 16px; }
.campo > label, .rotulo { display: block; font-weight: 600; margin-bottom: 6px; }
.campo input[type=text], .campo input[type=email], .campo input[type=password],
.campo input[type=number], .campo input[type=date] {
    width: 100%; min-height: 46px; padding: 10px 12px; font: inherit; font-size: 16px;
    border: 1px solid var(--borda); border-radius: 10px; background: #fff; color: var(--texto);
}
.campo input:focus { outline: 2px solid var(--tema-borda); border-color: var(--tema); }
.campo .ajuda { font-size: .82rem; color: var(--texto-3); margin-top: 4px; }
.linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.erro-campo { color: var(--vermelho); font-size: .85rem; margin-top: 4px; }
.campo-com-unidade { position: relative; }
.campo-com-unidade span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; }
.campo-com-unidade input { padding-right: 44px !important; }

/* Cartões de opção (rádio/checkbox) */
.opcoes { display: grid; gap: 10px; grid-template-columns: 1fr; }
.opcoes.duas { grid-template-columns: 1fr 1fr; }
.opcao { position: relative; display: block; cursor: pointer; }
.opcao input { position: absolute; opacity: 0; pointer-events: none; }
.opcao { height: 100%; }
.opcao .caixa {
    height: 100%;
    display: block; border: 1.5px solid var(--borda); border-radius: 12px; padding: 12px 14px; background: #fff;
    transition: border-color .15s, background .15s;
}
.opcao .caixa strong { display: block; }
.opcao .caixa small { display: block; color: var(--texto-2); font-size: .85rem; }
.opcao input:checked + .caixa { border-color: var(--tema); background: var(--tema-suave); }
.opcao input:focus-visible + .caixa { outline: 2px solid var(--tema-borda); }

.pilulas { display: flex; flex-wrap: wrap; gap: 8px; }
.pilula { position: relative; cursor: pointer; }
.pilula input { position: absolute; opacity: 0; pointer-events: none; }
.pilula span {
    display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 42px; padding: 8px 14px;
    border: 1.5px solid var(--borda); border-radius: 999px; background: #fff; font-weight: 600;
}
.pilula input:checked + span { border-color: var(--tema); background: var(--tema-suave); color: var(--tema-forte); }

/* Perguntas sim/não */
.pergunta { padding: 12px 0; border-bottom: 1px solid var(--borda); }
.pergunta:last-child { border-bottom: none; }
.pergunta p { margin-bottom: 8px; }
.pergunta .pilulas span { min-width: 72px; }

/* Limitações */
.grupo-lim { margin-bottom: 14px; }
.grupo-lim h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); margin: 0 0 6px; }
.lim { border: 1.5px solid var(--borda); border-radius: 12px; background: #fff; margin-bottom: 8px; }
.lim > label { display: flex; gap: 10px; align-items: center; padding: 12px 14px; cursor: pointer; }
.lim > label input { width: 20px; height: 20px; accent-color: var(--tema); flex: none; }
.lim.marcada { border-color: var(--tema); background: var(--tema-suave); }
.lim .extra { display: none; padding: 0 14px 12px 44px; }
.lim.marcada .extra { display: block; }
.lim.desativada { opacity: .45; }
.lim.desativada > label { cursor: not-allowed; }
.dor input[type=range] { width: 100%; accent-color: var(--tema); }
.dor .escala { display: flex; justify-content: space-between; font-size: .78rem; color: var(--texto-2); }

/* Progresso */
.progresso { margin-bottom: 16px; }
.progresso .barras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.progresso .barras i { height: 6px; border-radius: 99px; background: var(--borda); }
.progresso .barras i.on { background: var(--tema); }
.progresso small { color: var(--texto-2); }

/* Avisos */
.aviso, .erro, .sucesso { border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-size: .95rem; border: 1px solid; }
.aviso { background: var(--laranja-suave); border-color: var(--laranja-borda); color: #6b3a07; }
.erro { background: var(--vermelho-suave); border-color: var(--vermelho-borda); color: #7f1d1d; }
.sucesso { background: var(--tema-suave); border-color: var(--tema-borda); color: var(--tema-forte); }
.erro ul { margin: 4px 0 0; padding-left: 18px; }
.oculto { display: none !important; }

/* ───── Início ───── */
.menu-inicio { display: grid; gap: 12px; }
.atalho {
    display: flex; gap: 14px; align-items: center; padding: 16px; text-decoration: none; color: var(--texto);
    background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
}
.atalho:hover { border-color: var(--tema-borda); }
.atalho .icone { width: 46px; height: 46px; border-radius: 12px; background: var(--tema-suave); color: var(--tema); display: grid; place-items: center; flex: none; }
.atalho .icone svg { width: 24px; height: 24px; }
.atalho strong { display: block; }
.atalho small { color: var(--texto-2); }
.atalho.em-breve { opacity: .55; pointer-events: none; }
.selo { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #eef0ed; color: var(--texto-2); margin-left: 6px; vertical-align: middle; }

/* ───── Ficha ───── */
.ficha-topo { margin-bottom: 12px; }
.ficha-topo h1 { margin: 0; text-align: center; }
.ficha-atalhos { display: flex; gap: 8px; margin-top: 10px; }
.ficha-atalhos .btn { min-height: 36px; padding: 6px 12px; font-size: .88rem; gap: 6px; }
.ficha-atalhos .btn svg { width: 16px; height: 16px; }
.ficha-atalhos .btn.ativa { background: var(--tema-suave); border-color: var(--tema); color: var(--tema-forte); } /* "Obs." aberto */
.ficha-topo .sub { margin: 0; }
.abas {
    display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; margin-bottom: 8px;
    scrollbar-width: none; position: sticky; top: 43px; background: var(--fundo); z-index: 5; /* logo abaixo da barra do topo (47–49 px) */
}
.abas::-webkit-scrollbar { display: none; }
.aba {
    flex: none; border: 1.5px solid var(--borda); background: #fff; color: var(--texto); border-radius: 999px;
    padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.aba small { font-weight: 500; color: var(--texto-2); margin-left: 4px; }
.aba.ativa { background: var(--tema); border-color: var(--tema); color: #fff; }
.aba.ativa small { color: rgba(255, 255, 255, .8); }
.aba .ponto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; margin-left: 6px; vertical-align: middle; }
.painel { display: none; }
.painel.ativo { display: block; }

.dia-cabecalho { margin: 6px 0 14px; }
.dia-cabecalho h2 { margin-bottom: 2px; }
.progresso-dia { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.progresso-dia .barra { flex: 1; height: 8px; border-radius: 99px; background: var(--borda); overflow: hidden; }
.progresso-dia .barra i { display: block; height: 100%; border-radius: 99px; background: var(--tema); transition: width .2s; }
.progresso-dia small { font-weight: 600; color: var(--texto-2); white-space: nowrap; }
.chip { display: inline-block; font-size: .8rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: #eef0ed; color: var(--texto-2); }

.bloco { margin-bottom: 22px; }
.bloco-titulo { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 10px; }
.bloco-titulo h3 { margin: 0; }
.bloco-titulo span { font-size: .82rem; color: var(--texto-3); }

.exercicio { padding: 0; overflow: hidden; }
.exercicio .corpo { padding: 14px 16px 16px; }
.exercicio .cabeca { display: flex; gap: 12px; align-items: flex-start; }
.exercicio .num {
    flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--tema-suave); color: var(--tema-forte);
    display: grid; place-items: center; font-weight: 700; font-size: .85rem;
}
.exercicio h4 { margin: 2px 0 4px; font-size: 1.05rem; }
.exercicio .grupo { font-size: .78rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; }
.prescricao { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.prescricao .chip { font-size: .85rem; }
.prescricao .chip.forte { background: var(--tema); color: #fff; font-size: .9rem; padding: 5px 12px; }
.passos { margin: 0 0 12px; padding-left: 20px; }
.passos li { margin-bottom: 4px; }
.cuidado { background: var(--laranja-suave); border: 1px solid var(--laranja-borda); color: #6b3a07; border-radius: 10px; padding: 8px 12px; font-size: .9rem; margin-bottom: 8px; }
.nota { background: #f1f4f2; border: 1px solid var(--borda); color: var(--texto); border-radius: 10px; padding: 8px 12px; font-size: .9rem; margin-bottom: 8px; }
.exercicio .rodape-ex { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 12px; }

.figura { background: #f1f3f0; border-bottom: 1px solid var(--borda); display: grid; place-items: center; aspect-ratio: 16 / 9; max-height: 240px; width: 100%; }
.figura img { width: 100%; height: 100%; object-fit: contain; }
.figura .vazia { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--texto-3); font-size: .8rem; }
.figura .vazia svg { width: 64px; height: 64px; }

.feito { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-weight: 600; color: var(--texto-2); }
.feito input { position: absolute; opacity: 0; pointer-events: none; }
.feito .marca-feito { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--borda); display: grid; place-items: center; background: #fff; }
.feito .marca-feito svg { width: 16px; height: 16px; color: #fff; opacity: 0; }
.feito input:checked + .marca-feito { background: var(--tema); border-color: var(--tema); }
.feito input:checked + .marca-feito svg { opacity: 1; }
.feito input:checked ~ .txt { color: var(--tema-forte); }
.exercicio.concluido { border-color: var(--tema-borda); }
.exercicio.concluido h4 { color: var(--tema-forte); }

/* Ficha: um exercício por vez (pedido da dona, 07/10/2026). Setinhas embaixo; na impressão aparecem todos. */
.carrossel { scroll-margin-top: 104px; } /* barra do topo + abas dos dias, que grudam em cima */
.carrossel .exercicio { display: none; }
.carrossel .exercicio.atual { display: block; animation: carrossel-entra .18s ease-out; }
.carrossel .exercicio.atual.volta { animation-name: carrossel-volta; }
@keyframes carrossel-entra { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes carrossel-volta { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.carrossel-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 18px; }
.carrossel-seta { width: 52px; min-width: 52px; height: 48px; padding: 0; }
.carrossel-seta svg { width: 22px; height: 22px; }
/* Mais destaque, na cor da pessoa (pedido da dona): voltar = cor clarinha, avançar = cor forte. */
.carrossel-seta[data-carrossel-ir="-1"] { background: var(--tema-suave); border-color: var(--tema-borda); color: var(--tema-forte); }
.carrossel-seta[data-carrossel-ir="1"] { background: var(--tema); border-color: var(--tema); color: #fff; }
.carrossel-seta[data-carrossel-ir="1"]:hover { background: var(--tema-forte); }
.carrossel-seta:disabled { opacity: .35; cursor: default; }
.carrossel-pos { font-weight: 700; color: var(--texto-2); }
@media print { .carrossel .exercicio { display: block !important; animation: none !important; } }

.item-simples { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.item-simples:last-child { border-bottom: none; }
.item-simples details { flex: 1; }
.item-simples summary { cursor: pointer; font-weight: 600; list-style: none; }
.item-simples summary::-webkit-details-marker { display: none; }
.item-simples summary::after { content: " +"; color: var(--texto-3); font-weight: 500; }
.item-simples details[open] summary::after { content: " −"; }
.item-simples .qtd { color: var(--texto-2); font-size: .9rem; white-space: nowrap; }
.item-simples ol { margin: 8px 0 4px; padding-left: 20px; font-size: .92rem; }

.semana-lista .linha { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.semana-lista .linha:last-child { border-bottom: none; }
.semana-lista .dia { width: 76px; flex: none; font-weight: 700; }
.semana-lista .linha.treino .ativ { color: var(--tema-forte); font-weight: 600; }
.lista-simples { margin: 0; padding-left: 20px; }
.lista-simples li { margin-bottom: 6px; }

/* ───── Impressão / PDF ───── */
.so-impressao { display: none; }
@media print {
    @page { margin: 12mm; }
    body { background: #fff; font-size: 11pt; }
    .topo, .abas, .nao-imprimir, .rodape-ex, .rodape { display: none !important; }
    .so-impressao { display: block; }
    .container { max-width: none; padding: 0; }
    .painel { display: block !important; break-before: page; }
    .painel:first-of-type { break-before: auto; }
    .cartao { box-shadow: none; break-inside: avoid; }
    .figura { max-height: 140px; }
    a { color: inherit; text-decoration: none; }
}

@media (min-width: 640px) {
    .opcoes.tres { grid-template-columns: 1fr 1fr; }
    .container { padding-top: 26px; }
}

/* ───── Escolha de cor ───── */
.cores { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.cor-opcao { position: relative; cursor: pointer; text-align: center; font-size: .85rem; font-weight: 600; color: var(--texto-2); }
.cor-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.cor-opcao .bolinha {
    display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 4px; border-radius: 50%;
    background: var(--c); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--borda); transition: box-shadow .15s;
}
.cor-opcao .bolinha svg { width: 22px; height: 22px; color: #fff; opacity: 0; }
.cor-opcao input:checked + .bolinha { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c); }
.cor-opcao input:checked + .bolinha svg { opacity: 1; }
.cor-opcao input:checked ~ span { color: var(--texto); }
.cor-opcao input:focus-visible + .bolinha { outline: 2px solid var(--texto); outline-offset: 4px; }

/* Fotos de início e fim do movimento */
.figura.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; aspect-ratio: auto; max-height: none; background: var(--borda); }
.figura figure { margin: 0; position: relative; background: #fff; }
.figura figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.figura figcaption {
    position: absolute; left: 8px; top: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .03em;
    background: rgba(255, 255, 255, .92); color: var(--texto-2); padding: 2px 8px; border-radius: 99px;
}
@media print { .figura.dupla figure img { max-height: 130px; } }

/* Entrar com Google */
.btn-google { background: #fff; color: #1f1f1f; border-color: #c9ccd1; font-weight: 600; }
.btn-google:hover { background: #f6f7f8; }
.btn-google svg { width: 20px; height: 20px; }
.divisor { display: flex; align-items: center; gap: 10px; color: var(--texto-3); font-size: .85rem; margin: 16px 0; }
.divisor::before, .divisor::after { content: ""; flex: 1; height: 1px; background: var(--borda); }

.grupo-equip { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); margin: 16px 0 8px; }
.opcao .caixa strong { font-weight: 600; }

/* Etapa do exercício na lista única (aquecimento, treino, aeróbio, alongamento) */
.etiqueta-etapa {
    display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 1px 7px; border-radius: 99px; margin-right: 4px; background: var(--tema-suave); color: var(--tema-forte);
}
.etapa-aquecimento .etiqueta-etapa, .etapa-alongamento .etiqueta-etapa { background: #eef0ed; color: var(--texto-2); }
.etapa-aquecimento .num, .etapa-alongamento .num { background: #eef0ed; color: var(--texto-2); }

/* Foco do dia e alimentação */
.foco-dia { margin: 0; font-size: .92rem; color: var(--texto-2); }
.chip.destaque { background: var(--tema-suave); color: var(--tema-forte); }
/* Coração do "Amei" e de Minhas receitas: na cor que a pessoa escolheu (no lugar do ❤️ vermelho). */
.coracao { width: 1.05em; height: 1.05em; vertical-align: -.16em; margin-right: .3em; color: var(--tema); flex: none; }
.btn .coracao, .pilula-link .coracao { margin-right: 0; }
.nutricao .suplemento { border-top: 1px solid var(--borda); padding-top: 12px; margin-top: 12px; }
.nutricao h4 { margin: 0 0 6px; font-size: 1rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nutricao .dica { background: var(--tema-suave); color: var(--tema-forte); border-radius: 10px; padding: 8px 12px; font-size: .9rem; font-weight: 600; }

/* ───── Receitas e lista de mercado ───── */
.submenu { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 4px 0 14px; padding-bottom: 2px; }
.submenu::-webkit-scrollbar { display: none; }
/* As três abas (Receitas, Tenho em casa, Lista de mercado) cabem numa linha no celular e dividem a largura. */
.submenu a {
    flex: 1 0 auto; text-align: center; white-space: nowrap; text-decoration: none; color: var(--texto-2); font-weight: 600; font-size: .88rem;
    padding: 8px 10px; border-radius: 999px; border: 1.5px solid var(--borda); background: #fff;
}
@media (max-width: 360px) { .submenu a { font-size: .82rem; padding: 8px 8px; } }
.submenu a.ativo { background: var(--tema); border-color: var(--tema); color: #fff; }
/* Abas com um texto pequeno embaixo ("Tenho em casa (ingredientes)"): todas na mesma altura, texto no meio. */
.submenu a { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.submenu .aba-sub { font-size: .68rem; font-weight: 500; opacity: .85; }

.filtros { margin-bottom: 14px; }
.pilula-link {
    display: inline-flex; align-items: center; min-height: 38px; padding: 6px 14px; border-radius: 999px;
    border: 1.5px solid var(--borda); background: #fff; color: var(--texto); font: inherit; font-weight: 600; font-size: .9rem;
    text-decoration: none; cursor: pointer;
}
.pilula-link.ativo { border-color: var(--tema); background: var(--tema-suave); color: var(--tema-forte); }
/* Caixa "Categoria da receita": botão que abre uma lista de opções com marcação (várias ao mesmo tempo). */
.seletor { position: relative; margin-top: 10px; }
.seletor-form { margin-top: 0; } /* dentro de formulário: já tem o rótulo em cima */
.seletor-botao {
    width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px;
    padding: 10px 12px; font: inherit; font-size: 16px; font-weight: 600; text-align: left; color: var(--texto);
    background: #fff; border: 1px solid var(--borda); border-radius: 10px; cursor: pointer;
}
.seletor-botao .valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tema-forte); }
.seletor-botao .valor.vazio { color: var(--texto-2); font-weight: 400; }
.seletor-botao svg { flex: none; width: 20px; height: 20px; color: var(--texto-2); transition: transform .2s; }
.seletor.aberto .seletor-botao { border-color: var(--tema); }
.seletor.aberto .seletor-botao svg { transform: rotate(180deg); }
.seletor-painel {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; padding: 6px;
    background: #fff; border: 1px solid var(--borda); border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}
.seletor-painel hr { border: 0; border-top: 1px solid var(--borda); margin: 4px 8px; }
.seletor-opcao { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 8px; font-weight: 600; cursor: pointer; }
.seletor-opcao:hover { background: var(--fundo); }
.seletor-opcao input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--tema); }
.seletor-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 4px 2px; margin-top: 4px; border-top: 1px solid var(--borda); }
.seletor-rodape .btn-primario { min-height: 40px; padding: 8px 18px; }
.campo.busca { margin: 0; }
.campo.busca input { width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 16px; border: 1px solid var(--borda); border-radius: 10px; background: #fff; -webkit-appearance: none; appearance: none; }

.receita-cartao { display: block; text-decoration: none; color: var(--texto); }
.receita-cartao:hover { border-color: var(--tema-borda); }
.receita-topo { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.receita-topo h3 { margin: 0 0 4px; }
.receita-topo .chip { flex: none; white-space: nowrap; }
.receita-meta { margin: 0; font-size: .9rem; color: var(--texto-2); }
.falta { color: var(--vermelho); }
.receita-cartao .falta { margin: 8px 0 0; }
/* "Minhas receitas": foto do prato (opcional) no formulário; o input de arquivo fica escondido atrás do botão 📷 */
/* "!important" vence o ".campo input[type=file]" (largura 100%) do gestor de músicas, que fazia a página rolar para o lado */
.input-escondido {
    position: absolute !important; left: 0; top: 0; width: 1px !important; height: 1px !important; padding: 0 !important;
    border: 0 !important; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none;
}
label:has(> .input-escondido) { position: relative; }
.foto-receita-previa { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; margin-bottom: 8px; background: #eef0ed; }
.foto-receita-previa.oculto { display: none; }
.foto-receita-previa.apagada { opacity: .3; }
.foto-receita-tirar { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 500; color: var(--vermelho); }
.foto-receita-tirar input { width: 20px; height: 20px; accent-color: var(--vermelho); }
/* "Minhas receitas": abas "Que eu adicionei" / "Que eu amei" */
.minhas-abas { display: flex; gap: 8px; margin-bottom: 12px; }
.minhas-abas .pilula-link { flex: 1; justify-content: center; gap: 6px; white-space: nowrap; }
.minhas-abas small { font-weight: 700; color: var(--texto-3); }
.minhas-abas .ativo small { color: var(--tema-forte); }
.campo-tempo { max-width: 240px; }

.voltar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--texto); margin-bottom: 6px; }
.voltar:hover { background: #eceeeb; }
.voltar svg { width: 24px; height: 24px; }
.macros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 10px; }
.macros div { background: var(--tema-suave); border-radius: 12px; padding: 10px 6px; text-align: center; }
.macros strong { display: block; font-size: 1.05rem; color: var(--tema-forte); }
.macros span { font-size: .75rem; color: var(--texto-2); }
.ingredientes { list-style: none; margin: 0 0 8px; padding: 0; }
.ingredientes li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borda); }
.ingredientes li:last-child { border-bottom: none; }
.ingredientes .qtd { color: var(--texto-2); text-align: right; }
.ingredientes li.falta span:first-child { color: var(--vermelho); font-weight: 600; }
.feedback-receita { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.grupo-ingredientes .pilula span { min-width: 0; font-weight: 500; font-size: .9rem; min-height: 38px; padding: 6px 12px; }

.linha-adicionar { display: flex; gap: 8px; }
.linha-adicionar input { flex: 1; min-width: 0; min-height: 46px; padding: 10px 12px; font: inherit; font-size: 16px; border: 1px solid var(--borda); border-radius: 10px; }
.linha-adicionar input.qtd { flex: 0 0 76px; }
.linha-adicionar .btn { flex: none; width: 48px; padding: 0; }
.btn-remover { background: none; border: none; color: var(--texto-3); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.btn-remover:hover { background: #f1f2f0; color: var(--vermelho); }
.btn-remover svg { width: 18px; height: 18px; }
.btn-whatsapp { background: #1fa855; color: #fff; }
.btn-whatsapp:hover { background: #178a45; }

/* ───── Calendário menstrual ───── */
:root { --c-rosa: #ec4f86; --c-rosa-suave: #fde3ec; --c-amarelo: #fbf2bf; --c-laranja: #f08a2c; --c-lilas: #efe9fa; --c-lilas-forte: #4b2a8a; }
.ciclo-hero {
    text-align: center; padding: 26px 18px 20px; border-radius: 22px; margin-bottom: 14px;
    background: linear-gradient(160deg, #f1ecfb 0%, #fbe6ef 100%);
}
.ciclo-hero small { display: block; font-size: 1.05rem; font-weight: 600; color: var(--texto); }
.ciclo-hero strong { display: block; font-size: 2.1rem; line-height: 1.15; margin: 4px 0; letter-spacing: -.01em; }
.ciclo-hero > span { display: block; color: var(--texto-2); font-size: 1.05rem; }
.ciclo-acao { margin-top: 16px; }
.btn-ciclo { background: var(--c-rosa); color: #fff; border-radius: 999px; padding: 12px 26px; font-size: 1.05rem; }
.btn-ciclo:hover { filter: brightness(.95); }
.outro-dia { margin-top: 10px; }
.outro-dia summary { cursor: pointer; color: var(--texto-2); font-size: .9rem; list-style: none; }
.outro-dia summary::-webkit-details-marker { display: none; }
.outro-dia .linha-adicionar { max-width: 300px; margin: 8px auto 0; }

.ciclo-cartoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.ciclo-cartoes.dois { grid-template-columns: 1fr 1fr; }
.ciclo-cartao { border-radius: 16px; padding: 12px; min-height: 118px; display: flex; flex-direction: column; justify-content: space-between; }
.ciclo-cartao strong { font-size: 1.15rem; }
.ciclo-cartao span { font-size: .82rem; color: var(--texto-2); }
.ciclo-cartao.lilas { background: var(--c-lilas); }
.ciclo-cartao.lilas > span { color: var(--c-lilas-forte); font-weight: 600; }
.ciclo-cartao.rosa { background: var(--c-rosa-suave); }
.ciclo-cartao.rosa strong { color: #b8255a; }
.ciclo-cartao.amarelo { background: #fdf6dc; }
.ciclo-cartao.amarelo strong { color: #9a5b00; }
.anel { width: 74px; height: 74px; align-self: center; }
.anel text { font: 700 24px system-ui, sans-serif; fill: var(--c-lilas-forte); }
/* ───── "Estou perto de chutar o balde" (atalho no início + tela /vontade) ───── */
/* SOS "chutar o balde": cartão em destaque suave, boia salva-vidas branca no quadradinho da cor da pessoa (pedido da dona). */
.atalho-balde { border: 1.5px solid var(--tema-borda); background: linear-gradient(135deg, var(--tema-suave) 0%, #fff 85%); }
.atalho-balde .icone { background: var(--tema); color: #fff; box-shadow: 0 4px 12px rgba(20, 30, 25, .15); }
.atalho-balde .icone svg { width: 26px; height: 26px; }
.atalho-balde strong { color: var(--tema-forte); }
.selo-sos {
    display: inline-block; margin-right: 4px; padding: 1px 7px; border-radius: 99px; vertical-align: 1px;
    background: var(--tema); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .06em;
}
.vontade-form { margin: 14px 0 6px; }
.vontade-form .seletor { margin: 0 0 10px; }
.seletor-opcao .emoji { font-size: 1.3rem; }
.vontade-receitas { margin: 22px 0 6px; scroll-margin-top: 70px; }
.vontade-ideias { margin-top: 18px; }
.vontade-receitas h2 { margin-bottom: 2px; }

.calendario { padding: 12px; }
.cal-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-topo h2 { margin: 0; font-size: 1.1rem; }
.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-sem { text-align: center; font-size: .78rem; color: var(--texto-2); padding: 4px 0; }
.cal-dia {
    position: relative; aspect-ratio: 1 / 1.05; border: 1px solid #eceeeb; background: #fff; border-radius: 8px;
    font: inherit; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 4px 6px;
}
.cal-dia span { font-size: 1.05rem; font-weight: 600; }
.cal-dia small { position: absolute; top: 3px; right: 5px; font-size: .62rem; color: var(--texto-3); }
.cal-dia.fase-menstruacao { background: var(--c-rosa-suave); border-color: #f8c4d6; }
.cal-dia.fase-menstruacao span, .cal-dia.fase-menstruacao small { color: var(--c-rosa); }
.cal-dia.fase-menstruacao:not(.registrado) { background: #fff; border: 1.5px dashed #f4a6c0; }
.cal-dia.fase-fertil, .cal-dia.fase-ovulacao { background: var(--c-amarelo); border-color: #f1e39b; }
.cal-dia.fase-tpm { background: var(--c-lilas); border-color: #e2d9f5; }
.cal-dia.hoje { outline: 2.5px solid var(--c-lilas-forte); outline-offset: -2px; }
.cal-dia.selecionado { box-shadow: 0 0 0 2px var(--texto) inset; }
.ponto-ov { position: absolute; top: 5px; left: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--c-laranja); }
.cal-legenda { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 12px; font-size: .78rem; color: var(--texto-2); }
.cal-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.leg { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.leg.menstruacao { background: var(--c-rosa-suave); border: 1px solid #f8c4d6; }
.leg.prevista { background: #fff; border: 1.5px dashed #f4a6c0; }
.leg.fertil { background: var(--c-amarelo); }
.leg.ovulacao { background: var(--c-laranja); border-radius: 50%; }
.leg.tpm { background: var(--c-lilas); }

.barra-ciclo { position: relative; height: 16px; border-radius: 99px; background: #f3e8ec; margin: 18px 0 26px; }
.barra-ciclo.fina { height: 14px; margin: 6px 0 4px; }
.barra-ciclo .seg { position: absolute; top: 0; bottom: 0; border-radius: 99px; }
.barra-ciclo .seg.menstruacao { background: var(--c-rosa); }
.barra-ciclo .seg.menstruacao b { color: #fff; font-size: .7rem; padding-left: 6px; line-height: 14px; }
.barra-ciclo .seg.fertil { background: #f7c843; }
.barra-ciclo .ov { position: absolute; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--c-laranja); box-sizing: border-box; }
.barra-ciclo .marca-hoje { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--c-lilas-forte); }
.barra-ciclo .marca-hoje b { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); font-size: .72rem; color: var(--c-lilas-forte); border: 1.5px solid var(--c-lilas-forte); border-radius: 99px; padding: 1px 8px; background: #fff; white-space: nowrap; }
.hist-linha { padding: 8px 0 10px; border-bottom: 1px solid var(--borda); }
.hist-linha:last-child { border-bottom: none; }
.hist-topo { display: flex; justify-content: space-between; gap: 8px; font-size: .92rem; }

/* Topo: só a engrenagem (o ícone de música saiu) */
.topo-icones { display: flex; gap: 4px; align-items: center; }
.icone-topo {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--texto);
    cursor: pointer; list-style: none; text-decoration: none;
}
.icone-topo::-webkit-details-marker { display: none; }
.icone-topo:hover { background: #f0f2ef; }
.icone-topo svg { width: 21px; height: 21px; }
.menu-engrenagem { position: relative; }
.menu-engrenagem-lista {
    position: absolute; left: 0; top: 42px; min-width: 150px; /* engrenagem fica à esquerda: o menu abre para a direita */ background: #fff; border: 1px solid var(--borda);
    border-radius: 12px; box-shadow: var(--sombra); padding: 6px; z-index: 20;
}
.menu-engrenagem-lista button {
    width: 100%; text-align: left; background: none; border: none; font: inherit; font-weight: 600; padding: 10px 12px;
    border-radius: 8px; cursor: pointer; color: var(--vermelho);
}
.menu-engrenagem-lista button:hover { background: var(--vermelho-suave); }

.menu-engrenagem-lista { min-width: 250px; } /* cada item numa linha só */
/* Letra mais suave (cinza escuro, sem negrito forte; mesmo tamanho para o dedo acertar) e uma setinha discreta na cor da
   pessoa em cada item (pedido da dona, 07/10/2026). O "Sair" continua vermelho e sem setinha. */
.menu-engrenagem-lista a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border-radius: 8px; color: var(--texto-2); text-decoration: none; font-weight: 500; white-space: nowrap;
}
.menu-engrenagem-lista a::after {
    content: ""; flex: none; width: 13px; height: 13px; background: var(--tema); opacity: .8;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.menu-engrenagem-lista a:hover { background: #f1f2f0; color: var(--texto); }
.menu-engrenagem-lista hr { border: 0; border-top: 1px solid var(--borda); margin: 6px 4px; }
.qtd-item { color: var(--tema-forte); margin-right: 2px; }

/* Foto do prato: à esquerda no cartão, capa na receita */
.receita-cartao.com-foto { display: flex; gap: 12px; align-items: flex-start; padding: 12px; }
.receita-foto { flex: none; width: 92px; height: 92px; object-fit: cover; border-radius: 12px; background: #eef0ed; }
.receita-info { flex: 1; min-width: 0; }
.receita-com-capa { padding-top: 0; overflow: hidden; }
.receita-capa { margin: 0 -18px 14px; position: relative; }
.receita-capa img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; max-height: 320px; }
.receita-capa figcaption { position: absolute; right: 8px; bottom: 6px; font-size: .68rem; background: rgba(0, 0, 0, .45); color: #fff; padding: 1px 8px; border-radius: 99px; }
.receita-capa figcaption a { color: #fff; }

/* Campo de busca com lupa ("O que tenho em casa", lista de mercado) */
.busca-lupa { position: relative; display: block; }
.busca-lupa svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; }
.busca-lupa input {
    width: 100%; min-height: 50px; padding: 12px 14px 12px 44px; font: inherit; font-size: 16px; border: 1.5px solid var(--borda);
    border-radius: 12px; background: #fff; -webkit-appearance: none; appearance: none;
}
.busca-lupa input:focus { outline: none; border-color: var(--tema); }

/* "O que tenho em casa": o que encontra aparece logo embaixo da busca e a lista vai se montando */
.casa-sugestoes { margin-top: 6px; border: 1px solid var(--borda); border-radius: 12px; padding: 4px; background: #fff; }
.casa-sugestao {
    display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 46px; text-align: left;
    background: none; border: none; font: inherit; padding: 10px 12px; border-radius: 8px; cursor: pointer; color: var(--texto);
}
.casa-sugestao + .casa-sugestao { border-top: 1px solid #f0f1ef; }
.casa-sugestao:hover, .casa-sugestao:focus-visible { background: var(--tema-suave); }
.casa-sugestao.ja { color: var(--texto-3); cursor: default; background: none; }
.casa-sugestao small { font-size: .8rem; }
.casa-nada { margin: 0; padding: 10px 12px; }
.casa-titulo { font-size: .95rem; margin: 18px 0 6px; }
.casa-lista { list-style: none; margin: 0; padding: 0; }
.casa-lista li { display: flex; align-items: center; gap: 10px; padding: 6px 0 6px 2px; border-bottom: 1px solid #f0f1ef; }
.casa-lista li span { flex: 1; min-width: 0; font-weight: 500; }
.casa-lista li.novo span { color: var(--tema-forte); }
.casa-lista button {
    flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--borda); background: #fff;
    color: var(--texto-2); font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.casa .erro { color: var(--vermelho); }

.btn-icone { width: 52px; padding: 0; flex: none !important; }
.btn-icone svg { width: 26px; height: 26px; }
.titulo-restricoes { font-size: .95rem; font-weight: 600; color: var(--texto-2); }

/* Caixinha de marcar dentro de .campo: texto ao lado do quadradinho */
.campo > label.feito { display: flex; align-items: center; gap: 10px; font-weight: 500; margin-bottom: 0; }
.feito .marca-feito { flex: none; }

/* Rodapé compacto do cadastro: tudo numa linha */
.acoes-compactas { gap: 8px; }
.acoes-compactas .btn { min-height: 42px; padding: 8px 14px; font-size: .95rem; }
.acoes-compactas .btn-voltar-icone { width: 42px; padding: 0; flex: none; }
.acoes-compactas .btn-voltar-icone svg { width: 22px; height: 22px; }
.acoes-direita { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.acoes-esquerda { display: flex; gap: 8px; align-items: center; }
.acoes-compactas .btn-primario { flex: none; max-width: none; margin-left: 0; }

/* ───── Agenda ───── */
.campo textarea { width: 100%; min-height: 84px; padding: 10px 12px; font: inherit; font-size: 16px; border: 1px solid var(--borda); border-radius: 10px; resize: vertical; background: #fff; }
.campo textarea:focus { outline: 2px solid var(--tema-borda); border-color: var(--tema); }
.agenda-cal .cal-dia { text-decoration: none; color: var(--texto); justify-content: space-between; }
.agenda-cal .cal-dia.hoje { outline: 2.5px solid var(--tema); outline-offset: -2px; }
.agenda-cal .cal-dia.selecionado { background: var(--tema); border-color: var(--tema); color: #fff; }
.agenda-cal .cal-dia.selecionado .cal-pontos i { background: #fff; }
.cal-pontos { display: flex; gap: 3px; }
.cal-pontos i { width: 6px; height: 6px; border-radius: 50%; background: var(--tema); }
.agenda-lista { margin-top: 18px; scroll-margin-top: 70px; }
.agenda-lista h2 { margin-bottom: 8px; }
.agenda-data { font-size: .95rem; color: var(--texto-2); margin: 14px 0 6px; }
.compromisso { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: var(--texto); padding: 14px 16px; margin-bottom: 8px; border-left: 5px solid var(--tema); }
.compromisso-hora { flex: none; min-width: 62px; font-weight: 700; color: var(--tema-forte); }
.compromisso-info strong { display: block; }
.compromisso-info small { display: block; color: var(--texto-2); }
.compromisso-obs { margin-top: 4px; font-style: italic; }
.compromisso.tipo-saude { border-left-color: #0ea5e9; }
.compromisso.tipo-trabalho { border-left-color: #64748b; }
.compromisso.tipo-familia { border-left-color: #a855f7; }
.compromisso.tipo-aniversario { border-left-color: #ec4899; }
.compromisso.tipo-conta { border-left-color: #d97706; }
.compromisso.tipo-treino { border-left-color: #16a34a; }
.agenda-vazio { text-align: center; }
.apagar-form { text-align: center; margin: 4px 0 8px; }
.btn-apagar { color: var(--vermelho); text-decoration: underline; }
.btn-apagar.confirmando { background: var(--vermelho); color: #fff; text-decoration: none; padding: 10px 16px; border-radius: 10px; font-weight: 700; }

/* ───── Controle de gastos (dinheiro: verde = entrou, vermelho = saiu, como em todo banco) ───── */
.txt-entrada { color: #15803d; }
.txt-saida { color: var(--vermelho); }
.btn-entrada { background: #15803d; color: #fff; }
.btn-entrada:hover { background: #116632; }
.btn-saida { background: var(--vermelho); color: #fff; }
.btn-saida:hover { background: #991b1b; }
.balanco { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 10px; }
.balanco div { border-radius: 12px; padding: 10px 12px; }
.balanco small { display: block; font-weight: 600; color: var(--texto-2); }
.balanco strong { font-size: 1.2rem; }
.balanco .entrou { background: #e9f7ee; }
.balanco .entrou strong { color: #15803d; }
.balanco .saiu { background: var(--vermelho-suave); }
.balanco .saiu strong { color: var(--vermelho); }
.saldo { text-align: center; font-size: 1.05rem; padding: 8px 0; }
.saldo strong { font-size: 1.35rem; }
.saldo small { display: block; color: var(--texto-2); font-size: .85rem; }
.saldo.positivo strong { color: #15803d; }
.saldo.negativo strong { color: var(--vermelho); }
.gasto-barra { height: 10px; border-radius: 99px; background: var(--borda); overflow: hidden; margin-top: 6px; }
.gasto-barra i { display: block; height: 100%; border-radius: 99px; background: #16a34a; }
.gasto-barra.cuidado i { background: #d97706; }
.gasto-barra.passou i { background: var(--vermelho); }
.gasto-pct { text-align: center; margin: 6px 0 0; }
.comparacao { text-align: center; margin: 8px 0 0; }
.cat-linha { margin-bottom: 10px; }
.cat-topo { display: flex; justify-content: space-between; gap: 8px; font-size: .95rem; }
.cat-topo small { color: var(--texto-3); }
.cat-barra { height: 8px; border-radius: 99px; background: var(--borda); overflow: hidden; margin-top: 4px; }
.cat-barra i { display: block; height: 100%; border-radius: 99px; background: var(--vermelho); opacity: .75; }
.lanc-data { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-3); margin: 12px 0 2px; }
.lanc { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borda); text-decoration: none; color: var(--texto); }
.lanc-emoji { font-size: 1.4rem; flex: none; }
.lanc-info { flex: 1; min-width: 0; }
.lanc-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lanc-info small { color: var(--texto-2); }
.lanc-valor { font-weight: 700; white-space: nowrap; }
.tipo-lanc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.tipo-lanc .pilula span { display: block; text-align: center; padding: 12px 8px; font-size: 1rem; }
.tipo-lanc .entrada input:checked + span { border-color: #15803d; background: #e9f7ee; color: #15803d; }
.tipo-lanc .saida input:checked + span { border-color: var(--vermelho); background: var(--vermelho-suave); color: var(--vermelho); }
.dinheiro { display: flex; align-items: center; gap: 8px; border: 1px solid var(--borda); border-radius: 12px; padding: 4px 14px; background: #fff; }
.dinheiro span { font-weight: 700; font-size: 1.3rem; color: var(--texto-2); }
.campo .dinheiro input[type=text] { flex: 1; min-width: 0; border: none; outline: none; font: inherit; font-size: 1.8rem; font-weight: 700; padding: 8px 0; background: transparent; min-height: 0; }
.dinheiro:focus-within { border-color: var(--tema); outline: 2px solid var(--tema-borda); }
.ano-mes, .ano-total { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--borda); text-decoration: none; color: var(--texto); }
.ano-mes small, .ano-total small { display: block; color: var(--texto-2); font-size: .82rem; }
.ano-mes.sem-dados { opacity: .55; }
.ano-saldo, .ano-total > span:last-child { text-align: right; font-weight: 700; white-space: nowrap; font-size: .95rem; }
.ano-total { border-bottom: none; border-top: 2px solid var(--texto); margin-top: 4px; }
.agenda-vazio { margin-bottom: 8px; }

/* ───── Início: ícone ↑↓ liga o modo de arrastar os itens (sem setinhas nem textos longos) ───── */
.inicio-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.inicio-topo h1 { margin: 0; }
.btn-organizar {
    flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
    border: 1.5px solid var(--borda); background: #fff; color: var(--texto-2);
}
.btn-organizar svg { width: 20px; height: 20px; }
.organizar-aviso {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0;
    background: var(--tema-suave); border: 1.5px solid var(--tema-borda); border-radius: var(--raio); padding: 10px 12px;
}
.organizar-aviso.oculto { display: none; }
.organizar-aviso p { margin: 0; font-weight: 600; color: var(--tema-forte); font-size: .95rem; }
.organizar-aviso .btn { flex: none; min-height: 40px; padding: 8px 16px; }
.menu-item { position: relative; display: grid; }
.alca-arrastar { display: none; }
.menu-inicio.organizando .menu-item { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
.menu-inicio.organizando .atalho { padding-right: 52px; outline: 2px dashed var(--tema-borda); outline-offset: -2px; -webkit-user-drag: none; }
.menu-inicio.organizando .alca-arrastar { display: grid; place-items: center; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; }
.alca-arrastar svg { width: 24px; height: 24px; }
.menu-item.arrastando { z-index: 10; cursor: grabbing; }
.menu-item.arrastando .atalho { box-shadow: 0 14px 30px rgba(20, 30, 25, .22); outline-color: var(--tema); }

/* ───── Músicas: player (barra de cima da ficha e tela Playlist) ───── */
.ico-pausar, .tocando .ico-tocar { display: none; }
.tocando .ico-pausar { display: block; }
/* Barra de cima da ficha: ⏮ ▶ ⏭ · nome da música · lixeira · engrenagem. Mesma altura do topo normal. */
.topo:has(.topo-player) .topo-in { position: relative; gap: 4px; }
.topo-player { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
.topo-player .player-barra { top: auto; bottom: -1px; }
.topo-player .player-tocar { width: 38px; height: 38px; }
.topo-player .player-tocar svg { width: 20px; height: 20px; }
.topo-player .player-pular { width: 34px; height: 34px; border: 0; background: none; }
.topo-player .player-pular:active { background: #f0f2ef; }
.topo-player .player-pular svg { width: 17px; height: 17px; }
/* O nome ocupa o meio; a lixeira fica perto da barrinha vertical e, do outro lado dela, a engrenagem (menor), para
   ficar claro que a engrenagem não tem nada a ver com a música (pedido da dona). */
.topo-player-info { flex: 1; min-width: 0; margin-left: 6px; line-height: 1.2; }
.topo-player-info strong { display: block; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-player .player-lixeira { width: 38px; height: 38px; }
.topo-player .player-lixeira svg { width: 22px; height: 22px; }
/* Na ficha (como era, a dona pediu para manter): engrenagem no fim, depois da barrinha vertical (não tem nada a ver com a
   música), e o menu dela abre para a esquerda. */
.topo:has(.topo-player) .topo-icones { flex: none; margin-left: auto; padding-left: 6px; border-left: 1.5px solid var(--borda); }
.topo:has(.topo-player) .menu-engrenagem > .icone-topo { width: 36px; height: 36px; }
.topo:has(.topo-player) .menu-engrenagem > .icone-topo svg { width: 19px; height: 19px; }
.topo:has(.topo-player) .menu-engrenagem-lista { left: auto; right: 0; }
.topo:has(.topo-player) .menu-engrenagem-lista { top: 44px; }
/* Lixeira: só aparece depois que tem uma música na tela; o aviso com "Desfazer" aparece logo abaixo da barra. */
.player-lixeira { color: var(--texto-2) !important; }
[data-player]:not(.comecou) .player-lixeira { visibility: hidden; }
.player-aviso {
    position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 30; width: max-content; max-width: calc(100% - 32px);
    display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px;
    background: var(--texto); color: #fff; font-size: .9rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.player-aviso button { border: 0; background: none; color: var(--tema-suave); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 4px 0; }
.player-aviso.oculto { display: none; }
.escondida-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--borda); }
.escondida-linha:first-of-type { margin-top: 10px; }
.escondida-linha span { min-width: 0; }
.escondida-linha strong, .escondida-linha small { display: block; }
.escondida-linha small { color: var(--texto-2); font-size: .85rem; }
.escondida-linha .btn { flex: none; min-height: 38px; padding: 6px 12px; font-size: .9rem; }
.player-barra { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--borda); }
.player-barra i { display: block; height: 100%; width: 0; background: var(--tema); }
.player-tocar {
    flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--tema); color: #fff; display: grid; place-items: center;
}
.player-tocar:active { background: var(--tema-forte); }
.player-tocar svg { width: 22px; height: 22px; }
.player-pular {
    flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--borda); cursor: pointer;
    background: #fff; color: var(--texto); display: grid; place-items: center;
}
.player-pular svg { width: 18px; height: 18px; }
.player-faixa { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .92rem; }
.player-faixa small { color: var(--texto-2); }
.player-agora { position: relative; overflow: hidden; text-align: center; padding-top: 22px; }
.player-agora .player-faixa { white-space: normal; font-size: 1.05rem; }
.player-agora .player-faixa small { display: block; font-size: .9rem; }
.player-controles { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 14px; }
.player-agora .player-tocar { width: 64px; height: 64px; }
.player-agora .player-tocar svg { width: 28px; height: 28px; }
.player-lista { padding: 6px 8px; }
.player-lista > .pequeno { margin: 8px 8px 4px; }
.player-item {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; cursor: pointer;
    border: 0; border-top: 1px solid var(--borda); background: none; font: inherit; color: var(--texto); text-align: left;
}
.player-item:first-of-type { border-top: 0; }
.player-item svg { flex: none; width: 16px; height: 16px; color: var(--texto-3); }
.player-item span { flex: 1; min-width: 0; }
.player-item strong { display: block; font-weight: 600; }
.player-item span small { display: block; color: var(--texto-2); font-size: .85rem; }
.player-item > small { color: var(--texto-3); font-size: .85rem; }
.player-item.atual strong, .player-item.atual svg { color: var(--tema); }
.creditos summary { cursor: pointer; font-weight: 600; }
.creditos ul { margin-top: 10px; font-size: .88rem; color: var(--texto-2); }

/* ───── Gestor de músicas ───── */
.campo input[type=file] {
    width: 100%; font: inherit; font-size: .95rem; padding: 10px; color: var(--texto);
    border: 1.5px dashed var(--tema-borda); border-radius: 10px; background: var(--tema-suave);
}
.envio-lista { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.envio-lista li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: .9rem; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 10px; }
.envio-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.envio-estado { color: var(--texto-2); font-weight: 600; }
.envio-lista .barra { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--borda); overflow: hidden; }
.envio-lista .barra i { display: block; height: 100%; width: 0; background: var(--tema); transition: width .2s; }
.envio-lista li.ok .envio-estado { color: var(--tema-forte); }
.envio-lista li.falhou { border-color: var(--vermelho-borda); background: var(--vermelho-suave); }
.envio-lista li.falhou .envio-estado { grid-column: 1 / -1; color: var(--vermelho); font-weight: 500; }
.envio-lista li.falhou .barra { display: none; }
.gestor-momento { margin-top: 22px; }
.gestor-momento h2 small { font-weight: 500; margin-left: 6px; }
.gestor-lista { padding: 4px 14px; }
.gestor-musica { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.gestor-musica:last-child { border-bottom: 0; }
.gestor-ouvir {
    flex: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
    border: 1.5px solid var(--tema-borda); background: var(--tema-suave); color: var(--tema-forte);
}
.gestor-ouvir svg { width: 16px; height: 16px; }
.gestor-info { flex: 1; min-width: 0; text-decoration: none; color: var(--texto); }
.gestor-info strong, .gestor-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gestor-info small { color: var(--texto-2); font-size: .82rem; }
.gestor-musica.guardada .gestor-info { opacity: .5; }
.chave-no-ar { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.chave-no-ar input { position: absolute; opacity: 0; pointer-events: none; }
.chave { width: 44px; height: 26px; border-radius: 99px; background: #cfd5d1; position: relative; transition: background .15s; }
.chave::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .15s;
}
.chave-no-ar input:checked + .chave { background: var(--tema); }
.chave-no-ar input:checked + .chave::after { transform: translateX(18px); }
.chave-no-ar input:focus-visible + .chave { outline: 2px solid var(--tema-borda); outline-offset: 2px; }
.chave-txt { font-size: .7rem; font-weight: 600; color: var(--texto-3); }
.chave-no-ar input:checked ~ .chave-txt { color: var(--tema-forte); }
.gestor-audio { width: 100%; margin-bottom: 16px; }

/* ───── Janela (modal) de escolha: "Tenho em casa" e "Nova lista" — no celular sobe de baixo e ocupa quase a tela ───── */
body.com-modal { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; background: rgba(20, 25, 22, .45); }
.modal-caixa {
    width: 100%; max-width: 640px; height: 92vh; height: 92dvh; display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .15);
}
@media (min-width: 700px) { .modal { align-items: center; } .modal-caixa { height: 86vh; border-radius: 18px; } }
.modal-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.modal-topo h2 { margin: 0; font-size: 1.15rem; }
.modal-fechar { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--borda); background: #fff; color: var(--texto-2); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.modal-busca { padding: 0 16px 12px; border-bottom: 1px solid var(--borda); }
.modal-busca input { width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 16px; border: 1px solid var(--borda); border-radius: 10px; background: #fff; -webkit-appearance: none; appearance: none; }
.modal-corpo { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px 18px; }
.modal-grupo h3 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); margin: 16px 0 8px; }
/* Ver o PDF da ficha antes de baixar ou compartilhar: o conteúdo do arquivo numa "folha" branca. */
.titulo-pdf { margin-bottom: 10px; }
.folha-pdf { background: #fff; border: 1px solid var(--borda); border-radius: 10px; box-shadow: var(--sombra); padding: 18px 14px; }
.folha-pdf .pdf .dia { border-top: 1px dashed var(--borda); margin-top: 18px; padding-top: 14px; }
.folha-pdf .pdf .dia.primeiro { border-top: 0; margin-top: 0; padding-top: 0; }
.folha-pdf .pdf .cuidado, .folha-pdf .pdf .nota, .folha-pdf .pdf .aviso { background: none; border: 0; border-radius: 0; padding: 0; margin-bottom: 0; } /* iguais ao arquivo */
.folha-pdf .pdf .cuidado { color: #a85207; } .folha-pdf .pdf .nota, .folha-pdf .pdf .aviso { color: #5d645f; }
.pdf-aviso { margin: 12px 0 0; text-align: center; color: var(--laranja); }
.modal-rodape {
    display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--borda); background: #fff;
}

/* ───── Lista de mercado: várias listas + janela "Nova lista" (uma linha por produto: caixinha, nome, qtd, unidade) ───── */
.lista-nova { margin-bottom: 14px; }
.lista-cartao { display: flex; align-items: center; gap: 8px; padding: 0; overflow: hidden; }
.lista-cartao-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 14px 0 14px 16px; text-decoration: none; color: var(--texto); }
.lista-cartao-link .icone { width: 42px; height: 42px; border-radius: 12px; background: var(--tema-suave); color: var(--tema); display: grid; place-items: center; flex: none; }
.lista-cartao-link .icone svg { width: 22px; height: 22px; }
.lista-cartao-link strong { display: block; }
.lista-cartao-link small { color: var(--texto-2); }
.btn-compartilhar { flex: none; width: 46px; height: 46px; margin-right: 12px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--borda); background: #fff; color: var(--tema-forte); cursor: pointer; }
.btn-compartilhar svg { width: 20px; height: 20px; }
.lista-linha { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #f0f1ef; }
.lista-marca { flex: 1; min-width: 0; color: var(--texto); font-weight: 500; }
.lista-marca .txt { overflow: hidden; text-overflow: ellipsis; }
.lista-qtd { flex: none; width: 62px; min-height: 40px; padding: 6px 8px; font: inherit; font-size: 16px; text-align: center; border: 1px solid var(--borda); border-radius: 8px; background: #fff; }
.lista-un { flex: none; width: 64px; min-height: 40px; padding: 6px 4px; font: inherit; font-size: 15px; border: 1px solid var(--borda); border-radius: 8px; background: #fff; color: var(--texto); }
/* Lista aberta = tela de montar (salva sozinha); em cima: Repetir, compartilhar e lixeira */
.lista-info { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.lista-info .sub { margin: 0; }
.lista-salvo { color: var(--texto-3); font-size: .85rem; }
.lista-menu { display: flex; gap: 6px; flex: none; }
.lista-menu form { margin: 0; }
.lista-menu-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 42px; height: 42px; padding: 0 10px;
    border-radius: 999px; border: 1.5px solid var(--borda); background: #fff; color: var(--tema-forte); font: inherit;
    font-size: .88rem; font-weight: 600; cursor: pointer;
}
.lista-menu-btn svg { width: 19px; height: 19px; flex: none; }
.lista-lixeira { color: var(--vermelho); }
.lista-lixeira.confirmando { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }

/* ───── Conversa da compra junto (balão na lista de mercado) ───── */
/* Bolinha do chat: flutua embaixo, na cor de quem fez a lista; arrastável (app.js "Bolinha do chat"). */
.chat-flutuante {
    position: fixed; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 40;
    width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
    background: var(--tema); color: #fff; box-shadow: 0 6px 18px rgba(20, 30, 25, .28);
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.chat-flutuante svg { width: 28px; height: 28px; }
.chat-flutuante.arrastando { box-shadow: 0 12px 28px rgba(20, 30, 25, .35); transform: scale(1.06); }
.chat-flutuante.solta { transition: left .2s ease, top .2s ease; }
body:has(.chat-flutuante) .container { padding-bottom: 100px; } /* o último produto não fica embaixo da bolinha */
.chat-bolinha {
    position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px;
    background: var(--vermelho); color: #fff; border: 2px solid #fff; font-size: .75rem; font-weight: 700;
    display: grid; place-items: center; line-height: 1;
}
.chat-aviso {
    position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 41;
    width: max-content; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    border-radius: 12px; background: var(--texto); color: #fff; font-size: .9rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.chat-aviso button { border: 0; background: none; color: var(--tema-suave); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 4px 0; }
.chat-aviso.oculto { display: none; }
.chat-caixa { height: 82vh; height: 82dvh; }
@media (min-width: 700px) { .chat-caixa { height: 76vh; } }
.chat-mensagens { display: flex; flex-direction: column; background: #f6f7f5; padding: 10px 14px 14px; border-top: 1px solid var(--borda); }
.chat-vazio { margin: auto; max-width: 260px; text-align: center; color: var(--texto-3); font-size: .92rem; }
.chat-dia { align-self: center; margin: 10px 0 2px; padding: 2px 10px; font-size: .75rem; color: var(--texto-3); background: #fff; border: 1px solid var(--borda); border-radius: 99px; }
.chat-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 82%; margin-top: 6px; }
.chat-msg.minha { align-self: flex-end; align-items: flex-end; }
.chat-quem { margin: 4px 6px 2px; font-size: .78rem; font-weight: 700; color: var(--texto-2); }
.chat-bolha { padding: 8px 12px; border-radius: 16px; font-size: .98rem; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Cores fixas por quem escreveu (pedido da dona), iguais nos dois celulares: dona = verde padrão, quem entrou pelo link = cinza. */
.chat-msg.da-dona .chat-bolha { background: #d9fdd3; color: #111b21; } /* verde clarinho do WhatsApp, letra preta (pedido da dona) */
.chat-msg.do-convidado .chat-bolha { background: #e4e6e3; color: var(--texto); }
.chat-msg.minha .chat-bolha { border-bottom-right-radius: 4px; }
.chat-msg:not(.minha) .chat-bolha { border-bottom-left-radius: 4px; }
.chat-hora { margin: 2px 6px 0; font-size: .7rem; color: var(--texto-3); }
.chat-escrever, .chat-nome { padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--borda); background: #fff; }
.chat-linha { display: flex; align-items: flex-end; gap: 8px; }
.chat-linha textarea {
    flex: 1; min-height: 44px; max-height: 120px; padding: 11px 14px; resize: none; overflow-y: hidden; font: inherit; font-size: 16px; line-height: 1.3;
    border: 1px solid var(--borda); border-radius: 22px; background: #fff;
}
.chat-linha textarea:focus { outline: 2px solid var(--tema-borda); border-color: var(--tema); }
.chat-enviar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--tema); color: #fff; cursor: pointer; }
.chat-enviar svg { width: 20px; height: 20px; }
.chat-erro { margin: 0 4px 8px; font-size: .85rem; color: var(--vermelho); }
.chat-nome { display: grid; gap: 10px; }
.chat-nome label { font-weight: 700; font-size: 1.05rem; }
.chat-nome input { min-height: 46px; padding: 10px 12px; font: inherit; font-size: 16px; border: 1px solid var(--borda); border-radius: 10px; }
.lista-editor { padding-top: 14px; }
.compra-lista { list-style: none; margin: 0; padding: 0; }
.compra-lista li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #f0f1ef; }
.compra-lista .nome { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.compra-lista li.novo .nome { color: var(--tema-forte); }
/* Quantidade sem cor (a dona: o que fica na cor dela é só a caixinha de "já peguei") */
.qtd-chip {
    flex: none; min-width: 58px; min-height: 36px; padding: 4px 8px; border-radius: 10px; border: 1px solid var(--borda);
    background: #f6f7f5; color: var(--texto); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.qtd-chip.vazio { background: #fff; border-style: dashed; color: var(--texto-3); font-weight: 500; }
.compra-secao { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); margin: 16px 0 2px; }
.compra-lista + .compra-secao { margin-top: 18px; }
.compra-pego { flex: none; }
.compra-lista button.nome { background: none; border: 0; padding: 6px 0; text-align: left; font: inherit; font-weight: 500; color: var(--texto); cursor: text; }
.compra-lista .nome-edicao {
    flex: 1; min-width: 0; min-height: 38px; padding: 6px 10px; font: inherit; font-size: 16px; border: 1.5px solid var(--tema);
    border-radius: 10px; background: #fff;
}
.compra-lista li.pego .nome { text-decoration: line-through; color: var(--texto-3); }
.compra-lista li.pego .qtd-chip { opacity: .55; }

/* Teclado próprio da quantidade (lista de mercado): unidades à esquerda, números à direita, OK na cor do tema */
.teclado-painel { margin-top: 10px; padding: 12px; border: 1.5px solid var(--tema-borda); border-radius: 14px; background: #fff; }
.teclado-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.teclado-topo strong { font-size: 1.02rem; }
.teclado-fechar { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--borda); background: #fff; color: var(--texto-2); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.teclado-visor {
    margin-top: 8px; min-height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 12px;
    background: var(--tema-suave); color: var(--tema-forte); font-size: 1.5rem; font-weight: 700;
}
.teclado-visor.vazio { color: var(--texto-3); font-size: 1.05rem; font-weight: 500; background: #f3f4f2; }
.teclado-qtd { display: grid; grid-template-columns: 1fr 2.2fr; gap: 8px; margin-top: 10px; }
.teclado-qtd button {
    min-height: 48px; border-radius: 12px; border: 1px solid var(--borda); background: #fff; font: inherit;
    font-size: 1.25rem; font-weight: 600; color: var(--texto); cursor: pointer; touch-action: manipulation;
}
.teclado-qtd button:active { background: var(--tema-suave); }
.teclado-qtd .unidades { display: grid; grid-template-columns: 1fr; gap: 6px; }
.teclado-qtd .unidades button { min-height: 40px; font-size: 1rem; background: #f3f4f2; }
.teclado-qtd .numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.teclado-qtd .numeros .ok { background: var(--tema); color: #fff; border-color: var(--tema); font-size: 1.05rem; }
.compra-lista .tirar {
    flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--borda); background: #fff;
    color: var(--texto-2); font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.lista-obs h3 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); margin: 18px 0 8px; }
.lista-obs textarea {
    width: 100%; min-height: 84px; padding: 10px 12px; font: inherit; font-size: 16px; border: 1px solid var(--borda);
    border-radius: 10px; background: #fff; resize: vertical;
}
.lista-historico { font-size: 1.05rem; margin: 18px 0 10px; }
/* Histórico: o cartão quebra em duas linhas — texto em cima; Repetir e compartilhar embaixo, à direita */
.lista-cartao { flex-wrap: wrap; }
.lista-cartao .lista-cartao-link { flex: 1 1 100%; padding-right: 16px; }
.lista-cartao-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 8px; width: 100%; padding: 0 12px 12px; margin-top: -4px; }
.lista-cartao-acoes .btn-compartilhar { margin-right: 0; width: 40px; height: 40px; }
.lista-cartao-repetir { flex: none; margin: 0; }
.lista-cartao-repetir .lista-menu-btn { height: 40px; padding: 0 12px; }
.lista-cartao-texto { min-width: 0; }
.lista-previa { display: block; color: var(--texto-3) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outros-novo { display: flex; gap: 8px; margin-top: 10px; }
.outros-novo input { flex: 1; min-width: 0; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 16px; border: 1px solid var(--borda); border-radius: 10px; }
.outros-novo .btn { flex: none; }
.lista-outros { padding-bottom: 8px; }

/* ───── Receitas: filtros de Tempo e Proteína (lado a lado) e espera nos cartões ───── */
.filtros-duplos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.filtros-duplos select {
    width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; font: inherit; font-size: 15px; font-weight: 600;
    color: var(--texto); background: #fff; border: 1px solid var(--borda); border-radius: 10px;
}
.receita-meta .espera { color: var(--texto-3); }
.receita-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip.chip-espera { background: #e8f1fb; color: #1e4f86; }

/* ───── Calorias e macros (/calorias) ───── */
.metas-topo { text-align: center; background: var(--tema-suave); border-color: var(--tema-borda); }
.metas-topo small { display: block; font-weight: 600; color: var(--tema-forte); }
.metas-topo strong { display: block; font-size: 2.1rem; line-height: 1.2; color: var(--tema-forte); margin: 2px 0 6px; }
.metas-topo span { color: var(--texto-2); font-size: .95rem; }
.metas-macros { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
.metas-dica { font-size: .95rem; }
.metas-conta > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.metas-conta > div span small { display: block; color: var(--texto-3); font-size: .82rem; }
.metas-conta > div strong { white-space: nowrap; }
.metas-conta > div.total { border-bottom: none; font-weight: 700; color: var(--tema-forte); }
.link-metas { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-decoration: none; color: var(--texto); }
.link-metas small { display: block; color: var(--texto-2); }

/* Título centralizado (lista de mercado) */
.titulo-centro { text-align: center; }

/* Compartilhar a lista: janelinha baixa com as duas opções (fazer a compra junto / mandar em texto) */
.modal-caixa.modal-folha { height: auto; max-height: 92vh; }
.compartilhar-opcoes { display: grid; gap: 10px; padding: 4px 16px calc(18px + env(safe-area-inset-bottom)); }
.compartilhar-opcao {
    display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px; text-align: left; cursor: pointer;
    background: #fff; border: 1.5px solid var(--borda); border-radius: 14px; font: inherit; color: var(--texto);
}
.compartilhar-opcao:active { background: var(--tema-suave); border-color: var(--tema-borda); }
.compartilhar-opcao .icone { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--tema-suave); color: var(--tema); display: grid; place-items: center; }
.compartilhar-opcao .icone svg { width: 22px; height: 22px; }
.compartilhar-opcao strong { display: block; font-size: 1.02rem; }
.compartilhar-opcao small { display: block; margin-top: 2px; color: var(--texto-2); font-size: .86rem; line-height: 1.35; }
/* Última linha do teclado da quantidade: ⌫ · 0 · , · OK (4 teclas na largura dos números) */
.teclado-qtd .numeros .ultima-linha { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
/* "Fazer a compra junto" em dois passos (convite e link) */
.compartilhar-explica { margin: 0 2px 2px; color: var(--texto-2); font-size: .92rem; }
.compartilhar-opcao .icone.passo { font-weight: 800; font-size: 1.15rem; }
.compartilhar-opcao.feito-passo { border-color: var(--tema-borda); background: var(--tema-suave); }
.compartilhar-opcao.feito-passo .icone.passo { background: var(--tema); color: #fff; }
.compartilhar-copiar { justify-self: center; }

.casa-explica { margin: 0 0 10px; }

/* Ficha: "Minha ficha" no meio e o "⋯" à direita (abre Evolução, Observações e PDF) */
.ficha-titulo { position: relative; display: flex; align-items: center; justify-content: center; min-height: 42px; }
.ficha-titulo h1 { margin: 0; padding: 0 46px; text-align: center; }
.ficha-mais { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 30; } /* acima das abas dos dias (que grudam no topo) */
/* Leve destaque na cor da pessoa (pedido da dona): borda e pontinhos coloridos, fundo branco (não "cheio"). */
.ficha-mais summary {
    list-style: none; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--tema); background: #fff;
    display: grid; place-items: center; cursor: pointer; color: var(--tema);
}
.ficha-mais summary::-webkit-details-marker { display: none; }
.ficha-mais summary svg { width: 20px; height: 20px; }
.ficha-mais[open] summary { background: var(--tema-suave); color: var(--tema-forte); }
.ficha-mais-lista {
    position: absolute; right: 0; top: 46px; min-width: 200px; background: #fff; border: 1px solid var(--borda);
    border-radius: 12px; box-shadow: var(--sombra); padding: 6px; z-index: 20;
}
.ficha-mais-lista a, .ficha-mais-lista button {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 8px; border: 0; background: none;
    color: var(--texto); text-decoration: none; font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.ficha-mais-lista a:hover, .ficha-mais-lista button:hover { background: #f1f2f0; }
.ficha-mais-lista svg { width: 18px; height: 18px; flex: none; color: var(--tema); }
.ficha-mais-lista button.ativa { color: var(--tema-forte); background: var(--tema-suave); }
.ficha-topo .sub { text-align: center; }

/* ───── Atalho na tela inicial (janela _atalho) e Alterar senha ───── */
.atalho-corpo { padding: 4px 20px 18px; text-align: center; }
.atalho-corpo p { margin: 0 0 8px; }
.atalho-icone { display: block; margin: 0 auto 12px; width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, .14); }
.atalho-simbolo { width: 20px; height: 20px; vertical-align: -4px; margin-left: 2px; color: #007aff; } /* azul do iPhone */
.modal-rodape-centro { justify-content: center; }
.senha-regras { list-style: none; margin: 8px 0 0; padding: 0; font-size: .86rem; color: var(--texto-3); }
.senha-regras li { position: relative; padding-left: 22px; margin: 3px 0; }
.senha-regras li::before { content: "○"; position: absolute; left: 2px; }
.senha-regras li.ok { color: var(--tema-forte); }
.senha-regras li.ok::before { content: "✓"; font-weight: 800; }

/* ───── Termo de responsabilidade (termos/*) e "Ajustar minha ficha" ───── */
/* Texto legível (CDC: letra de pelo menos 12 pt). Aparece INTEIRO, sem rolagem própria (pedido da dona, 07/10/2026): com a
   caixa rolando por dentro, no celular o dedo "travava" no fim do termo antes de a página descer para os itens de marcar. */
.termo-texto { border: 1px solid var(--borda); border-radius: 12px; padding: 14px 16px;
    background: #fbfbfa; font-size: .95rem; line-height: 1.55; margin: 12px 0 18px; }
.termo-titulo { font-weight: 700; text-align: center; margin-bottom: 2px; }
.termo-versao { text-align: center; color: var(--texto-3); font-size: .85rem; }
.termo-secao h3 { font-size: .92rem; margin: 16px 0 6px; }
.termo-secao p { margin: 0 0 .6rem; text-align: justify; hyphens: auto; }
/* Cláusulas que limitam direitos: em destaque (CDC, art. 54, § 4º). */
.termo-destaque { border-left: 3px solid #a85207; padding-left: 10px; }
.termo-destaque p { font-weight: 600; }
.termo-guardado { white-space: pre-wrap; max-height: none; }
.termo-declaracoes { margin-bottom: 14px; scroll-margin-top: 64px; } /* #assinar não fica escondido embaixo da barra de cima */
.termo-declaracoes .feito { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-weight: 500; }
.termo-declaracoes .feito .txt { color: var(--texto); }
/* Quem assina o termo: nome e nascimento da etapa 1 do cadastro */
.termo-quem { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px; background: #fafaf8; }
.termo-quem .rotulo { margin: 0; }
.termo-quem strong { font-size: 1.05rem; }
.termo-quem .sub { margin: 0; }
.termo-quem a { margin-top: 4px; }
.termo-item { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--borda); color: var(--texto); text-decoration: none; }
.termo-registro { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: .9rem; margin: 0; }
.termo-registro dt { color: var(--texto-2); }
.termo-registro dd { margin: 0; }
.termo-hash { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; word-break: break-all; }
/* Ajustar minha ficha: o aviso de cada opção fora do padrão aparece quando ela é marcada. */
.aviso-opcao { display: none !important; color: #a85207 !important; margin-top: 4px; }
.opcao input:checked + .caixa .aviso-opcao { display: block !important; }
@media print { .termo-texto { max-height: none; overflow: visible; border: 0; padding: 0; background: none; } }

/* ───── Catálogo de exercícios (no ⋯ da ficha, ficha/exercicios) ───── */
.etiqueta-escolhido, .etiqueta-acima { display: inline-block; font-size: .72rem; font-weight: 600; border-radius: 999px; padding: 1px 8px; margin-left: 4px; vertical-align: 1px; }
.etiqueta-escolhido { background: var(--tema-suave); color: var(--tema-forte); }
.etiqueta-acima { background: var(--laranja-suave); color: #a85207; }
.filtros-duplos .seletor { flex: 1; min-width: 0; }
.so-o-que-tenho { margin: 2px 0 14px; font-weight: 500; }
.catalogo-ex .ex-catalogo { padding: 0; overflow: hidden; }
.catalogo-ex .ex-catalogo .corpo { padding: 14px 16px 16px; }
.catalogo-ex .ex-catalogo .grupo { font-size: .8rem; color: var(--texto-2); }
.catalogo-ex .ex-catalogo h4 { margin: 2px 0 8px; font-size: 1.05rem; }
.ex-catalogo.apagado { opacity: .6; }
.ex-catalogo.apagado .figura { filter: grayscale(1); }
.ex-motivo { font-size: .88rem; color: #a85207; margin: 8px 0 0; }
.como-faz { margin-bottom: 10px; }
.como-faz summary { cursor: pointer; color: var(--texto-2); font-size: .9rem; }
.como-faz .btn { margin-top: 8px; }
.colocar > summary { list-style: none; display: inline-flex; }
.colocar > summary::-webkit-details-marker { display: none; }
.colocar[open] > summary { display: none; }
.colocar form { display: grid; gap: 8px; }
.colocar .rotulo { margin: 0; }
.ex-na-lista { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .9rem;
    color: var(--tema-forte); background: var(--tema-suave); border-radius: 10px; padding: 4px 4px 4px 12px; }
.lista-extras h2 { font-size: 1.05rem; }
.lista-extras-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--borda); }
.lista-extras-item small { display: block; color: var(--texto-2); }
.lista-extras-item .btn-x { background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--texto-3); cursor: pointer; padding: 4px 8px; }
.lista-extras-confirmar { margin-top: 12px; }
.lista-extras-confirmar .pequeno { margin: 6px 0 0; text-align: center; }

/* ───── Cadastro: quadradinhos do ciclo sempre retos e IMC na hora (pedidos da dona, 07/10/2026) ───── */
.linha-alinhada > div { display: flex; flex-direction: column; justify-content: flex-end; }
.imc-caixa {
    margin: -4px 0 16px; padding: 10px 12px; border-radius: 10px;
    background: var(--tema-suave); border: 1px solid var(--tema-borda);
}
.imc-caixa strong { font-size: 1.15rem; margin: 0 4px; }
.imc-faixa { font-weight: 700; color: var(--tema-forte); }
.imc-caixa small { display: block; margin-top: 2px; font-size: .82rem; color: var(--texto-2); }
.imc-caixa.fora { background: var(--laranja-suave); border-color: var(--laranja-borda); }
.imc-caixa.fora .imc-faixa { color: var(--laranja); }

/* Ficha: "← Menu inicial" discreto no lugar da setinha do rodapé (não confunde com as setinhas ‹ › dos exercícios). */
.ficha-menu-inicial { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--borda); }
.ficha-menu-inicial a {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px;
    color: var(--texto-2); text-decoration: none; font-size: .92rem; font-weight: 600;
}
.ficha-menu-inicial svg { width: 18px; height: 18px; }

/* ───── Início: caixinha de avisos (menstruação chegando, compromissos dos próximos dias) ───── */
.avisos-lista { list-style: none; margin: 0; padding: 0 16px 12px; overflow: auto; }
.avisos-lista li + li { border-top: 1px solid var(--borda); }
.avisos-lista a, .avisos-item { display: flex; align-items: center; gap: 12px; padding: 12px 2px; color: var(--texto); text-decoration: none; }
.avisos-icone { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--tema-suave); display: grid; place-items: center; font-size: 1.2rem; }

/* Agenda: "+ Novo compromisso" no topo, ao lado do título. */
.agenda-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.agenda-titulo h1 { margin: 0; }
.agenda-titulo .btn { flex: none; min-height: 40px; padding: 8px 14px; font-size: .92rem; }

/* Lixeira que aparece embaixo enquanto arrasta a bolinha do chat no Início (soltar em cima tira o chat daquela lista). */
.chat-lixeira-alvo {
    position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); z-index: 39;
    width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff;
    background: rgba(28, 31, 29, .78); box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    opacity: 0; pointer-events: none; transform: translateX(-50%) scale(.85); transition: opacity .15s, transform .15s, background .15s;
}
.chat-lixeira-alvo svg { width: 28px; height: 28px; }
.chat-lixeira-alvo.visivel { opacity: 1; transform: translateX(-50%) scale(1); }
.chat-lixeira-alvo.em-cima { background: var(--vermelho); transform: translateX(-50%) scale(1.15); }
/* Mensagem nova não lida: bolinha do chat amarela forte (pedido da dona). */
.chat-flutuante.tem-nova { background: #facc15; color: #1c1f1d; box-shadow: 0 6px 20px rgba(234, 179, 8, .55); animation: chat-pulsa 1.6s ease-in-out infinite; }
@keyframes chat-pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.chat-flutuante.tem-nova.arrastando { animation: none; }

/* Meus dados e privacidade (LGPD, 08/10/2026): excluir a conta em vermelho (exceção à regra das cores: é "erro/perigo"). */
.cartao-perigo { border-color: var(--vermelho-borda); }
.btn-perigo { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.btn-perigo:hover { background: #991b1b; }

/* Gestor: alunos (13/10/2026) — nome/e-mail à esquerda, último acesso e validade à direita (embaixo no celular). */
.gestor-aluno { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.gestor-aluno:last-child { border-bottom: 0; }
.gestor-aluno-datas { text-align: right; flex: none; max-width: 55%; }
.gestor-aluno-datas > span { display: block; font-weight: 600; font-size: .92rem; }
.gestor-aluno-datas small { display: block; color: var(--texto-2); font-size: .8rem; margin-top: 2px; }
.gestor-sem { color: var(--texto-2); font-weight: 500 !important; font-style: italic; }
.chip.gestor-vencido { background: #fdecea; color: #b42318; }
.chip.gestor-vence { background: #fff4e5; color: #b54708; }
@media (max-width: 560px) {
    .gestor-aluno { flex-direction: column; align-items: stretch; gap: 4px; }
    .gestor-aluno-datas { text-align: left; max-width: none; }
}