/*
 * Ruta: wp-content/plugins/esoarch-master/assets/css/esm-shell.css
 * Páginas de acceso (login y registro): cabecera propia, pie al fondo y formularios con la marca.
 * Todo va acotado a body.esm-shell.
 */

/* Tipografías de marca servidas desde el plugin (sin Google: RGPD). Licencia OFL en assets/fonts */
@font-face { font-family: "Rajdhani"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/rajdhani-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/rajdhani-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }

body.esm-shell {
	--esm-ink: #16130F;
	--esm-gold: #E6AF27;
	--esm-gold-dark: #C9971C;
	--esm-white: #F7F5F0;
	--esm-paper: #E9E3D8;
	--esm-shell-header-h: 90px; /* 16 + 57 + 16 + 1 de borde: igual que la landing */

	/* Color principal de Tutor solo en estas páginas */
	--tutor-color-primary: #E6AF27;
	--tutor-color-primary-rgb: 230, 175, 39;
	--tutor-color-primary-hover: #C9971C;

	background-color: var(--esm-paper); /* respaldo si falla la imagen de Ajustes del sitio */
}
html:has(body.esm-shell) { background-color: #E9E3D8; }

/* Deriva lenta del papel, igual que en la landing */
@media (prefers-reduced-motion: no-preference) {
	body.esm-shell { animation: esm-paper-drift 160s linear infinite; }
}
@keyframes esm-paper-drift {
	from { background-position: 0 0; }
	to   { background-position: -880px 440px; }
}

/* ---------- Cabecera ---------- */
/* Respaldo: oculta la cabecera del tema aunque no esté desactivada en los ajustes de la página */
body.esm-shell #page > header:not(.esm-header) { display: none !important; }

/* El resto de la cabecera (medidas, logo, fondo sólido) vive en esm-header.css: es la misma que la de la landing */

/* ---------- Altura mínima: pie siempre al fondo ---------- */
body.esm-shell #page.site {
	min-height: 100vh;
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	display: flex;
	flex-direction: column;
}
body.esm-shell #content.site-content {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: var(--esm-shell-header-h);
	padding-bottom: 48px;
	background: transparent;
}
body.esm-shell #colophon { flex-shrink: 0; }

/* ---------- Tarjeta del formulario ---------- */
body.esm-shell .tutor-login-wrap,
body.esm-shell #tutor-registration-wrap {
	position: relative;
	margin-top: 40px !important;
	margin-bottom: 40px !important;
	background: rgba(247, 245, 240, .96);
	border: 1px solid rgba(22, 19, 15, .18);
	border-top: 3px solid var(--esm-gold);
	border-radius: 0;
	box-shadow: 0 28px 60px -28px rgba(22, 19, 15, .5);
	font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
	color: var(--esm-ink);
}

/* Título */
body.esm-shell .tutor-login-wrap :is(.tutor-h3, .tutor-fs-4),
body.esm-shell #tutor-registration-wrap :is(.tutor-h3, .tutor-h4, .tutor-fs-4, .tutor-fs-5) {
	font-family: "Rajdhani", "Arial Narrow", Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: clamp(1.6rem, 3.2vw, 2rem) !important;
	line-height: 1 !important;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--esm-ink) !important;
}

