/* =====================================================================================================================
   PAGINAS LEGALES (modulos/legal-externo.php, desde el 13/10/2026)
   Cabecera, indice lateral fijo con los apartados y el texto en una tarjeta de lectura comoda. Usa los colores de
   /css/home-asisa.css (.hx). El texto viene de avisoslegales.saludfer.es: aqui solo se le da formato.
   ===================================================================================================================== */

/* ---------- Cabecera ---------- */
.hx.legal-cabecera {
	padding: 32px 0 36px;
	background: linear-gradient(180deg, #fff, var(--hx-fondo));
}
.hx.legal-cabecera h1 {
	margin: 14px 0 8px;
	font-size: clamp(30px, 3.8vw, 44px);
	font-weight: 800;
	line-height: 1.12;
	color: var(--hx-azul);
	overflow-wrap: anywhere; /* el dominio del titulo de proteccion de datos no cabe entero en movil */
}
.legal-sub { max-width: 760px; margin: 0; font-size: 1.1rem; color: var(--hx-gris); }

/* ---------- Cuerpo ---------- */
.hx.legal { padding: 8px 0 64px; background: var(--hx-fondo); }
.legal-caja {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 28px;
	align-items: start;
}
.legal-caja--sola { grid-template-columns: 1fr; max-width: 860px; margin: 0 auto; }

/* Indice */
.legal-indice {
	position: sticky;
	top: 90px;
	max-height: calc(100vh - 110px);
	overflow-y: auto;
	padding: 20px;
	border: 1px solid var(--hx-linea);
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--hx-sombra);
}
.legal-indice-titulo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	color: var(--hx-azul);
	font-weight: 800;
}
.legal-indice-titulo i { color: var(--hx-naranja); }
.legal-indice ol { margin: 0; padding: 0; list-style: none; counter-reset: legal; }
.legal-indice li { margin: 0; border-top: 1px solid var(--hx-linea); counter-increment: legal; }
.legal-indice li:first-child { border-top: 0; }
.legal-indice a {
	display: flex;
	gap: 10px;
	padding: 8px 0;
	color: var(--hx-texto);
	font-size: .9rem;
	line-height: 1.35;
	text-decoration: none;
}
.legal-indice a::before {
	content: counter(legal);
	flex: 0 0 22px;
	color: var(--hx-naranja);
	font-weight: 800;
}
.legal-indice a:hover { color: var(--hx-naranja); }

