Diferencia entre revisiones de «MediaWiki:Vector.css»

Revisión actual - 05:33 16 jun 2026

/* ==========================================================
TENARIUS RO - SIDEBAR ELEGANTE DEFINITIVO
Pegar en: MediaWiki:Vector.css
No pegar comillas invertidas ni etiquetas style.
========================================================== */

/* =========================
OCULTAR TABS SUPERIORES
========================= */

#left-navigation,
#right-navigation,
#p-namespaces,
#p-views,
#p-cactions,
.vector-menu-tabs,
.vector-page-tabs,
.vector-page-tools,
.vector-page-toolbar,
#p-personal {
display: none !important;
}

#mw-head-base {
height: 0 !important;
margin-top: 0 !important;
margin-left: 275px !important;
}

/* =========================
SIDEBAR GENERAL
========================= */

#mw-panel {
width: 245px !important;
box-sizing: border-box !important;
padding: 18px 16px 28px 16px !important;
background: linear-gradient(180deg, #fff7df 0%, #fffaf0 48%, #ffe7a8 100%) !important;
border-right: 1px solid #e0b94f !important;
box-shadow: 8px 0 26px rgba(100,70,20,.16) !important;
}

/* Separar contenido principal del sidebar */
#content,
.mw-body {
margin-left: 285px !important;
margin-top: 22px !important;
}

#footer {
margin-left: 285px !important;
}

/* =========================
LOGO CENTRADO PERFECTO
========================= */

#p-logo {
width: 190px !important;
height: 150px !important;
margin: 0 auto 20px auto !important;
padding: 10px !important;
box-sizing: border-box !important;
background: #ffffff !important;
border: 1px solid #ead7ad !important;
border-radius: 22px !important;
box-shadow: 0 10px 24px rgba(100,70,20,.16) !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

/* Imagen del logo */
#p-logo a {
display: block !important;
width: 100% !important;
height: 100% !important;
background-size: contain !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}

/* =========================
BLOQUES DEL MENÚ
========================= */

#mw-panel .portal,
#mw-panel .vector-menu,
#mw-panel .vector-menu-portal,
#mw-panel .vector-pinnable-element {
background: #ffffff !important;
border: 1px solid #ead7ad !important;
border-radius: 18px !important;
margin: 0 0 17px 0 !important;
padding: 10px !important;
box-shadow: 0 8px 22px rgba(100,70,20,.14) !important;
overflow: hidden !important;
box-sizing: border-box !important;
}

/* Títulos de cada sección */
#mw-panel .portal h3,
#mw-panel .portal .vector-menu-heading,
#mw-panel .vector-menu-heading,
#mw-panel .vector-pinnable-header-label {
display: block !important;
background: linear-gradient(135deg, #8b1e12 0%, #c43b22 62%, #f0a500 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,.45) !important;
border-radius: 13px !important;
padding: 9px 11px !important;
margin: 0 0 10px 0 !important;
font-size: 13px !important;
font-weight: 900 !important;
line-height: 1.25 !important;
letter-spacing: .3px !important;
text-transform: none !important;
box-shadow: 0 4px 10px rgba(89,59,5,.20) !important;
}

/* Quitar línea antigua de Vector */
#mw-panel .portal h3:after,
#mw-panel .vector-menu-heading:after {
display: none !important;
}

/* Cuerpo del menú */
#mw-panel .portal .body,
#mw-panel .vector-menu-content {
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
}

/* Listas */
#mw-panel .portal .body ul,
#mw-panel .vector-menu-content-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}

/* Items */
#mw-panel .portal li,
#mw-panel .vector-menu-content-list li {
margin: 5px 0 !important;
padding: 0 !important;
font-size: 13px !important;
line-height: 1.25 !important;
}

/* =========================
BOTONES DEL MENÚ
========================= */

#mw-panel .portal li a,
#mw-panel .portal .body li a,
#mw-panel .vector-menu-content-list li a {
display: block !important;
background: linear-gradient(180deg, #fffaf0 0%, #fff1c4 100%) !important;
color: #5b2500 !important;
border: 1px solid #ead7ad !important;
border-radius: 12px !important;
padding: 9px 11px !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
text-decoration: none !important;
box-shadow: 0 3px 8px rgba(100,70,20,.10) !important;
transition: all .18s ease !important;
white-space: normal !important;
box-sizing: border-box !important;
}

/* Hover */
#mw-panel .portal li a:hover,
#mw-panel .portal .body li a:hover,
#mw-panel .vector-menu-content-list li a:hover {
background: linear-gradient(135deg, #ffd454 0%, #ffe7a8 100%) !important;
color: #8b1e12 !important;
border-color: #d99b00 !important;
box-shadow: 0 6px 14px rgba(100,70,20,.20) !important;
transform: translateX(4px) !important;
}

