/* Portal FOR PET (clínicas e tutores) — celular primeiro: funciona a partir de 360 px, sem rolagem lateral. */

:root {
  --marca-escura: #303868;
  --marca: #0068B8;
  --alerta: #C82028;
  --aviso: #9A6700;
  --aviso-fundo: #FFF6DB;
  --sucesso: #1E7B38;
  --sucesso-fundo: #E6F4EA;
  --alerta-fundo: #FDECEC;
  --fundo: #F4F6FA;
  --fundo-cartao: #FFFFFF;
  --texto: #1B1F2A;
  --texto-suave: #5B6270;
  --borda: #D9DEE6;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

a { color: var(--marca); }

img { max-width: 100%; height: auto; }

.pagina {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.cabecalho {
  text-align: center;
  padding: 8px 0 20px;
}

.cabecalho .logo {
  display: inline-block;
  width: 220px;
  max-width: 70%;
}

.cabecalho a { display: inline-block; }

h1 {
  font-size: 22px;
  line-height: 1.3;
  color: var(--marca-escura);
  margin: 0 0 8px;
  text-align: center;
}

.subtitulo {
  text-align: center;
  color: var(--texto-suave);
  margin: 0 0 24px;
}

/* ---------- Escolha de entrada ---------- */

.escolhas {
  display: grid;
  gap: 14px;
}

.escolha {
  display: block;
  text-decoration: none;
  background: var(--marca-escura);
  color: #fff;
  border-radius: 12px;
  padding: 22px 20px;
  box-shadow: 0 2px 10px rgba(48, 56, 104, 0.18);
}

.escolha.tutor { background: var(--marca); }

.escolha:hover, .escolha:focus-visible { filter: brightness(1.08); }
.escolha:focus-visible { outline: 3px solid #A8C8EE; outline-offset: 2px; }

.escolha .titulo {
  display: block;
  font-size: 22px;
  font-weight: 700;
}

.escolha .descricao {
  display: block;
  font-size: 15px;
  opacity: 0.92;
  margin-top: 4px;
}

/* ---------- Cartões e formulários ---------- */

.cartao {
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 20px;
  margin-top: 24px;
}

.cartao h2 {
  font-size: 17px;
  margin: 0 0 12px;
  color: var(--marca-escura);
}

label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.linha-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="date"],
input[type="time"], input[type="number"], input[type="tel"], select, textarea {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: #fff;
  color: var(--texto);
}

textarea { min-height: 72px; resize: vertical; }

/* Campo do código de verificação (início e verificar). */
input#codigo {
  flex: 1 1 180px;
  width: auto;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

input#codigo::placeholder { text-transform: none; letter-spacing: normal; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(0, 104, 184, 0.18);
}

button {
  font: inherit;
  font-weight: 600;
  background: var(--marca);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
  flex: 0 0 auto;
}

button:hover { filter: brightness(1.08); }

.dica {
  font-size: 13px;
  color: var(--texto-suave);
  margin: 8px 0 0;
}

/* ---------- Resultado da verificação ---------- */

.resultado {
  border-radius: 12px;
  padding: 20px;
  border: 2px solid var(--borda);
  background: var(--fundo-cartao);
}

.resultado .selo {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 6px;
}

.resultado .explicacao { margin: 0; color: var(--texto); }

.resultado.vigente { border-color: var(--sucesso); background: var(--sucesso-fundo); }
.resultado.vigente .selo { color: var(--sucesso); }

.resultado.aviso { border-color: #E0B300; background: var(--aviso-fundo); }
.resultado.aviso .selo { color: var(--aviso); }

.resultado.invalido { border-color: var(--alerta); background: var(--alerta-fundo); }
.resultado.invalido .selo { color: var(--alerta); }

.resultado.neutro .selo { color: var(--marca-escura); }

.dados {
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 6px 12px;
  font-size: 15px;
}

.dados dt { color: var(--texto-suave); }
.dados dd { margin: 0; font-weight: 600; }

.carregando { text-align: center; color: var(--texto-suave); }

.rodape {
  margin-top: 32px;
  text-align: center;
  font-size: 13px;
  color: var(--texto-suave);
}

/* =====================================================================================
   Portal da clínica (Task 10)
   ===================================================================================== */

.pagina.larga { max-width: 980px; }

button:disabled, button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; filter: none; }
button.secundario, a.botao.secundario {
  background: #fff;
  color: var(--marca);
  border: 1px solid var(--marca);
}
button.discreto {
  background: transparent;
  color: var(--marca);
  padding: 6px 8px;
  font-weight: 600;
}

a.botao {
  display: inline-block;
  font-weight: 600;
  background: var(--marca);
  color: #fff;
  border-radius: 8px;
  padding: 10px 18px;
  text-decoration: none;
  text-align: center;
}
a.botao:hover { filter: brightness(1.08); }

/* Barra do topo (logada) */
.topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 20px;
}
.topo .logo { width: 150px; max-width: 45%; }
.topo .quem { font-size: 14px; color: var(--texto-suave); }
.topo .quem strong { color: var(--texto); display: block; font-size: 15px; }
.topo nav { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.topo nav a { font-weight: 600; text-decoration: none; }
.topo nav a[aria-current="page"] { color: var(--marca-escura); text-decoration: underline; }

h1.esquerda { text-align: left; }

/* Formulários */
.campo { margin-bottom: 14px; }
.campo .dica { margin-top: 4px; }
.grade-2 { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 640px) {
  .grade-2 { grid-template-columns: 1fr 1fr; }
}
.linha-botoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.opcoes-radio { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; }
.opcoes-radio label, label.check { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; margin: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-size: 14px; font-weight: 600; margin-bottom: 6px; padding: 0; }
.obrigatorio::after { content: " *"; color: var(--alerta); }

/* Mensagens */
.mensagem {
  border-radius: 8px;
  padding: 12px 14px;
  margin: 12px 0;
  border: 1px solid var(--borda);
  background: #fff;
}
.mensagem.erro { border-color: var(--alerta); background: var(--alerta-fundo); color: #8A1117; }
.mensagem.aviso { border-color: #E0B300; background: var(--aviso-fundo); color: #5E4200; }
.mensagem.sucesso { border-color: var(--sucesso); background: var(--sucesso-fundo); color: #14532A; }
.mensagem.fixa { position: sticky; top: 0; z-index: 5; font-weight: 600; }

.politica { font-size: 14px; margin: 0 0 12px; padding-left: 20px; color: var(--texto-suave); }

/* Filtros e lista */
.filtros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  align-items: end;
}
.filtros .largo { grid-column: 1 / -1; }
.filtros label { margin-bottom: 4px; }
@media (min-width: 760px) {
  .filtros { grid-template-columns: 150px 150px 1fr 190px auto; }
  .filtros .largo { grid-column: auto; }
}

.lista-solicitacoes { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.lista-solicitacoes a.item {
  display: block;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--texto);
}
.lista-solicitacoes a.item:hover, .lista-solicitacoes a.item:focus-visible { border-color: var(--marca); }
.item .linha1 { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; justify-content: space-between; }
.item .protocolo { font-weight: 700; color: var(--marca-escura); font-size: 17px; }
.item .data { font-size: 13px; color: var(--texto-suave); }
.item .animal { font-weight: 600; }
.item .secundaria { font-size: 14px; color: var(--texto-suave); }
.selos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.selo-status, .pilula {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 999px;
  padding: 3px 9px;
  background: #E8ECF3;
  color: var(--marca-escura);
}
.selo-status.aguardando { background: var(--aviso-fundo); color: var(--aviso); }
.selo-status.andamento { background: #E3EEF9; color: #0B4F8A; }
.selo-status.liberada { background: var(--sucesso-fundo); color: var(--sucesso); }
.selo-status.cancelada { background: #ECEDEF; color: var(--texto-suave); }
.pilula.critico { background: var(--alerta-fundo); color: var(--alerta); }
.pilula.rejeitado { background: var(--alerta-fundo); color: #8A1117; }
.pilula.retificado { background: #EEE8F7; color: #5B3A8C; }
.pilula.reemissao { background: var(--aviso-fundo); color: var(--aviso); }

.paginacao { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; }
.vazio { text-align: center; color: var(--texto-suave); padding: 24px 0; }

/* Detalhe */
.voltar { display: inline-block; margin-bottom: 12px; font-weight: 600; }
.cabecalho-detalhe { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.cabecalho-detalhe h1 { margin: 0; text-align: left; }
.tabela-itens { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabela-itens th, .tabela-itens td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela-itens th { font-size: 13px; color: var(--texto-suave); font-weight: 600; }
.tabela-itens tr.filho td:first-child { padding-left: 22px; color: var(--texto-suave); }
.tabela-itens .motivo { display: block; font-size: 13px; color: #8A1117; }
.laudo-vigente { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.historico { list-style: none; padding: 0; margin: 8px 0 0; }
.historico li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--borda); }
.historico .rotulo { flex: 1 1 220px; }
.historico .situacao { display: block; font-size: 13px; color: var(--texto-suave); }

/* Requisição */
.resultados-busca { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.resultados-busca li label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: 400;
  margin: 0;
  cursor: pointer;
  background: #fff;
}
.resultados-busca li label:has(input:checked) { border-color: var(--marca); background: #EEF5FC; }
.resultados-busca .nome { font-weight: 600; display: block; }
.resultados-busca .sub { font-size: 13px; color: var(--texto-suave); display: block; }
.catalogo-resultado button.adicionar {
  width: 100%;
  text-align: left;
  background: #fff;
  color: var(--texto);
  border: 1px solid var(--borda);
  font-weight: 400;
}
.catalogo-resultado button.adicionar:hover { border-color: var(--marca); filter: none; }
.selecionados { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.selecionados li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: #EEF5FC;
  border: 1px solid #BBD5EE;
  border-radius: 8px;
  padding: 6px 6px 6px 10px;
}
.rodape-envio {
  position: sticky;
  bottom: 0;
  background: var(--fundo);
  padding: 12px 0;
  border-top: 1px solid var(--borda);
  margin-top: 20px;
}

/* =====================================================================================
   Portal do tutor (Task 11)
   ===================================================================================== */

.centro { text-align: center; }

input.campo-codigo {
  font-size: 24px;
  letter-spacing: 0.3em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  max-width: 240px;
}

.cpf-informado { margin: 12px 0; }

.cartoes-animais {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .cartoes-animais { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
.cartao-animal {
  display: block;
  background: #fff;
  border: 1px solid var(--borda);
  border-left: 5px solid var(--marca);
  border-radius: 12px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--texto);
}
.cartao-animal:hover, .cartao-animal:focus-visible { border-color: var(--marca); }
.cartao-animal .nome { display: block; font-size: 20px; font-weight: 700; color: var(--marca-escura); }
.cartao-animal .especie { display: block; color: var(--texto-suave); }
.cartao-animal .quantidade { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--marca); }

.pilula.laudo-ok { background: var(--sucesso-fundo); color: var(--sucesso); }