/**
 * Estilos de la intranet y del validador público.
 *
 * NO se declara ni un solo color literal salvo los neutros de sombra: todo sale
 * de las variables que WordPress genera a partir de la paleta de theme.json del
 * tema `proamsa`. Así, si la marca cambia de verde, este plugin cambia con ella
 * sin tocar una línea. El `var(..., #549000)` de respaldo cubre el caso de que
 * el plugin acabe activo bajo un tema que no declare esa paleta.
 */

.proamsa-intranet,
.proamsa-validador {
	--proamsa-int-marino: var( --wp--preset--color--contraste, #00122A );
	--proamsa-int-verde: var( --wp--preset--color--primario, #549000 );
	--proamsa-int-lima: var( --wp--preset--color--acento, #A8D24A );
	--proamsa-int-niebla: var( --wp--preset--color--base-suave, #F3F7EE );
	--proamsa-int-gris: var( --wp--preset--color--neutro, #55606E );
	--proamsa-int-alerta: var( --wp--preset--color--alerta, #B3261E );
	--proamsa-int-borde: rgba( 0, 18, 42, 0.12 );
	--proamsa-int-radio: 14px;

	margin-block: clamp( 1.5rem, 4vw, 3rem );
	color: var( --proamsa-int-marino );
}

/* --- Piezas comunes ---------------------------------------------------- */

.proamsa-intranet h2,
.proamsa-validador h2 {
	margin-block: 0 0.5rem;
	font-size: clamp( 1.35rem, 3vw, 1.75rem );
	line-height: 1.2;
}

.proamsa-intranet h3,
.proamsa-validador h3 {
	margin-block: 0 0.5rem;
	font-size: 1.1rem;
}

/*
 * box-sizing explícito en TODO lo que puede recibir width: 100%.
 * WordPress no trae un reset universal, así que sin esto el relleno lateral se
 * suma al 100 % y el control se sale de su contenedor. Ya mordió al botón de
 * WhatsApp y a .proamsa-btn del tema.
 */
.proamsa-campo__control,
.proamsa-btn {
	box-sizing: border-box;
}

.proamsa-campo {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-block: 0 1rem;
}

.proamsa-campo label {
	font-weight: 600;
	font-size: 0.95rem;
}

.proamsa-campo__pista {
	color: var( --proamsa-int-gris );
	font-weight: 400;
	font-size: 0.82rem;
}

.proamsa-campo__control {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var( --proamsa-int-borde );
	border-radius: 10px;
	background: #FFFFFF;
	color: inherit;
	font-size: 1rem;
	font-family: inherit;
}

.proamsa-campo__control:focus {
	outline: 3px solid var( --proamsa-int-lima );
	outline-offset: 1px;
	border-color: var( --proamsa-int-verde );
}

.proamsa-campo__control--corto {
	max-width: 8rem;
}

.proamsa-campo__control--codigo {
	font-size: 1.15rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
}

.proamsa-campo--casilla {
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
}

.proamsa-campo--casilla label {
	font-weight: 400;
}

/*
 * Campo trampa del anti-robots.
 *
 * NO se usa display:none ni visibility:hidden: los robots más elaborados leen
 * los estilos y saltan lo que está oculto de forma evidente. Se saca del flujo
 * con posición absoluta y se deja fuera de la pantalla, que para el robot es
 * un campo de texto normal y para la persona no existe.
 */
.proamsa-captcha__trampa {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.proamsa-formulario__acciones {
	margin-block: 1.25rem 0;
}

/*
 * «Entrar» a la derecha, mismo criterio de usabilidad que las acciones
 * principales del panel: la vista se lee de izquierda a derecha y el botón
 * que cierra el formulario cae al final, que es donde se busca.
 *
 * ACOTADO AL ACCESO, NO A `.proamsa-formulario__acciones` EN GENERAL: esa
 * clase la comparten «Comprobar» y «Obtener el documento» de la página
 * PÚBLICA de validación, y ahí el botón flotante de WhatsApp está fijo en
 * esa misma esquina inferior derecha — alinearlos a la derecha los mete
 * justo debajo y se vuelven difíciles de pulsar. La intranet no tiene ese
 * botón (ver proamsa_boton_whatsapp_flotante() en el tema), así que el
 * problema no existe aquí.
 */
.proamsa-intranet--acceso .proamsa-formulario__acciones {
	display: flex;
	justify-content: flex-end;
}

.proamsa-formulario__pie {
	margin-block: 1rem 0;
	font-size: 0.9rem;
}

.proamsa-btn {
	display: inline-block;
	padding: 0.75rem 1.4rem;
	border: 1px solid var( --proamsa-int-borde );
	border-radius: 999px;
	background: #FFFFFF;
	color: var( --proamsa-int-marino );
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s ease;
}

.proamsa-btn:hover,
.proamsa-btn:focus-visible {
	/*
	 * filter y no background-color: los presets de color de WordPress se
	 * imprimen con !important y una regla de fondo perdería la cascada.
	 * brightness() no compite con ella.
	 */
	filter: brightness( 0.94 );
	transform: translateY( -1px );
}

.proamsa-btn--primario {
	border-color: transparent;
	background: var( --proamsa-int-verde );
	color: #FFFFFF;
}

.proamsa-aviso {
	margin-block: 0 1.25rem;
	padding: 0.9rem 1.1rem;
	border-left: 4px solid var( --proamsa-int-verde );
	border-radius: 8px;
	background: var( --proamsa-int-niebla );
	font-size: 0.95rem;
}

.proamsa-aviso p {
	margin-block: 0 0.6rem;
}

.proamsa-aviso p:last-child {
	margin-block-end: 0;
}

.proamsa-aviso--error {
	border-left-color: var( --proamsa-int-alerta );
	background: rgba( 179, 38, 30, 0.07 );
}

.proamsa-aviso--ok {
	border-left-color: var( --proamsa-int-verde );
}

/* --- Acceso ------------------------------------------------------------- */

.proamsa-intranet__acceso {
	position: relative;
	max-width: 26rem;
	margin-inline: auto;
	padding: clamp( 1.5rem, 4vw, 2.5rem );
	border: 1px solid var( --proamsa-int-borde );
	border-radius: var( --proamsa-int-radio );
	background: #FFFFFF;
	box-shadow: 0 18px 40px rgba( 0, 18, 42, 0.08 );
}

.proamsa-intranet__cerrar {
	position: absolute;
	top: 0.65rem;
	right: 0.65rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	color: var( --proamsa-int-gris );
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
}

.proamsa-intranet__cerrar:hover {
	background: var( --proamsa-int-niebla );
	color: var( --proamsa-int-marino );
}

.proamsa-intranet__cerrar:focus-visible {
	outline: 3px solid var( --proamsa-int-verde );
	outline-offset: 2px;
}

.proamsa-intranet__acceso .proamsa-intranet__titulo {
	padding-inline-end: 2.5rem;
}

.proamsa-intranet__entradilla {
	margin-block: 0 1.5rem;
	color: var( --proamsa-int-gris );
	font-size: 0.95rem;
}

/* --- Tablas ------------------------------------------------------------- */

/*
 * La tabla se desborda dentro de su propio contenedor con scroll, nunca contra
 * el body: una página que se desplaza en horizontal en el móvil es un fallo de
 * maquetación, no una tabla ancha.
 */
.proamsa-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.proamsa-tabla th,
.proamsa-tabla td {
	padding: 0.65rem 0.75rem;
	border-bottom: 1px solid var( --proamsa-int-borde );
	text-align: left;
	vertical-align: middle;
}

.proamsa-tabla th {
	color: var( --proamsa-int-gris );
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.proamsa-tabla code {
	font-size: 0.9em;
}

/* --- Detalle de residuos (filas dinámicas del formulario de emisión) ---- */

.proamsa-tabla-detalle input {
	min-width: 6.5rem;
}

.proamsa-tabla-detalle td {
	vertical-align: top;
	padding-block: 0.4rem;
}

.proamsa-fila-detalle__quitar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border: 1px solid var( --proamsa-int-borde );
	border-radius: 999px;
	background: #FFFFFF;
	color: var( --proamsa-int-alerta );
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.proamsa-fila-detalle__quitar:hover,
.proamsa-fila-detalle__quitar:focus-visible {
	background: rgba( 179, 38, 30, 0.08 );
}

/* --- Validador público -------------------------------------------------- */

.proamsa-validador__titulo {
	margin-block: 0 0.4rem;
}

/*
 * La entradilla carga con la explicacion ahora que el titulo bajo a rotulo, asi
 * que se le da medida de lectura: 34rem son unos 70 caracteres por linea, que
 * es donde el ojo deja de perder el renglon al volver.
 */
.proamsa-validador__entradilla {
	max-width: 34rem;
	margin-block: 0 1.75rem;
	color: var( --proamsa-int-gris );
	font-size: 1rem;
	line-height: 1.55;
}

.proamsa-validador .proamsa-formulario {
	max-width: 30rem;
}

.proamsa-resultado {
	margin-block: 0 1.75rem;
	padding: clamp( 1.25rem, 3vw, 2rem );
	border: 1px solid var( --proamsa-int-borde );
	border-radius: var( --proamsa-int-radio );
	border-top: 5px solid var( --proamsa-int-gris );
	background: #FFFFFF;
}

.proamsa-resultado--vigente {
	border-top-color: var( --proamsa-int-verde );
	background: rgba( 84, 144, 0, 0.04 );
}

.proamsa-resultado--anulado,
.proamsa-resultado--no-valido,
.proamsa-resultado--no {
	border-top-color: var( --proamsa-int-alerta );
	background: rgba( 179, 38, 30, 0.04 );
}

.proamsa-resultado--vencido {
	border-top-color: var( --proamsa-int-gris );
}

.proamsa-resultado__estado {
	margin-block: 0 0.5rem;
	font-weight: 800;
	font-size: clamp( 1.3rem, 3.5vw, 1.7rem );
	letter-spacing: -0.01em;
}

.proamsa-resultado--vigente .proamsa-resultado__estado {
	color: #3F6B00;
}

.proamsa-resultado--anulado .proamsa-resultado__estado,
.proamsa-resultado--no-valido .proamsa-resultado__estado,
.proamsa-resultado--no .proamsa-resultado__estado {
	color: var( --proamsa-int-alerta );
}

.proamsa-resultado__introduccion {
	margin-block: 0 1.25rem;
}

.proamsa-resultado__datos {
	display: grid;
	grid-template-columns: minmax( 8rem, auto ) 1fr;
	gap: 0.5rem 1rem;
	margin-block: 0;
}

.proamsa-resultado__datos dt {
	color: var( --proamsa-int-gris );
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.proamsa-resultado__datos dd {
	margin-inline-start: 0;
}

.proamsa-resultado__nota {
	display: block;
	color: var( --proamsa-int-gris );
	font-size: 0.8rem;
}

.proamsa-resultado__motivo,
.proamsa-resultado__ayuda {
	margin-block: 1.25rem 0;
	color: var( --proamsa-int-gris );
	font-size: 0.92rem;
}

.proamsa-validador__descarga {
	padding: clamp( 1.25rem, 3vw, 2rem );
	border: 1px solid var( --proamsa-int-borde );
	border-radius: var( --proamsa-int-radio );
	background: var( --proamsa-int-niebla );
}

.proamsa-validador__otra {
	margin-block: 1.5rem 0;
	font-size: 0.92rem;
}

/* --- El validador como una consola, no como una pagina suelta ----------- */

/*
 * ANTES: titulo, entradilla, etiqueta, campo, pista, CAPTCHA y boton flotaban
 * sueltos sobre el blanco de la pagina, todos con un peso parecido y separados
 * por huecos enormes. No habia nada que mirar primero, y el CAPTCHA —un
 * «¿Cuanto es 9 + 7?» en negrita con una cajita huerfana— parecia un error de
 * la pagina mas que una comprobacion.
 *
 * AHORA hay UN objeto: una hoja centrada y acotada donde ocurre todo. Es la
 * misma idea que un cajero o un buscador — cuando solo hay una cosa que hacer,
 * la pantalla tiene que tener un solo centro.
 *
 * El ancho tope de 40rem no es estetico: un codigo como
 * «PRO-CRATRH-AGOSTO-2026-0006» cabe holgado, y pasar de ahi convertiria el
 * campo en una linea larguisima que cuesta apuntar con el pulgar.
 */
.proamsa-validador {
	max-width: 40rem;
	margin-inline: auto;
	padding: clamp( 1.5rem, 4vw, 2.5rem );
	border: 1px solid var( --proamsa-int-borde );
	border-radius: var( --proamsa-int-radio );
	background: #FFFFFF;
	box-shadow:
		0 1px 2px rgba( 0, 18, 42, 0.04 ),
		0 20px 44px -34px rgba( 0, 18, 42, 0.55 );
}

/*
 * El titulo del bloque compite con el banner de la plantilla, que ya dice
 * «Validar certificado» en grande justo encima: repetirlo a tamaño de titular
 * hacia leer dos veces lo mismo antes de llegar a lo unico que hay que hacer.
 * Se conserva en el marcado —un bloque sin encabezado deja a un lector de
 * pantalla sin punto de referencia— pero baja a rotulo.
 */
.proamsa-validador .proamsa-validador__titulo {
	margin-block: 0 0.35rem;
	color: var( --proamsa-int-gris );
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/*
 * EL CAMPO DEL CODIGO ES EL PROTAGONISTA y tiene que parecerlo: es lo unico
 * que se pide. Monoespaciada porque lo que se teclea es un codigo y no una
 * frase — en monoespaciada se distingue el 0 de la O y el 1 de la l, que es
 * justo donde se equivoca quien copia de un papel.
 */
.proamsa-validador .proamsa-campo__control--codigo {
	padding-block: 0.95rem;
	border-width: 2px;
	border-radius: 12px;
	background: var( --proamsa-int-niebla );
	font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;
	font-size: 1.05rem;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
}

.proamsa-validador .proamsa-campo__control--codigo::placeholder {
	letter-spacing: 0.04em;
	text-transform: none;
	opacity: 0.45;
}

.proamsa-validador .proamsa-campo__control--codigo:focus-visible {
	background: #FFFFFF;
}

/*
 * EL CAPTCHA, CALLADO. Su etiqueta usaba el mismo peso que «Codigo del
 * documento», asi que dos preguntas parecian igual de importantes cuando una
 * es un tramite. Aqui pasa a una franja tenue con la pregunta y la caja en la
 * misma linea: se ve, se entiende y no compite.
 */
.proamsa-validador .proamsa-captcha .proamsa-campo {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	margin-block: 0 1.5rem;
	padding: 0.85rem 1rem;
	border-radius: 10px;
	background: var( --proamsa-int-niebla );
}

.proamsa-validador .proamsa-captcha label {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	margin: 0;
	color: var( --proamsa-int-gris );
	font-weight: 600;
	font-size: 0.88rem;
}

.proamsa-validador .proamsa-captcha .proamsa-campo__control--corto {
	max-width: 5.5rem;
	margin-inline-start: auto;
	padding-block: 0.5rem;
	text-align: center;
}

/*
 * BOTON EN MARINO, NO EN VERDE, y no es capricho: el boton flotante de
 * WhatsApp del tema es una pildora verde del mismo tamaño y se quedaba a un
 * palmo de este, asi que en pantalla habia dos botones verdes identicos y
 * ninguno destacaba. Ademas la paleta del proyecto reserva el marino para la
 * «accion principal» y el verde para «confirmar», que es justo este reparto.
 */
.proamsa-validador .proamsa-btn--primario {
	width: 100%;
	padding-block: 0.85rem;
	border-radius: 12px;
	background: var( --proamsa-int-marino );
	font-size: 1.02rem;
}

.proamsa-validador .proamsa-formulario__acciones {
	margin-block: 0;
}

/*
 * Dentro de la hoja, el bloque de resultado ya no necesita su propio marco:
 * dos cajas anidadas con borde se leen como un error de maquetacion. Conserva
 * la banda de color superior, que es lo que dice de un vistazo si el documento
 * vale.
 */
.proamsa-validador .proamsa-resultado {
	padding-inline: 0;
	padding-block-start: 1.25rem;
	border-inline: 0;
	border-block-end: 0;
	border-radius: 0;
	border-block-start-width: 4px;
}

/* --- Leyenda del formulario unico --------------------------------------- */

/*
 * UN CAMPO PARA TRES DOCUMENTOS. Antes habia dos paginas publicas, cada una de
 * un plugin y con un aspecto distinto: el cliente tenia que saber de antemano
 * cual le tocaba. Ahora pega su codigo y el sistema deduce que es, asi que esta
 * leyenda existe para decirle QUE PUEDE PEGAR sin obligarle a elegir antes.
 *
 * Se compone con los tipos realmente registrados, no con una lista escrita a
 * mano: si el plugin de capacitaciones se desactiva, su linea desaparece sola.
 */
.proamsa-validador__leyenda {
	margin-block-start: 2rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var( --proamsa-int-borde );
	font-size: 0.92rem;
}

.proamsa-validador__leyenda-titulo {
	margin-block: 0 0.75rem;
	color: var( --proamsa-int-gris );
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.78rem;
}

.proamsa-validador__leyenda ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.6rem;
}

.proamsa-validador__leyenda li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.75rem;
}

.proamsa-validador__leyenda strong {
	color: var( --proamsa-int-marino );
}

.proamsa-validador__leyenda span,
.proamsa-validador__leyenda code {
	color: var( --proamsa-int-gris );
}

.proamsa-validador__leyenda code {
	padding: 0.15rem 0.45rem;
	border-radius: 6px;
	background: var( --proamsa-int-niebla );
	font-size: 0.86rem;
}

/* --- Etiqueta del tipo de documento ------------------------------------- */

/*
 * Va ENCIMA del estado y no al lado: lo primero que necesita saber quien
 * consulta es que documento tiene delante, y solo despues si vale. Con los tres
 * documentos compartiendo pagina, sin esto un cliente no distingue la
 * constancia mensual del manifiesto que la sustenta.
 */
.proamsa-resultado__tipo {
	margin-block: 0 0.35rem;
	color: var( --proamsa-int-gris );
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --- Trazabilidad: manifiesto -> certificado -> disposicion final -------- */

/*
 * Solo aparece DESPUES del segundo factor (ver Proamsa_Intranet_Validador),
 * asi que estas reglas nunca se pintan para un visitante que solo tecleo un
 * numero.
 */
.proamsa-validador__trazabilidad {
	margin-block-start: 1.5rem;
	padding: clamp( 1.25rem, 3vw, 2rem );
	border: 1px solid var( --proamsa-int-borde );
	border-radius: var( --proamsa-int-radio );
}

.proamsa-validador__trazabilidad h3 {
	margin-block: 0 0.5rem;
}

.proamsa-trazabilidad {
	margin-block: 1.25rem 0;
	padding-inline-start: 0;
	list-style: none;
}

/*
 * Cada eslabon es una fila con su nombre, su dato y su enlace. `flex-wrap`
 * porque el codigo de un certificado («PRO-CRATRH-AGOSTO-2026-0006») no cabe
 * junto a la etiqueta en un movil estrecho.
 *
 * El sangrado de la izquierda deja sitio al hilo y al punto que dibujan los
 * pseudoelementos de mas abajo.
 */
.proamsa-trazabilidad li {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	padding-block: 0.85rem;
	padding-inline-start: 1.9rem;
}

/*
 * EL HILO QUE UNE LOS ESLABONES.
 *
 * Antes eran filas separadas por una linea horizontal, y eso se lee como una
 * tabla: tres datos sueltos. Pero no son tres datos, son UNA CADENA — el
 * manifiesto alimenta la constancia del mes, y la constancia se respalda con el
 * certificado del gestor. Un hilo vertical con un punto por eslabon lo dice sin
 * necesidad de explicarlo.
 *
 * El hilo se dibuja en el ::before y se recorta en el primero y el ultimo con
 * `top`/`bottom`, para que no asome por arriba del primer punto ni por debajo
 * del ultimo.
 */
.proamsa-trazabilidad li::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0.42rem;
	width: 2px;
	background: var( --proamsa-int-borde );
}

.proamsa-trazabilidad li:first-child::before {
	inset-block-start: 0.85rem;
}

.proamsa-trazabilidad li:last-child::before {
	inset-block-end: calc( 100% - 0.85rem );
}

.proamsa-trazabilidad li::after {
	content: "";
	position: absolute;
	inset-block-start: 0.78rem;
	inset-inline-start: 0;
	width: 0.85rem;
	height: 0.85rem;
	border: 2px solid var( --proamsa-int-verde );
	border-radius: 50%;
	background: #FFFFFF;
}

/*
 * El ultimo eslabon —la disposicion final— se pinta relleno: es donde termina
 * el residuo, y cerrar la cadena visualmente es exactamente lo que un
 * inspector busca al mirar esto.
 */
.proamsa-trazabilidad li:last-child::after {
	background: var( --proamsa-int-verde );
}

.proamsa-trazabilidad span {
	color: var( --proamsa-int-neutro );
}

.proamsa-trazabilidad a {
	margin-inline-start: auto;
	font-size: 0.9rem;
}

/* --- Móvil -------------------------------------------------------------- */

@media ( max-width: 600px ) {

	.proamsa-resultado__datos {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}

	.proamsa-resultado__datos dd {
		margin-block-end: 0.75rem;
	}

	/*
	 * En movil, la casilla del CAPTCHA se iba sola al extremo derecho y quedaba
	 * flotando bajo la pregunta como si no fuera con ella. Aqui se pega debajo
	 * y a la izquierda, que es donde el ojo la busca despues de leer.
	 */
	.proamsa-validador .proamsa-captcha .proamsa-campo__control--corto {
		margin-inline-start: 0;
	}

	/*
	 * El codigo de ejemplo del marcador de posicion —27 caracteres— no cabe a
	 * 375 px y se cortaba a media palabra, justo lo contrario de lo que un
	 * ejemplo debe hacer. Se encoge la letra y el espaciado hasta que entra
	 * entero; el texto que la persona teclea encoge con el.
	 */
	.proamsa-validador .proamsa-campo__control--codigo {
		font-size: 0.84rem;
		letter-spacing: 0.02em;
	}

}

/* --- Movimiento reducido ------------------------------------------------ */

@media ( prefers-reduced-motion: reduce ) {

	.proamsa-btn {
		transition: none;
	}

	.proamsa-btn:hover,
	.proamsa-btn:focus-visible {
		transform: none;
	}
}

/* ------------------------------------------------------------------------
   El marco del panel dentro de /intranet/

   El panel del operador no se pinta en esta página: se incrusta en un iframe
   que sirve Proamsa_Intranet_Marco con su propio Bootstrap. Ver la cabecera
   de includes/class-proamsa-intranet-marco.php.

   El ancho se rompe a proposito contra el contenedor del tema: contentSize
   son 760px en theme.json y un tablero con tablas no cabe ahi. Se usa cqw y
   NO vw porque 100vw incluye la barra de desplazamiento y desbordaria.
   ------------------------------------------------------------------------ */

/*
 * La caja sale a sangre completa con el MISMO recurso que usa el tema en
 * `.proamsa-cierre.alignfull`, y no con una expresión propia: `width: 100cqw`
 * más `margin-inline: calc(50% - 50cqw)`.
 *
 * Se intentó antes capar el ancho a 1280px aquí mismo con
 * `margin-inline: calc(50% - min(1280px, 100cqw - 2rem) / 2)`. NO funciona:
 * la división de un `min()` sustituido desde una variable se descarta como
 * declaración inválida, los dos márgenes caen a 0 y entonces el navegador
 * aplica la regla del bloque sobre-constreñido —resolver solo el margen
 * derecho—, dejando la caja pegada a la izquierda y 220px de desbordamiento
 * horizontal. El tope de ancho va en el iframe, donde `auto` sí centra.
 *
 * TRES clases en el selector, a propósito. Con `alignfull` puesto, la regla
 * que pasa a competir es `.has-global-padding > .alignfull`, que WordPress
 * imprime DESPUÉS de esta hoja y que resuelve sus márgenes con
 * `--wp--style--root-padding-*`, variables que en esta instalación llegan
 * vacías. Con dos clases se empata y gana WordPress por orden de aparición.
 * Es el mismo motivo por el que `.proamsa-nav-cta` del tema necesitó tres.
 *
 * SIN RELLENO VERTICAL, y esto tampoco es estética. La caja y el documento
 * del iframe comparten fondo, así que un `padding-block` aquí no se lee
 * como margen sino como un hueco claro entre la franja marino de arriba y
 * el tablero, y otro entre el tablero y el pie. El aire que necesite el
 * panel lo pone el panel, DENTRO del marco, donde se ve como parte de la
 * interfaz y no como un vacío. El relleno lateral sí se queda, en el
 * `width` del iframe: ahí no hay nada con lo que confundirlo.
 *
 * BLANCO, NO NIEBLA. Hasta aquí este fondo era `#F3F7EE`, el mismo verde
 * pálido que llevaba el body del documento del iframe (panel.css). Al pasar
 * ese body a blanco, dejar esta caja en niebla invirtió el problema: ahora
 * era el marco alrededor del panel el que se veía verdoso, justo detrás de
 * un tablero ya blanco. Comparten fondo a propósito —ver el párrafo de
 * arriba—, así que tenían que cambiar juntos.
 */
.proamsa-contenido .proamsa-marco-caja.alignfull,
.proamsa-marco-caja {
	background: #FFFFFF;
	margin-inline: calc(50% - 50cqw);
	max-width: none;
	width: 100cqw;
}

/*
 * `min-height` vale SOLO para la primera pintada, antes de que llegue la
 * altura real por postMessage; en cuanto llega, panel.js la retira. Si se
 * quedara puesta, un suelo más alto que el contenido reabriría el hueco de
 * abajo, que es exactamente lo que hacía el antiguo `70vh` en pantallas
 * grandes: la barra de desplazamiento interna desaparecía, sí, pero a costa
 * de un iframe más alto que lo que contiene.
 */
.proamsa-marco {
	background: #FFFFFF;
	border: 0;
	display: block;
	margin-inline: auto;
	max-width: 1280px;
	min-height: 480px;
	width: calc(100% - 2rem);
}

/*
 * El relleno de página del tema NO debe rodear al marco.
 *
 * `.proamsa-contenido` trae `padding-block: spacing-20 spacing-60` (tema.css),
 * que es lo correcto para el texto de una página normal. Pero el panel entra
 * ahí dentro a sangre completa, así que ese relleno deja de leerse como margen
 * tipográfico y pasa a ser hueco: una franja clara entre el encabezado marino
 * y el tablero, y otra bastante mayor entre el tablero y el pie. La asimetría
 * que se ve a simple vista es literalmente la que hay entre los dos valores.
 *
 * No es un caso nuevo. El propio tema ya hace esto mismo para el panel de
 * cierre, en `.proamsa-contenido:has(> .wp-block-post-content >
 * .proamsa-cierre:last-child)`. Esto es el mismo remedio para el marco.
 *
 * Va con `:has()` y no a secas porque esta hoja se carga TAMBIÉN en
 * /validar-certificado/, que es una página corriente y sí necesita su relleno.
 * Se busca por descendencia y no por `:last-child` porque antes del marco
 * puede haber un aviso de sesión.
 *
 * La especificidad sale sola: `:has()` suma la de su argumento, así que esto
 * es (0,2,0) contra el (0,1,0) del tema. Y hace falta ganar por especificidad
 * y no por orden, porque WordPress carga los plugins ANTES que el tema: a
 * igualdad, tema.css se imprime después y se llevaría la regla.
 */
.proamsa-contenido:has(.proamsa-marco-caja) {
	padding-block: 0;
}