/* Activo */
#mw-panel .portal li.selected a,
#mw-panel .vector-menu-content-list li.selected a,
#mw-panel .portal li a:active,
#mw-panel .vector-menu-content-list li a:active {
background: linear-gradient(135deg, #8b1e12 0%, #c43b22 100%) !important;
color: #ffffff !important;
border-color: #8b1e12 !important;
font-weight: 900 !important;
}

/* Visitados */
#mw-panel .portal li a:visited,
#mw-panel .vector-menu-content-list li a:visited {
color: #5b2500 !important;
}

/* =========================
BUSCADOR
========================= */

#p-search,
.vector-search-box {
background: #ffffff !important;
border: 1px solid #ead7ad !important;
border-radius: 18px !important;
box-shadow: 0 8px 22px rgba(100,70,20,.14) !important;
padding: 10px !important;
}

#searchInput,
.vector-search-box-input {
background: #fffaf0 !important;
border: 1px solid #ead7ad !important;
border-radius: 10px !important;
color: #5b2500 !important;
font-weight: 700 !important;
padding: 7px 8px !important;
}

#searchButton,
#mw-searchButton,
.vector-search-box-button {
background: linear-gradient(135deg, #8b1e12 0%, #c43b22 100%) !important;
color: #ffffff !important;
border: 1px solid #8b1e12 !important;
border-radius: 10px !important;
font-weight: 900 !important;
padding: 6px 10px !important;
}

/* =========================
SCROLL DEL SIDEBAR
========================= */

#mw-panel {
scrollbar-width: thin;
scrollbar-color: #c43b22 #fff1c4;
}

#mw-panel::-webkit-scrollbar {
width: 8px;
}

#mw-panel::-webkit-scrollbar-track {
background: #fff1c4;
}

#mw-panel::-webkit-scrollbar-thumb {
background: #c43b22;
border-radius: 999px;
}

/* =========================
RESPONSIVE
========================= */

@media screen and (max-width: 900px) {
#mw-panel {
width: auto !important;
padding: 10px 8px !important;
}

```
#p-logo {
	width: 170px !important;
	height: 135px !important;
}

#content,
.mw-body,
#footer,
#mw-head-base {
	margin-left: 0 !important;
}

#mw-panel .portal,
#mw-panel .vector-menu,
#mw-panel .vector-menu-portal {
	border-radius: 14px !important;
	margin-bottom: 12px !important;
}

#mw-panel .portal li a,
#mw-panel .portal .body li a,
#mw-panel .vector-menu-content-list li a {
	font-size: 13px !important;
	padding: 8px 10px !important;
}
```

}




/* ==========================================================
TENARIUS RO - MOSTRAR ACCEDER SOLO SIN SESIÓN
Pegar al final de MediaWiki:Vector.css
========================================================== */

/* Mantener oculto el menú personal cuando ya hay sesión iniciada */
body.mw-logged-in #p-personal {
display: none !important;
}

/* Mostrar Acceder cuando el usuario NO está logueado */
body.mw-anonuser #p-personal {
display: block !important;
position: fixed !important;
top: 18px !important;
right: 24px !important;
z-index: 9999 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}

/* Ocultar textos secundarios del menú anónimo si aparecen */
body.mw-anonuser #p-personal h3,
body.mw-anonuser #p-personal .vector-menu-heading {
display: none !important;
}

body.mw-anonuser #p-personal ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
gap: 8px !important;
}

/* Botón Acceder */
body.mw-anonuser #p-personal li a {
display: inline-block !important;
background: linear-gradient(135deg, #8b1e12 0%, #c43b22 60%, #f0a500 100%) !important;
color: #ffffff !important;
border: 1px solid #ead7ad !important;
border-radius: 999px !important;
padding: 9px 16px !important;
font-size: 13px !important;
font-weight: 900 !important;
text-decoration: none !important;
box-shadow: 0 8px 20px rgba(100,70,20,.18) !important;
}

/* Hover Acceder */
body.mw-anonuser #p-personal li a:hover {
background: linear-gradient(135deg, #f0a500 0%, #c43b22 45%, #8b1e12 100%) !important;
color: #ffffff !important;
transform: translateY(-1px) !important;
box-shadow: 0 10px 24px rgba(100,70,20,.24) !important;
}







/* ==========================================================
TENARIUS RO - CONTENIDO ANCHO Y RESPONSIVO
Pegar al final de MediaWiki:Vector.css
========================================================== */

