MediaWiki:Common.css

/* Hub De Vors — MediaWiki Common.css (paleta portal + mobile-first) */

root {

 --hdv-bg: #0c0c14;
 --hdv-page: #050508;
 --hdv-surface: #141927;
 --hdv-surface-2: #10131d;
 --hdv-line: rgba(184, 192, 224, 0.26);
 --hdv-text: #eef2ff;
 --hdv-muted: #b8c0e0;
 --hdv-faint: #8b93b5;
 --hdv-primary: #20f08a;
 --hdv-primary-glow: #19f58b;
 --hdv-primary-ink: #04130b;
 --hdv-gold: #f9ab00;
 --hdv-crimson: #ef5350;
 --hdv-blue: #22d3ee;
 --hdv-radius: 8px;
 --hdv-touch: 44px;

}

html, body, .mw-body, .vector-body,

1. content,
2. mw-content-text,

.mw-page-container, .mw-workspace-container, .vector-header-container, .mw-header, .vector-sitenotice-container, .mw-footer-container, .vector-main-menu-landmark, .vector-toc-landmark, .vector-page-toolbar, .vector-sticky-header, .mw-sidebar-container, .skin-minerva, .skin-minerva .mw-body, .skin-minerva #content, .skin-minerva .content, .minerva-header, .minerva__body {

 background: var(--hdv-bg) !important;
 color: var(--hdv-text) !important;

}

.mw-page-container, .mw-body,

1. content,

.skin-minerva .mw-body {

 background:
   radial-gradient(ellipse at 20% 0%, rgba(32, 240, 138, 0.08), transparent 42%),
   radial-gradient(ellipse at 80% 10%, rgba(34, 211, 238, 0.05), transparent 36%),
   var(--hdv-bg) !important;

}

/* Links — forzar esmeralda sobre azul Vector/Minerva */ .mw-parser-output a, .mw-parser-output a:link, .mw-parser-output a:visited, .vector-body a, .vector-toc a, .mw-list-item a, .cdx-menu a, a.external, a.hdv-card, a.hdv-wikilink, .skin-minerva a, .skin-minerva .content a {

 color: var(--hdv-primary) !important;
 text-decoration-color: rgba(32, 240, 138, 0.45) !important;

}

a.hdv-wikilink {

 text-decoration: underline;
 text-underline-offset: 2px;

}

a.hdv-card {

 display: block !important;
 padding: 1rem 1.1rem !important;
 margin: 0 !important;
 border: 1px solid rgba(32, 240, 138, 0.22) !important;
 border-radius: var(--hdv-radius) !important;
 background: rgba(20, 25, 39, 0.72) !important;
 text-decoration: none !important;
 color: var(--hdv-text) !important;
 min-height: var(--hdv-touch);
 box-sizing: border-box;

}

a.hdv-card strong {

 display: block !important;
 color: var(--hdv-primary-glow) !important;
 margin-bottom: 0.35rem !important;

}

a.hdv-card .hdv-meta, a.hdv-card span {

 color: var(--hdv-muted) !important;

}

.hdv-grid, .mw-parser-output .hdv-grid {

 display: grid !important;
 grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
 gap: 12px !important;
 margin: 1rem 0 1.5rem !important;
 width: 100% !important;
 max-width: 100% !important;

}

/* Night mode root paint */ html.skin-theme-clientpref-night, html.skin-theme-clientpref-night body, .skin-theme-clientpref-night .mw-page-container, .skin-theme-clientpref-night .mw-body, html.skin-theme-clientpref-os, .skin-minerva.theme-dark, .skin-minerva {

 background: var(--hdv-bg) !important;
 color: var(--hdv-text) !important;

}

h1, h2, h3, h4, h5, h6, .firstHeading, .mw-heading, .skin-minerva .page-heading, .skin-minerva h1, .skin-minerva h2 {

 color: var(--hdv-primary-glow) !important;
 border-color: rgba(32, 240, 138, 0.28) !important;
 font-weight: 700;
 overflow-wrap: anywhere;
 word-break: break-word;

}

