/*
 * Estilos del modo socia.
 *
 * Divi sigue inyectando su CSS por wp_head() aunque no pintemos su
 * cabecera, así que estas reglas cuelgan de .dharma-socias para tener
 * más especificidad que las suyas. Sin ese prefijo, Divi gana.
 */

.dharma-socias {
	margin: 0;
	background: #faf8f6;
	color: #2c2622;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	/*
	 * Estas tres las declara Divi en el body y sin repetirlas aquí se
	 * heredan a todo el árbol. La peligrosa es el line-height: Divi lo pone
	 * en 1.7em, y un line-height CON unidad computa una vez (23,8 px) y se
	 * hereda como longitud fija, no como factor. La barra de pestañas, con
	 * letra de 0,65rem, heredaba 23,8 px de interlineado y salía de unos
	 * 66 px de alto en vez de los 44 del diseño. Sin unidad, cada elemento
	 * lo calcula sobre su propia letra.
	 */
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 400;
	/*
	 * El tema hijo pone overflow-x: hidden en html Y en body. Cuando el
	 * html ya tiene overflow no visible, la propagación al viewport se hace
	 * con el html y el del body se aplica al body mismo, que se convierte
	 * en contenedor de scroll de altura automática. Dentro de un contenedor
	 * que nunca hace scroll, position: sticky no pega nada: la barra de
	 * pestañas se iba con el contenido en vez de quedarse abajo. Esto lo
	 * devuelve a visible sin tocar el recorte del html, que sigue evitando
	 * el scroll horizontal igual que antes.
	 */
	overflow-x: visible;
}

/*
 * Divi mete p { padding-bottom: 1em } por CSS en línea. Nuestras reglas
 * ponen margin: 0 pero no padding, así que cada <p> se llevaba 1em de aire
 * de más: unos 31 px solo en la cabecera. Se corta una vez, aquí, y vale
 * para el aviso, la próxima clase y todo lo que venga.
 */
.dharma-socias p {
	padding-bottom: 0;
}

/*
 * El reset de Divi lleva a { outline: 0 }, y en estas pantallas la
 * navegación entera son enlaces sin subrayado. Sin esto, quien use teclado
 * o Switch Control no ve dónde está parado.
 */
.dharma-socias a:focus-visible {
	outline: 2px solid #6b5b4e;
	outline-offset: 2px;
}

.dharma-socias .ds {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	max-width: 640px;
	margin: 0 auto;
	background: #faf8f6;
}

.dharma-socias .ds-top {
	background: #6b5b4e;
	color: #fff;
	padding: 1rem 1.25rem 0.9rem;
	padding-top: calc(1rem + env(safe-area-inset-top));
}

.dharma-socias .ds-top--alerta {
	background: #8a4b3f;
}

.dharma-socias .ds-top__saludo {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 600;
}

.dharma-socias .ds-top__plan {
	margin: 0.2rem 0 0;
	font-size: 0.8rem;
	opacity: 0.85;
}

.dharma-socias .ds-cuerpo {
	flex: 1;
	display: flex;
	flex-direction: column;
	/*
	 * Aquí abajo había 4,5rem de padding en vez de estos 0,9: hueco
	 * reservado para que el botón flotante de WhatsApp no se posara encima
	 * del contenido. El botón ya no se pinta en estas pantallas —lo quita
	 * dharma_socias_quitar_boton_whatsapp()— así que esos 72 px vuelven a
	 * ser pantalla, que en un móvil es casi una fila entera.
	 */
	padding: 0.9rem;
}

.dharma-socias .ds-aviso {
	background: #f4e6cf;
	border-left: 3px solid #c69a54;
	border-radius: 6px;
	padding: 0.6rem 0.75rem;
	margin-bottom: 0.8rem;
}

.dharma-socias .ds-aviso__titulo {
	margin: 0 0 0.2rem;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	/* #8a6a2f sobre el #f4e6cf del aviso daba 4,08:1. Este da 4,55:1. */
	color: #81632c;
}