/* =========================

1. APROVECHAR MÁS ANCHO EN PC
   ========================= */

/* El cuerpo principal usa más pantalla */
#content,
.mw-body {
max-width: none !important;
width: auto !important;
margin-left: 285px !important;
margin-right: 24px !important;
padding-left: 32px !important;
padding-right: 32px !important;
box-sizing: border-box !important;
}

/* El contenido interno de MediaWiki también se expande */
.mw-parser-output {
max-width: none !important;
width: 100% !important;
box-sizing: border-box !important;
}

/* Contenedores principales con max-width inline */
.mw-parser-output > div[style*="max-width"],
.mw-parser-output div[style*="max-width:1200px"],
.mw-parser-output div[style*="max-width: 1200px"],
.mw-parser-output div[style*="max-width:1100px"],
.mw-parser-output div[style*="max-width: 1100px"],
.mw-parser-output div[style*="max-width:1000px"],
.mw-parser-output div[style*="max-width: 1000px"] {
max-width: 1500px !important;
width: min(100%, 1500px) !important;
box-sizing: border-box !important;
}

/* Bloques grandes tipo hero, tarjetas azules y secciones */
.mw-parser-output div[style*="background:linear-gradient"],
.mw-parser-output div[style*="background: linear-gradient"],
.mw-parser-output div[style*="background:#081a3a"],
.mw-parser-output div[style*="background: #081a3a"],
.mw-parser-output div[style*="background:#0f2954"],
.mw-parser-output div[style*="background: #0f2954"],
.mw-parser-output div[style*="background:#102a57"],
.mw-parser-output div[style*="background: #102a57"] {
box-sizing: border-box !important;
}

/* Imágenes dentro del contenido: nunca se salen del contenedor */
.mw-parser-output img {
max-width: 100% !important;
height: auto !important;
}

/* Imágenes centradas tipo portada */
.mw-parser-output .center,
.mw-parser-output .thumb,
.mw-parser-output .floatnone {
max-width: 100% !important;
}

/* Tablas wiki responsivas */
.mw-parser-output table.wikitable {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}

/* Evita que tablas o bloques largos rompan el ancho */
.mw-parser-output {
overflow-wrap: anywhere;
}

/* =========================
2. AJUSTE PARA PANTALLAS GRANDES
========================= */

@media screen and (min-width: 1500px) {
#content,
.mw-body {
margin-right: 40px !important;
padding-left: 42px !important;
padding-right: 42px !important;
}

```
.mw-parser-output > div[style*="max-width"],
.mw-parser-output div[style*="max-width:1200px"],
.mw-parser-output div[style*="max-width: 1200px"],
.mw-parser-output div[style*="max-width:1100px"],
.mw-parser-output div[style*="max-width: 1100px"],
.mw-parser-output div[style*="max-width:1000px"],
.mw-parser-output div[style*="max-width: 1000px"] {
	max-width: 1650px !important;
	width: min(100%, 1650px) !important;
}
```

}

/* =========================
3. TABLET
========================= */

@media screen and (max-width: 1200px) {
#mw-panel {
width: 220px !important;
padding-left: 12px !important;
padding-right: 12px !important;
}

```
#p-logo {
	width: 175px !important;
	height: 140px !important;
}

#content,
.mw-body {
	margin-left: 250px !important;
	margin-right: 16px !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
}

#footer {
	margin-left: 250px !important;
}
```

}

/* =========================
4. MÓVIL
========================= */

@media screen and (max-width: 900px) {
/* Sidebar arriba, no a la izquierda */
#mw-panel {
position: relative !important;
width: 100% !important;
max-width: none !important;
padding: 12px !important;
margin: 0 !important;
border-right: none !important;
border-bottom: 1px solid #e0b94f !important;
box-shadow: 0 8px 22px rgba(100,70,20,.12) !important;
box-sizing: border-box !important;
}

