/* ==========================================================
   Escolher de uma lista — o que vai DENTRO da folha.

   A casca (fundo escurecido, caixa branca, folha a subir do
   fundo do ecrã, pega) é a mesma do calendário e está em
   css/escolher-data.css, nas classes "escolher-*". Aqui só
   fica a lista em si.
   ========================================================== */

.lista-caixa { padding-bottom: 8px; }
.escolher-caixa.escolher-caixa-folha.lista-caixa {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

/* o nome do campo, em cima */
.lista-titulo {
  margin: 2px 0 10px; padding: 0 4px;
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  color: #8A8A8E;
}

/* a caixa de procurar, nas listas compridas (os países) */
.lista-procura {
  display: block; width: 100%; box-sizing: border-box;
  min-height: 40px; margin: 0 0 8px; padding: 9px 12px;
  border: 1px solid #E3E7F0; border-radius: 10px;
  background: rgba(18, 22, 58, .04);
  font: inherit; font-size: 15px; color: var(--texto);
  -webkit-appearance: none; appearance: none;
}
.lista-procura::placeholder { color: #9195A5; }
.lista-procura:focus { outline: 2px solid var(--azul); outline-offset: 1px; background: #fff; }
.lista-procura::-webkit-search-cancel-button { -webkit-appearance: none; }

.lista-opcoes { display: flex; flex-direction: column; gap: 2px; }
/* lista comprida: desliza dentro da folha, em vez de a fazer crescer sem fim */
.lista-opcoes-longa { max-height: min(52vh, 420px); overflow-y: auto; overscroll-behavior: contain; }
.lista-opcao[hidden] { display: none; }

.lista-opcao {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 48px; padding: 10px 12px; margin: 0;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 400; line-height: 1.35;
  color: var(--texto); text-align: left;
  transition: background .15s ease;
}
.lista-opcao:hover { background: rgba(18, 22, 58, .05); }
.lista-opcao:active { background: rgba(18, 22, 58, .09); }

/* a escolhida: azul, mais forte, com o visto à direita */
.lista-opcao.marcada { color: var(--azul); font-weight: 600; background: rgba(40, 48, 120, .07); }
.lista-visto {
  flex: 0 0 auto; width: 19px; height: 19px;
  fill: none; stroke: var(--azul); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* apagar a escolha (só aparece quando já há uma) */
.lista-rodape {
  margin-top: 6px; padding-top: 8px;
  border-top: .5px solid rgba(18, 22, 58, .1);
}
.lista-limpar {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--texto-suave);
  text-align: left;
}
.lista-limpar:hover { background: rgba(18, 22, 58, .05); }

/* no PC a caixa não precisa de ser tão alta nem tão espaçada */
@media (min-width: 601px) {
  .lista-caixa { width: 300px; }
  .lista-opcao { min-height: 42px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .lista-opcao { transition: none; }
}

/* ==========================================================
   O botão que abre a folha.

   Substitui o menu do browser: nas fichas (pessoa.html) e nos
   <select data-lista> do "O meu perfil". É branco e com contorno
   de propósito — ao lado das caixas de escrever, que são lisas e
   de fundo liso, vê-se logo qual é a que se escolhe.
   ========================================================== */

select.lista-escondida { display: none; }

.lista-botao {
  display: block; width: 100%; box-sizing: border-box;
  min-height: 44px; margin: 0; padding: 10px 44px 10px 12px;
  background-color: #FFFFFF;
  border: 1.5px solid #C6CDE2; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(18, 22, 58, .05);
  font: inherit; font-size: 15px; font-weight: 600; line-height: 22px;
  color: var(--texto); cursor: pointer; text-align: left;
  /* uma linha só, com reticências se não couber */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  appearance: none; -webkit-appearance: none;
  /* as duas setas do iOS: lê-se de longe que aquilo abre uma lista */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20' fill='none' stroke='%23283078' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8L6 4.5 9.5 8'/%3E%3Cpath d='M2.5 12L6 15.5 9.5 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 12px 20px;
  transition: border-color .15s ease, background-color .15s ease;
}
.lista-botao:hover { border-color: var(--azul); background-color: #FBFCFE; }
.lista-botao:active { background-color: #F3F5FB; }
.lista-botao:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
/* por preencher: o texto esbate, mas a caixa continua a parecer um menu */
.lista-botao.em-branco { color: #8A90A6; font-weight: 500; }

/* na ficha da pessoa os valores são um pouco mais pequenos */
#pessoa-corpo .lista-botao { font-size: 14.5px; }

/* grupos e icones (ex.: ligar um lembrete a uma obra) */
.lista-grupo { margin: 12px 16px 4px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-suave, #666B82); }
.lista-grupo[hidden] { display: none; }
.lista-grupo:first-child { margin-top: 4px; }
.lista-opcao .lista-icone { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-right: 12px; }
.lista-opcao .lista-icone svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lista-opcao:has(.lista-icone) { display: flex; align-items: center; justify-content: flex-start; text-align: left; }
.lista-opcao:has(.lista-icone) > span:not(.lista-icone) { flex: 1; min-width: 0; }
.lista-opcao .lista-icone { background: var(--fundo, #F3F5FA); } .lista-opcao .lista-icone svg { stroke: var(--texto, #161A33); } .lista-opcao .lista-icone.com-cor svg { stroke: #fff; }