/**
 * Portal del socio.
 *
 * Tres registros deliberados, y los tres significan algo:
 *
 *   OSCURO   cabecera y pantallas sin sesión. Es la firma de la marca y marca el
 *            umbral de lo privado.
 *   BEIGE    el área de trabajo. Aquí se rellena un formulario largo y se lee una
 *            tabla, y un formulario largo sobre negro cansa la vista a los tres
 *            campos.
 *   OSCURO   otra vez, y solo ahí, el bloque de contacto interno. Que cambie de
 *            registro ES el mensaje: lo que no sale al directorio no se parece a
 *            lo que sí sale. Son tres campos, no cansan.
 *
 * La columna del logotipo recorre el portal como FUSTE: banda estriada vertical
 * en el canto de la cabecera y del bloque interno, y filete estriado separando
 * las cuotas. Sale de la marca, no de una tendencia.
 *
 * REGLA DE CONTRASTE (WCAG 2.1 AA). Las combinaciones que se usan y por qué:
 *
 *   #F3EFE6 sobre #090909 ....... 17,35 · titulares y texto sobre la cabecera
 *   #B07A47 sobre #090909 .......  5,42 · antetítulos y notas sobre oscuro
 *   #F3EFE6 sobre #141414 ....... 16,05 · texto del panel de acceso y del bloque interno
 *   #B07A47 sobre #141414 .......  5,02 · ayudas y bordes sobre antracita
 *   #090909 sobre #F3EFE6 ....... 17,35 · lo que el socio escribe, e importes
 *   #4A3425 sobre #F3EFE6 ....... 10,12 · texto corrido del área de trabajo
 *   #7A5636 sobre #F3EFE6 .......  5,70 · ayudas y texto secundario
 *   #090909 sobre #B07A47 .......  5,42 · insignia de «pendiente» y botón de pago
 *   #F3EFE6 sobre #4A3425 ....... 10,12 · insignia de «publicado»
 *
 * #B07A47 sobre beige (3,20) aparece solo como filete, estriado, borde de control
 * e icono: pasa el 3:1 que WCAG 1.4.11 exige a los elementos gráficos y a los
 * límites de un componente, y no se usa para texto en ningún sitio.
 *
 * Los errores no van en rojo: no hay rojo en la identidad y, sobre todo, el color
 * no puede ser el único portador de la información. Cada error lleva delante la
 * palabra «Error:», el control queda marcado con `aria-invalid`, el resumen de
 * arriba enlaza con él y el refuerzo visual es de forma —canto grueso e icono de
 * alerta—, no de color.
 *
 * DOS CORRECCIONES DE CASCADA que explican por qué varios selectores llevan el
 * bloque delante:
 *
 * 1. GeneratePress emite en su CSS en línea
 *    `input[type="text"],…,textarea,select{color:var(--contrast);background-color:var(--base-2);border-color:var(--base)}`
 *    con especificidad (0,1,1). Una sola clase —(0,1,0)— PIERDE contra eso pase
 *    lo que pase con el orden de carga: los campos salían en gris claro con texto
 *    #222222 en vez del negro sobre beige que dice esta hoja. Por eso los
 *    controles se escriben `.emp-portal .emp-portal__control`, que es (0,2,0) y
 *    gana sin `!important` y sin depender de quién se encole antes.
 * 2. El tema hereda cuatro variables de contexto (`--emp-color-texto`, `-apoyo`,
 *    `-enlace`, `-filete`) para elegir el color seguro sobre el fondo que haya.
 *    Cada zona de este portal declara las suyas: así el enlace base del tema, el
 *    segundo anillo de foco y los pies de foto se recalculan solos y no hay que
 *    ganarle ninguna batalla de especificidad a nadie.
 */