```
/* Logo más compacto */
#p-logo {
	width: 150px !important;
	height: 120px !important;
	margin: 0 auto 14px auto !important;
}

/* Contenido ocupa toda la pantalla */
#content,
.mw-body {
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 16px !important;
	padding-left: 14px !important;
	padding-right: 14px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

#footer,
#mw-head-base {
	margin-left: 0 !important;
}

/* Menú en tarjetas de 2 columnas cuando quepa */
#mw-panel .portal,
#mw-panel .vector-menu,
#mw-panel .vector-menu-portal {
	margin-bottom: 12px !important;
	border-radius: 16px !important;
}

#mw-panel .portal .body ul,
#mw-panel .vector-menu-content-list {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 7px !important;
}

#mw-panel .portal li,
#mw-panel .vector-menu-content-list li {
	margin: 0 !important;
}

#mw-panel .portal li a,
#mw-panel .portal .body li a,
#mw-panel .vector-menu-content-list li a {
	font-size: 12px !important;
	padding: 8px 9px !important;
	min-height: 36px !important;
	display: flex !important;
	align-items: center !important;
}

/* Bloques principales sin ancho fijo */
.mw-parser-output > div[style*="max-width"],
.mw-parser-output div[style*="max-width:1200px"],
.mw-parser-output div[style*="max-width: 1200px"],
.mw-parser-output div[style*="max-width:1100px"],
.mw-parser-output div[style*="max-width: 1100px"],
.mw-parser-output div[style*="max-width:1000px"],
.mw-parser-output div[style*="max-width: 1000px"] {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Tarjetas flexibles se acomodan verticalmente */
.mw-parser-output div[style*="display:flex"],
.mw-parser-output div[style*="display: flex"] {
	gap: 12px !important;
}

/* Imágenes grandes no se cortan */
.mw-parser-output img {
	max-width: 100% !important;
	height: auto !important;
}
```

}

/* =========================
5. CELULAR PEQUEÑO
========================= */

@media screen and (max-width: 520px) {
#content,
.mw-body {
padding-left: 10px !important;
padding-right: 10px !important;
}

```
#p-logo {
	width: 135px !important;
	height: 105px !important;
}

/* Menú a una columna */
#mw-panel .portal .body ul,
#mw-panel .vector-menu-content-list {
	grid-template-columns: 1fr !important;
}

/* Títulos más pequeños */
.mw-body h1,
#firstHeading {
	font-size: 24px !important;
}

/* Botón Acceder no se encime */
body:not(.mw-logged-in) #p-personal,
body.mw-anonuser #p-personal,
body.mw-logged-out #p-personal {
	top: 8px !important;
	right: 8px !important;
}

body:not(.mw-logged-in) #p-personal li a,
body.mw-anonuser #p-personal li a,
body.mw-logged-out #p-personal li a {
	font-size: 12px !important;
	padding: 7px 12px !important;
}
```

}







/* ==========================================================
OCULTAR HERRAMIENTAS / NAVEGACIÓN DEL SIDEBAR
No borra el contenido, solo lo oculta visualmente.
========================================================== */

/* Herramientas:
   Lo que enlaza aquí, Cambios relacionados,
   Versión para imprimir, Enlace permanente,
   Información de la página */
#p-tb,
#p-toolbox {
    display: none !important;
}

/* Navegación:
   Páginas especiales u otros enlaces automáticos */
#p-navigation,
#p-nav {
    display: none !important;
}

/* SEARCH / TOOLBOX / LANGUAGES si el skin los sigue generando */
#p-search,
#p-lang,
#p-languages,
#p-interaction {
    display: none !important;
}










/* ==========================================================
SIDEBAR CON SCROLL INDEPENDIENTE
El menú de la izquierda se queda fijo y tiene su propia barra.
========================================================== */

@media screen and (min-width: 901px) {

    #mw-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: 245px !important;
        height: 100vh !important;
        max-height: 100vh !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;

        box-sizing: border-box !important;
        padding: 18px 14px 28px 14px !important;

        z-index: 50 !important;
    }

    /* Evita que el contenido de la página quede debajo del sidebar */
    #content,
    .mw-body,
    #mw-head-base,
    #left-navigation,
    #right-navigation,
    #footer {
        margin-left: 275px !important;
    }

    /* Scrollbar del sidebar */
    #mw-panel::-webkit-scrollbar {
        width: 9px;
    }

    #mw-panel::-webkit-scrollbar-track {
        background: #fff3cf;
        border-radius: 999px;
    }

    #mw-panel::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #c8a35f, #8b1e12);
        border-radius: 999px;
        border: 2px solid #fff3cf;
    }

    #mw-panel::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #8b1e12, #f0a500);
    }

    /* Firefox */
    #mw-panel {
        scrollbar-width: thin;
        scrollbar-color: #c8a35f #fff3cf;
    }
}






/* ==========================================================
RESPONSIVE: EN MÓVIL EL SIDEBAR NO QUEDA FIJO
========================================================== */

@media screen and (max-width: 900px) {

    #mw-panel {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        bottom: auto !important;

        width: 100% !important;
        height: auto !important;
        max-height: none !important;

        overflow: visible !important;
        padding: 12px !important;
    }

    #content,
    .mw-body,
    #mw-head-base,
    #left-navigation,
    #right-navigation,
    #footer {
        margin-left: 0 !important;
    }
}








