/* Álbum da Casa — DimoraIA
   Identidade: dourado #a0892c/#806600 · petróleo #006680/#0088aa · areia #f7f2ea · barro #3a3128
   Herdado do Planner v1.1 e estendido para a casca do Álbum (escopo GATE#2248). */

:root{
  --dourado:#a0892c; --dourado-esc:#806600;
  --petroleo:#006680; --petroleo-cl:#0088aa;
  --areia:#f7f2ea; --barro:#3a3128; --cinza:#6b6560; --linha:#e3dccf; --branco:#fff;
  --risco-alto:#a8492c; --risco-alto-bg:#f8e8e2;
  --ok-bg:#eef6ea; --ok-fg:#4c7a3a; --ok-linha:#bcd9b0;
  --font-titulo:'Fraunces',Georgia,'Times New Roman',serif;
  --font-texto:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:ui-monospace,'Cascadia Mono',Menlo,Consolas,monospace;
  --raio:11px; --sombra:0 2px 10px rgba(58,49,40,.07);
}
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  background:var(--areia); color:var(--barro);
  font-family:var(--font-texto); font-size:15px; line-height:1.5;
  padding-bottom:82px; -webkit-font-smoothing:antialiased;
}
a{ color:var(--petroleo) }
.oculto{ display:none !important }
.tenue{ font-size:13px; color:var(--cinza); line-height:1.6 }

/* ---------- topo ---------- */
.topo{
  display:flex; align-items:center; gap:12px; padding:14px 16px 10px;
  background:linear-gradient(160deg,#fdfbf7 55%,var(--areia));
  border-bottom:1px solid var(--linha); position:sticky; top:0; z-index:8;
}
.topo img{ height:32px; width:auto }
.btn-voltar{ width:36px; height:36px; flex:0 0 36px; border:1px solid var(--linha); background:#fffdf9;
  border-radius:50%; color:var(--petroleo); font-size:19px; line-height:1; cursor:pointer;
  font-family:var(--font-texto); display:grid; place-items:center; padding:0 }
.btn-voltar:active{ background:var(--linha) }
.topo .titulos{ flex:1; min-width:0 }
.topo h1{ font-family:var(--font-titulo); font-size:17px; margin:0; line-height:1.2 }
.topo .sub{ font-size:11.5px; color:var(--cinza) }
.selo-perfil{
  width:36px; height:36px; border-radius:50%; background:var(--petroleo); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:15px; flex:0 0 36px;
}
.selo-perfil.crianca{ background:var(--dourado) }
.selo-perfil.vazio{ background:transparent; color:var(--cinza); border:1.5px dashed #cfc6b4; font-size:20px; font-weight:400 }

/* ---------- módulos ---------- */
main{ padding:15px 16px 0 }
.modulo{ display:none }
.modulo.ativo{ display:block }
.sub-modulo{ display:none }
.sub-modulo.ativo{ display:block }
h2{ font-family:var(--font-titulo); font-size:21px; margin:0 0 4px; letter-spacing:-.01em }
.desc{ font-size:12.5px; color:var(--cinza); margin:0 0 14px; line-height:1.55 }
.selo{
  display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--petroleo); font-weight:700; margin-bottom:5px;
}
.secao{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cinza); margin:20px 0 9px; font-weight:700;
}
.secao:first-child{ margin-top:2px }
.cartao{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  padding:13px 14px; margin-bottom:11px; box-shadow:var(--sombra);
}
.cartao-titulo{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-family:var(--font-titulo); font-size:15px; margin-bottom:9px;
}
.vazio{ font-size:12.5px; color:var(--cinza); padding:9px 0; text-align:center }
.pill-contagem{
  font-family:var(--mono); font-size:11px; font-weight:700; background:#f2ece0;
  color:var(--cinza); padding:3px 9px; border-radius:999px; white-space:nowrap;
}

