/**
 * Estilos compartilhados dos formulários de página única do tema:
 * cadastro (RF-AUT-01/02/03/06, Sprint 3) e conclusão de cadastro de
 * professor(a)/pesquisador(a) + validação de SIAPE (RF-PROF-01/02/03,
 * Sprint 4).
 *
 * Consome os tokens `--lisa-*` definidos em `lisa-theme/style.css`
 * (cores, raio, sombra, foco, fonte). NÃO redefinir tokens aqui — apenas
 * aplicar. Mobile-first: layout em coluna única abaixo de 640px, pares de
 * campos em duas colunas a partir de 640px (mesmo breakpoint do grid de
 * cards do design system).
 *
 * EDITÁVEL VIA WP: nenhum texto vive neste arquivo — apenas apresentação.
 * Os textos ficam nos templates PHP
 * (`template-parts/lisa-registration-form.php`,
 * `template-parts/lisa-professional-onboarding.php`) via
 * `__()`/`esc_html_e()` com o text domain `lisa-theme`.
 *
 * @package Lisa_Theme
 */

/*
 * `.lisa-form-wrap` é o nome genérico do mesmo layout de cartão usado por
 * qualquer formulário de página única do tema (cadastro, onboarding de
 * professor, etc.). `.lisa-registration-form-wrap` (Sprint 3) permanece como
 * alias — mesma regra, sem duplicar declarações — para não quebrar o
 * template já existente.
 */
.lisa-registration-form-wrap,
.lisa-form-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: 1rem;
	font-family: var(--lisa-font);
	color: var(--lisa-gray-900);
}

.lisa-registration-form-wrap *,
.lisa-registration-form-wrap *::before,
.lisa-registration-form-wrap *::after,
.lisa-form-wrap *,
.lisa-form-wrap *::before,
.lisa-form-wrap *::after {
	box-sizing: border-box;
}

.lisa-form-card {
	background: var(--lisa-white);
	border: 1px solid var(--lisa-gray-300);
	border-radius: var(--lisa-radius);
	box-shadow: var(--lisa-shadow);
	padding: 1.5rem;
}

@media (min-width: 640px) {
	.lisa-form-card {
		padding: 2rem;
	}
}

.lisa-form-heading {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--lisa-primary-darker);
}

.lisa-form-intro {
	margin: 0 0 0.25rem;
	color: var(--lisa-gray-600);
	line-height: 1.5;
}

.lisa-form-required-note {
	margin: 0 0 1.5rem;
	font-size: 0.875rem;
	color: var(--lisa-gray-600);
}

.lisa-form-required {
	color: var(--lisa-danger);
}

/* Resumo de erros — sempre ícone + texto, nunca só cor (WCAG 2.1 AA). */
.lisa-form-errors {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--lisa-white);
	border: 1px solid var(--lisa-danger);
	border-left: 4px solid var(--lisa-danger);
	border-radius: var(--lisa-radius-btn);
}

.lisa-form-errors__title {
	margin: 0;
	font-weight: 600;
	color: var(--lisa-danger);
}

.lisa-form-errors__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.lisa-form-errors__item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	color: var(--lisa-gray-900);
	line-height: 1.4;
}

.lisa-form-errors__icon {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.125rem;
	color: var(--lisa-danger);
}

/* `.lisa-form` é o alias genérico de `.lisa-registration-form` — ver nota acima. */
.lisa-registration-form,
.lisa-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.lisa-form-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 640px) {
	.lisa-form-row {
		grid-template-columns: 1fr 1fr;
	}
}

.lisa-form-group {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.lisa-form-group label {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--lisa-gray-900);
}

.lisa-form-hint {
	font-size: 0.8125rem;
	color: var(--lisa-gray-600);
	line-height: 1.4;
}

