/**
 * S157 (23/09/2026, orden suya) — La ventana para leer el documento antes de
 * firmarlo. Vale para el area y para el panel: por eso los colores se piden a
 * las variables del sitio y, si no existen, caen en un valor propio.
 *
 * Modo oscuro incluido, que es como trabaja el club.
 */
.ej-leer-doc__fondo {
	position: fixed;
	inset: 0;
	/* 🔴 Visto en pantalla el 23/09/2026: en el panel esta ventana se abría
	   bien y no se veía, porque el cajón de la ficha del alumno va a 100001 y
	   la tapaba entera. En el panel hay capas hasta 100100 (la vista previa de
	   plantillas), así que esta se pone por encima de todas: es la última que
	   se abre y la que está mirando quien la ha pedido. */
	z-index: 100200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, .55);
}
.ej-leer-doc__fondo[hidden] { display: none; }

body.ej-leer-doc-abierto { overflow: hidden; }

.ej-leer-doc__caja {
	display: flex;
	flex-direction: column;
	width: min(820px, 100%);
	max-height: min(88vh, 900px);
	border-radius: 14px;
	background: var(--ej-card, #fff);
	color: var(--ej-text, #1d2327);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
	overflow: hidden;
}

.ej-leer-doc__cab {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--ej-border, #dcdcde);
}
.ej-leer-doc__titulo {
	flex: 1;
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.3;
}
.ej-leer-doc__cerrar {
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 26px;
	line-height: 1;
	padding: 2px 8px;
	cursor: pointer;
	border-radius: 8px;
}
.ej-leer-doc__cerrar:hover { background: rgba(127, 127, 127, .16); }

/* El documento llega con el HTML de la plantilla del PDF: se le deja su propio
   aire y se le quita cualquier ancho fijo, que en pantalla no cabe. */
.ej-leer-doc__cuerpo {
	flex: 1;
	overflow: auto;
	padding: 20px 24px;
	background: var(--ej-preview-bg, #fff);
	color: var(--ej-text, #1d2327);
	font-size: .9rem;
	line-height: 1.6;
}
.ej-leer-doc__cuerpo * { max-width: 100% !important; }
.ej-leer-doc__cuerpo table { width: 100% !important; border-collapse: collapse; }
.ej-leer-doc__cuerpo td,
.ej-leer-doc__cuerpo th { padding: 4px 6px; vertical-align: top; }
.ej-leer-doc__cuerpo img { height: auto; }

.ej-leer-doc__pie {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	padding: 14px 20px;
	border-top: 1px solid var(--ej-border, #dcdcde);
}
.ej-leer-doc__nota {
	flex: 1;
	margin: 0;
	font-size: .82rem;
	opacity: .8;
}

/* 🔴 Visto en pantalla el 23/09/2026 (él: «mira la mierda de botón»): el botón
   de cerrar salía como el botón gris de fábrica del navegador, porque las
   clases de botón del área pública no existen en el panel. Se le da aquí su
   propio aspecto, que así es el mismo en los dos sitios y no depende de nadie. */
.ej-leer-doc__ok,
.ej-leer-doc__pie .ej-leer-doc__ok {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 22px;
	border: 0;
	border-radius: 10px;
	background: var(--ej-accent, #2271b1);
	color: #fff;
	font-family: inherit;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
}
.ej-leer-doc__ok:hover,
.ej-leer-doc__ok:focus {
	background: var(--ej-accent-hover, var(--ej-accent, #135e96));
	color: #fff;
	filter: brightness(1.08);
}

/* El boton que la abre: un enlace, no un boton grande, para no competir con
   «Guardar y continuar». */
.ej-leer-doc,
.ej-btn--enlace.ej-leer-doc {
	display: inline-block;
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ej-accent, #2271b1);
	font-size: .84rem;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}
.ej-leer-doc:hover { opacity: .85; }
.ej-leer-doc[disabled] { opacity: .6; cursor: default; }

/* S157 — La segunda salida, solo en el panel: mandarlo a la tablet del club.
   Va al lado del otro, separada, para que se vean como dos caminos del mismo
   documento y no como un botón partido en dos. */
/* B17 (S183): el hueco va detrás del primero, no delante del segundo. Con el
   margen delante, cuando la tarjeta es estrecha (el móvil, y también la de
   «Uso de imágenes» de la renovación en el ordenador) «Verlo en la tablet»
   bajaba de línea y se quedaba metido 14 px. */
.ej-leer-doc--tablet { margin-left: 0; }
.ej-leer-doc:has( + .ej-leer-doc--tablet ) { margin-right: 14px; }

.ej-leer-doc-recado {
	margin: 6px 0 0;
	font-size: .8rem;
	line-height: 1.4;
}
.ej-leer-doc-recado--mal { color: var(--ej-danger, #b32d2e); }
.ej-leer-doc-recado select { margin: 0 6px; }

@media (max-width: 600px) {
	.ej-leer-doc__caja { max-height: 92vh; }
	.ej-leer-doc__cuerpo { padding: 16px; }
	.ej-leer-doc__pie { flex-direction: column; align-items: stretch; }
}