/* Segundo paso del ingreso (verificación en dos pasos) — ver tic1980/public/js/tic_ingreso_2fa.js.
   Solo afecta al paso del código (body.tic2fa, que pone el script al dibujar ese paso): la pantalla de usuario y contraseña queda
   como está (decisión de Julián, 21-oct-2026).
   Tarjeta propia, centrada, de 420 px como máximo, con sus colores: así se ve igual con o sin el tema de la página web (en producción
   el tema y el script de la página convierten la caja del ingreso en una tarjeta fija de 850 x 520 y pintan las casillas en blanco).
   Modo oscuro: el de la página (html[data-theme="dark"], botón de luna de la página web) o, si la página no dice nada, el del equipo.
   El texto del sistema se oculta SOLO cuando ya está el de la marca (:has), así nunca queda la pantalla vacía. */
body.tic2fa {
	--t2-morado: #56267e; --t2-morado-2: #6a3399; --t2-cian: #22c7d6; --t2-acento: #56267e;
	--t2-tarjeta: #ffffff; --t2-fondo-pagina: #f4f2f8; --t2-texto: #1f1a2e; --t2-suave: #5f566d; --t2-borde: #ddd5e8;
	--t2-campo: #f7f5fb; --t2-opcion: #ffffff; --t2-opcion-activa: #f3edf9; --t2-sombra: 0 18px 48px rgba(38, 18, 66, 0.14), 0 2px 6px rgba(38, 18, 66, 0.06);
	--t2-error: #a8202a; --t2-error-fondo: #fdecee; --t2-ok: #0f6b4f; --t2-ok-fondo: #e6f6f0; --t2-boton: #56267e; --t2-boton-texto: #ffffff;
}
html[data-theme="dark"] body.tic2fa {
	--t2-acento: #22c7d6; --t2-tarjeta: #1c1626; --t2-fondo-pagina: #110d17; --t2-texto: #f3eff9; --t2-suave: #b9afca; --t2-borde: #3d3150;
	--t2-campo: #251d33; --t2-opcion: #211a2d; --t2-opcion-activa: #2b2140; --t2-sombra: 0 18px 48px rgba(0, 0, 0, 0.5);
	--t2-error: #ffadb3; --t2-error-fondo: #3b1c24; --t2-ok: #8ee6c4; --t2-ok-fondo: #12332a; --t2-boton: #7a3fb0; --t2-boton-texto: #ffffff;
	color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) body.tic2fa {
		--t2-acento: #22c7d6; --t2-tarjeta: #1c1626; --t2-fondo-pagina: #110d17; --t2-texto: #f3eff9; --t2-suave: #b9afca; --t2-borde: #3d3150;
		--t2-campo: #251d33; --t2-opcion: #211a2d; --t2-opcion-activa: #2b2140; --t2-sombra: 0 18px 48px rgba(0, 0, 0, 0.5);
		--t2-error: #ffadb3; --t2-error-fondo: #3b1c24; --t2-ok: #8ee6c4; --t2-ok-fondo: #12332a; --t2-boton: #7a3fb0; --t2-boton-texto: #ffffff;
		color-scheme: dark;
	}
}

/* fondo de la página (también el velo fijo que pone el tema web en producción) */
body.tic2fa { background: var(--t2-fondo-pagina) !important; }
body.tic2fa::before { background-color: var(--t2-fondo-pagina) !important; }

/* la tarjeta: la caja del ingreso del sistema, ya vacía, solo con el paso del código */
body.tic2fa .login-content.tic2fa-tarjeta {
	display: block !important; width: min(420px, calc(100vw - 32px)) !important; max-width: 420px !important;
	height: auto !important; min-height: 0 !important; max-height: calc(100vh - 32px) !important; overflow-y: auto !important;
	margin-left: auto !important; margin-right: auto !important; padding: 32px 28px 24px !important; box-sizing: border-box !important;
	background: var(--t2-tarjeta) !important; border: 1px solid var(--t2-borde) !important; border-radius: 20px !important;
	box-shadow: var(--t2-sombra) !important; color: var(--t2-texto) !important; text-align: center;
}
body.tic2fa .login-content.tic2fa-tarjeta::before {
	content: ""; display: block; height: 4px; margin: -32px -28px 28px; border-radius: 20px 20px 0 0;
	background: linear-gradient(90deg, var(--t2-morado), var(--t2-cian));
}

