/*
 * Formulario público «Aportar una investigación» y el CTA de Ciencia
 * Panameña que enlaza a él.
 *
 * Se carga solo en la página con esta plantilla (ver `apmv_tema_estilos()`
 * en functions.php): el resto del sitio no paga el coste de una hoja que no
 * usa.
 *
 * Reutiliza las fichas del sistema visual (`tokens.css`) y los estilos base
 * de `.apmv-campo`, `.apmv-boton` y `.apmv-aviso` ya definidos en `base.css`
 * — aquí solo lo que es propio de este formulario: el indicador de progreso,
 * los pasos, las casillas de taxonomía y el resumen del último paso.
 */

/* =========================================================================
   CTA de Ciencia Panameña
   ========================================================================= */

.apmv-cta-ciencia-panamena {
	margin-top: var(--apmv-e7);
	padding: var(--apmv-e7) var(--apmv-e5);
	background: var(--apmv-verde-tinta);
	color: var(--apmv-blanco);
	text-align: center;
}

.apmv-cta-ciencia-panamena__marca {
	display: inline-flex;
	color: var(--apmv-dorado);
}

.apmv-cta-ciencia-panamena__marca svg {
	width: 2.5rem;
	height: 2.5rem;
}

.apmv-cta-ciencia-panamena__titulo {
	margin: var(--apmv-e3) auto 0;
	max-width: var(--apmv-medida-estrecha);
	color: var(--apmv-blanco);
	font-family: var(--apmv-serif);
	font-size: var(--apmv-txt-l);
	line-height: var(--apmv-interlinea-titular);
}

.apmv-cta-ciencia-panamena__texto {
	margin: var(--apmv-e3) auto 0;
	max-width: var(--apmv-ancho-editorial);
	color: var(--apmv-verde-niebla);
}

.apmv-cta-ciencia-panamena__acciones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--apmv-e3);
	margin-top: var(--apmv-e5);
}

.apmv-cta-ciencia-panamena .apmv-boton--secundario {
	border-color: var(--apmv-blanco);
	color: var(--apmv-blanco);
}

.apmv-cta-ciencia-panamena .apmv-boton--secundario:hover {
	background: var(--apmv-blanco);
	color: var(--apmv-verde-tinta);
}

/* =========================================================================
   Criterios, antes del formulario
   ========================================================================= */

.apmv-recurso-criterios {
	max-width: var(--apmv-ancho-editorial);
	margin-block: var(--apmv-e6);
	padding: var(--apmv-e5);
	background: var(--apmv-verde-niebla);
	border-left: var(--apmv-filete-marca) solid var(--apmv-verde);
	scroll-margin-top: var(--apmv-e6);
}

.apmv-recurso-criterios h2 {
	margin-top: 0;
	font-size: var(--apmv-txt-m);
}

.apmv-recurso-criterios ul {
	margin: 0;
	padding-left: var(--apmv-e5);
	color: var(--apmv-gris-lectura);
}

.apmv-recurso-criterios li {
	margin-bottom: var(--apmv-e2);
}

/* =========================================================================
   Indicador de progreso — 01 Autor · 02 Publicación · 03 Clasificación · 04 Confirmación
   ========================================================================= */

.apmv-recurso-formulario {
	max-width: var(--apmv-ancho-editorial);
}

.apmv-recurso-progreso {
	display: flex;
	flex-wrap: wrap;
	gap: var(--apmv-e2) var(--apmv-e5);
	margin: 0 0 var(--apmv-e6);
	padding: 0;
	list-style: none;
	border-bottom: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
	padding-bottom: var(--apmv-e4);
}

.apmv-recurso-progreso__item {
	display: flex;
	align-items: center;
	gap: var(--apmv-e2);
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-s);
}

.apmv-recurso-progreso__numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border: var(--apmv-filete-fino) solid var(--apmv-gris-lectura);
	border-radius: 50%;
	font-family: var(--apmv-estrecha);
	font-weight: 700;
}

.apmv-recurso-progreso__item.is-activo,
.apmv-recurso-progreso__item.is-completo {
	color: var(--apmv-verde-tinta);
}

.apmv-recurso-progreso__item.is-activo .apmv-recurso-progreso__numero,
.apmv-recurso-progreso__item.is-completo .apmv-recurso-progreso__numero {
	/*
	 * `--apmv-verde` falla AA para texto normal (3,94:1, ver tokens.css); en un
	 * círculo de 28px con la cifra del paso, eso es exactamente texto normal,
	 * no una superficie ni un titular grande. `--apmv-verde-profundo` sí pasa
	 * (6,78:1) y es el verde correcto para esta escala.
	 */
	border-color: var(--apmv-verde-profundo);
	background: var(--apmv-verde-profundo);
	color: var(--apmv-blanco);
}

/* Sin JavaScript, los cuatro pasos son secciones seguidas de una sola página
   larga: no hay indicador de "paso activo" que anunciar, así que la lista
   de progreso es puramente informativa cuando no hay guion ejecutándose.  */
