/* Painel da Casa: layout do painel (C, "Agora"), celular, fotos, descanso e telas auxiliares. */
.carregando { padding: 40px 20px; color: var(--muted); }
a { color: var(--accent); }
.selo-sync { font-size: .78rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.selo-sync i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.selo-sync.off i { background: var(--sun); box-shadow: 0 0 0 3px var(--sun-soft); }
.selo-sync.erro i { background: var(--late); }
.linha { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.acoes a.icone { display: grid; place-items: center; text-decoration: none; color: var(--ink); }

/* ---------- Painel "Agora" ---------- */
.painel.C { grid-template: "agora hab hab" 1.12fr "agora merc fotos" 1fr / .86fr 1fr .92fr; }
.C #agora { grid-area: agora; gap: 16px; } .C #hab { grid-area: hab; } .C #merc { grid-area: merc; } .C #fotos { grid-area: fotos; }
.C #agora [data-mod="pendencias"] { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.C #agora [data-mod="pendencias"] > header h2 { font-size: 1.9rem; }
.saudacao { font-family: var(--display); font-style: italic; font-size: 1.5rem; color: var(--accent); }
.painel [data-mod="mercado"] > .lista, .painel [data-mod="pendencias"] > .lista { flex: 1 1 0; }
.C #merc .lista { display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 6px; }
/* a lista do mercado rola com o dedo dentro do cartão (o resto do painel fica parado) */
.painel [data-mod="mercado"] > .lista { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); padding-bottom: 18px; }
.painel [data-mod="mercado"] > .lista::-webkit-scrollbar { display: none; }
.C #merc .lista .mais { grid-column: 1 / -1; }
@media (orientation: portrait) {
  .painel.C { grid-template: "hab hab" auto "agora fotos" 1fr "agora merc" 1fr / 1fr 1fr; }
  .relogio .hora { font-size: 5rem; }
}

/* ---------- Layouts alternativos (⚙ → Layout do painel) ---------- */
.painel .rodape { margin-top: auto; }
#pend > [data-mod="pendencias"] { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
/* foto com relógio por cima */
#quadro { padding: 0; position: relative; }
#quadro .fotos-fundo { position: absolute; inset: 0; }
#quadro .sobre { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; padding: 18px 20px; pointer-events: none;
  background: linear-gradient(rgba(5, 12, 8, .55), transparent 45%, transparent 70%, rgba(5, 12, 8, .5)); }
#quadro .sobre .acoes, #quadro .sobre button { pointer-events: auto; }
#quadro .relogio, #quadro .relogio .data, #quadro .relogio .lua, #quadro .selo, #quadro .selo-sync { color: #F2F5EE; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
#quadro .fotos .legenda { display: none; }
.faixa-foto, .mini-foto { position: relative; border-radius: 18px; overflow: hidden; min-height: 0; }
.faixa-foto .legenda, .mini-foto .legenda { display: none; }

/* 2 · Quadro vivo: foto grande em cima */
.painel.L-quadro { grid-template: "q q p" 1fr "h h m" .9fr / 1fr 1fr .85fr; }
.L-quadro #quadro { grid-area: q; } .L-quadro #pend { grid-area: p; } .L-quadro #hab { grid-area: h; } .L-quadro #merc { grid-area: m; }
@media (orientation: portrait) { .painel.L-quadro { grid-template: "q q" .8fr "h h" auto "p m" 1fr / 1fr 1fr; } }

