MediaWiki:Common.css

body, #firstHeading, h1, h2, h3, h4, h5,
.mw-body h1, .mw-body h2, .mw-body #firstHeading, 
body em, body i, body strong {font-family: 'Open Sans', sans-serif;}
body.page-Página_principal.action-view h1.firstHeading, body.page-Página_principal.action-submit h1.firstHeading { display: none; }

li#footer-info-lastmod,
li#footer-info-viewcount,
li#footer-places-about,
li#footer-places-disclaimer {
  display: none !important;
}

#p-navigation h5 {
  display: none !important;
}

.nowrap { 
    white-space: nowrap;
}

.toggle-head {
  background:url(//upload.wikimedia.org/wikipedia/commons/thumb/1/1c/HW_open_arrow.svg/10px-HW_open_arrow.svg.png) no-repeat 0% center;
}

.toggle-head:hover {
  text-decoration:underline;
  cursor:pointer;
}

.redirect-in-category, .allpagesredirect a {
  color: gray;
}

.nodisplay {
  display: none !important;
}

/* Ambox: Noticias y páginas de proyecto */

table.ambox {
  width: 80%; 
  margin: 0 auto; 
  border-collapse: collapse; 
  background: #f8fcff; 
  border: 1px solid #aaa; 
  border-left: 15px solid #39f;       /* Barra azul predeterminada */
}
table.ambox th, table.ambox td {      /* Celda(s) de mensajes */
  padding: 0.25em 0.5em;              /* 0.5em left/right */
}
table.ambox td.ambox-image {          /* Celda de img a la izquierda */
  width: 52px; 
  padding: 2px 0px 2px 0.5em;         /* 0.5em left, 0px right */
  text-align: center; 
}
table.ambox td.ambox-imageright {     /* Celda de img a la derecha */
  width: 52px; 
  padding: 2px 0.5em 2px 0px;         /* 0px left, 0.5em right */
  text-align: center; 
}
table.ambox-notice {
  border-left: 15px solid #0080FF;    /* Azul */
}
table.ambox-serious {
  border-left: 15px solid #C00;       /* Rojo */
}
table.ambox-content {
  border-left: 15px solid #F63;       /* Naranja */
}
table.ambox-style {
  border-left: 15px solid #FC3;       /* Amarillo */
}
table.ambox-merge {
  border-left: 15px solid #95B;       /* Purpura */
}
table.ambox-license {
  border-left: 15px solid #088A08;    /* Verde */
}
table.ambox-protection {
  border-left: 15px solid #BBA;       /* Gris */
}
/* Arrow button formatting */

.arrowbutton {
	color:#ffffff;
	width:100px;
	padding:0.4em;
	line-height:1.5em;
}

.arrowbutton::before {
	content:"⇒ ";
	font-weight:bold;
}

.arrowbutton-red {
	background:#990000;
}

.arrowbutton-green {
	background:#339966;
}

.arrowbutton-blue {
	background:#0063BF;
}

.arrowbutton-gold {
	background:#E5B921;
}

.arrowbutton-red:hover {
    background: #ffb3b3 !important;
    color: #000000 !important;
}

.arrowbutton-green:hover {
    background: #c6ecd9 !important;
    color: #000000 !important;
}

.arrowbutton-blue:hover {
    background: #b3daff !important;
    color: #000000 !important;
}

.arrowbutton-gold:hover {
    background: #faefcb !important;
    color: #000000 !important;
}

/* Cortesía de Platonides */
#p-navigation { display: block; }
nav.vector-menu-portal { display: none; }


/* estilo de tablas */

table.rowlines { 
    border-collapse:collapse;
    border: 2px solid #BBBDBF;
    width:  100%;
    vertical-align: top;
}

table.rowlines th {
    border-bottom: 1px solid #BBBDBF;
    border-top:    1px solid #BBBDBF;
    padding:       5px;
}

table.rowlines td {
    border-bottom: 1px dotted #BBBDBF;
    padding:       5px;
}

div.rowlines-wrapper {
    padding: 0 10px 0 10px;
}

/* Header mega template */

#megaheader {
  position:relative;
  padding-bottom:1em;
  border:none;
  margin-bottom:2em;
  overflow: hidden;
}