.dharma-socias .ds-aviso__texto {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.45;
	/*
	 * El aviso se escribe en un textarea, así que puede llevar saltos de
	 * línea. esc_html() no los toca y el navegador los colapsaría a un
	 * espacio, dejando dos párrafos corridos en uno. Se respeta aquí y no
	 * con nl2br() en PHP: es presentación, y meterlo en el HTML obligaría
	 * a escapar en un orden concreto que una edición futura invertiría sin
	 * que ninguna prueba lo notara.
	 */
	white-space: pre-line;
}

.dharma-socias .ds-cuota {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	background: #fff;
	border: 1px solid #e6ded6;
	border-radius: 9px;
	padding: 0.65rem 0.8rem;
	margin-bottom: 0.8rem;
}

.dharma-socias .ds-cuota__numero {
	font-size: 1.6rem;
	font-weight: 600;
	color: #6b5b4e;
	line-height: 1;
}

.dharma-socias .ds-cuota__texto {
	font-size: 0.8rem;
	color: #6f635a;
	line-height: 1.35;
}

.dharma-socias .ds-cuota__texto small {
	display: block;
	font-size: 0.72rem;
	/* #a8998c sobre blanco daba 2,76:1. Este da 4,53:1. */
	color: #857364;
	margin-top: 0.1rem;
}

.dharma-socias .ds-proxima {
	background: #6b5b4e;
	color: #fff;
	border-radius: 10px;
	padding: 0.9rem;
	margin-bottom: 0.75rem;
}

.dharma-socias .ds-proxima__et {
	margin: 0;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.72;
}

.dharma-socias .ds-proxima__nombre {
	margin: 0.3rem 0 0.1rem;
	font-size: 1.05rem;
	font-weight: 600;
}

.dharma-socias .ds-proxima__cuando {
	margin: 0;
	font-size: 0.8rem;
	opacity: 0.9;
}

.dharma-socias .ds-centro {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	padding: 1rem 0.5rem 1.4rem;
}

.dharma-socias .ds-centro__icono {
	font-size: 1.8rem;
	margin-bottom: 0.5rem;
}

.dharma-socias .ds-centro__titulo {
	margin: 0 0 0.35rem;
	font-size: 0.95rem;
	font-weight: 600;
}

.dharma-socias .ds-centro__texto {
	margin: 0;
	font-size: 0.8rem;
	color: #6f635a;
	line-height: 1.5;
}

/*
 * Los iconos, que ahora son <svg> y ya no glifos de una fuente.
 *
 * EN em Y NO EN rem, a propósito: cada icono mide 1,15 veces la letra que
 * tiene al lado, que es aproximadamente lo que ocupaba el emoji al que
 * sustituye. Así la fila de 0,85rem y el estado vacío de 1,8rem siguen
 * teniendo el mando del tamaño donde lo tenían —en su propio font-size— y
 * no hay una tabla de tamaños por sitio que mantener.
 *
 * 'flex: none' porque .ds-fila es un flex y el <svg> es uno de sus hijos:
 * sin esto, una etiqueta larga en una pantalla estrecha lo aplasta a un
 * óvalo en vez de partirse ella, que es lo que tiene que hacer.
 *
 * El vertical-align solo lo usa el <p> del estado vacío, que no es flex.
 */
.dharma-socias .ds-icono {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	vertical-align: -0.18em;
}

/*
 * El icono del estado vacío va en el gris de las flechas.
 *
 * Un emoji traía sus propios colores; un trazo monocromo hereda el del
 * texto, y en negro pesa tanto como el titular que tiene debajo. Es
 * decorativo —lleva aria-hidden— así que el contraste no le aplica.
 */
.dharma-socias .ds-centro__icono .ds-icono {
	color: #b3a79d;
}

