/* Anexos — os dois papéis que o app guarda: a foto da guia que chegou ao
   balcão e o PDF que a clínica mandou de volta.

   Os dois nasceram na ficha do exame (tela que morreu, ver docs/design-
   decisions.md). Sobreviveram porque o anexo não precisava da tela: ele mora
   onde o papel é lido — a guia no modal de marcar, o PDF na linha da Agenda. */

/* A guia em miniatura, torta como foto de documento; endireita ao passar o
   mouse. A moldura é do componente, a foto é do paciente. */
.guia-thumb {
  display: block; width: 86px; aspect-ratio: 3 / 4;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 4px; cursor: pointer; transform: rotate(-1.6deg); overflow: hidden;
  transition: transform .12s ease, border-color .12s ease;

  &:hover, &:focus-visible { transform: rotate(0); border-color: var(--accent); }

  & :where(img, svg) { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
}

/* Anexo — um objeto-documento: lombada de tinta com o tipo do arquivo e o
   nome em mono, contornado como toda ação de linha. Numa tabela o nome do
   arquivo não cabe sem brigar com o alinhamento das colunas: lá se omite o
   <span> e fica só a lombada, com o nome no title. */
.attach {
  display: inline-flex; align-items: stretch; vertical-align: middle;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r); overflow: hidden; text-decoration: none;

  & b {
    display: flex; align-items: center; padding: 3px 7px;
    font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .08em;
    background: var(--ink); color: var(--surface);
  }

  & span {
    display: flex; align-items: center; padding: 3px 10px;
    font-family: var(--mono); font-size: 11px; color: var(--ink-muted);
  }

  &:hover {
    border-color: var(--accent);

    & span { color: var(--accent); }
  }
}