/* Etiquetas */
body.esm-shell :is(.tutor-login-wrap, #tutor-registration-wrap, .tutor-forgot-password-form, .tutor-reset-password-form) label:not(:has(input)),
body.esm-shell :is(.tutor-login-wrap, #tutor-registration-wrap, .tutor-forgot-password-form, .tutor-reset-password-form) .tutor-form-label {
	font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(22, 19, 15, .7);
}

/* Campos */
body.esm-shell :is(.tutor-login-wrap, #tutor-registration-wrap, .tutor-forgot-password-form, .tutor-reset-password-form) .tutor-form-control {
	border-radius: 0 !important;
	border: 1px solid rgba(22, 19, 15, .28) !important;
	background-color: #fff !important;
	font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
	font-size: 16px; /* evita el zoom automático en iOS */
	color: var(--esm-ink);
	box-shadow: none !important;
	transition: border-color .2s, box-shadow .2s;
}
body.esm-shell :is(.tutor-login-wrap, #tutor-registration-wrap, .tutor-forgot-password-form, .tutor-reset-password-form) .tutor-form-control:focus {
	border-color: var(--esm-gold) !important;
	box-shadow: 0 0 0 3px rgba(230, 175, 39, .25) !important;
	outline: none;
}
/* Autocompletado del navegador sin el fondo azul */
body.esm-shell :is(.tutor-login-wrap, #tutor-registration-wrap, .tutor-forgot-password-form, .tutor-reset-password-form) .tutor-form-control:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
	-webkit-text-fill-color: var(--esm-ink);
}

/* Casillas */
body.esm-shell :is(.tutor-login-wrap, #tutor-registration-wrap, .tutor-forgot-password-form, .tutor-reset-password-form) .tutor-checkbox { border-radius: 0; accent-color: var(--esm-gold); }
body.esm-shell :is(.tutor-login-wrap, #tutor-registration-wrap, .tutor-forgot-password-form, .tutor-reset-password-form) .tutor-checkbox:checked {
	background-color: var(--esm-gold);
	border-color: var(--esm-gold);
}

/* Botón principal */
body.esm-shell :is(.tutor-login-wrap, #tutor-registration-wrap, .tutor-forgot-password-form, .tutor-reset-password-form) .tutor-btn-primary {
	background: var(--esm-gold) !important;
	border: 1px solid var(--esm-gold) !important;
	border-radius: 0 !important;
	color: var(--esm-ink) !important;
	font-family: "Rajdhani", "Arial Narrow", Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	min-height: 48px;
	transition: background-color .25s, color .25s, border-color .25s;
}
body.esm-shell :is(.tutor-login-wrap, #tutor-registration-wrap, .tutor-forgot-password-form, .tutor-reset-password-form) .tutor-btn-primary:is(:hover, :focus-visible) {
	background: var(--esm-ink) !important;
	border-color: var(--esm-ink) !important;
	color: var(--esm-white) !important;
}

/* Enlaces (¿Olvidaste la contraseña?, Regístrate, Acceder…) */
body.esm-shell :is(.tutor-login-wrap, #tutor-registration-wrap, .tutor-forgot-password-form, .tutor-reset-password-form) :is(.tutor-btn-link, .tutor-btn-link-gray) {
	color: var(--esm-ink) !important;
	text-decoration: underline;
	text-decoration-color: var(--esm-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
body.esm-shell :is(.tutor-login-wrap, #tutor-registration-wrap, .tutor-forgot-password-form, .tutor-reset-password-form) :is(.tutor-btn-link, .tutor-btn-link-gray):hover {
	color: var(--esm-gold-dark) !important;
}

/* Foco visible accesible */
body.esm-shell :is(.tutor-login-wrap, #tutor-registration-wrap, .tutor-forgot-password-form, .tutor-reset-password-form) :is(a, button):focus-visible {
	outline: 2px solid var(--esm-gold);
	outline-offset: 3px;
}

/* ---------- Recuperar / restablecer contraseña ---------- */
/* Tarjeta de Tutor (sin hook interior): se estiliza igual y se une a la cabecera que pintamos encima */
body.esm-shell .tutor-card:has(> .tutor-forgot-password-form),
body.esm-shell .tutor-card:has(> .tutor-reset-password-form) {
	max-width: 520px !important;
	margin: 0 auto 40px !important;
	background: rgba(247, 245, 240, .96);
	border: 1px solid rgba(22, 19, 15, .18);
	border-top: 0;
	border-radius: 0;
	box-shadow: 0 28px 60px -28px rgba(22, 19, 15, .5);
	font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
	color: var(--esm-ink);
}
body.esm-shell :is(.tutor-forgot-password-form, .tutor-reset-password-form) { padding: 16px 32px 32px !important; }
body.esm-shell :is(.tutor-forgot-password-form, .tutor-reset-password-form) .tutor-mb-8:empty { display: none; }
body.esm-shell :is(.tutor-forgot-password-form, .tutor-reset-password-form) > p {
	font-size: 15px;
	line-height: 1.55;
	color: rgba(22, 19, 15, .78);
}
body.esm-shell .esm-card-head--joined {
	box-sizing: border-box;
	width: 100%;
	max-width: 520px;
	margin: 40px auto 0;
	background: rgba(247, 245, 240, .96);
	border: 1px solid rgba(22, 19, 15, .18);
	border-top: 3px solid var(--esm-gold);
	border-bottom: 0;
}

/* ---------- Título dentro de la tarjeta (registro) ---------- */
/* El título del tema se pinta sobre el papel con poco contraste: lo ocultamos */
body.esm-shell .entry-header { display: none !important; }

/* Mismo arranque que el login: el título pegado al filete dorado */
body.esm-shell #tutor-registration-wrap { padding-top: 0 !important; }
body.esm-shell #tutor-registration-form { padding-top: 24px !important; }

body.esm-shell .esm-card-head { padding: 32px 32px 0; }
body.esm-shell .esm-card-head__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--esm-gold-dark);
}
body.esm-shell .esm-card-head__eyebrow::before {
	content: "";
	width: 24px;
	height: 1px;
	background: var(--esm-gold);
}
body.esm-shell .esm-card-head__title {
	margin: 0;
	font-family: "Rajdhani", "Arial Narrow", Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(1.6rem, 3.2vw, 2rem);
	line-height: 1;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--esm-ink);
	text-wrap: balance;
}

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
	body.esm-shell { --esm-shell-header-h: 75px; } /* altura real de la cabecera en móvil */
	body.esm-shell .esm-card-head { padding: 24px 24px 0; }
	body.esm-shell .esm-card-head--joined { width: auto; margin: 24px 16px 0; }
	body.esm-shell .tutor-card:has(> .tutor-forgot-password-form),
	body.esm-shell .tutor-card:has(> .tutor-reset-password-form) { margin: 0 16px 24px !important; }
	body.esm-shell :is(.tutor-forgot-password-form, .tutor-reset-password-form) { padding: 16px 24px 24px !important; }
	body.esm-shell .tutor-login-wrap,
	body.esm-shell #tutor-registration-wrap {
		width: auto !important;
		margin: 24px 16px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.esm-shell { animation: none; }
}