.lisa-registration-form input[type="text"],
.lisa-registration-form input[type="email"],
.lisa-registration-form input[type="tel"],
.lisa-registration-form input[type="date"],
.lisa-registration-form input[type="password"],
.lisa-form input[type="text"],
.lisa-form input[type="email"],
.lisa-form input[type="tel"],
.lisa-form input[type="date"],
.lisa-form input[type="password"],
.lisa-form select,
.lisa-form textarea {
	width: 100%;
	min-height: 44px;
	padding: 0.625rem 0.875rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--lisa-gray-900);
	background: var(--lisa-white);
	border: 1px solid var(--lisa-gray-300);
	border-radius: var(--lisa-radius-btn);
}

/* Área de texto (biografia): mesma moldura dos demais campos, mas com altura
   maior e redimensionável só verticalmente (não deixa o layout estourar). */
.lisa-form textarea {
	min-height: 8rem;
	resize: vertical;
	line-height: 1.5;
}

.lisa-registration-form input::placeholder,
.lisa-form input::placeholder,
.lisa-form textarea::placeholder {
	color: var(--lisa-gray-600);
	opacity: 1;
}

/* Foco visível em todo elemento interativo — nunca remover outline sem substituto. */
.lisa-registration-form input:focus-visible,
.lisa-registration-form button:focus-visible,
.lisa-registration-form a:focus-visible,
.lisa-form input:focus-visible,
.lisa-form select:focus-visible,
.lisa-form textarea:focus-visible,
.lisa-form button:focus-visible,
.lisa-form a:focus-visible {
	outline: 3px solid var(--lisa-primary-light);
	outline-offset: 2px;
}

.lisa-form-fieldset {
	margin: 0;
	padding: 1rem 1.125rem;
	border: 1px solid var(--lisa-gray-300);
	border-radius: var(--lisa-radius-btn);
}

.lisa-form-fieldset legend {
	padding: 0 0.375rem;
	font-weight: 600;
	font-size: 0.9375rem;
}

.lisa-form-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0.25rem 0 0.75rem;
}

.lisa-form-radio {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
	cursor: pointer;
}

.lisa-registration-form input[type="radio"],
.lisa-registration-form input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var(--lisa-primary);
	flex: 0 0 auto;
}

.lisa-form-terms {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
}

.lisa-form-terms label {
	line-height: 1.5;
}

.lisa-form-terms a {
	color: var(--lisa-primary);
	text-decoration: underline;
}

.lisa-form-terms a:hover {
	color: var(--lisa-primary-dark);
}

.lisa-form-submit {
	display: inline-block;
	width: 100%;
	min-height: 48px;
	padding: 0.875rem 1.5rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--lisa-white);
	background: var(--lisa-primary);
	border: none;
	border-radius: var(--lisa-radius-btn);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	/* `display:inline-block` + `text-align/text-decoration` acima também
	   permitem usar esta mesma classe num <a> (ex.: CTA de login do estado
	   'login_required' do onboarding de professor), sem alterar a aparência
	   já aprovada do <button> de envio do cadastro (Sprint 3). */
}

.lisa-form-submit:hover {
	background: var(--lisa-primary-dark);
}

@media (min-width: 640px) {
	.lisa-form-submit {
		width: auto;
		align-self: flex-start;
		min-width: 220px;
	}
}

/*
 * Botão secundário (outline azul) — usado pelo botão "Validar" do SIAPE
 * (feedback prévio, não é o submit do formulário). Mesmo raio e altura
 * mínima dos demais controles, para alinhar visualmente ao lado do campo.
 */
.lisa-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.625rem 1.125rem;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--lisa-primary);
	background: var(--lisa-white);
	border: 1px solid var(--lisa-primary);
	border-radius: var(--lisa-radius-btn);
	cursor: pointer;
	white-space: nowrap;
}

.lisa-btn-secondary:hover {
	background: var(--lisa-primary-tint);
}

.lisa-btn-secondary:disabled,
.lisa-btn-secondary[aria-busy="true"] {
	color: var(--lisa-gray-600);
	border-color: var(--lisa-gray-300);
	background: var(--lisa-gray-100);
	cursor: not-allowed;
}

