Diferencia entre revisiones de «MediaWiki:Common.css»

Revisión del 01:33 4 abr 2026

/* =========================================================
   OROZA WIKI BASE
   Inspirado en tu seccion premium blanca + dorado suave
   Ajuste: texto mas oscuro + encabezados dorados en tablas
   ========================================================= */


/* =========================================================
   1) VARIABLES
   ========================================================= */
:root {
    /* Fondos */
    --oroza-page-bg: #f5f7fb;
    --oroza-surface: #ffffff;
    --oroza-surface-soft: #fbfcfe;
    --oroza-surface-soft-2: #f8fafc;

    /* Texto */
    --oroza-text: #1f2b38;
    --oroza-text-body: #334255;
    --oroza-text-soft: #4b5a6b;
    --oroza-text-muted: #6f7d8d;
    --oroza-text-white: #ffffff;

    /* Bordes */
    --oroza-border: #e5ebf2;
    --oroza-border-soft: #eef3f8;
    --oroza-border-strong: #d7e0ea;

    /* Marca */
    --oroza-primary: #223044;
    --oroza-primary-2: #2f3c4f;
    --oroza-primary-soft: #f4f7fb;

    /* Dorado */
    --oroza-gold: #e0b11f;
    --oroza-gold-strong: #c99612;
    --oroza-gold-soft: #fffaf0;
    --oroza-gold-soft-2: #fff5dc;
    --oroza-gold-soft-3: #ffefc3;
    --oroza-gold-border: rgba(224,177,31,.22);

    /* Estados */
    --oroza-info-bg: #f4f8fd;
    --oroza-info-border: #cfe0f3;

    --oroza-success-bg: #f1fbf4;
    --oroza-success-border: #cdebd5;

    --oroza-warning-bg: #fff8ef;
    --oroza-warning-border: #f0d9a8;

    --oroza-danger-bg: #fff4f4;
    --oroza-danger-border: #efcaca;

    /* Sombras */
    --oroza-shadow-xs: 0 2px 8px rgba(26,39,60,.04);
    --oroza-shadow-sm: 0 4px 12px rgba(26,39,60,.05);
    --oroza-shadow-md: 0 10px 26px rgba(26,39,60,.08);
    --oroza-shadow-lg: 0 16px 38px rgba(26,39,60,.10);

    /* Radios */
    --oroza-radius-xs: 10px;
    --oroza-radius-sm: 14px;
    --oroza-radius-md: 18px;
    --oroza-radius-lg: 22px;
    --oroza-radius-xl: 26px;
    --oroza-radius-pill: 999px;

    /* Espaciado */
    --oroza-space-1: 6px;
    --oroza-space-2: 10px;
    --oroza-space-3: 14px;
    --oroza-space-4: 18px;
    --oroza-space-5: 22px;
    --oroza-space-6: 30px;
    --oroza-space-7: 34px;

    /* Tipografia */
    --oroza-font-main: "Segoe UI", Tahoma, Arial, sans-serif;

    /* Transiciones */
    --oroza-fast: .18s ease;
    --oroza-mid: .28s ease;
}


/* =========================================================
   2) BASE GLOBAL
   ========================================================= */
html,
body {
    scroll-behavior: smooth;
}

body {
    background: linear-gradient(180deg, #f7f9fc 0%, #f4f7fb 100%);
    font-family: var(--oroza-font-main);
    color: var(--oroza-text);
    font-size: 16px;
    line-height: 1.75;
}

::selection {
    background: rgba(224,177,31,.18);
    color: var(--oroza-text);
}


/* =========================================================
   3) CONTENIDO PRINCIPAL
   ========================================================= */
#content {
    background: transparent;
    max-width: 1280px;
    margin: 24px auto;
    padding: 0;
    box-shadow: none;
    border: none;
}

.mw-body,
#bodyContent,
#mw-content-text {
    color: var(--oroza-text);
}


/* =========================================================
   4) WRAPPER GENERAL
   ========================================================= */
.oroza-flex-wrapper {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 18px;
}

.oroza-sidebar-wrap {
    width: 260px;
    flex-shrink: 0;
}

.oroza-main-wrap {
    flex: 1;
    min-width: 0;
    padding: 10px;
    font-family: var(--oroza-font-main);
    color: var(--oroza-text);
}


/* =========================================================
   5) PANEL PRINCIPAL
   ========================================================= */
.oroza-main-card {
    background: var(--oroza-surface);
    border: 1px solid var(--oroza-border);
    border-radius: var(--oroza-radius-lg);
    box-shadow: var(--oroza-shadow-md);
    overflow: hidden;
}


/* =========================================================
   6) HERO / ENCABEZADO PRINCIPAL
   ========================================================= */
.oroza-hero {
    padding: 34px 30px 28px;
    text-align: center;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    border-bottom: 1px solid var(--oroza-border-soft);
}

.oroza-hero-logo {
    margin-bottom: 18px;
}

.oroza-hero-title,
.firstHeading,
h1 {
    margin: 0 0 14px;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--oroza-text);
    text-align: center;
    border: none !important;
    background: none !important;
    text-shadow: none;
}

.oroza-hero-subtitle {
    max-width: 920px;
    margin: 0 auto;
    padding: 18px 20px;
    border: 1px solid var(--oroza-border);
    border-radius: var(--oroza-radius-sm);
    background: var(--oroza-surface-soft);
    font-size: 15px;
    line-height: 1.8;
    color: var(--oroza-text-body);
}


/* =========================================================
   7) CUERPO INTERNO
   ========================================================= */
.oroza-main-body {
    padding: 30px;
}


/* =========================================================
   8) TITULOS GENERALES
   ========================================================= */
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--oroza-font-main);
    color: var(--oroza-text);
    text-align: center;
    font-weight: 800;
    border: none !important;
    background: none !important;
    text-shadow: none;
    margin-top: 30px;
    margin-bottom: 16px;
    line-height: 1.25;
}

h2 {
    font-size: 28px;
}

h3 {
    font-size: 23px;
}

h4 {
    font-size: 19px;
}

h5 {
    font-size: 16px;
}

h6 {
    font-size: 14px;
    color: var(--oroza-text-soft);
    letter-spacing: .04em;
    text-transform: uppercase;
}

p {
    margin: 0 0 16px;
    color: var(--oroza-text-body);
    font-size: 15.5px;
    line-height: 1.85;
}

small,
.text-muted {
    color: var(--oroza-text-muted);
}


/* =========================================================
   9) ENLACES
   ========================================================= */
a,
.mw-body a {
    color: #244c7a;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--oroza-fast), opacity var(--oroza-fast);
}

a:hover,
.mw-body a:hover {
    color: #b98512;
    text-decoration: none;
}


/* =========================================================
   10) TARJETAS DE SECCION
   ========================================================= */
.oroza-section-card {
    margin-bottom: 24px;
    background: var(--oroza-surface);
    border: 1px solid var(--oroza-border-soft);
    border-radius: var(--oroza-radius-md);
    box-shadow: var(--oroza-shadow-sm);
    overflow: hidden;
}

.oroza-section-head {
    padding: 16px 20px;
    background: linear-gradient(180deg, var(--oroza-gold-soft) 0%, var(--oroza-gold-soft-2) 100%);
    border-bottom: 1px solid var(--oroza-gold-border);
    border-left: 4px solid var(--oroza-gold);
    font-size: 21px;
    font-weight: 800;
    color: var(--oroza-primary-2);
}

.oroza-section-body {
    padding: 20px;
    font-size: 14.8px;
    line-height: 1.88;
    color: var(--oroza-text-body);
}


/* =========================================================
   11) TARJETAS PEQUENAS
   ========================================================= */
.oroza-mini-card {
    background: var(--oroza-surface);
    border: 1px solid var(--oroza-border-soft);
    border-radius: var(--oroza-radius-md);
    box-shadow: var(--oroza-shadow-sm);
    overflow: hidden;
}

