/* ==========================================================================
   FT Courses - Acceso y registro
   Usa los tokens del panel si estan, y valores propios si no.
   ========================================================================== */

.prb-auth-wrap {
	padding-block: clamp(2.5rem, 8vw, 5rem);
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.prb-auth {
	max-width: 27rem;
	margin-inline: auto;
	padding: clamp(1.5rem, 5vw, 2.5rem);
	background: var(--prb-color-bg, #fff);
	border: 1px solid var(--prb-color-border, #e2e6ea);
	border-radius: 10px;
	box-shadow: 0 8px 30px rgba(16, 36, 58, 0.07);
	font-family: var(--prb-font-body, inherit);
	color: var(--prb-color-text, #1f2933);
}

.prb-auth-titulo {
	margin: 0 0 1.5rem;
	font-family: var(--prb-font-heading, inherit);
	font-size: 1.5rem;
	color: var(--prb-color-primary, #10243a);
}

/* --- Pestanas --- */
.prb-auth-tabs {
	display: flex;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid var(--prb-color-border, #e2e6ea);
}

.prb-auth-tab {
	flex: 1;
	padding: 0.75rem 0.5rem;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--prb-color-muted, #5c6874);
	cursor: pointer;
}

.prb-auth-tab.is-active {
	color: var(--prb-color-primary, #10243a);
	border-bottom-color: var(--prb-color-secondary, #b8892b);
}

.prb-auth-tab:focus-visible {
	outline: 3px solid var(--prb-color-secondary, #b8892b);
	outline-offset: -3px;
}

/* --- Campos --- */
.prb-auth-campo { margin-bottom: 1.1rem; }

.prb-auth-campo label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--prb-color-primary, #10243a);
}

.prb-auth-campo input {
	width: 100%;
	padding: 0.7em 0.9em;
	background: var(--prb-color-bg, #fff);
	border: 1px solid var(--prb-color-border, #e2e6ea);
	border-radius: 4px;
	font: inherit;
	font-size: 1rem;
	color: inherit;
}

.prb-auth-campo input:focus {
	outline: none;
	border-color: var(--prb-color-primary, #10243a);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--prb-color-primary, #10243a) 12%, transparent);
}

.prb-auth-ayuda {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.78rem;
	color: var(--prb-color-muted, #5c6874);
}

/* La misma letra, pero encabezando el formulario en vez de colgando de un
   campo, asi que necesita aire debajo y ninguno encima. */
.prb-auth-ayuda--aviso {
	margin: 0 0 1.1rem;
}

.prb-auth-fila { display: grid; gap: 0 0.75rem; }

@media (min-width: 30em) {
	.prb-auth-fila { grid-template-columns: 1fr 1fr; }
}

.prb-auth-check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
	font-size: 0.875rem;
	color: var(--prb-color-muted, #5c6874);
}

/* --- Boton --- */
.prb-auth-btn {
	width: 100%;
	padding: 0.85em 1.5em;
	background: var(--prb-color-primary, #10243a);
	color: var(--prb-color-bg, #fff);
	border: 2px solid var(--prb-color-primary, #10243a);
	border-radius: 4px;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 180ms ease, color 180ms ease;
}

.prb-auth-btn:hover:not(:disabled) {
	background: var(--prb-color-secondary, #b8892b);
	border-color: var(--prb-color-secondary, #b8892b);
	color: var(--prb-color-primary, #10243a);
}

.prb-auth-btn:disabled { opacity: 0.6; cursor: progress; }

.prb-auth-pie {
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	text-align: center;
}

.prb-auth-pie a { color: var(--prb-color-muted, #5c6874); }

/* --- Mensajes --- */
.prb-auth-msg {
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem;
	border-radius: 4px;
	font-size: 0.875rem;
	line-height: 1.5;
}

.prb-auth-msg[hidden] { display: none; }

.prb-auth-msg.is-error {
	background: #fdecea;
	border: 1px solid #f5c2bd;
	color: #8a2018;
}

.prb-auth-msg.is-ok {
	background: #e9f6ec;
	border: 1px solid #b7e0c1;
	color: #1d6b31;
}

/* --- Formularios --- */
.prb-auth-form[hidden] { display: none; }

/* --- Reenvio de la confirmacion --- */

.prb-auth-reenvio { margin: 0 0 1.25rem; }

.prb-auth-reenvio[hidden] { display: none; }

.prb-auth-reenvio label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.8125rem;
	color: var(--prb-color-muted, #5c6874);
}

.prb-auth-reenvio-fila {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.prb-auth-reenvio-fila input {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.7em 0.9em;
	background: var(--prb-color-bg, #fff);
	border: 1px solid var(--prb-color-border, #e2e6ea);
	border-radius: 4px;
	font: inherit;
	font-size: 1rem;
	color: inherit;
}

.prb-auth-reenvio-fila input:focus {
	outline: none;
	border-color: var(--prb-color-primary, #10243a);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--prb-color-primary, #10243a) 12%, transparent);
}

/* Secundario: no debe competir con el boton principal de la pantalla. */
.prb-auth-btn--suave {
	width: auto;
	flex: 0 0 auto;
	background: transparent;
	color: var(--prb-color-primary, #10243a);
	border-color: var(--prb-color-border, #e2e6ea);
}

.prb-auth-btn--suave:hover:not(:disabled) {
	background: var(--prb-color-primary, #10243a);
	border-color: var(--prb-color-primary, #10243a);
	color: var(--prb-color-bg, #fff);
}

/*
   Campo trampa. No se usa display:none porque algunos robots detectan esa
   regla y saltan el campo. Asi queda fuera de la pantalla, invisible para
   una persona pero rellenable por un automatismo.
*/
.prb-auth-trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   Ficha publica de perfil
   ========================================================================== */

.prb-perfil-wrap {
	padding-block: clamp(2.5rem, 8vw, 4.5rem);
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.prb-perfil {
	max-width: 32rem;
	margin-inline: auto;
	padding: clamp(1.75rem, 5vw, 2.75rem);
	background: var(--prb-color-bg, #fff);
	border: 1px solid var(--prb-color-border, #e2e6ea);
	border-radius: 10px;
	box-shadow: 0 8px 30px rgba(16, 36, 58, 0.07);
	font-family: var(--prb-font-body, inherit);
	color: var(--prb-color-text, #1f2933);
	text-align: center;
}

.prb-perfil-avatar {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	object-fit: cover;
	margin-inline: auto;
	margin-bottom: 1.25rem;
	border: 4px solid var(--prb-color-secondary, #b8892b);
}

.prb-perfil-nombre {
	margin: 0;
	font-family: var(--prb-font-heading, inherit);
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	font-weight: 600;
	color: var(--prb-color-primary, #10243a);
}

.prb-perfil-btn {
	display: inline-block;
	margin-top: 1.5rem;
	padding: 0.7em 1.6em;
	border: 2px solid var(--prb-color-primary, #10243a);
	border-radius: 4px;
	color: var(--prb-color-primary, #10243a);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	transition: background 180ms ease, color 180ms ease;
}

.prb-perfil-btn:hover {
	background: var(--prb-color-primary, #10243a);
	color: var(--prb-color-bg, #fff);
}

.prb-perfil-aviso {
	margin: 0 0 1.5rem;
	padding: 0.75rem 1rem;
	background: var(--prb-color-surface, #f6f7f9);
	border-radius: 6px;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--prb-color-muted, #5c6874);
	text-align: left;
}

.prb-perfil-aviso a {
	color: var(--prb-color-secondary, #b8892b);
	font-weight: 700;
}

.prb-perfil--privado { color: var(--prb-color-muted, #5c6874); }

.prb-perfil--privado svg {
	color: var(--prb-color-primary, #10243a);
	margin-inline: auto;
	margin-bottom: 1rem;
}

.prb-perfil--privado h1 {
	margin: 0 0 0.6rem;
	font-family: var(--prb-font-heading, inherit);
	font-size: 1.375rem;
	color: var(--prb-color-primary, #10243a);
}

.prb-perfil--privado p { margin: 0; font-size: 0.95rem; }

/* Asterisco de campo obligatorio. Sale solo en los campos que llevan
   required, asi que un campo nuevo obligatorio lo hereda sin tocar nada.
   La segunda linea de content evita que el lector de pantalla lea
   "asterisco": ya anuncia el campo como obligatorio por el required. */
#prb-form-crear .prb-auth-campo:has(> input[required]) > label::after {
	content: " *";
	content: " *" / "";
	color: var(--prb-color-error, #c0392b);
}