/* VETERINÁRIA 360 — a pele do ofício sobre o sistema visual da casa.
   O worldclass-v4.css vem da CLÍNICA e não é reescrito: aqui só mora o que é
   desta vertical (a cor do bicho, o esqueleto do app e as peças que a clínica
   não tem, como o frasco de vacina). Sistema visual também é motor. */
:root{
  --vet-tinta:#14211c; --vet-tinta2:#4c5c55; --vet-tinta3:#7f8d87;
  --vet-papel:#f5f3ee; --vet-alto:#ffffff; --vet-linha:#e2ddd3;
  --vet-verde:#1f4d3d; --vet-verde-claro:#eaf2ee;
  --vet-ocre:#a8681c; --vet-ocre-claro:#fbf2e5;
  --vet-sangue:#8f2d21; --vet-sangue-claro:#fceceb;
  --vet-raio:6px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--vet-papel);color:var(--vet-tinta);
     font:16px/1.55 ui-sans-serif,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
.boot{display:grid;place-items:center;min-height:100dvh;gap:.4rem;color:var(--vet-tinta3)}
.brand-mark{width:3rem;height:3rem;border-radius:50%;background:var(--vet-verde);color:#fff;
            display:grid;place-items:center;font:600 .9rem ui-serif,Georgia,serif}

/* ESQUELETO */
.vet-shell{display:grid;grid-template-columns:15rem 1fr;min-height:100dvh}
.vet-side{background:var(--vet-verde);color:#fff;padding:1.1rem .9rem;display:flex;flex-direction:column;gap:1.2rem}
.vet-brand{display:flex;gap:.6rem;align-items:center}
.vet-brand span{width:2.1rem;height:2.1rem;border-radius:50%;background:rgba(255,255,255,.16);
                display:grid;place-items:center;font:600 .72rem ui-serif,Georgia,serif}
.vet-brand strong{font:600 1.02rem/1.15 ui-serif,Georgia,serif;display:block}
.vet-brand small{opacity:.75;font-size:.74rem}
.vet-nav{display:flex;flex-direction:column;gap:.15rem}
.vet-nav button{all:unset;cursor:pointer;padding:.55rem .7rem;border-radius:var(--vet-raio);
                font-size:.92rem;color:rgba(255,255,255,.82);display:flex;gap:.55rem;align-items:center}
.vet-nav button:hover{background:rgba(255,255,255,.09)}
.vet-nav button[aria-current="page"]{background:var(--vet-alto);color:var(--vet-verde);font-weight:600}
.vet-nav i{font-style:normal;font:600 .62rem ui-monospace,Menlo,monospace;opacity:.7;width:1.4rem}
.vet-quem{margin-top:auto;border-top:1px solid rgba(255,255,255,.18);padding-top:.8rem}
.vet-quem label{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-bottom:.3rem}
.vet-quem select{width:100%;font:inherit;font-size:.88rem;padding:.42rem .5rem;border-radius:var(--vet-raio);
                 border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff}
.vet-quem select option{color:var(--vet-tinta)}

.vet-main{min-width:0;padding:1.5rem 1.75rem 4rem}
.vet-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.vet-head h1{font:600 1.5rem/1.2 ui-serif,Georgia,serif;margin:0;text-wrap:balance}
.vet-head p{margin:.2rem 0 0;color:var(--vet-tinta3);font-size:.92rem}

/* NÚMEROS DO DIA */
.vet-numeros{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));margin-bottom:1.3rem}
.vet-num{background:var(--vet-alto);border:1px solid var(--vet-linha);border-top:3px solid var(--vet-verde);
         border-radius:var(--vet-raio);padding:.85rem .95rem}
.vet-num span{display:block;font:600 .64rem/1 ui-monospace,Menlo,monospace;letter-spacing:.13em;
              text-transform:uppercase;color:var(--vet-tinta3)}