.oroza-mini-card-head {
    padding: 16px 20px;
    background: linear-gradient(180deg, var(--oroza-gold-soft) 0%, var(--oroza-gold-soft-2) 100%);
    border-bottom: 1px solid var(--oroza-gold-border);
    border-left: 4px solid var(--oroza-gold);
    font-size: 20px;
    font-weight: 800;
    color: var(--oroza-primary-2);
}

.oroza-mini-card-body {
    padding: 18px 20px;
    color: var(--oroza-text-body);
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   12) TABLAS ELEGANTES
   ========================================================= */
.oroza-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--oroza-border);
    border-radius: var(--oroza-radius-sm);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(26,39,60,.04);
    background: var(--oroza-surface);
    margin: 16px 0 0;
    font-size: 15px;
}

.oroza-table th {
    padding: 14px 16px;
    background: linear-gradient(180deg, #fff8e7 0%, #ffe8a6 100%);
    color: #4d3908;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    border-bottom: 1px solid rgba(224,177,31,.30);
}

.oroza-table td {
    padding: 12px 14px;
    color: var(--oroza-text-body);
    border-bottom: 1px solid var(--oroza-border-soft);
    vertical-align: middle;
}

.oroza-table tr:last-child td {
    border-bottom: none;
}

.oroza-table td.label {
    width: 42%;
    font-weight: 700;
    color: var(--oroza-text);
    background: var(--oroza-surface-soft);
}

.oroza-table tr:nth-child(even) td:not(.label) {
    background: #fdfefe;
}

/* Wikitable adaptada */
table.wikitable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--oroza-border) !important;
    border-radius: var(--oroza-radius-sm);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(26,39,60,.04);
    background: var(--oroza-surface);
    margin: 16px 0 0;
    font-size: 15px;
    color: var(--oroza-text-body);
}

table.wikitable > tr > th,
table.wikitable > * > tr > th {
    padding: 14px 16px;
    background: linear-gradient(180deg, #fff8e7 0%, #ffe8a6 100%) !important;
    color: #4d3908 !important;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    border-bottom: 1px solid rgba(224,177,31,.30) !important;
}

table.wikitable > tr > td,
table.wikitable > * > tr > td {
    padding: 12px 14px;
    border-color: var(--oroza-border-soft) !important;
    color: var(--oroza-text-body);
}


/* =========================================================
   13) CAJAS INFORMATIVAS
   ========================================================= */
.box-info,
.box-tip,
.box-warning,
.box-danger {
    margin: 18px 0;
    padding: 16px 18px;
    border-radius: var(--oroza-radius-sm);
    border: 1px solid var(--oroza-border);
    box-shadow: var(--oroza-shadow-xs);
    font-size: 15px;
    line-height: 1.8;
    color: var(--oroza-text-body);
}

.box-info {
    background: var(--oroza-info-bg);
    border-color: var(--oroza-info-border);
}

.box-tip {
    background: var(--oroza-success-bg);
    border-color: var(--oroza-success-border);
}

.box-warning {
    background: var(--oroza-warning-bg);
    border-color: var(--oroza-warning-border);
}

.box-danger {
    background: var(--oroza-danger-bg);
    border-color: var(--oroza-danger-border);
}

.oroza-alert-title {
    display: block;
    margin-bottom: 6px;
    font-weight: 800;
    color: var(--oroza-text);
}


/* =========================================================
   14) CODIGO / COMANDOS
   ========================================================= */
code,
.oroza-code {
    display: inline-block;
    padding: 2px 7px;
    background: var(--oroza-primary-soft);
    border: 1px solid var(--oroza-border);
    border-radius: 8px;
    color: #1f2d3d;
    font-family: Consolas, monospace;
    font-size: 13px;
}


/* =========================================================
   15) BOTONES Y LINKS VISUALES
   ========================================================= */
.oroza-btn,
.button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 12px;
    border: 1px solid var(--oroza-border);
    background: #ffffff;
    color: var(--oroza-text) !important;
    font-weight: 700;
    font-size: 15px;
    box-shadow: var(--oroza-shadow-xs);
    text-decoration: none !important;
    transition:
        transform var(--oroza-fast),
        box-shadow var(--oroza-fast),
        background var(--oroza-fast),
        border-color var(--oroza-fast);
}

.oroza-btn:hover,
.button-icon:hover {
    transform: translateY(-1px);
    background: var(--oroza-surface-soft);
    border-color: var(--oroza-border-strong);
}

.oroza-btn-gold {
    background: linear-gradient(180deg, var(--oroza-gold-soft) 0%, var(--oroza-gold-soft-2) 100%);
    border-color: rgba(224,177,31,.25);
    color: #8e6a11 !important;
}

.oroza-btn-gold:hover {
    background: linear-gradient(180deg, #fff7e8 0%, #ffefca 100%);
}


/* =========================================================
   16) BADGES
   ========================================================= */
.oroza-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: var(--oroza-radius-pill);
    background: var(--oroza-surface-soft);
    border: 1px solid var(--oroza-border);
    color: var(--oroza-text);
    font-size: 13px;
    font-weight: 800;
}

.oroza-badge.gold {
    background: var(--oroza-gold-soft);
    border-color: rgba(224,177,31,.22);
    color: #8e6a11;
}


/* =========================================================
   17) IMAGENES
   ========================================================= */
img {
    max-width: 100%;
    height: auto;
}

img.round-fade,
.oroza-img {
    display: block;
    margin: 14px auto;
    border-radius: 18px;
    border: 1px solid var(--oroza-border);
    box-shadow: var(--oroza-shadow-sm);
    transition: transform var(--oroza-mid), box-shadow var(--oroza-mid);
}

img.round-fade:hover,
.oroza-img:hover {
    transform: scale(1.02);
    box-shadow: var(--oroza-shadow-md);
}

.zoom-img {
    transition: transform var(--oroza-mid), box-shadow var(--oroza-mid);
    cursor: zoom-in;
    border-radius: 16px;
}

.zoom-img:hover {
    transform: scale(1.05);
    box-shadow: var(--oroza-shadow-md);
    position: relative;
    z-index: 3;
}

.oroza-banner {
    display: block;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--oroza-border);
    box-shadow: var(--oroza-shadow-md);
}


/* =========================================================
   18) GRID
   ========================================================= */
.oroza-grid-2,
.oroza-grid-3,
.oroza-grid-4 {
    display: grid;
    gap: 20px;
}

.oroza-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.oroza-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.oroza-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* =========================================================
   19) SIDEBAR
   ========================================================= */
.oroza-sidebar {
    background: var(--oroza-surface);
    border: 1px solid var(--oroza-border);
    border-radius: var(--oroza-radius-md);
    box-shadow: var(--oroza-shadow-sm);
    padding: 18px;
}

.oroza-sidebar .menu-title {
    margin: 18px 0 10px;
    padding: 11px 14px;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--oroza-gold-soft) 0%, var(--oroza-gold-soft-2) 100%);
    border-left: 4px solid var(--oroza-gold);
    color: var(--oroza-primary-2);
    font-size: 16px;
    font-weight: 800;
}

.oroza-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.oroza-sidebar li {
    margin: 6px 0;
}

.oroza-sidebar li a {
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--oroza-text);
    font-size: 15px;
    font-weight: 600;
    transition: background var(--oroza-fast), color var(--oroza-fast), transform var(--oroza-fast);
}

.oroza-sidebar li a:hover {
    background: var(--oroza-surface-soft);
    color: var(--oroza-primary);
    transform: translateX(2px);
}

.oroza-sidebar li.active a,
.oroza-sidebar li a.is-active {
    background: #f8fafc;
    border: 1px solid var(--oroza-border);
    box-shadow: var(--oroza-shadow-xs);
}


/* =========================================================
   20) NAVBAR
   ========================================================= */