.emp-portal {
	--emp-negro: #090909;
	--emp-antracita: #141414;
	--emp-bronce: #B07A47;
	--emp-bronce-oscuro: #7A5636;
	--emp-marron: #4A3425;
	--emp-beige: #F3EFE6;

	/* El tema puede imponer sus familias; si no las define, se cae a una didona
	   de sistema para los titulares y a la sans del propio tema para los datos.

	   Los nombres llevan `familia` a propósito: `--emp-texto` es un COLOR en el
	   sistema de marca del tema, y declararlo aquí como pila tipográfica dejaba
	   inválido el segundo anillo de foco —`box-shadow: 0 0 0 4px var(--emp-texto)`—
	   dentro de todo el plugin. Dos cosas distintas no pueden llamarse igual. */
	--emp-familia-titular: var( --wp--preset--font-family--titulares, "Didot", "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif );
	--emp-familia-texto: var( --wp--preset--font-family--texto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif );

	max-width: 52rem;
	margin-inline: auto;
	margin-block: clamp( 2rem, 6vw, 4.5rem );
	font-family: var( --emp-familia-texto );
}

.emp-portal *,
.emp-portal *::before,
.emp-portal *::after {
	box-sizing: border-box;
}

/* Contexto de color por zonas. Ver la nota 2 de la cabecera: sin esto, un enlace
   del plugin dentro de un panel oscuro hereda el contexto beige de `:root` del
   tema y cae a 3,05, que ACUERDO.md §4 marca «nunca». */
.emp-portal__panel,
.emp-portal__cabecera,
.emp-portal__bloque--interno {
	--emp-color-texto: var( --emp-beige );
	--emp-color-apoyo: var( --emp-bronce );
	--emp-color-enlace: var( --emp-bronce );
	--emp-color-filete: var( --emp-bronce );
}

.emp-portal__bloque,
.emp-portal__acciones,
.emp-portal__aviso--ok {
	--emp-color-texto: var( --emp-marron );
	--emp-color-apoyo: var( --emp-bronce-oscuro );
	--emp-color-enlace: var( --emp-bronce-oscuro );
	--emp-color-filete: var( --emp-bronce );
}

/* ----------------------------------------------------- Panel oscuro (acceso) */

.emp-portal__panel {
	position: relative;
	padding: clamp( 1.75rem, 5vw, 3.25rem );
	padding-left: clamp( 2.5rem, 6vw, 4.25rem );
	background-color: var( --emp-antracita );

	/* El color se declara junto al fondo, siempre. Un panel que fija fondo oscuro
	   y no fija color deja que cualquier texto sin clase propia herede el #222222
	   de GeneratePress: 1,16 sobre antracita, invisible. */
	color: var( --emp-beige );
	border-top: 3px solid var( --emp-bronce );
}

/**
 * El fuste: la columna del logotipo, de pie, en el canto del panel.
 *
 * Decoración pura, sin contenido y sin significado, así que no anuncia nada a un
 * lector de pantalla. Existe con guion y sin él —el estriado es un degradado
 * repetido, no una animación—; el movimiento solo añade que se levante de arriba
 * abajo al entrar en pantalla.
 */
.emp-portal .emp-portal__fuste {
	/* Dos clases (0,2,0) a propósito: la primitiva declara la medida con un
	   selector de atributo (0,1,0) y `movimiento.css` se encola DESPUÉS de esta
	   hoja, así que un empate lo ganaría ella. Con 12 px caben dos estrías y el
	   fuste se lee como un filete doble; con 24 px y paso de 5 caben cinco y se
	   lee como lo que es. */
	--emp-estria-paso: 5px;

	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 1.5rem;
}

.emp-portal__antetitulo {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: center;
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --emp-bronce );
}

.emp-portal__titulo {
	margin: 0 0 1rem;
	font-family: var( --emp-familia-titular );
	font-size: clamp( 1.6rem, 4.2vw, 2.4rem );
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --emp-beige );
}

.emp-portal__entradilla {
	margin: 0 0 1.5rem;
	max-width: 42ch;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var( --emp-beige );
}

