/* =====================================================================
   Área privada · piezas comunes de las páginas de listado · prefijo .ap-
   (búsquedas guardadas, favoritas y las que vengan): base de la página, cabecera
   con el punto de la marca, botones en pastilla, estados de carga, vacío y error,
   y el aviso flotante con «Deshacer».
   Lo carga HeaderEmpresa en todo el área privada; solo actúa bajo .ap.
   Colores y movimiento de /css/shared/tokens-pyde.css (--nd-*). Todo en px:
   las páginas con Metronic fijan html { font-size: 13px }.
   ===================================================================== */

.ap {
	display: block;
	padding-bottom: 72px;
	background: var(--nd-fondo);
	color: var(--nd-texto);
	font-family: var(--nd-fuente-texto);
	font-size: 16px;
	line-height: 1.6;
}
.ap :where(h1, h2, h3, p, ul) { margin: 0; }
.ap :where(ul) { list-style: none; padding: 0; }
.ap :where(h1, h2, h3) {
	font-family: var(--nd-fuente-titulos);
	font-weight: 800;
	color: var(--nd-tinta);
	text-wrap: balance;
}
/* Metronic pinta los .bi en gris y a 13px: aquí heredan color y tamaño */
.ap .bi { color: inherit; font-size: inherit; line-height: 1; }
.ap a:focus-visible,
.ap button:focus-visible {
	outline: 2px solid var(--nd-azul-medio);
	outline-offset: 3px;
	box-shadow: none;
}

.ap-contenedor {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 16px;
}
.ap-contenedor--estrecho { max-width: 960px; }
@media (min-width: 768px) {
	.ap-contenedor { padding-inline: 32px; }
}

/* ---------------------------------------------------------------------
   CABECERA (la misma que el test y el análisis web)
   --------------------------------------------------------------------- */
.ap-cabecera { padding: clamp(32px, 5vw, 56px) 0 32px; }
.ap .ap-antetitulo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	font-family: var(--nd-fuente-titulos);
	font-weight: 700;
	font-size: 15px;
	color: var(--nd-cian-fuerte);
}
.ap-antetitulo::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}
.ap .ap-titulo {
	font-size: clamp(32px, 2.6vw + 18px, 48px);
	line-height: 1.08;
	letter-spacing: -0.035em;
}
.ap .ap-entradilla {
	margin-top: 12px;
	max-width: 62ch;
	font-size: 17px;
	color: var(--nd-texto-suave);
}
.ap-entradilla strong { font-weight: 600; color: var(--nd-tinta); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   PESTAÑAS de un apartado (Shared/Pestanas.html): Buscar · Búsquedas guardadas · Favoritas…
   Fila de pastillas con una línea fina debajo; la actual, en azul suave y en negrita.
   En pantallas estrechas se desplazan en horizontal, sin saltar de línea.
   --------------------------------------------------------------------- */
.ap .ap-pestanas {
	margin: -8px 0 28px;
	border-bottom: 1px solid var(--nd-borde);
}
.ap .ap-pestanas ul {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0 0 10px;
	overflow-x: auto;
	scrollbar-width: none;
}
.ap .ap-pestanas ul::-webkit-scrollbar { display: none; }
.ap .ap-pestanas li { flex: none; }
.ap .ap-pestanas a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	border-radius: var(--nd-r-pastilla);
	font-family: var(--nd-fuente-texto);
	font-size: 15px;
	font-weight: 500;
	color: var(--nd-texto);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--nd-d-rapida) var(--nd-curva), color var(--nd-d-rapida) var(--nd-curva);
}
.ap .ap-pestanas a .bi { color: var(--nd-texto-suave); font-size: 15px; }
.ap .ap-pestanas a:hover { background: rgba(13, 76, 145, 0.06); color: var(--nd-tinta); }
.ap .ap-pestanas a[aria-current="page"] {
	background: var(--nd-fondo-azul);
	color: var(--nd-azul);
	font-weight: 600;
}
.ap .ap-pestanas a[aria-current="page"] .bi { color: var(--nd-azul); }

/* ---------------------------------------------------------------------
   BOTONES (pastilla, como .nd-btn)
   --------------------------------------------------------------------- */
