Diferencia entre revisiones de «MediaWiki:Common.css»
Ir a la navegación
Ir a la búsqueda
Sin resumen de edición Etiqueta: Revertido |
Sin resumen de edición Etiqueta: Revertido |
||
| Línea 1: | Línea 1: | ||
/* ========================================================= | /* ========================================================= | ||
OROZA WIKI - | 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 { | :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; | |||
} | |||
--oroza- | /* ========================================================= | ||
--oroza- | 1) INFOBOX UNIVERSAL | ||
--oroza- | 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; | ||
--oroza-gold | 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 { | ||
--oroza- | 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; | ||
--oroza- | 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- | .oroza-infobox table tr { | ||
--oroza- | 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 { | |||
--oroza-font- | padding: 8px 12px; | ||
--oroza- | 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 { | |||
--oroza- | 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 */ | |||
background: | .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: | border-radius: var(--oroza-radius-sm); | ||
box-shadow: | 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- | |||
} | } | ||
.oroza- | .oroza-drop-table tbody tr:hover { | ||
background: #faf5ec; | |||
} | } | ||
.oroza- | .oroza-drop-table td { | ||
padding: 10px 14px; | |||
color: var(--oroza-text-body); | |||
padding: 10px; | vertical-align: middle; | ||
color: var(--oroza-text); | |||
} | } | ||
.oroza-drop-table .drop-icon { | |||
width: 36px; | |||
text-align: center; | |||
padding: 6px 8px; | |||
} | |||
.oroza-drop-table .drop-icon img { | |||
width: 28px; | |||
height: 28px; | |||
.oroza- | object-fit: contain; | ||
image-rendering: pixelated; | |||
} | } | ||
.oroza- | .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- | |||
} | } | ||
.oroza- | .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; | |||
border-radius: | |||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
3) BADGES DE RAREZA, ELEMENTO, RAZA Y CLASE | |||
========================================================= */ | ========================================================= */ | ||
.oroza- | .oroza-badge-rarity, | ||
padding: | .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; | 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; | position: relative; | ||
} | } | ||
.oroza-stat-bar-fill { | |||
content: | height: 100%; | ||
border-radius: 999px; | |||
transition: width .8s cubic-bezier(.4,0,.2,1); | |||
position: relative; | |||
} | |||
.oroza-stat-bar-fill::after { | |||
content: ''; | |||
position: absolute; | position: absolute; | ||
left: 0; | top: 0; left: 0; right: 0; | ||
height: 40%; | |||
background: rgba(255,255,255,.25); | |||
border-radius: 999px; | border-radius: 999px; | ||
} | } | ||
.stat-bar-hp { background: linear-gradient(90deg, #c04040, #e05050); } | |||
.stat-bar-sp { background: linear-gradient(90deg, #3060b0, #4080d0); } | |||
font-size: | .stat-bar-str { background: linear-gradient(90deg, #b04820, #d06030); } | ||
color: var(--oroza- | .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); | 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); | |||
color: var(--oroza- | |||
} | } | ||
.oroza-tab-btn.active { | |||
color: var(--oroza-primary-deep); | |||
color: var(--oroza- | 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; | |||
.oroza- | border-radius: 10px; | ||
border: 1px solid var(--oroza-border); | |||
background: var(--oroza-surface-soft); | |||
border: 1px solid var(--oroza-border | display: flex; | ||
align-items: center; | |||
justify-content: center; | |||
flex-shrink: 0; | |||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
.oroza- | .oroza-skill-icon img { | ||
width: 36px; | |||
height: 36px; | |||
object-fit: contain; | |||
image-rendering: pixelated; | |||
} | |||
font-size: | .oroza-skill-info .skill-name { | ||
font-size: 13.5px; | |||
font-weight: 800; | font-weight: 800; | ||
color: var(--oroza-primary); | |||
margin-bottom: 3px; | |||
} | } | ||
.oroza- | .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); | color: var(--oroza-text-body); | ||
line-height: 1.6; | |||
line-height: 1. | |||
} | } | ||
/* 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- | .oroza-quest-list { | ||
list-style: none; | |||
padding: 0; | |||
margin: 16px 0; | |||
} | } | ||
.oroza- | .oroza-quest-item { | ||
padding: 14px | display: flex; | ||
background: linear-gradient(180deg, # | align-items: flex-start; | ||
border | gap: 14px; | ||
border- | 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- | .oroza-quest-item:hover { | ||
transform: translateX(3px); | |||
box-shadow: var(--oroza-shadow-xs); | |||
} | } | ||
.oroza-quest-num { | |||
width: 32px; | |||
height: 32px; | |||
border-radius: 50%; | |||
.oroza- | background: linear-gradient(180deg, var(--oroza-primary-2) 0%, var(--oroza-primary-deep) 100%); | ||
width: | color: #f6dda0; | ||
font-size: 13px; | |||
border- | font-weight: 800; | ||
display: flex; | |||
background: var(--oroza- | align-items: center; | ||
justify-content: center; | |||
flex-shrink: 0; | |||
border: 1px solid rgba(246,221,160,.2); | |||
} | } | ||
.oroza- | .oroza-quest-content .quest-title { | ||
font-size: 14.5px; | |||
font-size: | |||
font-weight: 800; | font-weight: 800; | ||
color: var(--oroza-primary); | |||
margin-bottom: 4px; | |||
} | } | ||
.oroza- | .oroza-quest-content .quest-desc { | ||
font-size: 13.5px; | |||
color: var(--oroza-text-body); | color: var(--oroza-text-body); | ||
line-height: 1.65; | |||
} | } | ||
.oroza- | .oroza-quest-content .quest-reward { | ||
margin-top: 6px; | |||
font-size: 12.5px; | |||
color: var(--oroza-text-soft); | |||
} | } | ||
.oroza- | .oroza-quest-content .quest-reward strong { | ||
color: var(--oroza-gold-deep); | |||
color: var(--oroza- | |||
} | } | ||
. | /* 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 | |||
========================================================= */ | ========================================================= */ | ||
table | .oroza-level-table { | ||
width: 100%; | width: 100%; | ||
border-collapse: separate; | border-collapse: separate; | ||
border-spacing: 0; | border-spacing: 0; | ||
border: 1px solid var(--oroza-border); | |||
border: 1px solid var(--oroza-border) | |||
border-radius: var(--oroza-radius-sm); | border-radius: var(--oroza-radius-sm); | ||
overflow: hidden; | overflow: hidden; | ||
font-size: 14px; | |||
font-size: | margin: 14px 0; | ||
} | } | ||
.oroza-level-table thead th { | |||
table | padding: 11px 14px; | ||
padding: 14px | background: linear-gradient(180deg, #24384b 0%, #182634 100%); | ||
background: linear-gradient(180deg, | color: #f6dda0; | ||
color: # | font-size: 12.5px; | ||
font-size: | |||
font-weight: 800; | font-weight: 800; | ||
text-align: center; | text-align: center; | ||
border- | border-bottom: 2px solid var(--oroza-gold); | ||
} | } | ||
.oroza-level-table tbody tr { | |||
table | 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); | |||
background: linear-gradient( | |||
border- | |||
} | } | ||
.oroza-level-table td { | |||
padding: 8px 14px; | |||
text-align: center; | 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); | |||
color: var(--oroza- | 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); | |||
border: | |||
} | } | ||
. | .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: block; | display: inline-block; | ||
margin- | margin-top: 8px; | ||
padding: 2px 10px; | |||
border-radius: 999px; | |||
font-size: 11px; | |||
font-weight: 800; | 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 { | |||
.oroza- | display: block; | ||
display: | width: 100%; | ||
height: auto; | |||
image-rendering: pixelated; | |||
} | } | ||
.oroza-map-legend { | |||
padding: 10px 14px; | |||
padding: | background: linear-gradient(180deg, #fffaf1 0%, #f5ead0 100%); | ||
background: # | border-top: 1px solid var(--oroza-gold-border); | ||
border: 1px solid | display: flex; | ||
gap: 16px; | |||
flex-wrap: wrap; | |||
font-size: 12.5px; | |||
} | } | ||
.oroza-map-legend-item { | |||
display: flex; | |||
.oroza- | |||
display: | |||
align-items: center; | align-items: center; | ||
gap: 6px; | |||
gap: | color: var(--oroza-text-body); | ||
color | |||
} | } | ||
. | .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- | .oroza-breadcrumb { | ||
display: | display: flex; | ||
align-items: center; | align-items: center; | ||
gap: 6px; | |||
flex-wrap: wrap; | |||
padding: 10px 0; | |||
margin-bottom: 16px; | |||
font-size: 13.5px; | |||
font-size: | |||
} | } | ||
.oroza- | .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) | |||
border- | ========================================================= */ | ||
.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- | .oroza-navbox-body { | ||
padding: 14px 16px; | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 18px; | |||
} | } | ||
.oroza-navbox-group { | |||
min-width: 140px; | |||
flex: 1; | |||
.oroza- | |||
} | } | ||
. | .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- | .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- | .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- | .oroza-category-header { | ||
background: linear-gradient(180deg, # | margin-bottom: 20px; | ||
padding: 20px 24px; | |||
background: linear-gradient(180deg, #fffdf9 0%, #f8f2e8 100%); | |||
border: 1px solid var(--oroza-border); | border: 1px solid var(--oroza-border); | ||
border-radius: var(--oroza-radius-md); | border-radius: var(--oroza-radius-md); | ||
box-shadow: var(--oroza-shadow- | border-left: 4px solid var(--oroza-gold); | ||
box-shadow: var(--oroza-shadow-xs); | |||
} | } | ||
.oroza- | .oroza-category-title { | ||
font-size: 22px; | |||
font-size: | |||
font-weight: 800; | font-weight: 800; | ||
color: var(--oroza-primary-deep); | |||
margin-bottom: 6px; | |||
} | } | ||
.oroza- | .oroza-category-desc { | ||
font-size: 14.5px; | |||
color: var(--oroza-text-body); | |||
line-height: 1.75; | |||
} | } | ||
.oroza- | .oroza-category-grid { | ||
margin: | display: grid; | ||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |||
gap: 12px; | |||
margin: 16px 0; | |||
} | } | ||
.oroza- | .oroza-category-link { | ||
display: | display: flex; | ||
padding: | align-items: center; | ||
border-radius: | gap: 10px; | ||
color: var(--oroza-text); | 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; | font-size: 14px; | ||
text-decoration: none !important; | |||
transition: | transition: | ||
transform var(--oroza-fast), | transform var(--oroza-fast), | ||
box-shadow var(--oroza-fast); | box-shadow var(--oroza-fast), | ||
border-color var(--oroza-fast), | |||
background var(--oroza-fast); | |||
} | } | ||
.oroza- | .oroza-category-link:hover { | ||
transform: translateX(3px); | 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- | .oroza-category-link img { | ||
width: 30px; | |||
height: 30px; | |||
object-fit: contain; | |||
image-rendering: pixelated; | |||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
14) SEARCH HIGHLIGHT | |||
========================================================= */ | ========================================================= */ | ||
.oroza- | .searchresult .searchmatch, | ||
background: rgba( | .oroza-highlight { | ||
background: rgba(200,161,74,.22); | |||
color: var(--oroza-primary-deep); | |||
padding: 0 3px; | |||
border- | 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- | .oroza-compare-table thead th { | ||
padding: 13px 14px; | |||
background: linear-gradient(180deg, #f7eed9 0%, #ecd7a0 100%); | |||
color: #53401a; | |||
font-weight: 800; | font-weight: 800; | ||
text- | 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- | .oroza-compare-table thead th:first-child { | ||
text-align: left; | |||
background: linear-gradient(180deg, #f0e8d6 0%, #e4d4b4 100%); | |||
} | } | ||
.oroza- | .oroza-compare-table tbody tr { | ||
border-bottom: 1px solid var(--oroza-border-soft); | |||
transition: background var(--oroza-fast); | |||
} | } | ||
.oroza- | .oroza-compare-table tbody tr:hover { | ||
background: rgba(200,161,74,.04); | |||
} | } | ||
.oroza- | .oroza-compare-table td { | ||
color: var(--oroza- | padding: 10px 14px; | ||
text-align: center; | |||
color: var(--oroza-text-body); | |||
border-right: 1px solid var(--oroza-border-soft); | |||
} | } | ||
.oroza- | .oroza-compare-table td:first-child { | ||
text-align: left; | |||
font-weight: 700; | |||
color: var(--oroza-text); | |||
background: rgba(248,239,217,.4); | |||
background: | |||
} | } | ||
.compare-better { color: #208040; font-weight: 800; } | |||
.compare-worse { color: #9a2020; } | |||
.compare-equal { color: var(--oroza-text-muted); } | |||
/* ========================================================= | /* ========================================================= | ||
16) SPOILER / COLLAPSE | |||
========================================================= */ | ========================================================= */ | ||
.oroza- | .oroza-spoiler { | ||
margin: 14px 0; | |||
border: 1px solid var(--oroza-border); | border: 1px solid var(--oroza-border); | ||
border-radius: var(--oroza-radius-sm); | border-radius: var(--oroza-radius-sm); | ||
overflow: hidden; | |||
} | } | ||
.oroza- | .oroza-spoiler-toggle { | ||
width: 100%; | width: 100%; | ||
padding: 12px 16px; | |||
background: linear-gradient(180deg, #f8f0dd 0%, #efdfb0 100%); | |||
background: linear-gradient( | |||
border: none; | 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- | .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- | .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: | 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)); | |||
*/ | |||
} | |||
Revisión del 02:07 4 abr 2026
/* =========================================================
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));
*/