/* (0,2,1) y no (0,1,1). El tema pinta los enlaces de sus bandas oscuras con un
   selector de esa misma especificidad y `marca.css` se encola DESPUÉS de esta
   hoja: en un empate ganaba él, y el color de estos enlaces acababa dependiendo
   de en qué página se montara el portal. Con una clase más, el componente decide
   su propio color siempre. */
.emp-portal .emp-portal__entradilla a,
.emp-portal .emp-portal__acceso-ayuda a,
.emp-portal .emp-portal__acceso-nota a {
	color: var( --emp-bronce );
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.emp-portal .emp-portal__entradilla a:hover,
.emp-portal .emp-portal__entradilla a:focus-visible,
.emp-portal .emp-portal__acceso-ayuda a:hover,
.emp-portal .emp-portal__acceso-ayuda a:focus-visible,
.emp-portal .emp-portal__acceso-nota a:hover,
.emp-portal .emp-portal__acceso-nota a:focus-visible {
	color: var( --emp-beige );
}

/* Formulario de acceso: lo pinta `wp_login_form`, así que se estiliza por sus
   propias clases en lugar de reescribir su marcado. Los selectores llevan
   `.emp-portal` delante por lo mismo que los demás controles: hay que pasar del
   (0,1,1) de GeneratePress. */

.emp-portal__acceso-formulario label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var( --emp-beige );
}

.emp-portal__acceso-formulario p {
	margin: 0 0 1.25rem;
}

.emp-portal .emp-portal__acceso-formulario input[type="text"],
.emp-portal .emp-portal__acceso-formulario input[type="password"] {
	display: block;
	width: 100%;
	padding: 0.85rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var( --emp-beige );
	background-color: var( --emp-negro );
	border: 1px solid var( --emp-bronce );
	border-radius: 0;
	appearance: none;
}

.emp-portal .emp-portal__acceso-formulario input[type="text"]:focus-visible,
.emp-portal .emp-portal__acceso-formulario input[type="password"]:focus-visible {
	outline: 2px solid var( --emp-beige );
	outline-offset: 2px;
	border-color: var( --emp-beige );
}

.emp-portal__acceso-formulario .login-remember label {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	font-weight: 400;
}

.emp-portal__acceso-formulario input[type="checkbox"] {
	width: 1.35rem;
	height: 1.35rem;
	margin: 0;
	accent-color: var( --emp-bronce );
}

.emp-portal .emp-portal__acceso-formulario input[type="submit"] {
	padding: 1rem 2.25rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --emp-negro );
	background-color: var( --emp-bronce );
	border: 2px solid var( --emp-bronce );
	border-radius: 0;
	cursor: pointer;
}

/* La inversión a beige mantiene AA (10,12). Oscurecer el bronce, que sería lo
   intuitivo, dejaría el texto negro en 3,05: por eso el hover aclara. */
.emp-portal .emp-portal__acceso-formulario input[type="submit"]:hover,
.emp-portal .emp-portal__acceso-formulario input[type="submit"]:focus-visible {
	color: var( --emp-marron );
	background-color: var( --emp-beige );
	border-color: var( --emp-beige );
}

.emp-portal__acceso-ayuda,
.emp-portal__acceso-nota {
	margin: 1.25rem 0 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var( --emp-bronce );
}

/* -------------------------------------------------------------- Cabecera */

.emp-portal__cabecera {
	position: relative;
	padding: clamp( 1.75rem, 5vw, 2.75rem );
	padding-left: clamp( 2.5rem, 6vw, 3.75rem );
	background-color: var( --emp-negro );
	color: var( --emp-beige );
	border-top: 3px solid var( --emp-bronce );
}

.emp-portal__estado {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: center;
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	color: var( --emp-beige );
}

.emp-portal__estado-etiqueta {
	letter-spacing: 0.04em;
}

.emp-portal__estado-nota,
.emp-portal__sesion {
	margin: 0 0 0.5rem;
	max-width: 52ch;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var( --emp-bronce );
}

