/* =========================================================================
   Mastercoip 2026 — «Acceso alumnos».
   Réplica del artboard 18-acceso-alumnos (1920 x 1131).

   Geometría medida en el SPEC del XD:
     tarjeta        559 x 446, radio 20, sombra 0 0 10 rgba(0,0,0,.161), y=270
     titular        30/36, dos líneas, y=310 (40 px bajo el borde de la tarjeta)
     campos         478 x 45, radio 10, borde 1px #292B32, y=422 y y=497
     etiqueta       x=742, es decir 20 px dentro del campo
     casilla        20 x 20, radio 5, y=572; enlace de contraseña a la derecha
     botón          478 x 40, radio 20, #292B32, texto crema y chevron a 11,68
                    px del borde derecho; al pasar el ratón, #525255
     cabecera       termina en y=120  ->  150 px sobre la tarjeta
     pie            arranca en y=916  ->  200 px bajo la tarjeta

   Nota sobre especificidad: WooCommerce marca form.login con borde, relleno y
   margen propios (`.woocommerce form.login`, 0-2-1) y las filas con
   `.woocommerce form .form-row` (0-3-0). Las reglas de aquí igualan esa
   especificidad —esta hoja se encola después de woocommerce-general, así que
   gana— en vez de recurrir a !important.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Lienzo de la pantalla
   ---------------------------------------------------------------------- */

/* El contenido de WooCommerce llega por shortcode dentro del bloque de
   contenido, que en page-lienzo no lleva ni ancho ni margen propios. */
body.coip-cuenta-page .wp-block-post-content {
	padding: 150px var(--coip-gutter) 200px;
}

body.coip-cuenta-page .wp-block-post-content > .woocommerce {
	max-width: var(--coip-container);
	margin-inline: auto;
}

.coip-cuenta {
	font-size: var(--coip-fs-ui);
	line-height: var(--coip-lh-ui);
	color: var(--coip-charcoal);
}

.coip-cuenta__columns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}

/* -------------------------------------------------------------------------
   Tarjeta
   ---------------------------------------------------------------------- */

.coip-cuenta__box {
	background: var(--coip-white);
	border-radius: var(--coip-radius);
	box-shadow: var(--coip-shadow);
}

/* 559 = 478 del formulario + 40,5 px de aire a cada lado.
   446 = 40 + 72 (titular) + 40 + 45 + 30 + 45 + 30 + 20 + 30 + 40 + 54. */
.coip-cuenta .coip-cuenta__card {
	float: none;
	width: 559px;
	max-width: 100%;
	padding: 40px 40.5px 54px;
}

.coip-cuenta__title {
	margin: 0;
	font-size: var(--coip-fs-hero);
	line-height: var(--coip-lh);
	font-weight: 700;
	text-align: center;
	color: var(--coip-ink);
}

.coip-cuenta__kicker {
	display: block;
	font-weight: 900;
	color: var(--coip-lilac);
}

.coip-cuenta__heading {
	display: block;
}

/* -------------------------------------------------------------------------
   Formulario
   ---------------------------------------------------------------------- */

.coip-cuenta form.coip-cuenta__form {
	margin: 40px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	text-align: left;
}

.coip-cuenta .coip-cuenta__form .coip-cuenta__field {
	margin: 0;
	padding: 0;
}

.coip-cuenta .coip-cuenta__form .coip-cuenta__field + .coip-cuenta__field {
	margin-top: 30px;
}

/* WooCommerce cuela un clearfix (::before/::after display:table) en toda
   .form-row; dentro de una fila flex se convierten en dos ítems fantasma que
   descolocan la casilla y el enlace. */
.coip-cuenta .coip-cuenta__form .coip-cuenta__field::before,
.coip-cuenta .coip-cuenta__form .coip-cuenta__field::after,
.coip-cuenta .coip-cuenta__form .coip-cuenta__options::before,
.coip-cuenta .coip-cuenta__form .coip-cuenta__options::after {
	content: none;
	display: none;
}

/* El campo hay que ganárselo a dos reglas de WooCommerce más específicas de lo
   habitual: `.woocommerce form .form-row .input-text` (0-3-1) y, en temas de
   bloques, `.woocommerce-page form .form-row input.input-text` (0-3-2). */
