/* ==========================================================================
   Backoffice — Rádios em Português

   Paleta própria e neutra, deliberadamente independente da do site
   público: a área de gestão é uma ferramenta de trabalho e não deve
   mudar de aspecto de cada vez que a identidade do site for afinada.

   Tamanhos de letra: nada abaixo de 15px, excepto as ajudas de
   formulário, que podem ir a 14px. É a regra do projecto.
   ========================================================================== */

:root {
  --fundo:     #F4F5F7;   /* fundo da área de trabalho */
  --superf:    #FFFFFF;   /* cartões, tabelas, formulários */
  --superf-2:  #F8F9FB;   /* linhas alternadas, estados subtis */
  --tinta:     #16181D;
  --tinta-2:   #5C636E;
  --tinta-3:   #8A919D;
  --linha:     #E1E4E9;
  --linha-2:   #CBD1D9;

  --accao:     #1F5FD0;   /* acção principal e estado activo */
  --accao-sup: #EAF0FC;   /* fundo do estado activo */
  --ok:        #16794C;
  --ok-sup:    #E6F4EC;
  --aviso:     #9A6207;
  --aviso-sup: #FDF3E0;
  --perigo:    #C22B2B;   /* acções destrutivas */
  --perigo-sup:#FCEDED;

  /* Gravidade, em quatro degraus e não em oito.
     Não são cores novas: são as que já existem, com o nome do papel que
     fazem nos logs, para a barra do dia, as etiquetas de nível e a
     barra lateral de cada entrada não poderem divergir umas das outras.
       3 o que rebentou · 2 o que avisa · 1 o que é corrente · 0 ruído */
  --sev-3: #C22B2B;
  --sev-2: #9A6207;
  --sev-1: #1F5FD0;
  --sev-0: #8A919D;

  --tira:      #16181D;   /* a tira de ícones é sempre escura */
  --tira-alvo: #262A32;

  --raio:      10px;
  --raio-s:    7px;

  --larg-tira:   64px;
  --larg-painel: 222px;

  --corpo: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --mono:  'DM Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accao); text-underline-offset: 3px; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--accao); outline-offset: 2px; border-radius: 4px; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.saltar {
  position: absolute; left: -9999px; z-index: 100;
  padding: 12px 18px; background: var(--tinta); color: #fff; font-weight: 600;
}
.saltar:focus { left: 12px; top: 12px; }

/* --------------------------------------------------------------------------
   Estrutura: tira de ícones | painel de texto | conteúdo
   -------------------------------------------------------------------------- */

