/* uPet · base visual. Valores trazidos das telas em docs/stitch (sem Tailwind). */
:root {
  --noite: #0E1A14;
  --nevoa: #F3F5EF;
  --branco: #FFFFFF; /* só fundo de card e de campo */
  --musgo: #2E5A45;
  --lima: #C8F25A;
  --cinza: #535C56;
  --linha: #DDE2D8;
  --alerta: #D7301F; /* só modo PERDIDO */
  --amora: #86207D;  /* só erro de formulário */
  --titulo: 'Space Grotesk', sans-serif;
  --texto: 'Inter', sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  margin: 0;
  background: var(--nevoa);
  color: var(--noite);
  font: 400 15px/24px var(--texto);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--musgo);
}

h1, h2, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, svg { display: block; }
::selection { background: var(--musgo); color: var(--nevoa); }
:focus-visible { outline: 2px solid var(--musgo); outline-offset: 2px; }
[hidden] { display: none !important; }
/* título que recebe o foco por código (para o leitor de tela anunciar) não ganha contorno */
[tabindex="-1"]:focus { outline: none; }

button, a, [role="button"] {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
input, textarea, select { font: 400 16px/24px var(--texto); color: var(--noite); }

/* Moldura: coluna de celular, centralizada em tela larga */
.tela {
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.conteudo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 16px 24px;
}

/* Barra Noite do topo (páginas públicas): só o símbolo uP */
.topo-noite {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--noite);
  color: var(--lima);
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
}

/* Barra Noite de ação: o único lugar onde o botão Lima aparece */
.barra-acao {
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: var(--noite);
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
}
.barra-acao :focus-visible { outline-color: var(--nevoa); }

.btn {
  width: 100%;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 700 16px/20px var(--texto);
  text-decoration: none;
  transition: transform 150ms var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn-lima { background: var(--lima); color: var(--noite); }
.btn-contorno { border: 1px solid var(--noite); color: var(--noite); }

.card {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 16px;
  padding: 16px;
}
.card-centro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.card-noite { border-color: var(--noite); }
.card h2, .h2 { font: 700 16px/24px var(--titulo); }
.linha-icone { display: flex; align-items: center; gap: 8px; }
.linha-icone-topo { display: flex; align-items: flex-start; gap: 12px; }

.h1 { font: 700 28px/36px var(--titulo); letter-spacing: -0.025em; text-wrap: balance; }
.h1-medio { font-size: 26px; line-height: 32px; }
.h1-menor { font-size: 24px; line-height: 30px; }
.sub { font-size: 14px; line-height: 20px; color: var(--cinza); }
.nota { font-size: 13px; line-height: 18px; color: var(--cinza); text-align: center; }
.forte { font-weight: 700; }

.icone {
  font-family: 'Material Symbols Outlined';
  font-size: 20px;
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  color: var(--musgo);
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
}

.pilula {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--musgo);
  border-radius: 999px;
  color: var(--musgo);
  font: 700 13px/16px var(--texto);
}
.pilula .icone { font-size: 16px; }

.foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid var(--linha);
}
/* Sem foto: bloco Musgo com o símbolo em Névoa (par do brandbook) */
.foto-vazia { background: var(--musgo); color: var(--nevoa); display: flex; align-items: center; justify-content: center; }
.foto-perdido { border: 3px solid var(--alerta); }

.faixa-perdido {
  background: var(--alerta);
  color: var(--nevoa);
  padding: 10px 16px;
  text-align: center;
  font: 700 24px/32px var(--titulo);
}