body.coip-cuenta-page .coip-cuenta .coip-cuenta__form input.coip-cuenta__input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 45px;
	margin: 0;
	padding: 0 19px; /* 20 px del diseño menos el borde de 1 px */
	background: transparent;
	color: var(--coip-ink);
	border: 1px solid var(--coip-charcoal);
	border-radius: var(--coip-radius-sm);
	font-family: inherit;
	font-size: var(--coip-fs-ui);
	line-height: var(--coip-lh-ui);
	font-weight: 400;
	box-shadow: none;
}

/* El diseño pone la etiqueta dentro del campo: aquí es el placeholder, con la
   <label> equivalente oculta para lectores de pantalla. */
body.coip-cuenta-page .coip-cuenta .coip-cuenta__form input.coip-cuenta__input::placeholder {
	color: var(--coip-ink);
	opacity: 1;
}

/* El ojo de «mostrar contraseña» que añade el navegador no está en el diseño y
   desalinea el campo. */
body.coip-cuenta-page .coip-cuenta .coip-cuenta__form input.coip-cuenta__input::-ms-reveal {
	display: none;
}

body.coip-cuenta-page .coip-cuenta .coip-cuenta__form input.coip-cuenta__input::-ms-clear {
	display: none;
}

/* WooCommerce envuelve el campo de contraseña en <span class="password-input">
   y le cuelga un botón de ojo. El artboard dibuja el campo limpio, así que el
   envoltorio se hace transparente y el ojo se retira. */
body.coip-cuenta-page .coip-cuenta .coip-cuenta__form .password-input {
	display: block;
	position: static;
	width: 100%;
	margin: 0;
	padding: 0;
}

body.coip-cuenta-page .coip-cuenta .coip-cuenta__form .show-password-input {
	display: none;
}

/* Ratón y foco de los dos campos del acceso.

   El halo compartido lo define assets/css/forms.css, pero allí va envuelto en
   :where() para poder perder contra cualquier hoja de página, y la regla de
   arriba —(0,5,1), con `box-shadow: none` para quitarle a WooCommerce su
   sombra interior— se lo comería. Aquí se repite a ese mismo nivel. El foco
   se distingue del ratón por el contorno y por el halo al doble: en una
   tarjeta de dos campos, saber en cuál se está escribiendo es todo el
   trabajo que tiene que hacer el estado. */
@media (hover: hover) and (pointer: fine) {
	body.coip-cuenta-page .coip-cuenta .coip-cuenta__form input.coip-cuenta__input:hover {
		box-shadow: 0 0 0 3px var(--coip-field-ring);
	}
}

body.coip-cuenta-page .coip-cuenta .coip-cuenta__form input.coip-cuenta__input:focus {
	border-color: var(--coip-charcoal);
	outline: 2px solid var(--coip-charcoal);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--coip-field-ring-fuerte);
}

.coip-cuenta .coip-cuenta__form .coip-cuenta__note {
	margin: 30px 0 0;
	padding: 0;
	font-size: var(--coip-fs-ui);
	line-height: 1.5;
}

/* Fila de «Recuérdame» / «No recuerdo mi contraseña»: 30 px bajo el campo y
   20 px de alto, el de la casilla. */
.coip-cuenta .coip-cuenta__form .coip-cuenta__options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin: 30px 0 0;
	padding: 0;
	min-height: 20px;
}

.coip-cuenta .coip-cuenta__form .coip-cuenta__remember {
	display: inline-flex;
	align-items: center;
	gap: 10px; /* casilla en x=722..742, texto en x=752 */
	margin: 0;
	line-height: var(--coip-lh-ui);
	cursor: pointer;
}

/* La casilla en sí la pinta assets/css/forms.css, igual que en el resto
   del sitio; aquí sólo queda su hueco de 20 px (x=722..742 en el XD). */

.coip-cuenta .coip-cuenta__form .coip-cuenta__lost {
	text-align: right;
	color: var(--coip-charcoal);
	text-underline-offset: 3px;
	transition: color var(--coip-dur-rapida) var(--coip-ease);
}