.dharma-socias .ds-cta {
	display: block;
	width: 100%;
	box-sizing: border-box;
	/* Blanco sobre el #c69a54 original daba 2,58:1. Este da 4,51:1. */
	background: #967032;
	color: #fff;
	border: 0;
	border-radius: 9px;
	padding: 0.9rem;
	font-size: 0.95rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.dharma-socias .ds-cta--grave {
	background: #8a4b3f;
}

.dharma-socias .ds-fila {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	background: #fff;
	border: 1px solid #e6ded6;
	border-radius: 9px;
	padding: 0.75rem;
	margin-top: 0.5rem;
	font-size: 0.85rem;
	color: inherit;
	text-decoration: none;
}

.dharma-socias .ds-fila__flecha {
	margin-left: auto;
	color: #b3a79d;
}

.dharma-socias .ds-salida {
	display: block;
	text-align: center;
	font-size: 0.75rem;
	/* #8a7d73 sobre el #faf8f6 de la página daba 3,77:1. Este da 4,54:1. */
	color: #7c7067;
	margin-top: 1rem;
}

/*
 * El alto de la barra, DERIVADO de las piezas que lo componen.
 *
 * ESTE CALC() NACIÓ PARA OTRA COSA: el botón flotante de WhatsApp se
 * apartaba exactamente esta distancia del borde inferior, y de que los dos
 * números fueran el mismo dependía que el botón no tapara la pestaña
 * "Cuenta". Ese botón ya no se pinta en estas pantallas, así que el alto de
 * la barra no le debe nada a nadie.
 *
 * Lo que queda en pie es el min-height de .ds-nav, que lee esta variable.
 * No evita ninguna colisión —el alto natural de la barra ya es exactamente
 * este, porque el calc() suma sus mismas piezas—: lo que compra es que si
 * alguien encoge el padding, la barra no se hunda por debajo de lo que el
 * diseño dice que mide. Sigue calculado a partir de las variables en vez
 * de medido y copiado, y por el mismo motivo de siempre: un número
 * redondeado a ojo no se entera de que se lo han cambiado.
 *
 * El 1,5 de --ds-nav-icono-caja era, cuando el icono era un emoji, el
 * line-height heredado de .dharma-socias: el alto de la barra dependía de
 * una herencia que no se nombraba en ninguna parte, y tocar aquel
 * line-height la movía sin avisar. Un <svg> no tiene line-height, así que
 * al cambiar los emojis ese número pasó de ser una coincidencia heredada a
 * ser una altura DECLARADA: la misma variable la lee este calc() y la lee
 * .ds-nav__icono, que ahora es una caja de ese alto exacto con el dibujo
 * centrado dentro. El número no se movió —siguen siendo 61,8 px— pero
 * ahora hay un solo sitio donde cambiarlo.
 *
 * Sale 3,8rem + 1px, o sea 61,8 px con la raíz en 16 —lo mismo que dio
 * medir la barra en el navegador, 61,77— pero ahora es exacto a cualquier
 * tamaño de raíz. El borde va aparte y en px justamente porque es lo único
 * que NO escala con la raíz.
 */
.dharma-socias {
	--ds-nav-borde: 1px;
	--ds-nav-pad-sup: 0.55rem;
	--ds-nav-pad-inf: 0.6rem;
	--ds-nav-icono: 1.05rem;
	--ds-nav-icono-caja: calc(var(--ds-nav-icono) * 1.5);
	--ds-nav-hueco: 0.1rem;
	--ds-nav-letra: 0.65rem;
	--ds-alto-barra: calc(
		var(--ds-nav-borde)
		+ var(--ds-nav-pad-sup)
		+ var(--ds-nav-icono-caja)
		+ var(--ds-nav-hueco)
		+ (var(--ds-nav-letra) * 1.5)
		+ var(--ds-nav-pad-inf)
	);
}

.dharma-socias .ds-nav {
	display: flex;
	position: sticky;
	bottom: 0;
	background: #fff;
	border-top: var(--ds-nav-borde) solid #e6ded6;
	padding-bottom: env(safe-area-inset-bottom);
	/*
	 * border-box declarado y no heredado: Divi lo pone con un selector
	 * universal y esta caja ya no puede depender de que siga haciéndolo.
	 * Con border-box el env() del padding cuenta DENTRO del min-height, así
	 * que se suma también aquí; sin sumarlo, en un iPhone con barra de
	 * gestos la barra no crecería y el hueco se comería el alto del
	 * contenido.
	 *
	 * Qué compra este min-height, sin exagerar: el alto natural de la barra
	 * ya es exactamente --ds-alto-barra, porque el calc() suma sus mismas
	 * piezas. Lo que evita es que, si alguien encoge el padding, la barra
	 * se hunda por debajo de lo que el diseño dice que mide. El caso
	 * contrario, engordarla por fuera de las variables, no lo cubre: eso
	 * solo lo ve una prueba de navegador.
	 *
	 * Las dos declaraciones son el mismo idioma que el min-height de .ds:
	 * un navegador que no parsee env() tira la línea entera, y sin la
	 * primera se quedaría sin min-height ninguno.
	 */
	box-sizing: border-box;
	min-height: var(--ds-alto-barra);
	min-height: calc(var(--ds-alto-barra) + env(safe-area-inset-bottom));
}

.dharma-socias .ds-nav__item {
	flex: 1;
	text-align: center;
	/* Estas tres las suma --ds-alto-barra, o sea que cambiarlas mueve el
	   alto declarado de la barra. Los 0,15rem de los lados no, que no
	   hacen alto. */
	padding: var(--ds-nav-pad-sup) 0.15rem var(--ds-nav-pad-inf);
	font-size: var(--ds-nav-letra);
	/* #8a7d73 sobre el blanco de la barra daba 3,99:1. Este da 4,52:1. */
	color: #81746b;
	text-decoration: none;
}

.dharma-socias .ds-nav__item--activo {
	color: #6b5b4e;
	font-weight: 700;
}

/*
 * La caja del icono de la barra, de alto fijo y con el dibujo centrado.
 *
 * El alto es una variable y no 'lo que ocupe el contenido' porque de él
 * depende --ds-alto-barra: con una caja que creciera sola, el min-height de
 * la barra y su alto real dejarían de ser el mismo número y el calc() de
 * arriba pasaría a describir una barra que no existe.
 *
 * El dibujo mide 1,25 veces --ds-nav-icono y no una vez: un emoji pintaba
 * un glifo más grande que su propio font-size, y con el lado igual a la
 * variable la barra se veía encogida al lado de la de antes. Sigue
 * cabiendo de sobra en la caja, que es 1,5 veces.
 */
.dharma-socias .ds-nav__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--ds-nav-icono-caja);
	margin-bottom: var(--ds-nav-hueco);
}