.oroza-navbar {
    background: linear-gradient(180deg, #2c3c50 0%, #223044 100%);
    border: 1px solid rgba(255,255,255,.08);
    border-bottom: 3px solid var(--oroza-gold);
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(26,39,60,.12);
    margin: 20px auto;
    max-width: 1240px;
    padding: 16px 24px;
    display: flex;
    gap: 26px;
    justify-content: center;
    align-items: center;
    position: relative;
}

.oroza-navbar a {
    color: #ffffff !important;
    font-size: 15.5px;
    font-weight: 700;
    opacity: .95;
}

.oroza-navbar a:hover {
    color: #ffe7a3 !important;
    opacity: 1;
}

.oroza-navbar-logo {
    position: absolute;
    left: 24px;
    display: flex;
    align-items: center;
}

.oroza-navbar-logo img {
    width: 78px;
    height: auto;
}

.oroza-navbar a.is-active {
    color: #ffe7a3 !important;
    position: relative;
}

.oroza-navbar a.is-active::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -8px;
    height: 3px;
    border-radius: 999px;
    background: var(--oroza-gold);
}


/* =========================================================
   21) TOC
   ========================================================= */
#toc {
    background: #ffffff;
    border: 1px solid var(--oroza-border);
    border-radius: var(--oroza-radius-sm);
    box-shadow: var(--oroza-shadow-sm);
    padding: 18px 20px;
    margin: 22px 0 28px;
    font-size: 15px;
}

#toc .toctitle {
    text-align: center;
    margin-bottom: 10px;
}

#toc .toctitle h2 {
    margin: 0;
    font-size: 18px;
    color: var(--oroza-text);
}

#toc ul {
    margin: 8px 0 0;
    padding-left: 18px;
}

#toc li {
    margin: 6px 0;
    color: var(--oroza-text-body);
}


/* =========================================================
   22) UTILIDADES
   ========================================================= */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.oroza-center {
    margin-left: auto;
    margin-right: auto;
}

.oroza-mb-0 { margin-bottom: 0 !important; }
.oroza-mb-1 { margin-bottom: 10px !important; }
.oroza-mb-2 { margin-bottom: 14px !important; }
.oroza-mb-3 { margin-bottom: 20px !important; }
.oroza-mb-4 { margin-bottom: 24px !important; }

.oroza-soft-box {
    padding: 18px 20px;
    border: 1px solid var(--oroza-border);
    border-radius: var(--oroza-radius-sm);
    background: var(--oroza-surface-soft);
    color: var(--oroza-text-body);
}

.oroza-divider {
    width: 100%;
    height: 1px;
    margin: 24px 0;
    background: linear-gradient(
        90deg,
        rgba(229,235,242,0) 0%,
        rgba(229,235,242,1) 50%,
        rgba(229,235,242,0) 100%
    );
    border: none;
}


/* =========================================================
   23) LIMPIEZA MEDIAWIKI
   ========================================================= */
#p-logo,
#footer,
#mw-panel {
    display: none !important;
}

.toggle-checkbox,
.toggle-label {
    display: none !important;
}


/* =========================================================
   24) RESPONSIVE
   ========================================================= */
@media screen and (max-width: 1024px) {
    .oroza-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .oroza-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .oroza-hero-title,
    .firstHeading,
    h1 {
        font-size: 30px;
    }
}

@media screen and (max-width: 768px) {
    .oroza-flex-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .oroza-sidebar-wrap,
    .oroza-main-wrap,
    .oroza-flex-wrapper > div {
        width: 100% !important;
    }

    .oroza-main-body {
        padding: 20px;
    }

    .oroza-hero {
        padding: 26px 20px 22px;
    }

    .oroza-hero-title,
    .firstHeading,
    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 23px;
    }

    h3 {
        font-size: 20px;
    }

    h4 {
        font-size: 17px;
    }

    .oroza-grid-2,
    .oroza-grid-3,
    .oroza-grid-4 {
        grid-template-columns: 1fr;
    }

    .oroza-navbar {
        flex-direction: column;
        gap: 14px;
        padding: 18px 18px 16px;
    }

    .oroza-navbar-logo {
        position: static;
        margin-bottom: 4px;
    }

    .oroza-navbar a {
        display: block;
        padding: 6px 0;
    }
}

@@ Línea 1: / Línea 1: @@
 /* =========================================================
-    OROZA WIKI UI SYSTEM
+    OROZA WIKI BASE
-    Base visual moderna 2026 para fondo blanco
+    Inspirado en tu seccion premium blanca + dorado suave
-    Estilo: premium limpio + fantasy gaming elegante
+    Ajuste: texto mas oscuro + encabezados dorados en tablas
     ========================================================= */
 /* =========================================================
-) VARIABLES VISUALES GLOBALES
+) VARIABLES
     ========================================================= */
 :root {
-     /* Colores base */
+     /* Fondos */
-     --oroza-bg-page: #f5f7fb;
+     --oroza-page-bg: #f5f7fb;
-     --oroza-bg-main: #ffffff;
+     --oroza-surface: #ffffff;
-     --oroza-bg-soft: #f8fafc;
+     --oroza-surface-soft: #fbfcfe;
-     --oroza-bg-muted: #f1f5f9;
+     --oroza-surface-soft-2: #f8fafc;
      /* Texto */
-     --oroza-text: #243041;
+     --oroza-text: #1f2b38;
-     --oroza-text-soft: #5f6f84;
+    --oroza-text-body: #334255;
-     --oroza-text-muted: #7f8ca0;
+     --oroza-text-soft: #4b5a6b;
+     --oroza-text-muted: #6f7d8d;
      --oroza-text-white: #ffffff;
+    /* Bordes */
+    --oroza-border: #e5ebf2;
+    --oroza-border-soft: #eef3f8;
+    --oroza-border-strong: #d7e0ea;
      /* Marca */
-     --oroza-primary: #243b5a;
+     --oroza-primary: #223044;
-     --oroza-primary-2: #2f527d;
+     --oroza-primary-2: #2f3c4f;
-     --oroza-primary-soft: #edf4fc;
+     --oroza-primary-soft: #f4f7fb;
-     /* Acento dorado */
+     /* Dorado */
-     --oroza-accent: #d4a63a;
+     --oroza-gold: #e0b11f;
-     --oroza-accent-strong: #b9891f;
+     --oroza-gold-strong: #c99612;
-     --oroza-accent-soft: #fff6df;
+     --oroza-gold-soft: #fffaf0;
+     --oroza-gold-soft-2: #fff5dc;
-    /* Bordes */
+     --oroza-gold-soft-3: #ffefc3;
-     --oroza-border: #dbe4ee;
+     --oroza-gold-border: rgba(224,177,31,.22);
-     --oroza-border-soft: #e7edf4;
-     --oroza-border-strong: #c9d5e3;
      /* Estados */
-     --oroza-info-bg: #eef6ff;
+     --oroza-info-bg: #f4f8fd;
-     --oroza-info-border: #6ca7e8;
+     --oroza-info-border: #cfe0f3;
-     --oroza-success-bg: #eefbf2;
+     --oroza-success-bg: #f1fbf4;
-     --oroza-success-border: #53b97c;
+     --oroza-success-border: #cdebd5;
-     --oroza-warning-bg: #fff7ea;
+     --oroza-warning-bg: #fff8ef;
-     --oroza-warning-border: #e3a53c;
+     --oroza-warning-border: #f0d9a8;
-     --oroza-danger-bg: #fff1f1;
+     --oroza-danger-bg: #fff4f4;
-     --oroza-danger-border: #da6b6b;
+     --oroza-danger-border: #efcaca;
      /* Sombras */
-     --oroza-shadow-xs: 0 2px 6px rgba(27, 39, 53, 0.04);
+     --oroza-shadow-xs: 0 2px 8px rgba(26,39,60,.04);
-     --oroza-shadow-sm: 0 4px 12px rgba(27, 39, 53, 0.06);
+     --oroza-shadow-sm: 0 4px 12px rgba(26,39,60,.05);
-     --oroza-shadow-md: 0 10px 28px rgba(27, 39, 53, 0.10);
+     --oroza-shadow-md: 0 10px 26px rgba(26,39,60,.08);
-     --oroza-shadow-lg: 0 16px 40px rgba(27, 39, 53, 0.14);
+     --oroza-shadow-lg: 0 16px 38px rgba(26,39,60,.10);
      /* Radios */
-     --oroza-radius-xs: 8px;
+     --oroza-radius-xs: 10px;
-     --oroza-radius-sm: 12px;
+     --oroza-radius-sm: 14px;
-     --oroza-radius-md: 16px;
+     --oroza-radius-md: 18px;
      --oroza-radius-lg: 22px;
+    --oroza-radius-xl: 26px;
      --oroza-radius-pill: 999px;
@@ Línea 68: / Línea 73: @@
      --oroza-space-3: 14px;
      --oroza-space-4: 18px;
-     --oroza-space-5: 24px;
+     --oroza-space-5: 22px;
-     --oroza-space-6: 32px;
+     --oroza-space-6: 30px;
-     --oroza-space-7: 40px;
+     --oroza-space-7: 34px;
+    /* Tipografia */
+    --oroza-font-main: "Segoe UI", Tahoma, Arial, sans-serif;
      /* Transiciones */
-     --oroza-transition-fast: 0.18s ease;
+     --oroza-fast: .18s ease;
-     --oroza-transition-mid: 0.28s ease;
+     --oroza-mid: .28s ease;
 }