/* Campo de SIAPE + botão "Validar" lado a lado; empilha em telas estreitas. */
.lisa-siape-input-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.lisa-siape-input-group input {
	flex: 1 1 200px;
	min-width: 0;
}

.lisa-siape-input-group .lisa-btn-secondary {
	flex: 0 0 auto;
}

/*
 * Bloco de status da validação instantânea de SIAPE (#lisa-siape-status,
 * role="status" aria-live="polite" no template). Ícone + texto sempre juntos
 * — nunca só cor (WCAG 2.1 AA). Fica oculto quando vazio (estado inicial,
 * antes do primeiro clique em "Validar").
 */
.lisa-siape-status {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.4;
}

.lisa-siape-status:empty {
	display: none;
}

.lisa-siape-status__icon {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.125rem;
}

.lisa-siape-status.is-success {
	color: var(--lisa-success);
}

.lisa-siape-status.is-warning {
	color: var(--lisa-warning);
}

.lisa-siape-status.is-error {
	color: var(--lisa-danger);
}

.lisa-siape-status.is-loading {
	color: var(--lisa-gray-600);
}

/*
 * Aviso informativo (estados 'login_required'/'not_applicable'/
 * 'already_completed' do onboarding de professor). Mesmo padrão visual de
 * `.lisa-form-errors` (ícone + texto, faixa colorida à esquerda), em tom
 * neutro/azul por padrão; `--success` para o caso de conclusão.
 */
.lisa-form-notice {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--lisa-white);
	border: 1px solid var(--lisa-gray-300);
	border-left: 4px solid var(--lisa-primary-light);
	border-radius: var(--lisa-radius-btn);
	color: var(--lisa-gray-900);
	line-height: 1.5;
}

.lisa-form-notice__icon {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
	color: var(--lisa-primary-light);
}

.lisa-form-notice--success {
	border-left-color: var(--lisa-success);
}

.lisa-form-notice--success .lisa-form-notice__icon {
	color: var(--lisa-success);
}

/* =========================================================================
 * Painel "Minhas habilidades" (Sprint 5, RF-PROF-04/05/06):
 * lista de habilidades, <details>/<summary> de edição/portfólio, grade de
 * assets, disponibilidade. Reaproveita .lisa-form-card/.lisa-form-row/
 * .lisa-form-group/.lisa-form-errors*/.lisa-form-submit/.lisa-btn-secondary/
 * .lisa-form-notice* já definidos acima — só o que ainda não existia entra
 * aqui. EDITÁVEL VIA WP: nenhum texto vive neste arquivo, ver
 * template-parts/lisa-skills-manager.php.
 * ========================================================================= */

/* O painel de habilidades é mais largo que os formulários de página única
   (cadastro/onboarding), pois cada habilidade é um cartão com cabeçalho,
   chips, e uma grade de assets — 720px fica apertado para isso a partir de
   telas médias. */
.lisa-skills-wrap {
	max-width: 960px;
}

.lisa-skills-list {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-top: 1.25rem;
}

/* ---- Cartão de habilidade (article) ---- */

.lisa-skill-card {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.lisa-skill-card__header {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

@media (min-width: 640px) {
	.lisa-skill-card__header {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 1rem;
	}
}

.lisa-skill-card__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--lisa-primary-darker);
}

.lisa-skill-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.lisa-skill-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.625rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--lisa-gray-900);
	background: var(--lisa-gray-100);
	border: 1px solid var(--lisa-gray-300);
	border-radius: 999px;
}

/* Chip da área: usa o par -tint/-ink do acento resolvido pelo ancestral com
   data-accent (cards, design v2); sem acento no contexto (perfil, gestor de
   habilidades), cai no azul institucional — visual anterior preservado. */
.lisa-skill-chip--area {
	color: var(--acc-ink, var(--lisa-primary-darker));
	background: var(--acc-tint, var(--lisa-primary-tint));
	border-color: transparent;
}