.dharma-socias .ds-nav__icono .ds-icono {
	width: calc(var(--ds-nav-icono) * 1.25);
	height: calc(var(--ds-nav-icono) * 1.25);
}

/*
 * Aquí vivía la regla que subía el botón flotante de WhatsApp por encima
 * de la barra, porque wp-whatsapp-chat lo pinta fijo abajo a la derecha
 * con z-index 9999999 y se comía entera la pestaña "Cuenta".
 *
 * Ya no hace falta y no se ha perdido nada por el camino: el botón no
 * llega a pintarse. dharma_socias_quitar_boton_whatsapp(), en
 * includes/whatsapp.php, le quita al plugin sus dos hooks antes de que
 * corran. Esto queda escrito para que nadie que busque "qlwapp" en este
 * archivo crea que se olvidó: se quitó a propósito, y del lado del PHP,
 * que es donde no puede volver por una regla de CSS que gane.
 */

/*
 * La pantalla de acceso.
 *
 * EL MARCADO NO ES NUESTRO. wp_login_form() pinta lo suyo —p.login-username,
 * p.login-password, p.login-remember, p.login-submit y un
 * input[type=submit] con class="button button-primary"— y ninguna de esas
 * clases sabe nada del modo socia. Sin las reglas de abajo, Divi es quien
 * estiliza el formulario: sus márgenes de <p>, su botón, su tipografía, en
 * medio de una pantalla que no tiene nada de Divi. Se alcanza por el
 * contenedor (.ds-acceso) y por el tipo de campo, no renombrando nada, que
 * el marcado lo decide el núcleo y cambia solo.
 *
 * El 'button-primary' de ese input es una clase de wp-admin y en el
 * frontal no la estiliza nadie: no hay que deshacer nada suyo, solo
 * ponerle el aspecto de .ds-cta a mano.
 */
