MediaWiki:InciskinMobile/CSS/Inciclopedia:20 años de Inciclopedia/Mobile.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

#post-it {background: url(https://images.uncyclomedia.co/inciclopedia/es/e/e2/Banner20-mobile.png) no-repeat}

/* Ocultar los tabuladores de la extensión Tabber */
.tabbernav {
    display: none !important;
}

/* Opcional: ajustar el contenido para que se vea limpio sin los tabs */
.tabberlive {
    border: none;
    padding: 0;
}
/* Ocultar bordes de las secciones de Tabber */
.tabberlive {
    box-shadow: none !important;
}

.tabberlive .tabbertab {
    border: none !important;
    box-shadow: none !important;
    padding: 0; /* opcional, para eliminar espacio extra */
}

.btn {
  display: inline-block;
  background: #000000;
  color: #fff;
  padding: 8px 16px;
  margin: 5px;
  border-radius: 6px;
  border: 2px solid #000000;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: background 0.3s, border-color 0.3s;
}

.btn:hover {
  background: #E5E5E5;
  border-color: #005a9e;
  color: #000000;
}

.btn2 {
  display: inline-block;
  background: #0C57A8;
  color: #fff;
  padding: 8px 16px;
  margin: 5px;
  border-radius: 6px;
  border: 2px solid #0C57A8;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: background 0.3s, border-color 0.3s;
}

.btn2:hover {
  background: #C0E6FF;
  border-color: #0C57A8;
  color: #000000;
}

.back-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;          /* círculo */
  background-color: #fff;   /* gris claro */
  border: 2px solid #F1F1F1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border 0.2s ease; /* transición suave */
}

.arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 12px solid black; /* flecha negra */
}

.back-button:active {
  border: 2px solid black;     /* borde negro al hacer clic */
}

.arrow-left {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid black; /* flecha negra hacia la izquierda */
}

.btn3 {
  display: inline-block;
  background: #246342;
  color: #fff;
  padding: 8px 16px;
  margin: 5px;
  border-radius: 6px;
  border: 2px solid #246342;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: background 0.3s, border-color 0.3s;
}

.btn3:hover {
  background: #DBF3EC;
  border-color: #246342;
  color: #246342;
  text-decoration: underline;
  text-decoration-color: #246342;
}

#catlinks {
    border: none;
    background-color: #ffffff;
    padding: 0;
    margin-top: 0;
    clear: none;
    display: none !important
}

    #content .pre-content.heading-holder {
        display: none !important;
    }
    
/* Ocultar la barra de última modificación en el footer móvil */
footer.mw-footer.minerva-footer a.last-modified-bar {
    display: none !important;
}

.expandable-button { 
	display: flex;               /* flexbox para separar texto y flecha */
    justify-content: space-between; /* texto a la izquierda, flecha a la derecha */
    align-items: center;
    padding: 1.5em 1.5em;
    margin: 0.25em 0;
    background: #F2F2F2;
    color: #000;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    text-align: left;
    width:95%;
    max-width: 95%;
}

.expandable-button[aria-expanded="true"] {
  background: #C0E6FF;
  text-decoration: underline;
  text-decoration-color: #0C57A8;
  text-decoration-thickness: 4px; /* Soportado en navegadores modernos */
}

/* Ícono SVG como flecha */
.expandable-button::after {
    content: "";
    display: inline-block;
    width: 16px;   /* tamaño fijo */
    height: 16px;  /* tamaño fijo */
    margin-left: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Estado cerrado: ícono expandir */
.expandable-button[aria-expanded="false"]::after {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/90/OOjs_UI_icon_expand.svg");
    transform: rotate(0deg);
}

/* Estado abierto: ícono rotado */
.expandable-button[aria-expanded="true"]::after {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/1/10/OOjs_UI_icon_collapse.svg");
}


.expandable-content {
    margin: 0.5em 0;
    padding: 0.5em;
    display: none;
    width: 95%;                  /* contenido alineado con el botón */
    max-width: 95%;

}

/* Flechas como pseudo-elemento, siempre a la derecha */
.expandable-button::after {
    margin-left: auto; /* empuja la flecha al extremo derecho */
}

.mw-footer.minerva-footer {
    background-color: #404040;
    color: #ffffff; /* opcional: texto en blanco para contraste */
    padding: 1em;   /* opcional: espacio interno */
}

.mw-footer.minerva-footer a {
    color: #ffffff;          /* enlaces en blanco */
    text-decoration: underline; /* opcional: mantener subrayado */
}