.passos { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.passos li { display: flex; align-items: flex-start; gap: 12px; }
.passos .num {
  width: 28px;
  height: 28px;
  border: 1px solid var(--musgo);
  border-radius: 50%;
  color: var(--musgo);
  font: 700 14px/1 var(--texto);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.passos p { padding-top: 2px; }

/* Estados sem pet (17, 18, falha de rede) */
.estado { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 24px; }
.estado .disco {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--branco);
  border: 1px solid var(--linha);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.estado .disco .icone { font-size: 36px; }
.estado p { color: var(--cinza); margin-top: 6px; max-width: 310px; }

.codigo { font: 700 20px/28px var(--titulo); letter-spacing: 0.025em; font-variant-numeric: tabular-nums; -webkit-user-select: all; user-select: all; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.campo {
  width: 100%;
  height: 48px;
  border: 1px solid var(--cinza); /* linha (#DDE2D8) some sobre branco: 1,4:1. Contorno de campo pede 3:1 */
  border-radius: 12px;
  background: var(--branco);
  padding: 0 14px;
}
textarea.campo { height: auto; padding: 12px 14px; resize: none; display: block; }
.campo::placeholder { color: var(--cinza); }
.campo[aria-invalid="true"] { border-color: var(--amora); }
.ajuda { font-size: 13px; line-height: 18px; color: var(--cinza); margin-top: 6px; }
.opcional { color: var(--cinza); font-weight: 400; }
/* Amora: só erro de formulário, sempre com ícone e frase */
.erro { display: flex; align-items: flex-start; gap: 4px; margin-top: 6px; font: 500 13px/18px var(--texto); color: var(--amora); }
.erro .icone { font-size: 16px; line-height: 18px; color: inherit; }

.mini-foto { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; border: 1px solid var(--linha); flex-shrink: 0; }
.quadro-icone {
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--nevoa); border: 1px solid var(--linha);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Interruptor: um checkbox só, sem biblioteca */
.chave {
  appearance: none; -webkit-appearance: none;
  width: 44px; height: 24px; margin: 0; flex-shrink: 0;
  border-radius: 999px; background: var(--cinza);
  position: relative; cursor: pointer;
  transition: background-color 150ms ease;
}
.chave::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--branco);
  transition: transform 150ms var(--ease-out);
}
.chave:checked { background: var(--musgo); }
.chave:checked::after { transform: translateX(20px); }

.link-barra {
  height: 44px; display: flex; align-items: center; justify-content: center;
  font: 500 14px/20px var(--texto); color: var(--nevoa);
  text-decoration: underline; text-underline-offset: 4px;
}
.btn:disabled { opacity: 0.6; }
.campo:focus { outline: 2px solid var(--musgo); outline-offset: 0; border-color: var(--musgo); }
.rotulo { display: block; font: 500 14px/20px var(--texto); margin-bottom: 6px; }
.pilha { display: flex; flex-direction: column; gap: 12px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .chave, .chave::after, .voltar, .botao-redondo, .atalho, .abas button, .registro { transition: none; }
}

/* ---- Etapa 3: entrada e ativação ---- */

/* Topo das telas internas: seta de voltar + título */
.topo {
  position: sticky; top: 0; z-index: 40;
  background: var(--nevoa); border-bottom: 1px solid var(--linha);
  padding: env(safe-area-inset-top, 0px) 16px 0;
  min-height: 56px; display: flex; align-items: center; gap: 12px;
}
.topo h1 { font: 700 20px/28px var(--titulo); letter-spacing: -0.025em; }
.voltar { text-decoration: none; width: 44px; height: 44px; margin-left: -8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 150ms var(--ease-out); }
.voltar:active { transform: scale(0.95); }
.voltar .icone { font-size: 22px; color: var(--noite); }

.link { font: 700 14px/20px var(--texto); color: var(--musgo); text-underline-offset: 4px; padding: 4px 0; } /* o respiro aumenta a área de toque sem mexer na linha */
.barra-acao p { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--nevoa); text-align: center; }
.barra-acao p a { font-weight: 700; text-underline-offset: 4px; padding: 6px 0; }

