/* modal.css — sobreposicao, janela modal e as linhas de detalhe.
 *
 * Recorte das linhas 100-114 do monolito.
 */

/* A cortina era preto a 70%. Continua escura -- e o que separa o modal do
 * resto -- mas em petroleo a 45%, para nao introduzir um cinza neutro. */
.overlay {
  position: fixed; inset: 0; background: rgba(0, 72, 78, .45);
  backdrop-filter: blur(4px); z-index: 200;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .2s ease;
}

/* Janela BRANCA sobre a cortina, com sombra propria. No tema escuro ela era
 * apenas um tom acima do fundo e dispensava sombra. */
.modal {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 18px; width: min(720px, 94vw); max-height: 88vh;
  overflow-y: auto; animation: slideUp .25s ease;
  box-shadow: 0 20px 48px rgba(0, 72, 78, .18);
}
.modal-head {
  padding: 22px 26px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; background: var(--bg); z-index: 1;
}
.modal-title { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; color: var(--text) }
.modal-sub { font-size: 12px; color: var(--text3); margin-top: 3px }
.modal-body { padding: 26px }

/* Tambem usado no cabecalho do painel de IA. */
.close-btn {
  background: transparent; border: 1px solid var(--border);
  border-radius: 8px; color: var(--text3); cursor: pointer;
  padding: 7px 13px; font-size: 13px; transition: .15s;
  font-family: inherit;
}
.close-btn:hover { border-color: var(--red); color: var(--red) }

/* --------------------------------------------------------------- detalhes */

.detail-section { margin-bottom: 24px }
.detail-section-title {
  font-size: 10.5px; color: var(--text3); text-transform: uppercase;
  letter-spacing: 1.4px; font-weight: 600; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.detail-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--bg);
}
.detail-row:last-child { border-bottom: none }
.detail-key { font-size: 13px; color: var(--text3) }
.detail-val {
  font-size: 13px; color: var(--text); font-weight: 500;
  text-align: right; display: flex; align-items: center; gap: 8px;
}

.pill { padding: 2px 9px; border-radius: 20px; border: 1px solid; font-size: 10px; font-weight: 700 }