.dharma-socias .ds-acceso {
	padding: 1.5rem 0;
}

.dharma-socias .ds-acceso__titulo {
	margin: 0 0 0.3rem;
	font-size: 1.05rem;
	font-weight: 600;
}

.dharma-socias .ds-acceso__texto {
	margin: 0;
	font-size: 0.8rem;
	color: #6f635a;
	line-height: 1.5;
}

/*
 * El aviso de intento fallido. Mismo patrón que .ds-aviso —franja de
 * color a la izquierda— pero en el rojo de .ds-top--alerta, que es el
 * color que este sitio ya usa para lo que va mal.
 */
.dharma-socias .ds-acceso__error {
	background: #f7e4e0;
	border-left: 3px solid #8a4b3f;
	border-radius: 6px;
	padding: 0.6rem 0.75rem;
	margin: 0.9rem 0 0;
	font-size: 0.8rem;
	/* #7a4136 sobre el #f7e4e0 del aviso da 6,3:1. */
	color: #7a4136;
	line-height: 1.45;
}

/*
 * Los <p> del formulario son de wp_login_form(), no nuestros: llevan el
 * margen por defecto del navegador más lo que les ponga Divi. El aire
 * entre campos lo dan las etiquetas, no ellos. Acotado a form para no
 * ganarle en especificidad a .ds-acceso__titulo, que también es un <p>.
 */
.dharma-socias .ds-acceso form p {
	margin: 0;
}

.dharma-socias .ds-acceso label {
	display: block;
	font-size: 0.8rem;
	margin: 0.75rem 0 0.25rem;
}

.dharma-socias .ds-acceso input[type="text"],
.dharma-socias .ds-acceso input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem;
	border: 1px solid #d8cec4;
	border-radius: 8px;
	/*
	 * Un input NO hereda la tipografía de la página por su cuenta, y el
	 * reset de Divi tampoco se la da: sin esto, lo que escribe la socia
	 * sale en la letra del sistema y el resto de la pantalla en la nuestra.
	 */
	font-family: inherit;
	/*
	 * 1rem y no menos: por debajo de 16 px Safari de iOS hace zoom al
	 * enfocar el campo, y la pantalla se queda desencuadrada justo cuando
	 * la socia está escribiendo.
	 */
	font-size: 1rem;
}

/*
 * La casilla de recordar, que es el único <label> que envuelve a su campo
 * en vez de precederlo: con el display:block de arriba, el texto se iba a
 * la línea de abajo. En fila, y la casilla sin estirarse.
 */
.dharma-socias .ds-acceso .login-remember label {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 1rem 0 0;
}

.dharma-socias .ds-acceso .login-remember input {
	flex: none;
	width: auto;
	margin: 0;
}

/*
 * El botón de entrar, con el mismo aspecto que .ds-cta. No se le puede
 * poner esa clase —el marcado lo escribe el núcleo—, así que las
 * declaraciones se repiten aquí; si un día cambia el color de la casa,
 * son dos sitios.
 *
 * appearance: none es lo que quita el botón nativo de iOS, que ignora el
 * fondo y sale gris con las esquinas redondeadas del sistema. Y
 * font-family: inherit porque un input NO hereda la tipografía de la
 * página por su cuenta: sin esto el botón sale en la del sistema mientras
 * el resto de la pantalla va en la nuestra.
 */