/* Escolha entre duas opções (Cão/Gato, Fêmea/Macho): rádio de verdade por baixo */
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opcao { position: relative; cursor: pointer; }
.opcao input { position: absolute; opacity: 0; pointer-events: none; }
.opcao span {
  height: 48px; border-radius: 12px; border: 1px solid var(--cinza); background: var(--branco);
  display: flex; align-items: center; justify-content: center; font: 500 15px/1 var(--texto);
}
.opcao input:checked + span { background: var(--noite); border-color: var(--noite); color: var(--nevoa); font-weight: 700; }
.opcao input:focus-visible + span { outline: 2px solid var(--musgo); outline-offset: 2px; }

.marca { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 20px; }
.marca input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--musgo); }

.passo { font: 700 13px/18px var(--texto); color: var(--musgo); }
.barras { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.barras span { height: 4px; border-radius: 999px; background: var(--musgo); }

.foto-pet { width: 80px; height: 80px; border-radius: 16px; object-fit: cover; border: 1px solid var(--linha); flex-shrink: 0; }
/* Campo de arquivo escondido: quem aparece é o rótulo-botão logo depois dele */
.arquivo { position: absolute; opacity: 0; width: 1px; height: 1px; }
.arquivo:focus-visible + label { outline: 2px solid var(--musgo); outline-offset: 2px; }
.btn-pequeno { width: auto; height: 44px; padding: 0 14px; border-radius: 12px; font-size: 14px; display: inline-flex; }

/* Campo do código do pingente: letras grandes, como gravado */
.campo-codigo { height: 56px; font: 700 22px/28px var(--titulo); letter-spacing: 0.025em; text-transform: uppercase; }

/* 01 · Boas-vindas: tela Noite inteira */
.tela-noite {
  background: var(--noite); color: var(--nevoa); justify-content: space-between;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));
}
.tela-noite :focus-visible { outline-color: var(--nevoa); }
.secundario-noite { color: #AEB3AD; } /* Névoa a 70% sobre Noite, 8,37:1 (brandbook) */

/* Desenho do pingente (01) e da aproximação (02): só formas, sem brilho e sem animação */
.arte { position: relative; display: flex; align-items: center; justify-content: center; }
.arte .anel { position: absolute; border-radius: 50%; border: 1px solid; }
.arte .disco-pingente { position: relative; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.arte .argola { position: absolute; border-radius: 50%; }

/* ---- Etapa 4: área da tutora ---- */

/* Barra inferior: a mesma nas quatro telas principais */
.nav-inferior {
  position: sticky; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--branco); border-top: 1px solid var(--linha);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav-inferior a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 0; text-decoration: none; color: var(--cinza); font: 500 13px/16px var(--texto);
}
.nav-inferior .icone { font-size: 24px; color: inherit; }
.nav-inferior [aria-current="page"] { color: var(--noite); font-weight: 700; }
.nav-inferior [aria-current="page"] .icone { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.nav-inferior a:active .icone { transform: scale(0.92); }

.topo-inicio { border-bottom: 0; justify-content: space-between; padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: 8px; }
.botao-redondo {
  position: relative; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--branco); border: 1px solid var(--linha);
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  transition: transform 150ms var(--ease-out);
}
.botao-redondo:active { transform: scale(0.95); }
.botao-redondo .icone { color: var(--noite); }
.botao-redondo .ponto { position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--musgo); border: 1px solid var(--branco); }