@@ Línea 87: / Línea 95: @@
 body {
-     background: linear-gradient(180deg, #f7f9fc 0%, #f2f5fa 100%);
+     background: linear-gradient(180deg, #f7f9fc 0%, #f4f7fb 100%);
-     font-family: "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
+     font-family: var(--oroza-font-main);
      color: var(--oroza-text);
-    line-height: 1.72;
      font-size: 16px;
+    line-height: 1.75;
 }
-/* Selección de texto */
 ::selection {
-     background: rgba(212, 166, 58, 0.22);
+     background: rgba(224,177,31,.18);
      color: var(--oroza-text);
 }
@@ Línea 102: / Línea 109: @@
 /* =========================================================
-) CONTENEDOR PRINCIPAL
+) CONTENIDO PRINCIPAL
     ========================================================= */
 #content {
-     background: var(--oroza-bg-main);
+     background: transparent;
-     max-width: 1240px;
+     max-width: 1280px;
      margin: 24px auto;
-     padding: 34px 34px 40px;
+     padding: 0;
-     border: 1px solid var(--oroza-border-soft);
+    box-shadow: none;
+    border: none;
+}
+.mw-body,
+#bodyContent,
+#mw-content-text {
+    color: var(--oroza-text);
+}
+/* =========================================================
+) WRAPPER GENERAL
+   ========================================================= */
+.oroza-flex-wrapper {
+    display: flex;
+    gap: 30px;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    margin-top: 18px;
+}
+.oroza-sidebar-wrap {
+    width: 260px;
+    flex-shrink: 0;
+}
+.oroza-main-wrap {
+    flex: 1;
+    min-width: 0;
+    padding: 10px;
+    font-family: var(--oroza-font-main);
+    color: var(--oroza-text);
+}
+/* =========================================================
+) PANEL PRINCIPAL
+   ========================================================= */
+.oroza-main-card {
+    background: var(--oroza-surface);
+     border: 1px solid var(--oroza-border);
      border-radius: var(--oroza-radius-lg);
      box-shadow: var(--oroza-shadow-md);
-    position: relative;
      overflow: hidden;
 }
-/* Línea superior premium */
-#content::before {
+/* =========================================================
-     content: "";
+) HERO / ENCABEZADO PRINCIPAL
-    display: block;
+   ========================================================= */
-     position: absolute;
+.oroza-hero {
-    top: 0;
+     padding: 34px 30px 28px;
-    left: 26px;
+     text-align: center;
-    right: 26px;
+     background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
-    height: 3px;
+    border-bottom: 1px solid var(--oroza-border-soft);
-    border-radius: 0 0 999px 999px;
+}
-     background: linear-gradient(
-deg,
+.oroza-hero-logo {
-        rgba(212,166,58,0) 0%,
+     margin-bottom: 18px;
-        rgba(212,166,58,0.9) 20%,
-        rgba(47,82,125,0.85) 50%,
-        rgba(212,166,58,0.9) 80%,
-        rgba(212,166,58,0) 100%
-     );
 }
-/* Área del contenido wiki */
+.oroza-hero-title,
-.mw-body,
+.firstHeading,
-#bodyContent,
+h1 {
-#mw-content-text {
+    margin: 0 0 14px;
+    font-size: 34px;
+    line-height: 1.2;
+    font-weight: 800;
      color: var(--oroza-text);
+    text-align: center;
+    border: none !important;
+    background: none !important;
+    text-shadow: none;
+}
+.oroza-hero-subtitle {
+    max-width: 920px;
+    margin: 0 auto;
+    padding: 18px 20px;
+    border: 1px solid var(--oroza-border);
+    border-radius: var(--oroza-radius-sm);
+    background: var(--oroza-surface-soft);
+    font-size: 15px;
+    line-height: 1.8;
+    color: var(--oroza-text-body);
 }
 /* =========================================================
-) TIPOGRAFÍA Y JERARQUÍA
+) CUERPO INTERNO
+   ========================================================= */
+.oroza-main-body {
+    padding: 30px;
+}
+/* =========================================================
+) TITULOS GENERALES
     ========================================================= */
-.firstHeading,
-h1,
 h2,
 h3,
@@ Línea 154: / Línea 221: @@
 h5,
 h6 {
-     font-family: "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
+     font-family: var(--oroza-font-main);
+    color: var(--oroza-text);
+    text-align: center;
      font-weight: 800;
-    color: var(--oroza-primary);
+     border: none !important;
-    text-align: center;
-    line-height: 1.22;
-    letter-spacing: 0.01em;
-     border-bottom: none !important;
      background: none !important;
-    margin-top: 42px;
+     text-shadow: none;
-    margin-bottom: 18px;
+     margin-top: 30px;
-     text-shadow: 0 1px 0 rgba(255,255,255,0.9);
+     margin-bottom: 16px;
-}
+     line-height: 1.25;
-/* Título principal */
-.firstHeading,
-h1 {
-    font-size: 2.7rem;
-     margin-top: 6px;
-     margin-bottom: 24px;
-    color: #203652;
-    position: relative;
-}
-/* Subrayado decorativo del título principal */
-.firstHeading::after,
-h1::after {
-    content: "";
-    display: block;
-    width: 110px;
-     height: 4px;
-    margin: 14px auto 0;
-    border-radius: 999px;
-    background: linear-gradient(
-deg,
-        rgba(212,166,58,0.20) 0%,
-        rgba(212,166,58,1) 50%,
-        rgba(212,166,58,0.20) 100%
-    );
 }
 h2 {
-     font-size: 2.15rem;
+     font-size: 28px;
-    color: #274569;
 }
 h3 {
-     font-size: 1.75rem;
+     font-size: 23px;
-    color: #2f527d;
 }
 h4 {
-     font-size: 1.4rem;
+     font-size: 19px;
-    color: #35597f;
 }
 h5 {
-     font-size: 1.16rem;
+     font-size: 16px;
-    color: #456481;
 }
 h6 {
-     font-size: 1rem;
+     font-size: 14px;
      color: var(--oroza-text-soft);
+    letter-spacing: .04em;
      text-transform: uppercase;
-    letter-spacing: 0.08em;
 }
-/* Párrafos */
 p {
-     margin: 0 0 18px;
+     margin: 0 0 16px;
-     color: var(--oroza-text);
+     color: var(--oroza-text-body);
-     font-size: 1rem;
+     font-size: 15.5px;
+    line-height: 1.85;
 }
