/*
 * AnySolve Selecção, o estilo dos ecrãs.
 *
 * Ficheiro próprio, e não estilo em linha, por uma razão que só se viu ao
 * medir: o estilo em linha saía uma vez por processo, e bastava o atalho ser
 * chamado duas vezes na mesma página para a segunda sair sem estilo nenhum.
 * A fila do WordPress resolve isso e ainda deixa o navegador guardar a folha
 * em memória, que numa ligação móvel moçambicana não é pouco.
 */

/*
 * A largura tem de ganhar a uma regra do tema.
 *
 * O BuddyX traz `.page-content > *, .entry-content > * { max-width:
 * var(--content-width) }`. O `*` não conta para a especificidade, por isso
 * essa regra vale exactamente o mesmo que um `.as-sel` simples, e ganhava só
 * por a folha dele carregar depois da nossa. Escrever a classe duas vezes
 * sobe a especificidade e resolve. Não se usa `!important`: já aconteceu
 * neste projecto um `!important` meu ganhar a outra regra minha mais nova, e
 * ninguém percebeu porquê durante uma hora.
 */
.as-sel,.as-sel.as-sel{max-width:900px;margin:0 auto}
.as-sel-titulo{margin:0 0 14px}
.as-sel-sub{margin:26px 0 8px;font-size:1.05rem}
.as-sel-volta{margin:0 0 10px}
.as-sel-mudo{color:#5a6572}
.as-sel-explica{color:#5a6572;margin:0 0 14px}
.as-sel-ajuda{display:block;color:#5a6572;font-size:.86rem;margin:3px 0 0}
.as-sel-aviso{padding:10px 14px;border-radius:10px;margin:0 0 16px}
.as-sel-aviso-bom{background:#eef7ef;border:1px solid #bcd9c0}
.as-sel-aviso-mau{background:#fdf3f2;border:1px solid #da291c}
.as-sel-abas{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;border-bottom:1px solid #d7dbe0;padding-bottom:8px}
/*
 * As abas e os botões são as únicas regras deste ficheiro com `!important`, e
 * fica escrito porquê.
 *
 * O BuddyX pinta as ligações do conteúdo com
 * `.entry-content a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not([class*="button"])`,
 * que vale (0,5,1) de especificidade. A aba activa saía preta sobre fundo
 * preto, ilegível, e o botão de imprimir saía vermelho sobre vermelho.
 *
 * Para ganhar por especificidade seria preciso empilhar classes até passar
 * cinco, e o resultado é pior de ler e pior de manter do que uma palavra
 * honesta. Uma cor de ligação de artigo não tem nada que pintar uma aba de
 * navegação de uma aplicação.
 *
 * O `!important` está SÓ na cor e no fundo destes dois. Se um dia isto
 * baralhar outra regra, é aqui que se procura.
 */
.as-sel-aba{padding:6px 12px;border-radius:8px;text-decoration:none;color:#14181d !important;background:#f6f7f9}
.as-sel-aba-activa{background:#14181d;color:#fff !important}
.as-sel-tab{width:100%;border-collapse:collapse;margin:8px 0}
.as-sel-tab th,.as-sel-tab td{border-bottom:1px solid #e4e7ea;padding:8px 6px;text-align:left;vertical-align:top}
.as-sel-tab th{font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:#5a6572}
.as-sel-tab .num{text-align:right;font-variant-numeric:tabular-nums}
.as-sel-apurado{background:#f2f8f3}
.as-sel-linhas{display:grid;gap:12px;margin:14px 0}
.as-sel-linha,.as-sel-conflito-caixa,.as-sel-req,.as-sel-ficha{border:1px solid #d7dbe0;border-radius:10px;padding:12px 14px}
.as-sel-conflito-caixa{border-color:#da291c;background:#fdf9f9}
.as-sel-legenda{font-weight:700;padding:0 4px}
.as-sel-par{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.as-sel-form p{margin:0 0 10px}
.as-sel-form input[type=text],.as-sel-form input[type=url],.as-sel-form input[type=date],.as-sel-form input[type=time],.as-sel-form select,.as-sel-form textarea{width:100%;max-width:100%;box-sizing:border-box;padding:7px 9px;border:1px solid #c9ced4;border-radius:8px;font:inherit}
.as-sel-botao{display:inline-block;background:#da291c;color:#fff !important;border:0;border-radius:10px;padding:10px 18px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
.as-sel-botao-claro{background:#f6f7f9;color:#14181d !important;border:1px solid #c9ced4}
.as-sel-fechado{background:#fff8ec;border:1px solid #e3c98d;border-radius:10px;padding:10px 14px;margin:0 0 14px}
.as-sel-nota-forte{background:#f6f7f9;border-left:4px solid #14181d;padding:10px 14px;margin:0 0 14px}
.as-sel-conflito{color:#da291c}
.as-sel-falta{color:#b8541a}
.as-sel-marca{font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;padding:2px 8px;border-radius:20px;background:#eceff1}
.as-sel-req-cumpre .as-sel-marca{background:#dcefe0}
.as-sel-req-nao_cumpre .as-sel-marca{background:#f7dedb}
.as-sel-req-falta .as-sel-marca{background:#fdf0d8}
.as-sel-req{margin:0 0 12px}
.as-sel-req-topo{margin:0 0 4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.as-sel-dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0 0 12px}
.as-sel-dl dt{font-weight:700}
.as-sel-dl dd{margin:0}
.as-sel-lista{margin:6px 0;padding-left:20px}
.as-sel-caixas{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px}
.as-sel-caixa{display:inline-flex;align-items:center;gap:6px;font-weight:400}
.as-sel-chaves{margin:10px 0 16px}
.as-sel-chaves code{font-size:.85em}
/*
 * No telemóvel a tabela deixa de ser tabela.
 *
 * Cinco colunas em 390 pixels não cabem: a última ficava fora do ecrã, sem
 * barra para lá chegar, e quem estivesse a ver candidatos no telemóvel nunca
 * saberia que havia coluna de entrevista. Mediu-se, viu-se, e mudou-se.
 *
 * Cada linha passa a ser um cartão e cada célula leva o seu nome consigo, no
 * atributo data-etiqueta. Sem uma linha de JavaScript, que é a regra da casa:
 * isto abre-se em ligações fracas e em telemóveis antigos.
 */
@media (max-width:640px){
	.as-sel-par{grid-template-columns:1fr}
	.as-sel-abas{gap:4px}
	.as-sel-aba{padding:6px 10px;font-size:.92rem}

	.as-sel-tab,.as-sel-tab tbody,.as-sel-tab tr,.as-sel-tab td{display:block;width:auto}
	/* Escondida de vez: cada célula já leva o seu nome no data-etiqueta. */
	.as-sel-tab thead{display:none}
	/*
	 * O cartão é uma coluna, para o nome poder subir ao topo com `order`.
	 * Numa ordenação, o cartão tem de se chamar pelo nome do candidato e não
	 * pelo número do lugar: quem lê procura a pessoa, não o lugar.
	 */
	.as-sel-tab tr{display:flex;flex-direction:column;border:1px solid #d7dbe0;border-radius:10px;padding:10px 12px;margin:0 0 10px}
	.as-sel-tab td.as-sel-td-nome{order:-1}
	.as-sel-tab td{border:0;padding:3px 0;text-align:left;display:flex;gap:10px;justify-content:space-between;align-items:baseline}
	.as-sel-tab td.num{text-align:left}
	.as-sel-tab td[data-etiqueta]::before{content:attr(data-etiqueta);color:#5a6572;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;flex:0 0 auto}
	.as-sel-tab td.as-sel-td-nome{font-weight:700;padding-bottom:6px;border-bottom:1px solid #eceff1;margin-bottom:4px;display:block}
	.as-sel-tab td.as-sel-td-nome::before{display:block;font-weight:400;margin-bottom:2px}
	/* O que está esmaecido continua esmaecido dentro do cartão. */
	.as-sel-tab td .as-sel-mudo{font-weight:400}
}