.emp-portal__sesion {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	align-items: center;
	margin: 1.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var( --emp-bronce );
	font-size: 0.875rem;
}

.emp-portal .emp-portal__salir {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	color: var( --emp-beige );
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.emp-portal .emp-portal__salir:hover,
.emp-portal .emp-portal__salir:focus-visible {
	color: var( --emp-bronce );
}

/* -------------------------------------------------------------- Insignias */

.emp-portal__insignia {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	padding: 0.25rem 0.7rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Pendiente y publicado son los dos estados que el socio ve a diario, y tienen
   que distinguirse sin depender del color: el icono cambia de dibujo —reloj
   frente a marca— y el texto de la insignia ya lo dice. */
.emp-portal__insignia--pendiente {
	color: var( --emp-negro );
	background-color: var( --emp-bronce );
}

.emp-portal__insignia--publicado {
	color: var( --emp-beige );
	background-color: var( --emp-marron );
}

.emp-portal__insignia--borrador,
.emp-portal__insignia--exenta,
.emp-portal__insignia--anulada {
	color: var( --emp-bronce );
	background-color: transparent;
	box-shadow: inset 0 0 0 1px var( --emp-bronce );
}

.emp-portal__insignia--baja {
	color: var( --emp-beige );
	background-color: var( --emp-antracita );
	box-shadow: inset 0 0 0 1px var( --emp-bronce );
}

/* Dentro del área beige las insignias cambian de fondo, no de significado. */
.emp-portal__bloque .emp-portal__insignia--borrador,
.emp-portal__bloque .emp-portal__insignia--exenta,
.emp-portal__bloque .emp-portal__insignia--anulada {
	color: var( --emp-bronce-oscuro );
	box-shadow: inset 0 0 0 1px var( --emp-bronce-oscuro );
}

.emp-portal__bloque .emp-portal__insignia--pagada {
	color: var( --emp-beige );
	background-color: var( --emp-marron );
}

/* Las dos insignias que rotulan a quién se le enseña un bloque. Van en negativo
   —fondo lleno— porque no son un estado más de la lista: son la respuesta a la
   única pregunta que un socio se hace al rellenar su ficha. */
.emp-portal__insignia--publico {
	color: var( --emp-beige );
	background-color: var( --emp-marron );
}

.emp-portal__insignia--privado {
	color: var( --emp-negro );
	background-color: var( --emp-bronce );
}

/* ----------------------------------------------------------------- Avisos */

.emp-portal__aviso {
	margin: 0;
	padding: 1.25rem 1.5rem;
}

/* El foco aterriza aquí tras la redirección; el anillo lo dibuja el navegador y
   se refuerza para que no pase inadvertido. */
.emp-portal__aviso:focus {
	outline: 2px solid var( --emp-marron );
	outline-offset: 4px;
}

.emp-portal__aviso--ok {
	background-color: var( --emp-beige );
	color: var( --emp-marron );
	border-left: 4px solid var( --emp-bronce-oscuro );
}

.emp-portal__aviso--error {
	background-color: var( --emp-antracita );
	color: var( --emp-beige );
	border-left: 4px solid var( --emp-bronce );
}

.emp-portal__aviso--error:focus {
	outline-color: var( --emp-beige );
}

.emp-portal__aviso p {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	line-height: 1.6;
}

.emp-portal__aviso p:last-child {
	margin-bottom: 0;
}

.emp-portal__aviso-titulo {
	display: flex;
	gap: 0.7rem;
	align-items: center;
	font-family: var( --emp-familia-titular );
	font-size: 1.25rem;
	letter-spacing: 0.04em;
}

.emp-portal__aviso--ok .emp-portal__aviso-titulo .emp-icono {
	color: var( --emp-bronce-oscuro );
}

.emp-portal__aviso--error .emp-portal__aviso-titulo .emp-icono {
	color: var( --emp-bronce );
}

.emp-portal__aviso-lista {
	margin: 0.75rem 0 0;
	padding-left: 1.25rem;
}

.emp-portal__aviso-lista li {
	margin-bottom: 0.35rem;
	line-height: 1.55;
}

.emp-portal .emp-portal__aviso-lista a {
	color: var( --emp-beige );
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.emp-portal .emp-portal__aviso-lista a:hover,
.emp-portal .emp-portal__aviso-lista a:focus-visible {
	color: var( --emp-bronce );
}

/* --------------------------------------------------------------- Bloques */

/* El filete va en todos los bloques y no solo entre hermanos: el formulario mete
   un `<form>` por medio, así que un selector de hermano adyacente se saltaría
   justo la separación entre el aviso y el primer bloque, que es beige sobre
   beige. */
.emp-portal__bloque {
	padding: clamp( 1.5rem, 4vw, 2.5rem );
	background-color: var( --emp-beige );
	border-top: 1px solid var( --emp-bronce );
	color: var( --emp-marron );
}

.emp-portal__bloque-titulo {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: center;
	margin: 0 0 0.5rem;
	font-family: var( --emp-familia-titular );
	font-size: clamp( 1.15rem, 2.6vw, 1.5rem );
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --emp-marron );
}

/* El icono del titular va en bronce oscuro (5,70) y no en bronce (3,20). Cumplir
   1.4.11 no basta cuando el icono está pegado a un texto que sí exige 4,5. */
.emp-portal__bloque-titulo .emp-icono {
	color: var( --emp-bronce-oscuro );
}

.emp-portal__bloque-nota,
.emp-portal__bloque-pie {
	margin: 0 0 1.75rem;
	max-width: 62ch;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var( --emp-bronce-oscuro );
}

.emp-portal__bloque-pie {
	margin: 1.5rem 0 0;
	font-size: 0.875rem;
}

.emp-portal__bloque--nota p {
	margin: 0;
	max-width: 62ch;
	line-height: 1.65;
}

/**
 * El bloque que NO se publica.
 *
 * Cambia de registro entero —fondo oscuro, campos negros, etiquetas en beige— en
 * lugar de llevar solo un rótulo. Es deliberado y es la parte del cumplimiento
 * que hace el diseño: la invariante dice que `contacto_*` no sale nunca al front
 * (ACUERDO.md §2), pero de nada sirve si el socio no la percibe. Con dos bloques
 * iguales acabaría escribiendo su móvil en el teléfono público «por si acaso».
 * Son tres campos: el registro oscuro no llega a cansar.
 */
.emp-portal__bloque--interno {
	position: relative;
	padding-left: clamp( 2.25rem, 5vw, 3.25rem );
	background-color: var( --emp-antracita );
	color: var( --emp-beige );
	border-top: 1px solid var( --emp-bronce );
}

.emp-portal__bloque--interno .emp-portal__bloque-titulo,
.emp-portal__bloque--interno .emp-portal__etiqueta,
.emp-portal__bloque--interno .emp-portal__error {
	color: var( --emp-beige );
}

.emp-portal__bloque--interno .emp-portal__bloque-titulo .emp-icono,
.emp-portal__bloque--interno .emp-portal__bloque-nota,
.emp-portal__bloque--interno .emp-portal__ayuda,
.emp-portal__bloque--interno .emp-portal__error-marca,
.emp-portal__bloque--interno .emp-portal__error .emp-icono {
	color: var( --emp-bronce );
}

/* Los campos del bloque interno son los del panel oscuro. (0,3,0): tiene que
   ganar a la regla beige de arriba y al (0,1,1) de GeneratePress. */
.emp-portal .emp-portal__bloque--interno .emp-portal__control {
	color: var( --emp-beige );
	background-color: var( --emp-negro );
	border-color: var( --emp-bronce );
}

.emp-portal .emp-portal__bloque--interno .emp-portal__control:hover {
	border-color: var( --emp-beige );
}

.emp-portal .emp-portal__bloque--interno .emp-portal__control:focus-visible {
	outline-color: var( --emp-beige );
	border-color: var( --emp-beige );
}

.emp-portal__bloque--interno .emp-portal__campo--fallido .emp-portal__control {
	border-color: var( --emp-beige );
}

/* ----------------------------------------------------------------- Campos */

.emp-portal__campos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

/* Sin `min-width: 0` una celda de rejilla no baja de su contenido mínimo, y una
   dirección larga escrita de un tirón desbordaría la columna. */
.emp-portal__campo {
	min-width: 0;
}

@media ( min-width: 40em ) {
	.emp-portal__campos {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.emp-portal__campo--completo {
		grid-column: 1 / -1;
	}
}

.emp-portal__etiqueta {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var( --emp-marron );
}

.emp-portal__obligatorio {
	color: var( --emp-bronce-oscuro );
}

.emp-portal__ayuda {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --emp-bronce-oscuro );
}

/* (0,2,0) para ganar al (0,1,1) de GeneratePress. Ver la nota 1 de la cabecera:
   con una sola clase, lo que escribe el socio salía en #222222 sobre un gris
   casi blanco en vez de negro sobre beige. */
.emp-portal .emp-portal__control {
	display: block;
	width: 100%;
	padding: 0.8rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;

	/* Lo que escribe el socio, en negro sobre beige (17,35): es el texto que más
	   se relee de toda la pantalla. */
	color: var( --emp-negro );
	background-color: transparent;

	/* Borde en bronce: 3,20 sobre beige, por encima del 3:1 que pide WCAG 1.4.11
	   para el límite de un componente. Para texto no se usa en ningún sitio. */
	border: 1px solid var( --emp-bronce );
	border-radius: 0;
	appearance: none;
}

.emp-portal__control--area {
	min-height: 9rem;
	resize: vertical;
}

.emp-portal .emp-portal__control:hover {
	border-color: var( --emp-bronce-oscuro );
}

.emp-portal .emp-portal__control:focus-visible {
	outline: 2px solid var( --emp-marron );
	outline-offset: 2px;
	border-color: var( --emp-marron );
}

/* Campo con error: canto grueso a la izquierda e icono de alerta delante del
   mensaje. Refuerzan el texto, nunca lo sustituyen, y ninguno de los dos es
   color: quien no distinga matices ve el canto y el dibujo igual. */
.emp-portal__campo--fallido .emp-portal__control,
.emp-portal__campo--fallido .emp-portal__archivo {
	border-left-width: 4px;
	border-left-style: solid;
	border-left-color: var( --emp-marron );
}

.emp-portal__error {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var( --emp-marron );
}

.emp-portal__error .emp-icono {
	color: var( --emp-bronce-oscuro );
}

.emp-portal__error-marca {
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --emp-bronce-oscuro );
}

/* ------------------------------------------------------------------- Logo */

.emp-portal__logo {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: start;
}

@media ( min-width: 40em ) {
	.emp-portal__logo {
		grid-template-columns: minmax( 0, 12rem ) minmax( 0, 1fr );
	}
}

.emp-portal__logo-vista {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 8rem;
	padding: 1rem;
	background-color: var( --emp-negro );
}

.emp-portal__logo-imagen {
	max-width: 100%;
	height: auto;
}

.emp-portal__logo-vacio {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	text-align: center;
	color: var( --emp-bronce );
}

.emp-portal .emp-portal__archivo {
	display: block;
	width: 100%;
	padding: 0.7rem;
	font-family: inherit;
	font-size: 0.9375rem;
	color: var( --emp-marron );
	background-color: transparent;
	border: 1px dashed var( --emp-bronce );
	border-radius: 0;
}

.emp-portal .emp-portal__archivo:focus-visible {
	outline: 2px solid var( --emp-marron );
	outline-offset: 2px;
}

.emp-portal__casilla,
.emp-portal__consentimiento {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.25rem 0.75rem;
	align-items: start;
	margin-top: 1rem;
}

.emp-portal__consentimiento {
	margin-top: 1.75rem;
	padding: 1rem 1.25rem;
	box-shadow: inset 0 0 0 1px var( --emp-bronce );
}

.emp-portal__casilla input[type="checkbox"],
.emp-portal__consentimiento input[type="checkbox"] {
	width: 1.35rem;
	height: 1.35rem;
	margin: 0.15rem 0 0;
	accent-color: var( --emp-bronce-oscuro );
}

.emp-portal__casilla input[type="checkbox"]:focus-visible,
.emp-portal__consentimiento input[type="checkbox"]:focus-visible {
	outline: 2px solid var( --emp-marron );
	outline-offset: 2px;
}

.emp-portal__casilla label,
.emp-portal__consentimiento label {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var( --emp-marron );
}

.emp-portal__consentimiento .emp-portal__ayuda {
	grid-column: 2;
	margin: 0.35rem 0 0;
}

/* --------------------------------------------------------------- Acciones */

.emp-portal__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	padding: clamp( 1.5rem, 4vw, 2.5rem );
	background-color: var( --emp-beige );
	border-top: 1px solid var( --emp-bronce );
}