#twofactor_div:has(.tic2fa-cab) .page-card-head,
#twofactor_div:has(.tic2fa-cab) #otp_div { display: none !important; }
body.tic2fa #twofactor_div { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
body.tic2fa #twofactor_div .form-verify { display: flex !important; flex-direction: column; gap: 14px; width: 100% !important; max-width: none !important; margin: 0 !important; color: var(--t2-texto); }

/* encabezado: logo de la marca con el candado (o solo el candado) */
#twofactor_div .tic2fa-cab { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#twofactor_div .tic2fa-marca { position: relative; width: 60px; height: 60px; margin-bottom: 6px; flex: none; }
#twofactor_div .tic2fa-logo { width: 60px !important; height: 60px !important; max-width: none !important; border-radius: 18px; object-fit: contain; display: block; background: var(--t2-campo); }
#twofactor_div .tic2fa-candado {
	position: absolute; inset: 0; display: grid; place-items: center; border-radius: 18px; color: #fff;
	background: linear-gradient(135deg, var(--t2-morado), var(--t2-cian));
}
#twofactor_div .tic2fa-candado svg { width: 28px; height: 28px; }
#twofactor_div .tic2fa-marca.con-logo .tic2fa-candado {
	inset: auto -6px -6px auto; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--t2-tarjeta); box-sizing: content-box;
}
#twofactor_div .tic2fa-marca.con-logo .tic2fa-candado svg { width: 15px; height: 15px; }
#twofactor_div .tic2fa-titulo {
	margin: 0 !important; font-size: 22px !important; line-height: 1.25 !important; font-weight: 700 !important; letter-spacing: -0.01em;
	color: var(--t2-texto) !important; text-align: center !important;
}
#twofactor_div .tic2fa-texto { margin: 0 !important; font-size: 14.5px !important; line-height: 1.55 !important; color: var(--t2-suave) !important; text-align: center !important; overflow-wrap: anywhere; }

/* escoger el método */
#twofactor_div .tic2fa-opciones[hidden] { display: none; }
#twofactor_div .tic2fa-opciones { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; text-align: left; }
#twofactor_div .tic2fa-pregunta { margin: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: var(--t2-texto) !important; text-align: left !important; }
#twofactor_div .tic2fa-grupo { display: flex; flex-direction: column; gap: 8px; }
#twofactor_div .tic2fa-opcion {
	display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 14px; margin: 0;
	border: 1.5px solid var(--t2-borde); border-radius: 14px; background: var(--t2-opcion); color: var(--t2-texto);
	font: inherit; font-size: 14px; font-weight: 500; line-height: 1.35; text-align: left; cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
@media (hover: hover) { #twofactor_div .tic2fa-opcion:hover:not(:disabled) { border-color: var(--t2-acento); } }
#twofactor_div .tic2fa-opcion:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--t2-acento) 35%, transparent); }
#twofactor_div .tic2fa-opcion[aria-checked="true"] { border-color: var(--t2-acento); background: var(--t2-opcion-activa); font-weight: 600; }
#twofactor_div .tic2fa-opcion:disabled { cursor: progress; opacity: 0.75; }
#twofactor_div .tic2fa-opcion-icono {
	flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
	background: var(--t2-campo); color: var(--t2-acento);
}
#twofactor_div .tic2fa-opcion[aria-checked="true"] .tic2fa-opcion-icono { background: var(--t2-acento); color: var(--t2-tarjeta); }
#twofactor_div .tic2fa-opcion-texto { flex: 1; color: var(--t2-texto); }
#twofactor_div .tic2fa-opcion-punto { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--t2-borde); box-sizing: border-box; }
#twofactor_div .tic2fa-opcion[aria-checked="true"] .tic2fa-opcion-punto { border: 5px solid var(--t2-acento); }