/* Área SECUNDÁRIA (Sprint 21): mesma família visual da primária, com peso
   menor — contorno em vez de fundo cheio. A distinção NUNCA depende só desse
   contraste: o template acompanha cada chip de um rótulo em
   .screen-reader-text ("Área principal:" / "Área secundária:"), que é o que
   satisfaz WCAG 1.4.1. */
.lisa-skill-chip--area-secondary {
	color: var(--acc-ink, var(--lisa-primary-darker));
	background: transparent;
	border-color: var(--acc-ink, var(--lisa-primary));
}

/* Palavra-chave (hashtag): o '#' já vem no texto do chip (template), então
   aqui é só o tratamento tipográfico mais leve que as tags de tecnologia. */
.lisa-skill-chip--keyword {
	font-weight: 500;
	color: var(--lisa-gray-600);
	background: var(--lisa-white);
}

/* =========================================================================
 * Repetidor de áreas do conhecimento (Sprint 21)
 * ========================================================================= */

.lisa-area-repeater {
	margin: 0;
	padding: 1rem;
	border: 1px solid var(--lisa-gray-300);
	border-radius: var(--lisa-radius-btn);
}

.lisa-form-legend {
	padding: 0 0.375rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--lisa-gray-900);
}

.lisa-area-repeater__primary {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin-bottom: 0.875rem;
}

.lisa-area-repeater__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0 0 0.875rem;
	padding: 0;
	list-style: none;
}

.lisa-area-repeater__row {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.lisa-area-repeater__control {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.lisa-area-repeater__control select {
	flex: 1 1 auto;
	min-width: 0;
}

/* Os dois controles que SÓ funcionam com JavaScript ficam ocultos até que
   assets/js/lisa-area-repeater.js ligue `is-enhanced` no fieldset. Sem o
   script, o campo continua utilizável (linha vazia renderizada pelo servidor
   + esvaziar o <select> para remover) e nenhum botão inerte aparece na tela
   — mesma regra do menu mobile e do banner de consentimento. */
.lisa-area-repeater__add,
.lisa-area-repeater__remove {
	display: none;
}

.lisa-area-repeater.is-enhanced .lisa-area-repeater__add {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.lisa-area-repeater.is-enhanced .lisa-area-repeater__remove {
	display: inline-flex;
	flex: 0 0 auto;
}

.lisa-area-repeater__limit {
	margin-top: 0.5rem;
}

.lisa-skill-card__excerpt {
	margin: 0;
	color: var(--lisa-gray-600);
	line-height: 1.5;
}

/* ---- <details>/<summary> (edição e portfólio) — nativos, sem JS ---- */

.lisa-skill-new,
.lisa-skill-details {
	border: 1px solid var(--lisa-gray-300);
	border-radius: var(--lisa-radius-btn);
	overflow: hidden;
}

.lisa-skill-summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 1.125rem;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--lisa-primary-darker);
	background: var(--lisa-gray-100);
	cursor: pointer;
	list-style: none;
}

/* Remove o marcador nativo (triângulo) em navegadores WebKit/Blink; o
   indicador visual próprio (span.lisa-skill-summary__marker) substitui. */
.lisa-skill-summary::-webkit-details-marker {
	display: none;
}

.lisa-skill-summary:hover {
	background: var(--lisa-primary-tint);
}

.lisa-skill-summary:focus-visible {
	outline: 3px solid var(--lisa-primary-light);
	outline-offset: -3px;
}

/* Indicador de aberto/fechado: elemento próprio (não ::content de CSS), para
   garantir que é sempre tratado como decorativo (aria-hidden no HTML) e
   nunca lido por leitor de tela como texto — <summary> já anuncia
   "expandido/recolhido" nativamente via aria-expanded implícito do
   navegador. */
.lisa-skill-summary__marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	flex: 0 0 auto;
	font-size: 1rem;
	transition: transform 0.15s ease;
}

details[open] > .lisa-skill-summary .lisa-skill-summary__marker {
	transform: rotate(90deg);
}