-/* Texto secundario */
 small,
 .text-muted {
      color: var(--oroza-text-muted);
-    font-size: 0.95rem;
-    line-height: 1.6;
 }
 /* =========================================================
 ) ENLACES
     ========================================================= */
 a,
 .mw-body a {
-     color: var(--oroza-primary-2);
+     color: #244c7a;
      font-weight: 600;
      text-decoration: none;
-     transition: color var(--oroza-transition-fast), opacity var(--oroza-transition-fast);
+     transition: color var(--oroza-fast), opacity var(--oroza-fast);
 }
 a:hover,
 .mw-body a:hover {
-     color: var(--oroza-accent-strong);
+     color: #b98512;
      text-decoration: none;
-}
-a:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(212,166,58,0.18);
-    border-radius: 4px;
 }
 /* =========================================================
-) TABLA DE CONTENIDO
+) TARJETAS DE SECCION
     ========================================================= */
-#toc {
+.oroza-section-card {
-     background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
+    margin-bottom: 24px;
-     border: 1px solid var(--oroza-border);
+     background: var(--oroza-surface);
+     border: 1px solid var(--oroza-border-soft);
      border-radius: var(--oroza-radius-md);
      box-shadow: var(--oroza-shadow-sm);
-     padding: 18px 20px;
+    overflow: hidden;
-     margin: 24px 0 30px;
+}
-     font-size: 15px;
+.oroza-section-head {
+     padding: 16px 20px;
+     background: linear-gradient(180deg, var(--oroza-gold-soft) 0%, var(--oroza-gold-soft-2) 100%);
+    border-bottom: 1px solid var(--oroza-gold-border);
+    border-left: 4px solid var(--oroza-gold);
+     font-size: 21px;
+    font-weight: 800;
+    color: var(--oroza-primary-2);
 }
-#toc .toctitle {
+.oroza-section-body {
-     text-align: center;
+     padding: 20px;
-     margin-bottom: 10px;
+    font-size: 14.8px;
+     line-height: 1.88;
+    color: var(--oroza-text-body);
 }
-#toc .toctitle h2 {
-     font-size: 1.18rem;
+/* =========================================================
-     margin: 0;
+) TARJETAS PEQUENAS
-     color: var(--oroza-primary);
+   ========================================================= */
+.oroza-mini-card {
+     background: var(--oroza-surface);
+    border: 1px solid var(--oroza-border-soft);
+     border-radius: var(--oroza-radius-md);
+     box-shadow: var(--oroza-shadow-sm);
+    overflow: hidden;
 }
-#toc ul {
+.oroza-mini-card-head {
-     margin: 8px 0 0;
+     padding: 16px 20px;
-     padding-left: 18px;
+    background: linear-gradient(180deg, var(--oroza-gold-soft) 0%, var(--oroza-gold-soft-2) 100%);
+    border-bottom: 1px solid var(--oroza-gold-border);
+     border-left: 4px solid var(--oroza-gold);
+    font-size: 20px;
+    font-weight: 800;
+    color: var(--oroza-primary-2);
 }
-#toc li {
+.oroza-mini-card-body {
-     margin: 6px 0;
+     padding: 18px 20px;
-     color: var(--oroza-text-soft);
+     color: var(--oroza-text-body);
+    font-size: 15px;
+    line-height: 1.8;
 }
 /* =========================================================
-) LISTAS
+) TABLAS ELEGANTES
     ========================================================= */
