/* Modal — a folha flutuante. Mesma gramática da folha; a sombra é permitida
   aqui porque isto de fato flutua sobre a folha. <dialog> nativo: o ::backdrop
   e o ESC vêm de graça. */

dialog.folha-flutuante {
  /* Largura e folga vertical são token: a variante troca o token, não a
     propriedade. Com a mesma especificidade (0,1,1) em dois arquivos, quem
     ganhava era a ordem alfabética — e o auth-doc.css perdia para este. */
  border: 0; padding: 0; margin: auto;
  width: min(var(--dialog-w, 560px), calc(100vw - 32px));
  max-height: calc(100vh - var(--dialog-vgap, 48px)); overflow: auto;
  background: var(--surface); color: var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 64px rgb(0 0 0 / .3);

  /* o fundo não some, desfoca: a fila continua ali atrás, ilegível de
     propósito, e o modal ganha profundidade sem escurecer mais a tela */
  &::backdrop {
    background: var(--scrim);
    backdrop-filter: blur(4px);
  }

  &[open] { animation: modal-in .18s cubic-bezier(.2, .7, .3, 1); }
}

/* o cadastro de entidade é mais largo: lista e formulário no mesmo modal */
dialog.folha-flutuante--wide { --dialog-w: 660px; }

/* a confirmação é estreita: ela cabe numa pergunta */
dialog.folha-flutuante--narrow { --dialog-w: 420px; }

/* A confirmação — uma pergunta e duas saídas, sem cabeçalho de duas colunas:
   não há "com quem", só "o quê". */
.confirm-body {
  & h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 10px; }
}

.confirm-msg { font-size: 14.5px; line-height: 1.5; margin: 0 0 24px; }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px); }
}

/* --modal-pad: o rodapé ancorado (.actions, lá embaixo) desfaz este padding
   com margem negativa, então quem muda um muda o outro pelo mesmo token. */
.modal-body { --modal-pad: 30px; padding: 26px var(--modal-pad) var(--modal-pad); }

/* Cabeçalho de duas colunas, como o masthead da folha: o que se está
   fazendo à esquerda, com quem à direita. */
.modal-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line-strong); padding-bottom: 12px; margin-bottom: 24px;

  & h2 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 2px; }

  & .sub { font-size: 12.5px; color: var(--ink-muted); }

  & .who { text-align: right; }

  & .cname { font-size: 14px; font-weight: 600; display: block; }

  & .phone {
    font-family: var(--mono); font-size: 13.5px; color: var(--accent);
    font-variant-numeric: tabular-nums;
  }
}

/* Na marcação quem manda é o paciente: o nome vem primeiro, em caixa alta,
   o exame logo abaixo. Duas linhas leves separam
   quem, o quê e o formulário — a hierarquia já está no tamanho da letra. */
.modal-head--stacked {
  display: block;
  border-bottom-color: var(--line);

  & .who { text-align: left; }

  & .who-link { display: flex; align-items: baseline; gap: 12px; }

  & .cname {
    display: inline; flex: 1; min-width: 0;
    font-size: 22px; letter-spacing: -.01em; text-transform: uppercase;
  }

  /* quantos exames a mais esta mesma marcação leva junto */
  & h2 .more {
    font-family: var(--mono); font-size: 13px;
    font-weight: 600; color: var(--ink-muted);
  }

  & .what {
    border-top: 1px solid var(--line);
    margin-top: 12px; padding-top: 12px;
  }
}

/* o bloco de contato inteiro é a área de clique para o cadastro do paciente */
.who-link {
  border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
  padding: 8px 12px; margin: -8px -12px; border-radius: var(--r);
  transition: background .12s ease;

  &:hover { background: var(--accent-soft); }
}

/* grade de campos do modal: duas colunas, .full atravessa */
.fgrid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; margin-bottom: 26px;

  & .full { grid-column: 1 / -1; }
}

@media (max-width: 40rem) {
  .fgrid { grid-template-columns: 1fr; }
}

/* Lista do cadastro da entidade — linhas pontilhadas, ações à direita. */
.cat-list { display: flex; flex-direction: column; margin-bottom: 6px; }

.cat-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 2px; border-bottom: 1px dotted var(--line);

  & .cat-main { flex: 1; min-width: 0; }

  & .cat-name { font-size: 14.5px; font-weight: 600; display: block; }

  & .cat-meta { font-size: 12px; color: var(--ink-muted); display: block; }
}

.cat-actions { display: inline-flex; gap: 4px; flex: none; }

/* inline-flex porque a ação de editar é um link: <a> é inline e ignoraria
   width e height, e o botão sairia com a largura do conteúdo */
.cat-act {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; width: 26px; height: 26px; border-radius: var(--r);
  font-size: 13px; line-height: 1; color: var(--ink-muted); background: var(--surface-2);

  &:hover { color: var(--accent); background: var(--surface); }
}

/* o button_to do apagar vem embrulhado num form, que não pode ocupar espaço */
.cat-actions form { display: contents; }

.cat-act--del:hover { color: var(--urgent); background: var(--urgent-soft); }

/* O rodapé do modal não rola junto: as saídas ficam ancoradas no pé da folha
   enquanto o formulário desliza atrás delas. As margens negativas desfazem o
   padding do .modal-body para a faixa atravessar a folha de ponta a ponta.
   A confirmação fica de fora — ela cabe inteira na tela, nunca rola. */
:where(dialog.folha-flutuante:not(.folha-flutuante--narrow)) .actions {
  position: sticky; bottom: 0; z-index: 1;
  margin: 0 calc(-1 * var(--modal-pad)) calc(-1 * var(--modal-pad));
  padding: 14px var(--modal-pad) var(--modal-pad);
  background: var(--surface);
  border-top: 1px solid var(--line);
}