.lisa-skill-new__body,
.lisa-skill-details__body {
	padding: 1.125rem;
	border-top: 1px solid var(--lisa-gray-300);
	background: var(--lisa-white);
}

.lisa-skill-details__body {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* .lisa-skill-new__body já é um .lisa-form-card, então some com a própria
   borda/sombra do <details> para não duplicar moldura. */
.lisa-skill-new__body.lisa-form-card {
	border: none;
	border-radius: 0;
	box-shadow: none;
}

/* ---- Grade de assets do portfólio ---- */

.lisa-skill-assets-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 0.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lisa-skill-asset {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.625rem;
	background: var(--lisa-gray-100);
	border: 1px solid var(--lisa-gray-300);
	border-radius: var(--lisa-radius-btn);
}

.lisa-skill-asset__preview {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--lisa-white);
	border: 1px solid var(--lisa-gray-300);
	border-radius: 6px;
}

.lisa-skill-asset__thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lisa-skill-asset__doc {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	width: 100%;
	height: 100%;
	color: var(--lisa-primary);
	text-decoration: none;
	font-size: 0.8125rem;
	font-weight: 600;
}

.lisa-skill-asset__doc:hover {
	color: var(--lisa-primary-dark);
	text-decoration: underline;
}

.lisa-skill-asset__doc-icon {
	width: 1.75rem;
	height: 1.75rem;
}

.lisa-skill-asset__caption {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--lisa-gray-600);
	line-height: 1.4;
	overflow-wrap: break-word;
}

/* Cada mini-ação (subir/descer/remover) é um <form> próprio com um único
   botão (sem JS, ver template) — o próprio <form> vira o item do flex, sem
   precisar de `display: contents` (mais simples e sem pegadinhas de a11y
   com formulários). */
.lisa-skill-asset__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-top: auto;
}

.lisa-skill-asset__actions form {
	margin: 0;
}

/* Botões pequenos de reordenar/remover asset — alvo de toque generoso
   (36px) mesmo em layout compacto, foco visível igual aos demais controles. */
.lisa-btn-tiny {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 36px;
	padding: 0.25rem;
	font-size: 1rem;
	line-height: 1;
	color: var(--lisa-gray-900);
	background: var(--lisa-white);
	border: 1px solid var(--lisa-gray-300);
	border-radius: var(--lisa-radius-btn);
	cursor: pointer;
}

.lisa-btn-tiny:hover {
	background: var(--lisa-gray-100);
}

.lisa-btn-tiny:focus-visible {
	outline: 3px solid var(--lisa-primary-light);
	outline-offset: 2px;
}

.lisa-btn-tiny--danger {
	color: var(--lisa-danger);
	border-color: var(--lisa-danger);
}

.lisa-btn-tiny--danger:hover {
	background: #fbeceb;
}

.lisa-skill-asset-upload,
.lisa-skill-asset-link {
	padding-top: 1.25rem;
	border-top: 1px dashed var(--lisa-gray-300);
}

/* Cartão de link externo na grade do gestor (Sprint 21): reaproveita todo o
   .lisa-skill-asset__doc (mesmo tamanho, mesmo alinhamento) e só troca o
   tratamento do texto, que aqui é o host do endereço e pode ser longo. */
.lisa-skill-asset__link span {
	max-width: 100%;
	padding: 0 0.25rem;
	overflow-wrap: anywhere;
	text-align: center;
}

/* ---- Excluir habilidade ---- */

.lisa-skill-card__delete {
	display: flex;
	justify-content: flex-end;
}

.lisa-btn-danger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.625rem 1.125rem;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--lisa-danger);
	background: var(--lisa-white);
	border: 1px solid var(--lisa-danger);
	border-radius: var(--lisa-radius-btn);
	cursor: pointer;
}

.lisa-btn-danger:hover {
	color: var(--lisa-white);
	background: var(--lisa-danger);
}