/* Texto */
.legal-texto {
	min-width: 0;
	padding: 40px 44px;
	border: 1px solid var(--hx-linea);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--hx-sombra);
	color: var(--hx-texto);
	font-size: 1rem;
	line-height: 1.75;
	overflow-wrap: anywhere;
}
.hx .legal-texto h2 {
	margin: 36px 0 12px;
	padding: 0 0 10px;
	border-bottom: 2px solid var(--hx-linea);
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--hx-azul);
	scroll-margin-top: 90px;
}
.hx .legal-texto h2:first-child { margin-top: 0; }
.hx .legal-texto h3 { margin: 24px 0 8px; font-size: 1.1rem; color: var(--hx-azul); }
.legal-texto p { margin: 0 0 14px; }
.legal-texto ul, .legal-texto ol { margin: 0 0 14px; padding-left: 22px; }
.legal-texto li { margin: 0 0 6px; }
.legal-texto strong, .legal-texto b { color: var(--hx-texto); }
.legal-texto a { color: var(--hx-azul); font-weight: 600; text-decoration: underline; }
.legal-texto a:hover { color: var(--hx-naranja); }
.legal-texto table { width: 100%; margin: 0 0 16px; border-collapse: collapse; font-size: .92rem; }
.legal-texto th, .legal-texto td { padding: 8px 10px; border: 1px solid var(--hx-linea); vertical-align: top; }
/* Tabla de protección de datos de la nota informativa (15/10/2026): la columna del epígrafe no parte las palabras */
.legal-tabla th[scope="row"] { width: 9.5em; overflow-wrap: normal; hyphens: auto; text-align: left; }
.legal-tabla th[scope="col"] { overflow-wrap: normal; text-align: left; }
@media (max-width: 575.98px) {
	/* En móvil, cada epígrafe encima de su texto; la cabecera queda solo para lectores de pantalla */
	.legal-tabla thead th { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
	.legal-tabla tbody tr, .legal-tabla tbody th, .legal-tabla tbody td { display: block; width: auto; }
	.legal-tabla tbody th[scope="row"] { width: auto; border-bottom: 0; background: var(--hx-fondo, #f5f8fc); }
	.legal-tabla tbody td { margin-bottom: 10px; }
}

/* Si el servicio no responde */
.legal-error {
	max-width: 760px;
	margin: 0 auto;
	padding: 24px 28px;
	border-radius: 16px;
	background: var(--hx-ambar-fondo);
	color: var(--hx-texto);
}
.legal-error p { margin: 0; }
.legal-error a { color: var(--hx-azul); font-weight: 700; }

@media (max-width: 991.98px) {
	.legal-caja { grid-template-columns: 1fr; }
	.legal-indice { position: static; max-height: none; }
}
@media (max-width: 767.98px) {
	.hx.legal { padding-bottom: 40px; }
	.legal-texto { padding: 24px 18px; font-size: .97rem; line-height: 1.7; }
	.hx .legal-texto h2 { font-size: 1.15rem; }
}

/* ---------- Declaracion de cookies de Cookiebot (politica-cookies.php) ----------
   Cookiebot inyecta su HTML (clases CookieDeclaration*) y un <style> minimo: estas reglas lo sobrescriben. */
.legal-caja--sola:has(.legal-cookies) { max-width: 1100px; }
.legal-cookies .CookieDeclaration { font-size: 1rem; line-height: 1.7; }
.hx .legal-cookies h3,
.hx .legal-cookies h4 {
	margin: 32px 0 12px;
	padding: 0 0 10px;
	border-bottom: 2px solid var(--hx-linea);
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--hx-azul);
}
.hx .legal-cookies h4 { font-size: 1.15rem; }
.legal-cookies .CookieDeclarationDialogText {
	margin: 0 0 18px;
	padding: 18px 20px;
	border-radius: 14px;
	background: var(--hx-fondo);
	font-size: .95rem;
}
.legal-cookies .CookieDeclarationIntro:empty { display: none; }
.legal-cookies li strong { color: var(--hx-azul); }

/* Estado del consentimiento y botones para cambiarlo */
.legal-cookies #CookieDeclarationUserStatusPanel {
	margin: 24px 0 8px !important;
	padding: 20px 22px;
	border: 1px solid var(--hx-linea);
	border-left: 4px solid var(--hx-naranja);
	border-radius: 14px;
	background: var(--hx-ambar-fondo);
}
.legal-cookies #CookieDeclarationUserStatusLabel { font-weight: 700; color: var(--hx-texto); }
.legal-cookies #CookieDeclarationConsentIdAndDate { margin: 6px 0 0; font-size: .9rem; font-weight: 400; color: var(--hx-gris); }
.legal-cookies #CookieDeclarationChangeConsent { margin: 14px 0 0; }
.legal-cookies #CookieDeclarationChangeConsent a {
	display: inline-flex;
	align-items: center;
	margin: 4px 8px 4px 0;
	padding: 10px 18px;
	border: 2px solid var(--hx-naranja);
	border-radius: 12px;
	background: var(--hx-naranja);
	color: #fff !important;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none !important;
}
.legal-cookies #CookieDeclarationChangeConsent a:hover { filter: brightness(1.06); }
.legal-cookies #CookieDeclarationChangeConsent a#CookieDeclarationChangeConsentWithdraw {
	background: #fff;
	color: var(--hx-naranja) !important;
}
/* El « | » entre los dos botones se oculta con font-size 0 (el boton de retirar va dentro y lleva su propio tamaño) */
.legal-cookies #CookieDeclarationUserStatusLabelWithdraw { font-size: 0; }
.legal-cookies .CookieDeclarationLastUpdated { margin: 18px 0; font-size: .9rem; color: var(--hx-gris); }

