/* =====================================================================
   PYDE · Páginas de acceso · panel lateral (templates/Auth/Acceso :: Aside)
   Autocontenido: estas páginas cargan Metronic, no el sistema .nd- de la
   web pública, así que los valores de la marca se repiten aquí como
   variables locales (fuente de verdad: css/publico/nueva-web/sistema.css).
   ===================================================================== */
.acc-aside {
	--acc-noche: #061f42;
	--acc-marino: #082d5c;
	--acc-azul: #0d4c91;
	--acc-azul-medio: #1976ba;
	--acc-cian: #6fd0ff;
	--acc-curva: cubic-bezier(0.22, 1, 0.36, 1);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 100vh;
	align-items: center;
	padding: clamp(48px, 6vw, 96px);
	background:
		radial-gradient(60% 50% at 85% 10%, rgba(111, 208, 255, 0.22) 0%, rgba(111, 208, 255, 0) 70%),
		radial-gradient(50% 45% at 10% 95%, rgba(25, 118, 186, 0.45) 0%, rgba(25, 118, 186, 0) 70%),
		linear-gradient(150deg, var(--acc-noche) 0%, var(--acc-marino) 55%, #0b3c78 100%);
	color: #fff;
}

/* El anillo de PYDE, enorme y tenue, con el punto de la «P» posado en su borde */
.acc-aside__anillo {
	position: absolute;
	z-index: -1;
	right: -38%;
	bottom: -30%;
	width: 120%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid rgba(111, 208, 255, 0.18);
	box-shadow: inset 0 0 0 clamp(40px, 6vw, 90px) rgba(111, 208, 255, 0.03);
	animation: acc-aparecer 1.4s var(--acc-curva) both;
}
.acc-aside__punto {
	position: absolute;
	z-index: -1;
	left: clamp(48px, 6vw, 96px);
	top: clamp(48px, 7vh, 96px);
	width: 64px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--acc-azul) 0%, var(--acc-azul-medio) 100%);
	box-shadow: 0 16px 40px -12px rgba(111, 208, 255, 0.45);
	animation: acc-brotar 0.8s var(--acc-curva) 0.1s both;
}

.acc-aside__contenido {
	position: relative;
	max-width: 540px;
	animation: acc-aparecer 0.8s var(--acc-curva) 0.25s both;
}
.acc-aside__titulo {
	margin: 0 0 24px;
	font-family: "Mulish", system-ui, sans-serif;
	font-size: clamp(2.25rem, 1.2rem + 2.4vw, 3.5rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.04em;
	text-wrap: balance;
	color: #fff;
}
.acc-aside__titulo span { color: var(--acc-cian); }
.acc-aside__texto {
	margin: 0;
	max-width: 46ch;
	font-family: "Archivo", system-ui, sans-serif;
	font-size: 1.125rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
}

/* Las cinco herramientas: una lista tranquila, no tarjetas */
.acc-aside__herramientas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 24px;
	margin: 40px 0 0;
	padding: 28px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	list-style: none;
	font-family: "Archivo", system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
}
.acc-aside__herramientas li { display: flex; align-items: center; gap: 12px; }
.acc-aside__herramientas .bi {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: rgba(111, 208, 255, 0.14);
	color: var(--acc-cian);
	font-size: 15px;
}

/* Ventajas de asociarse (Auth/AccesoAsociado :: Panel): una por línea, con el mismo distintivo que las herramientas */
.acc-aside__ventajas {
	display: grid;
	gap: 14px;
	margin: 8px 0 0;
	padding: 28px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	list-style: none;
	font-family: "Archivo", system-ui, sans-serif;
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.9);
}
.acc-aside__ventajas li { display: flex; align-items: center; gap: 12px; }
.acc-aside__ventajas .bi {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(111, 208, 255, 0.14);
	color: var(--acc-cian);
	font-size: 15px;
}

.acc-aside__impulso {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 36px 0 0;
	max-width: 46ch;
	font-family: "Archivo", system-ui, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.72);
}
.acc-aside__impulso .bi { color: var(--acc-cian); font-size: 1.1rem; line-height: 1.3; }

.acc-aside__ayuda {
	margin: 18px 0 0 28px;
	font-family: "Archivo", system-ui, sans-serif;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.72);
}
.acc-aside__ayuda a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.acc-aside__ayuda a:hover { color: var(--acc-cian); }