@media screen and (min-width:982px) {
  #megaheader {
    margin-top:-3em;
    margin-left:-1.5em;
    margin-right:-1.5em;
  }
}

@media screen and (min-width:768px) and (max-width:981px) {
  #megaheader {
    margin-top:-2.7em;
    margin-left:-1em;
    margin-right:-1em;
  }
}

@media screen and (max-width:767px) {
  #megaheader {
    margin-top:-3em;
    margin-left:-1.15em;
    margin-right:-1.15em;
  }
}


@media screen and (min-width:768px) {
  #megaheader {
    height:500px;
  }

  #megaheader-short {
  	height:200px;
  }
}

@media screen and (max-width:767px) {
  #megaheader {
     height:auto;
  }
}

#megaheader img {
  -moz-transition: opacity 2s; /* Firefox 4 */
  -webkit-transition: opacity 2s; /* Safari and Chrome */
  -o-transition: opacity 2s;
  transition: opacity 2s;
}

/* Round button formatting */

.roundbutton {
    display:inline-block; border-radius:50%; color:#ffffff; width:54px; height:54px; padding:12px; margin-right:0.5em; margin-bottom:0.5em; text-align:center;
}

.roundbutton-large {
    display:inline-block; border-radius:50%; color:#ffffff; width:68px; height:68px; padding:15px; margin-right:0.5em; margin-bottom:0.5em; text-align:center;
}

/* Copied from Wikivoyage for scalable-width images */

@media screen and (max-width:767px) {
  .banner-image {
    position: relative;
    overflow: hidden;
    max-width: 1125px; 
    width: 100%;
    height: auto;
    margin-bottom: .6em;
    text-align: center;
    padding-left: 0 !important;
  }
  .banner-image img {
    width: 100%;
    height: auto;
    width: auto\9;
    margin:0 auto;
  }
}

@media screen and (min-width:768px) {
  .banner-image {
    position: relative;
    overflow: hidden;
    max-width: 1125px; 
    height: auto;
    margin-bottom: .6em;
  }
  .banner-image img {
    width: 100%;
    height: auto;
    width: auto\9;
  }
  .banner-image-left {
    float: left !important;
  }
  .banner-image-left img {
    float: left !important;
  }
  .banner-image-right {
    float: right !important;
  }
  .banner-image-right img {
    float: right !important;
  }
  .banner-image-none {
    float: none !important;
  }
  .banner-image-none img {
    float: none !important;
  }
  .banner-image-center {
    padding-left: none !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .banner-image-center img {
    float: none !important;
  }
}

@media screen and (max-width:767px) {
	.no-narrow {
		display: none;
	}
}
@media screen and (min-width:768px) {
	.narrow-only {
		display: none;
	}
}

/**
 * Style for horizontal lists (separator following item).
 * @source https://www.mediawiki.org/wiki/Snippets/Horizontal_lists
 * @revision 7 (2015-11-12)
 * @author [[User:Edokter]]
 */
.hlist dl,
.hlist ol,
.hlist ul {
	margin: 0;
	padding: 0;
}

/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
	margin: 0;
	display: inline;
}

.nonumtoc .tocnumber {
	display: none;
}

.nonumtoc #toc ul,
.nonumtoc .toc ul {
	line-height: 1.5em;
	list-style: none none;
	margin: .3em 0 0;
	padding: 0;
}

.hlist.nonumtoc #toc ul ul,
.hlist.nonumtoc .toc ul ul {
	/* @noflip */
	margin: 0;
}

/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
	display: inline;
}

/* Hide empty list items */
.hlist .mw-empty-li {
	display: none;
}

/* Generate interpuncts */
.hlist dt:after {
	content: ": ";
}

.hlist dd:after,
.hlist li:after {
	content: " · ";
	font-weight: bold;
}