.emp-portal__enviar {
	display: inline-flex;
	gap: 0.7rem;
	align-items: center;
	padding: 1rem 2.25rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --emp-beige );
	background-color: var( --emp-negro );
	border: 2px solid var( --emp-negro );
	border-radius: 0;
	cursor: pointer;
}

.emp-portal__enviar:hover,
.emp-portal__enviar:focus-visible {
	color: var( --emp-beige );
	background-color: var( --emp-marron );
	border-color: var( --emp-marron );
}

.emp-portal__enviar:focus-visible {
	outline: 2px solid var( --emp-marron );
	outline-offset: 3px;
}

.emp-portal__acciones-nota {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	margin: 0;
	max-width: 34ch;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var( --emp-bronce-oscuro );
}

.emp-portal__acciones-nota .emp-icono {
	margin-top: 0.15rem;
}

/* ----------------------------------------------------------------- Cuotas */

/**
 * El resumen de cuota.
 *
 * Es lo primero que mira un socio que entra al portal, así que es lo primero que
 * se ve del bloque y se lee de un vistazo desde el otro lado de la mesa: fondo
 * lleno, icono de reloj o de marca, y la cifra en grande cuando hay algo que
 * pagar. Los dos estados se distinguen por dibujo, por texto y por fondo; el
 * color solo acompaña.
 */