/* «No recuerdo mi contraseña» es texto suelto del mismo color que el resto de
   la tarjeta: sin estado, no parecía un enlace. Al apuntarlo se subraya y pasa
   al violeta del sitio. */
.coip-cuenta .coip-cuenta__form .coip-cuenta__lost:hover,
.coip-cuenta .coip-cuenta__form .coip-cuenta__lost:focus-visible {
	color: var(--coip-violet);
	text-decoration: underline;
}


/* -------------------------------------------------------------------------
   Botón «ENTRAR»
   ---------------------------------------------------------------------- */

.coip-cuenta .coip-cuenta__form .coip-cuenta__submit {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	margin: 30px 0 0;
	padding: 0 30px;
	background: var(--coip-charcoal);
	color: var(--coip-cream);
	border: 1px solid var(--coip-charcoal);
	border-radius: var(--coip-radius);
	font-family: inherit;
	font-size: var(--coip-fs-ui);
	line-height: var(--coip-lh-ui);
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--coip-dur) var(--coip-ease),
		border-color var(--coip-dur) var(--coip-ease),
		transform var(--coip-dur-rapida) var(--coip-ease-suave),
		box-shadow var(--coip-dur-rapida) var(--coip-ease-suave);
}

/* El centrado va en `translate` y no en `transform` justamente para dejarle el
   `transform` libre al avance del hover: las dos propiedades son
   independientes y el navegador las compone. */
.coip-cuenta .coip-cuenta__form .coip-cuenta__submit .coip-chevron {
	position: absolute;
	inset-inline-end: 11.68px; /* el chevron del XD cierra a 478-459-7,32 px */
	top: 50%;
	translate: 0 -50%;
}

.coip-cuenta .coip-cuenta__form .coip-cuenta__submit:hover,
.coip-cuenta .coip-cuenta__form .coip-cuenta__submit:focus-visible {
	background: #525255; /* estado hover del componente «CTA color» del XD */
	border-color: #525255;
}

/* Gestos 2 y 3 del lenguaje de hover: la píldora sube --coip-lift-sm con su
   sombra y el chevron avanza --coip-nudge, que es lo mismo que hacen los CTA
   del resto del sitio. Van dentro del guardia porque mueven, y se apagan
   solos con movimiento reducido porque los dos tokens valen cero. */
@media (hover: hover) and (pointer: fine) {
	.coip-cuenta .coip-cuenta__form .coip-cuenta__submit:enabled:hover {
		transform: translateY(var(--coip-lift-sm));
		box-shadow: var(--coip-shadow-lift);
	}

	.coip-cuenta .coip-cuenta__form .coip-cuenta__submit:enabled:hover .coip-chevron {
		transform: translateX(var(--coip-nudge));
	}
}

.coip-cuenta .coip-cuenta__form .coip-cuenta__submit:enabled:focus-visible {
	transform: translateY(var(--coip-lift-sm));
	box-shadow: var(--coip-shadow-lift);
}

.coip-cuenta .coip-cuenta__form .coip-cuenta__submit:enabled:focus-visible .coip-chevron {
	transform: translateX(var(--coip-nudge));
}

/* Un «ENTRAR» deshabilitado —lo desactivan los plugins antibots mientras
   comprueban el formulario— no debe teñirse ni levantarse al pasar el ratón.
   La regla va después del hover y con un `:not(:enabled)` que le empata en
   especificidad, así que gana por orden. */