.mw-body-content, .mw-parser-output,

1. mw-content-text p,

.vector-body, .skin-minerva .content p {

 color: var(--hdv-text) !important;
 line-height: 1.65;
 font-size: 1.02rem;

}

.mw-parser-output .hdv-box, .mw-parser-output .hdv-callout, .mw-parser-output table.wikitable, .mw-parser-output .toc, .mw-parser-output .mw-headline-box, .skin-minerva table.wikitable {

 background: rgba(20, 25, 39, 0.88) !important;
 border: 1px solid var(--hdv-line) !important;
 border-radius: var(--hdv-radius);
 color: var(--hdv-text) !important;

}

.mw-parser-output table.wikitable > * > tr > th, .skin-minerva table.wikitable th {

 background: rgba(32, 240, 138, 0.12) !important;
 color: var(--hdv-primary-glow) !important;
 border-color: var(--hdv-line) !important;

}

.mw-parser-output table.wikitable > * > tr > td, .skin-minerva table.wikitable td {

 border-color: var(--hdv-line) !important;
 background: transparent !important;

}

.mw-parser-output .toc {

 padding: 1rem 1.2rem;

}

.mw-parser-output pre, .mw-parser-output code, .mw-code {

 background: var(--hdv-surface-2) !important;
 color: var(--hdv-primary) !important;
 border-color: var(--hdv-line) !important;
 border-radius: 4px;
 white-space: pre-wrap;
 overflow-wrap: anywhere;
 max-width: 100%;

}

.mw-parser-output .hdv-kicker {

 display: inline-block;
 color: var(--hdv-primary);
 font-size: 0.78rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 font-weight: 700;
 margin-bottom: 0.4rem;

}

.mw-parser-output .hdv-hero, .hdv-hero {

 padding: 1.4rem 1.5rem;
 margin: 0 0 1.4rem;
 border-left: 4px solid var(--hdv-primary);
 background: linear-gradient(90deg, rgba(32, 240, 138, 0.12), rgba(20, 25, 39, 0.4));
 border-radius: 0 var(--hdv-radius) var(--hdv-radius) 0;

}

.mw-parser-output .hdv-card, .hdv-card {

 display: block;
 padding: 1rem 1.1rem;
 border: 1px solid rgba(32, 240, 138, 0.22);
 border-radius: var(--hdv-radius);
 background: rgba(20, 25, 39, 0.72);
 text-decoration: none !important;
 color: var(--hdv-text) !important;
 transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;

}

.mw-parser-output .hdv-card:hover, a.hdv-card:hover {

 border-color: var(--hdv-primary);
 transform: translateY(-1px);
 box-shadow: 0 0 28px rgba(32, 240, 138, 0.18);

}

.mw-parser-output .hdv-card strong {

 display: block;
 color: var(--hdv-primary-glow) !important;
 margin-bottom: 0.35rem;

}

.mw-parser-output .hdv-meta {

 color: var(--hdv-muted) !important;
 font-size: 0.92rem;

}

.mw-parser-output .hdv-steps > li {

 margin-bottom: 0.55rem;

}

.mw-parser-output .hdv-boss {

 display: grid;
 grid-template-columns: 180px 1fr;
 gap: 1rem;
 align-items: start;
 padding: 1rem;
 margin: 1rem 0;
 border: 1px solid rgba(32, 240, 138, 0.22);
 border-radius: var(--hdv-radius);
 background: rgba(20, 25, 39, 0.75);

}

.mw-parser-output .hdv-boss img, .mw-parser-output img, .skin-minerva .content img {

 max-width: 100% !important;
 height: auto !important;
 image-rendering: pixelated;
 border-radius: 6px;

}

.mw-parser-output .hdv-boss img {

 width: 100%;
 background: #050806;
 border: 1px solid rgba(32, 240, 138, 0.18);

}