.emp-portal__resumen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
	margin: 0 0 1.75rem;
	padding: 1.1rem 1.35rem;
}

.emp-portal__resumen--pendiente {
	color: var( --emp-negro );
	background-color: var( --emp-bronce );
}

.emp-portal__resumen--corriente {
	color: var( --emp-marron );
	background-color: transparent;
	box-shadow: inset 0 0 0 1px var( --emp-bronce );
}

.emp-portal__resumen-texto {
	display: flex;
	gap: 0.7rem;
	align-items: center;
	margin: 0;
	font-size: 1rem;
	line-height: 1.45;
}

.emp-portal__resumen-titulo {
	font-weight: 700;
	letter-spacing: 0.04em;
}

.emp-portal__resumen--corriente .emp-icono {
	color: var( --emp-bronce-oscuro );
}

/* Filete estriado que separa las cuotas de la ficha: el motivo de la columna
   otra vez, ahora tumbado. SUSTITUYE al filete plano del bloque —dos separadores
   seguidos no separan el doble— y por eso este bloque no lleva `border-top`. */
.emp-portal__bloque--cuotas {
	border-top: 0;
}

.emp-portal .emp-portal__filete {
	--emp-estria-paso: 5px;

	margin-bottom: 1.75rem;
}

/* La tabla se desplaza dentro de su marco antes que desbordar la página. El
   marco es alcanzable con el teclado y está rotulado; si no, quien no usa ratón
   no puede llegar a las columnas de la derecha. */