.vet-num strong{display:block;font:600 1.9rem/1.05 ui-serif,Georgia,serif;margin:.3rem 0 .1rem;font-variant-numeric:tabular-nums}
.vet-num small{color:var(--vet-tinta3);font-size:.78rem}
.vet-num.atencao{border-top-color:var(--vet-ocre)} .vet-num.alerta{border-top-color:var(--vet-sangue)}
.vet-num.alerta strong{color:var(--vet-sangue)}

/* CARTÕES */
.vet-card{background:var(--vet-alto);border:1px solid var(--vet-linha);border-radius:var(--vet-raio);
          padding:1.1rem 1.2rem;margin-bottom:1rem}
.vet-card>h2{font:600 1.05rem/1.3 ui-serif,Georgia,serif;margin:0}
.vet-card>h2+p{margin:.15rem 0 .9rem;color:var(--vet-tinta3);font-size:.86rem}

/* A FILA DO DIA */
.vet-fila{display:flex;flex-direction:column}
.vet-linha{display:flex;gap:1rem;align-items:center;padding:.85rem 0;border-top:1px solid var(--vet-linha);flex-wrap:wrap}
.vet-linha:first-child{border-top:0}
.vet-hora{font:600 .95rem/1 ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;min-width:3.2rem;color:var(--vet-tinta2)}
.vet-bicho{flex:1 1 13rem;min-width:0}
.vet-bicho strong{display:block;font-size:1.02rem}
.vet-bicho small{display:block;color:var(--vet-tinta3);font-size:.83rem;margin-top:.1rem}
.vet-avatar{width:2.4rem;height:2.4rem;border-radius:50%;background:var(--vet-verde-claro);color:var(--vet-verde);
            display:grid;place-items:center;font-size:1.1rem;flex:0 0 auto}
.vet-acoes{display:flex;gap:.45rem;flex-wrap:wrap;margin-left:auto}

/* SELOS E BOTÕES */
.vet-selo{font:600 .68rem/1 ui-monospace,Menlo,monospace;letter-spacing:.09em;text-transform:uppercase;
          padding:.32rem .6rem;border-radius:2rem;border:1px solid var(--vet-linha);color:var(--vet-tinta2);white-space:nowrap}