.vector-menu-tabs, .vector-page-toolbar-container, .vector-dropdown-content, .vector-toc, .mw-portlet,

1. p-logo,

.mw-footer, .minerva-header, .minerva-footer {

 background: var(--hdv-surface) !important;
 color: var(--hdv-text) !important;
 border-color: var(--hdv-line) !important;

}

input, select, textarea, .oo-ui-inputWidget-input, .cdx-text-input__input, .skin-minerva input, .skin-minerva .search {

 background: var(--hdv-surface-2) !important;
 color: var(--hdv-text) !important;
 border-color: var(--hdv-line) !important;
 font-size: 16px !important; /* evita zoom iOS */

}

.mw-ui-button.mw-ui-progressive, .cdx-button--action-progressive,

1. searchButton,

.searchButton, .skin-minerva .mw-ui-button.mw-ui-progressive {

 background: var(--hdv-primary) !important;
 color: var(--hdv-primary-ink) !important;
 border-color: var(--hdv-primary) !important;
 font-weight: 700;
 min-height: var(--hdv-touch);

}

.catlinks {

 background: rgba(20, 25, 39, 0.85) !important;
 border: 1px solid var(--hdv-line) !important;
 border-radius: var(--hdv-radius);
 color: var(--hdv-muted) !important;

}

1. footer-info,
2. footer-places,
3. footer-icons,

.mw-footer li, .minerva-footer {

 color: var(--hdv-faint) !important;

}

/* Tablas: scroll horizontal en lugar de romper el layout */ .mw-parser-output .wikitable, .skin-minerva .wikitable {

 display: block;
 width: 100%;
 max-width: 100%;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;

}

.mw-parser-output, .mw-body-content, .skin-minerva .content, .skin-minerva .mw-parser-output {

 overflow-x: hidden;
 max-width: 100%;

}

.mw-parser-output > *, .skin-minerva .content > * {

 max-width: 100%;

}

/* Minerva = vista móvil: siempre 1 columna, sin depender del ancho del emulador */ .skin-minerva .hdv-grid, .skin-minerva .mw-parser-output .hdv-grid {

 grid-template-columns: 1fr !important;
 gap: 10px !important;

}

.skin-minerva a.hdv-card, .skin-minerva .mw-parser-output .hdv-card {

 width: 100% !important;
 max-width: 100% !important;

}

.skin-minerva .hdv-hero, .skin-minerva .mw-parser-output .hdv-hero {

 padding: 1rem 0.95rem;

}

.skin-minerva .mw-parser-output .hdv-boss {

 grid-template-columns: 1fr !important;

}

.skin-minerva .content, .skin-minerva .mw-body, .skin-minerva .mw-parser-output {

 overflow-x: hidden !important;

}

.skin-minerva table.wikitable {

 display: block !important;
 overflow-x: auto !important;
 -webkit-overflow-scrolling: touch;

}

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

  RESPONSIVE — tablet
  ========================= */

@media (max-width: 960px) {

 .mw-parser-output .hdv-grid,
 .hdv-grid {
   grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 }

 .firstHeading,
 .mw-heading h1 {
   font-size: 1.55rem !important;
   line-height: 1.25 !important;
 }

}

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

  RESPONSIVE — móvil
  ========================= */

