/* ──────────────────────────────────────────────────────────────────────────
   css/37-superficies.css — Kit de Padroes, Nivel 4 §1 (Superficies e aninhamento)

   "Um painel tem no maximo dois niveis de superficie: o fundo da pagina e o
   cartao. Ponto. Cada fundo extra cobra uma borda, um padding e um raio — e nao
   acrescenta informacao nenhuma."

   O DIAGNOSTICO DO KIT ESTAVA VENCIDO e a medicao mostrou por que: o Nivel 1 ja
   tinha achatado quase tudo (existe ate um 17-flatten-cards.css). Hoje .adm-pane
   NAO pinta fundo em regra nenhuma e .au-sec pinta em duas — os niveis 3 e 4 que
   o kit descreve nao existem mais. Sobraram QUATRO empilhamentos reais, e o que
   resolve dois deles e markup, nao folha (ver o commit).

   Aqui mora so o que precisa de classe: o quadro de midia.
   ────────────────────────────────────────────────────────────────────────── */

/* ─── Quadro de midia (camera do motorista e da casa de apoio) ──────────────

   Era .glass — cartao branco DENTRO do cartao branco da secao, com borda e raio
   proprios: dois cartoes empilhados sem nenhuma informacao a mais.

   Nao virou "sem fundo": o video precisa de algo atras quando esta desligado.
   Virou o recurso 2 do kit, TINTA DE FUNDO — a mesma superficie de campo, com
   borda de 1px em vez de cartao. Deixa de competir com o cartao que o contem e
   continua sendo um quadro. */
.media-frame {
  position: relative;
  width: 100%;
  background: var(--field-bg, #f7f9f4);
  border: 1px solid var(--border, #d6dacf);
  border-radius: 14px;      /* menor que o do cartao que o contem: raio decresce para dentro */
  overflow: hidden;
}

/* O video ocupa o quadro inteiro; o fundo so aparece quando ele esta desligado. */
.media-frame > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}