.vet-selo.aqui{border-color:var(--vet-verde);color:var(--vet-verde);background:var(--vet-verde-claro)}
.vet-selo.fim{background:var(--vet-verde);border-color:var(--vet-verde);color:#fff}
.vet-selo.risco{border-color:var(--vet-sangue);color:var(--vet-sangue);background:var(--vet-sangue-claro)}
.vet-btn{all:unset;cursor:pointer;font-size:.88rem;font-weight:600;padding:.5rem .9rem;border-radius:var(--vet-raio);
         background:var(--vet-verde);color:#fff;text-align:center}
.vet-btn:hover{filter:brightness(1.08)}
.vet-btn.calmo{background:var(--vet-alto);color:var(--vet-verde);box-shadow:inset 0 0 0 1px var(--vet-verde)}
.vet-btn:focus-visible{outline:3px solid var(--vet-ocre);outline-offset:2px}
.vet-motivo{font-size:.8rem;color:var(--vet-tinta3);font-style:italic;flex-basis:100%}

/* FRASCOS */
.vet-frascos{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.vet-frasco{border:1px solid var(--vet-linha);border-left:4px solid var(--vet-verde);border-radius:var(--vet-raio);
            padding:.75rem .85rem;background:var(--vet-alto)}
.vet-frasco.perto{border-left-color:var(--vet-ocre);background:var(--vet-ocre-claro)}
.vet-frasco.vencido{border-left-color:var(--vet-sangue);background:var(--vet-sangue-claro)}
.vet-frasco strong{display:block;font-size:.95rem}
.vet-frasco small{display:block;color:var(--vet-tinta3);font-size:.79rem;margin-top:.1rem}
.vet-frasco b{font-variant-numeric:tabular-nums}
.vet-frasco .prazo{font-weight:600;font-size:.82rem;margin-top:.35rem;display:block}
.vet-frasco.vencido .prazo{color:var(--vet-sangue)} .vet-frasco.perto .prazo{color:var(--vet-ocre)}

.vet-vazio{color:var(--vet-tinta3);font-size:.9rem;padding:1.2rem 0;text-align:center}

/* PERGUNTA (o que substituiu o prompt) */
.vet-modal{position:fixed;inset:0;background:rgba(20,33,28,.5);display:grid;place-items:center;padding:1rem;z-index:50}
.vet-modal-caixa{background:var(--vet-alto);border-radius:var(--vet-raio);padding:1.4rem 1.5rem;max-width:26rem;width:100%;
                 box-shadow:0 12px 40px rgba(0,0,0,.22)}
.vet-modal-caixa h3{font:600 1.1rem/1.25 ui-serif,Georgia,serif;margin:0 0 .3rem}
.vet-modal-caixa p{margin:0 0 1rem;color:var(--vet-tinta2);font-size:.9rem}
.vet-campo{display:block;margin-bottom:1rem}
.vet-campo span{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--vet-tinta3);margin-bottom:.3rem}
.vet-campo input,.vet-campo select{width:100%;font:inherit;padding:.6rem .7rem;border:1px solid var(--vet-linha);
                                   border-radius:var(--vet-raio);background:var(--vet-alto)}
.vet-campo input:focus,.vet-campo select:focus{outline:3px solid var(--vet-ocre);outline-offset:1px}
.vet-modal-pe{display:flex;gap:.5rem;justify-content:flex-end}

/* RECADO */
#toast-root{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:60;width:min(34rem,92vw)}
.vet-toast{padding:.85rem 1.05rem;border-radius:var(--vet-raio);font-size:.92rem;margin-top:.5rem;
           box-shadow:0 6px 22px rgba(0,0,0,.18);background:var(--vet-verde);color:#fff}
.vet-toast.ruim{background:var(--vet-sangue)}

@media (max-width:820px){
  .vet-shell{grid-template-columns:1fr}
  .vet-side{flex-direction:row;align-items:center;gap:.8rem;padding:.7rem .9rem;overflow-x:auto}
  .vet-nav{flex-direction:row;gap:.3rem}
  .vet-nav i{display:none}
  .vet-quem{margin:0 0 0 auto;border:0;padding:0;min-width:11rem}
  .vet-quem label{display:none}
  .vet-main{padding:1.1rem}
}

/* ── A PORTA DA RUA ────────────────────────────────────────────────────────
   ⚑ o único pedaço de CSS que é DESTA vertical e não da casa: a clínica entra
   por um portal próprio e a veterinária ainda não tinha porta. Tudo o mais
   (c4-field, c4-button, c4-eyebrow) é vocabulário da casa, reaproveitado. */
.c4-entrada { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.c4-entrada-card { width: min(420px, 100%); background: var(--c4-surface, #fff);
  border: 1px solid var(--c4-border, #e3e0da); border-radius: 18px; padding: 32px 28px;
  box-shadow: 0 24px 60px -32px rgba(24, 22, 18, .35); display: grid; gap: 16px; }
.c4-entrada-card h1 { margin: 0; font-size: 1.6rem; letter-spacing: -.02em; }
.c4-entrada-copy { margin: 0; color: var(--c4-muted, #6b665e); line-height: 1.5; font-size: .93rem; }
.c4-entrada form { display: grid; gap: 14px; }
.c4-entrada-nota { margin: 0; min-height: 1.2em; font-size: .88rem; color: var(--c4-muted, #6b665e); }
.c4-entrada-nota.ruim { color: var(--c4-danger, #8f2d21); font-weight: 600; }

/* ── A RECUSA LEGÍVEL — A REGRA QUE MORREU COM A CURA DA PEÇA ──────────────
   ⛑ 14/08, sobra «f» da Onda 1. AQUI HAVIA `.vet-recusa-legivel .c4-blocked-action`,
   uma regra desta vertical para devolver legibilidade a uma recusa que saía
   quebrada: `botao()` (public/ui/nucleo.js) desenhava o motivo da porta como
   `<span class="c4-blocked-action">o motivo</span>` — um filho de TEXTO só —, e a
   regra da casa (worldclass-v4.css, linha 3581) desenha essa classe como
   `grid-template-columns: 40px minmax(0,1fr)`, esperando a forma completa da
   clínica: `<span>!</span>` na coluna estreita e um bloco na larga. Com um filho
   só o motivo inteiro caía nos 40px — medido no preview: 60px de largura por
   139px de altura, uma tira com duas letras por linha.

   TRÊS TELAS (corredor, balcão e impressos) tinham pendurado esta classe em
   volta da recusa. Três frentes contornando o mesmo buraco não é remendo, é
   sintoma: a peça estava errada. `botao()` passou a emitir a forma completa —
   glifo + `<strong>` com o ato recusado + `<p>` com o motivo do servidor — e a
   regra da casa voltou a pegar sozinha, em toda tela, inclusive nas que ninguém
   lembrou de decorar.

   ⚑ A REGRA SAIU JUNTO COM AS TRÊS GAMBIARRAS, DE PROPÓSITO: seletor apontando
   para onde a coisa não está mais é regra morta com cara de regra viva, e
   ninguém percebe — CSS não fica vermelho. Quem guarda a ausência é o guardião
   «⚑⚑ a recusa sai na FORMA COMPLETA» (tests/front-portas.test.mjs), que
   RENDERIZA a recusa e recusa a volta da classe. */

/* ══════════════════════════════════════════════════════════════════════════
   OS IMPRESSOS — a única parte desta casa que não é tela: é PAPEL.
   ⚑ 14/08, frente «o que sai no papel e no celular».

   POR QUE NASCERAM CLASSES NOVAS AQUI (e não é preguiça de ler o c4-*):
   `worldclass-v4.css` tem 6.640 linhas de vocabulário de TELA — cartão com
   sombra, cor de marca, duas colunas, estado de foco. Papel tem outra régua:
   uma coluna só, tinta preta sobre branco, sem sombra (que sai como sujeira
   cinza na impressora), largura de folha e quebra de página. Nenhuma classe
   c4-* diz isso, então estas dizem — e SÓ isso. Todo o resto desta frente
   (cartão, selo, tabela, faixa de alerta, estado vazio) é c4-* reusado:
   c4-card, c4-section-head, c4-appointment-card, c4-badge, c4-table,
   c4-table-wrap, c4-summary-strip, c4-honesty-note, c4-empty, c4-button,
   c4-stat-grid, c4-card-signals.
   ══════════════════════════════════════════════════════════════════════════ */

/* o que é ajuda de tela e NÃO vai no papel */
.vet-so-tela { margin-bottom: 12px; }

.vet-folha {
  display: block;
  max-width: 46rem;
  margin: 0 auto 1rem;
  padding: 2rem 2.2rem;
  border: 1px solid var(--vet-linha);
  border-radius: var(--vet-raio);
  background: #fff;
  color: #14211c;
  /* ⚑ a folha tem a medida do papel, não a da janela: linha comprida demais é
     linha que o olho perde na volta — vale na tela e vale impresso. */
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.vet-folha-head {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding-bottom: .8rem;
  border-bottom: 2px solid #14211c;
}
.vet-folha-casa {
  display: block;
  font: 600 .68rem/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vet-tinta3);
}
.vet-folha-head strong { display: block; margin-top: .25rem; font: 600 1.35rem/1.2 ui-serif, Georgia, serif; }
.vet-folha-head p { margin: .4rem 0 0; font-size: .92rem; color: var(--vet-tinta2); }
.vet-folha-data { text-align: right; }
.vet-folha-data span {
  display: block;
  font: 600 .64rem/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vet-tinta3);
}
.vet-folha-data strong { display: block; margin-top: .25rem; font-size: .98rem; font-variant-numeric: tabular-nums; }

/* o carimbo da base de demonstração: no papel ele tem de doer aos olhos */
.vet-folha-carimbo {
  margin: .9rem 0 0;
  padding: .5rem .7rem;
  border: 2px dashed var(--vet-sangue);
  border-radius: var(--vet-raio);
  color: var(--vet-sangue);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.vet-folha-bloco { margin-top: 1.4rem; break-inside: avoid; }
.vet-folha-bloco h3 {
  margin: 0 0 .5rem;
  font: 600 .7rem/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vet-tinta3);
  border-bottom: 1px solid var(--vet-linha);
  padding-bottom: .35rem;
}
/* ⚑ F11 no PAPEL: o bloco vazio diz a causa que o servidor escreveu, em vez de
   sumir calado. Buraco calado num documento faz o tutor achar que a casa perdeu
   o dado — e ele tem razão de achar. */
.vet-folha-causa { margin: 0; color: var(--vet-tinta2); font-size: .9rem; font-style: italic; }

.vet-folha-lista { margin: 0; padding-left: 1.1rem; }
.vet-folha-lista li { margin: .3rem 0; }
.vet-folha-lista.vet-folha-alerta li { color: var(--vet-sangue); }
.vet-folha-lista em { color: var(--vet-tinta3); font-size: .85rem; }

.vet-folha-notas { margin: 0; padding: 0; list-style: none; }
.vet-folha-notas li { padding: .55rem 0; border-top: 1px solid var(--vet-linha); }
.vet-folha-notas li:first-child { border-top: 0; }
.vet-folha-notas span {
  font: 600 .72rem/1 ui-monospace, Menlo, Consolas, monospace;
  color: var(--vet-tinta3);
  letter-spacing: .06em;
}
.vet-folha-notas p { margin: .25rem 0 .15rem; }
.vet-folha-notas em { color: var(--vet-tinta3); font-size: .82rem; }

.vet-folha-destaque { margin: 0; font: 600 1.5rem/1.15 ui-serif, Georgia, serif; font-variant-numeric: tabular-nums; }
.vet-folha-destaque span { display: block; margin-top: .2rem; font: 400 .86rem/1.4 inherit; color: var(--vet-tinta2); }

.vet-folha-pe {
  margin-top: 1.6rem;
  padding-top: .7rem;
  border-top: 1px solid var(--vet-linha);
}
.vet-folha-pe p { margin: .2rem 0; font-size: .78rem; color: var(--vet-tinta3); }

/* ⚑ O RECIBO É O TEXTO DO SERVIDOR, LETRA POR LETRA — 48 colunas, a medida do
   papel de 80mm da impressora do balcão. `pre-wrap` para não cortar linha no
   celular, e fonte de largura fixa para o valor continuar alinhado à direita:
   recibo com coluna torta é recibo que o tutor não confere. */
.vet-folha-texto {
  margin: 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font: 13.5px/1.5 ui-monospace, Menlo, Consolas, "Courier New", monospace;
  color: #14211c;
}
.vet-folha-recibo { max-width: 34rem; padding: 1.6rem 1.8rem; }

/* ── O CELULAR NA MÃO DA VETERINÁRIA ─────────────────────────────────────── */
@media (max-width: 820px) {
  .vet-folha { padding: 1.1rem 1.15rem; font-size: 14px; }
  .vet-folha-data { text-align: left; }
  .vet-folha-recibo { padding: 1.1rem; }
  .vet-folha-texto { font-size: 11.5px; }
}

/* ── A IMPRESSORA ────────────────────────────────────────────────────────────
   ⚑ o que a tela mostrou é o que sai no papel: a folha JÁ está desenhada na
   página, e a impressão só apaga o resto. Papel que sai diferente do que a
   pessoa conferiu na tela é papel que ninguém confere.
   (`worldclass-v4.css` já esconde barra lateral, topo, menu do celular e
   botões no @media print — aqui só se acrescenta o que é da folha.) */
@media print {
  .vet-so-tela,
  .c4-page > *:not(.vet-folha) { display: none !important; }

  /* ⚑⚑ MEDIDO 14/08, e é o defeito mais caro que esta frente tinha: a regra de
     cima só alcança quem mora DENTRO de `.c4-page`, e as três coisas que
     flutuam por cima da casa moram FORA dela — `#toast-root`, `#modal-root` e o
     atalho do teclado são irmãos de `.c4-shell`, todos `position: fixed`. E
     `worldclass-v4.css` esconde barra, topo e botões no @media print, mas NÃO
     esconde o recado nem o modal (conferido linha a linha, não suposto).
     O que isso fazia: o recado da casa fica 5s na tela quando dá certo e 9s
     quando é recusa. A recepção recebe o pagamento («Recebido R$ 50,00»), clica
     em «Recibo do tutor» e manda imprimir — tudo dentro dos 5 segundos, que é
     como se trabalha num balcão. O papel saía para a mão do tutor com uma
     tarja flutuante impressa por cima, e uma recusa vermelha duraria 9s.
     Papel é a única parte deste sistema que sai da casa: tela errada se
     corrige com F5, papel errado já está na rua. Guardião em
     `tests/impressos.test.mjs` — lei sem mecanismo é grau 0. */
  #toast-root,
  #modal-root,
  .c4-toast,
  .c4-modal-backdrop,
  .c4-live,
  .c4-skip { display: none !important; }

  .vet-folha {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #000;
    font-size: 11.5pt;
  }
  .vet-folha-recibo { max-width: none; padding: 0; }
  /* ⚑ 14/08 (frente do RECEITUÁRIO) — DUAS VIAS SÃO DOIS PAPÉIS.
     O receituário de controle especial sai em duas vias, e a segunda FICA
     arquivada na clínica. Sem esta regra as duas saem emendadas na mesma folha:
     ninguém consegue arquivar a 2ª sem cortar a 1ª com tesoura, e via retida que
     depende de tesoura é via que não fica. */
  .vet-folha + .vet-folha { break-before: page; }
  .vet-folha-texto { font-size: 10pt; color: #000; }
  .vet-folha-head { border-bottom-color: #000; }
  .vet-folha-carimbo { color: #000; border-color: #000; }
  .vet-folha-lista.vet-folha-alerta li { color: #000; font-weight: 700; }
  .vet-folha-bloco, .vet-folha-notas li { break-inside: avoid; }
  .c4-table { break-inside: auto; }
  .c4-table th, .c4-table td { border-color: #999 !important; }
}
@page { margin: 14mm; }

/* ══ O PORTAL DO TUTOR ══════════════════════════════════════════════════════
   A única tela desta casa que uma pessoa de FORA abre — e ela é lida no celular,
   de pé, muitas vezes por gente que não usa computador. Por isso: uma coluna,
   texto grande, nada de menu e nada de tabela. As classes são `vet-portal-*`
   porque a casa (worldclass-v4.css) desenha o balcão da clínica, e o balcão tem
   moldura, barra lateral e crachá — nada disso existe aqui. */
.vet-portal-body{background:var(--vet-papel)}
.vet-portal{max-width:34rem;margin:0 auto;padding:1.4rem 1.1rem 3.5rem}
.vet-portal-head{border-bottom:2px solid var(--vet-verde);padding-bottom:.9rem;margin-bottom:1.3rem}
.vet-portal-head span{font:600 .68rem/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.16em;
                      text-transform:uppercase;color:var(--vet-verde)}
.vet-portal-head h1{margin:.45rem 0 .3rem;font:600 1.65rem/1.2 ui-serif,Georgia,serif}
.vet-portal-head p{margin:0;color:var(--vet-tinta2);font-size:.94rem}
.vet-portal-bloco{margin:0 0 1.6rem}
.vet-portal-bloco h2{margin:0 0 .6rem;font:600 .74rem/1 ui-sans-serif,system-ui,sans-serif;
                     letter-spacing:.14em;text-transform:uppercase;color:var(--vet-tinta3)}
.vet-portal-causa{margin:0;color:var(--vet-tinta2);font-size:.92rem;font-style:italic}
.vet-portal-bichos{display:flex;flex-wrap:wrap;gap:.6rem}
.vet-portal-bicho{flex:1 1 9rem;background:var(--vet-alto);border:1px solid var(--vet-linha);
                  border-radius:var(--vet-raio);padding:.7rem .8rem}
.vet-portal-bicho strong{display:block;font:600 1.05rem/1.2 ui-serif,Georgia,serif}
.vet-portal-bicho span{display:block;margin-top:.15rem;color:var(--vet-tinta2);font-size:.84rem}
.vet-portal-lista{list-style:none;margin:0;padding:0}
.vet-portal-lista li{background:var(--vet-alto);border:1px solid var(--vet-linha);
                     border-radius:var(--vet-raio);padding:.7rem .8rem;margin-bottom:.5rem}
.vet-portal-lista li span{display:block;margin-top:.2rem;color:var(--vet-tinta3);font-size:.82rem}
.vet-portal-lista li.vet-portal-atrasada{border-left:4px solid var(--vet-sangue);background:var(--vet-sangue-claro)}
.vet-portal-item{background:var(--vet-alto);border:1px solid var(--vet-linha);
                 border-radius:var(--vet-raio);padding:.8rem .85rem;margin-bottom:.6rem}
.vet-portal-item div{display:flex;gap:.5rem;align-items:baseline;justify-content:space-between}
.vet-portal-item strong{font:600 1.05rem/1.2 ui-serif,Georgia,serif}
.vet-portal-item span{color:var(--vet-tinta3);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
.vet-portal-quando{margin:.3rem 0 .1rem;font-size:.95rem;font-variant-numeric:tabular-nums}
.vet-portal-ja{margin:.25rem 0;color:var(--vet-verde);font-size:.86rem}
.vet-portal-acoes{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.vet-portal-atencao{margin:.35rem 0 0;color:var(--vet-sangue);font-size:.88rem}
.vet-portal-total{margin:.6rem 0 0;font-size:1.02rem}
.vet-portal-frase{font-size:1.05rem;margin:0 0 .6rem}
.vet-portal-providencia{margin:0 0 1.2rem;color:var(--vet-verde);font-weight:600}
.vet-portal-rodape{margin:1.1rem 0 0;color:var(--vet-tinta3);font-size:.82rem;line-height:1.5}
.vet-portal-recado{margin:0 0 1rem;padding:.7rem .8rem;border-radius:var(--vet-raio);font-size:.94rem}
.vet-portal-recado.is-ok{background:var(--vet-verde-claro);color:var(--vet-verde)}
.vet-portal-recado.is-error{background:var(--vet-sangue-claro);color:var(--vet-sangue)}

/* o link recém-entregue, na tela da EQUIPE (ele aparece uma vez e some) */
.vet-portal-novo{border-left:4px solid var(--vet-verde)}
.vet-portal-chave{margin:.2rem 0 .6rem;word-break:break-all}
.vet-portal-chave code{font:600 .92rem/1.45 ui-monospace,Menlo,monospace;background:var(--vet-verde-claro);
                       color:var(--vet-verde);padding:.45rem .55rem;border-radius:var(--vet-raio);display:inline-block}