/* ---------- abas do item ---------- */
.abas{ display:flex; gap:6px; margin:10px 0 14px }
.abas button{
  flex:1; border:1px solid var(--linha); background:#fffdf9; color:var(--cinza);
  border-radius:9px; padding:9px 6px; font-size:13px; font-weight:600;
  font-family:var(--font-texto); cursor:pointer;
}
.abas button.ativo{ background:var(--petroleo); border-color:var(--petroleo); color:#fff }

/* ---------- perfis ---------- */
.faixa-perfis{ display:flex; gap:9px; overflow-x:auto; padding-bottom:3px }
.perfil{ text-align:center; flex:0 0 68px; cursor:pointer }
.perfil .selo-perfil{ margin:0 auto 5px; width:46px; height:46px; flex:0 0 46px; font-size:18px; opacity:.5; transition:opacity .15s }
.perfil.on .selo-perfil{ opacity:1; box-shadow:0 0 0 3px rgba(0,102,128,.18) }
.perfil .nome-perfil{ font-size:11px; color:var(--cinza); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.perfil.on .nome-perfil{ color:var(--barro); font-weight:700 }

/* ---------- estante ---------- */
.prateleira{ display:grid; grid-template-columns:1fr 1fr; gap:11px }
.item{
  background:var(--branco); border:1px solid var(--linha); border-radius:14px;
  padding:13px 12px 12px; box-shadow:var(--sombra); position:relative;
}
.item[data-modulo]{ cursor:pointer }
.item[data-modulo]:active{ transform:scale(.985) }
.item .ico{ width:38px; height:38px; color:var(--petroleo); margin-bottom:8px; display:block }
.item b{ display:block; font-family:var(--font-titulo); font-size:14.5px; line-height:1.2; margin-bottom:3px }
.item span{ font-size:11px; color:var(--cinza); line-height:1.4; display:block }
.item.bloq{ background:#faf6ef; border-style:dashed }
.item.bloq .ico{ color:#bcb3a4 }
.item.bloq b{ color:var(--cinza) }
.item .fita{
  position:absolute; top:9px; right:9px; font-size:9px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; background:var(--dourado); color:#fff; padding:2.5px 7px; border-radius:999px;
}
.item .fita.novo{ background:var(--petroleo) }
.aviso-privacidade{ margin-top:16px; background:#fffdf9; font-size:11.5px; color:var(--cinza); line-height:1.6 }
.aviso-privacidade b{ color:var(--barro) }

/* ---------- pictogramas ---------- */
svg.ico,svg.ico-selo,svg.ico-evitou,.navfixa svg{
  fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- limpeza ---------- */
.faixa-semana{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:12.5px; color:var(--cinza); margin-bottom:11px;
}
.faixa-semana b{ color:var(--barro) }
.linha-tarefa{ display:flex; align-items:flex-start; gap:11px; padding:9px 0; border-bottom:1px solid var(--linha) }
.linha-tarefa:last-child{ border-bottom:0 }
.linha-tarefa input[type=checkbox]{ width:22px; height:22px; margin:1px 0 0; flex:0 0 22px; accent-color:var(--petroleo) }
.linha-texto{ flex:1; min-width:0 }
.linha-tarefa label{ cursor:pointer }
.linha-tarefa .dia{ font-weight:700; font-size:13.5px }
.foco-texto{ display:block; font-size:12.5px; color:var(--cinza); line-height:1.45; cursor:text; margin-top:2px }
.foco-texto.personalizado{ color:var(--petroleo) }
.foco-texto .lapis{ opacity:.35; margin-left:5px; font-size:11px }
.foco-editor{
  width:100%; font-family:var(--font-texto); font-size:12.5px; padding:6px 8px;
  border:1.5px solid var(--petroleo); border-radius:7px; margin-top:3px;
}
.linha-tarefa.feito .dia,.linha-tarefa.feito label{ text-decoration:line-through; opacity:.55 }
.grade-basicos{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px }
.grade-basicos .linha-tarefa{ font-size:13px }
.btn-restaurar{
  background:none; border:0; color:var(--cinza); font-size:11px; text-decoration:underline;
  cursor:pointer; font-family:var(--font-texto); padding:0;
}

/* ---------- manutenção ---------- */
.grade-meses{ display:grid; gap:11px }
.mes-card.mes-atual{ border-color:var(--petroleo); box-shadow:0 0 0 2px rgba(0,102,128,.1),var(--sombra) }
.mes-nome{ font-family:var(--font-titulo) }
.tarefa-manutencao{
  display:grid; grid-template-columns:22px 1fr auto; gap:9px; align-items:center;
  padding:8px 0; border-bottom:1px solid var(--linha);
}
.tarefa-manutencao:last-of-type{ border-bottom:0 }
.tarefa-manutencao input[type=checkbox]{ width:22px; height:22px; accent-color:var(--petroleo) }
.tarefa-manutencao label{ font-size:13.5px; line-height:1.35; cursor:pointer }
.tarefa-manutencao.feito label{ text-decoration:line-through; opacity:.55 }
.tarefa-manutencao .risco{
  grid-column:2; font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px;
  justify-self:start; background:#f2ece0; color:var(--cinza);
}
.tarefa-manutencao .risco.alto{ background:var(--risco-alto-bg); color:var(--risco-alto) }
.tarefa-manutencao .btn-ics{
  grid-row:1; grid-column:3; background:none; border:1px solid var(--linha); color:var(--petroleo);
  font-size:11px; border-radius:7px; padding:4px 9px; cursor:pointer; font-family:var(--font-texto);
}
.tarefa-manutencao .remover-tarefa{
  grid-row:2; grid-column:3; background:none; border:0; color:#c4bbab; font-size:14px;
  cursor:pointer; justify-self:end; padding:0 4px;
}
.form-add-tarefa{ display:flex; gap:7px; margin-top:10px }
.form-add-tarefa input{
  flex:1; min-width:0; font-family:var(--font-texto); font-size:12.5px; padding:8px 10px;
  border:1px solid var(--linha); border-radius:8px;
}
.form-add-tarefa button{
  background:#f2ece0; border:0; color:var(--cinza); font-size:12px; font-weight:600;
  border-radius:8px; padding:8px 11px; cursor:pointer; font-family:var(--font-texto); white-space:nowrap;
}

/* ---------- despensa ---------- */
.form-inline{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:11px }
.form-inline input{
  flex:1; min-width:96px; font-family:var(--font-texto); font-size:13px; padding:9px 11px;
  border:1px solid var(--linha); border-radius:8px;
}
.tabela-scroll{ overflow-x:auto }
.tabela-despensa{ width:100%; border-collapse:collapse; font-size:13px }
.tabela-despensa th{
  font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--cinza); text-align:left; padding:7px 8px; border-bottom:1px solid var(--linha); white-space:nowrap;
}
.tabela-despensa td{ padding:9px 8px; border-bottom:1px solid var(--linha) }
.tabela-despensa tr:last-child td{ border-bottom:0 }
.tabela-despensa input[type=checkbox]{ width:20px; height:20px; accent-color:var(--petroleo) }
.venc-perto{ background:var(--risco-alto-bg) }
.tag-validade{ font-size:11px; font-weight:600; white-space:nowrap }
.tag-validade.perto{ color:var(--risco-alto) }
.tag-validade.ok{ color:var(--cinza) }

/* ---------- compras ---------- */
.grade-corredores{ display:grid; gap:11px }
.item-compra{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--linha) }
.item-compra:last-child{ border-bottom:0 }
.item-compra input[type=checkbox]{ width:22px; height:22px; flex:0 0 22px; accent-color:var(--petroleo) }
.item-compra label{ flex:1; font-size:13.5px; cursor:pointer }
.item-compra.feito label{ text-decoration:line-through; opacity:.5 }
.item-compra .del{ background:none; border:0; color:#c4bbab; font-size:14px; cursor:pointer; padding:0 4px }
.item-compra .ico-item{ width:24px; height:24px; flex:0 0 24px; color:var(--petroleo);
  fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round }
.item-compra.feito .ico-item{ color:#cfc6b4 }
.tit-corredor{ display:flex; align-items:center; gap:8px; min-width:0 }
.ico-corredor{ width:22px; height:22px; flex:0 0 22px; color:var(--petroleo);
  fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round }

/* ---------- ficha de quem mora aqui ---------- */
.perfil{ position:relative }
.abrir-ficha{ display:block; margin:3px auto 0; background:none; border:0; color:var(--petroleo);
  font-size:10px; font-weight:700; text-decoration:underline; cursor:pointer; font-family:var(--font-texto); padding:0 }
.cab-ficha{ display:flex; align-items:center; gap:12px; margin-bottom:4px }
.cab-ficha .selo-perfil{ width:52px; height:52px; flex:0 0 52px; font-size:22px }
.cab-ficha input{ flex:1; min-width:0; font-family:var(--font-titulo); font-size:19px; padding:8px 11px;
  border:1px solid var(--linha); border-radius:9px; background:var(--branco); color:var(--barro) }
.abas-tipo button{ flex:1 }
.chips-cuidado{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px }
.chip-cuidado{ font-size:12.5px; background:#fffdf9; border:1.5px solid var(--linha); border-radius:999px;
  padding:8px 13px; color:var(--cinza); cursor:pointer; font-family:var(--font-texto); font-weight:600 }
.chip-cuidado.on{ background:var(--petroleo); border-color:var(--petroleo); color:#fff }
.rot-campo{ display:block; font-size:11px; color:var(--cinza); font-weight:600; margin:0 0 4px }
#ficha-naocome{ width:100%; font-family:var(--font-texto); font-size:13.5px; padding:10px 11px;
  border:1px solid var(--linha); border-radius:8px; background:var(--branco) }

/* ---------- seletor de pessoa (remédios) ---------- */
.seletor-pessoa{ display:flex; gap:7px; overflow-x:auto; padding-bottom:4px; margin-bottom:14px }
.seletor-pessoa button{ white-space:nowrap; font-size:13px; background:#fffdf9; border:1.5px solid var(--linha);
  border-radius:999px; padding:8px 14px; color:var(--cinza); cursor:pointer;
  font-family:var(--font-texto); font-weight:600 }
.seletor-pessoa button.on{ background:var(--petroleo); border-color:var(--petroleo); color:#fff }
.seletor-pessoa button i{ font-style:normal; font-family:var(--mono); font-size:11px; opacity:.75; margin-left:4px }

/* ---------- cuidado individual no cardápio ---------- */
.cuidado-dia{ background:var(--risco-alto-bg); border-left:3px solid var(--risco-alto);
  border-radius:0 9px 9px 0; padding:9px 12px; margin:0 0 8px; font-size:12.5px;
  line-height:1.45; cursor:pointer }
.cuidado-dia b{ color:var(--barro) }
.cuidado-dia span{ color:var(--cinza); font-size:11.5px }
.cuidado-dia.resolvido{ background:var(--ok-bg); border-left-color:var(--ok-fg) }
.cuidado-dia .variacao{ margin-top:4px; font-size:12.5px; color:var(--ok-fg) }
.cuidado-dia .variacao b{ color:var(--ok-fg) }
.btn-variacao{ display:block; margin-top:6px; background:none; border:0; padding:0;
  color:var(--risco-alto); font-size:12px; font-weight:700; text-decoration:underline;
  cursor:pointer; font-family:var(--font-texto) }

/* ---------- cardápio ---------- */
.lista-dias-cardapio{ padding:4px 14px }
.dia-refeicao{ display:grid; grid-template-columns:46px 1fr; gap:11px; align-items:center;
  padding:11px 0; border-bottom:1px solid var(--linha); cursor:pointer }
.dia-refeicao:last-child{ border-bottom:0 }
.dia-refeicao .dia{ font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--cinza); font-weight:700; text-align:center }
.dia-refeicao .prato{ font-size:14px; font-weight:600; line-height:1.25 }
.dia-refeicao .prato.livre{ color:var(--cinza); font-weight:400 }
.dia-refeicao .prato small{ display:block; font-weight:400; font-size:11.5px; color:var(--cinza); margin-top:2px }
.etq{ display:inline-block; font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px; margin-top:5px }
.etq.tem{ background:var(--ok-bg); color:var(--ok-fg) }
.etq.falta{ background:var(--risco-alto-bg); color:var(--risco-alto) }
.editor-dia{ background:#fffdf9; border:1.5px solid var(--petroleo); border-radius:12px; padding:12px; margin:2px 0 10px }
.editor-dia label{ display:block; font-size:11px; color:var(--cinza); margin:0 0 4px; font-weight:600 }
.editor-dia input{ width:100%; font-family:var(--font-texto); font-size:13.5px; padding:9px 11px;
  border:1px solid var(--linha); border-radius:8px; margin-bottom:9px }
.usar-antes{ border-left:4px solid var(--risco-alto) }
.usar-antes b{ font-family:var(--font-titulo); font-size:14.5px; display:block; margin-bottom:5px }
.usar-antes div{ font-size:12.5px; line-height:1.65 }
.resumo-lista{ background:linear-gradient(135deg,#e7f2f5,#f2f7f2); border:1px solid #cfe3e8;
  border-radius:14px; padding:14px 15px; margin-top:11px }
.resumo-lista b{ font-family:var(--font-titulo); font-size:15px; display:block; margin-bottom:3px }
.resumo-lista p{ margin:0 0 10px; font-size:12.5px; color:var(--cinza); line-height:1.45 }
.botao{ display:block; width:100%; text-align:center; background:var(--petroleo); color:#fff; border:0;
  border-radius:10px; padding:12px; font-size:14px; font-weight:700; font-family:var(--font-texto); cursor:pointer }

/* ---------- quadro de remédios ---------- */
.pessoa-rem{ display:flex; align-items:center; gap:10px; margin:18px 0 9px }
.pessoa-rem .selo-perfil{ width:32px; height:32px; flex:0 0 32px; font-size:13px }
.pessoa-rem b{ font-family:var(--font-titulo); font-size:15px }
.rem{ display:grid; grid-template-columns:32px 1fr auto 22px; gap:10px; align-items:center;
  background:var(--branco); border:1px solid var(--linha); border-radius:11px;
  padding:11px 12px; margin-bottom:8px; cursor:pointer; box-shadow:var(--sombra) }
.rem .ic-rem{ width:32px; height:32px; color:var(--petroleo);
  fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round }
.rem .nome-rem{ font-size:14px; font-weight:600; line-height:1.25 }
.rem .nome-rem small{ display:block; font-weight:400; font-size:11.5px; color:var(--cinza); margin-top:2px }
.rem .hora-rem{ font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--petroleo); text-align:right; line-height:1.4 }
.rem .hora-rem span{ display:block; font-family:var(--font-texto); font-size:9.5px; font-weight:400; color:var(--cinza) }
.rem.tomado{ background:var(--ok-bg); border-color:var(--ok-linha) }
.rem.tomado .ic-rem,.rem.tomado .hora-rem{ color:var(--ok-fg) }
.rem .apagar-rem{ background:none; border:0; color:#c4bbab; font-size:14px; cursor:pointer; padding:0 }
.aviso-alarme{ display:flex; gap:11px; align-items:flex-start; background:#fffdf9;
  border:1.5px solid var(--dourado); border-radius:12px; padding:12px 13px; margin:16px 0 10px }
.aviso-alarme svg{ width:26px; height:26px; flex:0 0 26px; color:var(--dourado); margin-top:1px;
  fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round }
.aviso-alarme p{ margin:0; font-size:12.5px; line-height:1.55 }
.aviso-alarme b{ display:block; font-family:var(--font-titulo); font-size:14px; margin-bottom:3px }
.form-remedio input,.form-remedio select{ width:100%; font-family:var(--font-texto); font-size:13.5px;
  padding:10px 11px; border:1px solid var(--linha); border-radius:8px; margin-bottom:9px; background:var(--branco) }
.form-remedio .linha-form{ display:flex; gap:9px; align-items:center }
.para-quem{ flex:1; min-width:0; font-size:13.5px; color:var(--cinza); padding:10px 11px;
  background:#f2f8f9; border:1px solid #cfe3e8; border-radius:8px; margin-bottom:9px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.para-quem b{ color:var(--petroleo) }
.form-remedio .linha-form input,.form-remedio .linha-form select{ flex:1; min-width:0 }
.form-remedio .btn{ width:100% }

/* ---------- e agora? ---------- */
.busca{ display:flex; align-items:center; gap:9px; background:var(--branco); border:1.5px solid var(--linha);
  border-radius:11px; padding:4px 13px; margin-bottom:14px }
.busca svg{ width:18px; height:18px; flex:0 0 18px; color:var(--petroleo);
  fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round }
.busca input{ flex:1; border:0; outline:0; background:none; font-family:var(--font-texto);
  font-size:14.5px; padding:9px 0; color:var(--barro); min-width:0 }
.socorro{ background:var(--branco); border:1px solid var(--linha); border-left:4px solid var(--petroleo);
  border-radius:11px; padding:12px 14px; margin-bottom:10px; box-shadow:var(--sombra) }
.socorro b{ font-family:var(--font-titulo); font-size:15px; display:block; margin-bottom:5px }
.socorro ol{ margin:0; padding-left:18px; font-size:13px; line-height:1.7 }
.aviso-nunca{ margin-top:9px; font-size:11.5px; color:var(--risco-alto); font-weight:700; line-height:1.5 }
.chips{ display:flex; flex-wrap:wrap; gap:7px }
.chips span{ font-size:12px; background:#fffdf9; border:1px solid var(--linha); border-radius:999px;
  padding:6px 11px; color:var(--cinza); cursor:pointer }
.acervo{ margin-top:16px; text-align:center }
.acervo b{ font-family:var(--font-titulo); font-size:15px }

/* ---------- Casa da Mia ---------- */
.ico-foto{ width:38px; height:38px; border-radius:50%; object-fit:cover; display:block;
  margin-bottom:8px; border:2px solid var(--dourado) }
.mia-cab{ display:flex; align-items:center; gap:13px; background:linear-gradient(135deg,#e7f2f5,#fff6dd);
  border:1px solid #cfe3e8; border-radius:16px; padding:13px 15px; margin-bottom:6px }
.mia-rosto{ width:60px; height:60px; flex:0 0 60px; border-radius:50%; object-fit:cover;
  border:3px solid var(--branco); box-shadow:0 2px 8px rgba(58,49,40,.18) }
.mia-cab b{ display:block; font-family:var(--font-titulo); font-size:16.5px; line-height:1.2 }
.mia-cab span{ font-size:12.5px; color:var(--cinza) }
.fala-mia{ border-left:4px solid var(--dourado) }
.fala-mia b{ font-family:var(--font-titulo); font-size:15.5px; display:block; margin-bottom:6px; line-height:1.25 }
.fala-mia p{ margin:0 0 9px; font-size:13.5px; line-height:1.6 }
.sabia{ background:#fffdf9; border:1px dashed var(--dourado); border-radius:9px;
  padding:9px 11px; font-size:12.5px; line-height:1.5; color:var(--barro) }
.rodape-fala{ font-size:11px; color:var(--cinza); margin-top:9px }
.socorro.curiosa{ border-left-color:var(--dourado) }
.socorro.curiosa p{ margin:0 0 9px; font-size:13px; line-height:1.6 }

/* ---------- Meu Pet ---------- */
.cab-pet{ display:flex; align-items:center; gap:12px; background:var(--branco);
  border:1px solid var(--linha); border-radius:14px; padding:13px 14px; margin-bottom:12px;
  box-shadow:var(--sombra) }
.retrato-pet{ width:42px; height:42px; flex:0 0 42px; color:var(--petroleo);
  fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round }
.cab-pet b{ display:block; font-family:var(--font-titulo); font-size:17px; line-height:1.2 }
.cab-pet span{ font-size:12px; color:var(--cinza) }
.cab-pet .alerta{ display:inline; color:var(--risco-alto); font-family:var(--font-texto); font-size:12px }
.cuidado-pet{ display:grid; grid-template-columns:30px 1fr auto; gap:10px; align-items:center;
  background:var(--branco); border:1px solid var(--linha); border-radius:11px;
  padding:11px 12px; margin-bottom:8px; box-shadow:var(--sombra) }
.cuidado-pet .ic-pet{ width:30px; height:30px; color:var(--petroleo);
  fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round }
.cuidado-pet .nome-cuidado{ font-size:14px; font-weight:600; line-height:1.25 }
.cuidado-pet .nome-cuidado small{ display:block; font-weight:400; font-size:11px; color:var(--cinza); margin-top:2px }
.cuidado-pet .quando{ font-size:12px; font-weight:700; text-align:right; white-space:nowrap; color:var(--cinza) }
.cuidado-pet .quando.ok{ color:var(--ok-fg) }
.cuidado-pet .quando.perto{ color:var(--dourado-esc) }
.cuidado-pet .quando.vencido{ color:var(--risco-alto) }
.cuidado-pet .quando.nunca{ color:var(--cinza); font-weight:400 }
.cuidado-pet.vencido{ background:var(--risco-alto-bg); border-color:#e5c9c0 }
.cuidado-pet.vencido .ic-pet{ color:var(--risco-alto) }
.btn-feito{ grid-column:3; grid-row:2; justify-self:end; background:none; border:1px solid var(--linha);
  color:var(--petroleo); font-size:11px; border-radius:7px; padding:4px 9px; cursor:pointer;
  font-family:var(--font-texto); white-space:nowrap }

/* ---------- figurinhas ---------- */
.nova-fig{ display:flex; gap:12px; align-items:center; background:var(--branco);
  border:2px solid var(--dourado); border-radius:16px; padding:13px 14px; margin-bottom:14px }
.nova-fig .mini{ width:46px; height:58px; flex:0 0 46px; border-radius:9px; border:2px solid var(--dourado);
  display:grid; place-items:center; padding:8px; color:var(--petroleo) }
.nova-fig .mini svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:4;
  stroke-linecap:round; stroke-linejoin:round }
.nova-fig b{ display:block; font-family:var(--font-titulo); font-size:15px }
.nova-fig span{ font-size:11.5px; color:var(--cinza) }
.capa-col{ background:linear-gradient(135deg,#fff6dd,#f2ece0); border:1px solid #ece0c4;
  border-radius:16px; padding:15px; margin-bottom:14px; text-align:center }
.capa-col .nome-col{ font-family:var(--font-titulo); font-size:18px; line-height:1.2; margin-bottom:3px }
.capa-col .sub-col{ font-size:11.5px; color:var(--cinza) }
.colecao{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px }
.fig{ aspect-ratio:.78; border-radius:11px; display:grid; place-items:center; padding:11%;
  position:relative; overflow:hidden }
.fig svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:4;
  stroke-linecap:round; stroke-linejoin:round }
.fig.colada{ border:2px solid var(--dourado); color:var(--petroleo); box-shadow:var(--sombra);
  padding:9% 7% 15%; cursor:pointer }
.fig.colada.tom-petroleo{ background:linear-gradient(160deg,#e7f2f5,#fdfbf7 70%) }
.fig.colada.tom-dourado{ background:linear-gradient(160deg,#fff6dd,#fdfbf7 70%); color:var(--dourado-esc) }
.fig.colada.recem{ border-width:3px }
/* Figurinha com ilustração = SELO: moldura branca recortada, serrilha na borda, a arte
   dentro e o nome na tarja de baixo. O número vira lacre dourado no canto. */
.fig.colada.com-foto{
  padding:5px 5px 0; background:#fffdf9; border:0; overflow:visible;
  display:flex; flex-direction:column; align-items:stretch;
  filter:drop-shadow(0 2px 4px rgba(58,49,40,.22));
  /* serrilha: círculos vazados repetidos nas quatro bordas */
  -webkit-mask:
    radial-gradient(circle 2.6px at 50% 0, transparent 96%, #000 100%) 0 0/8px 100% repeat-x,
    radial-gradient(circle 2.6px at 50% 100%, transparent 96%, #000 100%) 0 100%/8px 100% repeat-x,
    radial-gradient(circle 2.6px at 0 50%, transparent 96%, #000 100%) 0 0/100% 8px repeat-y,
    radial-gradient(circle 2.6px at 100% 50%, transparent 96%, #000 100%) 100% 0/100% 8px repeat-y,
    linear-gradient(#000, #000);
  -webkit-mask-composite:source-in;
  mask:
    radial-gradient(circle 2.6px at 50% 0, transparent 96%, #000 100%) 0 0/8px 100% repeat-x,
    radial-gradient(circle 2.6px at 50% 100%, transparent 96%, #000 100%) 0 100%/8px 100% repeat-x,
    radial-gradient(circle 2.6px at 0 50%, transparent 96%, #000 100%) 0 0/100% 8px repeat-y,
    radial-gradient(circle 2.6px at 100% 50%, transparent 96%, #000 100%) 100% 0/100% 8px repeat-y,
    linear-gradient(#000, #000);
  mask-composite:intersect;
}
.fig.colada.com-foto img{ position:static; width:100%; flex:1; min-height:0; object-fit:cover; border-radius:3px }
.fig.colada.com-foto em{ position:static; background:none; text-shadow:none; color:var(--barro);
  padding:5px 4px 6px; font-size:9px; line-height:1.15 }
.fig.colada.com-foto .num{
  top:9px; right:9px; bottom:auto; width:19px; height:19px; border-radius:50%;
  background:var(--dourado); color:#fff; display:grid; place-items:center; font-size:8.5px;
  box-shadow:0 1px 3px rgba(58,49,40,.3) }
.fig.colada em{ position:absolute; left:0; right:0; bottom:11px; font-style:normal;
  font-family:var(--font-titulo); font-size:9.5px; line-height:1.15; text-align:center;
  padding:0 5px; color:var(--barro) }
.fig.verso{ background:var(--branco); border:2px solid var(--dourado); padding:8px 8px 14px;
  align-items:flex-start; cursor:pointer; overflow:hidden }
.fig.verso .verso-txt{ font-size:8.5px; line-height:1.3; color:var(--barro); text-align:left; width:100% }
.fig.verso .verso-txt b{ display:block; font-family:var(--font-titulo); font-size:9.5px;
  line-height:1.2; margin-bottom:4px; color:var(--petroleo) }
.fig.verso .verso-txt p{ margin:0 0 4px }
.fig.verso .verso-txt i{ font-style:normal; color:var(--dourado-esc); font-weight:600 }
.fig.vazia{ background:repeating-linear-gradient(45deg,#f2ece0,#f2ece0 6px,#eee6d6 6px,#eee6d6 12px);
  border:2px dashed #d9cfb8; color:#cfc6b4 }
.fig .num{ position:absolute; bottom:3px; right:6px; font-size:9px; font-family:var(--mono);
  color:var(--cinza); font-weight:700 }
.proxima-fig{ margin-top:14px }
.proxima-fig b{ font-family:var(--font-titulo); font-size:14.5px }

.link-rodape{ background:none; border:0; color:var(--petroleo); font-size:11.5px; font-weight:600;
  text-decoration:underline; cursor:pointer; font-family:var(--font-texto); padding:0 0 6px }

/* ---------- rotina das crianças ----------
   Alvo grande e desenho grande: dedo de 4 anos erra alvo pequeno, e a culpa vira
   frustração com o produto. Feito é CARIMBADO (conquista), nunca riscado (dívida). */
.placar{
  display:flex; align-items:center; gap:12px; margin-bottom:16px;
  background:linear-gradient(135deg,#fff6dd,#fdf0f0); border:2px solid #f0e2bd;
  border-radius:16px; padding:13px 15px;
}
.placar .est{ width:38px; height:38px; flex:0 0 38px; color:var(--dourado); fill:currentColor; stroke:none }
.placar .n{ font-family:var(--font-titulo); font-size:34px; line-height:1; color:var(--dourado-esc); font-weight:700 }
.placar p{ margin:0; font-size:12.5px; line-height:1.4 }

.grade-rotina{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.tarefa-crianca{
  position:relative; background:var(--branco); border:2px solid var(--linha); border-radius:18px;
  padding:14px 10px 12px; text-align:center; cursor:pointer; font-family:var(--font-texto);
  color:var(--barro); -webkit-tap-highlight-color:transparent; transition:transform .08s;
}
.tarefa-crianca:active{ transform:scale(.97) }
.tarefa-crianca .quadro{
  width:70px; height:70px; margin:0 auto 8px; display:block; color:var(--petroleo);
  fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
}
.tarefa-crianca b{ display:block; font-family:var(--font-titulo); font-size:14px; line-height:1.2 }
.tarefa-crianca.feita{ background:var(--ok-bg); border-color:var(--ok-linha) }
.tarefa-crianca.feita .quadro{ color:var(--ok-fg) }
.tarefa-crianca .carimbo{
  position:absolute; top:-9px; right:-6px; width:34px; height:34px; color:var(--dourado);
  fill:currentColor; stroke:none; filter:drop-shadow(0 2px 3px rgba(58,49,40,.25));
}
.trilha{ display:flex; gap:5px; margin:15px 0 5px }
.trilha i{ flex:1; height:9px; border-radius:99px; background:var(--linha) }
.trilha i.ok{ background:var(--dourado) }
.trilha-txt{ text-align:center; font-size:12px; color:var(--cinza) }

.brinde{
  display:flex; gap:12px; align-items:center; background:var(--branco);
  border:2px dashed var(--dourado); border-radius:16px; padding:13px 14px; margin-top:16px;
}
.brinde .cx{ width:42px; height:42px; flex:0 0 42px; color:var(--dourado);
  fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round }
.brinde b{ display:block; font-family:var(--font-titulo); font-size:14.5px }
.brinde span{ font-size:11.5px; color:var(--cinza) }
.rodape-crianca{ margin-top:14px; text-align:center; font-size:12.5px; color:var(--cinza); line-height:1.6 }
.rodape-crianca b{ color:var(--barro) }

/* painel de quem cuida */
.cartao.filho{ padding:14px }
.cab-filho{ display:flex; align-items:center; gap:11px; margin-bottom:12px }
.dados-filho b{ display:block; font-family:var(--font-titulo); font-size:16px; line-height:1.2 }
.dados-filho span{ font-size:12px; color:var(--cinza) }
.cartao.filho .btn{ font-size:12.5px; padding:9px 12px }

/* montar a rotina */
.cab-montagem{ display:flex; align-items:center; gap:11px; margin-bottom:10px }
.cab-montagem b{ font-family:var(--font-titulo); font-size:16px }
.cab-montagem .btn{ font-size:12px; padding:7px 11px }
.grade-opcoes{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px }
.opcao-pic{
  background:var(--branco); border:2px solid var(--linha); border-radius:13px; padding:10px 5px 8px;
  text-align:center; cursor:pointer; font-family:var(--font-texto); color:var(--cinza);
  -webkit-tap-highlight-color:transparent;
}
.opcao-pic .quadro-pic{
  width:42px; height:42px; margin:0 auto 5px; display:block; color:#c4bbab;
  fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
}
.opcao-pic span{ font-size:10.5px; line-height:1.25; display:block }
.opcao-pic.on{ border-color:var(--petroleo); background:#f2f8f9; color:var(--barro) }
.opcao-pic.on .quadro-pic{ color:var(--petroleo) }

.vazio-criancas{ text-align:center; padding:20px 16px }
.vazio-criancas .ico-vazio{ width:52px; height:52px; color:#cfc6b4; margin-bottom:10px }
.vazio-criancas b{ display:block; font-family:var(--font-titulo); font-size:16px; margin-bottom:6px }
.vazio-criancas .tenue{ margin:0 0 13px }

/* ---------- sua casa ---------- */
.evitou{
  background:linear-gradient(135deg,#eef6ea,#e7f2f5); border:1px solid #cfe3d3;
  border-radius:15px; padding:15px; margin-bottom:6px;
}
.evitou .cabeca{ display:flex; align-items:center; gap:11px; margin-bottom:10px }
.evitou .ico-evitou{ width:32px; height:32px; color:var(--ok-fg); flex:0 0 32px }
.evitou .cabeca b{ font-family:var(--font-titulo); font-size:15.5px; line-height:1.2 }
.evitou ul{ margin:0; padding-left:17px; font-size:13px; line-height:1.75 }
.evitou ul b{ color:var(--barro) }
.grade-selos{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.grade-selos .selo{
  display:block; background:var(--branco); border:1px solid var(--linha); border-radius:12px;
  padding:12px 11px; text-align:center; font-family:var(--font-texto); text-transform:none;
  letter-spacing:0; color:var(--barro); font-weight:400; margin:0;
}
.grade-selos .ico-selo{ width:32px; height:32px; color:var(--dourado); margin-bottom:6px }
.grade-selos b{ display:block; font-family:var(--font-titulo); font-size:13px; line-height:1.25 }
.grade-selos span{ font-size:10.5px; color:var(--cinza) }
.grade-selos .selo.cinza .ico-selo{ color:#cfc6b4 }
.grade-selos .selo.cinza b{ color:var(--cinza) }
.grafico{ background:var(--branco); border:1px solid var(--linha); border-radius:12px; padding:13px 14px; box-shadow:var(--sombra) }
.grafico svg{ width:100%; height:90px; display:block; margin:2px 0 6px }
.grafico .leg{ display:flex; justify-content:space-between; font-size:10px; color:var(--cinza); font-family:var(--mono) }

/* ---------- botões ---------- */
.btn{
  background:var(--petroleo); color:#fff; border:0; border-radius:9px; padding:10px 15px;
  font-size:13.5px; font-weight:700; font-family:var(--font-texto); cursor:pointer;
}
.btn.secundario{ background:transparent; color:var(--petroleo); border:1.5px solid var(--petroleo) }
.btn.perigo{ background:transparent; color:var(--risco-alto); border:1px solid #e5c9c0; font-size:11.5px; padding:5px 9px }
.linha-botoes{ display:flex; flex-wrap:wrap; gap:8px }
.destaque-licenca{ font-size:13px; color:var(--petroleo); font-weight:600; margin:0 0 8px }
.barra-dados{ font-size:11.5px; color:var(--cinza); line-height:1.6; padding:4px 2px 0 }
.barra-dados b{ color:var(--risco-alto) }

/* ---------- barra fixa ---------- */
.navfixa{
  position:fixed; left:0; right:0; bottom:0; display:flex; background:#fffdf9;
  border-top:1px solid var(--linha); padding:7px 2px calc(9px + env(safe-area-inset-bottom)); z-index:9;
}
.navfixa button{
  flex:1; background:none; border:0; font-size:9.5px; color:var(--cinza); line-height:1.35;
  font-family:var(--font-texto); cursor:pointer; padding:2px 1px;
}
.navfixa button.ativo{ color:var(--petroleo); font-weight:700 }
.navfixa svg{ width:21px; height:21px; display:block; margin:0 auto 3px }

.rodape{ text-align:center; font-size:10.5px; color:var(--cinza); line-height:1.6; padding:22px 16px 6px; margin:0 }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:92px; transform:translate(-50%,14px);
  background:var(--barro); color:#fff; font-size:13px; padding:11px 17px; border-radius:10px;
  box-shadow:0 6px 20px rgba(58,49,40,.28); opacity:0; pointer-events:none;
  transition:opacity .2s,transform .2s; z-index:20; max-width:86%; text-align:center;
}
.toast.visivel{ opacity:1; transform:translate(-50%,0) }
.toast.erro{ background:var(--risco-alto) }

@media (min-width:620px){
  main{ max-width:620px; margin:0 auto }
  .topo{ max-width:620px; margin:0 auto }
  .grade-meses,.grade-corredores{ grid-template-columns:1fr 1fr }
}

/* cadência editável do pet: é texto que se toca, não campo de formulário */
.btn-cadencia{ background:none; border:0; padding:0; font-family:var(--font-texto);
  font-size:11px; color:var(--petroleo); text-decoration:underline; cursor:pointer }
.btn-cadencia.proprio{ color:var(--dourado-esc); font-weight:700 }

/* ---------- lupa da figurinha ----------
   No celular o cartão tem ~100px e o verso ali era ilegível. Tocar abre a peça em
   tamanho de leitura: arte grande em cima, texto inteiro embaixo, sem virar lado. */
.lupa{ position:fixed; inset:0; z-index:40; background:rgba(30,24,18,.72);
  display:flex; align-items:center; justify-content:center; padding:18px;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:lupa-entra .16s ease-out }
@keyframes lupa-entra{ from{ opacity:0 } to{ opacity:1 } }
@media (prefers-reduced-motion:reduce){ .lupa{ animation:none } }
.lupa-cartao{ background:#fffdf9; border-radius:16px; width:100%; max-width:360px;
  max-height:88vh; overflow-y:auto; position:relative; box-shadow:0 12px 40px rgba(0,0,0,.4) }
.lupa-fechar{ position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px;
  border-radius:50%; border:0; background:rgba(255,253,249,.92); color:var(--barro);
  font-size:16px; line-height:1; cursor:pointer; display:grid; place-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.25); font-family:var(--font-texto) }
.lupa-arte{ position:relative; aspect-ratio:3/4; display:grid; place-items:center; overflow:hidden;
  border-radius:16px 16px 0 0 }
.lupa-arte.tom-petroleo{ background:linear-gradient(160deg,#e7f2f5,#fdfbf7 70%) }
.lupa-arte.tom-dourado{ background:linear-gradient(160deg,#fff6dd,#fdfbf7 70%) }
.lupa-arte img{ width:100%; height:100%; object-fit:cover; display:block }
.lupa-arte .pic-grande{ width:52%; height:52%; color:var(--petroleo);
  fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round }
.lupa-num{ position:absolute; top:12px; left:12px; width:28px; height:28px; border-radius:50%;
  background:var(--dourado); color:#fff; display:grid; place-items:center; font-size:12px;
  font-weight:700; font-family:var(--mono); box-shadow:0 2px 6px rgba(58,49,40,.35) }
.lupa-texto{ padding:16px 18px 20px }
.lupa-colecao{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cinza); font-weight:700; margin-bottom:7px }
.lupa-texto b{ display:block; font-family:var(--font-titulo); font-size:19px; line-height:1.22;
  margin-bottom:9px; text-wrap:balance }
.lupa-texto p{ margin:0 0 12px; font-size:15px; line-height:1.62 }

/* passo a passo da Ajuda: instalar no celular e levar os dados */
.passo-a-passo .passos{ background:#fffdf9; border:1px solid var(--linha); border-radius:10px; padding:12px 14px }
.passo-a-passo .passos b{ display:block; font-family:var(--font-titulo); font-size:13.5px;
  color:var(--petroleo); margin:10px 0 4px }
.passo-a-passo .passos b:first-child{ margin-top:0 }
.passo-a-passo .passos ol{ margin:0; padding-left:18px; font-size:13px; line-height:1.7 }
.passo-a-passo .passos ol b{ display:inline; font-family:var(--font-texto); font-size:13px; color:var(--barro) }
.passo-a-passo .passos code{ font-family:var(--mono); font-size:11.5px; background:#f2ece0;
  padding:1px 5px; border-radius:4px }

/* ---------- a folha do "Mais" ---------- */
.navfixa button.com-selo{ position:relative }
.selo-mais{ position:absolute; top:0; right:calc(50% - 20px); min-width:16px; height:16px;
  padding:0 4px; border-radius:999px; background:var(--risco-alto); color:#fff;
  font-size:9.5px; font-weight:700; line-height:16px; font-family:var(--mono);
  box-shadow:0 1px 3px rgba(58,49,40,.35) }
.lupa.folha{ align-items:flex-end; padding:0 }
.folha-mais{ background:#fffdf9; border-radius:18px 18px 0 0; width:100%; max-width:520px;
  padding:8px 14px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 30px rgba(0,0,0,.3); animation:folha-sobe .18s ease-out }
@keyframes folha-sobe{ from{ transform:translateY(14px) } to{ transform:translateY(0) } }
@media (prefers-reduced-motion:reduce){ .folha-mais{ animation:none } }
.puxador{ width:38px; height:4px; border-radius:99px; background:var(--linha); margin:2px auto 12px }
.destino{ display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  background:none; border:0; border-bottom:1px solid var(--linha); padding:13px 4px;
  cursor:pointer; font-family:var(--font-texto); color:var(--barro) }
.destino:last-child{ border-bottom:0 }
.destino .ico{ width:26px; height:26px; flex:0 0 26px; color:var(--petroleo) }
.destino b{ display:block; font-family:var(--font-titulo); font-size:15.5px; line-height:1.2 }
.destino small{ display:block; font-size:11.5px; color:var(--cinza); margin-top:2px }