/* Alto contraste - la convención de Windows, no un simple oscurecido.
 *
 * Este archivo es el canónico: vive en .pie/ y se copia igual a los cinco
 * sitios, como footer.css y volver-arriba.js. El contrato sale de lo que ya
 * implementaba SIAC Cultura, que es lo que la diseñadora dio por bueno.
 *
 * La paleta es fija y no se adapta a la marca de cada sitio: en alto contraste
 * la marca estorba. Es justo lo que fallaba antes —el celeste de Luis Advis y
 * Roberto Parra, el granate de Sello con 3,38:1— y por eso aquí no hay ningún
 * color de marca.
 *
 *   fondo    #000000     texto     #ffffff
 *   enlace   #ffff00     invertido #000000 sobre #ffff00 al pasar o enfocar
 *   contorno #ffffff     foco      #ffff00, 3 px con separación
 *
 * Los estados no son un extra: un enlace que sólo cumple en reposo deja de
 * verse justo cuando alguien lo está usando.
 */

.alto-contraste.alto-contraste.alto-contraste,
.alto-contraste.alto-contraste.alto-contraste body {
	background: #000000 !important;
	color: #ffffff !important;
}

/* El barrido aplana fondos y unifica el texto en blanco. Lleva `:not(a)` por
   una razon medida: cada `:not()` de etiqueta suma especificidad, y con seis
   de ellos el barrido llegaba a (0,3,6) y le ganaba a la regla del enlace,
   que es (0,3,1). El archivo se estaba ganando a si mismo y los enlaces de
   Sello salian blancos. Con un solo `:not(a)` queda en (0,3,1) y la regla del
   enlace, que viene despues, manda. */
/* `*` no alcanza a ::before ni ::after, y ahi es donde viven las capas de
   color que tinen las bandas: en Chile Artesania la franja del buscador
   seguia saliendo marron con el fondo del elemento ya en negro. */
.alto-contraste.alto-contraste.alto-contraste *::before,
.alto-contraste.alto-contraste.alto-contraste *::after {
	background-color: transparent !important;
	background-image: none !important;
	color: #ffffff !important;
	border-color: #000000 !important;
}

/* Los bordes heredados se apagan contra el fondo en vez de pintarse de
   blanco. Pintarlos dejaba a la vista cada filete sutil del tema —un
   `border-bottom` de titulo, los costados de un envoltorio— convertido en una
   linea blanca suelta que no cierra ninguna caja. El contorno lo dibujan las
   reglas explicitas del final, que son las que saben que es una caja. */
