/* Sistema visual da aplicação.
   Um só sítio para cores, espaçamentos e formas, para tudo parecer a mesma
   aplicação e não uma coleção de páginas soltas. */

:root {
  --fundo: #eef1f6;
  --superficie: #ffffff;
  --superficie-suave: #f6f8fb;
  --texto: #101a26;
  --texto-medio: #566374;
  --texto-suave: #8493a5;
  --linha: #e4e9f0;
  --linha-forte: #ccd5e0;

  --marca: #0f4c85;
  --marca-clara: #1f6fbd;
  --marca-fundo: #e8f1fa;

  /* A barra lateral é escura: dá à cor da casa um trabalho a fazer, e separa
     de vez a navegação do conteúdo. Antes eram dois brancos encostados. */
  --lateral-fundo: #0d2d4d;
  --lateral-texto: #a9c0d8;
  --lateral-texto-forte: #ffffff;
  --lateral-ativo: #1a4f82;
  --lateral-linha: #1b3d61;

  /* O verde da marca, medido no logótipo: #7bbb62, tom 103.
     Claro de mais para texto — sobre fundo claro não se lê. Por isso o
     tom é o da marca e a luz é a que o contraste pede. */
  --marca-verde: #7bbb62;
  --verde: #3d7a2c;
  --verde-fundo: #eef7ea;
  --vermelho: #a52a2a;
  --vermelho-fundo: #fbeceb;
  --ambar: #8a5a00;
  --ambar-fundo: #fdf3e0;

  --raio: 12px;
  --raio-pequeno: 7px;

  /* Duas sombras em camadas em vez de uma: a de baixo assenta a peça no
     fundo, a de cima dá-lhe espessura. Uma só faz um halo cinzento. */
  --sombra: 0 1px 2px rgba(16, 26, 38, .04), 0 2px 6px rgba(16, 26, 38, .05);
  --sombra-alta: 0 2px 4px rgba(16, 26, 38, .05), 0 8px 24px rgba(16, 26, 38, .09);

  --lateral: 238px;

  /* Altura de uma caixa de texto dentro de uma tabela. Serve de régua para
     alinhar com ela o texto e os botões que estão ao lado. */
  --altura-linha: 33px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.55 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--marca-clara); }

h1, h2, h3 { letter-spacing: -0.011em; }

/* ---------------------------------------------------------------- Estrutura */

.aplicacao {
  display: grid;
  grid-template-columns: var(--lateral) 1fr;
  min-height: 100vh;
}

.lateral {
  background: var(--lateral-fundo);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.marca {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 8px 4px;
  color: var(--lateral-texto-forte);
  text-decoration: none;
}

.marca-nome { font-weight: 640; font-size: 14.5px; line-height: 1.2; }

.marca-nome small {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--lateral-texto);
}

.grupo-nav { display: flex; flex-direction: column; gap: 2px; }

.titulo-grupo {
  padding: 0 8px 7px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6f8db0;
}

.grupo-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 9px;
  border-radius: var(--raio-pequeno);
  color: var(--lateral-texto);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.grupo-nav a:hover {
  background: rgba(255, 255, 255, .07);
  color: var(--lateral-texto-forte);
}

/* O verde da marca sobre o azul da barra dá 6,1 para 1 de contraste —
   medido. Sobre fundo claro dava 2,1, e por isso não é ele que faz o texto
   verde da aplicação: aqui é uma barra, não uma letra. */
.grupo-nav a.ativo {
  background: var(--lateral-ativo);
  color: var(--lateral-texto-forte);
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12),
              inset 3px 0 0 var(--marca-verde);
}

.grupo-nav svg { width: 17px; height: 17px; flex: none; opacity: .75; }
.grupo-nav a.ativo svg, .grupo-nav a:hover svg { opacity: 1; }

.sinal {
  margin-left: auto;
  min-width: 19px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #d94f4f;
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  text-align: center;
}

.conteudo { min-width: 0; }

.barra {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 34px 20px;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
}

.barra h1 { margin: 0; font-size: 26px; font-weight: 660; letter-spacing: -0.02em; }
.barra .legenda { margin: 4px 0 0; color: var(--texto-medio); font-size: 14px; }

/* O dia ao lado do nome, no título. Fica no mesmo tamanho para se ver de
   relance, e num tom mais leve para não competir com o nome de quem pediu:
   o nome diz de quem é o pedido, o dia diz qual dos pedidos dessa pessoa é
   que está aberto. */
.barra h1 .dia-do-titulo {
  color: var(--texto-medio);
  font-weight: 560;
}

.barra h1 .dia-do-titulo::before {
  content: "·";
  margin: 0 8px 0 4px;
  color: var(--linha-forte);
}
.barra-acoes { display: flex; align-items: center; gap: 10px; }

main { padding: 24px 34px 72px; max-width: 1180px; }

/* -------------------------------------------------------------- Componentes */

.painel {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  margin-bottom: 20px;
}

.painel > h2 {
  margin: 0;
  padding: 15px 20px;
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
  border-bottom: 1px solid var(--linha);
}

.painel > h2 .contagem { color: var(--texto-suave); font-weight: 500; }

.corpo { padding: 20px; }
.corpo > :first-child { margin-top: 0; }
.corpo > :last-child { margin-bottom: 0; }

.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(198px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

/* Um cartão de número tem de se ler de longe: o número manda, o rótulo
   apresenta-o e a nota explica-o. Antes tinham os três quase o mesmo peso,
   e o olhar não sabia onde pousar. */
.cartao {
  position: relative;
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 17px 19px 18px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}

/* Um fio de cor no topo, que só o cartão em destaque acende. */
.cartao::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--linha);
}

a.cartao:hover {
  border-color: var(--linha-forte);
  box-shadow: var(--sombra-alta);
  transform: translateY(-1px);
}