/* ==========================================================
TENARIUS RO - RESPONSIVE PAGINAS WIKI + SIDEBAR MOVIL
Pegar al final de MediaWiki:Vector.css o MediaWiki:Common.css
========================================================== */

/* ---------- Paginas Tenarius responsive ---------- */

.tenarius-responsive-page {
    box-sizing: border-box !important;
}

.tenarius-responsive-page *,
.tenarius-responsive-page *::before,
.tenarius-responsive-page *::after {
    box-sizing: border-box !important;
}

.tenarius-hero {
    background: linear-gradient(135deg,#081a3a 0%,#102a57 50%,#163d74 100%);
    border: 1px solid #c8a35f;
    border-radius: 26px;
    padding: 30px;
    margin: 12px 0 24px 0;
    box-shadow: 0 14px 34px rgba(7,20,48,.26);
}

.tenarius-hero-grid {
    display: grid;
    grid-template-columns: 34% 1fr;
    gap: 24px;
    align-items: center;
}

.tenarius-professor-card {
    background: rgba(255,255,255,.05);
    border: 1px solid #c8a35f;
    border-radius: 20px;
    padding: 16px;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.tenarius-professor-name {
    font-size: 18px;
    font-weight: 900;
    color: #f3dfb1;
    margin-top: 10px;
    line-height: 1.35;
}

.tenarius-professor-subtitle {
    font-size: 13px;
    color: #eef3ff;
    line-height: 1.6;
    margin-top: 6px;
}

.tenarius-hero-title {
    font-size: 38px;
    font-weight: 900;
    letter-spacing: .4px;
    color: #f3dfb1;
    text-shadow: 0 2px 0 rgba(0,0,0,.25);
    margin-bottom: 10px;
    line-height: 1.18;
}

.tenarius-hero-title span {
    color: #ffffff;
}

.tenarius-hero-subtitle {
    font-size: 17px;
    color: #d8c7ff;
    line-height: 1.8;
    margin-bottom: 18px;
}

.tenarius-hero-text {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(200,163,95,.35);
    border-radius: 18px;
    padding: 18px 20px;
    line-height: 1.9;
    font-size: 15px;
    color: #eef3ff;
    text-align: justify;
    text-justify: inter-word;
}

.tenarius-quick-menu,
.tenarius-summary {
    background: linear-gradient(180deg,#fffaf0 0%,#f6edd9 100%);
    border: 1px solid #d6bb84;
    border-radius: 20px;
    padding: 18px;
    margin-bottom: 24px;
    box-shadow: 0 8px 22px rgba(10,30,68,.10);
}

.tenarius-menu-title,
.tenarius-summary-title {
    font-size: 24px;
    font-weight: 900;
    color: #0f2954;
    margin-bottom: 8px;
    text-align: center;
}

.tenarius-menu-desc {
    font-size: 15px;
    color: #6c5530;
    line-height: 1.8;
    margin-bottom: 14px;
    text-align: center;
}

.tenarius-menu-buttons {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

.tenarius-nav-button {
    display: block;
    border: 1px solid #c8a35f;
    border-radius: 999px;
    padding: 10px 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(10,32,74,.10);
}

.tenarius-nav-button a,
.tenarius-nav-button span {
    color: #ffffff !important;
    text-decoration: none !important;
}

.tenarius-nav-button.nav-blue { background:#163b72; }
.tenarius-nav-button.nav-blue2 { background:#315a9c; }
.tenarius-nav-button.nav-purple { background:#7c5bc7; }
.tenarius-nav-button.nav-red { background:#8f190b; }
.tenarius-nav-button.nav-green { background:#2f8f46; }
.tenarius-nav-button.nav-gold { background:#c79b2b; }
.tenarius-nav-button.nav-cyan { background:#1976a2; }
.tenarius-nav-button.nav-violet { background:#5a3c9a; }

.tenarius-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
}

.tenarius-summary-card {
    background: #ffffff;
    border: 1px solid #d6bb84;
    border-radius: 18px;
    padding: 15px;
    box-shadow: 0 6px 16px rgba(10,32,74,.08);
    min-height: 120px;
}

.tenarius-summary-card.blue { border-left: 7px solid #315a9c; }
.tenarius-summary-card.purple { border-left: 7px solid #7c5bc7; }
.tenarius-summary-card.red { border-left: 7px solid #8f190b; }
.tenarius-summary-card.green { border-left: 7px solid #2f8f46; }

.tenarius-summary-card div {
    font-size: 18px;
    font-weight: 900;
    color: #0f2954;
    margin-bottom: 6px;
}

.tenarius-summary-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #394150;
}

.tenarius-reading-note {
    background: #fff8e6;
    border: 1px solid #d6bb84;
    border-left: 7px solid #8f190b;
    border-radius: 18px;
    padding: 16px;
    margin: 0 0 18px 0;
    line-height: 1.85;
    font-size: 15px;
    text-align: justify;
    text-justify: inter-word;
}

.tenarius-reading-note strong {
    color: #0f2954;
}

/* ---------- Escritorio / computadora ---------- */
@media screen and (min-width: 1025px) {
    .tenarius-responsive-page {
        max-width: 1240px !important;
    }

    .tenarius-main-content {
        text-align: left !important;
    }

    .tenarius-main-content p {
        text-align: left !important;
    }

    .tenarius-hero-media {
        display: block;
    }

    #tenarius-mobile-sidebar-button,
    #tenarius-mobile-sidebar-overlay {
        display: none !important;
    }
}

/* ---------- Tablet y celular ---------- */
@media screen and (max-width: 1024px) {
    html,
    body {
        overflow-x: hidden !important;
    }

    .tenarius-responsive-page {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        margin: 0 auto !important;
    }

    .tenarius-hero {
        padding: 18px !important;
        border-radius: 20px !important;
        margin: 10px 0 18px 0 !important;
    }

    .tenarius-hero-grid {
        display: block !important;
    }

    .tenarius-professor-card {
        max-width: 320px !important;
        margin: 0 auto 18px auto !important;
        padding: 14px !important;
    }

    .tenarius-professor-card img {
        max-width: 220px !important;
        height: auto !important;
    }

    .tenarius-hero-title {
        font-size: 30px !important;
        text-align: center !important;
        line-height: 1.22 !important;
    }

    .tenarius-hero-subtitle {
        font-size: 16px !important;
        text-align: center !important;
        line-height: 1.75 !important;
    }

    .tenarius-hero-text {
        font-size: 15px !important;
        line-height: 1.85 !important;
        text-align: justify !important;
        text-justify: inter-word !important;
        padding: 15px !important;
    }

    .tenarius-quick-menu,
    .tenarius-summary {
        padding: 15px !important;
        border-radius: 18px !important;
    }

    .tenarius-menu-desc {
        text-align: justify !important;
        text-justify: inter-word !important;
    }

    .tenarius-menu-buttons {
        display: block !important;
    }

    .tenarius-nav-button {
        display: block !important;
        width: 100% !important;
        margin: 8px 0 !important;
        padding: 12px 15px !important;
        border-radius: 16px !important;
        font-size: 15px !important;
    }

    .tenarius-summary-grid {
        display: block !important;
    }

    .tenarius-summary-card {
        min-height: auto !important;
        margin: 10px 0 !important;
    }

    .tenarius-summary-card p {
        text-align: justify !important;
        text-justify: inter-word !important;
        font-size: 15px !important;
    }

    .tenarius-main-content {
        padding: 16px !important;
        font-size: 15px !important;
        line-height: 1.95 !important;
        text-align: justify !important;
        text-justify: inter-word !important;
    }

    .tenarius-main-content img {
        max-width: 100% !important;
        height: auto !important;
    }

    .tenarius-main-content table {
        font-size: 13px !important;
    }

    .tenarius-main-content th,
    .tenarius-main-content td {
        white-space: normal !important;
    }

    /* Ocultar sidebar en tablet/celular y convertirlo en menú lateral desplegable */
    #mw-panel {
        position: fixed !important;
        top: 0 !important;
        left: -310px !important;
        width: 290px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 10010 !important;
        background: #fff3cf !important;
        padding: 16px 12px 28px 12px !important;
        box-shadow: 10px 0 28px rgba(0,0,0,.25) !important;
        transition: left .25s ease !important;
        overscroll-behavior: contain !important;
    }

    body.tenarius-sidebar-open #mw-panel {
        left: 0 !important;
    }

    #tenarius-mobile-sidebar-button {
        position: fixed !important;
        left: 12px !important;
        bottom: 16px !important;
        z-index: 10030 !important;
        background: linear-gradient(135deg,#8b1e12 0%,#d98800 100%) !important;
        color: #ffffff !important;
        border: 2px solid #c8a35f !important;
        border-radius: 999px !important;
        padding: 12px 18px !important;
        font-size: 15px !important;
        font-weight: 900 !important;
        box-shadow: 0 8px 22px rgba(0,0,0,.24) !important;
        cursor: pointer !important;
    }

    #tenarius-mobile-sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0,0,0,.42) !important;
        z-index: 10000 !important;
        display: none !important;
    }

    body.tenarius-sidebar-open #tenarius-mobile-sidebar-overlay {
        display: block !important;
    }

    /* El contenido ocupa todo el ancho en móvil/tablet */
    #content,
    .mw-body,
    #mw-head-base,
    #left-navigation,
    #right-navigation,
    #footer {
        margin-left: 0 !important;
        width: auto !important;
    }

    .mw-body {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* Celulares angostos */
@media screen and (max-width: 600px) {
    .tenarius-hero-title {
        font-size: 28px !important;
    }

    .tenarius-professor-card {
        max-width: 280px !important;
    }

    #tenarius-mobile-sidebar-button {
        left: 10px !important;
        bottom: 12px !important;
        padding: 11px 15px !important;
        font-size: 14px !important;
    }
}






	/* ==========================================================
	TENARIUS RO - RESPONSIVE CORREGIDO
	Pegar AL FINAL de MediaWiki:Vector.css o MediaWiki:Common.css

	Importante:
	- En PC/escritorio conserva diseño amplio.
	- En tablet/celular oculta sidebar y aparece botón Menu.
	- Debe pegarse al final para ganar prioridad sobre CSS anterior.
	========================================================== */

	/* Botón/overlay ocultos por defecto en escritorio */
	#tenarius-mobile-sidebar-button,
	#tenarius-mobile-sidebar-overlay {
		display: none;
	}

	/* Ajustes base de páginas Tenarius */
	.tenarius-responsive-page,
	.tenarius-responsive-page * {
		box-sizing: border-box;
	}

	.tenarius-responsive-page img {
		max-width: 100%;
		height: auto;
	}

	/* Escritorio: conservar layout amplio */
	@media screen and (min-width: 1025px) {
		.tenarius-pets-page {
			max-width: 1240px !important;
			margin-left: auto !important;
			margin-right: auto !important;
		}

		.tenarius-pets-hero-table {
			display: table !important;
			width: 100% !important;
		}

		.tenarius-pets-hero-table tr {
			display: table-row !important;
		}

		.tenarius-pets-hero-table td {
			display: table-cell !important;
		}

		.tenarius-summary-table {
			display: table !important;
			width: 100% !important;
		}

		.tenarius-summary-table tr {
			display: table-row !important;
		}

		.tenarius-summary-table td {
			display: table-cell !important;
		}

		.tenarius-pets-menu-links span {
			display: inline-block !important;
			width: auto !important;
		}
	}

	/* ----------------------------------------------------------
	MODO MÓVIL/TABLET
	Se activa por tamaño de pantalla O por clase que agrega Vector.js.
	---------------------------------------------------------- */
	@media screen and (max-width: 1024px), screen and (max-device-width: 1024px), screen and (hover: none) and (pointer: coarse) {

		html,
		body {
			overflow-x: hidden !important;
		}

		.tenarius-responsive-page {
			width: 100% !important;
			max-width: 100% !important;
			margin: 0 auto !important;
			padding: 0 8px !important;
		}

		.tenarius-pets-hero {
			padding: 18px !important;
			border-radius: 20px !important;
			margin: 10px 0 18px 0 !important;
		}

		.tenarius-pets-hero-table,
		.tenarius-pets-hero-table tbody,
		.tenarius-pets-hero-table tr,
		.tenarius-pets-hero-table td {
			display: block !important;
			width: 100% !important;
			box-sizing: border-box !important;
		}

		.tenarius-pets-hero-table {
			border-spacing: 0 !important;
		}

		.tenarius-pets-hero-table td {
			padding: 0 !important;
			margin: 0 0 16px 0 !important;
		}

		.tenarius-pets-hero-table td:first-child > div {
			max-width: 320px !important;
			margin-left: auto !important;
			margin-right: auto !important;
		}

		.tenarius-pets-hero-table img {
			max-width: 220px !important;
			height: auto !important;
		}

		.tenarius-pets-hero [style*="font-size:38px"] {
			font-size: 30px !important;
			text-align: center !important;
			line-height: 1.22 !important;
		}

		.tenarius-pets-hero [style*="font-size:17px"] {
			font-size: 16px !important;
			text-align: center !important;
			line-height: 1.75 !important;
		}

		.tenarius-pets-hero [style*="background:rgba(255,255,255,.08)"] {
			font-size: 15px !important;
			line-height: 1.85 !important;
			text-align: justify !important;
			text-justify: inter-word !important;
			padding: 15px !important;
		}

		.tenarius-quick-menu {
			padding: 15px !important;
			border-radius: 18px !important;
		}

		.tenarius-quick-menu [style*="font-size:22px"] {
			text-align: center !important;
			font-size: 24px !important;
		}

		.tenarius-quick-menu [style*="font-size:14px"] {
			text-align: justify !important;
			text-justify: inter-word !important;
			font-size: 15px !important;
		}

		.tenarius-pets-menu-links {
			line-height: 1.4 !important;
		}

		.tenarius-pets-menu-links span {
			display: block !important;
			width: 100% !important;
			margin: 8px 0 !important;
			padding: 12px 15px !important;
			border-radius: 16px !important;
			text-align: center !important;
			font-size: 15px !important;
		}

		.tenarius-summary-table,
		.tenarius-summary-table tbody,
		.tenarius-summary-table tr,
		.tenarius-summary-table td {
			display: block !important;
			width: 100% !important;
			box-sizing: border-box !important;
		}

		.tenarius-summary-table td {
			padding: 0 !important;
			margin: 10px 0 !important;
		}

		.tenarius-summary-table td > div {
			min-height: auto !important;
		}

		.tenarius-main-content {
			padding: 16px !important;
			font-size: 15px !important;
			line-height: 1.95 !important;
			text-align: justify !important;
			text-justify: inter-word !important;
		}

		.tenarius-main-content img {
			max-width: 100% !important;
			height: auto !important;
		}

		.tenarius-main-content table.wikitable {
			display: block !important;
			overflow-x: auto !important;
			-webkit-overflow-scrolling: touch !important;
			max-width: 100% !important;
			font-size: 13px !important;
		}

		.tenarius-main-content th,
		.tenarius-main-content td {
			white-space: normal !important;
		}

		/* Sidebar escondido en móvil/tablet */
		#mw-panel {
			position: fixed !important;
			top: 0 !important;
			left: -320px !important;
			width: 300px !important;
			height: 100vh !important;
			max-height: 100vh !important;
			overflow-y: auto !important;
			overflow-x: hidden !important;
			z-index: 10010 !important;
			background: #fff3cf !important;
			padding: 16px 12px 28px 12px !important;
			box-shadow: 10px 0 28px rgba(0,0,0,.25) !important;
			transition: left .25s ease !important;
			overscroll-behavior: contain !important;
		}

		body.tenarius-sidebar-open #mw-panel {
			left: 0 !important;
		}

		#tenarius-mobile-sidebar-button {
			display: block !important;
			position: fixed !important;
			left: 12px !important;
			bottom: 16px !important;
			z-index: 10030 !important;
			background: linear-gradient(135deg,#8b1e12 0%,#d98800 100%) !important;
			color: #ffffff !important;
			border: 2px solid #c8a35f !important;
			border-radius: 999px !important;
			padding: 12px 18px !important;
			font-size: 15px !important;
			font-weight: 900 !important;
			box-shadow: 0 8px 22px rgba(0,0,0,.24) !important;
			cursor: pointer !important;
		}

		#tenarius-mobile-sidebar-overlay {
			position: fixed !important;
			inset: 0 !important;
			background: rgba(0,0,0,.42) !important;
			z-index: 10000 !important;
			display: none !important;
		}

		body.tenarius-sidebar-open #tenarius-mobile-sidebar-overlay {
			display: block !important;
		}

		/* El contenido ocupa todo el ancho */
		#content,
		.mw-body,
		#mw-head-base,
		#left-navigation,
		#right-navigation,
		#footer {
			margin-left: 0 !important;
			width: auto !important;
			max-width: none !important;
		}

		.mw-body {
			padding-left: 8px !important;
			padding-right: 8px !important;
		}
	}

	/* Refuerzo por clase JS, por si el navegador móvil usa viewport ancho */
	body.tenarius-mobile-mode #mw-panel {
		position: fixed !important;
		top: 0 !important;
		left: -320px !important;
		width: 300px !important;
		height: 100vh !important;
		max-height: 100vh !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		z-index: 10010 !important;
		background: #fff3cf !important;
		padding: 16px 12px 28px 12px !important;
		box-shadow: 10px 0 28px rgba(0,0,0,.25) !important;
		transition: left .25s ease !important;
	}

	body.tenarius-mobile-mode.tenarius-sidebar-open #mw-panel {
		left: 0 !important;
	}

	body.tenarius-mobile-mode #tenarius-mobile-sidebar-button {
		display: block !important;
	}

	body.tenarius-mobile-mode #content,
	body.tenarius-mobile-mode .mw-body,
	body.tenarius-mobile-mode #mw-head-base,
	body.tenarius-mobile-mode #left-navigation,
	body.tenarius-mobile-mode #right-navigation,
	body.tenarius-mobile-mode #footer {
		margin-left: 0 !important;
		width: auto !important;
		max-width: none !important;
	}
Diferencia entre revisiones de «MediaWiki:Vector.css»

Revisión actual - 05:33 16 jun 2026

Menú de navegación

Buscar
