MediaWiki:Common.css
Nota: Después de publicar, quizás necesite actualizar la caché de su navegador para ver los cambios.
- Firefox/Safari: Mantenga presionada la tecla Shift mientras pulsa el botón Actualizar, o presiona Ctrl+F5 o Ctrl+R (⌘+R en Mac)
- Google Chrome: presione Ctrl+Shift+R (⌘+Shift+R en Mac)
- Edge: mantenga presionada Ctrl mientras pulsa Actualizar, o presione Ctrl+F5
/* =========================================================
OROZA WIKI - EXTENSION DE ESTILOS PARA MEDIAWIKI
Basado en: OROZA WIKI - PREMIUM FANTASY LIGHT
Cubre: Infoboxes · Drops · Navegacion · Mapas · Skills
Quests · Clases · Tabs · Badges · Barras de stats
Compatible con: MediaWiki 1.39+
========================================================= */
/* =========================================================
VARIABLES (hereda de style.css, extiende lo necesario)
========================================================= */
:root {
/* Rareza de items */
--rarity-common: #6a7a6a;
--rarity-common-bg: #f0f4f0;
--rarity-uncommon: #2a6a2a;
--rarity-uncommon-bg: #eef6ee;
--rarity-rare: #1a4a9a;
--rarity-rare-bg: #eef2fb;
--rarity-epic: #7a2a9a;
--rarity-epic-bg: #f4eefb;
--rarity-legendary: #a07a10;
--rarity-legendary-bg:#fdf4dc;
--rarity-mvp: #9a1a1a;
--rarity-mvp-bg: #fbeeed;
/* Elementos */
--elem-neutral: #607060; --elem-neutral-bg: #f0f2f0;
--elem-water: #1a5a9a; --elem-water-bg: #eaf2fb;
--elem-earth: #5a7a2a; --elem-earth-bg: #eef5e8;
--elem-fire: #9a3a1a; --elem-fire-bg: #fbeee8;
--elem-wind: #2a7a6a; --elem-wind-bg: #eaf6f3;
--elem-poison: #5a3a7a; --elem-poison-bg: #f2eefb;
--elem-holy: #8a7a1a; --elem-holy-bg: #faf6dc;
--elem-dark: #2a2a4a; --elem-dark-bg: #eeeef5;
--elem-ghost: #4a4a5a; --elem-ghost-bg: #f0f0f5;
--elem-undead: #5a1a1a; --elem-undead-bg: #f5eeee;
/* Stats de personaje */
--stat-hp: #b83232;
--stat-sp: #2858a8;
--stat-str: #c05820;
--stat-agi: #208040;
--stat-vit: #804820;
--stat-int: #6030a0;
--stat-dex: #207878;
--stat-luk: #a07010;
/* Tipos de monstruo */
--race-demi: #3a5a7a;
--race-brute: #5a3a1a;
--race-plant: #2a5a2a;
--race-insect: #4a5a1a;
--race-fish: #1a4a6a;
--race-demon: #4a1a4a;
--race-angel: #7a6a1a;
--race-dragon: #6a1a1a;
--race-formless:#3a3a3a;
--race-undead: #2a1a1a;
}
/* =========================================================
1) INFOBOX UNIVERSAL
Usada en: Monstruos, Items, NPCs, Skills, Mapas
========================================================= */
.oroza-infobox {
float: right;
clear: right;
margin: 0 0 20px 24px;
width: 280px;
background: linear-gradient(180deg, #fffdf9 0%, #f8f2e8 100%);
border: 1px solid var(--oroza-border);
border-radius: var(--oroza-radius-md);
box-shadow: var(--oroza-shadow-sm);
overflow: hidden;
font-size: 13.5px;
}
.oroza-infobox-title {
padding: 12px 14px;
background: linear-gradient(180deg, #24384b 0%, #182634 100%);
color: #f6dda0;
font-size: 15px;
font-weight: 800;
text-align: center;
letter-spacing: .02em;
border-bottom: 2px solid var(--oroza-gold);
}
.oroza-infobox-subtitle {
padding: 6px 14px 10px;
background: linear-gradient(180deg, #24384b 0%, #182634 100%);
color: rgba(246,221,160,.65);
font-size: 12px;
text-align: center;
margin-top: -4px;
border-bottom: 2px solid var(--oroza-gold);
}
.oroza-infobox-image {
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: linear-gradient(180deg, #f8f3e8 0%, #f0e8d6 100%);
border-bottom: 1px solid var(--oroza-border-soft);
min-height: 120px;
position: relative;
}
.oroza-infobox-image img {
max-width: 100%;
max-height: 160px;
object-fit: contain;
image-rendering: pixelated;
filter: drop-shadow(0 3px 8px rgba(24,38,52,.15));
}
.oroza-infobox table {
width: 100%;
border-collapse: collapse;
margin: 0;
}
.oroza-infobox table tr {
border-bottom: 1px solid var(--oroza-border-soft);
transition: background var(--oroza-fast);
}
.oroza-infobox table tr:last-child {
border-bottom: none;
}
.oroza-infobox table tr:hover {
background: rgba(200,161,74,.06);
}
.oroza-infobox table th {
padding: 8px 12px;
width: 42%;
background: rgba(248,239,217,.55);
color: var(--oroza-text);
font-size: 12.5px;
font-weight: 700;
text-align: left;
vertical-align: top;
border-right: 1px solid var(--oroza-border-soft);
}
.oroza-infobox table td {
padding: 8px 12px;
color: var(--oroza-text-body);
font-size: 13px;
vertical-align: middle;
}
.oroza-infobox-section {
padding: 8px 12px 4px;
background: linear-gradient(180deg, #f7eed8 0%, #ecd8a6 100%);
border-top: 1px solid var(--oroza-gold-border);
border-bottom: 1px solid var(--oroza-gold-border);
color: var(--oroza-primary);
font-size: 11.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
}
/* Infobox para monstruos */
.oroza-infobox.monster .oroza-infobox-image {
background:
radial-gradient(ellipse at center, rgba(200,161,74,.08) 0%, transparent 70%),
linear-gradient(180deg, #f8f3e8 0%, #f0e8d6 100%);
}
/* Infobox para items */
.oroza-infobox.item .oroza-infobox-title {
background: linear-gradient(180deg, #2a3a52 0%, #1c2a3e 100%);
}
/* Infobox para NPCs */
.oroza-infobox.npc .oroza-infobox-image {
background: linear-gradient(180deg, #eef5fb 0%, #ddeaf4 100%);
}
/* Responsive infobox */
@media screen and (max-width: 640px) {
.oroza-infobox {
float: none;
width: 100%;
margin: 0 0 20px 0;
}
}
/* =========================================================
2) TABLA DE DROPS
========================================================= */
.oroza-drop-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: var(--oroza-shadow-xs);
font-size: 14px;
margin: 14px 0;
}
.oroza-drop-table thead tr {
background: linear-gradient(180deg, #f7eed9 0%, #ecd7a0 100%);
}
.oroza-drop-table thead th {
padding: 11px 14px;
color: #53401a;
font-weight: 800;
font-size: 13px;
text-align: left;
border-bottom: 1px solid rgba(200,161,74,.30);
}
.oroza-drop-table tbody tr {
background: #fffdf9;
border-bottom: 1px solid var(--oroza-border-soft);
transition: background var(--oroza-fast);
}
.oroza-drop-table tbody tr:last-child {
border-bottom: none;
}
.oroza-drop-table tbody tr:hover {
background: #faf5ec;
}
.oroza-drop-table td {
padding: 10px 14px;
color: var(--oroza-text-body);
vertical-align: middle;
}
.oroza-drop-table .drop-icon {
width: 36px;
text-align: center;
padding: 6px 8px;
}
.oroza-drop-table .drop-icon img {
width: 28px;
height: 28px;
object-fit: contain;
image-rendering: pixelated;
}
.oroza-drop-table .drop-name {
font-weight: 700;
color: var(--oroza-text);
}
.oroza-drop-table .drop-name a {
color: var(--oroza-text) !important;
font-weight: 700;
}
.oroza-drop-table .drop-name a:hover {
color: var(--oroza-gold-deep) !important;
}
.oroza-drop-table .drop-rate {
text-align: right;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
padding-right: 16px;
}
/* Colores de tasa de drop */
.drop-rate-mvp { color: var(--rarity-mvp); }
.drop-rate-rare { color: var(--rarity-epic); }
.drop-rate-uncommon { color: var(--rarity-rare); }
.drop-rate-low { color: var(--rarity-uncommon); }
.drop-rate-common { color: var(--rarity-common); }
.drop-rate-bar {
display: inline-block;
width: 60px;
height: 5px;
background: var(--oroza-border);
border-radius: 999px;
vertical-align: middle;
margin-right: 8px;
overflow: hidden;
}
.drop-rate-bar-fill {
height: 100%;
border-radius: 999px;
background: var(--oroza-gold);
transition: width .6s ease;
}
/* =========================================================
3) BADGES DE RAREZA, ELEMENTO, RAZA Y CLASE
========================================================= */
.oroza-badge-rarity,
.oroza-badge-elem,
.oroza-badge-race,
.oroza-badge-class,
.oroza-badge-size {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: var(--oroza-radius-pill);
font-size: 12px;
font-weight: 800;
border: 1px solid transparent;
white-space: nowrap;
}
/* Rareza */
.rarity-common { background: var(--rarity-common-bg); color: var(--rarity-common); border-color: rgba(106,122,106,.22); }
.rarity-uncommon { background: var(--rarity-uncommon-bg); color: var(--rarity-uncommon); border-color: rgba(42,106,42,.22); }
.rarity-rare { background: var(--rarity-rare-bg); color: var(--rarity-rare); border-color: rgba(26,74,154,.22); }
.rarity-epic { background: var(--rarity-epic-bg); color: var(--rarity-epic); border-color: rgba(122,42,154,.22); }
.rarity-legendary { background: var(--rarity-legendary-bg); color: var(--rarity-legendary); border-color: rgba(160,122,16,.22); }
.rarity-mvp { background: var(--rarity-mvp-bg); color: var(--rarity-mvp); border-color: rgba(154,26,26,.22); }
/* Elementos */
.elem-neutral { background: var(--elem-neutral-bg); color: var(--elem-neutral); border-color: rgba(96,112,96,.2); }
.elem-water { background: var(--elem-water-bg); color: var(--elem-water); border-color: rgba(26,90,154,.2); }
.elem-earth { background: var(--elem-earth-bg); color: var(--elem-earth); border-color: rgba(90,122,42,.2); }
.elem-fire { background: var(--elem-fire-bg); color: var(--elem-fire); border-color: rgba(154,58,26,.2); }
.elem-wind { background: var(--elem-wind-bg); color: var(--elem-wind); border-color: rgba(42,122,106,.2); }
.elem-poison { background: var(--elem-poison-bg); color: var(--elem-poison); border-color: rgba(90,58,122,.2); }
.elem-holy { background: var(--elem-holy-bg); color: var(--elem-holy); border-color: rgba(138,122,26,.2); }
.elem-dark { background: var(--elem-dark-bg); color: var(--elem-dark); border-color: rgba(42,42,74,.2); }
.elem-ghost { background: var(--elem-ghost-bg); color: var(--elem-ghost); border-color: rgba(74,74,90,.2); }
.elem-undead { background: var(--elem-undead-bg); color: var(--elem-undead); border-color: rgba(90,26,26,.2); }
/* Tamaño de monstruo */
.size-small { background: #f0f4f0; color: #4a6a4a; border-color: rgba(74,106,74,.2); }
.size-medium { background: #f4f0ec; color: #6a5a3a; border-color: rgba(106,90,58,.2); }
.size-large { background: #f4eef0; color: #6a3a4a; border-color: rgba(106,58,74,.2); }
/* =========================================================
4) BARRAS DE STATS (HP, SP, ATRIBUTOS)
========================================================= */
.oroza-stat-block {
margin: 14px 0;
}
.oroza-stat-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.oroza-stat-label {
width: 42px;
font-size: 11.5px;
font-weight: 800;
color: var(--oroza-text-soft);
text-transform: uppercase;
letter-spacing: .04em;
flex-shrink: 0;
}
.oroza-stat-bar-bg {
flex: 1;
height: 8px;
background: var(--oroza-border-soft);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.oroza-stat-bar-fill {
height: 100%;
border-radius: 999px;
transition: width .8s cubic-bezier(.4,0,.2,1);
position: relative;
}
.oroza-stat-bar-fill::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 40%;
background: rgba(255,255,255,.25);
border-radius: 999px;
}
.stat-bar-hp { background: linear-gradient(90deg, #c04040, #e05050); }
.stat-bar-sp { background: linear-gradient(90deg, #3060b0, #4080d0); }
.stat-bar-str { background: linear-gradient(90deg, #b04820, #d06030); }
.stat-bar-agi { background: linear-gradient(90deg, #208040, #30a050); }
.stat-bar-vit { background: linear-gradient(90deg, #784020, #986040); }
.stat-bar-int { background: linear-gradient(90deg, #5828a0, #7840c0); }
.stat-bar-dex { background: linear-gradient(90deg, #187070, #249090); }
.stat-bar-luk { background: linear-gradient(90deg, #906010, #b08020); }
.oroza-stat-val {
width: 52px;
text-align: right;
font-size: 13px;
font-weight: 700;
color: var(--oroza-text);
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
/* =========================================================
5) TABS / PESTAÑAS DE CONTENIDO
========================================================= */
.oroza-tabs {
margin: 20px 0;
}
.oroza-tab-nav {
display: flex;
gap: 0;
border-bottom: 2px solid var(--oroza-border);
flex-wrap: wrap;
}
.oroza-tab-btn {
padding: 10px 18px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
color: var(--oroza-text-soft);
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition:
color var(--oroza-fast),
border-color var(--oroza-fast),
background var(--oroza-fast);
border-radius: var(--oroza-radius-xs) var(--oroza-radius-xs) 0 0;
}
.oroza-tab-btn:hover {
color: var(--oroza-primary);
background: rgba(200,161,74,.06);
}
.oroza-tab-btn.active {
color: var(--oroza-primary-deep);
border-bottom-color: var(--oroza-gold);
background: rgba(200,161,74,.06);
}
.oroza-tab-panel {
display: none;
padding: 20px 0;
animation: tabFadeIn .2s ease;
}
.oroza-tab-panel.active {
display: block;
}
@keyframes tabFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* =========================================================
6) TABLA DE HABILIDADES / SKILLS
========================================================= */
.oroza-skill-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
margin: 16px 0;
}
.oroza-skill-card {
background: linear-gradient(180deg, #fffdf9 0%, #f8f2e8 100%);
border: 1px solid var(--oroza-border-soft);
border-radius: var(--oroza-radius-sm);
padding: 14px;
display: flex;
gap: 12px;
align-items: flex-start;
transition:
transform var(--oroza-fast),
box-shadow var(--oroza-fast),
border-color var(--oroza-fast);
cursor: default;
}
.oroza-skill-card:hover {
transform: translateY(-2px);
box-shadow: var(--oroza-shadow-sm);
border-color: var(--oroza-gold-border);
}
.oroza-skill-icon {
width: 44px;
height: 44px;
border-radius: 10px;
border: 1px solid var(--oroza-border);
background: var(--oroza-surface-soft);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.oroza-skill-icon img {
width: 36px;
height: 36px;
object-fit: contain;
image-rendering: pixelated;
}
.oroza-skill-info .skill-name {
font-size: 13.5px;
font-weight: 800;
color: var(--oroza-primary);
margin-bottom: 3px;
}
.oroza-skill-info .skill-type {
font-size: 11.5px;
color: var(--oroza-text-muted);
margin-bottom: 5px;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.oroza-skill-info .skill-desc {
font-size: 12.5px;
color: var(--oroza-text-body);
line-height: 1.6;
}
/* Skill tipo badge */
.skill-passive { background: #eef5e8; color: #2a6a2a; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(42,106,42,.2); }
.skill-active { background: #eef2fb; color: #1a4a9a; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(26,74,154,.2); }
.skill-toggle { background: #f4eefb; color: #7a2a9a; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(122,42,154,.2); }
.skill-support { background: #fdf4dc; color: #8a6810; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(138,104,16,.2); }
/* =========================================================
7) TABLA DE QUESTS / MISIONES
========================================================= */
.oroza-quest-list {
list-style: none;
padding: 0;
margin: 16px 0;
}
.oroza-quest-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 16px;
background: linear-gradient(180deg, #fffdf9 0%, #faf5ec 100%);
border: 1px solid var(--oroza-border-soft);
border-radius: var(--oroza-radius-sm);
margin-bottom: 10px;
transition:
transform var(--oroza-fast),
box-shadow var(--oroza-fast);
}
.oroza-quest-item:hover {
transform: translateX(3px);
box-shadow: var(--oroza-shadow-xs);
}
.oroza-quest-num {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(180deg, var(--oroza-primary-2) 0%, var(--oroza-primary-deep) 100%);
color: #f6dda0;
font-size: 13px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid rgba(246,221,160,.2);
}
.oroza-quest-content .quest-title {
font-size: 14.5px;
font-weight: 800;
color: var(--oroza-primary);
margin-bottom: 4px;
}
.oroza-quest-content .quest-desc {
font-size: 13.5px;
color: var(--oroza-text-body);
line-height: 1.65;
}
.oroza-quest-content .quest-reward {
margin-top: 6px;
font-size: 12.5px;
color: var(--oroza-text-soft);
}
.oroza-quest-content .quest-reward strong {
color: var(--oroza-gold-deep);
}
/* Estado de quest */
.quest-badge {
display: inline-flex;
align-items: center;
padding: 2px 9px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 800;
margin-left: 8px;
}
.quest-daily { background: #eef2fb; color: #1a4a9a; border: 1px solid rgba(26,74,154,.2); }
.quest-main { background: #fdf4dc; color: #8a6810; border: 1px solid rgba(138,104,16,.2); }
.quest-repeatable { background: #eef6ee; color: #2a6a2a; border: 1px solid rgba(42,106,42,.2); }
.quest-event { background: #fbeeed; color: #9a1a1a; border: 1px solid rgba(154,26,26,.2); }
/* =========================================================
8) TABLA DE EXPERIENCIA / NIVEL
========================================================= */
.oroza-level-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--oroza-border);
border-radius: var(--oroza-radius-sm);
overflow: hidden;
font-size: 14px;
margin: 14px 0;
}
.oroza-level-table thead th {
padding: 11px 14px;
background: linear-gradient(180deg, #24384b 0%, #182634 100%);
color: #f6dda0;
font-size: 12.5px;
font-weight: 800;
text-align: center;
border-bottom: 2px solid var(--oroza-gold);
}
.oroza-level-table tbody tr {
background: #fffdf9;
border-bottom: 1px solid var(--oroza-border-soft);
transition: background var(--oroza-fast);
}
.oroza-level-table tbody tr:hover {
background: #faf5ec;
}
.oroza-level-table tbody tr:nth-child(10n) {
background: linear-gradient(90deg, #fdf8ef, #fffdf9);
font-weight: 700;
border-bottom: 1px solid rgba(200,161,74,.25);
}
.oroza-level-table td {
padding: 8px 14px;
text-align: center;
color: var(--oroza-text-body);
}
.oroza-level-table td:first-child {
font-weight: 700;
color: var(--oroza-primary);
background: rgba(248,239,217,.45);
border-right: 1px solid var(--oroza-border-soft);
}
/* =========================================================
9) CARD DE CLASE / JOB
========================================================= */
.oroza-class-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
margin: 16px 0;
}
.oroza-class-card {
background: linear-gradient(180deg, #fffdf9 0%, #f8f2e8 100%);
border: 1px solid var(--oroza-border-soft);
border-radius: var(--oroza-radius-md);
overflow: hidden;
text-align: center;
transition:
transform var(--oroza-mid),
box-shadow var(--oroza-mid),
border-color var(--oroza-mid);
cursor: pointer;
}
.oroza-class-card:hover {
transform: translateY(-4px);
box-shadow: var(--oroza-shadow-md);
border-color: var(--oroza-gold-border);
}
.oroza-class-card:hover .class-header {
border-bottom-color: var(--oroza-gold);
}
.class-header {
padding: 14px 12px;
background: linear-gradient(180deg, #24384b 0%, #182634 100%);
border-bottom: 2px solid transparent;
transition: border-color var(--oroza-mid);
}
.class-header img {
width: 64px;
height: 64px;
object-fit: contain;
image-rendering: pixelated;
filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.class-body {
padding: 12px;
}
.class-name {
font-size: 14px;
font-weight: 800;
color: var(--oroza-primary-deep);
margin-bottom: 4px;
}
.class-desc {
font-size: 12px;
color: var(--oroza-text-soft);
line-height: 1.55;
}
.class-tier {
display: inline-block;
margin-top: 8px;
padding: 2px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
background: var(--oroza-gold-soft);
color: var(--oroza-gold-deep);
border: 1px solid var(--oroza-gold-border);
}
/* =========================================================
10) MAPA / MINIMAP
========================================================= */
.oroza-map-frame {
position: relative;
border: 1px solid var(--oroza-border);
border-radius: var(--oroza-radius-md);
overflow: hidden;
box-shadow: var(--oroza-shadow-sm);
background: #d4c9b0;
margin: 16px 0;
}
.oroza-map-frame img {
display: block;
width: 100%;
height: auto;
image-rendering: pixelated;
}
.oroza-map-legend {
padding: 10px 14px;
background: linear-gradient(180deg, #fffaf1 0%, #f5ead0 100%);
border-top: 1px solid var(--oroza-gold-border);
display: flex;
gap: 16px;
flex-wrap: wrap;
font-size: 12.5px;
}
.oroza-map-legend-item {
display: flex;
align-items: center;
gap: 6px;
color: var(--oroza-text-body);
}
.map-dot {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
.map-dot-spawn { background: #c04040; border: 2px solid #8a2020; }
.map-dot-npc { background: #3060b0; border: 2px solid #1a3a80; }
.map-dot-warp { background: #208040; border: 2px solid #105020; }
.map-dot-shop { background: #a07010; border: 2px solid #705008; }
.map-dot-quest { background: #8030a0; border: 2px solid #501870; }
/* =========================================================
11) BREADCRUMB / MIGAS DE PAN
========================================================= */
.oroza-breadcrumb {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
padding: 10px 0;
margin-bottom: 16px;
font-size: 13.5px;
}
.oroza-breadcrumb a {
color: var(--oroza-text-soft) !important;
font-weight: 600;
}
.oroza-breadcrumb a:hover {
color: var(--oroza-gold-deep) !important;
}
.oroza-breadcrumb .sep {
color: var(--oroza-border-strong);
font-size: 11px;
user-select: none;
}
.oroza-breadcrumb .current {
color: var(--oroza-primary-deep);
font-weight: 700;
}
/* =========================================================
12) CAJA DE NAVEGACION (NavBox)
========================================================= */
.oroza-navbox {
margin: 28px 0 20px;
background: linear-gradient(180deg, #fffdf9 0%, #f8f2e8 100%);
border: 1px solid var(--oroza-border);
border-radius: var(--oroza-radius-md);
overflow: hidden;
box-shadow: var(--oroza-shadow-xs);
font-size: 13.5px;
}
.oroza-navbox-title {
padding: 12px 16px;
background: linear-gradient(180deg, #24384b 0%, #182634 100%);
color: #f6dda0;
font-size: 13px;
font-weight: 800;
border-bottom: 2px solid var(--oroza-gold);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.oroza-navbox-body {
padding: 14px 16px;
display: flex;
flex-wrap: wrap;
gap: 18px;
}
.oroza-navbox-group {
min-width: 140px;
flex: 1;
}
.navbox-group-title {
font-size: 12px;
font-weight: 800;
color: var(--oroza-text-soft);
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 6px;
padding-bottom: 4px;
border-bottom: 1px solid var(--oroza-border-soft);
}
.oroza-navbox-body a {
display: inline-block;
margin: 2px 4px 2px 0;
padding: 3px 9px;
background: var(--oroza-surface-soft);
border: 1px solid var(--oroza-border-soft);
border-radius: var(--oroza-radius-pill);
color: var(--oroza-text-body) !important;
font-size: 13px;
font-weight: 600;
transition:
background var(--oroza-fast),
border-color var(--oroza-fast),
color var(--oroza-fast);
}
.oroza-navbox-body a:hover {
background: var(--oroza-gold-soft);
border-color: var(--oroza-gold-border);
color: var(--oroza-gold-deep) !important;
}
/* =========================================================
13) PAGINA DE CATEGORIA
========================================================= */
.oroza-category-header {
margin-bottom: 20px;
padding: 20px 24px;
background: linear-gradient(180deg, #fffdf9 0%, #f8f2e8 100%);
border: 1px solid var(--oroza-border);
border-radius: var(--oroza-radius-md);
border-left: 4px solid var(--oroza-gold);
box-shadow: var(--oroza-shadow-xs);
}
.oroza-category-title {
font-size: 22px;
font-weight: 800;
color: var(--oroza-primary-deep);
margin-bottom: 6px;
}
.oroza-category-desc {
font-size: 14.5px;
color: var(--oroza-text-body);
line-height: 1.75;
}
.oroza-category-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
margin: 16px 0;
}
.oroza-category-link {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
background: linear-gradient(180deg, #fffdf9 0%, #faf5ec 100%);
border: 1px solid var(--oroza-border-soft);
border-radius: var(--oroza-radius-sm);
color: var(--oroza-text) !important;
font-weight: 700;
font-size: 14px;
text-decoration: none !important;
transition:
transform var(--oroza-fast),
box-shadow var(--oroza-fast),
border-color var(--oroza-fast),
background var(--oroza-fast);
}
.oroza-category-link:hover {
transform: translateX(3px);
box-shadow: var(--oroza-shadow-xs);
border-color: var(--oroza-gold-border);
background: linear-gradient(180deg, #fffdfa 0%, #fdf5e6 100%);
color: var(--oroza-primary-deep) !important;
}
.oroza-category-link img {
width: 30px;
height: 30px;
object-fit: contain;
image-rendering: pixelated;
}
/* =========================================================
14) SEARCH HIGHLIGHT
========================================================= */
.searchresult .searchmatch,
.oroza-highlight {
background: rgba(200,161,74,.22);
color: var(--oroza-primary-deep);
padding: 0 3px;
border-radius: 3px;
font-weight: 700;
}
/* =========================================================
15) TABLA DE COMPARACION DE ITEMS
========================================================= */
.oroza-compare-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--oroza-border);
border-radius: var(--oroza-radius-sm);
overflow: hidden;
font-size: 14px;
margin: 14px 0;
}
.oroza-compare-table thead th {
padding: 13px 14px;
background: linear-gradient(180deg, #f7eed9 0%, #ecd7a0 100%);
color: #53401a;
font-weight: 800;
font-size: 13.5px;
text-align: center;
border-bottom: 1px solid rgba(200,161,74,.30);
border-right: 1px solid var(--oroza-border-soft);
}
.oroza-compare-table thead th:first-child {
text-align: left;
background: linear-gradient(180deg, #f0e8d6 0%, #e4d4b4 100%);
}
.oroza-compare-table tbody tr {
border-bottom: 1px solid var(--oroza-border-soft);
transition: background var(--oroza-fast);
}
.oroza-compare-table tbody tr:hover {
background: rgba(200,161,74,.04);
}
.oroza-compare-table td {
padding: 10px 14px;
text-align: center;
color: var(--oroza-text-body);
border-right: 1px solid var(--oroza-border-soft);
}
.oroza-compare-table td:first-child {
text-align: left;
font-weight: 700;
color: var(--oroza-text);
background: rgba(248,239,217,.4);
}
.compare-better { color: #208040; font-weight: 800; }
.compare-worse { color: #9a2020; }
.compare-equal { color: var(--oroza-text-muted); }
/* =========================================================
16) SPOILER / COLLAPSE
========================================================= */
.oroza-spoiler {
margin: 14px 0;
border: 1px solid var(--oroza-border);
border-radius: var(--oroza-radius-sm);
overflow: hidden;
}
.oroza-spoiler-toggle {
width: 100%;
padding: 12px 16px;
background: linear-gradient(180deg, #f8f0dd 0%, #efdfb0 100%);
border: none;
border-left: 4px solid var(--oroza-gold);
color: var(--oroza-primary);
font-size: 14px;
font-weight: 800;
text-align: left;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: background var(--oroza-fast);
}
.oroza-spoiler-toggle:hover {
background: linear-gradient(180deg, #fbf3e4 0%, #f3e4c0 100%);
}
.oroza-spoiler-toggle::after {
content: "▼";
font-size: 10px;
transition: transform var(--oroza-fast);
}
.oroza-spoiler-toggle.open::after {
transform: rotate(180deg);
}
.oroza-spoiler-body {
display: none;
padding: 16px;
background: var(--oroza-surface);
color: var(--oroza-text-body);
font-size: 14.5px;
line-height: 1.8;
border-top: 1px solid var(--oroza-border-soft);
animation: tabFadeIn .2s ease;
}
.oroza-spoiler-body.open {
display: block;
}
/* =========================================================
17) FOOTER DE PAGINA
========================================================= */
.oroza-page-footer {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid var(--oroza-border-soft);
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: space-between;
font-size: 13px;
color: var(--oroza-text-muted);
}
.oroza-page-footer a {
color: var(--oroza-text-soft) !important;
font-weight: 600;
}
.oroza-page-footer a:hover {
color: var(--oroza-gold-deep) !important;
}
.oroza-last-edited {
font-size: 12.5px;
color: var(--oroza-text-muted);
font-style: italic;
}
/* =========================================================
18) JS — SCRIPTS DE APOYO
Pegar en common.js o al final del skin
========================================================= */
/*
// Tabs
document.querySelectorAll('.oroza-tab-btn').forEach(btn => {
btn.addEventListener('click', () => {
const tabs = btn.closest('.oroza-tabs');
tabs.querySelectorAll('.oroza-tab-btn').forEach(b => b.classList.remove('active'));
tabs.querySelectorAll('.oroza-tab-panel').forEach(p => p.classList.remove('active'));
btn.classList.add('active');
tabs.querySelector('#' + btn.dataset.tab).classList.add('active');
});
});
// Spoilers
document.querySelectorAll('.oroza-spoiler-toggle').forEach(toggle => {
toggle.addEventListener('click', () => {
toggle.classList.toggle('open');
toggle.nextElementSibling.classList.toggle('open');
});
});
// Animate stat bars on load
const observer = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.querySelectorAll('.oroza-stat-bar-fill').forEach(bar => {
bar.style.width = bar.dataset.value + '%';
});
}
});
}, { threshold: 0.2 });
document.querySelectorAll('.oroza-stat-block').forEach(b => observer.observe(b));
*/