/* ============================================================================
   Pie de página unificado de los sitios Subartes.

   Este archivo es idéntico en los cinco sitios: no se edita por sitio. El
   color de fondo entra por la variable --pie-fondo, que cada portal fija con
   una de las clases de tema de más abajo.

   Requiere footer.js para convertir las sedes en pestañas. Sin ese script el
   pie sigue siendo usable: las dos sedes quedan visibles.
   ============================================================================ */

.pie{
	--pie-fondo: #1F3D68;
}

/* ---------------- reset propio: el pie no depende del CSS de cada sitio ---------------- */

.pie ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.pie li{
	float: none;
}

.pie p{
	float: none;
}

.pie h2,
.pie h3{
	float: none;
	text-transform: uppercase;
}

.pie img{
	max-width: 100%;
}

.pie-tema-siac{
	--pie-fondo: #10283B;
}

.pie-tema-gris{
	--pie-fondo: #373C42;
}

/* ================= pie de página unificado ================= */

.pie{
	padding: 44px 0 32px 0;
	background-color: var(--pie-fondo);
	color: #ffffff;
}

.pie .row,
.pie .footer-interior{
	max-width: 1140px;
	display: flex;
	flex-wrap: wrap;
}

.pie .columna-pie{
	display: flex;
	flex-direction: column;
	margin-bottom: 32px;
	/* El canal entre columnas lo pone este archivo, no la rejilla del sitio:
	   SIAC no carga Bootstrap en todas sus plantillas y las columnas quedaban
	   pegadas. En los sitios que si lo cargan, esta regla sustituye al padding
	   de .col-* por el mismo valor, no se suma. */
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}

.pie #logo-min{
	float: none;
	display: block;
	width: 100%;
	max-width: 260px;
}

.pie #logo-min img{
	display: block;
	width: 180px;
	max-width: 100%;
	height: auto;
}

.pie p.nombre-ministerio{
	float: none;
	clear: none;
	display: block;
	width: auto;
	margin: 20px 0 0 0;
	color: #ffffff;
	font-size: 12px;
	line-height: 19px;
}

