/**
 * Leadership Twin — pantalla de acceso.
 *
 * REESCRITA DESDE CERO (v0.83.0)
 * ------------------------------
 * La versión anterior heredaba tipografía y color del tema de WordPress.
 * Como el tema pinta los encabezados de oscuro y ganaba en especificidad,
 * el título quedaba negro sobre azul marino: invisible.
 *
 * Aquí el color se declara en cada elemento de texto, no se hereda. Es más
 * verboso y es la única forma de que la pantalla se vea igual bajo
 * cualquier tema, que es justo lo que se le pide a la primera pantalla del
 * producto.
 *
 * Composición: cabecera con la marca, y contenido a dos columnas —argumento
 * a la izquierda, formulario a la derecha— sobre fondo claro. Sin
 * degradados ni cristales: la credibilidad corporativa viene de la
 * jerarquía y del espacio, no de los efectos.
 */

/* ---------- Aislamiento ---------- */

.lta,
.lta * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.lta {
	--tinta: #0B1B33;
	--tinta-2: #47566B;
	--tinta-3: #8494A8;
	--linea: #E4E9F0;
	--azul: #14428A;
	--azul-claro: #EDF3FC;
	--fondo: #F6F8FB;

	min-height: 100vh;
	background: var(--fondo);
	color: var(--tinta);
	-webkit-font-smoothing: antialiased;
}

/* ---------- Cabecera ---------- */

.lta-bar { background: #fff; border-bottom: 1px solid var(--linea); }
.lta-bar-in {
	max-width: 1180px; margin: 0 auto; padding: 18px 28px;
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.lta-mark { display: inline-flex; align-items: center; gap: 11px; }
.lta-mark-ico {
	width: 34px; height: 34px; border-radius: 9px;
	background: var(--azul); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 800; letter-spacing: .04em;
}
.lta-mark-txt { font-size: 16px; font-weight: 700; color: var(--tinta); letter-spacing: -.01em; }
.lta-bar-note { font-size: 13px; color: var(--tinta-3); }

/* ---------- Estructura ---------- */

/* Una sola columna centrada.
   Era una rejilla de dos columnas (argumento a la izquierda, formulario a
   la derecha). Al quitar el bloque de argumento, la rejilla dejaba el
   formulario clavado en la columna derecha con un hueco de 1fr vacío a la
   izquierda: descentrado y sin motivo aparente. Aquí no hace falta
   rejilla — hay un solo elemento. */
.lta-main {
	max-width: 460px; margin: 0 auto; padding: 56px 28px 72px;
}

/* ---------- Panel ---------- */

.lta-card {
	background: #fff; border: 1px solid var(--linea); border-radius: 16px;
	padding: 30px 28px;
	box-shadow: 0 1px 2px rgba(11,27,51,.04), 0 12px 32px rgba(11,27,51,.06);
}
.lta-tabs {
	display: grid; grid-template-columns: 1fr 1fr;
	background: var(--fondo); border-radius: 11px; padding: 4px; margin-bottom: 26px;
}
.lta-tab {
	display: block; text-align: center; text-decoration: none;
	padding: 10px 8px; border-radius: 8px;
	font-size: 13.5px; font-weight: 600; color: var(--tinta-2);
}
.lta-tab:hover { color: var(--tinta); }
.lta-tab.ldt-tab-active {
	background: #fff; color: var(--tinta); box-shadow: 0 1px 2px rgba(11,27,51,.08);
}
.lta-h { font-size: 21px; font-weight: 700; color: var(--tinta); letter-spacing: -.015em; margin-bottom: 5px; }
.lta-sub { font-size: 13.5px; color: var(--tinta-2); margin-bottom: 22px; }

/* ---------- Campos ---------- */

.lta-field { margin-bottom: 17px; }
.lta-field > label {
	display: block; font-size: 12.5px; font-weight: 600;
	color: var(--tinta); margin-bottom: 7px;
}
.lta-field input[type="text"],
.lta-field input[type="email"],
.lta-field input[type="password"],
.lta-field select {
	width: 100%; display: block;
	border: 1px solid var(--linea); border-radius: 10px;
	padding: 12px 13px; font-size: 14.5px; color: var(--tinta);
	background: #fff; transition: border-color .15s, box-shadow .15s;
}
.lta-field input::placeholder { color: var(--tinta-3); }
.lta-field input:focus,
.lta-field select:focus {
	outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(20,66,138,.11);
}
.lta-field small { display: block; font-size: 12px; color: var(--tinta-3); line-height: 1.5; margin-top: 7px; }
#lta-code { text-transform: uppercase; letter-spacing: .18em; font-weight: 600; }

/* ---------- Bifurcación del alta ---------- */

.lta-choice { display: grid; gap: 9px; }
.lta-opt {
	display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
	border: 1px solid var(--linea); border-radius: 11px; padding: 13px 14px;
	background: #fff; transition: border-color .15s, background .15s;
}
.lta-opt:hover { border-color: #C9D6E8; }
.lta-opt input { margin-top: 3px; accent-color: var(--azul); flex: 0 0 auto; }
.lta-opt-body { display: flex; flex-direction: column; gap: 2px; }
.lta-opt-body strong { font-size: 14px; font-weight: 600; color: var(--tinta); }
.lta-opt-body em { font-style: normal; font-size: 12.5px; color: var(--tinta-2); }
.lta-opt:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }

/* ---------- Acciones ---------- */

.lta-btn {
	width: 100%; display: block; cursor: pointer;
	background: var(--azul); color: #fff; border: none; border-radius: 10px;
	padding: 13px 18px; font-size: 14.5px; font-weight: 600; margin-top: 6px;
}
.lta-btn:hover { background: #0F3470; }
.lta-alt { text-align: center; margin-top: 16px; }
.lta-alt a { font-size: 13px; color: var(--azul); text-decoration: none; }
.lta-alt a:hover { text-decoration: underline; }
.lta-foot {
	font-size: 12px; color: var(--tinta-3); line-height: 1.6;
	text-align: center; margin-top: 18px; padding: 0 12px;
}

/* ---------- Avisos ---------- */

.lta-ok, .lta-bad { display: block; font-size: 12.5px; line-height: 1.5; margin-top: 8px; }
.lta-ok { color: #15803D; }
.lta-bad { color: #B91C1C; }

.ldt-bye, .ldt-auth-errors {
	border-radius: 11px; padding: 12px 14px;
	font-size: 13.5px; line-height: 1.5; margin-bottom: 20px;
}
.ldt-bye { background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; }
.ldt-auth-errors { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
.ldt-auth-errors ul { list-style: none; }
.ldt-auth-errors li { margin: 3px 0; }

/* ---------- Adaptación ---------- */

@media (max-width: 1000px) {
	.lta-main { padding: 40px 22px 56px; }
	.lta-bar-note { display: none; }
}

@media (max-width: 560px) {
	.lta-main { padding: 26px 16px 40px; }
	.lta-card { padding: 22px 18px; border-radius: 14px; }
	.lta-bar-in { padding: 14px 16px; }
}