/**
 * Registro y panel de colaboradores.
 *
 * Todo sale de las variables del tema, no de valores propios. Newsreader
 * publica su sistema completo: --cs-font-headings-* para los titulos (Zilla
 * Slab), --cs-font-input-* para los campos (DM Sans), --cs-font-primary-*
 * para las etiquetas y botones (Inter), y --cs-color-* para la paleta.
 *
 * Asi estas paginas se ven como el resto del Diario, y si manana cambian la
 * tipografia o el color desde el personalizador, cambian tambien aqui sin
 * tocar nada. Los valores detras de cada var() son solo la red de seguridad
 * por si el tema deja de publicarla.
 */

.di-exp-form,
.di-exp-acceso {
	max-width: 46rem;
	margin: 0 auto 2.5rem;
}

.di-exp-form p {
	margin: 0 0 1.1rem;
}

/* Etiquetas y botones: la tipografia de interfaz del tema. */
.di-exp-form label,
.di-exp-acceso label {
	display: block;
	margin-bottom: .3rem;
	font-family: var(--cs-font-primary-family, Inter), sans-serif;
	font-size: var(--cs-font-primary-size, .875rem);
	font-weight: var(--cs-font-primary-weight, 700);
	line-height: var(--cs-font-primary-line-height, 1.3);
	letter-spacing: var(--cs-font-primary-letter-spacing, normal);
	color: var(--cs-color-primary, #141414);
}

.di-exp-form label span {
	color: var(--cs-color-accent, #2e2f8f);
}

/* Campos: la tipografia que el tema usa en sus propios formularios. */
.di-exp-form input[type="text"],
.di-exp-form input[type="email"],
.di-exp-form input[type="tel"],
.di-exp-form input[type="url"],
.di-exp-form input[type="date"],
.di-exp-form select,
.di-exp-form textarea {
	width: 100%;
	padding: .6rem .75rem;
	border-width: 1px;
	border-style: solid;
	border-color: var(--cs-color-border, #e3dfd7);
	border-radius: 3px;
	background: #fff;
	color: var(--cs-color-primary, #141414);
	font-family: var(--cs-font-input-family, Inter), sans-serif;
	font-size: var(--cs-font-input-size, .875rem);
	font-weight: var(--cs-font-input-weight, 400);
	line-height: var(--cs-font-input-line-height, 1.3);
}

.di-exp-form input:focus,
.di-exp-form select:focus,
.di-exp-form textarea:focus {
	outline: 2px solid var(--cs-color-accent, #2e2f8f);
	outline-offset: 1px;
	border-color: var(--cs-color-accent, #2e2f8f);
}

.di-exp-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.di-exp-form input[type="file"] {
	font-family: var(--cs-font-input-family, Inter), sans-serif;
	font-size: var(--cs-font-input-size, .875rem);
	max-width: 100%;
}

.di-exp-form .di-exp-estrecho {
	width: auto;
	margin-left: .5rem;
}

/* Las aclaraciones, con la tipografia secundaria del tema. */
.di-exp-pista {
	display: block;
	margin-top: .3rem;
	font-family: var(--cs-font-secondary-family, Inter), sans-serif;
	font-size: var(--cs-font-secondary-size, .75rem);
	font-weight: var(--cs-font-secondary-weight, 400);
	line-height: 1.45;
	color: var(--cs-color-secondary, #585858);
}

/* Agrupaciones. La leyenda es un titulo, asi que lleva la fuente de titulos. */
.di-exp-grupo {
	border-width: 1px;
	border-style: solid;
	border-color: var(--cs-color-border, #e3dfd7);
	border-radius: 3px;
	padding: 1.2rem 1.3rem .5rem;
	margin: 0 0 1.5rem;
}

.di-exp-grupo legend {
	padding: 0 .45rem;
	font-family: var(--cs-font-headings-family, "Zilla Slab"), Georgia, serif;
	font-size: var(--cs-heading-4-font-size, 1.125rem);
	font-weight: var(--cs-font-headings-weight, 700);
	line-height: var(--cs-font-headings-line-height, 1.15);
	letter-spacing: var(--cs-font-headings-letter-spacing, -.01em);
	color: var(--cs-color-primary, #141414);
}

.di-exp-estados {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: .25rem 1rem;
	margin-bottom: 1rem;
}

.di-exp-estados label,
.di-exp-acepta label {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: 0;
	font-weight: var(--cs-font-base-weight, 400);
	font-size: var(--cs-font-base-size, 1rem);
	font-family: var(--cs-font-base-family, Inter), sans-serif;
}

.di-exp-acepta label {
	align-items: flex-start;
}

.di-exp-convenio {
	max-height: 18rem;
	overflow-y: auto;
	border-width: 1px;
	border-style: solid;
	border-color: var(--cs-color-border, #e3dfd7);
	border-radius: 3px;
	padding: 1rem 1.1rem;
	margin-bottom: 1rem;
	background: var(--cs-color-contrast-50, #f8f9fa);
	font-family: var(--cs-font-base-family, Inter), sans-serif;
	font-size: .9375rem;
	line-height: 1.55;
}

.di-exp-trampa {
	position: absolute;
	left: -9999px;
}

/* Boton: el acento del Diario y su tipografia de interfaz. */
.di-exp-enviar button,
.di-exp-acceso .button-primary,
.di-exp-acceso input[type="submit"] {
	padding: .75rem 1.7rem;
	border: 0;
	border-radius: 3px;
	background: var(--cs-color-accent, #2e2f8f);
	color: #fff;
	cursor: pointer;
	font-family: var(--cs-font-primary-family, Inter), sans-serif;
	font-size: var(--cs-font-primary-size, .875rem);
	font-weight: var(--cs-font-primary-weight, 700);
	letter-spacing: var(--cs-font-primary-letter-spacing, normal);
	line-height: 1.3;
}

.di-exp-enviar button:hover,
.di-exp-acceso input[type="submit"]:hover {
	filter: brightness(.88);
}

/* Avisos de resultado. */
.di-exp-aviso {
	max-width: 46rem;
	margin: 0 auto 1.5rem;
	padding: .8rem 1.05rem;
	border-left: 3px solid;
	border-radius: 0 3px 3px 0;
	font-family: var(--cs-font-base-family, Inter), sans-serif;
	font-size: .9375rem;
	line-height: 1.5;
}

.di-exp-aviso--bien {
	border-color: #1f7a52;
	background: #eef7f2;
	color: #14543a;
}

.di-exp-aviso--mal {
	border-color: #b4531f;
	background: #fcf2ec;
	color: #7d3a15;
}

/* Cabecera del panel. */
.di-exp-cabecera {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 46rem;
	margin: 0 auto 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--cs-color-border, #e3dfd7);
}

.di-exp-retrato {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
	flex: none;
}

.di-exp-hola {
	margin: 0;
	font-family: var(--cs-font-base-family, Inter), sans-serif;
}

/* Lo que ha mandado el colaborador. */
.di-exp-lista {
	list-style: none;
	max-width: 46rem;
	margin: 0 auto 1.5rem;
	padding: 0;
}

.di-exp-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	padding: .85rem 0;
	border-bottom: 1px solid var(--cs-color-border, #e3dfd7);
}

.di-exp-item__datos {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	min-width: 0;
}

.di-exp-item__datos strong {
	font-family: var(--cs-font-headings-family, "Zilla Slab"), Georgia, serif;
	font-size: var(--cs-heading-5-font-size, 1rem);
	font-weight: var(--cs-font-headings-weight, 700);
	line-height: var(--cs-font-headings-line-height, 1.15);
}

.di-exp-item__datos span {
	font-family: var(--cs-font-secondary-family, Inter), sans-serif;
	font-size: var(--cs-font-secondary-size, .75rem);
	color: var(--cs-color-secondary, #585858);
}

.di-exp-motivo {
	color: #7d3a15 !important;
}

.di-exp-item__estado {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex: none;
}

.di-exp-pastilla {
	padding: .18rem .65rem;
	border-radius: 999px;
	white-space: nowrap;
	font-family: var(--cs-font-secondary-family, Inter), sans-serif;
	font-size: var(--cs-font-secondary-size, .75rem);
	font-weight: 700;
}

.di-exp-pastilla--si {
	background: #eef7f2;
	color: #14543a;
}

.di-exp-pastilla--no {
	background: var(--cs-color-contrast-100, #f8f9fa);
	color: var(--cs-color-contrast-800, #343a40);
}

/* Ficha del autor, al pie de la nota y en su pagina. */
.di-exp-ficha {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin: 2rem 0;
	padding: 1.2rem 1.3rem;
	border-width: 1px;
	border-style: solid;
	border-color: var(--cs-color-border, #e3dfd7);
	border-left: 3px solid var(--cs-color-accent, #2e2f8f);
	border-radius: 0 3px 3px 0;
	background: var(--cs-color-contrast-50, #f8f9fa);
}

.di-exp-ficha__retrato {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
	flex: none;
}

.di-exp-ficha__texto {
	min-width: 0;
}

.di-exp-ficha__nombre {
	margin: 0 0 .25rem;
	font-family: var(--cs-font-headings-family, "Zilla Slab"), Georgia, serif;
	font-size: var(--cs-heading-5-font-size, 1rem);
	font-weight: var(--cs-font-headings-weight, 700);
	letter-spacing: var(--cs-font-headings-letter-spacing, -.01em);
}

.di-exp-ficha__resumen {
	margin: 0 0 .45rem;
	font-family: var(--cs-font-base-family, Inter), sans-serif;
	font-size: .9375rem;
	line-height: 1.5;
}

.di-exp-ficha__redes a {
	margin-right: .85rem;
	font-family: var(--cs-font-secondary-family, Inter), sans-serif;
	font-size: var(--cs-font-secondary-size, .75rem);
	font-weight: 700;
}

.di-exp-ficha__cifras {
	font-family: var(--cs-font-secondary-family, Inter), sans-serif;
	font-size: var(--cs-font-secondary-size, .75rem);
	color: var(--cs-color-secondary, #585858);
}

/**
 * Deslinde al pie del articulo.
 *
 * Tiene que leerse, pero no competir con el texto: va en cursiva, un punto
 * mas pequeno que el cuerpo y separado por un filete.
 */
/* La clase va repetida a proposito: el tema da estilo a los <p> del
   contenido con mas peso que una clase suelta, y el deslinde es un <p> dentro
   del contenido. Repetirla sube la especificidad sin recurrir a !important. */
.di-exp-deslinde.di-exp-deslinde {
	margin: 1.8rem 0 0;
	padding-top: .9rem;
	border-top: 1px solid var(--cs-color-border, #e3dfd7);
	font-family: var(--cs-font-base-family, Inter), sans-serif;
	font-size: .875rem;
	font-style: italic;
	line-height: 1.55;
	color: var(--cs-color-secondary, #585858);
}

.di-exp-imagen {
	height: auto;
	max-width: 100%;
}

@media (max-width: 600px) {
	.di-exp-item {
		flex-direction: column;
		gap: .45rem;
	}

	.di-exp-grupo {
		padding: 1rem 1rem .4rem;
	}
}

/* La puerta de vuelta: quien ya esta dado de alta llega a /colabora/ sin
   saber que su sitio es el panel. */
.di-exp-yasoy {
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: var(--cs-color-border, #e3dfd7);
	font-family: var(--cs-font-base-family, Inter), sans-serif;
	font-size: .875rem;
	color: var(--cs-color-secondary, #585858);
	text-align: center;
}

.di-exp-yasoy a {
	font-weight: 600;
	color: inherit;
	text-decoration: underline;
}