.apmv-recurso-paso {
	margin: 0 0 var(--apmv-e7);
	padding: 0;
	border: 0;
}

.apmv-recurso-paso__titulo {
	padding: 0;
	font-family: var(--apmv-serif);
	font-size: var(--apmv-txt-l);
}

.apmv-recurso-paso__resumen {
	margin: var(--apmv-e2) 0 var(--apmv-e5);
	color: var(--apmv-gris-lectura);
}

/* =========================================================================
   Casillas de taxonomía (áreas de acción)
   ========================================================================= */

.apmv-recurso-casillas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--apmv-e2) var(--apmv-e4);
}

.apmv-recurso-casillas__opcion {
	display: flex;
	align-items: center;
	gap: var(--apmv-e2);
	font-size: var(--apmv-txt-s);
	font-weight: 400;
}

.apmv-recurso-casillas__opcion input {
	width: 1.1rem;
	height: 1.1rem;
}

/* =========================================================================
   Autores — filas de Nombre + ORCID, mejora progresiva de la <textarea>
   ========================================================================= */

.apmv-recurso-autores {
	margin-top: var(--apmv-e3);
}

.apmv-recurso-autores__filas {
	display: flex;
	flex-direction: column;
	gap: var(--apmv-e4);
}

.apmv-recurso-autores__fila {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--apmv-e3);
	margin: 0;
	padding: var(--apmv-e4);
	border: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
	border-radius: var(--apmv-radio);
	background: var(--apmv-papel-alterno);
}

.apmv-recurso-autores__numero {
	padding: 0 var(--apmv-e2);
	color: var(--apmv-verde-tinta);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-s);
	font-weight: 700;
}

.apmv-recurso-autores__campo {
	margin: 0;
}

.apmv-recurso-autores__quitar {
	position: absolute;
	top: var(--apmv-e2);
	right: var(--apmv-e2);
	width: 2rem;
	height: 2rem;
	border: var(--apmv-filete-fino) solid var(--apmv-gris-lectura);
	border-radius: 50%;
	background: var(--apmv-papel);
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-m);
	line-height: 1;
	cursor: pointer;
}

.apmv-recurso-autores__quitar:hover,
.apmv-recurso-autores__quitar:focus-visible {
	border-color: var(--apmv-alerta);
	color: var(--apmv-alerta);
}

.apmv-recurso-autores__agregar {
	margin-top: var(--apmv-e4);
}

/*
 * Mismo defecto que ya se documentó para los botones de navegación:
 * `.apmv-campo__ayuda { display: block }` (autor) empata en especificidad
 * con `[hidden] { display: none }` (agente de usuario) y gana, así que
 * `mejorarAutores()` ocultando el texto «Uno por línea…» con
 * `ayudaOriginal.hidden = true` no se veía —encontrado mirando la propia
 * captura del paso 2, con el texto de la `<textarea>` aún visible encima del
 * repetidor que lo sustituye—.
 */
[data-apmv-recurso-campo="autores"] .apmv-campo__ayuda[hidden] {
	display: none;
}

@media (min-width: 40rem) {

	.apmv-recurso-autores__fila {
		grid-template-columns: 2fr 1fr;
		padding-right: var(--apmv-e7);
	}

	.apmv-recurso-autores__numero {
		grid-column: 1 / -1;
	}
}

/* =========================================================================
   DOI: botón «Buscar datos de la publicación» y su estado
   ========================================================================= */

.apmv-recurso-doi__boton {
	margin-top: var(--apmv-e3);
}

/*
 * Mismo defecto ya documentado para los botones de navegación y la ayuda de
 * autores: `.apmv-boton { display: inline-flex }` empata en especificidad
 * con `[hidden] { display: none }` del navegador y gana, así que este botón
 * seguía viéndose con el atributo `hidden` puesto — encontrado ejecutando
 * las pruebas e2e sin JavaScript, no leyendo el CSS.
 */
.apmv-recurso-doi__boton[hidden] {
	display: none;
}

.apmv-recurso-doi__estado {
	margin: var(--apmv-e2) 0 0;
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-xs);
}

.apmv-recurso-doi__estado:empty {
	display: none;
}

/* =========================================================================
   Radios — «¿Tienes una copia que puedes compartir públicamente?»
   ========================================================================= */

.apmv-campo--radio {
	margin: 0 0 var(--apmv-e5);
	padding: 0;
	border: 0;
}

.apmv-recurso-radios {
	display: flex;
	flex-wrap: wrap;
	gap: var(--apmv-e4);
	margin-top: var(--apmv-e2);
}

.apmv-recurso-radios__opcion {
	display: flex;
	align-items: center;
	gap: var(--apmv-e2);
	font-weight: 400;
}

.apmv-recurso-radios__opcion input {
	width: 1.1rem;
	height: 1.1rem;
}

/* Sin JavaScript, los cuatro campos del PDF quedan todos a la vista: la
   opción «No» no oculta nada por su cuenta. Con `formulario-recurso.js`,
   `mejorarBloquePdf()` les añade `hidden` mientras esté en «No». */