/* Cada tipo de cookie, una tarjeta con su tabla */
.legal-cookies .CookieDeclarationType {
	margin: 18px 0 !important;
	padding: 20px 22px 6px !important;
	border: 1px solid var(--hx-linea) !important;
	border-radius: 16px;
	background: #fff;
}
.legal-cookies .CookieDeclarationTypeHeader { margin: 0 0 4px; font-size: 1.1rem; font-weight: 800; color: var(--hx-azul); }
.legal-cookies .CookieDeclarationTypeDescription { margin: 0 0 14px !important; color: var(--hx-gris); font-size: .95rem; }
.legal-cookies .CookieDeclarationTable {
	width: 100%;
	margin: 0 0 16px !important;
	border-collapse: collapse;
	font-size: .88rem !important;
}
.legal-cookies .CookieDeclarationTableHeader {
	padding: 10px 12px !important;
	border-bottom: 0 !important;
	background: var(--hx-azul);
	color: #fff;
	font-size: .78rem;
	letter-spacing: .04em;
	line-height: 1.35;
	text-transform: uppercase;
	vertical-align: bottom;
}
.legal-cookies .CookieDeclarationTableHeader:first-child { border-top-left-radius: 10px; }
.legal-cookies .CookieDeclarationTableHeader:last-child { border-top-right-radius: 10px; }
.legal-cookies .CookieDeclarationTableCell {
	padding: 10px 12px !important;
	border-bottom: 1px solid var(--hx-linea) !important;
	color: var(--hx-texto);
	line-height: 1.5;
	vertical-align: top !important;
}
.legal-cookies .CookieDeclarationTable tbody tr:nth-child(even) .CookieDeclarationTableCell { background: var(--hx-fondo); }
.legal-cookies .CookieDeclarationTableCell a { color: var(--hx-azul); }

@media (max-width: 767.98px) {
	.legal-cookies .CookieDeclarationType { padding: 16px 14px 4px !important; }
	/* En movil cada cookie es una ficha: sin cabecera de tabla y con el nombre del dato encima de cada valor
	   (Cookiebot oculta la columna «Tipo» por debajo de 600px; aqui se vuelve a mostrar porque cabe) */
	.legal-cookies .CookieDeclarationTable,
	.legal-cookies .CookieDeclarationTable tbody,
	.legal-cookies .CookieDeclarationTable tr { display: block; width: 100%; }
	.legal-cookies .CookieDeclarationTable thead,
	.legal-cookies .CookieDeclarationTable colgroup { display: none; }
	.legal-cookies .CookieDeclarationTable tr {
		margin: 0 0 12px;
		border: 1px solid var(--hx-linea);
		border-radius: 12px;
		overflow: hidden;
	}
	.legal-cookies .CookieDeclaration table.CookieDeclarationTable tr td.CookieDeclarationTableCell {
		display: block;
		padding: 8px 12px !important;
		background: #fff !important;
	}
	.legal-cookies .CookieDeclaration table.CookieDeclarationTable tr td.CookieDeclarationTableCell:first-child {
		background: var(--hx-fondo) !important;
		font-weight: 700;
		color: var(--hx-azul);
	}
	.legal-cookies .CookieDeclarationTableCell:last-child { border-bottom: 0 !important; }
	.legal-cookies .CookieDeclarationTableCell:nth-child(n+2)::before {
		display: block;
		margin: 0 0 2px;
		color: var(--hx-gris);
		font-size: .72rem;
		font-weight: 700;
		letter-spacing: .05em;
		text-transform: uppercase;
	}
	.legal-cookies .CookieDeclarationTableCell:nth-child(2)::before { content: "Proveedor"; }
	.legal-cookies .CookieDeclarationTableCell:nth-child(3)::before { content: "Propósito"; }
	.legal-cookies .CookieDeclarationTableCell:nth-child(4)::before { content: "Duración máxima"; }
	.legal-cookies .CookieDeclarationTableCell:nth-child(5)::before { content: "Tipo"; }
	.legal-cookies #CookieDeclarationChangeConsent a { width: 100%; justify-content: center; }
}