.emp-portal__tabla-marco {
	overflow-x: auto;
}

.emp-portal__tabla-marco:focus-visible {
	outline: 2px solid var( --emp-marron );
	outline-offset: 2px;
}

.emp-portal__tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.emp-portal__tabla-caption {
	margin-bottom: 0.75rem;
	font-size: 0.8125rem;
	text-align: left;
	color: var( --emp-bronce-oscuro );
}

.emp-portal__tabla th,
.emp-portal__tabla td {
	padding: 0.85rem 1rem 0.85rem 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var( --emp-bronce );
	color: var( --emp-marron );
}

.emp-portal__tabla thead th {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --emp-bronce-oscuro );
}

.emp-portal__tabla tbody th {
	font-weight: 700;
	color: var( --emp-negro );
	font-variant-numeric: tabular-nums;
}

/* La fila pendiente se destaca sin color de fondo: canto bronce a la izquierda,
   que es la misma gramática que usan los campos con error. */
.emp-portal__fila--pendiente th[scope="row"] {
	padding-left: 0.75rem;
	border-left: 3px solid var( --emp-bronce );
}

.emp-portal__importe {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var( --emp-negro );
}

.emp-portal__detalle {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --emp-bronce-oscuro );
}

/**
 * Botón de pago.
 *
 * Bronce con texto negro (5,42), que es la forma canónica del botón de la marca
 * (ACUERDO.md §4: «sobre bronce, el texto va en negro»). Antes era beige sobre
 * bronce oscuro, que cumple por poco y no se parecía a ningún otro botón del
 * sitio; esta es la única acción que mueve dinero y merece la forma principal.
 */