-ul,
+.oroza-table {
-ol {
+    width: 100%;
-     padding-left: 30px;
+    border-collapse: separate;
-     margin: 0 0 20px;
+    border-spacing: 0;
-     font-size: 1rem;
+    border: 1px solid var(--oroza-border);
+    border-radius: var(--oroza-radius-sm);
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(26,39,60,.04);
+    background: var(--oroza-surface);
+    margin: 16px 0 0;
+    font-size: 15px;
+}
+.oroza-table th {
+     padding: 14px 16px;
+     background: linear-gradient(180deg, #fff8e7 0%, #ffe8a6 100%);
+    color: #4d3908;
+     font-size: 16px;
+    font-weight: 800;
+    text-align: center;
+    border-bottom: 1px solid rgba(224,177,31,.30);
+}
+.oroza-table td {
+    padding: 12px 14px;
+    color: var(--oroza-text-body);
+    border-bottom: 1px solid var(--oroza-border-soft);
+    vertical-align: middle;
 }
-li {
+.oroza-table tr:last-child td {
-     margin-bottom: 8px;
+     border-bottom: none;
 }
-ul li::marker,
+.oroza-table td.label {
-ol li::marker {
+     width: 42%;
-     color: var(--oroza-accent-strong);
      font-weight: 700;
+    color: var(--oroza-text);
+    background: var(--oroza-surface-soft);
 }
+.oroza-table tr:nth-child(even) td:not(.label) {
-/* =========================================================
+     background: #fdfefe;
-) BLOQUES / PANELES BASE
-   ========================================================= */
-.oroza-panel,
-.oroza-card,
-.oroza-block {
-    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
-    border: 1px solid var(--oroza-border-soft);
-     border-radius: var(--oroza-radius-md);
-    box-shadow: var(--oroza-shadow-sm);
-    padding: 22px;
-    margin: 22px 0;
-    position: relative;
 }
-.oroza-panel-premium {
+/* Wikitable adaptada */
-     background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
+table.wikitable {
-     border: 1px solid var(--oroza-border);
+     width: 100%;
-     border-radius: var(--oroza-radius-md);
+    border-collapse: separate;
-    box-shadow: var(--oroza-shadow-md);
+    border-spacing: 0;
-    padding: 24px;
+     border: 1px solid var(--oroza-border) !important;
-    margin: 24px 0;
+     border-radius: var(--oroza-radius-sm);
-    position: relative;
      overflow: hidden;
+    box-shadow: 0 4px 12px rgba(26,39,60,.04);
+    background: var(--oroza-surface);
+    margin: 16px 0 0;
+    font-size: 15px;
+    color: var(--oroza-text-body);
 }
-.oroza-panel-premium::before {
+table.wikitable > tr > th,
-     content: "";
+table.wikitable > * > tr > th {
-     position: absolute;
+     padding: 14px 16px;
-     top: 0;
+     background: linear-gradient(180deg, #fff8e7 0%, #ffe8a6 100%) !important;
-     left: 18px;
+     color: #4d3908 !important;
-     right: 18px;
+     font-size: 16px;
-     height: 3px;
+     font-weight: 800;
-     border-radius: 999px;
+     text-align: center;
-    background: linear-gradient(
+     border-bottom: 1px solid rgba(224,177,31,.30) !important;
-deg,
-        var(--oroza-primary) 0%,
-        var(--oroza-accent) 50%,
-        var(--oroza-primary) 100%
-    );
 }
-.oroza-section-title {
+table.wikitable > tr > td,
-     display: block;
+table.wikitable > * > tr > td {
-     text-align: center;
+     padding: 12px 14px;
-    font-size: 1.18rem;
+     border-color: var(--oroza-border-soft) !important;
-    font-weight: 800;
+     color: var(--oroza-text-body);
-     color: var(--oroza-primary);
-    margin-bottom: 16px;
 }
 /* =========================================================
 ) CAJAS INFORMATIVAS
     ========================================================= */
 .box-info,
@@ Línea 376: / Línea 435: @@
 .box-warning,
 .box-danger {
+    margin: 18px 0;
      padding: 16px 18px;
      border-radius: var(--oroza-radius-sm);
-    margin: 20px 0;
+     border: 1px solid var(--oroza-border);
-     border: 1px solid transparent;
      box-shadow: var(--oroza-shadow-xs);
-     position: relative;
+     font-size: 15px;
-     overflow: hidden;
+     line-height: 1.8;
-     font-size: 15.5px;
+     color: var(--oroza-text-body);
 }
 .box-info {
      background: var(--oroza-info-bg);
-     border-color: rgba(108,167,232,0.35);
+     border-color: var(--oroza-info-border);
-    border-left: 5px solid var(--oroza-info-border);
 }
 .box-tip {
      background: var(--oroza-success-bg);
-     border-color: rgba(83,185,124,0.30);
+     border-color: var(--oroza-success-border);
-    border-left: 5px solid var(--oroza-success-border);
 }
 .box-warning {
      background: var(--oroza-warning-bg);
-     border-color: rgba(227,165,60,0.28);
+     border-color: var(--oroza-warning-border);
-    border-left: 5px solid var(--oroza-warning-border);
 }
 .box-danger {
      background: var(--oroza-danger-bg);
-     border-color: rgba(218,107,107,0.28);
+     border-color: var(--oroza-danger-border);
-    border-left: 5px solid var(--oroza-danger-border);
 }
 .oroza-alert-title {
      display: block;
+    margin-bottom: 6px;
      font-weight: 800;
-    margin-bottom: 6px;
+     color: var(--oroza-text);
-     color: var(--oroza-primary);
-    font-size: 1rem;
 }
 /* =========================================================
-) BADGES / ETIQUETAS
+) CODIGO / COMANDOS
     ========================================================= */
-.oroza-badge {
+code,
-     display: inline-flex;
+.oroza-code {
-     align-items: center;
+     display: inline-block;
-     justify-content: center;
+     padding: 2px 7px;
-     gap: 6px;
+     background: var(--oroza-primary-soft);
-     padding: 6px 12px;
+    border: 1px solid var(--oroza-border);
-     border-radius: var(--oroza-radius-pill);
+     border-radius: 8px;
+     color: #1f2d3d;
+     font-family: Consolas, monospace;
      font-size: 13px;
-    font-weight: 800;
-    letter-spacing: 0.02em;
-    border: 1px solid var(--oroza-border);
-    background: #ffffff;
-    color: var(--oroza-primary);
-    box-shadow: var(--oroza-shadow-xs);
-}
-.oroza-badge.gold {
-    background: var(--oroza-accent-soft);
-    color: #8a6514;
-    border-color: rgba(212,166,58,0.35);
-}
-.oroza-badge.blue {
-    background: var(--oroza-primary-soft);
-    color: var(--oroza-primary);
-    border-color: rgba(47,82,125,0.22);
-}
-.oroza-badge.green {
-    background: #edf9f0;
-    color: #2d7b4a;
-    border-color: rgba(83,185,124,0.25);
 }
 /* =========================================================
-) BOTONES
+) BOTONES Y LINKS VISUALES
     ========================================================= */
-.button-icon,
+.oroza-btn,
-.oroza-btn {
+.button-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
-     padding: 11px 17px;
+     padding: 11px 16px;
-     border-radius: var(--oroza-radius-sm);
+     border-radius: 12px;
-     border: 1px solid transparent;
+    border: 1px solid var(--oroza-border);
+     background: #ffffff;
+    color: var(--oroza-text) !important;
      font-weight: 700;
      font-size: 15px;
+    box-shadow: var(--oroza-shadow-xs);
      text-decoration: none !important;
      transition:
-         transform var(--oroza-transition-fast),
+         transform var(--oroza-fast),
-         box-shadow var(--oroza-transition-fast),
+         box-shadow var(--oroza-fast),
-         background var(--oroza-transition-fast),
+         background var(--oroza-fast),
-        color var(--oroza-transition-fast),
+         border-color var(--oroza-fast);
-         border-color var(--oroza-transition-fast);
-    cursor: pointer;
-}
-.button-icon,
-.oroza-btn-primary {
-    background: linear-gradient(180deg, #335a88 0%, #274569 100%);
-    color: #ffffff !important;
-    border-color: rgba(36,59,90,0.25);
-    box-shadow: 0 8px 18px rgba(36,59,90,0.18);
 }
-.button-icon:hover,
+.oroza-btn:hover,
-.oroza-btn-primary:hover {
+.button-icon:hover {
      transform: translateY(-1px);
-     background: linear-gradient(180deg, #3b6699 0%, #2c4b72 100%);
+     background: var(--oroza-surface-soft);
-     color: #ffffff !important;
+     border-color: var(--oroza-border-strong);
 }
 .oroza-btn-gold {
-     background: linear-gradient(180deg, #ebc76a 0%, #d4a63a 100%);
+     background: linear-gradient(180deg, var(--oroza-gold-soft) 0%, var(--oroza-gold-soft-2) 100%);
-    color: #4c370b !important;
+     border-color: rgba(224,177,31,.25);
-     border-color: rgba(185,137,31,0.25);
+     color: #8e6a11 !important;
-     box-shadow: 0 8px 18px rgba(212,166,58,0.20);
 }
 .oroza-btn-gold:hover {
-    transform: translateY(-1px);
+     background: linear-gradient(180deg, #fff7e8 0%, #ffefca 100%);
-     background: linear-gradient(180deg, #f2cf73 0%, #dfb24b 100%);
-    color: #4c370b !important;
-}
-.oroza-btn-soft {
-    background: #ffffff;
-    color: var(--oroza-primary) !important;
-    border-color: var(--oroza-border);
-    box-shadow: var(--oroza-shadow-xs);
-}
-.oroza-btn-soft:hover {
-    transform: translateY(-1px);
-    background: var(--oroza-bg-soft);
-}
-.button-icon::before {
-    content: "✦";
-    color: #ffe8a8;
-    font-size: 13px;
 }
 /* =========================================================
-) TABLAS
+) BADGES
     ========================================================= */
-.oroza-table {
+.oroza-badge {
-     width: 100%;
+     display: inline-flex;
-     border-collapse: separate;
+     align-items: center;
-     border-spacing: 0;
+     justify-content: center;
-     margin: 24px 0;
+     padding: 6px 12px;
-     background: #ffffff;
+    border-radius: var(--oroza-radius-pill);
+     background: var(--oroza-surface-soft);
      border: 1px solid var(--oroza-border);
-     border-radius: var(--oroza-radius-md);
+     color: var(--oroza-text);
-    overflow: hidden;
+     font-size: 13px;
-    box-shadow: var(--oroza-shadow-sm);
-     font-size: 15px;
-}
-.oroza-table thead {
-    background: linear-gradient(180deg, #2f527d 0%, #243b5a 100%);
-    color: #ffffff;
-}
-.oroza-table thead th {
-    padding: 15px 16px;
      font-weight: 800;
-    text-align: left;
-    border-bottom: 1px solid rgba(255,255,255,0.10);
 }
-.oroza-table th,
+.oroza-badge.gold {
-.oroza-table td {
+     background: var(--oroza-gold-soft);
-     padding: 14px 15px;
+     border-color: rgba(224,177,31,.22);
-     vertical-align: middle;
+     color: #8e6a11;
-     border-bottom: 1px solid #edf2f7;
 }
-.oroza-table tbody tr {
-    transition: background var(--oroza-transition-fast);
-}
-.oroza-table tbody tr:nth-child(even) {
+/* =========================================================
-     background: #fbfcfe;
+) IMAGENES
+   ========================================================= */
+img {
+    max-width: 100%;
+     height: auto;
 }
-.oroza-table tbody tr:hover {
+img.round-fade,
-     background: #f4f9ff;
+.oroza-img {
+    display: block;
+    margin: 14px auto;
+    border-radius: 18px;
+    border: 1px solid var(--oroza-border);
+    box-shadow: var(--oroza-shadow-sm);
+     transition: transform var(--oroza-mid), box-shadow var(--oroza-mid);
 }
-.oroza-table tbody tr:last-child td {
+img.round-fade:hover,
-     border-bottom: none;
+.oroza-img:hover {
+     transform: scale(1.02);
+    box-shadow: var(--oroza-shadow-md);
 }
-.oroza-table .highlight {
+.zoom-img {
-     color: var(--oroza-accent-strong);
+     transition: transform var(--oroza-mid), box-shadow var(--oroza-mid);
-     font-weight: 800;
+     cursor: zoom-in;
+    border-radius: 16px;
 }
-.oroza-table .zeny {
+.zoom-img:hover {
-     color: #2e9b57;
+    transform: scale(1.05);
-     font-weight: 800;
+    box-shadow: var(--oroza-shadow-md);
+     position: relative;
+     z-index: 3;
 }
-.oroza-table .center-icon {
+.oroza-banner {
-     text-align: center;
+     display: block;
-     font-size: 17px;
+     width: 100%;
-}
+    border-radius: 20px;
+     overflow: hidden;
-.oroza-table.premium thead {
+    border: 1px solid var(--oroza-border);
-     background: linear-gradient(180deg, #2c4d75 0%, #223955 100%);
-}
-.oroza-table.premium {
      box-shadow: var(--oroza-shadow-md);
-    border-color: #d7e0eb;
-}
-.oroza-table.auto-width {
-    width: auto !important;
-    max-width: 100%;
-    table-layout: auto !important;
-    margin: 24px auto;
-    display: table;
 }
 /* =========================================================
-) TABLAS WIKI NATIVAS
+) GRID
     ========================================================= */
-table.wikitable {
+.oroza-grid-2,
-    width: 100%;
+.oroza-grid-3,
-    margin: 24px 0;
+.oroza-grid-4 {
-    border: 1px solid var(--oroza-border) !important;
+     display: grid;
-    border-radius: var(--oroza-radius-md);
+     gap: 20px;
-    overflow: hidden;
-    box-shadow: var(--oroza-shadow-sm);
-     background: #ffffff;
-     color: var(--oroza-text);
-    font-size: 15px;
 }
-table.wikitable > tr > th,
+.oroza-grid-2 {
-table.wikitable > * > tr > th {
+     grid-template-columns: repeat(2, minmax(0, 1fr));
-     background: linear-gradient(180deg, #2f527d 0%, #243b5a 100%) !important;
-    color: #ffffff !important;
-    font-weight: 800;
-    padding: 14px 15px;
-    border: none !important;
 }
-table.wikitable > tr > td,
+.oroza-grid-3 {
-table.wikitable > * > tr > td {
+     grid-template-columns: repeat(3, minmax(0, 1fr));
-     padding: 13px 14px;
-    border-color: #edf2f7 !important;
 }
-table.wikitable tr:nth-child(even) td {
+.oroza-grid-4 {
-     background: #fbfcfe;
+     grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 /* =========================================================
 ) SIDEBAR
     ========================================================= */
 .oroza-sidebar {
-     background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
+     background: var(--oroza-surface);
      border: 1px solid var(--oroza-border);
      border-radius: var(--oroza-radius-md);
-    width: 250px;
-    padding: 18px 18px 16px;
      box-shadow: var(--oroza-shadow-sm);
-     margin-bottom: 22px;
+     padding: 18px;
-    font-size: 15px;
 }
 .oroza-sidebar .menu-title {
+    margin: 18px 0 10px;
+    padding: 11px 14px;
+    border-radius: 12px;
+    background: linear-gradient(180deg, var(--oroza-gold-soft) 0%, var(--oroza-gold-soft-2) 100%);
+    border-left: 4px solid var(--oroza-gold);
+    color: var(--oroza-primary-2);
      font-size: 16px;
      font-weight: 800;
-    color: var(--oroza-primary);
-    margin: 18px 0 10px;
-    padding: 10px 12px;
-    border-radius: var(--oroza-radius-xs);
-    background: linear-gradient(180deg, #f9fbff 0%, #f1f6fd 100%);
-    border-left: 4px solid var(--oroza-accent);
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
 }
 .oroza-sidebar ul {
      list-style: none;
-     padding-left: 0;
+     padding: 0;
      margin: 0;
 }
 .oroza-sidebar li {
-     margin: 5px 0;
+     margin: 6px 0;
 }
@@ Línea 686: / Línea 660: @@
      display: block;
      padding: 10px 12px;
-     border-radius: 10px;
+     border-radius: 12px;
      color: var(--oroza-text);
+    font-size: 15px;
      font-weight: 600;
-    font-size: 15px;
+     transition: background var(--oroza-fast), color var(--oroza-fast), transform var(--oroza-fast);
-     transition:
-        background var(--oroza-transition-fast),
-        color var(--oroza-transition-fast),
-        transform var(--oroza-transition-fast);
 }
 .oroza-sidebar li a:hover {
-     background: #f4f8fd;
+     background: var(--oroza-surface-soft);
      color: var(--oroza-primary);
      transform: translateX(2px);
 }
-.oroza-sidebar li a.is-active,
+.oroza-sidebar li.active a,
-.oroza-sidebar li.active a {
+.oroza-sidebar li a.is-active {
-     background: linear-gradient(180deg, #eef5fd 0%, #e8f1fb 100%);
+     background: #f8fafc;
-     color: var(--oroza-primary);
+     border: 1px solid var(--oroza-border);
-    border: 1px solid rgba(47,82,125,0.14);
      box-shadow: var(--oroza-shadow-xs);
 }
@@ Línea 712: / Línea 682: @@
 /* =========================================================
 ) NAVBAR
     ========================================================= */
 .oroza-navbar {
-     background: linear-gradient(180deg, #2d4d74 0%, #223955 100%);
+     background: linear-gradient(180deg, #2c3c50 0%, #223044 100%);
-     border: 1px solid rgba(255,255,255,0.08);
+     border: 1px solid rgba(255,255,255,.08);
-     border-bottom: 3px solid var(--oroza-accent);
+     border-bottom: 3px solid var(--oroza-gold);
-     border-radius: var(--oroza-radius-lg);
+     border-radius: 18px;
-     box-shadow: var(--oroza-shadow-lg);
+     box-shadow: 0 12px 26px rgba(26,39,60,.12);
-     margin: 22px auto;
+     margin: 20px auto;
      max-width: 1240px;
      padding: 16px 24px;
@@ Línea 732: / Línea 702: @@
 .oroza-navbar a {
      color: #ffffff !important;
-     font-size: 16px;
+     font-size: 15.5px;
      font-weight: 700;
-    letter-spacing: 0.01em;
+     opacity: .95;
-    text-decoration: none;
-     opacity: 0.95;
-    transition: color var(--oroza-transition-fast), opacity var(--oroza-transition-fast);
 }
 .oroza-navbar a:hover {
-     color: #ffe3a0 !important;
+     color: #ffe7a3 !important;
      opacity: 1;
 }
@@ Línea 747: / Línea 714: @@
 .oroza-navbar-logo {
      position: absolute;
-     left: 32px;
+     left: 24px;
      display: flex;
      align-items: center;
@@ Línea 753: / Línea 720: @@
 .oroza-navbar-logo img {
-     width: 90px;
+     width: 78px;
      height: auto;
-    filter: drop-shadow(0 4px 10px rgba(255,255,255,0.16));
 }
 .oroza-navbar a.is-active {
-     color: #ffe3a0 !important;
+     color: #ffe7a3 !important;
      position: relative;
 }
@@ Línea 771: / Línea 737: @@
      height: 3px;
      border-radius: 999px;
-     background: var(--oroza-accent);
+     background: var(--oroza-gold);
 }
 /* =========================================================
-) IMÁGENES Y BANNERS
+) TOC
     ========================================================= */
-img {
+#toc {
-    max-width: 100%;
+     background: #ffffff;
-    height: auto;
-}
-img.round-fade {
-    width: 55%;
-    display: block;
-    margin: 14px auto;
-    border-radius: 20px;
-    border: 1px solid rgba(36,59,90,0.08);
-    box-shadow:
-10px 28px rgba(27,39,53,0.10),
-        inset 0 1px 0 rgba(255,255,255,0.65);
-    transition:
-        transform var(--oroza-transition-mid),
-        box-shadow var(--oroza-transition-mid),
-        opacity var(--oroza-transition-mid);
-    object-fit: cover;
-    opacity: 0.98;
-}
-img.round-fade:hover {
-    transform: scale(1.03);
-    box-shadow:
-16px 34px rgba(27,39,53,0.14),
-        inset 0 1px 0 rgba(255,255,255,0.65);
-    opacity: 1;
-}
-.zoom-img {
-    transition:
-        transform var(--oroza-transition-mid),
-        box-shadow var(--oroza-transition-mid);
-    cursor: zoom-in;
-    border-radius: 16px;
-}
-.zoom-img:hover {
-    transform: scale(1.06);
-    box-shadow: var(--oroza-shadow-md);
-    z-index: 3;
-    position: relative;
-}
-.oroza-banner {
-    display: block;
-    width: 100%;
-    margin: 18px auto 24px;
-    border-radius: 22px;
-    overflow: hidden;
-    border: 1px solid var(--oroza-border-soft);
-    box-shadow: var(--oroza-shadow-md);
-}
-/* =========================================================
-) CAJAS DESTACADAS PARA GUÍAS
-   ========================================================= */
-.oroza-feature-box {
-     background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      border: 1px solid var(--oroza-border);
-     border-radius: var(--oroza-radius-md);
+     border-radius: var(--oroza-radius-sm);
      box-shadow: var(--oroza-shadow-sm);
      padding: 18px 20px;
-     margin: 20px 0;
+     margin: 22px 0 28px;
-     position: relative;
+     font-size: 15px;
 }
-.oroza-feature-box::before {
+#toc .toctitle {
-     content: "";
+     text-align: center;
-    position: absolute;
+     margin-bottom: 10px;
-    top: 14px;
-     bottom: 14px;
-    left: 0;
-    width: 4px;
-    border-radius: 999px;
-    background: linear-gradient(180deg, var(--oroza-accent) 0%, var(--oroza-primary) 100%);
 }
-.oroza-feature-box-title {
+#toc .toctitle h2 {
-     display: block;
+     margin: 0;
-     font-weight: 800;
+     font-size: 18px;
-     color: var(--oroza-primary);
+     color: var(--oroza-text);
-    margin-bottom: 8px;
-    padding-left: 10px;
-    font-size: 1rem;
 }
+#toc ul {
-/* =========================================================
+     margin: 8px 0 0;
-) BLOQUES EN GRID / COLUMNAS
+     padding-left: 18px;
-   ========================================================= */
-.oroza-grid-2,
-.oroza-grid-3,
-.oroza-grid-4 {
-     display: grid;
-     gap: 18px;
-    margin: 20px 0;
 }
-.oroza-grid-2 {
+#toc li {
-     grid-template-columns: repeat(2, minmax(0, 1fr));
+     margin: 6px 0;
-}
+     color: var(--oroza-text-body);
-.oroza-grid-3 {
-     grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-.oroza-grid-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-/* =========================================================
-) SEPARADORES
-   ========================================================= */
-.oroza-divider {
-    width: 100%;
-    height: 1px;
-    margin: 24px 0;
-    background: linear-gradient(
-deg,
-        rgba(212,166,58,0) 0%,
-        rgba(212,166,58,0.55) 50%,
-        rgba(212,166,58,0) 100%
-    );
-    border: none;
-}
-hr {
-    border: none;
-    height: 1px;
-    margin: 24px 0;
-    background: linear-gradient(
-deg,
-        rgba(36,59,90,0) 0%,
-        rgba(36,59,90,0.16) 50%,
-        rgba(36,59,90,0) 100%
-    );
 }
 /* =========================================================
 ) UTILIDADES
     ========================================================= */
 .text-center {
@@ Línea 941: / Línea 796: @@
 }
-.oroza-shadow-none {
+.oroza-mb-0 { margin-bottom: 0 !important; }
-    box-shadow: none !important;
+.oroza-mb-1 { margin-bottom: 10px !important; }
-}
+.oroza-mb-2 { margin-bottom: 14px !important; }
+.oroza-mb-3 { margin-bottom: 20px !important; }
+.oroza-mb-4 { margin-bottom: 24px !important; }
-.oroza-no-border {
+.oroza-soft-box {
-     border: none !important;
+    padding: 18px 20px;
+    border: 1px solid var(--oroza-border);
+     border-radius: var(--oroza-radius-sm);
+    background: var(--oroza-surface-soft);
+    color: var(--oroza-text-body);
 }
-.oroza-soft-bg {
+.oroza-divider {
-     background: var(--oroza-bg-soft) !important;
+     width: 100%;
-}
+    height: 1px;
+     margin: 24px 0;
-.oroza-accent-text {
+     background: linear-gradient(
-     color: var(--oroza-accent-strong) !important;
+deg,
-}
+        rgba(229,235,242,0) 0%,
+        rgba(229,235,242,1) 50%,
-.oroza-primary-text {
+        rgba(229,235,242,0) 100%
-     color: var(--oroza-primary) !important;
+     );
-}
+     border: none;
-/* =========================================================
-) FLEX WRAPPER
-   ========================================================= */
-.oroza-flex-wrapper {
-     display: flex;
-    gap: 28px;
-     align-items: flex-start;
-    flex-wrap: wrap;
 }
 /* =========================================================
-) LIMPIEZA DE ELEMENTOS ORIGINALES DE MEDIAWIKI
+) LIMPIEZA MEDIAWIKI
     ========================================================= */
 #p-logo,
@@ Línea 989: / Línea 840: @@
 /* =========================================================
 ) RESPONSIVE
     ========================================================= */
 @media screen and (max-width: 1024px) {
-    #content {
-        padding: 28px 22px 32px;
-        margin: 18px auto;
-    }
      .oroza-grid-4 {
          grid-template-columns: repeat(2, minmax(0, 1fr));
@@ Línea 1003: / Línea 849: @@
      .oroza-grid-3 {
          grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .oroza-hero-title,
+    .firstHeading,
+    h1 {
+        font-size: 30px;
      }
 }
@@ Línea 1012: / Línea 864: @@
      }
+    .oroza-sidebar-wrap,
+    .oroza-main-wrap,
      .oroza-flex-wrapper > div {
          width: 100% !important;
      }
-     .oroza-sidebar {
+     .oroza-main-body {
-         width: 100% !important;
+         padding: 20px;
-         margin-bottom: 20px;
+    }
+    .oroza-hero {
+         padding: 26px 20px 22px;
+    }
+    .oroza-hero-title,
+    .firstHeading,
+    h1 {
+        font-size: 26px;
      }
-     .oroza-navbar {
+     h2 {
-         flex-direction: column;
+         font-size: 23px;
-        gap: 14px;
-        padding: 18px 18px 16px;
      }
-     .oroza-navbar-logo {
+     h3 {
-         position: static;
+         font-size: 20px;
-        margin-bottom: 4px;
      }
-     .oroza-navbar a {
+     h4 {
-         display: block;
+         font-size: 17px;
-        padding: 6px 0;
      }
@@ Línea 1043: / Línea 902: @@
      }
-     img.round-fade {
+     .oroza-navbar {
-         width: 100%;
+         flex-direction: column;
+        gap: 14px;
+        padding: 18px 18px 16px;
      }
-     .firstHeading,
+     .oroza-navbar-logo {
-    h1 {
+        position: static;
-         font-size: 2.2rem;
+         margin-bottom: 4px;
      }
-     h2 {
+     .oroza-navbar a {
-        font-size: 1.8rem;
+         display: block;
-    }
+         padding: 6px 0;
-    h3 {
-        font-size: 1.48rem;
-    }
-    h4 {
-         font-size: 1.24rem;
-    }
-    body {
-         font-size: 15.5px;
      }
 }

Diferencia entre revisiones de «MediaWiki:Common.css»

Revisión del 01:33 4 abr 2026

Menú de navegación

Buscar