/* Core Academy 2.4 — login y contraseñas
 * Usa las mismas variables que la app (PSA_Design::css_vars): campos con esquinas
 * suaves, botón píldora y, si está elegida, la ceja que se arma con partículas.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body.psa-auth {
	min-height:             100vh;
	min-height:             100dvh;
	display:                flex;
	align-items:            center;
	justify-content:        center;
	padding:                calc(env(safe-area-inset-top, 0px) + 28px) 20px calc(env(safe-area-inset-bottom, 0px) + 32px);
	background:             var(--psa-bg);
	color:                  var(--psa-text);
	font-family:            var(--psa-font);
	font-size:              15px;
	line-height:            1.55;
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--psa-text); outline-offset: 2px; }
[hidden] { display: none !important; }

.psa-login-card {
	width:          100%;
	max-width:      400px;
	display:        flex;
	flex-direction: column;
	gap:            16px;
}

.psa-login-logo { display: flex; justify-content: center; margin-bottom: 4px; }
.psa-login-logo img { max-width: 200px; max-height: 80px; width: auto; height: auto; }
.psa-login-wordmark {
	font-family: var(--psa-font-heading);
	font-size:   30px;
	line-height: 1.1;
	text-align:  center;
}
.psa-login-ceja { display: block; width: 100%; height: 132px; margin: -6px 0 2px; }

.psa-auth-title {
	font-family:    var(--psa-font-heading);
	font-weight:    400;
	font-size:      clamp(36px, 10.5vw, 46px);
	line-height:    1;
	letter-spacing: -.01em;
	text-align:     center;
	text-wrap:      balance;
}
.psa-auth-title em { font-style: italic; }

.psa-login-subtitle { color: var(--psa-body); font-size: 15px; text-align: center; }
.psa-help           { color: var(--psa-muted); font-size: 13.5px; text-align: center; }

.psa-alert { padding: 12px 14px; font-size: 14px; line-height: 1.5; border: 1px solid; border-radius: 14px; }
.psa-alert--error   { border-color: #d9b2ab; color: #8f2f28; background: #fbf1ef; }
.psa-alert--success { border-color: var(--psa-line); background: var(--psa-surface); }

.psa-form { display: flex; flex-direction: column; gap: 14px; }
.psa-form-group { display: flex; flex-direction: column; gap: 6px; }
.psa-form-group label,
.psa-label-row label {
	font-size:   12.5px;
	font-weight: 600;
	color:       var(--psa-body);
}
.psa-form-group input[type="text"],
.psa-form-group input[type="email"],
.psa-form-group input[type="password"] {
	width:         100%;
	padding:       13px 15px;
	font:          inherit;
	font-size:     16px; /* 16 px: el iPhone no hace zoom al tocar el campo */
	color:         var(--psa-text);
	background:    var(--psa-surface);
	border:        1px solid var(--psa-line);
	border-radius: 14px;
	-webkit-appearance: none;
	appearance:    none;
}
.psa-form-group input:focus { outline: none; border-color: var(--psa-text); }

.psa-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.psa-forgot-link { font-size: 13px; text-underline-offset: 3px; color: var(--psa-body); }

.psa-input-wrapper { position: relative; }
.psa-input-wrapper input { padding-right: 52px !important; }
.psa-toggle-password {
	position:    absolute;
	top:         0;
	right:       0;
	width:       48px;
	height:      100%;
	display:     grid;
	place-items: center;
	background:  none;
	border:      0;
	color:       var(--psa-muted);
	cursor:      pointer;
}
.psa-toggle-password svg { width: 20px; height: 20px; }
.psa-toggle-password:hover { color: var(--psa-text); }

.psa-remember { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--psa-body); cursor: pointer; }
.psa-remember input { width: 18px; height: 18px; accent-color: var(--psa-primary); }

.psa-submit {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	min-height:      50px;
	padding:         0 20px;
	border-radius:   999px;
	background:      var(--psa-primary);
	color:           var(--psa-primary-ink);
	border:          1px solid var(--psa-primary);
	font:            inherit;
	font-size:       15px;
	font-weight:     500;
	text-decoration: none;
	cursor:          pointer;
	transition:      background .2s, border-color .2s;
}
.psa-submit:active   { opacity: .85; }
.psa-submit:disabled { opacity: .6; cursor: default; }
.psa-submit--ghost   { background: transparent; color: var(--psa-text); border-color: var(--psa-text); }
@media (hover: hover) {
	.psa-submit:not(:disabled):hover { background: var(--psa-accent); border-color: var(--psa-accent); color: #fff; }
	.psa-submit--ghost:hover { background: var(--psa-metal-flat) !important; border-color: var(--psa-metal-flat) !important; color: var(--psa-metal-ink) !important; }
}

.psa-back-link { text-align: center; font-size: 14px; }
.psa-back-link a { text-underline-offset: 3px; }

/* Protección (2.4): ver protect.js */
.psa-protect,
.psa-protect * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.psa-protect img { pointer-events: none; -webkit-user-drag: none; }
.psa-protect input,
.psa-protect textarea { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; }