/* Los colores de la sede. La aplicacion los redefine desde el config.php
   de cada sitio; estos son los de Tierra y valen si nadie los pisa. */
:root {
	--letra: #0B6100;
	--acento: #C90012;
	--resalte: #E6F0EE;
	--letra-hover: #094e00;
}

/**
 * Retiros Online dentro de WordPress
 *
 * Todo lo que la aplicacion le agrega al sitio: el boton del panel de socio,
 * el item MI RETIRO del menu y el cartel de "contrata un plan".
 *
 * Vive aca y no en el tema a proposito. El tema se puede cambiar entero y
 * esto sigue igual, porque es de la aplicacion, no del diseno del sitio.
 * Lo carga wordpress/integracion.php.
 */

/* ------------------------------------------------------------------
   El renglon del retiro, al pie de las membresias

   Los colores del panel quedan como los deja ARMember: aca solo se
   viste el renglon que agregamos, para que no desentone con los suyos.
   ------------------------------------------------------------------ */
.esn-fila-retiro > td {
	padding: 22px 20px;
	vertical-align: middle;
}
.esn-fila-retiro-nombre { font-weight: 700; }
.esn-fila-retiro-boton { text-align: right; white-space: nowrap; }

/* Los tonos van con su numero y no con var(): la pagina del panel de socio
   la dibuja ARMember y no carga el css/styles.css del sitio, asi que ahi las
   variables del :root no existen. Son el verde primario y el rojo de acento
   del sitio, los mismos de css/styles.css. */
.esn-ingresar {
	display: inline-block;
	padding: 14px 40px;
	border: none;
	border-radius: 12px;
	background: var(--letra);
	color: #FBFCFC;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	transition: background .2s ease;
}
.esn-ingresar:hover,
.esn-ingresar:focus {
	background: var(--acento);
	color: #FBFCFC;
}

/* El color de la letra, aparte y con mas peso.
   ARMember tiene una regla propia para los enlaces de esa tabla que le gana
   a la de arriba: el fondo verde entraba y la letra quedaba oscura. Se sube
   la especificidad con a.esn-ingresar y se marca solo el color; el resto de
   la apariencia sigue saliendo de la regla normal. */
a.esn-ingresar,
a.esn-ingresar:link,
a.esn-ingresar:visited,
a.esn-ingresar:hover,
a.esn-ingresar:focus,
a.esn-ingresar:active {
	color: #FBFCFC !important;
}

/* MI RETIRO en el menu: igual que los demas items del encabezado */
.esn-mi-retiro > a { text-transform: uppercase; }


/* ------------------------------------------------------------------
   Cartel de "contrata un plan"

   Lo ve quien intenta entrar al retiro sin estar inscripto. Cae en
   /planes/ y el cartel le explica por que. Radios y tipografia copiados
   de los botones del sitio en css/styles.css.
   ------------------------------------------------------------------ */
.esn-cartel-plan {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(15,14,23,.6);
}

.esn-cartel-plan-caja {
	position: relative;
	max-width: 520px;
	width: 100%;
	padding: 48px 40px 40px;
	border-radius: 24px;
	background: #FBFCFC;
	text-align: center;
	box-shadow: 0 24px 60px rgba(15,14,23,.35);
}

.esn-cartel-plan-caja h2 {
	margin: 0 0 14px;
	color: var(--letra);
	font-family: 'Sen', sans-serif;
	font-size: 26px;
	line-height: 1.25;
}

.esn-cartel-plan-caja p {
	margin: 0 0 28px;
	color: #0f0e17;
	font-size: 16px;
	line-height: 1.6;
}

.esn-cartel-plan-caja .esn-ingresar { padding: 14px 44px; }

.esn-cartel-plan-cerrar {
	position: absolute;
	top: 14px;
	right: 18px;
	border: none;
	background: none;
	color: #7D8F9E;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}
.esn-cartel-plan-cerrar:hover { color: var(--acento); }

/* ==================================================================
   EL RECUADRO DE LA CHARLA

   Va adentro de las cuatro páginas de charla. El recuadro lo dibuja la
   aplicación del retiro, así que su estilo viaja con ella: estuvo un día
   en el tema hijo y ahí el día que se cambie de tema la charla se queda
   sin diseño.

   La fuente Earth se declara de nuevo acá a propósito. Esas páginas las
   dibuja el tema, no nuestras plantillas, así que el css/styles.css del
   sitio —donde vive el @font-face— no se carga: sin esto el título cae
   a Arial y no se parece en nada al resto del sitio. Los archivos de la
   fuente ya están en assets/fonts, al lado de esta hoja.
   ================================================================== */
@font-face {
	font-family: 'Earth';
	src: url('fonts/Earth.woff') format('woff'),
	     url('fonts/Earth.ttf') format('truetype'),
	     url('fonts/Earth.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

.esn-charla {
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
}

/* Earth y mayúscula, como todos los títulos del sitio. */
.esn-charla-titulo {
	font-family: 'Earth', Arial, sans-serif;
	text-transform: uppercase;
	font-size: 36px;
	line-height: 1.15;
	color: var(--acento);
	margin: 0 0 24px;
}

/* La placa y la fecha van juntas: la fecha se escribe encima de la franja
   de color que la imagen trae abajo, no debajo de la imagen. Todo en
   porcentajes para que siga en su lugar cuando la placa se achica. */
.esn-charla-placa-caja {
	position: relative;
	display: block;
	width: 100%;
	max-width: 420px;
	margin: 0 auto 24px;
}

.esn-charla-placa {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
}

.esn-charla-fecha-encima {
	position: absolute;
	left: 0;
	right: 0;
	/* Las dieciséis placas traen su franja de color abajo, y todas arrancan
	   cerca del 83% del alto: a esta altura el texto cae adentro de la
	   franja en las cuatro de cada sitio. */
	bottom: 4.5%;
	color: #FFFFFF;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-align: center;
	line-height: 1.2;
	padding: 0 12px;
}

.esn-charla-btn {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 12px;
	background: var(--letra);
	color: #FFFFFF;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
}

.esn-charla-btn:hover,
.esn-charla-btn:focus {
	background: var(--letra-hover);
	color: #FFFFFF;
}

/* La casilla de la fecha: es lo que la gente viene a buscar cuando entra
   días antes de la charla. */
.esn-charla-fecha {
	margin: 24px auto 0;
	padding: 14px 22px;
	border: 1px solid #DEDEEB;
	border-radius: 12px;
	background: #FFFFFF;
	display: inline-block;
}

.esn-charla-fecha-dia {
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #0E0E55;
}

.esn-charla-nota {
	font-size: 13px;
	color: #6B6B76;
	margin: 16px 0 0;
}

.esn-charla-vacia p {
	margin: 0;
	color: #6B6B76;
}

@media (max-width: 600px) {
	.esn-charla-titulo { font-size: 24px; }
	/* La placa se achica con la pantalla y la franja también: el texto tiene
	   que achicarse con ella o se le sale. */
	.esn-charla-fecha-encima { font-size: 12px; }
}