.dharma-socias .ds-acceso input[type="submit"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	/* El mismo #967032 de .ds-cta: blanco encima da 4,51:1. */
	background: #967032;
	color: #fff;
	border: 0;
	border-radius: 9px;
	padding: 0.9rem;
	margin-top: 1.1rem;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
}

/*
 * "He olvidado mi contraseña" va pegado al formulario, no con las salidas
 * del fondo: es parte de intentar entrar. Por eso tiene su propia clase y
 * no .ds-salida, que lleva margin-top: auto en esta pantalla y se lo
 * llevaría al final.
 */
.dharma-socias .ds-acceso__olvido {
	display: block;
	text-align: center;
	font-size: 0.78rem;
	/* El mismo gris de .ds-salida: 4,54:1 sobre el fondo de la página. */
	color: #7c7067;
	margin-top: 0.9rem;
}

/*
 * La tarjeta de membresía de la pantalla de cuenta.
 *
 * Con sus propias clases y no reutilizando .ds-centro__titulo y
 * .ds-centro__texto, que son del bloque centrado del estado vacío: los
 * tamaños encajaban de casualidad, pero quien retoque el estado vacío
 * —donde el texto va centrado y con la pantalla entera para él— movería
 * esta tarjeta sin enterarse. El ritmo es el mismo de .ds-proxima, que es
 * la otra tarjeta de la casa, en blanco en vez de en marrón.
 */
.dharma-socias .ds-tarjeta {
	background: #fff;
	border: 1px solid #e6ded6;
	border-radius: 10px;
	padding: 0.9rem;
	margin-bottom: 0.5rem;
}

.dharma-socias .ds-tarjeta__et {
	margin: 0;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	/* Mismo gris que el pie de la franja de cuota: 4,53:1 sobre blanco. */
	color: #857364;
}

.dharma-socias .ds-tarjeta__plan {
	margin: 0.3rem 0 0.1rem;
	font-size: 1.05rem;
	font-weight: 600;
}

.dharma-socias .ds-tarjeta__texto {
	margin: 0;
	font-size: 0.8rem;
	color: #6f635a;
	line-height: 1.45;
}

/*
 * Una fila de dos líneas: su nombre y, debajo, un dato.
 *
 * El min-width: 0 no es cosmético. Un elemento flexible no baja de su
 * tamaño mínimo de contenido, y un correo largo no tiene por dónde
 * partirse: sin esto la fila se ensancha, empuja la flecha fuera de la
 * tarjeta y saca scroll horizontal a la pantalla. Con esto, y con el
 * overflow-wrap, el correo se parte donde haga falta.
 */
.dharma-socias .ds-fila__texto {
	min-width: 0;
	overflow-wrap: anywhere;
}

.dharma-socias .ds-fila__texto small {
	display: block;
	font-size: 0.72rem;
	/* Mismo gris y mismo motivo que en la franja de cuota: 4,53:1. */
	color: #857364;
	margin-top: 0.1rem;
}

/*
 * La salida al sitio comercial se va al fondo de la pantalla.
 *
 * .ds-cuerpo es una columna flexible, así que el margen automático se come
 * el hueco que sobra y deja este enlace abajo del todo en vez de colgando
 * justo debajo de la última fila. Es lo que hace que exista para quien la
 * busca sin invitar a irse. Si el contenido llena la pantalla, el auto
 * vale cero y el padding sigue dándole aire.
 *
 * Vale para las dos pantallas que lo pintan, cuenta y acceso, y en las dos
 * por lo mismo. En la de acceso la salida al sitio comercial compite con
 * lo único que ahí importa, que es entrar: al fondo sigue estando para
 * quien la busca. Lo que NO hereda esto es "He olvidado mi contraseña",
 * que tiene clase propia justamente para quedarse pegado al formulario.
 */
.dharma-socias--cuenta .ds-salida,
.dharma-socias--acceso .ds-salida {
	margin-top: auto;
	padding-top: 1.25rem;
}