/* Hoje: uma faixa por grupo (cachorros, depois cada pessoa em ordem alfabética) */
.C #hab { gap: 4px; }
.C #hab .grupos { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-around; gap: 6px; }
.grupo { display: grid; grid-template-columns: 176px 1fr; gap: 14px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
/* no painel, cada grupo é uma linha só de mosaicos compactos (rola de lado se um dia não couber) */
.tile { font: inherit; color: inherit; cursor: pointer; -webkit-touch-callout: none; }
.hab { width: 100%; text-align: left; font: inherit; color: inherit; -webkit-touch-callout: none; }
.tile.segurando, .hab.segurando { transform: scale(.94); transition: transform .5s ease-in; }
.painel .grupo .fila { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; overscroll-behavior: contain; scrollbar-width: none; gap: 8px; padding-block: 2px; }
.painel .grupo .fila::-webkit-scrollbar { display: none; }
/* quando tem mais rotina do que cabe: a borda direita esmaece, sinal de que dá para arrastar */
.painel .grupo .fila.transborda { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); padding-right: 40px; }
.painel .grupo .tile { width: 100px; min-height: 0; flex: none; padding: 8px 6px 7px; border-radius: 18px; }
.painel .grupo .tile .anel { width: 52px; height: 52px; }
.painel .grupo .tile .anel .emoji { font-size: 1.35rem; }
.painel .grupo .tile .anel .dentro { font-size: 1.45rem; }
.painel .grupo .tile .t { font-size: .8rem; }
.painel .grupo .tile .s { font-size: .68rem; }
.painel .grupo .quem strong { font-size: 1.45rem; }
.painel .grupo .quem .av { width: 40px; height: 40px; font-size: 1.2rem; }
.grupo:last-child { border-bottom: 0; }
.grupo > .lado { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.grupo .quem .muted { display: none; }
.mini .escala { font-size: .8rem; } .mini .escala span { width: 54px; } .mini .escala .p i { width: 11px; height: 11px; }
.mini .destaque { font-size: 1rem; -webkit-line-clamp: 1; }
.mini .reg { min-height: 0; }
.mini .vazio { font-size: .8rem; }
@media (orientation: portrait) { .grupo { grid-template-columns: 170px 1fr; } .mini .destaque { display: none; } }

/* Hábito em mosaico com anel */
.fila { display: flex; gap: 10px; flex-wrap: wrap; }
.tile {
  position: relative; width: 124px; min-height: 124px; border-radius: 22px; padding: 10px 8px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--surface-2); border: 1px solid var(--line); text-align: center; transition: transform .15s, background .3s;
}
.tile:active { transform: scale(.96); }
.tile .anel { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.tile .anel svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.tile .anel circle { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.tile .anel .fundo { stroke: var(--line); }
.tile .anel .prog { stroke: var(--accent); }
.tile.qtd .anel .prog { stroke: var(--water); }
.tile.evitar .anel .prog { stroke: var(--sun); }
.tile .anel .emoji { font-size: 1.6rem; line-height: 1; }
.tile .anel .dentro { font-family: var(--display); font-size: 1.7rem; line-height: 1; }
.tile .t { font-weight: 700; font-size: .88rem; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .s { font-size: .74rem; color: var(--muted); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* na aba Hoje do celular a barra já tem o ＋: o do topo sai para não ficar dobrado */

.tile.feito { background: color-mix(in oklab, var(--accent) 16%, transparent); border-color: color-mix(in oklab, var(--accent) 35%, transparent); }
.tile.feito .anel .emoji { filter: saturate(1.1); }
.tile .ok { position: absolute; top: 8px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: .72rem; display: grid; place-items: center; font-weight: 700; }
.tile .det { position: absolute; inset: auto 0 0 0; height: 30px; }
/* brilho quando alguém completa */
.tile.brilha { animation: brilha .9s ease-out; }
.tile.brilha::after { content: ""; position: absolute; inset: -2px; border-radius: 24px; border: 2px solid var(--accent); animation: onda .9s ease-out forwards; pointer-events: none; }
@keyframes brilha { 0% { transform: scale(1); } 30% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes onda { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.25); } }

/* linha do mercado: item (toque = carrinho) + ⋯ editar (celular) + ✕ tirar da lista */
.linha-item { display: flex; align-items: center; gap: 2px; }
.linha-item > .item { flex: 1; min-width: 0; }
.mexer.tirar { color: var(--muted); font-size: .95rem; opacity: .7; }
.mexer.tirar:active { color: var(--late); opacity: 1; }

/* pendências: rolam dentro do cartão no painel, como o mercado */
.painel [data-mod="pendencias"] > .lista { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); padding-bottom: 18px; }
.painel [data-mod="pendencias"] > .lista::-webkit-scrollbar { display: none; }
/* datas especiais (aniversário, presente): o ícone no lugar da caixinha */
.pend.especial .box { border-style: dashed; display: grid; place-items: center; font-size: 1.15rem; }
.prazo.especial { background: color-mix(in oklab, var(--pet) 22%, transparent); color: var(--pet); }
.tipos-pend > button { flex: 1; }

/* item já no carrinho (na lista "Ver carrinho") */
.item.no-carrinho .bola { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.item.no-carrinho .n { color: var(--muted); text-decoration: line-through; }

/* ---------- Fotos ---------- */
.C #fotos { padding: 0; position: relative; }
.fotos { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r); background: var(--bg-2); }
.fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; transform: scale(1.02); }
.fotos img.on { opacity: 1; animation: kenburns 16s linear forwards; }
@keyframes kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -1.5%); } }
.fotos .legenda {
  position: absolute; inset: auto 0 0 0; padding: 40px 18px 14px; background: linear-gradient(transparent, rgba(5, 12, 8, .72));
  color: #F2F5EE; font-family: var(--display); font-style: italic; font-size: 1.2rem; display: flex; justify-content: space-between; align-items: end; gap: 10px;
}
.fotos .legenda .pts { display: flex; gap: 4px; flex: none; }
.fotos .legenda .pts i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.35); }
.fotos .legenda .pts i.on { background: #fff; }
.fotos .vazio-fotos { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; color: var(--muted); }

/* ---------- Economia de bateria ----------
   .dormindo: durante o descanso, nada anima por baixo da tela escura (antes, fundo e fotos
   continuavam gastando GPU). .economia: escolha nos ajustes — sem animação, sem desfoque. */
body.dormindo::before, body.dormindo::after, body.economia::before, body.economia::after { animation: none; }
body.dormindo .painel { visibility: hidden; }
body.economia .card, body.economia .veu { -webkit-backdrop-filter: none; backdrop-filter: none; }
body.economia .card { background: var(--surface-solid); }
body.economia .fotos img.on { animation: none; transform: none; }
body.economia .fotos img { transition-duration: .6s; }

/* No painel nada rola com o dedo: a página inteira fica presa à tela (só as sheets rolam). */
html:has(body.modo-painel), body.modo-painel { overflow: hidden; overscroll-behavior: none; }
body.modo-painel { position: fixed; top: 0; left: 0; right: 0; height: var(--altura-tela); }
html:has(body.modo-painel) { height: var(--altura-tela); background: var(--bg); }
[data-pessoa-menu] { cursor: pointer; }
.quem[data-pessoa-menu]:active { opacity: .7; }

/* ---------- Descanso: vira um quadro com as fotos em tela cheia e a hora por cima ---------- */
.descanso { position: fixed; top: 0; left: 0; right: 0; height: var(--altura-tela); z-index: 50; background: #000; cursor: pointer; animation: apaga 1.2s ease; overflow: hidden; }
.descanso .quadro { position: absolute; inset: 0; transition: opacity 2s; }
.descanso .quadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 2.5s ease; }
.descanso .quadro img.on { opacity: 1; animation: kenburns 22s linear forwards; }
body.economia .descanso .quadro img.on { animation: none; }
.descanso::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.05) 50%, rgba(0,0,0,.55)); }
.descanso .dorme { position: absolute; z-index: 1; color: #F2F5EE; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.descanso.com-fotos .dorme { left: calc(40px + env(safe-area-inset-left, 0px)); bottom: calc(34px + env(safe-area-inset-bottom, 0px)); }
.descanso:not(.com-fotos) .dorme { inset: 0; display: grid; place-content: center; text-align: center; color: #9FB3A3; opacity: .45; transition: transform 60s linear; }
.descanso .dorme .hora { font-family: var(--display); font-size: 8rem; line-height: .9; }
.descanso .dorme .sub { font-size: 1.05rem; margin-top: 10px; opacity: .9; }
/* à noite: o quadro quase apaga, a hora fica discreta */
.descanso.noite .quadro { opacity: .28; }
.descanso.noite .dorme { opacity: .5; }
.descanso.noite:not(.com-fotos) .dorme { opacity: .22; }
@keyframes apaga { from { opacity: 0; } }

/* ---------- Celular ---------- */
.cel { min-height: 100dvh; display: flex; flex-direction: column; }
.cel header.cabeca {
  position: sticky; top: 0; z-index: 5; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: linear-gradient(var(--bg) 70%, transparent);
}
.cel header.cabeca h1 { font-size: 2.2rem; }
.cel main { flex: 1 0 auto; padding: 4px 16px calc(100px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; }
.cel .card { overflow: visible; flex: none; }
.cel .lista { overflow: visible; }
.cel #aba > [data-mod="mercado"] > header h2, .cel #aba > [data-mod="pendencias"][data-form] > header h2 { display: none; }
.cel .fila { gap: 8px; }
.cel .tile { width: calc(33.33% - 6px); }
.abas {
  position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 10; display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface-solid); border: 1px solid var(--line); border-radius: 24px; padding: 6px; box-shadow: var(--sombra);
}
.abas button { min-height: 56px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: .76rem; color: var(--muted); font-weight: 700; }
.abas button span { font-size: 1.3rem; }
.abas button[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
.navdia { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.navdia strong { font-family: var(--display); font-weight: 400; font-size: 1.8rem; }

/* ---------- Entradas por toque (web/entradas.js) ---------- */
.grupo-op { display: flex; flex-wrap: wrap; gap: 8px; }
.grupo-op > button {
  min-height: 48px; padding: 0 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 700;
  transition: background .15s, border-color .15s, transform .1s;
}
.grupo-op > button:active { transform: scale(.95); }
.grupo-op > button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.grupo-op.emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
.grupo-op.emojis > button { min-height: 52px; padding: 0; font-size: 1.5rem; }
.grupo-op.emojis > button.on { background: var(--accent-soft); border: 2px solid var(--accent); color: inherit; }
.grupo-op.paleta > button { width: 52px; height: 52px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.grupo-op.paleta > button i { width: 34px; height: 34px; border-radius: 50%; display: block; }
.grupo-op.paleta > button.on { background: transparent; border: 3px solid var(--ink); }
.grupo-op.cartoes { display: grid; grid-template-columns: 1fr 1fr; }
.grupo-op.cartoes > button { min-height: 92px; padding: 10px 12px; border-radius: 18px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; text-align: left; }
.grupo-op.cartoes .ic { font-size: 1.4rem; }
.grupo-op.cartoes small { font-weight: 400; font-size: .8rem; opacity: .8; }
.grupo-op.quem-op > button { border-radius: 99px; }
.contador { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px; padding: 4px; align-self: flex-start; }
.contador button { width: 52px; height: 52px; border-radius: 14px; font-size: 1.6rem; background: var(--accent-soft); }
.contador button:active { transform: scale(.92); }
.contador output { font-family: var(--display); font-size: 2rem; min-width: 90px; text-align: center; font-variant-numeric: tabular-nums; }
.contador .un { color: var(--muted); margin-right: 8px; min-width: 40px; }
.escolha.caras button { min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: var(--body); }
.escolha.caras button span { font-size: 1.9rem; line-height: 1; }
.escolha.caras button small { font-size: .66rem; font-weight: 700; opacity: .85; }
.escolha.caras button.on { background: var(--accent-soft); border: 2px solid var(--accent); color: var(--ink); transform: scale(1.04); }
.escala .cara { font-size: 1.05rem; width: 22px; }
.outra-data { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; position: relative; min-height: 44px; align-self: flex-start; padding: 0 14px; border-radius: 14px; border: 1px dashed var(--line); }
.outra-data input { position: absolute; inset: 0; opacity: 0; width: 100%; }
details.campo > summary { cursor: pointer; list-style: none; min-height: 40px; display: flex; align-items: center; }
details.campo > summary::before { content: "＋ "; color: var(--accent); }
details.campo[open] > summary::before { content: "− "; }
.chips.toque .chip { min-height: 48px; }
.chip.alerta { background: var(--sun-soft); color: var(--sun); border-color: transparent; margin-left: 6px !important; }
.chips.toque .chip.apagar { background: var(--late-soft); color: var(--late); border-color: transparent; }
.chips.toque .chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.rapido { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rapido button {
  min-height: 120px; border-radius: 22px; background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end; gap: 2px; padding: 14px; text-align: left; transition: transform .1s;
}
.rapido button:active { transform: scale(.96); }
.rapido button span { font-size: 2rem; margin-bottom: auto; }
.rapido button b { font-family: var(--display); font-weight: 400; font-size: 1.4rem; }
.rapido button small { color: var(--muted); font-size: .8rem; }
.anotar button.mais-barra { font-size: 1.7rem; padding: 0; width: var(--toque); }
.icone.mais-rapido { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-size: 1.4rem; font-weight: 700; }
[data-mod="pendencias"] > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card > header .chip, [data-mod] > header .chip { min-height: 40px; padding: 0 12px; margin-left: auto; }
.card > header { align-items: center; }

/* ---------- Formulários, ajustes, pareamento ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label, .rot { font-weight: 700; font-size: .92rem; }
.campo input, .campo select, .campo textarea, .sel {
  min-height: 52px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); padding: 0 14px; width: 100%;
}
.campo textarea { padding: 12px 14px; min-height: 110px; resize: vertical; }
.sel { min-height: 48px; }
select option { background: var(--surface-solid); color: var(--ink); }
.dica { font-size: .84rem; color: var(--muted); }
.privado-tag { font-size: .74rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 99px; padding: 3px 10px; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.botao { min-height: 52px; border-radius: 16px; background: var(--accent); color: var(--accent-ink); font-weight: 700; padding: 0 18px; }
.botao.sec { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.botao.perigo { background: var(--late-soft); color: var(--late); }
.mexer { min-width: 44px; min-height: 44px; border-radius: 12px; color: var(--muted); }
.ajuste { display: flex; flex-direction: column; gap: 10px; padding-block: 8px 14px; border-bottom: 1px solid var(--line); }
.ajuste:last-child { border-bottom: 0; }
.opcoes { display: flex; gap: 8px; flex-wrap: wrap; }
.opcoes button { min-height: 48px; padding: 0 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 700; }
.opcoes button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.linha-hab { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; min-height: 52px; }
.linha-hab.arq { opacity: .5; }
.parear { max-width: 520px; margin: 0 auto; padding: calc(40px + env(safe-area-inset-top, 0px)) 20px 40px; display: flex; flex-direction: column; gap: 16px; }
.parear h1 { font-size: 3rem; }
.toast .opts { display: flex; gap: 8px; flex-wrap: wrap; }
.toast.erro { background: var(--late); color: #1a0d08; }
.toast.pergunta { flex-direction: column; align-items: stretch; padding: 14px; }