.cartao .rotulo {
  display: block;
  font-size: 12px;
  font-weight: 620;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.cartao .valor {
  display: block;
  margin: 9px 0 2px;
  font-size: 33px;
  line-height: 1.08;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.032em;
}

.cartao .nota { font-size: 12.5px; color: var(--texto-medio); }

.cartao.destaque {
  background: linear-gradient(168deg, #f4f9fe, var(--superficie) 62%);
  border-color: #cfe1f3;
}

.cartao.destaque::before { background: linear-gradient(90deg, #2f86d6, var(--marca)); }
.cartao.destaque .valor { color: var(--marca); }
.cartao.destaque .rotulo { color: var(--marca-clara); }

/* Um zero não é uma falha nem um feito: fica calado, para que um número que
   conta se distinga de um que não conta. */
.cartao .valor.zero { color: var(--texto-suave); font-weight: 600; }

/* Tabelas */

.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }

.tabela th {
  text-align: left;
  padding: 11px 14px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-suave);
  background: var(--superficie-suave);
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}

.tabela td { padding: 10px 14px; border-bottom: 1px solid var(--linha); }
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: var(--superficie-suave); }

/* Uma ligação dentro de uma tabela não se sublinha: numa coluna inteira de
   datas, o sublinhado repetido faz mais ruído do que serve de pista. */
.tabela a { color: var(--marca-clara); text-decoration: none; font-weight: 550; }
.tabela a:hover { text-decoration: underline; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela .fraco { color: var(--texto-suave); }

.tabela tfoot td {
  padding: 12px 14px;
  font-weight: 650;
  background: var(--superficie-suave);
  border-top: 1px solid var(--linha);
}

.tabela form { display: inline; }
.tabela small { display: block; font-size: 11.5px; color: var(--texto-suave); }
/* Caixas de texto e de escolha com a mesma altura exata: por omissão diferem
   um pixel, e um pixel repetido ao longo de uma coluna lê-se como
   desalinhamento. */
.tabela input, .tabela select { padding: 5px 8px; font-size: 13.5px; }
.tabela input:not([type="checkbox"]),
.tabela select { height: var(--altura-linha); }
.tabela button { min-height: var(--altura-linha); }

/* Numa tabela onde todas as células se editam, uma caixa desenhada por célula
   transforma doze nomes em trinta e seis rectângulos, e lê-se como uma folha
   de cálculo. O contorno só aparece quando serve de alguma coisa: ao passar
   por cima da linha, ao focar, ou quando o campo já foi mexido. */
.tabela-editavel input:not([type="checkbox"]),
.tabela-editavel select {
  border-color: transparent;
  background: transparent;
  transition: border-color .12s, background-color .12s;
}

.tabela-editavel tr:hover input:not([type="checkbox"]),
.tabela-editavel tr:hover select {
  border-color: var(--linha);
  background: var(--superficie);
}

.tabela-editavel input:focus,
.tabela-editavel select:focus {
  border-color: var(--marca-clara);
  background: var(--superficie);
}

/* Um campo em branco sem contorno não se vê que existe: a pista fica no texto
   de exemplo, que só nestas tabelas se mantém legível. */
.tabela-editavel input::placeholder { color: var(--texto-suave); opacity: 1; }

.rolavel { max-height: 580px; overflow-y: auto; }

/* Formulários */

.formulario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 15px;
}

.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo-largo { grid-column: 1 / -1; }
.oculto { display: none !important; }

label { font-size: 13px; font-weight: 550; }

.dica, small.ajuda { font-weight: 400; font-size: 12px; color: var(--texto-suave); }
.dica { margin-left: 6px; }

input, select, textarea {
  font: inherit;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
  color: var(--texto);
}

textarea { resize: vertical; }

/* Num telemóvel, os campos sobem para 16px.
   O Safari do iPhone dá zoom sozinho a qualquer campo com menos de 16px
   quando se lhe toca — e não volta atrás. Quem faz um pedido do telemóvel
   escolhe o balcão, o turno e quantas pessoas: eram três zooms seguidos, e
   a página ficava encavalitada a pedir dedos para a endireitar.

   Só em ecrãs estreitos: no computador os 15px do resto da página ficam. */
@media (max-width: 767px) {
  input, select, textarea { font-size: 16px; }
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--marca-clara);
  outline-offset: -1px;
  border-color: var(--marca-clara);
}

input[type="checkbox"] { width: auto; }

.caixa {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 13.5px;
  white-space: nowrap;
}

.acoes { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }

/* Botões */

button, .botao {
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: var(--raio-pequeno);
  background: var(--marca);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

button:hover, .botao:hover { background: #0b3c6b; }

.secundario, .botao.secundario {
  background: var(--superficie);
  border-color: var(--linha-forte);
  color: var(--texto);
}

.secundario:hover, .botao.secundario:hover {
  background: var(--superficie-suave);
  border-color: var(--texto-suave);
}

.discreto {
  background: none;
  border: none;
  color: var(--texto-suave);
  padding: 4px 8px;
  font-size: 13px;
}

.discreto:hover { background: var(--vermelho-fundo); color: var(--vermelho); }

.pequeno { padding: 6px 12px; font-size: 13px; }

button svg, .botao svg { width: 15px; height: 15px; }

/* Alertas */

.alerta {
  display: flex;
  gap: 10px;
  padding: 12px 15px;
  border-radius: var(--raio);
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
}

.alerta svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.alerta.erro { background: var(--vermelho-fundo); color: var(--vermelho); }
.alerta.aviso { background: var(--verde-fundo); color: var(--verde); }
.alerta.atencao { background: var(--ambar-fundo); color: var(--ambar); }
.alerta a { color: inherit; font-weight: 600; }

/* Etiquetas de estado */

.estado {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 550;
  background: var(--superficie-suave);
  border: 1px solid var(--linha);
  color: var(--texto-medio);
  white-space: nowrap;
}

.estado-confirmado, .estado-consolidado {
  background: var(--verde-fundo); border-color: transparent; color: var(--verde);
}

.estado-contestado {
  background: var(--vermelho-fundo); border-color: transparent; color: var(--vermelho);
}

.estado-enviado {
  background: var(--marca-fundo); border-color: transparent; color: var(--marca);
}

.estado-por-enviar, .estado-registado {
  background: var(--ambar-fundo); border-color: transparent; color: var(--ambar);
}

.marca-aviso {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--vermelho);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: help;
}

.vazio { margin: 0; padding: 28px 20px; text-align: center; color: var(--texto-suave); }

.nota { margin: 14px 0 0; font-size: 13px; color: var(--texto-medio); line-height: 1.55; }

/* Navegação por período */

.navegacao {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-pequeno);
  overflow: hidden;
  background: var(--superficie);
}

.navegacao a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--texto-medio);
  text-decoration: none;
}

.navegacao a:hover { background: var(--superficie-suave); color: var(--texto); }
.navegacao a + a { border-left: 1px solid var(--linha); }
.navegacao svg { width: 15px; height: 15px; }

/* Escolha de colaboradores */

.escolha { border: 1px solid var(--linha-forte); border-radius: var(--raio-pequeno); }

.escolha-topo { padding: 8px; border-bottom: 1px solid var(--linha); }

.escolha-lista {
  max-height: 210px;
  overflow-y: auto;
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1px;
}

.escolha-lista label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--raio-pequeno);
  font-weight: 400;
  font-size: 13.5px;
  cursor: pointer;
}

.escolha-lista label:hover { background: var(--superficie-suave); }
.escolha-lista input:checked + span { font-weight: 600; color: var(--marca); }

.escolha-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid var(--linha);
  background: var(--superficie-suave);
  font-size: 13px;
  color: var(--texto-medio);
  border-radius: 0 0 var(--raio-pequeno) var(--raio-pequeno);
}

.escolha-rodape button { padding: 3px 8px; font-size: 12.5px; }

/* Painel que abre e fecha */

.dobravel > summary {
  padding: 15px 20px;
  font-size: 14px;
  font-weight: 640;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
}

.dobravel > summary::-webkit-details-marker { display: none; }

/* Sem isto, um ícone que não seja a seta estica-se ao tamanho do painel: o
   SVG não tem largura própria, e o `flex` dá-lhe a que sobrar. */
.dobravel > summary svg { width: 16px; height: 16px; flex: none; }
.dobravel > summary:hover { color: var(--marca); }
.dobravel[open] > summary { border-bottom: 1px solid var(--linha); }
.dobravel > summary .seta { transition: transform .15s; width: 14px; height: 14px; }
.dobravel[open] > summary .seta { transform: rotate(90deg); }

/* ------------------------------------------------- Páginas públicas (Guerin) */

.publico { background: var(--fundo); padding: 32px 16px 48px; }

.estreito { max-width: 620px; margin: 0 auto; }

.cabecalho-publico { margin-bottom: 20px; text-align: center; }