.gestao {
  display: grid;
  /* minmax(0, 1fr) e não 1fr: com 1fr, uma tabela larga empurrava a
     grelha inteira e a navegação saía do ecrã. */
  grid-template-columns: var(--larg-tira) var(--larg-painel) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---- Coluna 1: tira de ícones ---- */

.tira {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 0;
  background: var(--tira);
  color: #C9CFD8;
  position: sticky;
  top: 0;
  height: 100vh;
}

.tira__marca {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  margin-bottom: 10px;
  color: #fff;
}
.tira__marca svg { width: 26px; height: 26px; }

.tira__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.tira__item {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--raio-s);
  color: inherit;
  text-decoration: none;
  transition: background-color .13s ease, color .13s ease;
}
.tira__item svg { width: 21px; height: 21px; }
.tira__item:hover { background: var(--tira-alvo); color: #fff; }

/* O estado activo é uma barra à esquerda e não só uma cor de fundo: a
   cor sozinha desaparece para quem não distingue bem os tons. */
.tira__item--activo {
  background: var(--tira-alvo);
  color: #fff;
  position: relative;
}
.tira__item--activo::before {
  content: '';
  position: absolute;
  left: -12px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 24px;
  border-radius: 0 3px 3px 0;
  background: #fff;
}

.tira__sair { margin-top: auto; }
.tira__sair button {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: none; border-radius: var(--raio-s);
  background: transparent; color: #8C95A3; cursor: pointer;
}
.tira__sair button:hover { background: var(--tira-alvo); color: #fff; }
.tira__sair svg { width: 20px; height: 20px; }

/* ---- Coluna 2: painel de texto ---- */

.painel {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  padding: 18px 12px 12px;
  background: var(--superf);
  border-right: 1px solid var(--linha);
  position: sticky;
  top: 0;
  height: 100vh;
}

.painel__titulo {
  margin: 0 0 12px;
  padding: 0 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.painel__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

/* Titulo de um grupo dentro do painel de texto. Nao e navegavel: e uma
   etiqueta que diz de que sao os itens que vem a seguir. Maiusculas e
   cor mais fraca para se distinguir dos itens sem competir com eles. */
.painel__grupo {
  margin: 14px 0 4px;
  padding: 0 12px;
  /* 15px, o minimo do projecto. O espacamento entre letras e menor do
     que o habitual em etiquetas maiusculas justamente porque a 15px o
     tracking largo separa demais as palavras. */
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.painel__grupo:first-child { margin-top: 0; }

.painel__item {
  display: block;
  padding: 9px 10px;
  border-radius: var(--raio-s);
  color: var(--tinta-2);
  text-decoration: none;
  font-size: 16px;
  transition: background-color .13s ease, color .13s ease;
}
.painel__item:hover { background: var(--superf-2); color: var(--tinta); }
.painel__item--activo { background: var(--accao-sup); color: var(--accao); font-weight: 600; }

.painel__conta {
  display: flex; align-items: center; gap: 10px;
  margin-top: auto;
  padding: 10px;
  border-top: 1px solid var(--linha);
  text-decoration: none;
  color: inherit;
}
.painel__conta:hover { background: var(--superf-2); border-radius: var(--raio-s); }
.painel__avatar {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: var(--accao); color: #fff;
  font-weight: 700; font-size: 16px;
  overflow: hidden;
}
.painel__avatar img { width: 100%; height: 100%; object-fit: cover; }
.painel__conta-texto { display: flex; flex-direction: column; min-width: 0; }
.painel__conta-nome { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.painel__conta-papel { font-size: 15px; color: var(--tinta-3); }

/* ---- Coluna 3: conteúdo ---- */

/* Largura toda, sem max-width. O ecrã já foi estreitado pelas duas
   colunas de navegação; voltar a encolher o conteúdo deixava metade da
   janela vazia. */
.conteudo { grid-column: 3; padding: 22px 26px 60px; min-width: 0; }
.conteudo:focus { outline: none; }

/* --------------------------------------------------------------------------
   Cabeçalho de página, notas, botões
   -------------------------------------------------------------------------- */

.topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.topo__titulo { margin: 0; font-size: 27px; line-height: 1.15; letter-spacing: -.015em; }
.topo__sub { margin: 5px 0 0; color: var(--tinta-2); font-size: 16px; }
.topo__accoes { display: flex; gap: 8px; flex-wrap: wrap; }

.nota { margin: 0 0 16px; padding: 11px 14px; border-radius: var(--raio-s); font-size: 16px; border: 1px solid transparent; }
.nota--sucesso { background: var(--ok-sup);     color: var(--ok);     border-color: #BFE2CF; }
.nota--aviso   { background: var(--aviso-sup);  color: var(--aviso);  border-color: #F0DCB4; }
.nota--erro    { background: var(--perigo-sup); color: var(--perigo); border-color: #F2C6C6; }

/* --------------------------------------------------------------------------
   Instruções: passos numerados e amostras de código
   -------------------------------------------------------------------------- */

/* Uma lista de passos que se seguem por ordem. Os numeros contam aqui —
   nao sao decoracao — porque a ordem e mesmo a instrucao: nao se copia
   um identificador antes de criar a unidade que o gera. */
.passos { margin: 0 0 16px; padding-left: 22px; }
.passos > li { margin-bottom: 9px; }
.passos > li:last-child { margin-bottom: 0; }

/* Amostra de codigo que se le, nao se executa: o que o AdSense mostra
   depois de criar uma unidade. Rola na horizontal em vez de partir as
   linhas, porque uma linha de codigo partida a meio deixa de se
   reconhecer. */
.codigo {
  margin: 0 0 14px;
  padding: 13px 15px;
  border: 1px solid var(--linha-2); border-radius: var(--raio-s);
  background: var(--fundo); color: var(--tinta);
  font-family: var(--mono);
  /* 15px, o minimo do projecto. Codigo a 13px e o costume e aqui nao
     serve: isto e para ser lido e copiado por quem gere o site. */
  font-size: 15px;
  line-height: 1.6;
  overflow-x: auto;
}

/* As duas linhas que interessam de facto no meio do bloco. */
.codigo mark {
  background: var(--aviso-sup);
  color: inherit;
  /* Sem folga lateral: dentro de aspas, o padding horizontal fazia
     parecer que o valor tinha espacos — e alguem copiava-os. */
  padding: 1px 0;
  font-weight: 600;
}

/* A letra que liga a linha destacada a explicacao por baixo.

   Letras e nao numeros de proposito: por cima ha uma lista de passos
   numerada 1-2-3, e dois sistemas de numeracao a seguir um ao outro
   liam-se como um so — o «1» do codigo parecia o quarto passo. */
.codigo__marca {
  display: inline-block;
  min-width: 19px; height: 19px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--accao); color: #FFF;
  font-size: 15px; line-height: 19px; font-weight: 700; text-align: center;
}

/* A legenda que diz ONDE vai cada um dos dois numeros.

   Cada entrada tem tres niveis, e a ordem e a resposta a pergunta de
   quem esta a olhar para o codigo do AdSense: o que e isto, para onde
   vai, e o que convem saber. O "para onde vai" fica a seguir ao nome e
   nao enterrado no fim de um paragrafo. */
.legenda { display: flex; flex-direction: column; gap: 14px; margin: 0 0 16px; }
.legenda__linha { display: flex; align-items: flex-start; gap: 10px; }
.legenda__titulo { margin: 0 0 3px; font-size: 16px; font-weight: 700; }
/* O destino: a linha que de facto responde a "onde e que ponho isto". */
.legenda__onde { margin: 0 0 3px; font-size: 16px; }
.legenda__nota { margin: 0; font-size: 15px; color: var(--tinta-2); }

/* A marca dentro de uma frase precisa de um pouco de ar dos dois lados,
   ao contrario da que fica no fim de uma linha de codigo. */
.legenda__onde .codigo__marca,
.nota .codigo__marca,
.campo__rotulo .codigo__marca { margin: 0 2px; vertical-align: baseline; }

.botao {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--linha-2); border-radius: var(--raio-s);
  background: var(--superf); color: var(--tinta);
  font-size: 16px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .13s ease, border-color .13s ease;
}
.botao:hover { background: var(--superf-2); border-color: var(--tinta-3); }
.botao svg { width: 17px; height: 17px; }
.botao--principal { background: var(--accao); border-color: var(--accao); color: #fff; }
.botao--principal:hover { background: #1A51B4; border-color: #1A51B4; }
.botao--perigo { background: var(--perigo); border-color: var(--perigo); color: #fff; }
.botao--perigo:hover { background: #A42121; border-color: #A42121; }

/* --------------------------------------------------------------------------
   Cartões e grelha de duas colunas
   -------------------------------------------------------------------------- */

.cartao { background: var(--superf); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; }
.cartao__titulo { margin: 0 0 14px; font-size: 18px; font-weight: 700; }

/* Duas colunas no máximo, e NUNCA auto-fit: num ecrã largo, auto-fit
   abria três ou quatro colunas e o olho perdia a ordem de leitura. */
/* align-items: start impede que um cartão estique até à altura do
   vizinho mais alto. Sem isto, um cartão curto ao lado de um comprido
   ficava com um palmo de vazio por baixo do conteúdo. */
.duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
/* Um campo que precisa da linha toda pede esta classe em vez de sair
   da grelha. */
.duas__larga { grid-column: 1 / -1; }

/* Abaixo desta largura, meia coluna já não chega para um campo: um
   rótulo e um campo mais estreitos que o próprio texto são piores do
   que um formulário alto. */
@media (max-width: 860px) {
  .duas { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Números de resumo
   -------------------------------------------------------------------------- */

.numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.numero { background: var(--superf); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; text-decoration: none; color: inherit; display: block; }
.numero:hover { border-color: var(--linha-2); }
.numero__valor { display: block; font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-family: var(--mono); }
.numero__rotulo { display: block; margin-top: 3px; font-size: 16px; color: var(--tinta-2); }
.numero__nota { display: block; margin-top: 7px; font-size: 15px; color: var(--tinta-3); }
@media (max-width: 860px) { .numeros { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Tabelas — largura toda, que é onde o espaço faz falta
   -------------------------------------------------------------------------- */

.tabela-caixa { background: var(--superf); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
/* O deslocamento horizontal fica no invólucro e não no body: assim uma
   tabela larga não empurra a página inteira para o lado.

   position:relative não é decoração — é o que faz isto funcionar de
   facto. Sem ela, este invólucro não é o bloco contentor dos
   descendentes em position:absolute, e portanto NÃO os recorta: o
   "Acções" escondido no cabeçalho ficava fora do ecrã e esticava a
   página, mesmo com o overflow declarado. Num ecrã de 520px a listagem
   ganhava 72px de rolagem horizontal por causa de um <span> de 1px. */
.tabela-rolo { overflow-x: auto; position: relative; }

.tabela { width: 100%; border-collapse: collapse; font-size: 16px; }
.tabela th, .tabela td { padding: 11px 14px; text-align: left; vertical-align: middle; }
.tabela thead th {
  background: var(--superf-2);
  border-bottom: 1px solid var(--linha);
  font-size: 15px;
  font-weight: 700;
  /* Tracking curto: o espaçamento pensado para maiúsculas de 11px fica
     partido a 15px. */
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tinta-2);
  white-space: nowrap;
}
.tabela tbody tr + tr td { border-top: 1px solid var(--linha); }
.tabela tbody tr:hover td { background: var(--superf-2); }
.tabela__mono { font-family: var(--mono); font-size: 15px; color: var(--tinta-2); white-space: nowrap; }
.tabela__num { text-align: right; font-family: var(--mono); font-size: 15px; white-space: nowrap; }

/* Coluna de acções: sempre ícones, nunca botões de texto. */
.tabela__accoes { width: 1%; white-space: nowrap; text-align: right; }
.accoes { display: inline-flex; gap: 2px; }
.accao {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--raio-s);
  color: var(--tinta-2);
  text-decoration: none;
}
.accao:hover { background: var(--accao-sup); color: var(--accao); }
/* O destrutivo distingue-se pela cor E pelo desenho do ícone — a cor
   sozinha não chega para quem não a distingue, e o desenho sozinho
   obriga a olhar para um glifo de 19px para saber se destrói.

   A cor está no estado EM REPOUSO e não só ao passar o rato: quem
   percorre uma tabela tem de ver onde está o caixote antes de lá
   chegar com o rato, não depois. Ao passar, ganha o fundo. */
.accao--perigo { color: var(--perigo); }
.accao--perigo:hover { background: var(--perigo-sup); color: var(--perigo); }
.icone { width: 19px; height: 19px; display: block; }

/* --------------------------------------------------------------------------
   Estados
   -------------------------------------------------------------------------- */

.estado { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estado--active    { background: var(--ok-sup);     color: var(--ok); }
.estado--unchecked { background: var(--aviso-sup);  color: var(--aviso); }
.estado--broken    { background: var(--perigo-sup); color: var(--perigo); }
.estado--hidden    { background: #EDEFF2;           color: var(--tinta-2); }

/* --------------------------------------------------------------------------
   Formulários
   -------------------------------------------------------------------------- */

.campo { display: flex; flex-direction: column; gap: 5px; }
.campo__rotulo { font-size: 16px; font-weight: 600; }
.campo__entrada {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--linha-2); border-radius: var(--raio-s);
  background: var(--superf); color: var(--tinta);
  font: inherit; font-size: 16px;   /* 16px evita o zoom automático no iOS */
  /* Altura declarada, e não deixada ao browser.

     Sem isto, um <input> e um <select> lado a lado na mesma grelha
     saíam com alturas diferentes — medido: 44px contra 40px. A razão
     é que o browser impõe line-height:normal aos <select> e ignora a
     que vem de font:inherit, portanto dois campos com exactamente as
     mesmas regras calculavam caixas diferentes.

     1.5 × 16px = 24px de conteúdo + 9px × 2 de padding + 1px × 2 de
     borda = 44px, o mesmo valor em qualquer um dos controlos. */
  line-height: 1.5;
}
.campo__entrada:focus { border-color: var(--accao); }
.campo__entrada[aria-invalid="true"] { border-color: var(--perigo); background: var(--perigo-sup); }

/* --- Dropdowns ---------------------------------------------------------

   appearance:none desliga o desenho nativo do <select>. É preciso por
   duas razões, e não por gosto:

   1. a seta nativa vive DENTRO da caixa e ocupa uma largura que o
      browser decide, o que empurra o texto e faz o campo comportar-se
      de maneira diferente do <input> ao lado;
   2. enquanto o desenho é nativo, o browser reserva-se o direito de
      ignorar padding e line-height — que é exactamente o que fazia as
      alturas divergirem.

   Desligado o nativo, a seta passa a ser desenhada aqui e o campo
   obedece às mesmas regras de todos os outros. */
select.campo__entrada {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Espaço à direita para a seta não ficar por cima do texto. A opção
     mais comprida desta interface é a do estado dos banners, que é
     uma frase inteira. */
  padding-right: 38px;
  /* A seta, em SVG embutido. Não pode usar currentColor — uma imagem
     de fundo não herda a cor do texto — por isso leva a cor fixa de
     --tinta-2. O backoffice não tem modo escuro, portanto não há um
     segundo fundo onde esta cor falhe. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C636E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  cursor: pointer;
}

/* O Firefox desenha um tracejado à volta do texto da opção escolhida
   quando o select tem foco. Com o desenho nativo desligado ficava a
   sobrar por cima da nossa borda. */
select.campo__entrada:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--tinta); }

/* Um campo desligado tem de PARECER desligado: sem isto, a única
   diferença era não responder ao clique, o que se lê como avaria. */
.campo__entrada:disabled {
  /* background-COLOR e não o atalho background: o atalho repõe
     background-image a none e apagava a seta dos dropdowns, que assim
     ficavam com ar de caixa de texto avariada. */
  background-color: var(--fundo);
  color: var(--tinta-3);
  cursor: not-allowed;
  opacity: .75;
}

/* Um <textarea> não tem altura de linha única e não deve ficar preso a
   44px; herda tudo o resto. */
textarea.campo__entrada { min-height: 110px; resize: vertical; }
/* Ajuda de formulário: a única excepção acordada ao mínimo de 15px. */
.campo__ajuda { font-size: 14px; color: var(--tinta-3); }
/* Dentro de uma tabela, a ajuda é uma segunda linha e não texto colado
   ao lado — a região de uma estação parecia fazer parte do nome. */
.tabela .campo__ajuda { display: block; }

/* O mesmo numa lista de dados: ali a ajuda explica o valor que está
   por cima, e colada ao lado dele lia-se como se fizesse parte dele. */
.dados .campo__ajuda { display: block; margin-top: 5px; }
.campo__erro { font-size: 15px; color: var(--perigo); font-weight: 600; }
.campo__mono { font-family: var(--mono); }

.accoes-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linha); }

/* --------------------------------------------------------------------------
   Lista de definições (fichas)
   -------------------------------------------------------------------------- */

/* Mesma grelha de duas colunas das fichas de edição: um registo lê-se
   igual quer se esteja a vê-lo ou a editá-lo. */
.dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.dados__par { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; background: var(--superf); }
.dados__par--larga { grid-column: 1 / -1; }
.dados dt { font-size: 15px; color: var(--tinta-3); }
.dados dd { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
@media (max-width: 860px) { .dados { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Vazio e paginação
   -------------------------------------------------------------------------- */

.vazio { padding: 46px 20px; text-align: center; background: var(--superf); border: 1px solid var(--linha); border-radius: var(--raio); }
.vazio__titulo { margin: 0 0 5px; font-size: 18px; font-weight: 700; }
.vazio__texto { margin: 0 0 16px; color: var(--tinta-2); font-size: 16px; }

/* Três zonas fixas: "Página X de Y" à esquerda, os números ao centro,
   "Por página" à direita. É uma GRELHA de 1fr auto 1fr e não um
   space-between: com space-between o bloco do meio desliza conforme o
   comprimento dos vizinhos, e os números — que são o que se clica —
   nunca estariam duas vezes no mesmo sítio. */
.paginacao {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.paginacao__info { margin: 0; font-size: 15px; color: var(--tinta-2); font-family: var(--mono); }

.paginacao__passos { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }

/* Alvo de toque de 38px e largura mínima igual à altura, para a fila de
   números não mudar de comprimento entre a página 9 e a 10. */
.passo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--linha-2); border-radius: var(--raio-s);
  background: var(--superf); color: var(--tinta);
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.passo:hover { background: var(--superf-2); border-color: var(--tinta-3); }

/* A página actual não é ligação: leva a cor da acção e deixa de ser
   clicável, que é o que se espera de onde já se está. */
.passo--actual { background: var(--accao); border-color: var(--accao); color: #fff; cursor: default; }

/* << e >> nos extremos: ficam lá, apagados. Se desaparecessem, a fila de
   números saltava de sítio a cada mudança de página. */
.passo--inerte { color: var(--tinta-3); background: var(--superf-2); border-color: var(--linha); }

/* As reticências não são caixa nenhuma: são só o sinal de que há páginas
   pelo meio que não cabem. */
.passo--vazio { border-color: transparent; background: none; color: var(--tinta-3); min-width: 22px; padding: 0; }

.paginacao__tamanho { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.paginacao__rotulo { font-size: 15px; color: var(--tinta-2); margin-right: 2px; }

.tamanho {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 32px; padding: 0 9px;
  border: 1px solid var(--linha); border-radius: var(--raio-s);
  background: var(--superf); color: var(--tinta-2);
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.tamanho:hover { background: var(--superf-2); border-color: var(--tinta-3); color: var(--tinta); }
.tamanho--actual { background: var(--accao-sup); border-color: var(--accao); color: var(--accao); cursor: default; }

/* Empilha quando as três zonas deixam de caber lado a lado: primeiro os
   números, que é o que se usa, e a informação e o tamanho por baixo. */
@media (max-width: 860px) {
  .paginacao { grid-template-columns: minmax(0, 1fr); row-gap: 10px; text-align: center; }
  .paginacao__passos { order: 1; }
  .paginacao__info { order: 2; }
  .paginacao__tamanho { order: 3; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Filtros
   -------------------------------------------------------------------------- */

/* Formulário GET: filtrar é uma leitura, e o resultado tem de ser
   partilhável por URL. */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filtros .campo { min-width: 170px; }

/* --------------------------------------------------------------------------
   Ecrãs estreitos: a navegação passa para o topo
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .gestao { grid-template-columns: minmax(0, 1fr); }
  .tira {
    grid-column: 1; flex-direction: row; height: auto; width: 100%;
    padding: 8px 10px; gap: 4px; position: sticky; top: 0; z-index: 30;
  }
  .tira__marca { margin: 0 6px 0 0; }
  .tira__lista { flex-direction: row; }
  .tira__item--activo::before { left: 50%; top: auto; bottom: -8px; transform: translateX(-50%); width: 24px; height: 3px; border-radius: 3px 3px 0 0; }
  .tira__sair { margin: 0 0 0 auto; }
  .painel {
    grid-column: 1; height: auto; position: static;
    border-right: none; border-bottom: 1px solid var(--linha);
    padding: 12px;
  }
  .painel__lista { flex-direction: row; overflow-x: auto; gap: 4px; }
  .painel__item { white-space: nowrap; }
  .painel__titulo { display: none; }
  .painel__conta { margin: 10px 0 0; }
  .conteudo { grid-column: 1; padding: 16px 14px 48px; }
}

/* --------------------------------------------------------------------------
   Movimento reduzido
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   Perfil: um só cartão com identidade e fotografia
   -------------------------------------------------------------------------- */

.perfil__identidade { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }

/* A fotografia aparece UMA só vez na página, e é este mesmo elemento que
   serve de pré-visualização quando se escolhe outra. Renderizá-la duas
   vezes obrigava a mantê-las em sincronia por nada. */
.perfil__avatar {
  position: relative;
  display: grid; place-items: center;
  width: 84px; height: 84px; flex: none;
  border-radius: 50%;
  background: var(--accao); color: #fff;
  font-size: 32px; font-weight: 700;
  overflow: hidden;
}
.perfil__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.perfil__texto { min-width: 0; }
.perfil__nome  { margin: 0; font-size: 20px; font-weight: 700; }
.perfil__email { margin: 2px 0 0; color: var(--tinta-2); font-size: 16px; overflow-wrap: anywhere; }
.perfil__papel { margin: 8px 0 0; }

/* Zona de largar. É um <label> e não uma <div>: assim o clique abre o
   selector de ficheiros sem uma linha de JavaScript, e funciona pelo
   teclado como qualquer campo. */
.largar {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 18px;
  border: 2px dashed var(--linha-2); border-radius: var(--raio);
  background: var(--superf-2);
  text-align: center;
  cursor: pointer;
  transition: border-color .13s ease, background-color .13s ease;
}
.largar:hover { border-color: var(--accao); }
.largar svg { width: 26px; height: 26px; color: var(--tinta-3); }
.largar__texto { font-size: 16px; font-weight: 600; }
/* Ajuda de formulário: a excepção acordada ao mínimo de 15px. */
.largar__ajuda { font-size: 14px; color: var(--tinta-3); }
.largar__escolhido { font-size: 15px; color: var(--accao); font-weight: 600; }

/* Estado enquanto se arrasta uma imagem por cima. */
.largar--activa { border-color: var(--accao); background: var(--accao-sup); }
.largar--activa svg { color: var(--accao); }

.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao:disabled:hover { background: var(--superf); border-color: var(--linha-2); }
.botao--principal:disabled:hover { background: var(--accao); border-color: var(--accao); }

/* --------------------------------------------------------------------------
   Rodapé de tempos
   --------------------------------------------------------------------------

   Aparece no fim de todas as páginas de gestão e diz onde o tempo foi
   parar. É informação de serviço: fica discreta, em monoespaçado, sem
   caixa nem cor que compita com o conteúdo — mas legível, nunca abaixo
   dos 15px.
   -------------------------------------------------------------------------- */

.tempos {
  margin-top: 26px;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
  color: var(--tinta-2);
}

.tempos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
}

.tempos__item { display: inline-flex; align-items: baseline; gap: 6px; }

.tempos__rotulo { font-size: 15px; color: var(--tinta-3); }

/* tabular-nums: os números mudam a cada carregamento e, sem largura
   fixa por algarismo, a linha inteira dançava de página para página. */
.tempos__valor {
  font-family: var(--mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

.tempos__nota { font-size: 15px; color: var(--tinta-3); }

/* O total é o número que se procura primeiro: fica a negrito e separado
   do resto por uma barra. */
.tempos__item--total { font-weight: 700; padding-right: 18px; border-right: 1px solid var(--linha); }
.tempos__item--total .tempos__rotulo { color: var(--tinta-2); }

@media (max-width: 640px) {
  /* Sem a barra vertical quando a lista passa a várias linhas: o traço
     ficava pendurado no meio do nada. */
  .tempos__item--total { border-right: none; padding-right: 0; }
}

/* --------------------------------------------------------------------------
   Logs: níveis e registos

   REGISTO e não "entrada": a página de entrada no backoffice já usa
   .entrada para o seu invólucro, com uma família .entrada__* própria.
   Chamar .entrada a uma linha de log punha a borda esquerda colorida
   destes blocos a aparecer ao lado do formulário de login — um risco
   cinzento vindo de uma página que nada tem que ver com aquela.
   -------------------------------------------------------------------------- */

/* A barra de filtro por nível. Ligações e não um formulário — filtrar é
   uma leitura e o resultado tem de ser partilhável por URL. */
.filtro-niveis {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin-bottom: 16px;
}
.filtro-niveis__rotulo { font-size: 15px; font-weight: 600; color: var(--tinta-2); margin-right: 3px; }

/* Uma etiqueta de nível. A mesma peça serve de filtro, de contagem na
   listagem e de marca de cada entrada — é sempre a mesma coisa a ser
   nomeada, e devia ler-se sempre igual.

   As cores agrupam por gravidade e não dão uma cor a cada um dos oito:
   oito cores não se distinguem nem se aprendem. Vermelho para o que
   rebentou, âmbar para o que avisa, neutro para o que é só ruído. */
.nivel {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border: 1px solid transparent; border-radius: 999px;
  background: #EDEFF2; color: var(--tinta-2);
  font-size: 15px; font-weight: 600;
  font-family: var(--mono);
  /* Tracking curto: estas etiquetas são maiúsculas e a 15px o
     espaçamento largo separava demais as letras. */
  letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
}
a.nivel:hover { border-color: var(--tinta-3); }

/* O que rebentou. */
.nivel--emergency,
.nivel--alert,
.nivel--critical,
.nivel--error { background: var(--perigo-sup); color: var(--perigo); }

/* O que avisa. */
.nivel--warning { background: var(--aviso-sup); color: var(--aviso); }

/* O que é informação corrente. */
.nivel--notice,
.nivel--info    { background: var(--accao-sup); color: var(--accao); }

/* O nível escolhido no filtro. */
.nivel--actual { border-color: currentColor; }

/* Dentro de uma tabela ou de uma entrada a etiqueta não é clicável e
   não deve reagir ao rato. */
.nivel--fixo { cursor: default; }

/* --- As entradas de um ficheiro ----------------------------------------- */

.registos { list-style: none; margin: 0; padding: 0; }

/* Cada entrada é um bloco, separado do seguinte por uma linha. A barra
   de cor à esquerda diz a gravidade sem obrigar a ler a etiqueta —
   percorre-se a página e vê-se logo onde estão os vermelhos. */
.registo {
  padding: 14px 0 14px 14px;
  border-left: 3px solid var(--linha-2);
  border-bottom: 1px solid var(--linha);
}
.registo:last-child { border-bottom: 0; padding-bottom: 0; }

.registo--emergency,
.registo--alert,
.registo--critical,
.registo--error { border-left-color: var(--perigo); }
.registo--warning { border-left-color: var(--aviso); }
.registo--notice,
.registo--info    { border-left-color: var(--accao); }

.registo__topo { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.registo__hora { font-size: 15px; color: var(--tinta-3); }

/* A mensagem quebra por palavras: uma linha de log traz caminhos e SQL
   compridos e, sem isto, esticava o cartão para fora do ecrã. */
.registo__mensagem {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* O stack trace fica fechado: é a parte comprida e quase nunca é por
   ela que se começa a ler. <details> nativo, sem JavaScript. */
.registo__trace { margin-top: 9px; }
/* Repete-se uma vez por evento — vinte e cinco vezes numa página. A
   azul e a negrito competia com as mensagens, que são o conteúdo. O
   triângulo do <details> já diz que abre; o texto só precisa de dizer o
   que abre. Ganha a cor ao passar e ao receber o foco. */
.registo__trace > summary {
  cursor: pointer;
  font-size: 15px; font-weight: 500;
  color: var(--tinta-2);
  width: fit-content;
}
.registo__trace > summary:hover,
.registo__trace > summary:focus-visible { color: var(--accao); text-decoration: underline; }
.registo__trace .codigo { margin-top: 9px; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   A forma de um dia de log
   -------------------------------------------------------------------------- */

/* 24 barras, uma por hora. Altura = quantidade, cor = a pior gravidade
   daquela hora, posição = a hora. É a peça que responde a "quando" e
   "quão mau" sem se ler um número. */
.dia {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: var(--dia-altura, 30px);
  width: 100%;
  min-width: 168px;   /* 24 × (5px + 2px), o mínimo para a hora se ver */
}

.dia__hora {
  flex: 1 1 0;
  min-width: 3px;
  height: var(--h, 0%);
  border-radius: 1.5px;
  background: var(--sev-0);
}

.dia__hora[data-sev="3"] { background: var(--sev-3); }
.dia__hora[data-sev="2"] { background: var(--sev-2); }
.dia__hora[data-sev="1"] { background: var(--sev-1); }
.dia__hora[data-sev="0"] { background: var(--sev-0); }

/* Uma hora sem nada continua a ser uma hora. Sem este traço a peça
   lia-se como uma curva solta em vez de um dia inteiro, e não se via
   que as 24 entradas das 20h foram uma rajada num dia calmo. */
.dia__hora--vazia {
  height: 2px;
  background: var(--linha-2);
}

/* --- A linha da listagem ------------------------------------------------ */

.celula-dia { min-width: 220px; }

.dia-ligacao { font-family: var(--mono); font-size: 16px; }

/* O dia de hoje é a primeira pergunta de quem chega aqui. */
.chip-hoje {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accao-sup); color: var(--accao);
  font-size: 15px; font-weight: 700;
}

.dia-tamanho,
.dia-intervalo {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--tinta-3);
}
.dia-intervalo { margin-top: 5px; }

/* Duas contagens, uma grande e uma pequena: o número de linhas e o
   número de coisas que aconteceram. É a segunda que interessa. */
.conta-grande { font-family: var(--mono); font-size: 19px; font-weight: 500; }
.conta-nota   { display: block; margin-top: 2px; font-size: 15px; color: var(--tinta-3); }

/* --- O resumo no topo da ficha ------------------------------------------ */

/* Duas colunas: a forma do dia e os factos. Nunca mais do que duas, e
   empilha quando metade do painel deixa de chegar para a barra. */
.resumo-dia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: end;
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--superf);
}

.resumo-dia__escala {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-family: var(--mono); font-size: 15px; color: var(--tinta-3);
}

/* Quatro factos curtos, cada um com a largura de que precisa.
   NAO sao quatro colunas iguais: "12:28-23:49" e mais largo do que
   "59", e em colunas iguais o intervalo transbordava para cima do
   tamanho do ficheiro. Em linha, com quebra, cada um ocupa o que e e
   passa para baixo quando deixa de caber. */
.resumo-dia__factos {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  margin: 0;
}
.resumo-dia__factos dt { font-size: 15px; color: var(--tinta-3); }
/* nowrap porque um destes factos é um intervalo de horas, e um
   intervalo partido ao meio pelo travessão deixa de se ler como um. */
.resumo-dia__factos dd { margin: 2px 0 0; font-size: 19px; font-weight: 500; white-space: nowrap; }

@media (max-width: 1100px) {
  .resumo-dia { grid-template-columns: minmax(0, 1fr); }
}

/* --- Eventos repetidos -------------------------------------------------- */

.contagem-filtro {
  margin: 0 0 14px;
  font-size: 16px;
  color: var(--tinta-2);
}

/* Quantas vezes o mesmo evento bateu. Em destaque porque é a diferença
   entre "aconteceu" e "está a acontecer sem parar". */
.registo__vezes {
  font-family: var(--mono);
  font-size: 16px; font-weight: 700;
  color: var(--tinta);
  padding: 1px 8px;
  border: 1px solid var(--linha-2); border-radius: 999px;
}

/* A mensagem é saída de máquina, não prosa: monoespaçada, como o
   terminal de onde veio. Assim os caminhos, os `::` e as barras
   alinham-se e lêem-se como o que são. */
.registo__mensagem { font-family: var(--mono); font-size: 16px; }

.registo__relogios { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 0; }
.relogio {
  padding: 2px 8px;
  border-radius: var(--raio-s);
  background: var(--fundo);
  font-family: var(--mono); font-size: 15px; color: var(--tinta-2);
}
.relogio--mais { background: none; color: var(--tinta-3); }

.registo__nota { margin: 10px 0 0; font-size: 15px; color: var(--tinta-3); }

/* --------------------------------------------------------------------------
   Agendamento
   -------------------------------------------------------------------------- */

/* Texto corrido dentro de um cartão. O backoffice é quase todo tabelas e
   campos; onde há mesmo uma explicação a ler, ela precisa de entrelinha
   e de uma medida que não atravesse o ecrã todo. É a única excepção à
   regra de o dashboard usar a largura toda: aqui é prosa, não dados. */
.entrada-texto { margin: 0 0 14px; font-size: 16px; line-height: 1.6; max-width: 78ch; }

/* O bloco das linhas de cron, com o botão de copiar no canto. O botão
   fica POR CIMA do código e não ao lado, para o código continuar a ter
   a largura toda — são linhas compridas e cortá-las era o contrário do
   que se quer. */
.cron-bloco { position: relative; }
.cron-bloco .codigo { margin: 0; padding-right: 110px; }
.cron-copiar { position: absolute; top: 10px; right: 10px; z-index: 1; }

/* --------------------------------------------------------------------------
   Visitas
   -------------------------------------------------------------------------- */

/* O funil da visita até ao som. Quatro degraus, cada um com a sua
   barra — e a barra é proporcional ao PRIMEIRO degrau e não ao
   anterior, para a queda se ver como queda. Escalar cada barra pelo
   degrau de cima faria todas parecerem cheias. */
.funil { list-style: none; margin: 0; padding: 0; }
.funil__degrau { padding: 12px 0; border-bottom: 1px solid var(--linha); }
.funil__degrau:last-child { border-bottom: 0; padding-bottom: 0; }

.funil__topo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 7px; }
.funil__rotulo { font-size: 16px; font-weight: 600; }
.funil__valor { font-size: 21px; font-weight: 500; }
.funil__parte { font-size: 15px; color: var(--tinta-3); }
/* Uma queda para menos de um quinto do degrau acima não é ruído. */
.funil__parte--mau { color: var(--perigo); font-weight: 600; }

.funil__barra { height: 10px; border-radius: 999px; background: var(--fundo); overflow: hidden; }
.funil__cheio { display: block; height: 100%; border-radius: 999px; background: var(--accao); }

/* --- Dia a dia ---------------------------------------------------------- */

/* Mesma ideia da barra dos logs: altura logarítmica, dias vazios
   visíveis como um traço. Um dia sem visitas é informação, e sem ele
   a peça deixava de se ler como uma sequência de dias. */
.dias-barra {
  display: flex; align-items: flex-end; gap: 3px;
  height: 90px; width: 100%;
}
.dias-barra__dia {
  flex: 1 1 0; min-width: 4px;
  height: var(--h, 0%);
  border-radius: 2px;
  background: var(--accao);
}
.dias-barra__dia--vazio { height: 2px; background: var(--linha-2); }
.dias-barra__escala {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-family: var(--mono); font-size: 15px; color: var(--tinta-3);
}

/* --- Os tops ------------------------------------------------------------ */

/* Sem números de ordem: a lista já está ordenada e o número seria
   decoração a ocupar a largura de que o nome precisa. */
.top-lista { list-style: none; margin: 0; padding: 0; }
.top-lista__item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 16px;
}
.top-lista__item:last-child { border-bottom: 0; padding-bottom: 0; }
/* O nome pode ser comprido (um slug de rádio, um termo procurado) e
   não pode empurrar o número para fora. */
.top-lista__nome { min-width: 0; overflow-wrap: anywhere; }
.top-lista__valor { flex: 0 0 auto; font-weight: 500; }

/* ==========================================================================
   BANNERS PRÓPRIOS
   ========================================================================== */

/* --- Escolha de tipo / de origem ---------------------------------------

   Dois cartões clicáveis em vez de um <select>. A razão não é estética:
   esta escolha muda o RESTO do formulário, e um dropdown esconde a
   segunda hipótese até se lhe carregar — quem não souber que ela existe
   nunca a encontra. Aqui vêem-se as duas de uma vez, com o que cada uma
   implica escrito por baixo.

   Cada opção é um <label> à volta do próprio radio: o cartão inteiro
   fica clicável e o teclado continua a andar de opção em opção como num
   grupo de radios normal. */
.escolha { border: 0; padding: 0; margin: 0 0 18px; }
.escolha > legend { padding: 0; margin-bottom: 10px; }

/* Duas colunas de meia largura, nunca auto-fit: numa janela larga o
   auto-fit abria três ou quatro e o olho perdia a ordem de leitura. */
.escolha__lista {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 860px) { .escolha__lista { grid-template-columns: 1fr; } }

.escolha__opcao {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--linha-2); border-radius: var(--raio-s);
  background: var(--superf);
  cursor: pointer;
  /* Só a cor transita. A caixa fica quieta: nada se move nem cresce ao
     passar por cima, que é a regra deste projecto. */
  transition: border-color .12s, background-color .12s;
}
.escolha__opcao:hover { border-color: var(--accao); }
.escolha__opcao--escolhida { border-color: var(--accao); background: var(--accao-sup); }
/* O foco vai para o cartão e não para o radio escondido lá dentro, que
   é pequeno de mais para se ver onde se está. */
.escolha__opcao:focus-within { outline: 2px solid var(--accao); outline-offset: 2px; }
.escolha__opcao input { margin-top: 3px; flex: 0 0 auto; }
.escolha__corpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.escolha__titulo { font-size: 16px; font-weight: 600; color: var(--tinta); }
.escolha__texto { font-size: 15px; color: var(--tinta-2); line-height: 1.45; }

/* --- Pré-visualização de uma imagem ------------------------------------ */
.previa {
  margin: 16px 0 0; padding: 14px;
  border: 1px solid var(--linha); border-radius: var(--raio-s);
  background: var(--superf-2);
  text-align: center;
}
/* A imagem nunca sai da caixa, por maior que seja o ficheiro enviado. */
.previa img { max-width: 100%; height: auto; border-radius: var(--raio-s); }
.previa figcaption { margin-top: 8px; }

/* Na grelha do formulário do espaço a pré-visualização vive ao lado da
   lista, e aí precisa de altura mínima para a linha não encolher quando
   ainda não há nada escolhido. */
.previa--caixa {
  margin: 0; min-height: 96px;
  display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: center;
}

/* --- Miniatura na listagem --------------------------------------------- */
.banner-linha { display: flex; gap: 12px; align-items: center; min-width: 0; }
.banner-linha > span { min-width: 0; }
.banner-miniatura {
  flex: 0 0 auto;
  width: 64px; height: 40px;
  object-fit: contain;
  border: 1px solid var(--linha); border-radius: 4px;
  background: var(--superf-2);
}
/* O banner em código não tem imagem para mostrar. Em vez de um quadrado
   vazio, os sinais que toda a gente lê como "aqui está código". */
.banner-miniatura--codigo {
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; color: var(--tinta-3);
}

/* --- Campos ------------------------------------------------------------- */
/* Um textarea com .campo__entrada herda a altura de linha dos campos de
   uma linha; aqui manda o atributo rows e o utilizador pode aumentá-lo. */
.campo__area { height: auto; resize: vertical; min-height: 200px; }

/* Caixa de verificação com o rótulo ao lado, alinhados pelo meio. */
.campo__opcao {
  display: flex; gap: 8px; align-items: center;
  font-size: 16px; color: var(--tinta);
  /* Altura igual à de um campo, para a linha da grelha não ficar torta
     quando esta opção está ao lado de um input. */
  min-height: 44px;
  cursor: pointer;
}