.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
	content: none;
}

/* Add parentheses around nested lists */
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
	content: " (";
	font-weight: normal;
}

.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
	content: " )";
	font-weight: normal;
}

/* Put ordinals in front of ordered list items */
.hlist ol {
	counter-reset: listitem;
}

.hlist ol > li {
	counter-increment: listitem;
}

.hlist ol > li:before {
	content: " " counter(listitem) " ";
	white-space: nowrap;
}

.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
	content: " (" counter(listitem) " ";
}

/* ----------------------------------------------
 * Generated by Animista on 2021-9-30 18:30:28
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */
.bounce-in-top {
	-webkit-animation: bounce-in-top 1.1s 1s both;
	        animation: bounce-in-top 1.1s 1s both;
}
@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
.tracking-in-expand {
	-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation text-shadow-pop-bl
 * ----------------------------------------
 */
.text-shadow-pop-bl {
	-webkit-animation: text-shadow-pop-bl 1s both;
	        animation: text-shadow-pop-bl 1s both;
}
@-webkit-keyframes text-shadow-pop-bl {
  0% {
    text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
  100% {
    text-shadow: -1px 1px #555555, -2px 2px #555555, -3px 3px #555555, -4px 4px #555555, -5px 5px #555555, -6px 6px #555555, -7px 7px #555555, -8px 8px #555555;
    -webkit-transform: translateX(8px) translateY(-8px);
            transform: translateX(8px) translateY(-8px);
  }
}
@keyframes text-shadow-pop-bl {
  0% {
    text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
  100% {
    text-shadow: -1px 1px #555555, -2px 2px #555555, -3px 3px #555555, -4px 4px #555555, -5px 5px #555555, -6px 6px #555555, -7px 7px #555555, -8px 8px #555555;
    -webkit-transform: translateX(8px) translateY(-8px);
            transform: translateX(8px) translateY(-8px);
  }
}

/**
 * ----------------------------------------
 * Fondos con imágenes molonas
 * ----------------------------------------
 */
.bgp {
align-items: center;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/e3/Wikipedia_logo_letters_banner.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.bglogo {
align-items: center;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/2/23/Wikisp-logo-icon.svg);
background-position: right center;
background-origin: padding-box;
background-repeat: no-repeat;
background-size: 50%;
}

/* remove border from language bar */
.mw-pt-languages {
	border: none;
}

/* Ocultar título, categorías y fecha de la última edición en la Portada */
body.page-Página_principal h1.firstHeading,
body.page-Página_principal h1.pagetitle,
body.page-Página_principal p.subtitle,
body.page-Página_principal #catlinks,
body.page-Página_principal #footer-info-lastmod {
    display:none;
}
/* Hide title and edit tools on main page */
.page-Página_principal .mw-side,
.page-Página_principal #siteSub {
	display: none!important;
}

/* Force override until skin is updated */
.skin-citizen blockquote {
	margin: 0.8rem 20px;
	padding: 0;
}

/* From https://codepen.io/MarkBoots/pen/ZEXaEBX */

.olcards,
.olcards * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.olcards {
	list-style: none;
	counter-reset: cardCount;
	font-family: sans-serif;
	display: flex;
	flex-direction: column;
	--cardsGap: 1rem;
	gap: var(--cardsGap);
	padding-bottom: var(--cardsGap);
}

.olcards > li {
	counter-increment: cardCount;
	display: flex;
	color: white;
	--labelOffset: 1rem;
	--arrowClipSize: 1.5rem;
	margin-top: var(--labelOffset);
}

.olcards > li::before {
	content: counter(cardCount, decimal-leading-zero);
	background: white;
	color: var(--cardColor);
	font-size: 2em;
	font-weight: 700;
	transform: translateY(calc(-1 * var(--labelOffset)));
	margin-right: calc(-1 * var(--labelOffset));
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-inline: 0.5em;
}

.olcards > li .content {
	background-color: var(--cardColor);
	--inlinePadding: 1em;
	--boxPadding: 0.5em;
	display: grid;
	padding: var(--boxPadding) calc(var(--inlinePadding) + var(--arrowClipSize))
		var(--boxPadding) calc(var(--inlinePadding) + var(--labelOffset));
	grid-template-areas:
		"icon title"
		"icon text";
	gap: 0.25em 1em;
	clip-path: polygon(
		0 0,
		calc(100% - var(--arrowClipSize)) 0,
		100% 50%,
		calc(100% - var(--arrowClipSize)) 100%,
		calc(100% - var(--arrowClipSize)) calc(100% + var(--cardsGap)),
		0 calc(100% + var(--cardsGap))
	);
	position: relative;
}

.olcards > li .content::before {
	content: "";
	position: absolute;
	width: var(--labelOffset);
	height: var(--labelOffset);
	background: var(--cardColor);
	left: 0;
	bottom: 0;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	filter: brightness(0.75);
}

.olcards > li .content::after {
	content: "";
	position: absolute;
	height: var(--cardsGap);
	width: var(--cardsGap);
	background: linear-gradient(to right, rgba(0, 0, 0, 0.25), transparent 50%);
	left: 0;
	top: 100%;
}

.olcards > li .icon {
	grid-area: icon;
	align-self: center;
	font-size: 2em;
}

.olcards > li .content .title {
	grid-area: title;
	font-size: 1.25em;
}

.olcards > li .content .text {
	grid-area: text;
}

/**
  * Mbox
  * From https://genshin-impact.fandom.com/wiki/MediaWiki:Mbox.css?oldid=1644313
  */
 
.mbox {
	--type-important: rgba(200, 0, 0, 0.8);
	--type-moderate: rgba(233, 124, 47, 0.8);
	--type-minor: rgba(241, 197, 37, 0.8);
	display: flex;
	position: relative;
	background-color: var(--custom-mbox-bg);
	border: 1px solid #d6d6d6;
	border-left-width: 8px;
	border-left-color: #d6d6d6;
	border-radius: 3px;
	margin-bottom: 5px;
	min-height: 32px;
}

.mbox.mbox-type-important {
	border-left-color: var(--type-important);
}

.mbox.mbox-type-moderate {
	border-left-color: var(--type-moderate);
}

.mbox.mbox-type-minor {
	border-left-color: var(--type-minor);
}

.mbox__content {
	display: table;
	box-sizing: border-box;
	width: 100%;
	padding: 8px 15px;
}

.mbox__content__image {
	display: table-cell;
	width: 40px;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	padding-right: 15px;
}

.mbox__content__wrapper {
	display: table-cell;
	vertical-align: middle;
}

.mbox__content__header {
	display: block;
	font-weight: bold;
}

.mbox__content__text {
	display: block;
}

.mbox__content__text__comment {
	font-size: small;
}

.mbox__content__aside {
	display: table-cell;
	width: 100px;
	vertical-align: middle;
	text-align: center;
	padding-left: 15px;
	border-left: 1px solid #d6d6d6;
}

.mbox__close {
	position: absolute;
	right: 0;
	top: 0;
	padding: 2px 7px;
	font-weight: bold;
	font-size: 16px;
	color: #bbb;
	cursor: pointer;
	transition: all .15s ease-in;
}

.mbox__close:hover {
	color: #777;
}

.mbox__close:after {
	content: '×';
}

.mw-collapsed+.mbox__close {
	transform: rotate(45deg);
	padding: 4px 7px 5px 2px;
}

/* Remove accessibility feature for mbox toggle */
.mw-customtoggle-mbox {
	outline: none;
}

/* FandomMobile overrides */
.skin-fandommobile .mbox .mbox__content__image {
	display: unset;
	padding-right: 0;
}

.skin-fandommobile .mbox .mbox__content__wrapper {
	display: unset;
}

.skin-fandommobile .mbox .article-media-thumbnail {
	margin-bottom: 0;
}

.skin-fandommobile .mbox .mbox__content__header {
	display: inline-block;
}