/* =====================================================================
   COLUMNA DEL FORMULARIO (.acc-cuerpo, en cada plantilla de Auth/)
   Capa visual sobre Metronic: mismo lenguaje que la web pública (Mulish en
   los titulares, campos de 52 px con radio de 12, botones en pastilla, foco
   azul medio). No cambia ids, names ni data-kt-*: el stepper, select2 y la
   validación de Metronic siguen funcionando igual.
   ===================================================================== */
.acc-cuerpo {
	--acc-azul: #0d4c91;
	--acc-azul-hover: #0a3d76;
	--acc-azul-medio: #1976ba;
	--acc-tinta: #0b1b33;
	--acc-texto: #33415c;
	--acc-texto-suave: #5a6782;
	--acc-borde: #e3e8f0;
	--acc-borde-fuerte: #cdd5e1;
	--acc-fondo-suave: #f5f8fc;
	--acc-fondo-azul: #eaf2fb;
	--acc-curva: cubic-bezier(0.22, 1, 0.36, 1);
	background: #fff;
	font-family: "Archivo", system-ui, sans-serif;
	color: var(--acc-texto);
}
.acc-cuerpo ::selection { background: rgba(25, 118, 186, 0.2); color: var(--acc-tinta); }

/* Titular: Mulish 800 con tracking negativo, como los de la web */
.acc-cuerpo h1 {
	font-family: "Mulish", system-ui, sans-serif !important;
	font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem) !important;
	font-weight: 800 !important;
	line-height: 1.08;
	letter-spacing: -0.035em;
	color: var(--acc-tinta) !important;
	text-wrap: balance;
}
.acc-cuerpo .text-gray-700,
.acc-cuerpo .text-muted { color: var(--acc-texto-suave) !important; }
.acc-pasos-intro {
	margin: 0 0 24px;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--acc-texto-suave);
	max-width: 46ch;
}

