/* css/dar.css — o que a página da casa e a da pet-sitter partilham: o topo,
   o cartão de cada animal, as tomas com o botão "Dei", o SOS, os cuidados, as
   caixas ("Já foi dado!", "Outra coisa…") e o aviso que aparece em baixo.
   Está à parte para as duas páginas não se desalinharem: quem dá o comprimido
   é a mesma regra, venha da casa ou da pet-sitter, e deve parecer igual. */

/* topo */
.topo { background: var(--madeira); color: #fff; padding: .8rem 1rem; }
.topo-linha { display: flex; align-items: center; gap: .6rem; }
.topo h1 { font-family: var(--serif); font-size: 1.25rem; margin: 0; flex: 1; min-width: 0;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo .btn { min-height: 40px; font-size: .9rem; padding: .3rem .8rem; }
.topo .sair { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
/* "És a Ana" — sempre à vista: é o nome que fica em cada "Dei" deste telemóvel. */
.quem { background: rgba(255,255,255,.16); color: #fff; border-radius: 999px; }
.quem i { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; border: 2px solid #fff; }
main { padding: 1rem; max-width: 720px; margin: 0 auto; }

/* cartão de um animal */
.cartao { background: var(--papel); border-radius: var(--raio); padding: 1rem; margin-bottom: 1rem;
          border: 1px solid var(--linha); }
.cartao-cab { display: flex; align-items: center; gap: .8rem; margin-bottom: .4rem; }
.cartao-cab .foto { width: 60px; height: 60px; font-size: 1.5rem; flex: 0 0 auto; }
.cartao-cab h2 { margin: 0; font-family: var(--serif); font-size: 1.4rem; line-height: 1.1; }
.cartao-cab small { color: var(--texto2); }
.tomas { list-style: none; margin: 0; padding: 0; }
.toma { padding: .75rem 0; border-top: 1px solid var(--linha); }
.toma-linha { display: grid; grid-template-columns: 3.6rem 1fr auto; gap: .2rem .6rem; align-items: center; }
.toma .h { font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.toma .h small { display: block; font-size: .7rem; font-weight: 700; color: var(--vermelho); text-transform: uppercase; }
.toma .meds { min-width: 0; }
.toma .med { display: block; font-weight: 600; }
.toma .med small { font-weight: 400; color: var(--texto2); }
.toma.futuro .med { color: var(--texto2); font-weight: 500; }
.toma .quem-deu { grid-column: 2 / 4; font-size: .88rem; color: var(--texto2); }
.toma .quem-deu strong { color: var(--sombra); }
.toma .quem-deu.mau { color: var(--vermelho); font-weight: 700; }
.toma .botoes { grid-column: 1 / 4; display: flex; gap: .5rem; margin-top: .55rem; }
/* O botão mais importante da aplicação: grande, verde, impossível de falhar. */
.btn-dei { flex: 1; min-height: 58px; font-size: 1.2rem; }
.btn-outra { min-height: 58px; font-size: .9rem; padding: .4rem .8rem; }
.toma.agora, .toma.em_falta { background: linear-gradient(90deg, var(--ambar-fundo), transparent 85%);
                              margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; }
.toma.em_falta { background: linear-gradient(90deg, var(--vermelho-fundo), transparent 85%); }

/* SOS */
.sos { margin-top: .6rem; border-top: 2px dashed var(--linha); padding-top: .6rem; }
.sos h3 { margin: 0 0 .3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--madeira); }
.sos-linha { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; align-items: center; padding: .4rem 0; }
.sos-linha small { color: var(--texto2); }
.sos-linha .btn { min-height: 44px; font-size: .9rem; }

.vazio { color: var(--texto2); text-align: center; padding: 1.2rem 0; }
.aviso-topo { border-radius: 14px; padding: .8rem 1rem; margin-bottom: 1rem; font-weight: 600; }
.aviso-topo.mau { background: var(--vermelho); color: #fff; }
.aviso-topo.calmo { background: var(--areia); color: var(--texto2); font-weight: 400; }

/* caixas */
.pessoas-lista { display: grid; gap: .6rem; margin: 1rem 0; }
.pessoas-lista button { display: flex; align-items: center; gap: .8rem; min-height: 60px; font-size: 1.2rem;
                        justify-content: flex-start; }
.pessoas-lista i { width: 1.4rem; height: 1.4rem; border-radius: 50%; flex: 0 0 auto; }
.ja-dado { background: var(--vermelho-fundo); border: 3px solid var(--vermelho); border-radius: 14px;
           padding: 1rem; color: #5c130f; font-size: 1.1rem; }
.ja-dado strong { color: var(--vermelho); }
.acoes.empilhadas { flex-direction: column; align-items: stretch; }
.acoes.empilhadas .btn { min-height: 56px; }
.checks { display: flex; flex-direction: column; gap: .5rem; margin: .8rem 0; }
.checks label { display: flex; gap: .6rem; align-items: center; padding: .6rem .7rem; border-radius: 12px;
                background: var(--cal); font-weight: 600; cursor: pointer; }
.checks input { width: 1.4rem; height: 1.4rem; accent-color: var(--verde); flex: 0 0 auto; }
textarea { font: inherit; width: 100%; min-height: 5rem; padding: .55rem .7rem; border-radius: 12px;
           border: 2px solid var(--linha); background: var(--papel); color: var(--sombra); }
.erro-msg { color: var(--vermelho); font-weight: 700; min-height: 1.2rem; }
/* cuidados periódicos (no Hoje e no separador Cuidados) */
.cuidados { list-style: none; margin: 0; padding: 0; }
.cuidado { padding: .7rem 0; border-top: 1px solid var(--linha); }
.cuidado-linha { display: grid; grid-template-columns: 2rem 1fr auto; gap: .2rem .6rem; align-items: center; }
.cuidado .ic { font-size: 1.4rem; text-align: center; }
.cuidado small { color: var(--texto2); }
.cuidado .sub { display: block; margin: .3rem 0 0 2.6rem; }
.cuidado > small:not(.sub) { margin-left: 2.6rem; }
.cuidado .acoes-linha { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0 0 2.6rem; }
.cuidado .acoes-linha .btn { min-height: 40px; padding: .3rem .8rem; font-size: .88rem; }
.cuidado.atraso { background: linear-gradient(90deg, var(--vermelho-fundo), transparent 85%); margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; }
.bloco-cuidados { margin-top: .6rem; border-top: 2px dashed var(--linha); padding-top: .6rem; }
.bloco-cuidados h3 { margin: 0 0 .1rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--madeira); }
.bloco-cuidados .cuidado:first-of-type { border-top: 0; }

/* pet-sitter */
.aviso-topo.estadia { background: var(--verde-fundo); color: var(--verde); }
.ligacao-url { font-family: ui-monospace, monospace; font-size: .85rem; word-break: break-all; background: var(--cal);
               padding: .7rem .8rem; border-radius: 12px; border: 1px solid var(--linha); user-select: all; }
.btn-whatsapp { background: #1f7a4d; color: #fff; }

.ok-msg { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 60;
          background: var(--verde); color: #fff; font-weight: 700; padding: .8rem 1.2rem; border-radius: 999px;
          box-shadow: 0 6px 20px rgba(0,0,0,.2); }

/* A despensa: a ração que está a acabar e quem a comprou. */
.despensa .titulo { margin: 0 0 .5rem; }
.racoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.racao { display: flex; align-items: center; gap: .8rem; padding: .6rem .7rem; border-radius: 12px; background: var(--areia); }
.racao .racao-txt { flex: 1; }
.racao.breve { background: var(--ambar-fundo, #fdf0d8); }
.racao.mau { background: #fbe7e5; }
.racao .comprada { color: var(--verde); }
.nota-bom { color: var(--verde); font-weight: 700; }

/* O botão da ficha de emergência, à direita no cabeçalho de cada animal. */
.cartao-cab .btn-ficha { margin-left: auto; min-height: 40px; padding: .35rem .8rem; font-size: .9rem; }

/* Saúde (parte 6): o peso em gráfico e as consultas. */
.saude h3 { margin: 1rem 0 .4rem; font-size: 1rem; color: var(--madeira); }
.peso-agora strong { font-size: 1.4rem; }
.peso-agora small { color: var(--texto2); }
.grafico-peso { width: 100%; max-width: 480px; height: auto; color: var(--verde); display: block; margin: .3rem 0; }
.grafico-peso .eixo { font-size: 10px; fill: var(--texto2); }
.lista-pesos, .lista-consultas { list-style: none; margin: .3rem 0 .6rem; padding: 0; }
.lista-pesos li { display: grid; grid-template-columns: 1fr auto auto auto; gap: .6rem; align-items: center; padding: .25rem 0; border-bottom: 1px solid var(--linha); }
.lista-pesos small { color: var(--texto2); }
.lista-pesos .btn-x { min-height: 32px; padding: 0 .6rem; }
.lista-consultas li { display: flex; justify-content: space-between; gap: .6rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.lista-consultas li.passou { opacity: .65; }
.lista-consultas small { color: var(--texto2); }

/* Histórico (parte 6): dia a dia. */
.filtros-hist { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.filtros-hist select { font: inherit; padding: .5rem .7rem; border-radius: 10px; border: 2px solid var(--linha); background: #fff; }
.dia-hist .titulo { margin: 0 0 .4rem; font-size: 1.1rem; text-transform: capitalize; }
.eventos { list-style: none; margin: 0; padding: 0; }
.eventos .ev { display: grid; grid-template-columns: 3rem 1.6rem 1fr; gap: .4rem; padding: .45rem 0; border-bottom: 1px solid var(--linha); align-items: start; }
.eventos .ev .h { font-variant-numeric: tabular-nums; color: var(--texto2); }
.eventos .ev small { display: block; color: var(--texto2); }
.eventos .ev.mau { background: var(--vermelho-fundo); border-radius: 8px; padding-left: .3rem; }
.eventos .nota-ev { font-style: italic; }

/* A consulta à porta, no cartão do animal no Hoje. */
.consulta-hoje { background: var(--areia); color: var(--madeira); border-radius: 10px; padding: .4rem .7rem; margin: .3rem 0; font-weight: 600; font-size: .95rem; }

/* As perguntas da clínica (parte 4 da versão da clínica) e as receitas dela. */
.cartao.perguntas { border-left: 5px solid var(--luz); }
.pergunta { padding: .5rem 0; border-top: 1px solid var(--linha); }
.pergunta:first-of-type { border-top: 0; }
.pergunta p { margin: 0 0 .4rem; }
.pergunta small { color: var(--texto2); }
.pergunta textarea { width: 100%; font: inherit; padding: .6rem .7rem; border-radius: 12px; border: 2px solid var(--linha);
                     background: #fff; margin-bottom: .4rem; resize: vertical; }
.pergunta .resposta { color: var(--verde); font-weight: 600; }
.da-clinica { color: var(--verde); font-weight: 600; }