.lisa-btn-danger:focus-visible {
	outline: 3px solid var(--lisa-primary-light);
	outline-offset: 2px;
}

/* ---- Disponibilidade (toggle AJAX) ---- */

.lisa-availability-control {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.875rem;
	margin-top: 0.5rem;
}

/* Badge de estado atual: sempre ícone + texto, nunca só cor (WCAG 2.1 AA).
   Visível ANTES de qualquer clique — reflete $availability vindo do
   servidor, nunca um estado assumido pelo JS. */
.lisa-availability-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.5rem 0.875rem;
	font-weight: 600;
	font-size: 0.9375rem;
	border-radius: 999px;
	border: 1px solid transparent;
}

.lisa-availability-badge__icon {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
}

.lisa-availability-badge--enabled {
	color: var(--lisa-success);
	background: #e8f5ed;
	border-color: var(--lisa-success);
}

.lisa-availability-badge--disabled {
	color: var(--lisa-gray-600);
	background: var(--lisa-gray-100);
	border-color: var(--lisa-gray-300);
}

.lisa-availability-error {
	margin-top: 0.625rem;
	font-size: 0.875rem;
	color: var(--lisa-danger);
	line-height: 1.4;
}

.lisa-availability-error:empty {
	display: none;
}

/* =========================================================================
 * Editor de foto de perfil (.lisa-avatar-editor*) — Sprint 15, movido de
 * lisa-demands.css na Sprint 16: usado no /painel/ (demandantes) e na página
 * "Editar perfil profissional" (professores), que só carrega este arquivo.
 * ========================================================================= */

.lisa-avatar-editor {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	flex-wrap: wrap;
}

/* Moldura circular com o botão-câmera sobreposto — padrão consagrado de foto
   de perfil (a câmera fica no canto inferior direito do círculo). */
.lisa-avatar-editor__frame {
	position: relative;
	flex: 0 0 auto;
}

.lisa-avatar-editor__image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	border: 3px solid var(--lisa-primary-tint);
	background: var(--lisa-primary-tint);
	overflow: hidden;
}

.lisa-avatar-editor__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.lisa-avatar-editor__initials {
	font-family: var(--lisa-font-display);
	font-size: var(--lisa-text-2xl);
	font-weight: 800;
	color: var(--lisa-primary);
	letter-spacing: 0.02em;
}

.lisa-avatar-editor__camera {
	position: absolute;
	right: -2px;
	bottom: -2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--lisa-primary);
	color: var(--lisa-white);
	border: 3px solid var(--lisa-white);
	border-radius: 50%;
	cursor: pointer;
	transition: background var(--lisa-dur-fast) ease;
}

.lisa-avatar-editor__camera:hover {
	background: var(--lisa-primary-dark);
}

/* O input de arquivo fica visualmente oculto MAS focável: a <label>-câmera é
   o alvo do clique, e o foco de teclado no input mostra o anel (regra
   :focus-visible abaixo) — nunca `display:none`, que o tiraria da ordem de
   tabulação. */
.lisa-avatar-editor__file {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.lisa-avatar-editor__file:focus-visible + .lisa-avatar-editor__actions,
.lisa-avatar-editor__camera:focus-within {
	outline: 3px solid var(--lisa-primary-light);
	outline-offset: 2px;
}

.lisa-avatar-editor__info {
	flex: 1 1 260px;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.lisa-avatar-editor__name {
	margin: 0;
	font-family: var(--lisa-font-display);
	font-size: var(--lisa-text-xl);
	font-weight: 800;
	color: var(--lisa-navy);
}

.lisa-avatar-editor__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin: 0;
}

.lisa-avatar-editor__remove {
	padding: 0;
	background: none;
	border: 0;
	color: var(--lisa-gray-600);
	font-family: inherit;
	font-size: 0.9375rem;
	text-decoration: underline;
	cursor: pointer;
}

.lisa-avatar-editor__remove:hover {
	color: var(--lisa-danger);
}

.lisa-avatar-editor__remove:focus-visible {
	outline: 3px solid var(--lisa-primary-light);
	outline-offset: 2px;
}

.lisa-avatar-editor__hint,
.lisa-avatar-editor__link {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--lisa-gray-600);
}