.coip-cuenta .coip-cuenta__form .coip-cuenta__submit:not(:enabled) {
	background: rgba(41, 43, 50, 0.16);
	border-color: transparent;
	color: rgba(41, 43, 50, 0.5);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.coip-cuenta .coip-cuenta__form .coip-cuenta__submit {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Recuperar / restablecer contraseña
   El XD no las dibuja: se les da la misma tarjeta que al acceso.
   ---------------------------------------------------------------------- */

body.coip-cuenta-page .woocommerce form.woocommerce-ResetPassword {
	box-sizing: border-box;
	width: 559px;
	max-width: 100%;
	margin: 0 auto;
	padding: 40px 40.5px;
	background: var(--coip-white);
	border: 0;
	border-radius: var(--coip-radius);
	box-shadow: var(--coip-shadow);
	font-size: var(--coip-fs-ui);
	line-height: 1.5;
	color: var(--coip-charcoal);
	text-align: left;
}

body.coip-cuenta-page .woocommerce-ResetPassword > p:first-child {
	margin: 0 0 24px;
}

body.coip-cuenta-page .woocommerce .woocommerce-ResetPassword .form-row {
	float: none;
	width: 100%;
	margin: 0 0 20px;
	padding: 0;
}

body.coip-cuenta-page .woocommerce .woocommerce-ResetPassword .form-row:last-of-type {
	margin-bottom: 0;
}

body.coip-cuenta-page .woocommerce .woocommerce-ResetPassword label {
	display: block;
	margin-bottom: 8px;
	line-height: var(--coip-lh-ui);
	font-weight: 500;
}

body.coip-cuenta-page .woocommerce .woocommerce-ResetPassword .input-text {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 45px;
	padding: 0 19px;
	background: transparent;
	color: var(--coip-ink);
	border: 1px solid var(--coip-charcoal);
	border-radius: var(--coip-radius-sm);
	font-family: inherit;
	font-size: var(--coip-fs-ui);
}

body.coip-cuenta-page .woocommerce .woocommerce-ResetPassword .clear {
	display: none;
}

body.coip-cuenta-page .woocommerce .woocommerce-ResetPassword .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	padding: 0 21px;
	background: var(--coip-charcoal);
	color: var(--coip-cream);
	border: 1px solid var(--coip-charcoal);
	border-radius: var(--coip-radius);
	font-family: inherit;
	font-size: var(--coip-fs-ui);
	line-height: var(--coip-lh-ui);
	font-weight: 500;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform var(--coip-dur-rapida) var(--coip-ease-suave),
		box-shadow var(--coip-dur-rapida) var(--coip-ease-suave);

	/* Gesto 2 (rellenar): el barrido lo monta base.css. */
	--coip-fx-fill: #525255;
}

/* El mismo gesto 2 del resto de botones de la pantalla. */
@media (hover: hover) and (pointer: fine) {
	body.coip-cuenta-page .woocommerce .woocommerce-ResetPassword .button:hover {
		transform: translateY(var(--coip-lift-sm));
		box-shadow: var(--coip-shadow-lift);
	}
}

body.coip-cuenta-page .woocommerce .woocommerce-ResetPassword .button:focus-visible {
	transform: translateY(var(--coip-lift-sm));
	box-shadow: var(--coip-shadow-lift);
}

/* -------------------------------------------------------------------------
   Avisos de WooCommerce
   ---------------------------------------------------------------------- */

/* WooCommerce imprime los avisos con el marcado de bloques
   (.wc-block-components-notice-banner) y no con el clásico, así que sin esto
   el «usuario o contraseña incorrectos» salía como una banda rosa a todo el
   ancho del contenedor, con otra tipografía y otro radio que la tarjeta. Se
   les da el ancho y el lenguaje del acceso: 559 px, borde de 1 px y radio 10.
   Van fuera de .coip-cuenta —WooCommerce los pinta antes del formulario—, de
   ahí que se acoten sólo por la clase del <body>. */
body.coip-cuenta-page .wc-block-components-notice-banner {
	box-sizing: border-box;
	width: 559px;
	max-width: 100%;
	margin: 0 auto 24px;
	padding: 16px 20px;
	gap: 12px;
	align-items: flex-start;
	background: var(--coip-cream);
	color: var(--coip-charcoal);
	border: 1px solid var(--coip-charcoal);
	border-radius: var(--coip-radius-sm);
	font-family: inherit;
	font-size: var(--coip-fs-ui);
	line-height: 1.5;
}

body.coip-cuenta-page .wc-block-components-notice-banner.is-error {
	border-color: var(--coip-coral);
}

body.coip-cuenta-page .wc-block-components-notice-banner > svg {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	background: none;
	fill: currentColor;
}

body.coip-cuenta-page .wc-block-components-notice-banner.is-error > svg {
	fill: var(--coip-coral);
}

body.coip-cuenta-page .wc-block-components-notice-banner__content {
	font-size: inherit;
	line-height: inherit;
}

body.coip-cuenta-page .wc-block-components-notice-banner__content a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* En el panel los avisos van al ancho de la tarjeta de contenido. */
body.coip-cuenta-page .coip-area__content .wc-block-components-notice-banner {
	width: 100%;
	margin-inline: 0;
}

/* Avisos cuyo enlace va delante del texto. WooCommerce 11 escribe así el de
   «Confirma tu dirección de correo…» en «Pedidos»: el enlace primero y la
   frase después, que se leía como dos rótulos pegados («Confirm email address
   Confirm your email address…»). Aquí la frase va primero y el enlace, detrás;
   si no cabe en la línea, baja a la siguiente entero. */
body.coip-cuenta-page .coip-area__content .wc-block-components-notice-banner__content:has(> a.wc-forward:first-child),
body.coip-cuenta-page .coip-area__content .woocommerce-info:has(> a.wc-forward:first-child) {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
}

body.coip-cuenta-page .coip-area__content .wc-block-components-notice-banner__content > a.wc-forward:first-child,
body.coip-cuenta-page .coip-area__content .woocommerce-info > a.wc-forward:first-child {
	order: 1;
	margin: 0;
}

body.coip-cuenta-page .woocommerce .woocommerce-error,
body.coip-cuenta-page .woocommerce .woocommerce-message,
body.coip-cuenta-page .woocommerce .woocommerce-info {
	box-sizing: border-box;
	width: 559px;
	max-width: 100%;
	margin: 0 auto 24px;
	padding: 16px 20px;
	background: var(--coip-cream);
	color: var(--coip-charcoal);
	border: 1px solid var(--coip-charcoal);
	border-top-width: 1px;
	border-radius: var(--coip-radius-sm);
	font-size: var(--coip-fs-ui);
	line-height: 1.5;
	list-style: none;
}

body.coip-cuenta-page .woocommerce .woocommerce-error::before,
body.coip-cuenta-page .woocommerce .woocommerce-message::before,
body.coip-cuenta-page .woocommerce .woocommerce-info::before {
	display: none;
}

body.coip-cuenta-page .woocommerce .woocommerce-error {
	border-color: var(--coip-coral);
}

body.coip-cuenta-page .woocommerce .woocommerce-error li,
body.coip-cuenta-page .woocommerce .woocommerce-message li,
body.coip-cuenta-page .woocommerce .woocommerce-info li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.coip-cuenta-page .woocommerce .woocommerce-error a,
body.coip-cuenta-page .woocommerce .woocommerce-message a,
body.coip-cuenta-page .woocommerce .woocommerce-info a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* En el panel los avisos van al ancho de la tarjeta de contenido. */
body.coip-cuenta-page .coip-area__content .woocommerce-error,
body.coip-cuenta-page .coip-area__content .woocommerce-message,
body.coip-cuenta-page .coip-area__content .woocommerce-info {
	width: 100%;
	margin-inline: 0;
}

/* -------------------------------------------------------------------------
   Responsive del acceso. El XD sólo trae 1920: los cortes son los del tema.
   El panel del alumno ya identificado tiene los suyos en cuenta-panel.css,
   que sólo se carga con sesión iniciada.
   ---------------------------------------------------------------------- */

@media (max-width: 1279px) {
	body.coip-cuenta-page .wp-block-post-content {
		padding-block: 110px 150px;
	}
}

@media (max-width: 1023px) {
	body.coip-cuenta-page .wp-block-post-content {
		padding-block: 80px 110px;
	}
}

@media (max-width: 767px) {
	body.coip-cuenta-page .wp-block-post-content {
		padding-block: 56px 72px;
	}

	.coip-cuenta .coip-cuenta__card {
		padding: 30px 24px 36px;
	}

	.coip-cuenta form.coip-cuenta__form {
		margin-top: 30px;
	}

	.coip-cuenta .coip-cuenta__form .coip-cuenta__options {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.coip-cuenta .coip-cuenta__form .coip-cuenta__lost {
		text-align: left;
	}

	body.coip-cuenta-page .woocommerce form.woocommerce-ResetPassword {
		padding: 30px 24px;
	}
}

@media (max-width: 479px) {
	.coip-cuenta .coip-cuenta__card {
		padding: 26px 20px 30px;
	}
}