.sobretitulo {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.cabecalho-publico h1 { margin: 0; font-size: 23px; }
.subtitulo { margin: 6px 0 0; color: var(--texto-medio); font-size: 14px; }

.botoes-validar { display: flex; flex-wrap: wrap; gap: 10px; }
.confirmar { background: var(--verde); }
.confirmar:hover { background: #12512f; }

.detalhe-pessoas { margin-top: 16px; font-size: 14px; }
.detalhe-pessoas summary { cursor: pointer; color: var(--marca-clara); font-size: 13px; }

.lista-pessoas { margin: 12px 0 0; padding: 0; list-style: none; }

.lista-pessoas li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 13.5px;
}

.local-pessoa { color: var(--texto-suave); }

.rodape-publico {
  margin-top: 24px;
  font-size: 13px;
  color: var(--texto-suave);
  text-align: center;
}

/* ------------------------------------------------------------- Ecrãs curtos */

@media (max-width: 900px) {
  .aplicacao { grid-template-columns: 1fr; }

  .lateral {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid var(--lateral-linha);
    padding: 12px 16px;
  }

  .titulo-grupo { display: none; }
  .grupo-nav { flex-direction: row; flex-wrap: wrap; }
  .barra { padding: 18px 16px 14px; }
  main { padding: 16px 16px 48px; }
  .escolha-lista { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------- Entrada e contas */

/* O ecrã de entrada é o primeiro que se vê, e era o mais vazio: a caixa
   flutuava no topo de um fundo cinzento com meio ecrã em branco por baixo.
   Agora fica centrada no que há de vertical, sobre o azul da casa. */
.entrada {
  max-width: 404px;
  width: 100%;
  margin: 0 auto;
}

.entrada.larga { max-width: 484px; }

.pagina-entrada {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 32px 16px;
  background:
    radial-gradient(1100px 620px at 50% -12%, #1c5c9c 0%, transparent 62%),
    linear-gradient(170deg, #0d2d4d, #071c33);
}

.pagina-entrada .painel {
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 18px 50px rgba(3, 14, 26, .45);
}

.marca-entrada { text-align: center; margin-bottom: 24px; }

.marca-entrada h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 660;
  letter-spacing: -0.02em;
  color: #fff;
}

.marca-entrada .subtitulo { margin-top: 7px; color: #a9c0d8; }

.pagina-entrada .rodape-entrada {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13px;
  color: #8ba7c4;
}

.formulario-entrada { display: grid; gap: 15px; }

/* O texto que explica o ecrã não encosta ao primeiro campo. */
.explicacao { margin: 0 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--linha); }
/* Só o botão que submete. Sem o [type=submit], esta regra apanhava também
   o olho que mostra a palavra-passe — e 100% de largura punha-o por cima do
   campo inteiro, a tapá-lo: quem carregasse no campo para escrever acertava
   no olho e o teclado nunca abria. Passava despercebido porque com a tecla
   Tab chega-se ao campo à mesma, e é assim que se testa sem pensar. */
.formulario-entrada button[type="submit"] { width: 100%; justify-content: center; }
.formulario-entrada .alerta { margin: 0; }

/* Conta no fundo do menu lateral */

.rodape-lateral {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--lateral-linha);
  display: flex;
  align-items: center;
  gap: 4px;
}

.cartao-conta {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--raio-pequeno);
  text-decoration: none;
  color: var(--lateral-texto-forte);
}

.cartao-conta:hover { background: rgba(255, 255, 255, .07); }
.cartao-conta.ativo { background: var(--lateral-ativo); }

.inicial {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
  color: #fff;
  font-weight: 650;
  font-size: 13px;
  flex: none;
}

.quem {
  min-width: 0;
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quem small {
  display: block;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--lateral-texto);
}

.sair { padding: 6px; background: none; border: none; color: var(--lateral-texto); }
.sair svg { width: 16px; height: 16px; }
.sair:hover { background: rgba(255, 255, 255, .07); color: #fff; }

/* Tabela de contas: cada conta são duas linhas — os dados e a reposição da
   palavra-passe. A segunda tem de se ler como pertencendo à primeira, e não
   como uma linha solta. */

.tabela-contas { table-layout: fixed; }

.tabela-contas .meio { text-align: center; }

.tabela-contas tbody.conta { border-bottom: 1px solid var(--linha-forte); }
.tabela-contas tbody.conta:last-child { border-bottom: none; }

/* A linha de cima não fecha com risca: as duas formam um bloco só. */
.tabela-contas tbody.conta > tr:first-child > td { border-bottom: none; }

.tabela-contas tr.sub > td {
  padding: 0 14px 12px;
  border-bottom: none;
}

/* Realçar a conta inteira ao passar por cima, e não meia. */
.tabela-contas tbody.conta:hover > tr > td { background: var(--superficie-suave); }

/* Todas as células encostam ao topo, e tudo o que lá está — caixas, texto,
   botões — tem a mesma altura. Sem isto, a nota por baixo do nome fazia a
   caixa dele subir em relação à do email. */
.tabela-contas td { vertical-align: top; }

.tabela-contas .texto {
  display: flex;
  align-items: center;
  min-height: var(--altura-linha);
  white-space: nowrap;
}

.tabela-contas .texto.centrado { justify-content: center; }
.tabela-contas .texto.fim { justify-content: flex-end; }

/* Tabelas com uma linha por item, onde cada linha é um formulário. */

.tabela-linhas { table-layout: fixed; }
.tabela-linhas .meio { text-align: center; }
.tabela-linhas td { vertical-align: top; }

.tabela-linhas .texto {
  display: flex;
  align-items: center;
  min-height: var(--altura-linha);
}

.tabela-linhas .texto.centrado { justify-content: center; }
.tabela-linhas .texto.fim { justify-content: flex-end; }
.tabela-linhas input[type="checkbox"] { margin: 0; }

/* O valor que não se pode alterar aparece como texto, e não como caixa
   desativada: uma caixa a cinzento parece avariada, texto não. */
.tabela-linhas .presa { color: var(--texto-medio); cursor: help; }

/* Escondido mas a ocupar o lugar: sem isto, a linha saltava ao aparecer. */
.escondido { visibility: hidden; }

/* Juntar um item ao grupo, sem um painel inteiro só para isso. */

.juntar { border-top: 1px solid var(--linha); background: var(--superficie-suave); }

.linha-juntar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.linha-juntar label {
  color: var(--texto-medio);
  font-weight: 500;
  white-space: nowrap;
}

/* Altura fixa para alinhar com o botão ao lado — mas a altura sozinha não
   chega. Com o espaçamento de dentro que vem de cima, sobravam 15 pixéis
   para uma linha de texto que precisa de 23, e os nomes ficavam cortados
   por baixo: "Alan Sousa" sem a perna do p. Medido, não estimado. */
.linha-juntar input:not([type="checkbox"]),
.linha-juntar select {
  width: 220px;
  height: var(--altura-linha);
  padding-block: 4px;
  line-height: 1.25;
}
.linha-juntar input[type="checkbox"] { width: auto; height: auto; }
.linha-juntar input.estreito { width: 110px; }
.linha-juntar input[type="date"] { width: 160px; }
.linha-juntar .caixa { gap: 7px; }

/* O cabeçalho de cada grupo mostra de quem é e quantos tem. */
.dobravel > summary .contagem {
  color: var(--texto-suave);
  font-weight: 400;
}

/* Preçário: exceções de balcão dentro do painel da empresa. */

.excecao { border-top: 1px solid var(--linha); }

.excecao h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 20px 8px;
  font-size: 13.5px;
  font-weight: 640;
}

.excecao h3 svg { width: 15px; height: 15px; opacity: .7; }
.excecao .tabela thead { display: none; }

.excecao-nova { border-top: 1px solid var(--linha); }

.excecao-nova > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--marca);
  cursor: pointer;
  list-style: none;
}

