/* ════════════════════════════════════════════════════════
   Anexos do prontuário (23/09/2026).

   O anexo entra no histórico do prontuário ao lado das
   anotações, com a mesma linha de separação. O sumário lido
   pelo modelo sai em caixa alta, como a Dra. pediu ("em LETRAS
   GARRAFAIS"), e leva a etiqueta de reconhecimento automático
   até a médica editar. Nome que não confere vai para um bloco
   à parte, acima do histórico. Prefixo `anexo-`.
   ════════════════════════════════════════════════════════ */

.anexo-envio {
  display: grid;
  gap: .4rem;
  justify-items: start;
  margin: 1.5rem 0 0;
  padding: 1rem;
  border-radius: var(--raio);
  background: var(--bg-alt);
}
.anexo-envio .campo-dica { margin: 0; }
/* Sobre a areia o contorno do botão some: ele ganha o fundo claro do cartão. */
.anexo-envio .btn-contorno { background: var(--bg-section); border-color: var(--terracota); }
.anexo-enviando { margin: 0; font-size: .82rem; color: var(--text-primary); }

.anexo {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: .9rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}

.anexo-previa {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  background: var(--bg-section);
  color: var(--text-muted);
  cursor: pointer;
}
.anexo-previa img { width: 100%; height: 100%; object-fit: cover; }
.anexo-previa svg { width: 28px; height: 28px; }
.anexo-previa:hover { border-color: var(--terracota); }
.anexo-previa:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; }

.anexo-corpo { display: grid; gap: .4rem; min-width: 0; }
.anexo-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; font-size: .82rem; }
.anexo-topo strong { font-weight: 500; }
.anexo-topo time { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.anexo-meta { margin: 0; font-size: .8rem; color: var(--text-muted); overflow-wrap: anywhere; }

.anexo-sumario {
  margin: .2rem 0 0;
  max-width: 75ch;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.anexo-selo {
  justify-self: start;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: var(--bg-alt);
  font-size: .72rem;
  font-weight: 500;
  color: var(--terracota-texto);
}
.anexo-selo-editado { color: var(--sucesso); }

.anexo-situacao { margin: 0; font-size: .82rem; color: var(--text-muted); }
.anexo-situacao-alerta { color: var(--alerta); }
.anexo-alerta {
  margin: .2rem 0 0;
  padding: .6rem .75rem;
  border-radius: var(--raio-sm);
  background: color-mix(in srgb, var(--alerta) 10%, var(--branco));
  font-size: .85rem;
  color: var(--text-primary);
}
.anexo-acoes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }

.anexo-conferir { margin: 1.5rem 0 0; }
.anexo-conferir h3 { margin: 0 0 .25rem; font-size: 1rem; font-weight: 500; color: var(--alerta); }
.anexo-diverge .anexo-previa { border-color: var(--alerta); }

@media (max-width: 600px) {
  .anexo { grid-template-columns: 48px minmax(0, 1fr); gap: .7rem; }
  .anexo-previa { width: 48px; height: 48px; }
  .anexo-acoes .btn { min-height: 40px; }
}