.alto-contraste.alto-contraste.alto-contraste *:not(a) {
	background-color: transparent !important;
	background-image: none !important;
	color: #ffffff !important;
	border-color: #000000 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.alto-contraste.alto-contraste.alto-contraste header,
.alto-contraste.alto-contraste.alto-contraste main,
.alto-contraste.alto-contraste.alto-contraste footer,
.alto-contraste.alto-contraste.alto-contraste .pie,
.alto-contraste.alto-contraste.alto-contraste section,
.alto-contraste.alto-contraste.alto-contraste article {
	background: #000000 !important;
}

/* El barrido excluye `a` para no ganarle a esta regla, asi que el fondo de un
   enlace no lo aplana nadie: la pagina activa del paginador conservaba el
   naranja de marca y el amarillo encima daba 2,73:1. El fondo se aplana aqui,
   donde si alcanza al enlace. */
.alto-contraste.alto-contraste.alto-contraste a {
	background-color: #000000 !important;
	background-image: none !important;
	border-color: #000000 !important;
	color: #ffff00 !important;
	text-decoration: underline !important;
}

/* Los descendientes heredan el color pero NO el fondo: darselo opaco se lo da
   tambien al svg de un icono, y `brightness(0) invert(1)` convertia ese fondo
   negro en un cuadrado blanco. Medido en los iconos de enlace externo del pie. */
.alto-contraste.alto-contraste.alto-contraste a * {
	background-color: transparent !important;
	background-image: none !important;
	border-color: #000000 !important;
	color: #ffff00 !important;
	text-decoration: underline !important;
}

/* La pagina en curso de un paginador se distinguia solo por su fondo de marca,
   que aqui se aplana: sin esto queda igual que sus vecinas. Recibe el mismo
   tratamiento que un control pulsado. */
.alto-contraste.alto-contraste.alto-contraste .pagination .active,
.alto-contraste.alto-contraste.alto-contraste .pagination .active a,
.alto-contraste.alto-contraste.alto-contraste .pagination .active .page-link,
.alto-contraste.alto-contraste.alto-contraste .page-item.active .page-link {
	background-color: #ffff00 !important;
	color: #000000 !important;
	border: 3px solid #ffff00 !important;
	text-decoration: none !important;
}

.alto-contraste.alto-contraste.alto-contraste a:hover,
.alto-contraste.alto-contraste.alto-contraste a:focus,
.alto-contraste.alto-contraste.alto-contraste a:focus-visible,
.alto-contraste.alto-contraste.alto-contraste a:active,
.alto-contraste.alto-contraste.alto-contraste a:hover *,
.alto-contraste.alto-contraste.alto-contraste a:focus * {
	background-color: #ffff00 !important;
	color: #000000 !important;
	text-decoration: underline !important;
}

.alto-contraste.alto-contraste.alto-contraste input,
.alto-contraste.alto-contraste.alto-contraste select,
.alto-contraste.alto-contraste.alto-contraste textarea,
.alto-contraste.alto-contraste.alto-contraste option {
	background-color: #000000 !important;
	color: #ffffff !important;
	border: 2px solid #ffffff !important;
}

.alto-contraste.alto-contraste.alto-contraste input:focus,
.alto-contraste.alto-contraste.alto-contraste select:focus,
.alto-contraste.alto-contraste.alto-contraste textarea:focus,
.alto-contraste.alto-contraste.alto-contraste input:focus-visible,
.alto-contraste.alto-contraste.alto-contraste select:focus-visible,
.alto-contraste.alto-contraste.alto-contraste textarea:focus-visible {
	outline: 3px solid #ffff00 !important;
	outline-offset: 2px !important;
}

.alto-contraste.alto-contraste.alto-contraste button,
.alto-contraste.alto-contraste.alto-contraste .btn,
.alto-contraste.alto-contraste.alto-contraste input[type="submit"],
.alto-contraste.alto-contraste.alto-contraste input[type="button"],
.alto-contraste.alto-contraste.alto-contraste input[type="reset"] {
	background-color: #000000 !important;
	color: #ffffff !important;
	border: 2px solid #ffffff !important;
	text-decoration: none !important;
}

.alto-contraste.alto-contraste.alto-contraste button:hover,
.alto-contraste.alto-contraste.alto-contraste button:focus,
.alto-contraste.alto-contraste.alto-contraste button:active,
.alto-contraste.alto-contraste.alto-contraste .btn:hover,
.alto-contraste.alto-contraste.alto-contraste .btn:focus,
.alto-contraste.alto-contraste.alto-contraste input[type="submit"]:hover,
.alto-contraste.alto-contraste.alto-contraste input[type="submit"]:focus,
.alto-contraste.alto-contraste.alto-contraste input[type="button"]:hover,
.alto-contraste.alto-contraste.alto-contraste input[type="button"]:focus {
	background-color: #ffff00 !important;
	color: #000000 !important;
	border-color: #ffff00 !important;
}

/* Un control pulsado se distingue del que no lo está sin depender del color:
   el contorno cambia de grosor además de invertirse. */
.alto-contraste.alto-contraste.alto-contraste [aria-pressed="true"],
.alto-contraste.alto-contraste.alto-contraste [aria-current],
.alto-contraste.alto-contraste.alto-contraste [aria-expanded="true"] {
	background-color: #ffff00 !important;
	color: #000000 !important;
	border: 3px solid #ffff00 !important;
}

/* El icono de un control invertido tiene que invertirse con el: el barrido
   le pone `color: #ffffff` al propio svg, asi que su `currentColor` seguia
   siendo blanco aunque el boton pidiera negro, y el icono desaparecia sobre
   el fondo claro. Reportado en el conmutador de contraste de los cinco. */
.alto-contraste.alto-contraste.alto-contraste [aria-pressed="true"] svg,
.alto-contraste.alto-contraste.alto-contraste [aria-pressed="true"] svg *,
.alto-contraste.alto-contraste.alto-contraste [aria-current] svg,
.alto-contraste.alto-contraste.alto-contraste [aria-current] svg *,
.alto-contraste.alto-contraste.alto-contraste [aria-expanded="true"] svg,
.alto-contraste.alto-contraste.alto-contraste [aria-expanded="true"] svg *,
.alto-contraste.alto-contraste.alto-contraste button:hover svg,
.alto-contraste.alto-contraste.alto-contraste button:hover svg *,
.alto-contraste.alto-contraste.alto-contraste button:focus svg,
.alto-contraste.alto-contraste.alto-contraste button:focus svg *,
.alto-contraste.alto-contraste.alto-contraste a:hover svg,
.alto-contraste.alto-contraste.alto-contraste a:hover svg *,
.alto-contraste.alto-contraste.alto-contraste a:focus svg,
.alto-contraste.alto-contraste.alto-contraste a:focus svg * {
	color: #000000 !important;
}

.alto-contraste.alto-contraste.alto-contraste [aria-pressed="true"] img,
.alto-contraste.alto-contraste.alto-contraste [aria-current] img,
.alto-contraste.alto-contraste.alto-contraste button:hover img,
.alto-contraste.alto-contraste.alto-contraste a:hover img {
	filter: brightness(0) !important;
}

/* El conmutador pulsado va en amarillo en los cinco, no en blanco en unos y
   amarillo en otros. Cuatro clases le ganan a la regla propia de cada sitio. */
.alto-contraste.alto-contraste.alto-contraste.alto-contraste [aria-pressed="true"],
.alto-contraste.alto-contraste.alto-contraste.alto-contraste [aria-current]:not(a) {
	background-color: #ffff00 !important;
	color: #000000 !important;
	border: 3px solid #ffff00 !important;
}

.alto-contraste.alto-contraste.alto-contraste [disabled],
.alto-contraste.alto-contraste.alto-contraste [aria-disabled="true"] {
	color: #a0a0a0 !important;
	border-color: #a0a0a0 !important;
}

.alto-contraste.alto-contraste.alto-contraste :focus-visible {
	outline: 3px solid #ffff00 !important;
	outline-offset: 2px !important;
}

/* Un icono monocromo que depende de su relleno desaparece sobre negro: se
   invierte a blanco puro. Los logotipos NO entran aqui: ver mas abajo. */
.alto-contraste.alto-contraste.alto-contraste .icono-externo,
.alto-contraste.alto-contraste.alto-contraste .icono-sede {
	filter: brightness(0) invert(1) !important;
}

.alto-contraste.alto-contraste.alto-contraste img[src*="no-image" i],
.alto-contraste.alto-contraste.alto-contraste img[src*="placeholder" i],
.alto-contraste.alto-contraste.alto-contraste img[src*="sin-imagen" i] {
	filter: brightness(0) invert(1) !important;
	opacity: 0.4 !important;
}

.alto-contraste.alto-contraste.alto-contraste hr {
	border-color: #ffffff !important;
}

.alto-contraste.alto-contraste.alto-contraste table,
.alto-contraste.alto-contraste.alto-contraste th,
.alto-contraste.alto-contraste.alto-contraste td {
	border-color: #ffffff !important;
}

/* Un triangulo de desplegable no es un borde de caja: es la figura misma,
   dibujada con `border-top` y los costados transparentes. Apagar los bordes
   heredados lo hacia desaparecer, y pintarlos todos de blanco —como se hacia
   antes— lo convertia en un cuadrado. Solo la cara que forma el triangulo
   vuelve a blanco; los costados siguen apagados y no se ven. */
.alto-contraste.alto-contraste.alto-contraste .dropdown-toggle::after,
.alto-contraste.alto-contraste.alto-contraste .dropup .dropdown-toggle::after,
.alto-contraste.alto-contraste.alto-contraste .caret {
	border-top-color: #ffffff !important;
	border-bottom-color: #ffffff !important;
}


/* ------------------------------------------------------------------
   Los bordes: esto es lo que hace que se vea «como Windows».

   Al aplanar los fondos desaparece el unico limite que tenian las cajas y la
   pagina se vuelve una mancha negra continua. En el modo del sistema ese
   limite lo dibuja el borde, asi que aqui no basta con cambiar
   `border-color`: hay que CREARLO donde no habia ninguno.

   Se delinea el cromo y los componentes, NO cada envoltorio de maquetacion.
   Bordear `.container` y `.row` daria 319 cajas anidadas solo en Chile, y 379
   tarjetas en /documentos: el modo del sistema no hace eso.
   ------------------------------------------------------------------ */

/* Una barra fija o pegajosa necesita fondo propio: el barrido se lo quita y
   al desplazar el contenido se le ve por debajo. Medido en la cabecera de
   Chile Artesania. */
.alto-contraste.alto-contraste.alto-contraste [class*="sticky"],
.alto-contraste.alto-contraste.alto-contraste [class*="fixed"],
.alto-contraste.alto-contraste.alto-contraste header,
.alto-contraste.alto-contraste.alto-contraste .site-header,
.alto-contraste.alto-contraste.alto-contraste .navbar {
	background-color: #000000 !important;
}

.alto-contraste.alto-contraste.alto-contraste header,
.alto-contraste.alto-contraste.alto-contraste nav,
.alto-contraste.alto-contraste.alto-contraste main,
.alto-contraste.alto-contraste.alto-contraste aside,
.alto-contraste.alto-contraste.alto-contraste footer,
.alto-contraste.alto-contraste.alto-contraste .pie,
.alto-contraste.alto-contraste.alto-contraste [role="banner"],
.alto-contraste.alto-contraste.alto-contraste [role="navigation"],
.alto-contraste.alto-contraste.alto-contraste [role="main"],
.alto-contraste.alto-contraste.alto-contraste [role="complementary"],
.alto-contraste.alto-contraste.alto-contraste [role="contentinfo"],
.alto-contraste.alto-contraste.alto-contraste [role="search"] {
	border: 2px solid #ffffff !important;
}

/* La cabecera y el pie cierran contra el borde de la ventana: ahi el filete
   solo hace falta por el lado que da al contenido. */
.alto-contraste.alto-contraste.alto-contraste header {
	border-width: 0 0 2px 0 !important;
}
.alto-contraste.alto-contraste.alto-contraste footer,
.alto-contraste.alto-contraste.alto-contraste .pie {
	border-width: 2px 0 0 0 !important;
}
.alto-contraste.alto-contraste.alto-contraste main {
	border-width: 0 0 2px 0 !important;
}

/* `section` marca una banda de ancho completo y `article` una pieza de
   contenido —29 de las tarjetas de disciplina de Chile son `article`—: las
   dos son componentes, no envoltorios de maquetacion. */
.alto-contraste.alto-contraste.alto-contraste [class*="header_"],
.alto-contraste.alto-contraste.alto-contraste [class*="barra"],
.alto-contraste.alto-contraste.alto-contraste .navbar,
.alto-contraste.alto-contraste.alto-contraste section,
.alto-contraste.alto-contraste.alto-contraste article,
.alto-contraste.alto-contraste.alto-contraste .card,
.alto-contraste.alto-contraste.alto-contraste .panel,
.alto-contraste.alto-contraste.alto-contraste .alert,
.alto-contraste.alto-contraste.alto-contraste .modal-content,
.alto-contraste.alto-contraste.alto-contraste .dropdown-menu,
.alto-contraste.alto-contraste.alto-contraste fieldset,
/* El guion bajo separa el bloque de su parte: `.artisan-card` es la tarjeta
   y `.artisan-card_title` es su titulo. Sin excluir las partes salian cajas
   dentro de cajas —titulo, descripcion y pie, cada uno con su recuadro— y el
   listado de documentos de Chile se volvia una reja. */
.alto-contraste.alto-contraste.alto-contraste [class*="-card"]:not([class*="-card_"]),
.alto-contraste.alto-contraste.alto-contraste [class*="tarjeta"]:not([class*="tarjeta_"]),
.alto-contraste.alto-contraste.alto-contraste [class*="caja"]:not([class*="caja_"]) {
	border: 1px solid #ffffff !important;
}

.alto-contraste.alto-contraste.alto-contraste table,
.alto-contraste.alto-contraste.alto-contraste th,
.alto-contraste.alto-contraste.alto-contraste td {
	border: 1px solid #ffffff !important;
	border-collapse: collapse !important;
}

/* Un icono que depende de su relleno desaparece sobre negro. Los 460 de las
   28 rutas no tenian ningun tratamiento. */
.alto-contraste.alto-contraste.alto-contraste svg,
.alto-contraste.alto-contraste.alto-contraste svg * {
	color: #ffffff !important;
}
.alto-contraste.alto-contraste.alto-contraste img {
	border: 1px solid #ffffff !important;
}
/* Un logotipo conserva su color. Invertirlo solo sirve cuando es monocromo y
   oscuro; el del Ministerio son rectangulos solidos —#0F69B4, #EB3C46 y
   blanco— y `brightness(0) invert(1)` los llevaba a todos al mismo blanco: el
   logotipo del pie salia como una mancha de 118x107 px. Sin filtro el azul da
   3,70:1 y el rojo 5,27:1 contra el negro, y se reconoce. Un logotipo esta
   exento de 1.4.3, asi que el minimo no se incumple por dejarlo en su color. */
.alto-contraste.alto-contraste.alto-contraste img[src*="logo" i],
.alto-contraste.alto-contraste.alto-contraste img[alt*="logo" i],
.alto-contraste.alto-contraste.alto-contraste img[src*="gobierno" i],
.alto-contraste.alto-contraste.alto-contraste img[src*="cnca" i],
.alto-contraste.alto-contraste.alto-contraste img[src*="ministerio" i],
.alto-contraste.alto-contraste.alto-contraste .logo img,
.alto-contraste.alto-contraste.alto-contraste #logo img,
.alto-contraste.alto-contraste.alto-contraste .navbar-brand img {
	filter: none !important;
	border: 1px solid #ffffff !important;
}

.alto-contraste.alto-contraste.alto-contraste hr {
	border-color: #ffffff !important;
}