@media (max-width: 720px) {

 .mw-parser-output .hdv-boss {
   grid-template-columns: 1fr;
 }

 .mw-parser-output .hdv-grid,
 .hdv-grid {
   grid-template-columns: 1fr !important;
   gap: 8px !important;
 }

 .mw-parser-output .hdv-hero,
 .hdv-hero {
   padding: 0.7rem 0.75rem !important;
   margin-bottom: 0.75rem !important;
   border-left-width: 3px;
   font-size: 0.92rem !important;
 }

 a.hdv-card,
 .mw-parser-output .hdv-card {
   padding: 0.7rem 0.8rem !important;
   min-height: 0 !important;
 }

 a.hdv-card strong,
 .mw-parser-output .hdv-card strong {
   font-size: 0.95rem !important;
   margin-bottom: 0.2rem !important;
 }

 a.hdv-card .hdv-meta,
 .mw-parser-output .hdv-meta {
   font-size: 0.82rem !important;
 }

 .mw-body-content,
 .mw-parser-output,
 .skin-minerva .content,
 .skin-minerva .mw-parser-output,
 .skin-minerva .content p {
   font-size: 0.92rem !important;
   line-height: 1.45 !important;
 }

 .firstHeading,
 .page-heading h1,
 .mw-heading h1,
 .skin-minerva h1.page-heading,
 .skin-minerva .page-heading {
   font-size: 1.15rem !important;
   line-height: 1.2 !important;
   margin-bottom: 0.35rem !important;
 }

 .mw-heading h2,
 .skin-minerva h2,
 .mw-parser-output h2 {
   font-size: 1.05rem !important;
 }

 .mw-heading h3,
 .skin-minerva h3,
 .mw-parser-output h3 {
   font-size: 0.98rem !important;
 }

 .mw-parser-output .hdv-kicker {
   font-size: 0.65rem !important;
   letter-spacing: 0.06em;
 }

 .mw-body,
 #content,
 .mw-body-content,
 .skin-minerva .mw-body,
 .skin-minerva .content {
   padding-left: 0.65rem !important;
   padding-right: 0.65rem !important;
 }

 .mw-parser-output ol.hdv-steps,
 .mw-parser-output .hdv-steps {
   padding-left: 1rem;
 }

 .mw-parser-output table.wikitable th,
 .mw-parser-output table.wikitable td,
 .skin-minerva table.wikitable th,
 .skin-minerva table.wikitable td {
   font-size: 0.8rem !important;
   padding: 0.4rem 0.45rem !important;
 }

 .mw-parser-output a.image img,
 .skin-minerva .content img,
 .mw-parser-output img {
   max-width: min(100%, 220px) !important;
   max-height: 220px !important;
   object-fit: contain;
 }

 .mw-parser-output .thumb {
   margin: 0.4rem 0 !important;
   float: none !important;
   width: 100% !important;
 }

 .skin-minerva .page-actions-menu,
 .skin-minerva .last-modified-bar,
 .skin-minerva .tagline {
   font-size: 0.75rem !important;
 }

 .skin-minerva .branding-box img,
 .skin-minerva .mw-logo-icon {
   max-height: 28px !important;
   width: auto !important;
 }

}

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

  RESPONSIVE — móvil estrecho
  ========================= */

@media (max-width: 420px) {

 .mw-body,
 #content,
 .mw-body-content,
 .skin-minerva .mw-body,
 .skin-minerva .content {
   padding-left: 0.7rem !important;
   padding-right: 0.7rem !important;
 }

 .firstHeading,
 .page-heading h1 {
   font-size: 1.22rem !important;
 }

 a.hdv-card strong {
   font-size: 1.02rem;
 }

}

/* Minerva: barra superior y overlays HDV */ .skin-minerva .header-container, .skin-minerva .minerva-header, .skin-minerva .overlay, .skin-minerva .menu, .skin-minerva .drawer {

 background: var(--hdv-surface) !important;
 color: var(--hdv-text) !important;
 border-color: var(--hdv-line) !important;

}

.skin-minerva .branding-box, .skin-minerva .mw-logo-wordmark, .skin-minerva .last-modified-bar {

 color: var(--hdv-muted) !important;

}

.skin-minerva .page-actions-menu__list-item a, .skin-minerva .toggle-list-item__label {

 color: var(--hdv-text) !important;
 min-height: var(--hdv-touch);

}

/* Safe area (notch / home indicator) */ @supports (padding: max(0px)) {

 .skin-minerva .minerva-header,
 .vector-header-container {
   padding-left: max(0.5rem, env(safe-area-inset-left));
   padding-right: max(0.5rem, env(safe-area-inset-right));
 }

 .skin-minerva .mw-body,
 .mw-body {
   padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
 }

}