.mini-foto.foto-perdido { border: 3px solid var(--alerta); }
.pilula-menor { padding: 4px 10px; gap: 4px; white-space: nowrap; }
.pilula-menor .icone { font-size: 14px; }
.corta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bloco Noite: onde mora o botão Lima das telas claras */
.bloco-noite { background: var(--noite); color: var(--nevoa); border-radius: 16px; padding: 16px; }
.bloco-noite :focus-visible { outline-color: var(--nevoa); }
.bloco-noite h2 { font: 700 22px/28px var(--titulo); }
.bloco-noite .quadro-icone { background: none; border-color: rgb(243 245 239 / .25); width: 36px; height: 36px; }
.bloco-noite .icone, .bloco-noite .opcional, .bloco-noite .ajuda { color: inherit; }
.bloco-noite .ajuda, .bloco-noite .opcional { color: #AEB3AD; }
.bloco-noite .link-barra { width: 100%; }

.atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.atalho { display: flex; flex-direction: column; gap: 12px; text-decoration: none; transition: transform 150ms var(--ease-out); }
.atalho:active { transform: scale(0.98); }
.atalho h3 { margin: 0; font: 700 15px/20px var(--titulo); }
.atalho p { font-size: 13px; line-height: 18px; color: var(--cinza); margin-top: 2px; }

/* ---- Etapa 5: ficha e vacinas ---- */
.btn-medio { height: 48px; font-size: 14px; gap: 6px; }
.btn-medio .icone { color: var(--musgo); }

/* Quadrinhos de dado: rótulo pequeno em cima, valor embaixo */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { background: var(--nevoa); border: 1px solid var(--linha); border-radius: 12px; padding: 10px; min-width: 0; }
.tile-rotulo { font: 500 13px/16px var(--texto); color: var(--cinza); }
.tile-valor { font: 700 16px/20px var(--titulo); margin-top: 8px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.vazio { color: var(--cinza); font-weight: 400; }

/* Abas em pílula (Vacinas / Vermífugos / Antipulgas) */
.abas { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.abas::-webkit-scrollbar { display: none; }
.abas button {
  height: 44px; padding: 0 14px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  background: var(--branco); border: 1px solid var(--linha); font: 500 13px/16px var(--texto);
  transition: transform 150ms var(--ease-out);
}
.abas button:active { transform: scale(0.95); }
.abas button[aria-pressed="true"] { background: var(--noite); border-color: var(--noite); color: var(--nevoa); font-weight: 700; }
.abas .conta { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--nevoa); border: 1px solid var(--linha); color: var(--cinza); font: 700 13px/18px var(--texto); text-align: center; }
.abas .conta:empty { display: none; }
.abas button[aria-pressed="true"] .conta { color: var(--noite); border-color: var(--nevoa); }

.registro { transition: transform 150ms var(--ease-out); }
.registro:active { transform: scale(0.99); }
.pilula-atencao { border-color: var(--noite); color: var(--noite); }
.campo[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; }

/* "Baixar PDF" é a impressão do navegador: sai só a ficha, sem barras nem botões */
@media print {
  .topo, .nav-inferior, .barra-acao, .nao-imprime { display: none !important; }
  body { background: var(--branco); }
  .tela { max-width: none; min-height: 0; }
  .card { break-inside: avoid; }
}

/* ---- Etapa 6: leituras e conta ---- */
.divide > * + * { border-top: 1px solid var(--linha); }
.linha-acao { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; }
.linha-acao:active { opacity: 0.6; }
.confirma { padding: 12px 0 16px; }
/* Com a barra de navegação logo abaixo, a barra do botão não é a última: sem folga de área segura */
.barra-acao:has(+ .nav-inferior) { bottom: calc(63px + env(safe-area-inset-bottom, 0px)); }

/* ---- Etapa 7: textos legais ---- */
html { scroll-padding: 72px 0 120px; } /* campo em foco não some atrás das barras fixas */
.documento { gap: 12px; padding-bottom: 40px; }
.documento h2 { font: 700 16px/24px var(--titulo); margin-top: 16px; }
.documento ul { list-style: disc; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.documento mark { background: var(--linha); color: var(--noite); font-weight: 500; padding: 0 2px; } /* lacuna a preencher antes de publicar */
.documento .tabela { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.documento table { border-collapse: collapse; min-width: 520px; font-size: 14px; line-height: 20px; }
.documento th, .documento td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--linha); }
.documento th { font-weight: 700; }