.lisa-avatar-editor__status:empty {
	display: none;
}

.lisa-avatar-editor__status {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--lisa-gray-600);
}

.lisa-avatar-editor__status.is-error {
	color: var(--lisa-danger);
	font-weight: 600;
}

/* Com JS, escolher o arquivo já envia: o botão de submit some (via JS) e a
   câmera é a única affordance. [hidden] em <button> perde para o
   display:inline-flex de .lisa-btn-secondary sem esta regra explícita. */
.lisa-avatar-editor__actions .lisa-btn-secondary[hidden] {
	display: none;
}

.lisa-avatar-editor.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.lisa-avatar-editor__camera {
		transition: none;
	}
}

/* =========================================================================
 * Telefone internacional (intl-tel-input) — Sprint 16.
 *
 * Ajusta o componente auto-hospedado (assets/vendor/intl-tel-input) aos
 * tokens do design system: mesma moldura, altura e foco dos demais campos.
 * As custom properties --iti-* são a API oficial de tema da lib.
 * ========================================================================= */

.iti {
	--iti-border-color: var(--lisa-gray-300);
	--iti-dialcode-color: var(--lisa-gray-600);
	--iti-arrow-color: var(--lisa-gray-600);
	--iti-hover-color: var(--lisa-gray-100);
	--iti-dropdown-bg: var(--lisa-white);
	width: 100%;
}

/* O input dentro do componente herda a moldura dos campos do formulário; a
   borda esquerda some porque o seletor de país encosta nele. */
.lisa-form .iti input[type="tel"],
.lisa-registration-form .iti input[type="tel"] {
	width: 100%;
}

/* Bloco do país (bandeira + DDI): altura idêntica ao input (44px mínimos). */
.iti__selected-country {
	min-height: 44px;
	border-radius: var(--lisa-radius-btn) 0 0 var(--lisa-radius-btn);
}

.iti__selected-country:focus-visible {
	outline: 3px solid var(--lisa-primary-light);
	outline-offset: -2px;
}

/* Lista de países: tipografia e realce do item ativo no padrão do portal. */
.iti__country-list {
	font-size: 0.9375rem;
	border-radius: var(--lisa-radius-btn);
	box-shadow: var(--lisa-shadow-md);
}

.iti__country.iti__highlight,
.iti__country[aria-selected="true"] {
	background: var(--lisa-primary-tint);
}

.iti__search-input {
	min-height: 40px;
	padding: 0.5rem 0.75rem;
	font-family: inherit;
	font-size: 0.9375rem;
	border-bottom: 1px solid var(--lisa-gray-300);
}

/* Card de introdução da página "Editar perfil profissional" (Sprint 16):
   sem o <h2> duplicado, resta só o parágrafo — o card encolhe para a altura
   do texto e o mantém centrado verticalmente, sem a sobra que ficava no
   lugar do título removido. */