[data-apmv-recurso-pdf-bloque][hidden] {
	display: none;
}

/* =========================================================================
   Número y archivo — controles que base.css no cubre todavía
   ========================================================================= */

.apmv-campo input[type="number"],
.apmv-campo input[type="file"] {
	width: 100%;
	padding: var(--apmv-e3);
	border: var(--apmv-filete-fino) solid var(--apmv-gris-lectura);
	border-radius: var(--apmv-radio);
	background: var(--apmv-papel);
	color: var(--apmv-grafito);
	font-family: inherit;
	font-size: var(--apmv-txt-base);
}

.apmv-campo input[type="file"] {
	padding: var(--apmv-e2);
}

/* =========================================================================
   Resumen del paso 4 — mejora progresiva, escrita por formulario-recurso.js
   ========================================================================= */

.apmv-recurso-resumen {
	margin-bottom: var(--apmv-e5);
}

.apmv-recurso-resumen:empty {
	display: none;
}

.apmv-recurso-resumen dl {
	display: grid;
	grid-template-columns: minmax(10rem, 16rem) 1fr;
	gap: var(--apmv-e2) var(--apmv-e4);
	margin: 0;
	padding: var(--apmv-e5);
	background: var(--apmv-papel-alterno);
	border: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
}

.apmv-recurso-resumen dt {
	font-weight: 600;
}

.apmv-recurso-resumen dd {
	margin: 0;
	color: var(--apmv-gris-lectura);
	overflow-wrap: anywhere;
}

/* =========================================================================
   Navegación entre pasos
   ========================================================================= */

.apmv-recurso-navegacion {
	display: flex;
	flex-wrap: wrap;
	gap: var(--apmv-e3);
	margin-top: var(--apmv-e6);
}

/*
 * `.apmv-boton` fija `display: inline-flex` con la misma especificidad que la
 * hoja de estilos de usuario le da a `[hidden] { display: none }`: sin esto,
 * un botón oculto por JavaScript (`boton.hidden = true`) se sigue viendo,
 * porque una regla de autor con igual especificidad gana siempre a la del
 * navegador. Encontrado mirando la propia captura del formulario.
 */
.apmv-recurso-navegacion [hidden] {
	display: none;
}

/* Sin JavaScript, "Atrás" y "Continuar" quedan `hidden` (ver el marcado): el
   único control visible es enviar, y los cuatro `<fieldset>` ya están todos
   a la vista. Con JavaScript, `formulario-recurso.js` les quita `hidden`. */

/* =========================================================================
   Ficha del recurso — disclaimer editorial
   ========================================================================= */

.apmv-ficha__disclaimer {
	max-width: var(--apmv-ancho-editorial);
	margin-top: var(--apmv-e5);
	padding: var(--apmv-e4);
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-s);
	border-top: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
}

@media (min-width: 40rem) {

	.apmv-recurso-progreso {
		flex-wrap: nowrap;
		justify-content: space-between;
	}
}

/* ---------------------------------------------------------------------------
   Campo al que se acaba de saltar tras un error
   --------------------------------------------------------------------------

   Cuando el envío se rechaza, el guion abre el paso del primer campo con
   error, desplaza hasta él y le da el foco. Este resalte temporal es el
   remate visual de ese salto: ayuda al ojo a encontrar dónde ha aterrizado.

   Es un refuerzo, nunca el único aviso. El error se anuncia además con texto
   (`.apmv-campo__error`), con `aria-invalid` y con `aria-describedby`, que no
   dependen de ver el color. */
.apmv-campo--resaltado {
	border-radius: var(--apmv-radio);
	outline: var(--apmv-filete-marca) solid var(--apmv-alerta);
	outline-offset: var(--apmv-e2);
}

@media (prefers-reduced-motion: no-preference) {
	.apmv-campo--resaltado {
		transition: outline-color 200ms ease-out;
	}
}

/* ---------------------------------------------------------------------------
   Valores largos plegados en el paso de revisión
   --------------------------------------------------------------------------

   El resumen previo al envío sirve para comprobar de un vistazo que los datos
   son los correctos. Un resumen de publicación largo, desplegado por defecto,
   empujaba el resto fuera de la pantalla del móvil. Se pliega: sigue entero,
   a un toque.

   `details`/`summary` lo resuelve el navegador —teclado, foco y estado
   expandido anunciado—, sin ARIA que mantener. */
.apmv-resumen__plegado > summary {
	cursor: pointer;
	color: var(--apmv-gris-lectura);
}

.apmv-resumen__plegado > summary:focus-visible {
	outline: var(--apmv-foco-grosor) solid var(--apmv-foco-color);
	outline-offset: 2px;
}

.apmv-resumen__ver {
	color: var(--apmv-verde-profundo);
	font-weight: 600;
	text-decoration: underline;
	white-space: nowrap;
}

.apmv-resumen__plegado[open] > summary .apmv-resumen__ver {
	display: none;
}

.apmv-resumen__plegado > p {
	margin: var(--apmv-e2) 0 0;
}