/* (0,2,0): `.emp-portal__pagar` es un `<a>` y sin la clase de bloque delante el
   enlace base del tema podía llegarle antes. Este botón ya salió una vez a 1,00
   de contraste por esa misma cascada; no puede volver a pasar. */
.emp-portal .emp-portal__pagar {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.7rem 1.4rem;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var( --emp-negro );
	background-color: var( --emp-bronce );
	border: 2px solid var( --emp-bronce );
}

/* Aclarar y no oscurecer: con bronce oscuro de fondo, el texto negro cae a 3,05.
   El beige mantiene el marrón en 10,12. */
.emp-portal .emp-portal__pagar:hover,
.emp-portal .emp-portal__pagar:focus-visible {
	color: var( --emp-marron );
	background-color: var( --emp-beige );
	border-color: var( --emp-marron );
}

.emp-portal .emp-portal__pagar:focus-visible {
	outline: 2px solid var( --emp-marron );
	outline-offset: 3px;
}

.emp-portal .emp-portal__pagar:hover .emp-icono,
.emp-portal .emp-portal__pagar:focus-visible .emp-icono {
	transform: translateX( 3px );
}

/* Modo de alto contraste de Windows: los fondos desaparecen y los controles se
   quedarían sin límites si el borde no fuera explícito. */
@media ( forced-colors: active ) {
	.emp-portal .emp-portal__control,
	.emp-portal .emp-portal__archivo,
	.emp-portal__enviar,
	.emp-portal__pagar,
	.emp-portal__insignia,
	.emp-portal__resumen,
	.emp-portal .emp-portal__acceso-formulario input[type="text"],
	.emp-portal .emp-portal__acceso-formulario input[type="password"],
	.emp-portal .emp-portal__acceso-formulario input[type="submit"] {
		border: 1px solid ButtonBorder;
	}

	.emp-portal__aviso {
		border: 1px solid CanvasText;
	}

	/* El estriado es un degradado y en este modo desaparece: el fuste dejaría un
	   hueco mudo. Se sustituye por una línea de sistema, que sí se pinta. */
	.emp-portal__fuste {
		border-left: 1px solid CanvasText;
	}

	.emp-portal__filete {
		border-top: 1px solid CanvasText;
	}
}