Diferencia entre revisiones de «MediaWiki:Common.css»

Revisión del 01:14 4 abr 2026

/* =========================================
   VARIABLES GLOBALES (Identidad Oroza)
   ========================================= */
:root {
  /* Paleta de colores */
  --bg-body: #f4f6f9; 
  --bg-content: #ffffff;
  --text-main: #334155; 
  --text-muted: #64748b;
  
  --primary: #2b4a6d; /* Azul principal */
  --primary-dark: #1e324f;
  --accent: #ffb400; /* Dorado Oroza */
  --accent-light: #fff8e6; /* Dorado muy suave para fondos */
  --accent-hover: #e6a200;
  
  --link: #1e70bf;
  --link-hover: #155594;
  --border-color: #e2e8f0;

  /* Estados */
  --info-bg: #eff6ff;
  --info-border: #3b82f6;
  --warning-bg: var(--accent-light);
  --warning-border: var(--accent);
  --success-bg: #f0fdf4;
  --success-border: #22c55e;

  /* Bordes Suaves (Modernos y amigables) */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* Sombras Modernas */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.04);
  --shadow-md: 0 6px 12px rgba(0,0,0,0.06);
  --shadow-float: 0 10px 25px rgba(43, 74, 109, 0.1); /* Sombra con un ligero tono azul */

  /* Densidad Media */
  --pad-sm: 12px;
  --pad-md: 20px;
  --pad-lg: 32px;

  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* === Tipografía y fondo general === */
body {
  background-color: var(--bg-body);
  color: var(--text-main);
  line-height: 1.6;
}

/* === Contenido principal === */
#content {
  background-color: var(--bg-content);
  padding: var(--pad-lg);
  margin: 30px auto;
  border-radius: var(--radius-lg); /* Borde bien redondeado */
  box-shadow: var(--shadow-float);
  max-width: 1200px;
}

/* === Enlaces === */
a {
  color: var(--link);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--accent); /* Al pasar el mouse, brillan en dorado */
  text-decoration: none;
}

/* === Encabezados con detalles dorados === */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--primary);
  margin-top: 1.8em;
  margin-bottom: 0.8em;
  line-height: 1.3;
  border-bottom: none; 
  background: none !important;
}

h1.firstHeading, h1 { 
  font-size: 2.5rem; 
  margin-top: 0; 
  position: relative;
  padding-bottom: 10px;
}

/* Línea dorada decorativa debajo del título principal */
h1.firstHeading::after, h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background-color: var(--accent);
  border-radius: 4px;
}

h2 { 
  font-size: 1.8rem; 
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Punto dorado al lado de los H2 para un toque premium */
h2::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--accent);
  border-radius: 50%;
}

/* === Tabla de contenido (TOC) === */
#toc {
  background-color: #fafafa;
  border: 1px solid var(--border-color);
  padding: var(--pad-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: inline-block;
  min-width: 250px;
}
#toc h2 {
  font-size: 1.2rem;
  margin-top: 0;
}
#toc h2::before { display: none; } /* Quitamos el punto dorado aquí */

/* === Botones === */
.button-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary);
  color: white !important;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
  border: 2px solid transparent;
}
.button-icon:hover {
  background: var(--primary-dark);
  border-color: var(--accent); /* Borde dorado al pasar el mouse */
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* === Cajas informativas === */
.box-info, .box-warning, .box-tip {
  padding: var(--pad-md);
  border-radius: var(--radius-md);
  margin: 24px 0;
  font-size: 0.95rem;
  box-shadow: var(--shadow-sm);
}
.box-info {
  background: var(--info-bg);
  border-left: 5px solid var(--info-border);
}
.box-warning {
  background: var(--warning-bg);
  border-left: 5px solid var(--warning-border);
  color: #78350f; 
}
.box-tip {
  background: var(--success-bg);
  border-left: 5px solid var(--success-border);
}

/* === Navbar Horizontal === */
.oroza-navbar {
  background: var(--primary);
  padding: 0 var(--pad-lg);
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  font-weight: 600;
  border-bottom: 4px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  margin: 20px auto;
  max-width: 1200px;
}
.oroza-navbar a {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}
.oroza-navbar a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--accent) !important;
}

/* === Tablas de Datos (Densidad Media) === */
.oroza-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 24px 0;
  font-size: 0.95rem;
  background-color: var(--bg-content);
  border-radius: var(--radius-md);
  overflow: hidden; /* Esto asegura que los bordes redondeados se apliquen */
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}
.oroza-table thead {
  background-color: var(--bg-body);
}
.oroza-table th {
  color: var(--primary);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 16px var(--pad-md); /* Densidad media */
  border-bottom: 2px solid var(--border-color);
}
.oroza-table td {
  padding: 14px var(--pad-md); /* Densidad media */
  border-bottom: 1px solid var(--border-color);
}
.oroza-table tbody tr:last-child td {
  border-bottom: none;
}
.oroza-table tbody tr:hover {
  background-color: var(--accent-light); /* Hover sutil en dorado */
}

/* Clases útiles */
.oroza-table .highlight { color: var(--accent-hover); font-weight: bold; }
.oroza-table .zeny { color: var(--success-border); font-weight: 600; }

/* === Blockquotes === */
blockquote {
  margin: 24px 0;
  padding: 20px var(--pad-lg);
  font-style: italic;
  color: var(--text-main);
  background-color: var(--accent-light);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  position: relative;
}

/* === Badges (Etiquetas) === */
.badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 20px; /* Muy redondeado tipo "píldora" */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge-gold { background: var(--accent-light); color: #92400e; border: 1px solid var(--accent); }
.badge-primary { background: #e0f2fe; color: #0369a1; border: 1px solid #7dd3fc; }

/* === Imágenes === */
.zoom-img {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--radius-sm);
}
.zoom-img:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

img.round-fade {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
img.round-fade:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
  opacity: 1;
}

/* === Responsive === */
@media screen and (max-width: 768px) {
  #content { padding: var(--pad-md); }
  .oroza-navbar {
    height: auto;
    flex-direction: column;
    padding: var(--pad-md);
    gap: 10px;
  }
}