.excecao-nova > summary::-webkit-details-marker { display: none; }
.excecao-nova > summary svg { width: 14px; height: 14px; }
.excecao-nova[open] > summary { border-bottom: 1px solid var(--linha); }

.etiqueta {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--marca-fundo);
  color: var(--marca);
  font-size: 11.5px;
  font-weight: 600;
}

.por-definir { color: var(--ambar); font-size: 13px; }

.apagar-celula { padding-left: 0 !important; }
.apagar-celula .discreto { min-height: var(--altura-linha); }
.apagar-celula svg { width: 15px; height: 15px; }

.tabela-contas tr.sub .ajuda { font-size: 12.5px; }
.tabela-contas tr.sub .discreto { padding: 4px 8px; margin-left: -8px; }
.tabela-contas tr.sub .discreto svg { width: 14px; height: 14px; }


.tabela-contas .num button { min-height: var(--altura-linha); }
.tabela-contas input[type="checkbox"] { margin: 0; }
.tabela-contas td > small { display: block; margin-top: 4px; }

.linha-palavra-passe {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.linha-palavra-passe label {
  color: var(--texto-suave);
  font-weight: 400;
  font-size: 12.5px;
}

.linha-palavra-passe input { width: 240px; }

@media (max-width: 900px) {
  .rodape-lateral { margin-top: 0; padding-top: 0; border-top: none; }
}

/* Acrescentar um serviço ao preçário: os cinco campos numa linha só.
   Sem isto o `auto-fit` do formulário comum cabe quatro e deixa o último
   sozinho na linha de baixo — a pergunta fica partida a meio. As larguras
   são desiguais de propósito: o nome do serviço é longo, um preço são cinco
   caracteres. */
.escolher-servico { grid-template-columns: 1.2fr 1.6fr 1.4fr 0.7fr 0.9fr; }

@media (max-width: 1100px) {
  .escolher-servico {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }
}

/* Um preço já gravado que ainda não começou. Fica ao lado da data de início
   do que vigora hoje, para se ver "12,00 € desde janeiro, 25,50 € a 26-09"
   de relance — sem isto, gravar um preço para amanhã não mudava nada no ecrã. */
.etiqueta.por-entrar {
  margin: 3px 0 0;
  border: 1px solid var(--marca-clara);
  white-space: nowrap;
}

/* A coluna "Desde" leva duas coisas: a data do preço em vigor e, por baixo, o
   que está para entrar. Em linha não cabiam — a data partia-se em três. */
.tabela-linhas .texto.empilhado {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  white-space: nowrap;
  padding: 6px 0;
}

/* ------------------------------------------------- Fichas de empresa */

/* A lista de empresas é a porta de entrada para tudo o que lhes pertence —
   balcões, preçário, solicitantes. Um cartão por empresa, com as contas à
   vista, em vez de uma tabela de campos para editar que não leva a lado
   nenhum. */
.fichas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.ficha {
  /* Coluna, para a linha das contas assentar no fundo: sem isso, um cartão
     com pessoa de contacto e outro sem ela ficavam com as contas a alturas
     diferentes, e a fila lia-se torta. */
  display: flex;
  flex-direction: column;
  padding: 17px 19px 16px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}

.ficha:hover {
  border-color: var(--linha-forte);
  box-shadow: var(--sombra-alta);
  transform: translateY(-1px);
}

.ficha-nome {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.ficha-quem {
  display: block;
  margin: 3px 0 14px;
  font-size: 13px;
  color: var(--texto-medio);
}

.ficha-contas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
  font-size: 12.5px;
  color: var(--texto-medio);
}

.ficha-contas strong {
  font-size: 15px;
  font-weight: 650;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

/* Uma empresa desativada continua a ver-se — tem faturação em nome dela —
   mas não compete com as que estão em uso. */
.ficha.inativa { background: var(--superficie-suave); }
.ficha.inativa .ficha-nome { color: var(--texto-medio); }

/* --------------------------------------------- Índice alfabético e procura */

/* Duzentos e trinta nomes não cabem num ecrã, e cortá-los nos primeiros
   sessenta não dava maneira de chegar ao "S" sem escrever. Uma letra de cada
   vez, ou a procura. */
.procurador { display: grid; gap: 14px; }

.linha-procura {
  display: flex;
  align-items: center;
  gap: 10px;
}

.linha-procura > svg {
  width: 18px;
  height: 18px;
  color: var(--texto-suave);
  flex: none;
}

.linha-procura input[type="search"] { flex: 1; min-width: 0; }

.indice {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 13px;
  border-top: 1px solid var(--linha);
}

.indice a {
  display: grid;
  place-items: center;
  min-width: 31px;
  height: 31px;
  padding: 0 6px;
  border-radius: var(--raio-pequeno);
  color: var(--texto-medio);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
}

.indice a:hover { background: var(--superficie-suave); color: var(--texto); }

.indice a.ativo {
  background: var(--marca);
  color: #fff;
}

.indice a.todos { padding: 0 12px; font-weight: 550; }

/* A linha aberta para edição destaca-se do resto da lista: é a única com
   caixas de texto, e sem isto perdia-se entre as outras. */
.tabela tr.em-edicao > td {
  background: var(--marca-fundo);
  box-shadow: inset 3px 0 0 var(--marca-clara);
}

/* Duas colunas fixas, e não uma fila que se arruma sozinha: ao lado do
   "Editar" tanto pode estar "Apagar" como "26 serviços", e com larguras
   diferentes o botão dançava de linha para linha. */
.tabela-linhas .texto.acoes-linha {
  display: grid;
  grid-template-columns: 1fr 88px;
  gap: 8px;
  align-items: center;
  justify-items: end;
}

/* Sete colunas não deixam à última a largura que o Editar e o Guardar pedem:
   a grelha de cima não encolhe, e o botão saía por cima da célula ao lado —
   por cima do nome de quem a pessoa responde a. Aqui envolvem-se. */
.tabela-solicitantes .texto.acoes-linha {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

/* O visto da coluna "Ativo" é uma marca, não um botão. */
.tabela .centrado svg { width: 16px; height: 16px; color: var(--verde); }

/* ------------------------------------------------ A moldura de quem vem de fora */

/* O solicitante e o colaborador não têm barra lateral: num telemóvel só
   ocuparia espaço com ligações que estas contas não podem abrir. Uma faixa
   no topo, e o conteúdo por baixo, numa coluna estreita que se lê de uma vez. */
body.de-fora { background: var(--fundo); }

.faixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  background: var(--lateral-fundo);
  color: var(--lateral-texto-forte);
  position: sticky;
  top: 0;
  z-index: 5;
}

.faixa .marca { color: var(--lateral-texto-forte); padding: 0; }
.faixa .marca-nome small { color: var(--lateral-texto); }

.faixa-quem { display: flex; align-items: center; gap: 8px; }
.faixa-quem .quem { color: var(--lateral-texto-forte); text-align: right; }
.faixa-quem .quem small { color: var(--lateral-texto); }
.faixa-quem form { display: flex; }

main.fora {
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 16px 56px;
}

.titulo-fora {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 4px 0 18px;
  font-size: 23px;
  font-weight: 660;
  letter-spacing: -0.02em;
}

.voltar { margin: 0 0 4px; font-size: 14px; }
.voltar a { text-decoration: none; font-weight: 550; }

/* Um formulário de fora empilha-se sempre: num telemóvel, duas colunas de
   campos ficam estreitas demais para se escrever lá dentro. */
/* Empilhado, sempre. A regra das cinco colunas do preçário apanhava também
   este formulário — partilham a classe que filtra o serviço pela família — e
   espremia "Em que balcão" em duas linhas e as caixas em cinco tiras. */
.formulario-fora,
main.fora .escolher-servico { display: grid; grid-template-columns: 1fr; gap: 14px; }
.formulario-fora button { width: 100%; justify-content: center; padding: 12px; }
.formulario-fora .ajuda { margin: 0; }

/* --- Um pedido, num cartão que se lê de longe ---------------------------
   O cartão antigo dizia "6 pedidas — confirmadas": o travessão era o "ainda
   não há resposta", mas entre dois rótulos lia-se como uma frase partida. E
   os cartões eram todos iguais — nada dizia, sem abrir, o que estava em cada
   um. Agora há uma âncora (o dia), uma frase (quantos e onde) e um estado com
   sinal à frente. */

.titulo-grupo-fora {
  margin: 22px 0 10px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.pedido {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  padding: 13px 14px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  text-decoration: none;
  color: inherit;
}

.pedido:active { background: var(--superficie-suave); }

/* O dia, como numa folha de calendário. */
.pedido-dia {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  padding: 7px 0;
  border-radius: var(--raio-pequeno);
  background: var(--superficie-suave);
  border: 1px solid var(--linha);
  line-height: 1.05;
}

.pedido-dia strong {
  font-size: 20px;
  font-weight: 680;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.pedido-dia small {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.pedido-dia.e-hoje {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
}

.pedido-dia.e-hoje small { color: rgba(255, 255, 255, .8); }

.pedido-corpo { display: grid; gap: 3px; min-width: 0; flex: 1; }

.pedido-quando {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 12.5px;
  color: var(--texto-medio);
}

.pedido-o-que {
  font-size: 15.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pedido-o-que strong { font-weight: 680; }

.pedido-estado {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 550;
}

.pedido-estado svg { width: 15px; height: 15px; flex: none; }
.pedido-estado.espera { color: var(--ambar); }
.pedido-estado.falta { color: var(--vermelho); }
.pedido-estado.completo { color: var(--verde); }
.pedido-estado.por-fazer,
.pedido-estado.por-enviar { color: var(--texto-suave); }

.pedido-seta { flex: none; color: var(--linha-forte); display: grid; }
.pedido-seta svg { width: 18px; height: 18px; }

/* Um pedido que já passou não compete com os que estão para vir. */
.pedido.passado { background: var(--superficie-suave); box-shadow: none; }
.pedido.passado .pedido-dia { background: var(--superficie); }

/* --- O botão de pedir ---------------------------------------------------
   É a única coisa desta página que se faz; tudo o resto é para ler. Fechado,
   tem de se parecer com um botão e não com mais um cartão branco. */

.pedir {
  margin-bottom: 8px;
  background: var(--superficie);
  border-radius: var(--raio);
}

.pedir > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 18px;
  border-radius: var(--raio);
  background: var(--marca);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.pedir > summary::-webkit-details-marker { display: none; }
.pedir > summary svg { width: 17px; height: 17px; flex: none; }
.pedir > summary:hover { background: #0b3c6b; }

.pedir[open] {
  border: 1px solid var(--linha);
  box-shadow: var(--sombra);
}

.pedir[open] > summary { border-radius: var(--raio) var(--raio) 0 0; }

/* Os três números do pedido, em vez dos cartões largos do ecrã da equipa. */
.resumo-fora {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-bottom: 16px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
}

.resumo-fora > div {
  display: grid;
  gap: 2px;
  padding: 14px 10px;
  background: var(--superficie);
  text-align: center;
}

.resumo-fora strong {
  font-size: 26px;
  font-weight: 680;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.resumo-fora span { font-size: 12px; color: var(--texto-medio); }
.resumo-fora .em-falta strong { color: var(--vermelho); }

/* Uma linha do pedido, por balcão. Não é tabela: numa largura de telemóvel,
   cinco colunas não cabem, e cortadas não se leem. */
.lista-fora { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }

.lista-fora li {
  padding: 11px 13px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

/* O que foi pedido à esquerda, o estado à direita, numa linha só. */
.lista-fora-titulo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 15px;
}

.lista-fora-o-que { flex: 1; min-width: 0; }
.lista-fora-o-que strong { font-weight: 660; }
.lista-fora-titulo .estado { flex: none; }

.lista-fora-detalhe { margin-top: 3px; font-size: 13px; color: var(--texto-medio); }

@media (max-width: 420px) {
  .faixa .marca-nome { display: none; }
  .resumo-fora strong { font-size: 22px; }
}

/* A urgência cataloga-se num sítio só, com a hora do pedido ao lado — é ela
   que justifica a decisão. */
.linha-urgencia {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.linha-urgencia .ajuda { flex: 1; min-width: 240px; }

/* O olho que mostra a palavra-passe. A caixa vive numa moldura para o botão
   se encostar à direita sem sair do sítio quando o campo muda de largura. */
.com-olho { position: relative; display: block; }
.com-olho input { padding-right: 42px; }

.olho {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  color: var(--texto-suave);
  cursor: pointer;
}

.olho:hover { background: none; color: var(--texto); }
.olho svg { width: 18px; height: 18px; }
.olho:focus-visible { outline: 2px solid var(--marca-clara); border-radius: 6px; }

/* Um caminho de ficheiro dentro de uma frase lê-se melhor destacado. */
code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(16, 26, 38, .07);
  font-size: 0.92em;
}

/* O fim do pedido: a saída que faltava. Um botão largo, que se acerta com o
   polegar, e que diz o que faz em vez de ser uma seta a um canto. */
.fim-do-pedido { margin: 14px 0 0; }

.fim-do-pedido button,
.fim-do-pedido .botao {
  width: 100%;
  justify-content: center;
  padding: 13px;
  font-size: 15px;
}

.fim-do-pedido .ajuda { margin: 9px 2px 0; }

/* O "pedir mais" de dentro de um pedido não compete com a saída: é secundário
   ali, ao contrário do "pedir pessoas" da lista, que é a acção principal. */
.pedir.claro > summary {
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  color: var(--texto);
}

.pedir.claro > summary:hover { background: var(--superficie-suave); }
.pedir.claro { box-shadow: var(--sombra); }

/* Alterar e apagar uma linha. Caixas sempre abertas em todas as linhas são
   uma parede — a mesma que se tinha tirado dos colaboradores — e um toque
   errado muda um número sem se dar por isso. */
.lista-fora-mexer {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 7px -6px -4px;
}

.lista-fora-mexer form { margin-left: auto; }
.lista-fora-mexer .botao,
.lista-fora-mexer button { gap: 5px; padding: 5px 8px; font-size: 12.5px; }
.lista-fora-mexer svg { width: 14px; height: 14px; }

/* O "Alterar" não é destrutivo: o vermelho do hover é só do apagar. */
.lista-fora-mexer a.discreto:hover { background: var(--marca-fundo);
                                     color: var(--marca); }

/* A linha aberta destaca-se: é a única do ecrã com campos por preencher. */
.lista-fora li.em-edicao {
  background: var(--marca-fundo);
  border-color: var(--marca-clara);
  box-shadow: inset 3px 0 0 var(--marca-clara);
}

.lista-fora li.em-edicao .botao.secundario { width: 100%; text-align: center;
                                             justify-content: center; }

/* Quem vai a cada balcão. Uma lista de pessoas, não uma tabela: são poucas
   por linha e o que importa é o nome. */
.quem-vai { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }

.quem-vai li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--superficie-suave);
  border: 1px solid var(--linha);
  border-radius: var(--raio-pequeno);
}

.quem-vai .inicial { width: 26px; height: 26px; font-size: 12px; }
.quem-vai-nome { flex: 1; min-width: 0; font-weight: 550; }
/* Só o último empurra: com `margin-left: auto` em todos, a caixa das horas
   colava-se ao botão de tirar e o nome ficava sozinho do outro lado. */
.quem-vai form:last-of-type { margin-left: auto; }

/* As horas que passaram do lote. A medida do telemóvel fica ao lado, em
   letra pequena: é a prova, não o número que se fatura. */
.horas-extra {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12.5px;
  color: var(--texto-suave);
}

.horas-extra label { display: flex; align-items: baseline; gap: 6px;
                     font-size: 12.5px; font-weight: 400; margin: 0; }
.horas-extra .mediu { color: var(--texto-medio); font-variant-numeric: tabular-nums; }
.horas-extra input { width: 62px; padding: 4px 7px; text-align: right;
                     font-variant-numeric: tabular-nums; }
.quem-vai .estado-atribuido { background: var(--marca-fundo); color: var(--marca);
                              border-color: transparent; }

/* A hierarquia do cliente, na linha do solicitante. Fechada é uma frase — a
   quem responde, e o que lhe é dado fazer; aberta é onde se muda isso. Com a
   lista de chefes sempre à vista, o antes e o depois de escolher eram o mesmo
   ecrã, e ficava por saber se a escolha tinha ficado gravada. */
/* ------------------------------------------------------ O dia do colaborador */

/* Um serviço por cartão, e um passo de cada vez: o botão que está à frente é
   o único que faz falta. Quem o usa está de pé num aeroporto, não sentado. */
.servico {
  margin-bottom: 14px;
  padding: 14px 15px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.servico.em-curso { border-color: var(--marca-clara);
                    box-shadow: inset 3px 0 0 var(--marca-clara), var(--sombra); }
.servico.terminado, .servico.recusado { background: var(--superficie-suave);
                                        box-shadow: none; }

.servico-topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 17px;
}

.servico-topo strong { flex: 1; min-width: 0; font-weight: 660; }
.servico-detalhe { margin-top: 3px; font-size: 13.5px; color: var(--texto-medio); }
.servico-total { margin: 10px 0 0; font-weight: 600; }

.estado-aceite { background: var(--marca-fundo); color: var(--marca);
                 border-color: transparent; }
.estado-em-curso { background: var(--ambar-fundo); color: var(--ambar);
                   border-color: transparent; }
.estado-terminado { background: var(--verde-fundo); color: var(--verde);
                    border-color: transparent; }
.estado-recusado { background: var(--vermelho-fundo); color: var(--vermelho);
                   border-color: transparent; }

/* O percurso, perna a perna: hora de saída à esquerda, chegada à direita. */
.percurso { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }

.percurso li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 10px;
  background: var(--superficie-suave);
  border-radius: var(--raio-pequeno);
  font-size: 14px;
}

.percurso-hora { font-variant-numeric: tabular-nums; font-weight: 600;
                 color: var(--texto-medio); flex: none; }
.percurso-hora.fim { margin-left: auto; }
.percurso-onde { flex: 1; min-width: 0; }

/* Botões do tamanho de um polegar, empilhados. */
.servico-accoes { display: grid; gap: 8px; margin-top: 14px; }
.servico-accoes button { width: 100%; justify-content: center; padding: 13px;
                         font-size: 15px; }
.servico-accoes .chegada { display: grid; gap: 8px; }
.servico-accoes .chegada label { font-size: 13px; color: var(--texto-medio); }


/* ------------------------------------------------------ As portas da empresa */

/* Quatro quadrados lado a lado, e não seiscentas linhas empilhadas: para
   chegar aos solicitantes rolava-se por vinte e nove balcões. */
.portas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.porta {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 20px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}

.porta:hover {
  border-color: var(--linha-forte);
  box-shadow: var(--sombra-alta);
  transform: translateY(-1px);
}

.porta-icone {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: var(--marca-fundo);
  color: var(--marca);
}

.porta-icone svg { width: 19px; height: 19px; }
.porta-nome { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.porta-conta { font-size: 13px; color: var(--texto-medio); }
.porta-conta strong { font-size: 15px; color: var(--texto);
                      font-variant-numeric: tabular-nums; }
.porta-conta .em-falta { color: var(--vermelho); font-weight: 600; }


/* Uma caixa de escolha múltipla não cabe na altura de uma linha de tabela:
   a regra que iguala as alturas das células espremia-a a 33 pixéis, e das
   doze opções viam-se duas. */
.tabela select[multiple] { height: auto; min-height: 76px; padding: 4px 6px; }
.tabela select[multiple] option { padding: 2px 4px; }


/* ------------------------------------- Quem vem, do lado de quem recebe */

/* O solicitante sabia quantas pessoas vinham e não sabia quais. Quem recebe
   tem de saber quem lhe bate à porta — e ver, quando alguém já respondeu,
   que o lugar está mesmo tratado. */
.vem-ai {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.vem-ai-pessoa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--superficie);
  font-size: 13.5px;
  font-weight: 550;
}

.vem-ai-pessoa .estado { font-size: 11px; padding: 1px 6px; }

.vem-ai-falta {
  align-self: center;
  font-size: 13px;
  color: var(--texto-suave);
  font-style: italic;
}

/* ------------------------------------------ Os pedidos, casa a casa */

/* As etiquetas das empresas por cima da lista. O índice das letras já fazia
   isto para os colaboradores; aqui as palavras são mais compridas e levam a
   contagem atrás. */
.indice-casas a { gap: 7px; grid-auto-flow: column; }

.indice-casas .quantos {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--superficie-suave);
  color: var(--texto-medio);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.indice-casas a.ativo .quantos {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* O cabeçalho de cada casa dentro da tabela. Antes a empresa ia colada a
   cada nome de pessoa — nove vezes para nove pedidos do mesmo cliente. */
.faixa-empresa > th {
  padding: 14px 16px 7px;
  background: var(--superficie-suave);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-medio);
}

.faixa-empresa svg { width: 14px; height: 14px; vertical-align: -2px; }
.faixa-empresa .contagem { text-transform: none; letter-spacing: 0; }

/* --------------------------------------------- As abas dos pedidos */

/* Criar e gerir estavam empilhados na mesma página: o formulário por cima e
   a lista por baixo. Quem vinha ver o que estava por tratar abria primeiro um
   formulário que não queria; quem vinha criar rolava por cima de treze
   pedidos. Lado a lado, escolhe-se. */
.abas {
  display: flex;
  gap: 4px;
  margin: 0 0 20px;
  padding: 4px;
  background: var(--superficie-suave);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.abas a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--raio-pequeno);
  color: var(--texto-medio);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.abas a:hover { background: var(--superficie); color: var(--texto); }

.abas a.ativa {
  background: var(--marca);
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 32, 55, 0.18);
}

.abas a.ativa:hover { background: var(--marca); color: #fff; }
.abas svg { width: 16px; height: 16px; flex: none; }

/* Quem entra é uma pessoa, não uma sessão: cumprimenta-se pelo primeiro
   nome, e o que a página é fica por baixo, em letra miúda. O nome inteiro
   já está na barra lá em cima — dito duas vezes deixava de ser simpático e
   passava a ser insistente. */
.titulo-fora.saudacao {
  display: block;
  margin-bottom: 20px;
  line-height: 1.15;
}

.titulo-fora.saudacao small {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 500;
  color: var(--texto-medio);
}

/* As linhas do ecrã de criar: balcão, turno, quantas e nota lado a lado, uma
   linha por cada coisa que o cliente pediu. As etiquetas só na primeira —
   repetidas em cada linha eram uma parede de "Para que balcão". */
.linhas-pedido {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: grid;
  gap: 10px;
}

.linhas-pedido legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 650;
}

.linha-pedido {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(130px, 1fr) 110px minmax(160px, 1.6fr) 34px;
  gap: 12px;
  align-items: end;
}

.linha-pedido + .linha-pedido label { display: none; }

.tirar-linha { height: 39px; justify-content: center; padding: 0; }
.tirar-linha svg { width: 15px; height: 15px; }

.outra-linha { justify-self: start; color: var(--marca); padding: 6px 10px; }
.outra-linha:hover { background: var(--marca-fundo); color: var(--marca); }

/* Os botões são inline-flex, e isso passava por cima do `hidden`. */
.tirar-linha[hidden], .outra-linha[hidden] { display: none; }

@media (max-width: 900px) {
  /* No telemóvel cada linha é um bloco, e aí a etiqueta volta a ser precisa. */
  .linha-pedido {
    grid-template-columns: 1fr 1fr;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--linha);
  }
  .linha-pedido + .linha-pedido label { display: block; }
  .tirar-linha { grid-column: 1 / -1; justify-self: end; height: auto;
                 padding: 4px 8px; }
}

/* Anulado: fica à vista, mas apagado — está lá para se saber que houve, não
   para se tratar. */
.estado-anulado {
  background: var(--superficie-suave); border-color: var(--linha);
  color: var(--texto-suave); text-decoration: line-through;
}
.pedido-estado.anulado { color: var(--texto-suave); }
.tabela tr.anulado td,
.tabela tr.anulada td { color: var(--texto-suave); }
.tabela tr.anulado a { color: var(--texto-medio); }

/* O botão de anular é secundário, mas diz ao que vem ao passar por cima. */
.secundario.perigo:hover {
  background: var(--vermelho-fundo); border-color: var(--vermelho);
  color: var(--vermelho);
}

/* A linha repetida diz-se na própria linha, por baixo, e a caixa do turno
   fica a vermelho: é aí que está o que se tem de mudar. */
.aviso-linha {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  font-size: 13px;
  color: var(--vermelho);
}
.linha-pedido.repetida select[name="servico_id"] {
  border-color: var(--vermelho);
  background: var(--vermelho-fundo);
}

/* "Já tem 3 pedidas. Somar ou substituir?" — por baixo do botão, porque é a
   resposta a ele. */
.ja-existe {
  padding: 12px 14px;
  border: 1px solid var(--ambar);
  border-radius: var(--raio-pequeno);
  background: var(--ambar-fundo);
}
.ja-existe[hidden] { display: none; }
.ja-existe-texto { margin: 0 0 10px; font-size: 14px; }
.ja-existe-botoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------- A marca da casa */

/* Na barra lateral a marca ocupa a largura toda e o cliente fica por baixo:
   o logótipo já diz "Tagus", e dizê-lo outra vez ao lado era repetição. */
.lateral .marca { padding-bottom: 4px; }

.marca-cliente {
  padding-left: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lateral-texto);
}

/* --------------------------------------------------- A marca de água */

/* O sinal da marca, e não o logótipo inteiro: uma marca de água com letras
   punha texto por trás de texto, que é o pior sítio para o pôr. Assim é só
   a forma, que se reconhece sem se ler.

   Fixa e sem reagir ao rato: acompanha o olho sem se mexer com a página, e
   não apanha cliques que eram para o que está por baixo.

   A opacidade é baixa de propósito. Isto é uma aplicação de tabelas e
   números — o contraste do texto por cima foi medido depois de ser posta,
   e não estimado. */
.conteudo, body.de-fora, .pagina-entrada { position: relative; }

.conteudo::before,
body.de-fora::before,
.pagina-entrada::before {
  content: "";
  position: fixed;
  right: -60px;
  bottom: -70px;
  width: 460px;
  height: 460px;
  background: url("/static/marca.png") no-repeat center / contain;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* No ecrã de entrada o fundo é escuro e o verde aguenta mais. */
.pagina-entrada::before { opacity: 0.13; width: 560px; height: 560px; }

/* O que se lê fica por cima. */
.conteudo > *, body.de-fora > *, .entrada { position: relative; z-index: 1; }

/* ------------------------------------- O ecrã de entrada, em duas colunas */

/* À esquerda quem somos, à direita o que se faz aqui. A casa fala uma vez,
   no sítio onde há espaço para isso, e o formulário fica limpo — quem entra
   todos os dias não quer ler nada. */
.pagina-entrada.duas-colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: stretch;
  padding: 0;
  background: var(--superficie);
}

/* O verde da casa, escurecido até dar contraste a texto branco por cima. */
.montra {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 48px 44px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(760px 520px at 78% 22%, #23502f 0%, transparent 60%),
    linear-gradient(155deg, #16301f 0%, #0d1f14 58%, #111a14 100%);
  color: #fff;
}

/* O sinal da marca, grande e esbatido, por trás do que se lê. */
.montra::before {
  content: "";
  position: absolute;
  right: -110px;
  top: 8%;
  width: 620px;
  height: 620px;
  background: url("/static/marca.png") no-repeat center / contain;
  opacity: 0.09;
  pointer-events: none;
}

.montra > * { position: relative; z-index: 1; }
.montra-marca { width: 208px; height: auto; }

.montra-dizer h1 {
  margin: 0 0 26px;
  font-size: 40px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Três palavras a verde, e não a frase toda: o destaque só destaca
   enquanto for pouco. */
.montra-dizer h1 em { font-style: normal; color: var(--marca-verde); }

.montra-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }

.montra-lista li {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 15.5px;
  color: rgba(255, 255, 255, .88);
}

.montra-lista svg {
  width: 15px;
  height: 15px;
  flex: none;
  padding: 6px;
  border-radius: 50%;
  background: rgba(123, 187, 98, .18);
  color: var(--marca-verde);
  box-sizing: content-box;
}

/* A coluna do formulário: branca, centrada, sem moldura — o painel deixou
   de fazer falta quando passou a ter uma coluna só para ele. */
.pagina-entrada.duas-colunas .entrada {
  display: grid;
  place-items: center;
  padding: 40px 28px;
  max-width: none;
}

.entrada-caixa { width: 100%; max-width: 384px; }

.entrada-caixa h2 {
  margin: 0;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--texto);
}

.entrada-caixa .subtitulo {
  margin: 7px 0 26px;
  font-size: 14.5px;
  color: var(--texto-medio);
}

.entrada-esquecido { margin: -4px 0 4px; text-align: right; font-size: 13.5px; }
.entrada-esquecido a { color: var(--verde); font-weight: 550; }

/* No telemóvel a montra passa para cima, mais baixa, só com a marca e a
   frase: as três linhas da lista roubavam o ecrã ao formulário. */
@media (max-width: 860px) {
  .pagina-entrada.duas-colunas { grid-template-columns: 1fr; }
  .montra { padding: 30px 24px; gap: 22px; }
  .montra::before { width: 360px; height: 360px; right: -90px; }
  .montra-marca { width: 158px; }
  .montra-dizer h1 { font-size: 28px; margin-bottom: 0; }
  .montra-lista { display: none; }
}

/* Os outros ecrãs de fora — recuperar a palavra-passe, a primeira
   utilização — ficam na mesma casa. Sem a montra, que são formulários
   curtos e não há nada para vender a quem já está a meio de uma coisa;
   com o mesmo verde, que sair de um ecrã verde para um azul a meio de
   uma recuperação era parecer outra aplicação. */
.pagina-entrada:not(.duas-colunas) {
  background:
    radial-gradient(900px 560px at 50% -8%, #23502f 0%, transparent 62%),
    linear-gradient(160deg, #16301f 0%, #0d1f14 60%, #111a14 100%);
}

.marca-clara { display: block; width: 210px; height: auto; margin: 0 auto 20px; }

/* O logótipo claro assenta directo no escuro. A placa branca era um remendo
   para a versão preta — e uma placa branca no meio de uma barra escura
   fere a vista, que é exactamente o que um logótipo não deve fazer. */
.marca-clara.na-barra { width: 152px; margin: 0; }
/* Mais pequeno na faixa de fora: é um cabeçalho de telemóvel, e a 122px
   o logótipo levava um oitavo do ecrã só para dizer de quem é a casa. */
.marca-clara.na-faixa { width: 98px; margin: 0; }

/* --------------------------------------------- A ficha de um solicitante */

/* Editava-se na própria linha, e a linha tem sete colunas: os campos ficavam
   espremidos, e se a pessoa fosse das últimas saía do ecrã enquanto se
   escrevia. Aqui é um formulário como outro qualquer. */
.ficha-pessoa {
  border-bottom: 1px solid var(--linha);
  background: var(--marca-fundo);
}

.ficha-pessoa h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  font-size: 17px;
}

.ficha-pessoa h3 svg { width: 18px; height: 18px; color: var(--marca); }
.ficha-pessoa select[multiple] { height: auto; padding: 5px 7px; }
.ficha-pessoa .nada { margin: 0; font-size: 13px; color: var(--texto-suave); }

/* A linha de quem está em ficha, para se saber de quem ela é. */
.tabela tr.em-ficha > td { background: var(--marca-fundo); }

/* Na tabela a hierarquia só se lê: mudar é na ficha. Ter as duas a gravar
   dava outra vez dois botões de Guardar no mesmo ecrã. */
.hierarquia-diz { display: block; line-height: 1.3; padding: 4px 0; }
.hierarquia-diz .chefes { display: block; font-size: 13.5px; font-weight: 600; }
.hierarquia-diz .sem-chefe { font-weight: 400; font-style: italic;
                             color: var(--texto-suave); }
.hierarquia-diz .papel { display: block; font-size: 12px;
                         color: var(--texto-suave); }

/* As duas marcas da ficha, lado a lado mas com espaço para o texto. Numa
   célula de grelha, "Vê os pedidos todos da empresa" não cabia e o texto
   passava por cima da caixa seguinte — e a caixa não dava por isso, porque
   é o texto que transborda, não a caixa. */
.duas-caixas {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 32px;
}

.duas-caixas .caixa { white-space: normal; }

/* ------------------------------------------ Os dois meses do registo diário */

/* Ir de agosto a setembro pela seta do dia seguinte eram cinquenta e seis
   cliques — e a seta não diz se o dia a seguir tem alguma coisa, por isso
   passava-se por semanas vazias à procura de um dia com trabalho. */
.meses {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Os três meses medem 860px com este intervalo. Com os 40px de antes
     davam 920 para 917 de espaço, e o terceiro caía sozinho para baixo —
     pior equilíbrio do que os dois de que se veio. */
  gap: 26px 30px;
}

.mes { border-collapse: collapse; }

.mes caption {
  padding: 0 0 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-medio);
}

.mes th {
  width: 40px;
  padding: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-suave);
  text-align: center;
}

.mes td { padding: 1px; }
.mes td.fds .dia { color: var(--texto-suave); }

/* O número encosta ao fundo da caixa, e não ao centro: a contagem vive no
   canto de cima e, com o número ao meio, os dois pisavam-se — dia 15 com
   cinco pessoas pedidas dava um 5 por cima do 15. Cada um no seu andar. */
.mes .dia {
  display: grid;
  align-items: end;
  justify-items: center;
  position: relative;
  width: 38px;
  height: 36px;
  padding-bottom: 4px;
  border-radius: var(--raio-pequeno);
  color: var(--texto);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mes .dia:hover { background: var(--superficie-suave); }

/* Quantas pessoas estão pedidas nesse dia. É o número que faz falta de
   relance: "há pedidos" sem o tamanho não ajuda a escolher por onde começar. */
.mes .quantos {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--marca);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
}

/* De quem é a vez, naquele dia — o dia inteiro pintado, e não um ponto por
   baixo do número. O ponto tinha cinco pixéis e não se via: escolhi-o por
   discrição quando o que faz falta é ver de longe quais são os dias que
   pedem atenção.

   Basta um pedido à nossa espera para o dia ficar vermelho: é o que se
   procura, e escondê-lo entre dois já tratados não servia de nada. */
/* Cores de semáforo, e não os tons escuros do resto do ecrã: aqui o que
   conta é dar pelo dia sem o procurar, e o vermelho-tijolo e o castanho
   liam-se os dois como "escuro" à distância a que se olha para isto.

   São só do calendário. Os mesmos três estados nas etiquetas do resto da
   aplicação continuam nos tons sóbrios: ali lê-se a palavra, aqui só há
   a cor. */
.mes {
  --dia-vermelho: #ef4444;
  --dia-amarelo: #f5c518;
  --dia-verde: #2ea44f;
}

/* Com as cores claras o texto passa a ser escuro. Branco sobre amarelo não
   se lê, e ter duas caixas com letra branca e uma com letra preta ficava
   remendado: são as três iguais. */
.mes .dia.nosso,
.mes .dia.deles,
.mes .dia.feito { color: var(--texto); font-weight: 700; }

.mes .dia.nosso { background: var(--dia-vermelho); }
.mes .dia.deles { background: var(--dia-amarelo); }
.mes .dia.feito { background: var(--dia-verde); }

.mes .dia.nosso:hover { background: #dc3535; }
.mes .dia.deles:hover { background: #e0b400; }
.mes .dia.feito:hover { background: #26913f; }

/* A contagem escura por cima da cor: com o fundo claro, a bolinha branca
   de antes desaparecia dentro do amarelo. */
.mes .dia.nosso .quantos,
.mes .dia.deles .quantos,
.mes .dia.feito .quantos { background: var(--texto); color: #fff; }

/* Na legenda, a mesma caixa em pequeno. */
i.amostra {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -2px;
}

/* A legenda leva as cores do calendário, que é o que ela explica. */
i.amostra.nosso { background: #ef4444; }
i.amostra.deles { background: #f5c518; }
i.amostra.feito { background: #2ea44f; }

.legenda-cores {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  font-size: 12.5px;
  color: var(--texto-suave);
}

.legenda-cores .chave { white-space: nowrap; }

.mes .dia.e-hoje { box-shadow: inset 0 0 0 1px var(--linha-forte); }

/* O dia aberto guarda a cor do estado e ganha um anel: pintá-lo de azul por
   cima apagava a informação que se veio ali buscar. */
.mes .dia.aberto {
  box-shadow: 0 0 0 2px var(--marca);
  font-weight: 700;
}

.mes .dia.aberto:not(.nosso):not(.deles):not(.feito) {
  background: var(--marca);
  color: #fff;
}

.mes .dia.aberto:not(.nosso):not(.deles):not(.feito) .quantos {
  background: #fff;
  color: var(--marca);
}

.calendario > summary .contagem { text-transform: none; letter-spacing: 0; }

/* As setas que mudam os meses do calendário, sem mudar o dia aberto. */
.andar-nos-meses {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-bottom: 0;
}