/* casilla del código */
body.tic2fa #twofactor_div:has(.tic2fa-cab) #login_token {
	display: block !important; width: 100% !important; height: 60px !important; margin: 4px 0 0 !important; padding: 0 12px !important; box-sizing: border-box !important;
	font: 600 28px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; letter-spacing: 0.5em !important; text-indent: 0.5em;
	text-align: center !important; border-radius: 14px !important; border: 1.5px solid var(--t2-borde) !important;
	background: var(--t2-campo) !important; color: var(--t2-texto) !important; -webkit-text-fill-color: var(--t2-texto) !important;
	caret-color: var(--t2-acento); box-shadow: none !important;
}
body.tic2fa #twofactor_div:has(.tic2fa-cab) #login_token::placeholder {
	font: 500 15px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; color: var(--t2-suave); -webkit-text-fill-color: var(--t2-suave); opacity: 1;
}
body.tic2fa #twofactor_div:has(.tic2fa-cab) #login_token:placeholder-shown { text-indent: 0; }
body.tic2fa #twofactor_div:has(.tic2fa-cab) #login_token:focus {
	outline: none !important; border-color: var(--t2-acento) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--t2-acento) 22%, transparent) !important;
}
#twofactor_div .tic2fa-error {
	font-size: 13.5px; line-height: 1.45; color: var(--t2-error); background: var(--t2-error-fondo); border-radius: 10px; padding: 9px 12px; text-align: left;
}
#twofactor_div .tic2fa-error[hidden], #twofactor_div .tic2fa-aviso[hidden], #twofactor_div .tic2fa-reenvio[hidden] { display: none; }

/* Entrar */
body.tic2fa #twofactor_div:has(.tic2fa-cab) #verify_token {
	display: block !important; width: 100% !important; min-height: 48px !important; height: auto !important; margin: 0 !important; padding: 10px 16px !important;
	border-radius: 14px !important; border: 0 !important; background: var(--t2-boton) !important; color: var(--t2-boton-texto) !important;
	font-weight: 600 !important; font-size: 15.5px !important; line-height: 1.2 !important; box-shadow: none !important; transform: none !important;
}
body.tic2fa #twofactor_div:has(.tic2fa-cab) #verify_token:hover { filter: brightness(1.12); }
body.tic2fa #twofactor_div:has(.tic2fa-cab) #verify_token:focus-visible { outline: 3px solid var(--t2-cian) !important; outline-offset: 2px; }

/* pie: reenviar, aviso, ayuda y volver */
#twofactor_div .tic2fa-pie { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 2px; }
#twofactor_div .tic2fa-reenvio { margin: 0 !important; font-size: 14px !important; color: var(--t2-suave) !important; text-align: center !important; }
#twofactor_div .tic2fa-reenviar {
	display: inline; padding: 2px 4px; margin: 0; border: 0; background: none; font: inherit; font-weight: 600;
	color: var(--t2-acento); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; border-radius: 6px;
}
#twofactor_div .tic2fa-reenviar:disabled { color: var(--t2-suave); text-decoration: none; cursor: default; font-variant-numeric: tabular-nums; }
#twofactor_div .tic2fa-reenviar:focus-visible { outline: 2px solid var(--t2-acento); outline-offset: 2px; }
#twofactor_div .tic2fa-aviso { margin: 0 !important; width: 100%; font-size: 13px !important; line-height: 1.45; color: var(--t2-ok) !important; background: var(--t2-ok-fondo); border-radius: 10px; padding: 8px 12px; text-align: center !important; }
#twofactor_div .tic2fa-ayuda { margin: 0 !important; font-size: 12.5px !important; line-height: 1.5 !important; color: var(--t2-suave) !important; text-align: center !important; }
#twofactor_div .tic2fa-ayuda:empty { display: none; }
#twofactor_div .tic2fa-volver {
	display: inline-block !important; margin: 4px 0 0 !important; font-size: 13.5px !important; font-weight: 600 !important;
	color: var(--t2-acento) !important; text-decoration: none !important; text-align: center !important;
}
#twofactor_div .tic2fa-volver:hover { text-decoration: underline !important; }
#twofactor_div.tic2fa-ocupado .tic2fa-opciones { cursor: progress; }

@media (max-width: 480px) {
	body.tic2fa .login-content.tic2fa-tarjeta { padding: 26px 18px 20px !important; border-radius: 18px !important; }
	body.tic2fa .login-content.tic2fa-tarjeta::before { margin: -26px -18px 22px; border-radius: 18px 18px 0 0; }
	#twofactor_div .tic2fa-titulo { font-size: 20px !important; }
	body.tic2fa #twofactor_div:has(.tic2fa-cab) #login_token { letter-spacing: 0.38em !important; text-indent: 0.38em; font-size: 26px !important; }
}
@media (prefers-reduced-motion: reduce) { #twofactor_div .tic2fa-opcion { transition: none; } }