/* /acesso — portal do tutor: login honesto (sem backend ainda) + prévia do "Meus exames".
   Mundo clínica (acento verde). Só tokens: cor de --acento/semânticos, raio por profundidade,
   tempo de --dur-*. Nenhum literal de cor/raio/duração aqui. */

.acesso { display: grid; }
.acesso__col { display: flex; flex-direction: column; min-width: 0; min-height: 100svh; padding: var(--spacing-24) var(--gutter); }
.acesso__top { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); }
.acesso__top .brand { margin-right: 0; }
.acesso__back { color: var(--text); font-size: var(--font-size-14); min-height: var(--control-height); }
.acesso__main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: var(--spacing-48); }
.acesso__main:focus { outline: none; }
.acesso__box { width: 100%; max-width: 440px; margin-inline: auto; }
.acesso__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spacing-8) var(--spacing-24); font-size: var(--font-size-14); color: var(--text-muted); }

/* ── Login ──────────────────────────────────────────────────────────── */
.acesso__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-8); margin-bottom: var(--spacing-32); }
.acesso__intro h1 { font-size: var(--text-h1); letter-spacing: var(--track-display); line-height: var(--leading-tight); }
.acesso__h { font-size: var(--text-h1); letter-spacing: var(--track-display); line-height: var(--leading-tight); }
.acesso__form { display: flex; flex-direction: column; gap: var(--spacing-20); }
.acesso__form .btn { margin-top: var(--spacing-4); }
.acesso__first { margin-top: var(--spacing-24); font-size: var(--font-size-14); line-height: 1.5; color: var(--text-muted); }
.acesso__forms:not([hidden]) { animation: acesso-in var(--dur-state) var(--ease-enter) both; }
.acesso__soon:not([hidden]) { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-16); animation: acesso-in var(--dur-state) var(--ease-enter) both; }
.acesso__soon .lead { margin-bottom: var(--spacing-8); }
.acesso__soon h2:focus { outline: none; }
@keyframes acesso-in { from { opacity: 0; transform: translateY(var(--spacing-8)); } to { opacity: 1; transform: none; } }

/* campos */
.field { display: flex; flex-direction: column; gap: var(--spacing-8); min-width: 0; margin: 0; padding: 0; border: 0; }
.field__label { font-size: var(--font-size-16); font-weight: var(--weight-announce); color: var(--text-strong); }
.field__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-16); }
.field__error { display: flex; align-items: flex-start; gap: var(--spacing-8); font-size: var(--font-size-14); font-weight: var(--weight-emphasize); color: var(--erro); }
.field__error:empty { display: none; }
.field__error i { flex: none; font-size: var(--icon-inline); line-height: 1.25; }
.input { width: 100%; min-height: var(--control-height-lg); padding: 0 var(--spacing-16); border: var(--stroke-medium) solid var(--border-strong); border-radius: var(--radius-control); background: var(--bg); color: var(--text-strong); font-size: var(--font-size-16); transition: border-color var(--dur-micro) var(--ease-signature); }
.input:hover { border-color: var(--text-muted); }
.input::placeholder { color: var(--text-muted); }
.input[aria-invalid="true"] { border-color: var(--erro); }
.acesso__forgot { color: var(--acento); font-size: var(--font-size-14); font-weight: var(--weight-emphasize); min-height: var(--control-height); margin-block: calc(var(--spacing-12) * -1); }
.acesso__forgot:hover { color: var(--acento-forte); }
.input-group { position: relative; }
.input-group .input { padding-right: calc(var(--control-height) + var(--spacing-8)); }
.input-group__btn { position: absolute; top: 50%; right: var(--spacing-4); display: grid; place-items: center; width: var(--control-height); height: var(--control-height); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-muted); font-size: var(--font-size-20); transform: translateY(-50%); cursor: pointer; }
.input-group__btn:hover { color: var(--text-strong); }
.link-button { padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.acesso__back-btn { display: inline-flex; align-items: center; gap: var(--spacing-8); min-height: var(--control-height); color: var(--text); font-weight: var(--weight-announce); }

/* ── Lado direito: prévia honesta do portal "Meus exames" ───────────────
   Não é uma tela logada nem dado real: é uma amostra do layout, marcada
   "Em breve" e com nota explícita (texto nunca sobre foto). */
.acesso__visual { display: flex; flex-direction: column; gap: var(--spacing-16); padding: 0 var(--gutter) var(--spacing-48); }
.acesso__preview { display: flex; flex-direction: column; gap: var(--spacing-16); padding: var(--card-pad); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg); }
.preview__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); }
.preview__title { font-size: var(--font-size-20); font-weight: var(--weight-display); letter-spacing: var(--track-heading); color: var(--text-strong); }
.preview__note { font-size: var(--font-size-13); line-height: 1.5; color: var(--text-muted); }

/* linhas de exame: reusa o fio do .index-list, mas as linhas não são links (é prévia) */
.exam-list { display: flex; flex-direction: column; }
.exam { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); min-height: var(--control-height); padding-block: var(--spacing-12); border-bottom: 1px solid var(--border); }
.exam:last-child { border-bottom: 0; padding-bottom: 0; }
.exam__info { display: flex; flex-direction: column; gap: var(--spacing-2); min-width: 0; }
.exam__type { font-size: var(--font-size-16); font-weight: var(--weight-announce); color: var(--text-strong); letter-spacing: var(--track-heading); }
.exam__pet-name { font-size: var(--font-size-13); color: var(--text-muted); }
.exam__meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-4); flex: none; text-align: right; }
.exam__meta time { font-size: var(--font-size-14); color: var(--text-muted); }
.exam-status { display: inline-flex; align-items: center; gap: var(--spacing-8); font-size: var(--font-size-13); font-weight: var(--weight-emphasize); color: var(--text-muted); }
.exam-status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--exam-dot, var(--border-strong)); }
.exam-status--ready { color: var(--text-strong); --exam-dot: var(--sucesso); }
.exam-status--analysis { --exam-dot: var(--alerta); }
.exam-status--scheduled { --exam-dot: var(--border-strong); }

.acesso__caption { color: var(--text); font-size: var(--font-size-14); line-height: 1.5; }

/* ── Duas colunas no desktop: form à esquerda, prévia numa moldura verde ──
   Concentricidade: painel radius 32, padding 16 → card interno radius 32−16. */
@media (min-width: 900px) {
  .acesso { grid-template-columns: 1fr 1fr; }
  .acesso__col { padding-inline: clamp(var(--spacing-32), 6vw, var(--spacing-96)); }
  .acesso__visual { justify-content: center; gap: var(--spacing-24); padding: var(--spacing-16); margin: var(--spacing-16); border-radius: var(--radius-panel); background: var(--verde-900); }
  .acesso__preview { padding: var(--spacing-24); border: 0; border-radius: calc(var(--radius-panel) - var(--spacing-16)); box-shadow: var(--shadow-lg); }
  .acesso__caption { max-width: 34ch; padding-inline: var(--spacing-8); color: var(--verde-100); }
}