/* Campos */
.acc-cuerpo .form-label { font-weight: 600; font-size: 0.95rem; color: var(--acc-tinta); margin-bottom: 6px; }
.acc-cuerpo .form-control,
.acc-cuerpo .form-select,
.acc-cuerpo .select2-container .select2-selection {
	min-height: 52px;
	border: 1px solid var(--acc-borde-fuerte) !important;
	border-radius: 12px !important;
	background-color: #fff !important;
	font-size: 1rem;
	color: var(--acc-tinta);
	transition: border-color 160ms var(--acc-curva), box-shadow 160ms var(--acc-curva);
}
.acc-cuerpo .form-control::placeholder { color: var(--acc-texto-suave); opacity: 1; }
.acc-cuerpo .form-control:hover,
.acc-cuerpo .form-select:hover { border-color: #7b879c !important; }
.acc-cuerpo .form-control:focus,
.acc-cuerpo .form-select:focus,
.acc-cuerpo .select2-container--focus .select2-selection,
.acc-cuerpo .select2-container--open .select2-selection {
	border-color: var(--acc-azul-medio) !important;
	box-shadow: 0 0 0 4px rgba(25, 118, 186, 0.16) !important;
	outline: none;
}
/* Grupo con icono (login): el icono dentro del mismo campo redondeado */
.acc-cuerpo .input-group { border-radius: 12px; }
.acc-cuerpo .input-group-text {
	min-height: 52px;
	border: 1px solid var(--acc-borde-fuerte);
	border-right: 0;
	border-radius: 12px 0 0 12px !important;
	background: #fff;
	color: var(--acc-texto-suave);
}
.acc-cuerpo .input-group > .form-control { border-left: 0 !important; border-radius: 0 12px 12px 0 !important; }
.acc-cuerpo .input-group:focus-within .input-group-text { border-color: var(--acc-azul-medio); }
.acc-cuerpo .form-check-input { width: 1.25rem; height: 1.25rem; border-color: var(--acc-borde-fuerte); }
.acc-cuerpo .form-check-input:checked { background-color: var(--acc-azul); border-color: var(--acc-azul); }
.acc-cuerpo .form-check-input:focus { box-shadow: 0 0 0 4px rgba(25, 118, 186, 0.16); }

/* Botones en pastilla. «Continuar» (btn-secondary) es la acción principal del paso: va en azul */
.acc-cuerpo .btn {
	min-height: 48px;
	padding: 12px 24px;
	border-radius: 999px !important;
	font-family: "Archivo", system-ui, sans-serif;
	font-weight: 600;
	transition: background-color 160ms var(--acc-curva), border-color 160ms var(--acc-curva), box-shadow 240ms var(--acc-curva), transform 160ms var(--acc-curva);
}
.acc-cuerpo .btn:active { transform: scale(0.98); }
.acc-cuerpo .btn:focus-visible { outline: 2px solid var(--acc-azul-medio); outline-offset: 4px; box-shadow: none; }
.acc-cuerpo .btn.btn-azul,
.acc-cuerpo .btn.btn-secondary,
.acc-cuerpo .btn.btn-primary {
	background-color: var(--acc-azul) !important;
	border-color: var(--acc-azul) !important;
	color: #fff !important;
}
.acc-cuerpo .btn.btn-azul:hover,
.acc-cuerpo .btn.btn-secondary:hover,
.acc-cuerpo .btn.btn-primary:hover {
	background-color: var(--acc-azul-hover) !important;
	border-color: var(--acc-azul-hover) !important;
	box-shadow: 0 10px 24px -12px rgba(13, 76, 145, 0.55);
}
.acc-cuerpo .btn .bi-arrow-right { transition: transform 240ms var(--acc-curva); }
.acc-cuerpo .btn:hover .bi-arrow-right { transform: translateX(3px); }
.acc-cuerpo .btn i { color: inherit !important; }
/* «Atrás» y la alternativa de acceso con código: secundarios blancos con borde.
   Una sola acción principal por pantalla */
.acc-cuerpo #loginWithCode,
.acc-cuerpo .btn.btn-light {
	background: #fff !important;
	border: 1px solid var(--acc-borde-fuerte) !important;
	color: var(--acc-tinta) !important;
}
.acc-cuerpo #loginWithCode:hover,
.acc-cuerpo .btn.btn-light:hover { background: var(--acc-fondo-suave) !important; border-color: #7b879c !important; box-shadow: none; }
/* Textos de apoyo de Metronic (gris 400-500) con el contraste del texto suave (5,6:1) */
.acc-cuerpo .form-check-label,
.acc-cuerpo .text-gray-400,
.acc-cuerpo .text-gray-500,
.acc-cuerpo .text-gray-600 { color: var(--acc-texto-suave) !important; }

/* Elegir autónomo o empresa: tarjetas sólidas (no discontinuas); la elegida, en azul */
.acc-cuerpo .btn-check + .btn.btn-outline-dashed {
	min-height: 0;
	border: 1px solid var(--acc-borde-fuerte) !important;
	border-radius: 16px !important;
	background: #fff !important;
	color: var(--acc-tinta) !important;
}
.acc-cuerpo .btn-check + .btn.btn-outline-dashed:hover { border-color: #7b879c !important; background: var(--acc-fondo-suave) !important; }
.acc-cuerpo .btn-check:checked + .btn.btn-outline-dashed {
	border-color: var(--acc-azul) !important;
	background: var(--acc-fondo-azul) !important;
	box-shadow: 0 0 0 1px var(--acc-azul);
}
.acc-cuerpo .btn-check + .btn.btn-outline-dashed i { color: var(--acc-azul) !important; }
.acc-cuerpo .btn-check:focus-visible + .btn { outline: 2px solid var(--acc-azul-medio); outline-offset: 4px; }

/* Enlaces del pie y de los textos */
.acc-cuerpo .text-primary,
.acc-cuerpo .text-primary a,
.acc-cuerpo a.link-primary { color: var(--acc-azul) !important; }
.acc-cuerpo a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Pasos del registro (stepper de Metronic en pastillas): el punto de la marca */
.acc-cuerpo .stepper-pills .stepper-item .stepper-icon { border-radius: 50%; }
.acc-cuerpo .stepper-pills .stepper-item.current .stepper-icon,
.acc-cuerpo .stepper-pills .stepper-item.completed .stepper-icon { background-color: var(--acc-azul); }

/* Análisis de los datos de la empresa (#iaSteps, register_empresa.js): el paso activo con el
   punto de la «P» en lugar del triángulo ▶, y el hecho en el verde de estado de la web */
.acc-cuerpo #iaSteps li.ia-active::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--acc-azul) 0%, var(--acc-azul-medio) 100%);
	vertical-align: middle;
}
.acc-cuerpo #iaSteps li.ia-done { color: #067647; }

@keyframes acc-aparecer {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}
@keyframes acc-brotar {
	from { transform: scale(0); }
	to { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.acc-aside__anillo,
	.acc-aside__punto,
	.acc-aside__contenido { animation: none; }
}