.lisa-skills-intro {
	display: flex;
	align-items: center;
	min-height: 0;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

.lisa-skills-intro .lisa-form-intro {
	margin: 0;
}
/* ============================================================
   Toggle de visualização de senha (cadastro)
   template-parts/lisa-registration-form.php + lisa-password-toggle.js.
   O botão nasce com [hidden] e só aparece com JS (enhancement progressivo).
   ============================================================ */

.lisa-password-field {
	position: relative;
}

/* Reserva espaço à direita para o botão não cobrir o fim do texto digitado.
   Mesma especificidade (e ordem posterior) da regra base de inputs acima —
   cobre também o estado type="text" após a alternância pelo JS. */
.lisa-form .lisa-password-field input[type="password"],
.lisa-form .lisa-password-field input[type="text"] {
	padding-right: 3rem;
}

.lisa-password-toggle {
	position: absolute;
	top: 50%;
	right: 0.375rem;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: var(--lisa-radius-btn);
	background: transparent;
	color: var(--lisa-gray-600);
	cursor: pointer;
}

.lisa-password-toggle:hover {
	color: var(--lisa-primary);
}

/* [hidden] em <button> perde para o display:inline-flex acima sem esta
   regra explícita — sem JS, o botão precisa sumir de verdade. */
.lisa-password-toggle[hidden] {
	display: none;
}

.lisa-password-toggle__icon {
	width: 1.25rem;
	height: 1.25rem;
}

.lisa-password-toggle__icon[hidden] {
	display: none;
}

/* ============================================================
   Modal de confirmação/erro do cadastro
   template-parts/lisa-registration-form.php + lisa-registration-modal.js.
   <dialog> nativo: backdrop, foco preso e Esc são do navegador — aqui só a
   aparência. Fechado (sem JS), display:none é o padrão do elemento.
   ============================================================ */

.lisa-dialog {
	max-width: 26rem;
	width: calc(100% - 2.5rem);
	padding: 1.75rem 1.75rem 1.5rem;
	border: 0;
	border-top: 4px solid var(--lisa-primary);
	border-radius: var(--lisa-radius);
	background: var(--lisa-white);
	color: var(--lisa-gray-900);
	box-shadow: var(--lisa-shadow);
	text-align: center;
}

.lisa-dialog--success {
	border-top-color: var(--lisa-success);
}

.lisa-dialog::backdrop {
	background: rgba(0, 31, 63, 0.55);
}

.lisa-dialog__icon {
	width: 2.5rem;
	height: 2.5rem;
	margin: 0 auto 0.75rem;
	display: block;
}

.lisa-dialog--success .lisa-dialog__icon {
	color: var(--lisa-success);
}

.lisa-dialog__title {
	margin: 0 0 0.625rem;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--lisa-gray-900);
}

.lisa-dialog__text {
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--lisa-gray-600);
}

.lisa-dialog__actions {
	margin: 0;
}

.lisa-dialog__close {
	width: 100%;
}

/* Foco visível também dentro do modal (mesma regra global do formulário,
   que não alcança o <dialog> por ele ficar fora de .lisa-form). */
.lisa-dialog button:focus-visible {
	outline: 3px solid var(--lisa-primary-light);
	outline-offset: 2px;
}

/* =========================================================================
 * Tela de login /entrar/ (Sprint 22, template-parts/lisa-login-form.php).
 * Reaproveita .lisa-form-wrap/.lisa-form-card/.lisa-form/.lisa-form-group/
 * .lisa-password-field/.lisa-form-terms/.lisa-form-submit/.lisa-form-notice*
 * — só o que ainda não existia entra aqui. EDITÁVEL VIA WP: nenhum texto
 * vive neste arquivo.
 * ========================================================================= */

.lisa-login-wrap {
	max-width: 480px;
}

.lisa-login-form__options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.625rem 1rem;
}

.lisa-login-form__remember {
	align-items: center;
}

.lisa-login-form__lost,
.lisa-login-form__register a {
	color: var(--lisa-primary);
	text-decoration: underline;
	font-weight: 600;
}

.lisa-login-form__lost:hover,
.lisa-login-form__register a:hover {
	color: var(--lisa-primary-dark);
}

.lisa-login-form__register {
	margin: 1.5rem 0 0;
	text-align: center;
	color: var(--lisa-gray-600);
	line-height: 1.5;
}

/* Link "Já tem conta? Entrar" no rodapé do cadastro (Sprint 22). */
.lisa-form-switch {
	margin: 1.25rem 0 0;
	text-align: center;
	color: var(--lisa-gray-600);
	line-height: 1.5;
}

.lisa-form-switch a {
	color: var(--lisa-primary);
	text-decoration: underline;
	font-weight: 600;
}

.lisa-form-switch a:hover {
	color: var(--lisa-primary-dark);
}