/*!
=========================================================
* GuayMU — propuesta de mejoras visuales (overrides)
* Cargar DESPUES de vip.css en index.php:
*
* Los numeros [1]..[8] y [D] remiten a review.md
* ([1-8] = cambios principales, [D] = "Otros detalles", [M] = movil opcional).
* Sin imagenes nuevas: solo gradientes CSS y SVG inline minimos usados como mascara
* (el color sale siempre de las variables de la paleta).
=========================================================
*/
/* ---------------------------------------------------------
[2] Contraste: texto secundario un poco mas claro.
#867c74 sobre el fondo de paneles (#221b15) da ~4.2:1 y se usa
en textos de 9-12px (fechas, "Proximo inicio", etiquetas).
#a39689 da ~5.9:1 (AA) sin romper la paleta.
Ademas: variables auxiliares de esta propuesta (prefijo --gm-).
--------------------------------------------------------- */
:root {
--webenginecolor14: #a39689; /* footer / texto alternativo (antes #867c74) */
--webenginecolor23: #a39689; /* texto pie de noticias (antes #867c74) */
/* color de los "esquineros" ornamentales */
--gm-corner: color-mix(in srgb, var(--webenginecolor1) 70%, transparent);
/* 4 esquineros en L (estilo ventanas del cliente de MU) hechos con 8 gradientes */
--gm-corners:
linear-gradient(var(--gm-corner), var(--gm-corner)) left 5px top 5px / 12px 1px no-repeat,
linear-gradient(var(--gm-corner), var(--gm-corner)) left 5px top 5px / 1px 12px no-repeat,
linear-gradient(var(--gm-corner), var(--gm-corner)) right 5px top 5px / 12px 1px no-repeat,
linear-gradient(var(--gm-corner), var(--gm-corner)) right 5px top 5px / 1px 12px no-repeat,
linear-gradient(var(--gm-corner), var(--gm-corner)) left 5px bottom 5px / 12px 1px no-repeat,
linear-gradient(var(--gm-corner), var(--gm-corner)) left 5px bottom 5px / 1px 12px no-repeat,
linear-gradient(var(--gm-corner), var(--gm-corner)) right 5px bottom 5px / 12px 1px no-repeat,
linear-gradient(var(--gm-corner), var(--gm-corner)) right 5px bottom 5px / 1px 12px no-repeat;
/* separador "runico": linea que se desvanece + rombo central + 2 rombos chicos.
Se usa como MASCARA: el color real lo pone background-color. */
--gm-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-opacity='0'/%3E%3Cstop offset='.5'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect y='6.5' width='240' height='1' fill='url(%23g)'/%3E%3Cpath d='M120 1l6 6-6 6-6-6z M106 7l3-3 3 3-3 3z M128 7l3-3 3 3-3 3z'/%3E%3C/svg%3E");
}
/* ---------------------------------------------------------
[1] Contenedor principal: borde superior de bronce con rombo,
sombra para separarlo del fondo y textura de "piedra" muy sutil.
--------------------------------------------------------- */
#container {
background:
radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--webenginecolor1) 7%, transparent), transparent 60%),
repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 6px),
var(--webenginebg2);
box-shadow: 0 0 40px rgba(0, 0, 0, 0.65);
border-radius: 2px 2px 0 0;
}
#container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--webenginecolor1) 20%, var(--webenginecolor1) 80%, transparent);
opacity: 0.6;
}
#container::after {
content: '';
position: absolute;
top: -7px;
left: 50%;
width: 240px;
height: 14px;
margin-left: -120px;
background-color: var(--webenginecolor1);
-webkit-mask: var(--gm-divider) center / contain no-repeat;
mask: var(--gm-divider) center / contain no-repeat;
pointer-events: none;
}
/* [1] La linea fina bajo el logo queda redundante (el logo ya trae su propio
destello) y sin el lema queda "flotando" sobre el porton. Se oculta. */
#header:after {
display: none;
}
#header {
padding-bottom: 43px; /* mantiene la altura que ocupaba la linea (24 + 18 + 1) */
}
/* [1] Fondo a pantalla completa. background.jpg (1920x1280, -400px) / background-2600.jpg (2600x1400, -500px)
terminan abajo y a los costados en pantallas grandes. Detras va background-fill.jpg: la misma escena muy
desenfocada y oscurecida, fija y cubriendo toda la ventana; los bordes de la imagen nitida ya vienen
fundidos con esa version desenfocada, asi el paisaje parece continuar en vez de cortarse. */
html {
background: var(--webenginebg1) url('../img/background-fill.jpg') center center / cover no-repeat fixed;
}
body {
background-color: transparent !important;
background-image: url('../img/background.webp') !important; /* bordes transparentes: deja ver el relleno */
}
@media only screen and (min-width: 2000px) {
body {
background-image: url('../img/background-2600.webp') !important;
}
}
/* En pantallas de menos de 1920px el fondo (1920px de ancho) se recortaba a los costados y el guerrero de
la derecha quedaba cortado: se escala al ancho de la ventana y el corrimiento vertical (-400px a 1920px)
se escala en la misma proporcion (400 / 1920 = 20.833vw) para que el paisaje siga alineado con el logo. */
@media only screen and (max-width: 1919px) {
body {
background-size: 100% auto !important;
background-position: center -20.833vw !important;
}
}
/* ---------------------------------------------------------
[3] Paneles (login, calendario de eventos, info del servidor):
cabecera tipo "placa" de bronce, linea inferior que se desvanece,
esquineros ornamentales y sombra oscura en vez del halo marron.
(se excluye .panel-usercp para no perder su imagen de fondo)
--------------------------------------------------------- */
.panel.panel-sidebar {
border: 1px solid var(--webenginecolor16);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}
.panel.panel-sidebar:not(.panel-usercp) {
background:
var(--gm-corners),
linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 120px),
var(--webenginecolor27);
}
.panel-sidebar > .panel-heading,
.panel-default > .panel-heading {
background:
linear-gradient(180deg, color-mix(in srgb, var(--webenginecolor1) 9%, transparent), transparent 80%),
var(--webenginecolor5) !important;
border-bottom: 2px solid var(--webenginecolor7) !important;
border-image: linear-gradient(90deg,
color-mix(in srgb, var(--webenginecolor7) 25%, transparent),
var(--webenginecolor7) 50%,
color-mix(in srgb, var(--webenginecolor7) 25%, transparent)) 1;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
padding: 11px 15px;
}
.panel-title {
font-weight: 700;
text-shadow: 0 1px 0 #000;
}
/* [3] "Inicio de sesion" se partia en 2 lineas porque el boton
"¿Olvidaste tu contrasena?" no dejaba lugar. El titulo ya no se corta;
si no entra, el que baja de renglon es el boton. */
.panel-sidebar .panel-title {
white-space: nowrap;
flex-wrap: wrap;
row-gap: 6px;
}
.panel-sidebar .panel-title .btn {
margin-left: auto;
}
/* ...y "¿Olvidaste tu contrasena?" pasa a ser un link discreto (no un
segundo boton que compite con "Iniciar sesion"). Mismo , solo CSS. */
.panel-title a[href*="forgotpassword"].btn-primary {
border-color: transparent;
color: var(--webenginecolor3);
padding: 3px 0;
font-weight: normal;
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--webenginecolor3) 40%, transparent);
text-underline-offset: 3px;
box-shadow: none;
text-shadow: none;
}
.panel-title a[href*="forgotpassword"].btn-primary:hover,
.panel-title a[href*="forgotpassword"].btn-primary:focus,
.panel-title a[href*="forgotpassword"].btn-primary:active {
background: transparent !important;
border-color: transparent !important;
color: var(--webenginecolor4) !important;
text-decoration: underline !important;
}
/* ---------------------------------------------------------
[4] Botones primarios con aspecto "metal de bronce" (como el logo):
degradado, brillo interior y halo al pasar el mouse.
--------------------------------------------------------- */
.btn-primary {
background-image: linear-gradient(180deg, var(--webenginecolor4) 0%, var(--webenginecolor8) 45%, var(--webenginecolor10) 100%);
border-color: color-mix(in srgb, var(--webenginecolor10) 70%, #000);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.45);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
letter-spacing: 0.02em;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
background-image: linear-gradient(180deg, color-mix(in srgb, var(--webenginecolor4) 60%, #fff) 0%, var(--webenginecolor11) 50%, var(--webenginecolor8) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 12px color-mix(in srgb, var(--webenginecolor1) 45%, transparent);
}
.btn-primary:active {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}
/* [4] Campos de texto: borde interior hundido (tipo cliente de MU),
foco con halo de bronce, placeholder legible. */
.form-control {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
border-radius: 2px;
}
.form-control:focus {
border-color: var(--webenginecolor1);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 0 2px color-mix(in srgb, var(--webenginecolor1) 25%, transparent);
}
.form-control::placeholder {
color: var(--webenginecolor14);
opacity: 1;
}
/* [4] Login sin etiquetas: iconito de usuario / candado dentro de cada campo
(los ids existen en inc/modules/sidebar.php y modules/home.php).
El color del icono (%23a39689 = --webenginecolor14) va fijo dentro del SVG. */
#loginBox1, #loginBox2 {
padding-left: 36px;
background-repeat: no-repeat;
background-position: 12px center;
background-size: 15px 15px;
}
#loginBox1 {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a39689'%3E%3Ccircle cx='8' cy='5' r='3'/%3E%3Cpath d='M2 15c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5z'/%3E%3C/svg%3E");
}
#loginBox2 {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='8' rx='1.5' fill='%23a39689'/%3E%3Cpath d='M5 7V5a3 3 0 0 1 6 0v2' fill='none' stroke='%23a39689' stroke-width='1.6'/%3E%3C/svg%3E");
}
/* ---------------------------------------------------------
[5] Lista de noticias de la home: encabezado con la misma "placa"
que los paneles (alinea con "Inicio de sesion"), Cinzel en vez de
italica, etiqueta "Aviso" chica tipo sello y filas con separador.
--------------------------------------------------------- */
.home-news-block .home-news-block-header {
margin: 0 0 4px 0;
background:
linear-gradient(180deg, color-mix(in srgb, var(--webenginecolor1) 9%, transparent), transparent 80%),
var(--webenginecolor5);
border: 0;
border-bottom: 2px solid var(--webenginecolor7);
border-image: linear-gradient(90deg,
color-mix(in srgb, var(--webenginecolor7) 25%, transparent),
var(--webenginecolor7) 50%,
color-mix(in srgb, var(--webenginecolor7) 25%, transparent)) 1;
}
.home-news-block .home-news-block-header h2 {
margin: 0 !important;
font-family: 'Cinzel', serif;
font-style: normal;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.08em;
line-height: 42px;
color: var(--webenginecolor6);
text-shadow: 0 1px 0 #000;
}
.home-news-block .home-news-block-header a {
padding-top: 0;
line-height: 42px;
font-family: 'Cinzel', serif;
font-style: normal;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-news-block .home-news-block-header a::after {
content: ' \203A';
}
.home-news-block .home-news-block-header a:hover {
color: var(--webenginecolor4) !important;
}
.home-news-block-article {
display: flex;
align-items: center;
margin: 0;
padding: 6px 0;
border-bottom: 1px solid var(--webenginecolor21);
transition: background-color .2s ease;
}
.home-news-block-article::before,
.home-news-block-article::after {
display: none;
}
.home-news-block-article:hover {
background-color: color-mix(in srgb, var(--webenginecolor1) 5%, transparent);
}
.home-news-block-article > .col-xs-3:first-child { width: 17%; }
.home-news-block-article > .col-xs-6 { width: 63%; }
.home-news-block-article > .col-xs-3:last-child { width: 20%; }
.home-news-block-article .home-news-block-article-type {
display: inline-block;
padding: 1px 9px;
font-size: 11px;
font-weight: bold;
line-height: 18px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--webenginecolor1);
background: color-mix(in srgb, var(--webenginecolor1) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--webenginecolor1) 45%, transparent);
border-radius: 2px;
}
.home-news-block-article .home-news-block-article-title {
font-size: 15px;
}
.home-news-block-article .home-news-block-article-title a {
color: var(--webenginecolor2);
}
.home-news-block-article .home-news-block-article-title a:hover {
color: var(--webenginecolor4) !important;
}
.home-news-block-article .home-news-block-article-date {
color: var(--webenginecolor14);
font-size: 13px;
font-variant-numeric: tabular-nums;
}
/* ---------------------------------------------------------
[6] Tarjetas del calendario de eventos: sin la barra superior
curvada, brillo calido arriba, esquineros, imagenes de igual
altura con sombra, cuenta regresiva con numeros alineados y sin
hueco vacio cuando todavia no cargo.
--------------------------------------------------------- */
.events-calendar-card {
border-radius: 2px;
border-top-width: 2px;
background:
var(--gm-corners),
radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--webenginecolor1) 12%, transparent), transparent 70%),
var(--webenginecolor28);
padding: 16px 12px 14px;
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.events-calendar-card:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 10px color-mix(in srgb, var(--webenginecolor1) 20%, transparent);
}
.events-calendar-card-image {
height: 70px;
width: auto;
object-fit: contain;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
}
.events-calendar-card-name {
font-size: 14px;
letter-spacing: 0.06em;
margin-bottom: 6px;
text-shadow: 0 1px 0 #000;
}
.events-calendar-card-countdown {
font-size: 16px;
font-variant-numeric: tabular-nums;
min-height: 22px;
margin-bottom: 6px;
}
.events-calendar-card-countdown:empty {
min-height: 0;
margin: 0;
}
.events-calendar-card-next {
font-size: 12px;
padding-top: 8px;
border-top: 1px solid var(--webenginecolor21);
}
/* [2] verde/naranja "web" puros: poco contraste y fuera de paleta */
.event-schedule-open {
color: var(--webenginecolor49);
}
.event-schedule-inprogress {
color: var(--webenginecolor11);
}
/* ---------------------------------------------------------
[7] Header: brasas que suben DESDE el pueblo (hoy nacen en el cielo
y la mitad quedan tapadas por la barra de navegacion), recorrido
mas largo y lento. Solo si el usuario no pidio "reducir movimiento".
--------------------------------------------------------- */
.hero-star {
margin-top: 240px; /* corre todas las brasas hacia los techos/murallas */
}
@media (prefers-reduced-motion: no-preference) {
.hero-star {
animation-name: gm-ember-rise;
animation-timing-function: linear;
}
.hero-star:nth-child(4n) { animation-name: gm-ember-rise-alt; }
/* los spans traen duraciones de 2.6-4.1s inline (pensadas para estrellas);
para brasas queda mejor algo mas lento */
.hero-star:nth-child(3n+1) { animation-duration: 6.5s !important; }
.hero-star:nth-child(3n+2) { animation-duration: 8s !important; }
.hero-star:nth-child(3n) { animation-duration: 9.5s !important; }
}
@keyframes gm-ember-rise {
0% { opacity: 0; transform: translate(0, 60px) scale(0.6); }
15% { opacity: 1; }
50% { transform: translate(10px, -60px) scale(1); }
100% { opacity: 0; transform: translate(-6px, -200px) scale(0.4); }
}
@keyframes gm-ember-rise-alt {
0% { opacity: 0; transform: translate(0, 60px) scale(0.6); }
20% { opacity: 0.9; }
50% { transform: translate(-12px, -50px) scale(0.9); }
100% { opacity: 0; transform: translate(8px, -180px) scale(0.3); }
}
/* [7] Caja de info del header: esquineros, fondo algo mas solido,
etiquetas legibles (9px -> 10px, hora 11px -> 12px) y colores
de los iconos sociales tomados de la paleta (antes #9f6e31/#1c1814 fijos). */
.header-info-container .header-info {
background:
var(--gm-corners),
color-mix(in srgb, var(--webenginebg1) 72%, transparent);
border-radius: 2px;
padding: 18px 20px 16px;
}
.header-info-badge-label {
font-size: 10px;
letter-spacing: 0.08em;
color: var(--webenginecolor14);
}
.header-info-badge-value {
font-size: 13px;
}
.header-social-badge {
background: var(--webenginecolor15);
border-color: color-mix(in srgb, var(--webenginecolor1) 60%, #000);
}
.header-social-badge-icon {
background-color: color-mix(in srgb, var(--webenginecolor1) 85%, #000);
}
.header-social-badge:hover {
border-color: var(--webenginecolor1);
box-shadow: 0 0 12px color-mix(in srgb, var(--webenginecolor1) 45%, transparent);
}
.header-social-badge:hover .header-social-badge-icon {
background-color: var(--webenginecolor4);
}
.header-info-time {
font-size: 12px;
font-variant-numeric: tabular-nums;
}
/* ---------------------------------------------------------
[8] Barra de navegacion: el subrayado del hover era curvo
(border-radius 20px) y tan ancho como el padding. Ahora es una
linea recta del ancho del texto que "crece" desde el centro.
--------------------------------------------------------- */
#navbar ul li a {
border-radius: 0;
border-bottom: 2px solid transparent;
background: linear-gradient(var(--webenginecolor1), var(--webenginecolor1)) center bottom / 0 2px no-repeat;
transition: color .25s ease, background-size .25s ease, text-shadow .25s ease;
}
#navbar ul li a:hover,
#navbar ul li a:focus {
border-bottom-color: transparent;
background-size: calc(100% - 48px) 2px;
}
/* [8] Footer: misma tipografia que el resto (antes Segoe UI), color de texto
definido (usaba var(--webenginebg14), que no existe), separador de bronce
arriba y fondo que continua al contenedor. */
.footer {
position: relative;
font-family: 'PT Sans', sans-serif;
color: var(--webenginecolor14);
background: linear-gradient(180deg, color-mix(in srgb, var(--webenginebg2) 60%, var(--webenginebg3)), var(--webenginebg3) 140px);
border-top: 1px solid var(--webenginecolor63);
border-radius: 0 0 2px 2px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.65);
}
.footer::before {
content: '';
position: absolute;
top: 8px;
left: 50%;
width: 240px;
height: 14px;
margin-left: -120px;
background-color: var(--webenginecolor1);
-webkit-mask: var(--gm-divider) center / contain no-repeat;
mask: var(--gm-divider) center / contain no-repeat;
opacity: 0.7;
}
.footer-brand {
letter-spacing: 0.08em;
text-shadow: 0 0 12px color-mix(in srgb, var(--webenginecolor1) 30%, transparent);
}
.footer-col-title {
font-family: 'Cinzel', serif;
letter-spacing: 0.1em;
}
.footer-links-list a:hover {
color: var(--webenginecolor4) !important;
}
/* =========================================================
[D] Otros detalles
========================================================= */
/* [D] Foco visible con teclado (override.css lo elimina con outline:none) */
a:focus-visible,
.btn:focus-visible,
button:focus-visible,
.form-control:focus-visible {
outline: 2px solid var(--webenginecolor1) !important;
outline-offset: 2px;
}
/* [D] Titulos de pagina (Registro, Rankings, Descargas...): separador runico debajo */
.page-title {
text-shadow: 0 0 14px color-mix(in srgb, var(--webenginecolor1) 30%, transparent);
}
.page-title::after {
content: '';
display: block;
width: 240px;
height: 14px;
margin: 12px auto 4px;
background-color: var(--webenginecolor1);
-webkit-mask: var(--gm-divider) center / contain no-repeat;
mask: var(--gm-divider) center / contain no-repeat;
}
/* [D] Resto azul del template original en el hover de tablas */
.table-hover > tbody > tr:hover {
background: color-mix(in srgb, var(--webenginecolor1) 6%, transparent);
}
/* [D] Tabla de info del servidor (sidebar del panel de usuario):
filas separadas y el verde fijo #00aa00 (inline) pasa al verde de la paleta */
.panel-sidebar .table > tbody > tr > td {
border-bottom: 1px solid var(--webenginecolor21);
}
.panel-sidebar .table > tbody > tr:last-child > td {
border-bottom: 0;
}
.panel-sidebar .table td[style*="00aa00"] {
color: var(--webenginecolor49) !important;
}
/* [D] Banners del sidebar: sin esquinas redondeadas que choquen con el marco
del propio banner, sombra oscura y brillo al pasar el mouse */
.sidebar-banner img {
display: block;
max-width: 100%;
height: auto;
border-radius: 2px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
transition: filter .2s ease, box-shadow .2s ease;
}
.sidebar-banner a:hover img {
filter: brightness(1.12);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), 0 0 14px color-mix(in srgb, var(--webenginecolor1) 35%, transparent);
}
/* [D] Menu de rankings: estado hover (hoy no cambia nada al pasar el mouse) */
.rankings_menu a:hover {
border-color: var(--webenginecolor18);
color: var(--webenginecolor4) !important;
}
/* [D] Seleccion de texto y scrollbar (Firefox) en la paleta */
::selection {
background: var(--webenginecolor1);
color: var(--webenginecolor9);
}
html {
scrollbar-color: var(--webenginecolor16) var(--webenginecolor15);
}
/* =========================================================
[M] MOVIL (opcional). Este bloque NO hace nada hasta que se agregue
en index.php (ver review.md). Sin esa etiqueta los celulares
simulan ~980px de ancho y estas reglas nunca se activan.
========================================================= */
@media (max-width: 767px) {
html {
min-width: 0;
}
body {
background-position: center -260px;
}
#container,
.footer,
.global-top-bar .global-top-bar-content,
.header-info-container {
width: auto;
max-width: 100%;
}
.global-top-bar {
padding-left: 16px;
padding-right: 16px;
}
/* navegacion: una sola fila deslizable en lugar de 2-3 renglones */
.navbar-ornament {
display: none;
}
#navbar {
justify-content: flex-start;
}
#navbar ul {
display: flex;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
#navbar ul li a {
padding: 14px 14px;
font-size: 12px;
}
#navbar ul li a:hover,
#navbar ul li a:focus {
background-size: calc(100% - 28px) 2px;
}
#header {
padding: 28px 16px 8px;
}
.webengine-mu-logo {
max-width: 92%;
}
.hero-starfield {
height: 380px;
}
.hero-star {
margin-top: 140px;
}
.header-info-container {
padding: 0 16px;
text-align: center;
}
.header-info-container .header-info {
display: block;
width: auto;
}
#content {
padding: 10px 6px 0;
}
/* columnas principales (home y panel de usuario) apiladas */
#content > .col-xs-8,
#content > .col-xs-4,
.home-news-block,
.home-news-block + .col-xs-4 {
float: none;
width: 100%;
}
.home-news-block {
margin-bottom: 20px;
}
.home-news-block-article > .col-xs-3:first-child { width: auto; padding-right: 0; }
.home-news-block-article > .col-xs-6 { width: auto; flex: 1; min-width: 0; }
.home-news-block-article > .col-xs-3:last-child { width: auto; padding-left: 0; }
.home-news-block-article .home-news-block-article-date { font-size: 12px; }
.events-calendar-grid {
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 10px;
}
.sidebar-banner img {
margin: 0 auto;
}
.footer {
padding: 36px 16px 20px;
margin-bottom: 0;
}
}
/* Credito del desarrollador, ultima linea del pie */
.footer-dev-credit {
margin-top: 14px;
padding-bottom: 6px;
text-align: center;
font-size: 11px;
letter-spacing: 1px;
color: var(--webenginecolor14);
}
.footer-dev-credit a {
color: var(--webenginecolor1) !important;
font-weight: 700;
text-decoration: none;
}
.footer-dev-credit a:hover,
.footer-dev-credit a:focus {
color: var(--webenginecolor4) !important;
text-decoration: underline;
}