.pie .titulo-pie{
	color: #ffffff;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.pie p,
.pie .datos-pie{
	margin: 0;
}

.pie .datos-pie li,
.pie .lista-pie li{
	margin-bottom: 2px;
	color: #ffffff;
}

.pie p a,
.pie .datos-pie a,
.pie .lista-pie a,
.pie .sede-pie a{
	color: #ffffff;
}

.pie .sedes-pie{
	display: flex;
	flex-wrap: wrap;
	/* Solo separacion horizontal: el espacio vertical bajo las pestanas lo
	   fija .pestanas-sede, para que no se sumen dos origenes. */
	column-gap: 20px;
	row-gap: 0;
}

.pie .pestanas-sede{
	flex: 0 0 100%;
	display: flex;
	margin-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.pie .pestana-sede{
	/* Dos mitades iguales: cada sede ocupa el 50 % del ancho. */
	flex: 1 1 50%;
	background: none;
	border: 0;
	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
	min-height: 40px;
	padding: 10px 8px;
	cursor: pointer;
	text-align: center;
	box-shadow: inset 0 -2px rgba(255, 255, 255, 0);
	transition: box-shadow 0.2s ease-in, background-color 0.2s ease-in;
}

.pie .pestana-sede:hover{
	background-color: rgba(255, 255, 255, 0.12);
	box-shadow: inset 0 -2px rgba(255, 255, 255, 0.6);
}

/* La pestana activa no se distingue solo por color: lleva ademas el subrayado
   grueso y la negrita, para quien no percibe la diferencia cromatica (1.4.1). */
.pie .pestana-sede[aria-selected="true"]{
	font-weight: 700;
	box-shadow: inset 0 -3px #ffffff;
}

.pie .pestana-sede[aria-selected="true"]:hover{
	background-color: rgba(255, 255, 255, 0.12);
}

@media (prefers-reduced-motion: reduce){
	.pie .pestana-sede{
		transition: none;
	}
}

/* !important porque los sitios declaran su anillo de foco con !important
   (button:focus-visible) y si no, el de la pestana no se ve. Mismo patron de
   doble anillo del resto del sitio: blanco pegado y oscuro por fuera. */
.pie .pestana-sede:focus-visible,
.pie .sede-pie:focus-visible,
.pie a:focus-visible{
	outline: 2px solid #ffffff !important;
	outline-offset: 1px !important;
	box-shadow: 0 0 0 4px var(--pie-fondo) !important;
}

.pie .sede-pie{
	flex: 1 1 140px;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.pie .sede-pie[hidden]{
	display: none;
}

.pie .mapa-caja{
	position: relative;
	max-width: 320px;
}

.pie .sede-pie .ver-mapa{
	position: absolute;
	top: 8px;
	left: 8px;
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	background-color: var(--pie-fondo);
	border: 1px solid #ffffff;
	border-radius: 2px;
	color: #ffffff;
	font-size: 13px;
	line-height: 18px;
	font-weight: 700;
	text-decoration: none;
}

/* !important en el color: SIAC declara `#footer a { color:#ffffff }`, que con
   un id (1,0,1) le gana a este selector (0,3,1). Al pasar el puntero el fondo
   se volvia blanco y el texto se quedaba blanco: 1:1, invisible. axe no lo
   ve porque no evalua estados de puntero. */
.pie .sede-pie .ver-mapa:hover,
.pie .sede-pie .ver-mapa:focus-visible{
	background-color: #ffffff !important;
	color: var(--pie-fondo) !important;
	text-decoration: underline;
}

.pie .mapa-sede{
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	border: 1px solid rgba(255, 255, 255, 0.5);
}

.pie .direccion-sede{
	margin: 10px 0 6px 0;
	color: #ffffff;
	font-size: 13px;
	line-height: 20px;
}

@media (max-width: 767.98px) {
	.pie p.nombre-ministerio,
	.pie .datos-pie{
		margin: 12px 0 0 0;
	}
}

/* ---------------- jerarquia tipografica del pie ---------------- */

.pie{
	border-top: 4px solid #ffffff;
}

.pie .titulo-pie{
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 14px 0;
	padding-bottom: 10px;
}

.pie .subtitulo-pie{
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffffff;
	margin: 14px 0 2px 0;
}

.pie .datos-pie,
.pie .lista-pie{
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
}

.pie .datos-pie li,
.pie .lista-pie li,
.pie .datos-pie a,
.pie .lista-pie a{
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	margin-bottom: 0;
}

.pie .direccion-pie{
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	color: #ffffff;
}

@media (max-width: 767.98px) {
	.pie #logo-min{
		max-width: 140px;
	}
}

/* ---------------- reparto 2.5 / 3 / 3 / 3.5 del pie ---------------- */

@media (min-width: 992px) {
	.pie .columna-pie-logo{
		flex: 0 0 20.833333%;
		max-width: 20.833333%;
	}
	.pie .columna-pie-institucional,
	.pie .columna-pie-navegacion{
		flex: 0 0 25%;
		max-width: 25%;
	}
	.pie .columna-pie-sedes{
		flex: 0 0 29.166667%;
		max-width: 29.166667%;
	}
}

.pie .enlace-externo{
	display: inline-flex;
	align-items: center;
}

.pie .icono-externo{
	margin-left: 6px;
	flex: 0 0 auto;
}

/* ---------------- icono de sede y redes sociales ---------------- */

.pie .subtitulo-pie{
	display: flex;
	align-items: center;
	gap: 6px;
}

.pie .icono-sede{
	flex: 0 0 auto;
}

.pie .redes-pie{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pie .redes-pie a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 36px;
	padding: 6px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 2px;
	color: #ffffff;
}

.pie .redes-pie a:hover,
.pie .redes-pie a:focus-visible{
	background-color: rgba(255, 255, 255, 0.18);
	border-color: #ffffff;
}

.pie #titulo-pie-redes{
	margin-top: 20px;
}

.pie a{
	display: inline-block;
	min-height: 24px;
	padding: 4px 2px;
}

/* ---------------- envoltorio heredado ----------------
   Algunos sitios envuelven el pie en un contenedor con su propio fondo y
   relleno (Sello usa #pie con fondo gris y 30 px). Esa franja asomaba por
   encima y por debajo del pie, asi que el envoltorio directo se neutraliza
   aqui en vez de tocar el CSS de cada sitio. */

/* Solo un DIV envoltorio, nunca el body: con el selector sin acotar, en los
   sitios donde el pie cuelga directo del body este tambien casaba y se quedaba
   sin relleno, lo que rompia la compensacion de la barra fija.
   !important porque el envoltorio se estiliza por id (#pie en Sello) y un id
   gana por especificidad a este selector. */
div:has(> .pie){
	background: transparent !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* ---------------- texto solo para lectores de pantalla ----------------
   Visible para quien usa lector de pantalla, sin ocupar espacio en pantalla.
   No se usa display:none ni visibility:hidden porque eso tambien lo oculta
   al lector. */

.pie .solo-lectores{
	/* El color no se ve —el texto ocupa un pixel y va recortado— pero los
	   escaneres lo miden igual y lo reportan en cada pasada. Se fija el
	   blanco en vez de heredarlo: heredando, en Chile Artesania recogia un
	   color igual al fondo y seguia dando 1,00:1. Los cinco pies tienen
	   fondo oscuro, asi que el blanco contrasta en todos. */
	color: #ffffff;
	/* Y sin fondo propio: en Chile Artesania el parrafo recibia fondo blanco
	   de otra regla, asi que el blanco del texto caia sobre blanco y seguia
	   dando 1,00:1 aunque el color ya fuese el correcto. */
	background: transparent;
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------- movil: una columna por fila ----------------
   Por encima de 992 px el reparto lo fija el bloque de mas arriba. Por
   debajo no habia ancho declarado, asi que cada columna se quedaba del
   tamano de su contenido: en SIAC —el unico sitio cuya rejilla no da ancho
   a estos hijos— salian de 295, 267 y 259 px dentro de una pantalla de 375,
   con los titulos y sus lineas acabando cada uno en un sitio distinto. */

@media (max-width: 991.98px) {
	.pie .columna-pie {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* El tope de 320 px del mapa es para la columna estrecha del escritorio.
	   En una pantalla de telefono la columna es toda la pantalla y ese tope
	   dejaba el mapa corto: 25 px de sobra a 375 y 64 px a 414. Que llene lo
	   que hay; el margen lateral sigue siendo el relleno de la columna. */
	.pie .mapa-caja,
	.pie .mapa-sede {
		max-width: 100%;
	}
}

/* ---------------- boton de volver al principio ----------------
   Lo crea volver-arriba.js; aqui solo su aspecto, para que sea el mismo en
   los cinco sitios. Relleno azul y flecha de trazo blanco: 10,88:1 entre la
   flecha y el relleno, y 10,88:1 entre el relleno y el blanco de la pagina,
   muy por encima del 3:1 que pide 1.4.11 para el limite de un control. */

.volver-arriba {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 1050;
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* ESTE COLOR CAMBIA POR SITIO. Es lo unico que no es identico en las cinco
	   copias de este archivo:
	     Luis Advis, Roberto Parra, Sello   #1F3D68  (encima #16304f)
	     SIAC Cultura                       #102F3C  (encima #0a1f28)
	     Chile Artesania                    #9A352E  (encima #7c2a24) */
	background-color: #1F3D68;
	color: #ffffff;
	cursor: pointer;
}

.volver-arriba.visible {
	display: flex;
}

.volver-arriba svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
}

/* Sobre el pie el relleno del boton deja de recortarse contra el fondo —en
   dos de los cinco sitios son casi el mismo azul— y el contorno del control
   se pierde. El filete lo devuelve. */
.volver-arriba.sobre-el-pie {
	border: 0.5px solid #ffffff;
}

.volver-arriba:hover {
	background-color: #16304f;
}

.volver-arriba:focus-visible {
	outline: 3px solid #1F3D68 !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px #ffffff !important;
}

.volver-arriba.sobre-el-pie:focus-visible {
	outline-color: #ffffff !important;
	box-shadow: 0 0 0 3px #1F3D68 !important;
}