/* ===========================================================================
 * O que o contrato acrescenta ao estilo base.
 *
 * `estilo.css` é cópia do NDA, regenerada por ferramentas/sincronizar_contratos.py:
 * não edite lá. Aqui ficam só as peças que o NDA não tem — quadro de condições,
 * itens de lista, anexos, a escolha entre pessoa física e empresa e o aviso de
 * convite.
 * =========================================================================== */

/* ---- Quadro de condições e fichas dos anexos ---- */

.quadro,
.ficha {
  width: 100%;
  max-width: var(--medida);
  margin: 0 0 var(--space-5);
  border-collapse: collapse;
  font-size: var(--text-body-sm);
  line-height: var(--leading-snug);
}

.quadro th,
.quadro td,
.ficha th,
.ficha td {
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border-subtle);
  text-align: left;
  vertical-align: top;
}

.quadro th,
.ficha th {
  width: 34%;
  background: var(--bg-sunken);
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
}

.ficha th { width: 46%; }
.ficha td { height: 2.2em; }

/* ---- Itens (a), (b)… ---- */

.page p.item {
  display: grid;
  grid-template-columns: 2.2em 1fr;
  margin: 0 0 var(--space-2) var(--space-4);
  max-width: calc(var(--medida) - var(--space-4));
}

.page p.item span {
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

/* ---- Anexos ---- */

.page h2.anexo {
  margin-top: var(--space-10);
  font-family: var(--font-display);
  font-size: var(--text-headline);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tighter);
}

.page p.anexo-nota {
  font-size: var(--text-body-sm);
  font-style: italic;
  color: var(--text-muted);
}

/* ---- Pessoa física ou empresa ---- */

.tipo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

.tipo label {
  position: relative;
  display: block;
  cursor: pointer;
}

.tipo input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tipo span {
  display: block;
  padding: var(--space-3);
  border: var(--border-width-strong) solid var(--border-strong);
  border-radius: var(--radius-md);
  text-align: center;
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
}

.tipo input:checked + span {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--text-strong);
}

.tipo input:focus-visible + span { box-shadow: 0 0 0 4px var(--focus-ring); }

.campo input[readonly] {
  color: var(--text-muted);
  background: var(--bg-sunken);
}

/* ---- Aviso de convite ---- */

.aviso-convite {
  padding: var(--space-4);
  border: var(--border-width) solid var(--ember-100);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent-tint);
  color: var(--text-strong);
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
}

.aviso-convite[hidden] { display: none; }

/* O estilo base dá display ao botão e venceria o atributo hidden: sem convite, não há botão. */
.acoes button[hidden],
.acoes a[hidden] { display: none; }

/* ---- Contrato de uma proposta: na janela da proposta e em /<id>/contrato ---- */

.acoes a { text-decoration: none; }
.carregando { padding: var(--space-8) var(--space-6); color: var(--text-muted); }

@media (max-width: 40rem) {
  .quadro th,
  .quadro td,
  .ficha th,
  .ficha td { display: block; width: auto; }
  .quadro th,
  .ficha th { border-bottom: 0; }
}