.ap .ap-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 0 18px;
	border-radius: var(--nd-r-pastilla);
	border: 1px solid var(--nd-borde-fuerte);
	background: #fff;
	font-family: var(--nd-fuente-texto);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--nd-tinta);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color var(--nd-d-rapida) var(--nd-curva), background-color var(--nd-d-rapida) var(--nd-curva), color var(--nd-d-rapida) var(--nd-curva);
}
.ap .ap-btn:hover { border-color: var(--nd-azul); background: var(--nd-fondo-azul); color: var(--nd-azul); }
.ap .ap-btn:disabled { cursor: progress; opacity: 0.7; }
.ap .ap-btn--principal { border-color: var(--nd-azul); background: var(--nd-azul); color: #fff; }
.ap .ap-btn--principal:hover { border-color: var(--nd-azul-hover); background: var(--nd-azul-hover); color: #fff; }
.ap .ap-btn--principal .bi-arrow-right { transition: transform var(--nd-d-rapida) var(--nd-curva); }
.ap .ap-btn--principal:hover .bi-arrow-right { transform: translateX(3px); }
.ap .ap-btn--texto { border-color: transparent; background: none; color: var(--nd-texto-suave); padding-inline: 12px; }
.ap .ap-btn--peligro:hover { border-color: transparent; background: #fef3f2; color: #b42318; }

/* ---------------------------------------------------------------------
   CARGANDO, VACÍO Y ERROR
   --------------------------------------------------------------------- */
.ap .ap-cargando {
	padding: 24px 0;
	font-size: 15px;
	color: var(--nd-texto-suave);
}

.ap-vacio {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: clamp(24px, 3vw, 40px);
	border-radius: var(--nd-r-l);
	border: 1px dashed var(--nd-borde-fuerte);
	background: var(--nd-fondo-suave);
}
.ap-vacio__icono {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--nd-fondo-azul);
	color: var(--nd-azul);
	font-size: 22px;
}
.ap .ap-vacio__titulo {
	margin-bottom: 6px;
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -0.015em;
}
.ap .ap-vacio p {
	max-width: 56ch;
	margin-bottom: 20px;
	font-size: 15px;
	color: var(--nd-texto-suave);
}
.ap-vacio--error .ap-vacio__icono { background: #fef3f2; color: #b42318; }
@media (max-width: 575.98px) {
	.ap-vacio { flex-direction: column; gap: 14px; }
}

/* ---------------------------------------------------------------------
   AVISO FLOTANTE («Quitada de favoritas · Deshacer»)
   --------------------------------------------------------------------- */
.ap-aviso {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 1080;
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: calc(100% - 32px);
	padding: 10px 10px 10px 20px;
	border-radius: var(--nd-r-pastilla);
	background: var(--nd-tinta);
	box-shadow: var(--nd-sombra-3);
	font-family: var(--nd-fuente-texto);
	font-size: 15px;
	color: #fff;
	transform: translate(-50%, 0);
	transition: opacity var(--nd-d-media) var(--nd-curva), transform var(--nd-d-media) var(--nd-curva);
}
.ap-aviso[hidden] { display: none; }
/* Solo texto (sin «Deshacer»), p. ej. «Respuestas guardadas»; el icono, en cian */
.ap-aviso--simple { gap: 10px; padding: 12px 22px 12px 18px; }
.ap-aviso .bi { color: var(--nd-cian); font-size: 18px; line-height: 1; }
.ap-aviso.es-saliendo { opacity: 0; transform: translate(-50%, 12px); }
.ap .ap-aviso__accion {
	min-height: 36px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--nd-r-pastilla);
	background: rgba(255, 255, 255, 0.12);
	font-family: var(--nd-fuente-texto);
	font-size: 14px;
	font-weight: 600;
	color: var(--nd-cian);
	cursor: pointer;
}
.ap .ap-aviso__accion:hover { background: rgba(255, 255, 255, 0.2); }
.ap .ap-aviso__accion:focus-visible { outline-color: var(--nd-cian); }

@media (prefers-reduced-motion: reduce) {
	.ap *, .ap-aviso { transition: none !important; }
	.ap .ap-btn--principal:hover .bi-arrow-right { transform: none; }
}