|
|
| Línea 1: |
Línea 1: |
| /* ========================================================= | | /* ========================================================= |
| OROZA WIKI - ESTILOS GENERALES MEJORADOS | | OROZA RO UNIVERSAL WIKI SEARCH |
| --------------------------------------------------------- | | --------------------------------------------------------- |
| Objetivo:
| | - Searches sidebar links by category |
| - Mantener tu estilo visual limpio y profesional | | - Searches titles and page content through the MediaWiki API |
| - Mejorar el comportamiento en celular | | - Responsive on desktop, tablet, and mobile |
| - Evitar que navbar, tablas e imágenes rompan el diseño | |
| - Hacer el CSS más fácil de entender y mantener
| |
| ========================================================= */ | | ========================================================= */ |
|
| |
|
| | | .oroza-global-search { |
| /* =========================================================
| | position: relative; |
| 1) BASE GENERAL DEL SITIO
| | z-index: 80; |
| ---------------------------------------------------------
| | width: 100%; |
| Estilos globales del body, tipografía y color base
| | margin-top: 12px; |
| ========================================================= */
| | font-family: "Segoe UI", Tahoma, Arial, sans-serif; |
| body {
| |
| background-color: #f2f2f2; | |
| font-family: 'Segoe UI', 'Helvetica Neue', sans-serif; | |
| color: #333;
| |
| overflow-x: hidden; /* Evita scroll horizontal accidental */
| |
| } | | } |
|
| |
|
| /* Hace que imágenes y elementos no se salgan del ancho de pantalla */
| | .oroza-global-search-form { |
| html,
| | position: relative; |
| body {
| | width: min(860px, 100%); |
| max-width: 100%;
| | margin: 0 auto; |
| overflow-x: hidden;
| |
| }
| |
| | |
| | |
| img {
| |
| max-width: 100%;
| |
| height: auto;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 2) CONTENIDO PRINCIPAL
| |
| ---------------------------------------------------------
| |
| Caja principal blanca donde se ve el contenido de la wiki
| |
| ========================================================= */
| |
| #content {
| |
| background-color: #fff; | |
| padding: 30px; | |
| margin: 20px auto;
| |
| border-radius: 12px;
| |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
| |
| max-width: 1200px;
| |
| }
| |
| | |
| /* =========================================================
| |
| 3) TITULO PRINCIPAL DE PAGINA
| |
| ---------------------------------------------------------
| |
| Controla el heading principal de MediaWiki
| |
| ========================================================= */
| |
| .firstHeading {
| |
| font-size: 2.2rem;
| |
| font-weight: bold;
| |
| color: #2b4a6d;
| |
| margin-bottom: 20px; | |
| line-height: 1.2;
| |
| text-align: center;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 4) TABLA DE CONTENIDO
| |
| ---------------------------------------------------------
| |
| Caja del índice / TOC
| |
| ========================================================= */
| |
| #toc {
| |
| background-color: #eef4ff;
| |
| border: 1px solid #cddaf1;
| |
| padding: 10px;
| |
| border-radius: 8px;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 5) ENLACES
| |
| ---------------------------------------------------------
| |
| Estilo general para links
| |
| ========================================================= */
| |
| a {
| |
| color: #1e70bf;
| |
| text-decoration: none;
| |
| }
| |
| | |
| a:hover {
| |
| text-decoration: underline;
| |
| } | | } |
|
| |
|
| .mw-body a { | | .oroza-global-search-field { |
| color: #1e70bf;
| |
| font-weight: 500;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 6) ENCABEZADOS JERARQUICOS
| |
| ---------------------------------------------------------
| |
| h1 a h6 centrados, elegantes y sin subrayado
| |
| ========================================================= */
| |
| h1,
| |
| h2,
| |
| h3,
| |
| h4,
| |
| h5,
| |
| h6 {
| |
| font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
| |
| font-weight: 700;
| |
| text-align: center;
| |
| color: #2b4a6d;
| |
| margin-top: 40px;
| |
| margin-bottom: 30px;
| |
| line-height: 1.3;
| |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.08);
| |
| border-bottom: none;
| |
| background: none !important;
| |
| }
| |
| | |
| /* Tamaños progresivos de títulos */
| |
| h1 {
| |
| font-size: 2.8rem;
| |
| }
| |
| | |
| h2 {
| |
| font-size: 2.5rem;
| |
| }
| |
| | |
| h3 {
| |
| font-size: 2.3rem;
| |
| }
| |
| | |
| h4 {
| |
| font-size: 1.6rem;
| |
| }
| |
| | |
| h5 {
| |
| font-size: 1.3rem;
| |
| }
| |
| | |
| h6 {
| |
| font-size: 1.1rem;
| |
| color: #444;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 7) BOTONES CON ICONO
| |
| ---------------------------------------------------------
| |
| Útiles para enlaces visuales tipo botón
| |
| ========================================================= */
| |
| .button-icon {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| gap: 8px;
| |
| background: #2b4a6d;
| |
| color: white;
| |
| padding: 8px 12px;
| |
| border-radius: 8px;
| |
| text-decoration: none;
| |
| font-weight: 600;
| |
| transition: background 0.2s ease;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| .button-icon:hover {
| |
| background: #1e324f;
| |
| }
| |
| | |
| .button-icon::before {
| |
| content: '??';
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 8) CAJAS INFORMATIVAS
| |
| ---------------------------------------------------------
| |
| Bloques para avisos, recomendaciones y alertas
| |
| ========================================================= */
| |
| .box-info {
| |
| background: #eef4ff;
| |
| border-left: 5px solid #1e70bf;
| |
| padding: 15px;
| |
| border-radius: 8px;
| |
| margin: 20px 0;
| |
| }
| |
| | |
| .box-warning {
| |
| background: #fff4e5;
| |
| border-left: 5px solid #ffa500;
| |
| padding: 15px;
| |
| border-radius: 8px;
| |
| margin: 20px 0;
| |
| }
| |
| | |
| .box-tip {
| |
| background: #eaffea;
| |
| border-left: 5px solid #28a745;
| |
| padding: 15px;
| |
| border-radius: 8px;
| |
| margin: 20px 0;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 9) LISTAS
| |
| ---------------------------------------------------------
| |
| Espaciado para ul y ol
| |
| ========================================================= */
| |
| ul,
| |
| ol {
| |
| padding-left: 40px;
| |
| margin-bottom: 20px;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 10) NAVBAR HORIZONTAL
| |
| ---------------------------------------------------------
| |
| Menú superior personalizado
| |
| Mejorado para que no se rompa tan fácil en pantallas chicas
| |
| ========================================================= */
| |
| .oroza-navbar {
| |
| background: #2b3e50;
| |
| padding: 15px 25px;
| |
| display: flex;
| |
| flex-wrap: wrap; /* Permite acomodar links si no caben */
| |
| gap: 18px 30px;
| |
| justify-content: center;
| |
| align-items: center;
| |
| font-weight: bold;
| |
| border-bottom: 3px solid #ffb400;
| |
| border-radius: 12px;
| |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
| |
| margin: 20px auto;
| |
| max-width: 1200px;
| |
| position: relative; | | position: relative; |
| box-sizing: border-box;
| |
| }
| |
|
| |
| .oroza-navbar a {
| |
| color: white !important;
| |
| text-decoration: none;
| |
| font-size: 16px;
| |
| line-height: 1.2;
| |
| white-space: nowrap; /* Evita que un link se parta en dos renglones */
| |
| }
| |
|
| |
| .oroza-navbar a:hover {
| |
| text-decoration: underline;
| |
| color: #ffcc33 !important;
| |
| }
| |
|
| |
| /* Logo en desktop: se mantiene posicionado a la izquierda */
| |
| .oroza-navbar-logo {
| |
| position: absolute;
| |
| left: 25px;
| |
| display: flex; | | display: flex; |
| align-items: center; | | align-items: center; |
| }
| |
|
| |
| .oroza-navbar-logo img {
| |
| width: 80px;
| |
| height: auto;
| |
| filter: drop-shadow(0 0 5px white);
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 11) SIDEBAR LATERAL
| |
| ---------------------------------------------------------
| |
| Menú lateral de navegación
| |
| ========================================================= */
| |
| .oroza-sidebar {
| |
| background: #ffffff;
| |
| border: 1px solid #ddd;
| |
| padding: 15px 20px;
| |
| border-radius: 10px;
| |
| width: 280px;
| |
| font-size: 14px;
| |
| box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
| |
| margin-bottom: 20px;
| |
| box-sizing: border-box;
| |
| }
| |
|
| |
| /* Título de cada sección del menú lateral */
| |
| .oroza-sidebar .menu-title {
| |
| font-weight: bold;
| |
| color: #2b4a6d;
| |
| font-size: 17px;
| |
| margin: 20px 0 12px;
| |
| border-left: 4px solid #ffb400;
| |
| padding-left: 10px;
| |
| }
| |
|
| |
| /* Lista interna del sidebar */
| |
| .oroza-sidebar ul {
| |
| list-style: none;
| |
| padding-left: 0;
| |
| margin: 0;
| |
| }
| |
|
| |
| .oroza-sidebar li {
| |
| margin: 6px 0;
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 8px;
| |
| }
| |
|
| |
| .oroza-sidebar li::before {
| |
| display: inline-block;
| |
| margin-right: 3px;
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 12) TABLAS PERSONALIZADAS
| |
| ---------------------------------------------------------
| |
| Mejoradas para escritorio y con scroll horizontal en móvil
| |
| ========================================================= */
| |
| .oroza-table {
| |
| width: 100%; | | width: 100%; |
| border-collapse: collapse; | | min-height: 58px; |
| margin: 20px 0;
| |
| font-size: 14px;
| |
| background-color: #fff;
| |
| box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
| |
| border-radius: 8px;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .oroza-table thead {
| |
| background-color: #2b4a6d;
| |
| color: #fff;
| |
| text-align: left;
| |
| font-weight: bold;
| |
| }
| |
| | |
| .oroza-table th,
| |
| .oroza-table td {
| |
| padding: 12px 15px;
| |
| border-bottom: 1px solid #eee;
| |
| }
| |
| | |
| .oroza-table tbody tr:nth-child(even) {
| |
| background-color: #f9f9f9;
| |
| }
| |
| | |
| .oroza-table tbody tr:hover {
| |
| background-color: #eef4ff;
| |
| }
| |
| | |
| .oroza-table .highlight {
| |
| color: #ffb400;
| |
| font-weight: bold;
| |
| }
| |
| | |
| .oroza-table .center-icon {
| |
| text-align: center;
| |
| font-size: 18px;
| |
| }
| |
| | |
| .oroza-table .zeny {
| |
| color: #28a745;
| |
| font-weight: bold;
| |
| }
| |
| | |
| /* Variante opcional para tablas de ancho automático */
| |
| .oroza-table.auto-width {
| |
| width: auto !important;
| |
| max-width: 100%;
| |
| table-layout: auto !important;
| |
| margin: 20px auto;
| |
| display: table;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 13) EFECTO ZOOM EN IMAGENES
| |
| ---------------------------------------------------------
| |
| Útil para imágenes pequeñas o decorativas
| |
| ========================================================= */
| |
| .zoom-img {
| |
| transition: transform 0.25s ease;
| |
| cursor: zoom-in;
| |
| }
| |
| | |
| .zoom-img:hover {
| |
| transform: scale(1.35);
| |
| z-index: 10;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 14) IMAGENES REDONDEADAS CON EFECTO SUAVE
| |
| ---------------------------------------------------------
| |
| Tus imágenes principales decorativas
| |
| ========================================================= */
| |
| img {
| |
| max-width: 100%;
| |
| height: auto;
| |
| }
| |
| | |
| img.round-fade {
| |
| width: 55%;
| |
| border-radius: 20px;
| |
| margin: 10px auto;
| |
| display: block;
| |
| box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1), 0 0 15px rgba(0, 0, 0, 0.08);
| |
| transition: transform 0.3s ease, opacity 0.3s ease;
| |
| object-fit: cover;
| |
| opacity: 0.97;
| |
| }
| |
| | |
| img.round-fade:hover {
| |
| transform: scale(1.08);
| |
| opacity: 1;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 15) OCULTAR ELEMENTOS ORIGINALES DE MEDIAWIKI
| |
| ---------------------------------------------------------
| |
| Esto oculta partes viejas del layout por defecto
| |
| ========================================================= */
| |
| #p-logo,
| |
| #footer,
| |
| #mw-panel {
| |
| display: none !important;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 16) TOGGLE / MENU COLAPSABLE
| |
| ---------------------------------------------------------
| |
| Si no lo usas, se deja oculto
| |
| ========================================================= */
| |
| .toggle-checkbox {
| |
| display: none;
| |
| }
| |
| | |
| .toggle-label {
| |
| display: none !important;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 17) TABLET Y MOVIL
| |
| ---------------------------------------------------------
| |
| Aquí está la mejora más importante.
| |
| Ya no apilamos la navbar completa en columna.
| |
| En lugar de eso:
| |
| - reducimos tamaños
| |
| - hacemos wrap controlado
| |
| - ajustamos logo
| |
| - permitimos scroll en tablas
| |
| ========================================================= */
| |
| /* =========================================================
| |
| RESPONSIVE CORREGIDO
| |
| ---------------------------------------------------------
| |
| - No reduce el ancho en PC
| |
| - Corrige mejor el móvil
| |
| - Usa !important en lo necesario porque en wiki a veces
| |
| hay estilos inline que ganan prioridad visual
| |
| ========================================================= */
| |
| @media screen and (max-width: 768px) {
| |
| /* Caja principal más compacta en móvil */
| |
| #content {
| |
| padding: 16px !important;
| |
| margin: 10px !important;
| |
| border-radius: 10px !important;
| |
| }
| |
| | |
| /* Si tu layout usa wrapper flex */
| |
| .oroza-flex-wrapper {
| |
| display: flex !important;
| |
| flex-direction: column !important;
| |
| gap: 16px !important;
| |
| }
| |
| | |
| .oroza-flex-wrapper > div {
| |
| width: 100% !important;
| |
| max-width: 100% !important;
| |
| min-width: 0 !important;
| |
| }
| |
| | |
| /* Sidebar a ancho completo */
| |
| .oroza-sidebar {
| |
| width: 100% !important;
| |
| max-width: 100% !important;
| |
| margin-bottom: 16px !important;
| |
| display: block !important;
| |
| padding: 14px 16px !important;
| |
| box-sizing: border-box !important;
| |
| }
| |
| | |
| .oroza-sidebar .menu-title {
| |
| font-size: 15px !important;
| |
| margin: 16px 0 10px !important;
| |
| }
| |
| | |
| .oroza-sidebar li {
| |
| font-size: 13px !important;
| |
| line-height: 1.35 !important;
| |
| gap: 6px !important;
| |
| }
| |
| | |
| /* Navbar:
| |
| en vez de ponerla en columna, dejamos fila con wrap */
| |
| .oroza-navbar {
| |
| display: flex !important;
| |
| flex-direction: row !important;
| |
| flex-wrap: wrap !important;
| |
| justify-content: center !important;
| |
| align-items: center !important;
| |
| gap: 8px 10px !important;
| |
| padding: 12px 10px !important;
| |
| margin: 12px 10px !important;
| |
| border-radius: 10px !important;
| |
| }
| |
| | |
| /* El logo absoluto suele romper el centrado en móvil */
| |
| .oroza-navbar-logo {
| |
| position: static !important;
| |
| left: auto !important;
| |
| width: 100% !important;
| |
| justify-content: center !important;
| |
| margin-bottom: 6px !important;
| |
| }
| |
| | |
| .oroza-navbar-logo img {
| |
| width: 56px !important;
| |
| max-width: 56px !important;
| |
| }
| |
| | |
| .oroza-navbar a {
| |
| display: inline-flex !important;
| |
| align-items: center !important;
| |
| justify-content: center !important;
| |
| padding: 6px 9px !important;
| |
| font-size: 13px !important;
| |
| line-height: 1.2 !important;
| |
| text-align: center !important;
| |
| white-space: nowrap !important;
| |
| }
| |
| | |
| /* Títulos más compactos en móvil */
| |
| .firstHeading {
| |
| font-size: 1.6rem !important;
| |
| line-height: 1.2 !important;
| |
| margin-bottom: 14px !important;
| |
| }
| |
| | |
| h1 {
| |
| font-size: 1.9rem !important;
| |
| margin-top: 24px !important;
| |
| margin-bottom: 18px !important;
| |
| }
| |
| | |
| h2 {
| |
| font-size: 1.6rem !important;
| |
| margin-top: 22px !important;
| |
| margin-bottom: 16px !important;
| |
| }
| |
| | |
| h3 {
| |
| font-size: 1.35rem !important;
| |
| margin-top: 20px !important;
| |
| margin-bottom: 14px !important;
| |
| }
| |
| | |
| h4 {
| |
| font-size: 1.15rem !important;
| |
| margin-top: 18px !important;
| |
| margin-bottom: 12px !important;
| |
| }
| |
| | |
| h5 {
| |
| font-size: 1rem !important;
| |
| margin-top: 16px !important;
| |
| margin-bottom: 10px !important;
| |
| }
| |
| | |
| h6 {
| |
| font-size: 0.95rem !important;
| |
| margin-top: 14px !important;
| |
| margin-bottom: 10px !important;
| |
| }
| |
| | |
| /* Listas más compactas */
| |
| ul,
| |
| ol {
| |
| padding-left: 22px !important;
| |
| margin-bottom: 16px !important;
| |
| }
| |
| | |
| /* Cajas informativas */
| |
| .box-info,
| |
| .box-warning,
| |
| .box-tip {
| |
| padding: 12px !important;
| |
| margin: 14px 0 !important;
| |
| border-radius: 8px !important;
| |
| }
| |
| | |
| /* Botones ocupan mejor el ancho disponible */
| |
| .button-icon {
| |
| width: 100% !important;
| |
| justify-content: center !important;
| |
| padding: 10px 12px !important;
| |
| box-sizing: border-box !important;
| |
| text-align: center !important;
| |
| }
| |
| | |
| /* Tablas con scroll horizontal */
| |
| .oroza-table,
| |
| .oroza-table.auto-width {
| |
| display: block !important;
| |
| width: 100% !important;
| |
| max-width: 100% !important;
| |
| overflow-x: auto !important;
| |
| -webkit-overflow-scrolling: touch !important;
| |
| white-space: nowrap !important;
| |
| }
| |
| | |
| .oroza-table th,
| |
| .oroza-table td {
| |
| white-space: nowrap !important;
| |
| font-size: 13px !important;
| |
| padding: 10px 12px !important;
| |
| }
| |
| | |
| /* Imágenes más fluidas */
| |
| img.round-fade {
| |
| width: 100% !important;
| |
| max-width: 100% !important;
| |
| border-radius: 14px !important;
| |
| margin: 10px auto !important;
| |
| }
| |
| | |
| /* Hover desactivado en móvil */
| |
| .zoom-img:hover,
| |
| img.round-fade:hover {
| |
| transform: none !important;
| |
| opacity: 0.97 !important;
| |
| }
| |
| | |
| .toggle-label {
| |
| display: none !important;
| |
| }
| |
| }
| |
| | |
| /* =========================================================
| |
| MOVILES PEQUEÑOS
| |
| ========================================================= */
| |
| @media screen and (max-width: 480px) {
| |
| #content {
| |
| padding: 12px !important;
| |
| margin: 8px !important;
| |
| border-radius: 8px !important;
| |
| }
| |
| | |
| .oroza-navbar {
| |
| gap: 6px 8px !important;
| |
| padding: 10px 8px !important;
| |
| }
| |
| | |
| .oroza-navbar a {
| |
| font-size: 12px !important;
| |
| padding: 6px 8px !important;
| |
| }
| |
| | |
| .oroza-navbar-logo img {
| |
| width: 48px !important;
| |
| max-width: 48px !important;
| |
| }
| |
| | |
| .firstHeading {
| |
| font-size: 1.4rem !important;
| |
| }
| |
| | |
| h1 {
| |
| font-size: 1.65rem !important;
| |
| }
| |
| | |
| h2 {
| |
| font-size: 1.4rem !important;
| |
| }
| |
| | |
| h3 {
| |
| font-size: 1.2rem !important;
| |
| }
| |
| | |
| .oroza-sidebar {
| |
| padding: 12px !important;
| |
| }
| |
| | |
| .oroza-sidebar li {
| |
| font-size: 12px !important;
| |
| }
| |
| }
| |
| | |
| /* =========================================================
| |
| 19) AJUSTE PARA DISPOSITIVOS QUE SI SOPORTAN HOVER
| |
| ---------------------------------------------------------
| |
| Solo deja zoom bonito en escritorio / mouse
| |
| ========================================================= */
| |
| @media (hover: hover) {
| |
| .zoom-img:hover {
| |
| transform: scale(1.35);
| |
| z-index: 10;
| |
| }
| |
| | |
| img.round-fade:hover {
| |
| transform: scale(1.08);
| |
| opacity: 1;
| |
| }
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 20) AJUSTE PARA DISPOSITIVOS TOUCH
| |
| ---------------------------------------------------------
| |
| Quita animaciones de hover agresivas en celular
| |
| ========================================================= */
| |
| @media (hover: none) {
| |
| .zoom-img:hover,
| |
| img.round-fade:hover {
| |
| transform: none;
| |
| opacity: 0.97;
| |
| }
| |
| }
| |
| | |
| | |
| | |
| /* =========================================================
| |
| MENU LATERAL OROZA - VERSION MEJORADA
| |
| ---------------------------------------------------------
| |
| Objetivo:
| |
| - Integrarse con el estilo general blanco + dorado
| |
| - Verse más premium y ordenado
| |
| - Mantener compatibilidad con tu HTML actual
| |
| - Funcionar bien en desktop y celular
| |
| - No modificar navbar ni contenido principal
| |
| ========================================================= */
| |
| | |
| | |
| /* =========================================================
| |
| 1) VARIABLES VISUALES DEL MENU
| |
| ---------------------------------------------------------
| |
| Si luego quieres ajustar color, sombra o bordes,
| |
| aquí lo cambias todo más fácil.
| |
| ========================================================= */
| |
| :root {
| |
| --oroza-side-bg: #ffffff;
| |
| --oroza-side-panel: #ffffff;
| |
| --oroza-side-item: #fbfcfe;
| |
| --oroza-side-item-hover: #f4f8fc;
| |
| --oroza-side-border: #e4ebf3;
| |
| --oroza-side-border-soft: #eef3f8;
| |
| --oroza-side-text: #243246;
| |
| --oroza-side-muted: #607086;
| |
| --oroza-side-gold: #dcae1d;
| |
| --oroza-side-gold-strong: #c79400;
| |
| --oroza-side-gold-soft: rgba(220, 174, 29, 0.12);
| |
| --oroza-side-shadow: 0 12px 30px rgba(22, 34, 52, 0.08);
| |
| --oroza-side-shadow-soft: 0 4px 14px rgba(22, 34, 52, 0.05);
| |
| --oroza-side-radius: 18px;
| |
| --oroza-side-radius-sm: 12px;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 2) CONTENEDOR GENERAL DEL MENU
| |
| ---------------------------------------------------------
| |
| Este envuelve el toggle y el panel lateral.
| |
| ========================================================= */
| |
| .oroza-sidebar-toggle {
| |
| width: 100%;
| |
| color: var(--oroza-side-text);
| |
| font-family: "Segoe UI", Tahoma, Arial, sans-serif;
| |
| box-sizing: border-box; | | box-sizing: border-box; |
| }
| | padding: 6px; |
| | | background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); |
| | | border: 1px solid #d8e2ed; |
| /* =========================================================
| | border-bottom: 3px solid #d6a91d; |
| 3) CHECKBOX OCULTO PARA TOGGLE EN MOVIL
| | border-radius: 18px; |
| ---------------------------------------------------------
| | box-shadow: |
| Se usa solo para abrir/cerrar el menú en pantallas chicas.
| | 0 12px 28px rgba(24, 45, 70, 0.13), |
| ========================================================= */
| | inset 0 1px 0 rgba(255, 255, 255, 0.9); |
| .toggle-checkbox {
| |
| display: none;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 4) BOTON DE TOGGLE MOVIL
| |
| ---------------------------------------------------------
| |
| En desktop permanece oculto.
| |
| En móvil aparece como botón para mostrar el menú.
| |
| ========================================================= */
| |
| .toggle-label {
| |
| display: none;
| |
| width: 100%;
| |
| box-sizing: border-box;
| |
| padding: 13px 16px; | |
| margin-bottom: 14px;
| |
| border: 1px solid var(--oroza-side-border);
| |
| border-radius: 14px;
| |
| background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%); | |
| color: var(--oroza-side-text); | |
| font-size: 14px; | |
| font-weight: 800; | |
| text-align: center; | |
| letter-spacing: 0.2px;
| |
| cursor: pointer;
| |
| box-shadow: var(--oroza-side-shadow-soft);
| |
| transition: | | transition: |
| background 0.2s ease,
| |
| border-color 0.2s ease, | | border-color 0.2s ease, |
| box-shadow 0.2s ease, | | box-shadow 0.2s ease, |
| Línea 827: |
Línea 42: |
| } | | } |
|
| |
|
| .toggle-label:hover { | | .oroza-global-search-field:focus-within { |
| border-color: #d8e1ea;
| | border-color: #c8d8e8; |
| background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
| | border-bottom-color: #e3b822; |
| box-shadow: 0 8px 20px rgba(22, 34, 52, 0.08);
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 5) PANEL PRINCIPAL DEL SIDEBAR
| |
| ---------------------------------------------------------
| |
| Caja blanca premium del menú lateral.
| |
| ========================================================= */
| |
| .oroza-sidebar {
| |
| background: var(--oroza-side-panel);
| |
| border: 1px solid var(--oroza-side-border); | |
| border-radius: 22px;
| |
| padding: 16px;
| |
| box-shadow: var(--oroza-side-shadow);
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 6) TITULOS DE CATEGORIA
| |
| ---------------------------------------------------------
| |
| Bloques tipo sección para dividir el menú.
| |
| Estilo azul + dorado, combinado con la navbar.
| |
| ========================================================= */
| |
| .oroza-sidebar .menu-title {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 10px;
| |
| margin: 18px 0 10px;
| |
| padding: 12px 14px;
| |
| background: linear-gradient(180deg, #35506f 0%, #2b3e50 100%);
| |
| border: 1px solid rgba(255, 180, 0, 0.35);
| |
| border-left: 5px solid #ffb400; | |
| border-radius: 12px;
| |
| color: #ffffff;
| |
| font-size: 14px;
| |
| font-weight: 800;
| |
| line-height: 1.25;
| |
| letter-spacing: 0.2px;
| |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
| |
| box-shadow: | | box-shadow: |
| 0 4px 12px rgba(0, 0, 0, 0.10), | | 0 16px 34px rgba(24, 45, 70, 0.17), |
| inset 0 1px 0 rgba(255, 255, 255, 0.08); | | 0 0 0 4px rgba(214, 169, 29, 0.12); |
| | transform: translateY(-1px); |
| } | | } |
|
| |
|
| .oroza-sidebar .menu-title:first-child { | | .oroza-global-search-icon { |
| margin-top: 0; | | flex: 0 0 auto; |
| }
| | width: 42px; |
| | |
| | |
| /* =========================================================
| |
| 7) LISTAS BASE DEL MENU
| |
| ---------------------------------------------------------
| |
| Elimina estilos de lista por defecto.
| |
| ========================================================= */
| |
| .oroza-sidebar ul {
| |
| list-style: none;
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
| | |
| .oroza-sidebar li {
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
| | |
| .oroza-sidebar li + li {
| |
| margin-top: 6px;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 8) ENLACES DEL MENU
| |
| ---------------------------------------------------------
| |
| Cada opción se ve como tarjeta pequeña.
| |
| ========================================================= */
| |
| .oroza-sidebar li a {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 10px;
| |
| width: 100%;
| |
| min-height: 46px;
| |
| box-sizing: border-box;
| |
| padding: 10px 12px;
| |
| background: var(--oroza-side-item);
| |
| border: 1px solid var(--oroza-side-border-soft);
| |
| border-radius: var(--oroza-side-radius-sm);
| |
| color: var(--oroza-side-text) !important;
| |
| text-decoration: none !important;
| |
| font-size: 14px;
| |
| font-weight: 600;
| |
| line-height: 1.35;
| |
| box-shadow: var(--oroza-side-shadow-soft);
| |
| transition:
| |
| background 0.18s ease,
| |
| border-color 0.18s ease,
| |
| transform 0.18s ease,
| |
| box-shadow 0.18s ease,
| |
| color 0.18s ease;
| |
| }
| |
| | |
| /* Hover suave, elegante y compatible con tu look */
| |
| .oroza-sidebar li a:hover {
| |
| background: var(--oroza-side-item-hover);
| |
| border-color: #dce5ef;
| |
| color: #162234 !important;
| |
| text-decoration: none !important; | |
| transform: translateX(3px);
| |
| box-shadow: 0 8px 18px rgba(22, 34, 52, 0.08);
| |
| }
| |
| | |
| /* Focus visible para accesibilidad */
| |
| .oroza-sidebar li a:focus {
| |
| outline: none;
| |
| border-color: rgba(220, 174, 29, 0.58);
| |
| box-shadow: 0 0 0 4px rgba(220, 174, 29, 0.12);
| |
| }
| |
| | |
| /* Estado activo opcional:
| |
| si algún día agregas class="active" al link actual */
| |
| .oroza-sidebar li a.active,
| |
| .oroza-sidebar li a.is-active {
| |
| background: linear-gradient(180deg, #fffaf1 0%, #fff4dd 100%);
| |
| border-color: rgba(220, 174, 29, 0.38);
| |
| color: #1a2738 !important;
| |
| box-shadow:
| |
| 0 8px 18px rgba(22, 34, 52, 0.06),
| |
| inset 0 0 0 1px rgba(220, 174, 29, 0.08);
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 9) ICONO, TEXTO Y FLECHA
| |
| ---------------------------------------------------------
| |
| Mejor control visual de cada parte del link.
| |
| ========================================================= */
| |
| .menu-icon {
| |
| width: 22px;
| |
| min-width: 22px;
| |
| text-align: center; | | text-align: center; |
| font-size: 16px; | | color: #2b4a6d; |
| | font-size: 27px; |
| | font-weight: 900; |
| line-height: 1; | | line-height: 1; |
| opacity: 0.96; | | transform: rotate(-18deg); |
| | pointer-events: none; |
| } | | } |
|
| |
|
| .menu-text { | | .oroza-global-search-input { |
| flex: 1; | | flex: 1 1 auto; |
| min-width: 0; | | min-width: 0; |
| word-break: break-word; | | height: 44px; |
| | padding: 0 10px 0 2px; |
| | border: 0 !important; |
| | outline: 0 !important; |
| | background: transparent !important; |
| | box-shadow: none !important; |
| | color: #1f3044; |
| | font-family: inherit; |
| | font-size: 15px; |
| | font-weight: 650; |
| | line-height: 1.3; |
| } | | } |
|
| |
|
| .menu-arrow { | | .oroza-global-search-input::placeholder { |
| color: var(--oroza-side-gold-strong);
| | color: #708197; |
| font-size: 14px; | | font-weight: 500; |
| font-weight: 900; | |
| line-height: 1;
| |
| opacity: 0.92;
| |
| transition: transform 0.18s ease, opacity 0.18s ease;
| |
| }
| |
| | |
| .oroza-sidebar li a:hover .menu-arrow {
| |
| transform: translateX(2px);
| |
| opacity: 1; | | opacity: 1; |
| } | | } |
|
| |
|
| | | .oroza-global-search-input::-webkit-search-cancel-button { |
| /* =========================================================
| |
| 10) AJUSTE DESKTOP
| |
| ---------------------------------------------------------
| |
| Mantiene el menú con un ancho agradable y estable.
| |
| ========================================================= */
| |
| @media screen and (min-width: 981px) {
| |
| .oroza-sidebar {
| |
| max-width: 330px;
| |
| }
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 11) TABLET / MOVIL
| |
| ---------------------------------------------------------
| |
| Muestra botón toggle y colapsa el menú lateral.
| |
| ========================================================= */
| |
| @media screen and (max-width: 980px) {
| |
| .toggle-label {
| |
| display: block;
| |
| }
| |
| | |
| .oroza-sidebar {
| |
| display: none;
| |
| padding: 14px;
| |
| border-radius: 18px;
| |
| }
| |
| | |
| .toggle-checkbox:checked + .toggle-label + .oroza-sidebar {
| |
| display: block;
| |
| }
| |
| | |
| .oroza-sidebar .menu-title {
| |
| font-size: 14px;
| |
| padding: 11px 12px;
| |
| }
| |
| | |
| .oroza-sidebar li a {
| |
| min-height: 44px;
| |
| font-size: 13.5px;
| |
| padding: 10px 11px;
| |
| }
| |
| | |
| .menu-icon {
| |
| width: 20px;
| |
| min-width: 20px;
| |
| font-size: 15px;
| |
| }
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| 12) CELULAR PEQUEÑO
| |
| ---------------------------------------------------------
| |
| Compacta un poco más sin perder legibilidad.
| |
| ========================================================= */
| |
| @media screen and (max-width: 480px) {
| |
| .toggle-label {
| |
| padding: 12px 14px;
| |
| font-size: 13px;
| |
| border-radius: 12px;
| |
| }
| |
| | |
| .oroza-sidebar {
| |
| padding: 12px;
| |
| border-radius: 16px;
| |
| }
| |
| | |
| .oroza-sidebar .menu-title {
| |
| gap: 8px;
| |
| margin: 16px 0 9px;
| |
| padding: 10px 11px;
| |
| font-size: 13px;
| |
| }
| |
| | |
| .oroza-sidebar li + li {
| |
| margin-top: 5px;
| |
| }
| |
| | |
| .oroza-sidebar li a {
| |
| min-height: 42px;
| |
| padding: 9px 10px;
| |
| font-size: 13px;
| |
| gap: 9px;
| |
| }
| |
| | |
| .menu-icon {
| |
| width: 18px;
| |
| min-width: 18px;
| |
| font-size: 14px;
| |
| }
| |
| | |
| .menu-arrow {
| |
| font-size: 13px;
| |
| }
| |
| }
| |
| | |
| | |
| | |
| /* =========================================================
| |
| OCULTAR TITULO NATIVO Y PANEL SUPERIOR DE MEDIAWIKI
| |
| ---------------------------------------------------------
| |
| - .mw-page-title-main: título nativo de la página
| |
| - .mw-head / #mw-head: panel superior nativo
| |
| ========================================================= */
| |
| | |
| /* Oculta el título nativo */
| |
| .mw-page-title-main {
| |
| display: none !important;
| |
| }
| |
| | |
| /* Oculta el panel superior si viene como clase */
| |
| .mw-head {
| |
| display: none !important;
| |
| }
| |
| | |
| /* Oculta el panel superior si tu skin lo maneja como id */
| |
| #mw-head {
| |
| display: none !important;
| |
| }
| |
| | |
| /* Opcional: también quita la base/fondo superior del skin */
| |
| #mw-head-base {
| |
| display: none !important;
| |
| }
| |
| | |
| | |
| /* ================================================================================================================== */
| |
| /* =========================================== ESTILOS PARA PAGINAS DE ENMEDIO ====================================== */
| |
| /* ================================================================================================================== */
| |
| | |
| /* =========================================================
| |
| OROZA HOME / LANDING WIKI
| |
| VERSION MEJORADA CON MAS CONTRASTE
| |
| Pensada para que no se mezclen colores entre bloques.
| |
| ========================================================= */
| |
| | |
| .oroza-page {
| |
| max-width: 1100px;
| |
| margin: 0 auto;
| |
| padding: 20px;
| |
| }
| |
| | |
| /* =========================
| |
| HERO PRINCIPAL
| |
| ========================= */
| |
| .oroza-page .oroza-hero-card {
| |
| background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
| |
| border: 1px solid #d5e1ee;
| |
| border-radius: 22px;
| |
| padding: 34px 28px;
| |
| margin-bottom: 24px;
| |
| text-align: center;
| |
| box-shadow: 0 10px 24px rgba(43, 74, 109, 0.08);
| |
| }
| |
| | |
| .oroza-page .oroza-hero-logo {
| |
| margin-bottom: 18px;
| |
| }
| |
| | |
| .oroza-page .oroza-page-title {
| |
| margin: 0 0 14px;
| |
| font-size: 32px;
| |
| line-height: 1.2;
| |
| font-weight: 800;
| |
| color: #183554;
| |
| }
| |
| | |
| .oroza-page .oroza-page-intro {
| |
| max-width: 860px;
| |
| margin: 0 auto;
| |
| font-size: 16px;
| |
| line-height: 1.8;
| |
| color: #4a6481;
| |
| }
| |
| | |
| /* =========================
| |
| TEXTO GENERAL
| |
| ========================= */
| |
| .oroza-page .oroza-section-text {
| |
| margin: 0 0 16px;
| |
| color: #405973;
| |
| line-height: 1.8;
| |
| }
| |
| | |
| .oroza-page .oroza-feature-list {
| |
| margin: 0;
| |
| padding-left: 20px;
| |
| color: #3f566f;
| |
| line-height: 1.8;
| |
| }
| |
| | |
| .oroza-page .oroza-feature-list li + li {
| |
| margin-top: 10px;
| |
| }
| |
| | |
| .oroza-page .oroza-inline-chip {
| |
| display: inline-block;
| |
| padding: 4px 10px;
| |
| border-radius: 999px;
| |
| background: #edf4ff;
| |
| border: 1px solid #d2e0f2;
| |
| color: #21466c;
| |
| font-weight: 700;
| |
| font-size: 13px;
| |
| white-space: nowrap;
| |
| }
| |
| | |
| /* =========================================================
| |
| ACORDEONES
| |
| Centrado visual completo + azul fuerte Oroza
| |
| ========================================================= */
| |
| .oroza-page .oroza-accordion {
| |
| background: #ffffff;
| |
| border: 1px solid #d3deea;
| |
| border-radius: 18px;
| |
| margin-bottom: 20px;
| |
| box-shadow: 0 10px 24px rgba(43, 74, 109, 0.08);
| |
| overflow: hidden;
| |
| transition: all 0.25s ease;
| |
| }
| |
| | |
| .oroza-page .oroza-accordion:hover {
| |
| box-shadow: 0 14px 30px rgba(43, 74, 109, 0.12);
| |
| }
| |
| | |
| .oroza-page .oroza-accordion summary {
| |
| position: relative;
| |
| padding: 18px 56px 18px 22px;
| |
| background: linear-gradient(180deg, #355276 0%, #2b4a6d 100%) !important;
| |
| color: #ffffff !important;
| |
| font-weight: 800;
| |
| font-size: 18px;
| |
| text-align: center;
| |
| cursor: pointer;
| |
| list-style: none;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| border-bottom: 1px solid rgba(255, 255, 255, 0.08);
| |
| }
| |
| | |
| .oroza-page .oroza-accordion summary:hover {
| |
| background: linear-gradient(180deg, #3d5f89 0%, #305176 100%) !important;
| |
| }
| |
| | |
| .oroza-page .oroza-accordion summary::-webkit-details-marker {
| |
| display: none; | | display: none; |
| } | | } |
|
| |
|
| .oroza-page .oroza-accordion summary::after { | | .oroza-global-search-clear { |
| content: "▲";
| | flex: 0 0 auto; |
| position: absolute;
| |
| right: 20px;
| |
| top: 50%;
| |
| transform: translateY(-50%);
| |
| color: #ffb400;
| |
| font-size: 13px;
| |
| transition: transform 0.25s ease;
| |
| }
| |
| | |
| .oroza-page .oroza-accordion:not([open]) summary::after {
| |
| transform: translateY(-50%) rotate(180deg);
| |
| }
| |
| | |
| .oroza-page .oroza-accordion-content {
| |
| padding: 24px 22px;
| |
| background: #ffffff;
| |
| color: #44566d;
| |
| line-height: 1.8;
| |
| text-align: center;
| |
| }
| |
| | |
| .oroza-page .oroza-accordion-content > * {
| |
| margin-left: auto;
| |
| margin-right: auto;
| |
| }
| |
| | |
| .oroza-page .oroza-accordion-content .oroza-section-text,
| |
| .oroza-page .oroza-accordion-content .oroza-page-intro {
| |
| max-width: 900px;
| |
| text-align: center;
| |
| }
| |
| | |
| .oroza-page .oroza-accordion-content .oroza-feature-list {
| |
| display: inline-block;
| |
| text-align: left;
| |
| margin: 0 auto;
| |
| padding-left: 22px;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| TABLAS
| |
| Azul fuerte Oroza + look mas premium
| |
| ========================================================= */
| |
| .oroza-page .oroza-table-wrap {
| |
| width: 100%;
| |
| overflow-x: auto;
| |
| margin-top: 16px;
| |
| border-radius: 16px;
| |
| }
| |
| | |
| .oroza-page .oroza-info-table {
| |
| width: 100%;
| |
| border-collapse: separate;
| |
| border-spacing: 0;
| |
| background: #ffffff;
| |
| border: 1px solid #cfdbe8;
| |
| border-radius: 16px;
| |
| overflow: hidden;
| |
| box-shadow: 0 10px 24px rgba(43, 74, 109, 0.08);
| |
| }
| |
| | |
| /* Encabezado superior de la tabla */
| |
| .oroza-page .oroza-info-table thead th {
| |
| padding: 16px 20px;
| |
| background: linear-gradient(180deg, #355276 0%, #2b4a6d 100%);
| |
| color: #ffffff;
| |
| font-size: 16px;
| |
| font-weight: 800;
| |
| text-align: center;
| |
| border-bottom: 1px solid #24415f;
| |
| letter-spacing: 0.2px;
| |
| }
| |
| | |
| /* Celdas generales */
| |
| .oroza-page .oroza-info-table tbody th,
| |
| .oroza-page .oroza-info-table tbody td {
| |
| padding: 15px 18px;
| |
| border-bottom: 1px solid #e7eef6;
| |
| vertical-align: middle;
| |
| font-size: 14px;
| |
| }
| |
| | |
| /* Columna izquierda */
| |
| .oroza-page .oroza-info-table tbody th {
| |
| width: 40%;
| |
| background: #f5f9fd;
| |
| color: #1f4368;
| |
| font-weight: 800;
| |
| text-align: left;
| |
| border-right: 1px solid #e2eaf3;
| |
| }
| |
| | |
| /* Columna derecha */
| |
| .oroza-page .oroza-info-table tbody td {
| |
| background: #ffffff;
| |
| color: #4b627b;
| |
| font-weight: 500;
| |
| text-align: left;
| |
| }
| |
| | |
| /* Zebra sutil para mejor lectura */
| |
| .oroza-page .oroza-info-table tbody tr:nth-child(even) th {
| |
| background: #eef4fa;
| |
| }
| |
| | |
| .oroza-page .oroza-info-table tbody tr:nth-child(even) td {
| |
| background: #fbfdff;
| |
| }
| |
| | |
| /* Hover elegante */
| |
| .oroza-page .oroza-info-table tbody tr:hover th {
| |
| background: #e7f0f9;
| |
| }
| |
| | |
| .oroza-page .oroza-info-table tbody tr:hover td {
| |
| background: #f7fbff;
| |
| }
| |
| | |
| /* Ultima fila */
| |
| .oroza-page .oroza-info-table tbody tr:last-child th,
| |
| .oroza-page .oroza-info-table tbody tr:last-child td {
| |
| border-bottom: none;
| |
| }
| |
| | |
| /* Responsive */
| |
| @media (max-width: 768px) {
| |
| .oroza-page .oroza-accordion summary {
| |
| font-size: 16px;
| |
| padding: 15px 48px 15px 16px;
| |
| }
| |
| | |
| .oroza-page .oroza-accordion-content {
| |
| padding: 18px 16px;
| |
| }
| |
| | |
| .oroza-page .oroza-info-table thead th {
| |
| font-size: 15px;
| |
| padding: 14px 16px;
| |
| }
| |
| | |
| .oroza-page .oroza-info-table tbody th,
| |
| .oroza-page .oroza-info-table tbody td {
| |
| padding: 12px 14px;
| |
| font-size: 13px;
| |
| }
| |
| }
| |
| | |
| /* =========================
| |
| TARJETAS DE ACCESO RAPIDO
| |
| Ya no van completamente
| |
| del mismo azul para que
| |
| no se fundan visualmente.
| |
| ========================= */
| |
| .oroza-page .oroza-action-card {
| |
| background: #ffffff;
| |
| border: 1px solid #d7e2ee;
| |
| border-top: 4px solid #2b4a6d;
| |
| border-radius: 18px;
| |
| padding: 22px;
| |
| box-shadow: 0 10px 22px rgba(43, 74, 109, 0.08);
| |
| }
| |
| | |
| .oroza-page .oroza-action-title {
| |
| margin: 0 0 16px;
| |
| font-size: 20px;
| |
| font-weight: 800;
| |
| color: #1e4166;
| |
| }
| |
| | |
| .oroza-page .oroza-action-links {
| |
| display: flex;
| |
| flex-direction: column;
| |
| gap: 12px;
| |
| }
| |
| | |
| .oroza-page .oroza-action-link {
| |
| display: block;
| |
| padding: 12px 14px;
| |
| border: 1px solid #d5e1ee;
| |
| border-radius: 12px;
| |
| background: linear-gradient(180deg, #355276 0%, #2b4a6d 100%);
| |
| color: #ffffff;
| |
| font-weight: 700;
| |
| text-decoration: none;
| |
| transition: all 0.25s ease;
| |
| }
| |
| | |
| .oroza-page .oroza-action-link:hover {
| |
| background: #ffb400;
| |
| border-color: #ffb400;
| |
| color: #17324f;
| |
| transform: translateY(-1px);
| |
| }
| |
| | |
| /* =========================
| |
| GRID
| |
| ========================= */
| |
| .oroza-page .oroza-grid {
| |
| display: grid;
| |
| gap: 20px;
| |
| margin: 20px 0 0;
| |
| }
| |
| | |
| .oroza-page .oroza-grid-2 {
| |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
| |
| }
| |
| | |
| /* =========================
| |
| RESPONSIVE
| |
| ========================= */
| |
| @media (max-width: 768px) {
| |
| .oroza-page {
| |
| padding: 14px;
| |
| }
| |
| | |
| .oroza-page .oroza-hero-card {
| |
| padding: 24px 18px;
| |
| border-radius: 18px;
| |
| }
| |
| | |
| .oroza-page .oroza-page-title {
| |
| font-size: 26px;
| |
| }
| |
| | |
| .oroza-page .oroza-page-intro {
| |
| font-size: 15px;
| |
| line-height: 1.75;
| |
| }
| |
| | |
| .oroza-page .oroza-accordion summary {
| |
| font-size: 16px;
| |
| padding: 15px 18px;
| |
| }
| |
| | |
| .oroza-page .oroza-accordion-content {
| |
| padding: 18px;
| |
| }
| |
| | |
| .oroza-page .oroza-info-table tbody th,
| |
| .oroza-page .oroza-info-table tbody td {
| |
| font-size: 13px;
| |
| padding: 12px 14px;
| |
| }
| |
| }
| |
| | |
| | |
| | |
| /* =========================================================
| |
| OROZA DOWNLOAD PAGE
| |
| CSS adicional solo para componentes que tu base actual
| |
| no incluye: layout lateral, cajas de aviso, pasos y
| |
| bloque final.
| |
| ========================================================= */
| |
| | |
| /* Layout general */
| |
| .oroza-download-shell {
| |
| display: flex;
| |
| gap: 30px;
| |
| align-items: flex-start;
| |
| flex-wrap: wrap;
| |
| }
| |
| | |
| .oroza-download-sidebar {
| |
| width: 260px;
| |
| flex-shrink: 0;
| |
| }
| |
| | |
| .oroza-download-main {
| |
| flex: 1; | |
| min-width: 0;
| |
| }
| |
| | |
| /* Etiqueta superior del hero */
| |
| .oroza-download-kicker {
| |
| display: inline-block;
| |
| margin-bottom: 16px;
| |
| padding: 8px 14px;
| |
| border-radius: 999px;
| |
| background: linear-gradient(180deg, #edf4ff 0%, #e6eef9 100%);
| |
| border: 1px solid #d3dfec;
| |
| color: #21466c;
| |
| font-size: 12px;
| |
| font-weight: 800;
| |
| letter-spacing: 0.08em;
| |
| text-transform: uppercase;
| |
| }
| |
| | |
| /* Caja de aviso principal */
| |
| .oroza-download-notice {
| |
| margin-bottom: 22px;
| |
| padding: 22px 24px;
| |
| background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
| |
| border: 1px solid #d7e2ee;
| |
| border-left: 5px solid #2b4a6d;
| |
| border-radius: 20px;
| |
| box-shadow: 0 10px 22px rgba(43, 74, 109, 0.08);
| |
| text-align: center;
| |
| }
| |
| | |
| .oroza-download-notice-title {
| |
| display: block;
| |
| margin-bottom: 10px;
| |
| font-size: 18px;
| |
| font-weight: 800;
| |
| color: #183554;
| |
| }
| |
| | |
| /* Secciones de contenido */
| |
| .oroza-download-section {
| |
| margin-bottom: 22px;
| |
| padding: 28px 24px;
| |
| background: #ffffff;
| |
| border: 1px solid #d7e2ee;
| |
| border-radius: 22px;
| |
| box-shadow: 0 10px 22px rgba(43, 74, 109, 0.08);
| |
| }
| |
| | |
| .oroza-download-section-title {
| |
| margin: 0 0 14px;
| |
| text-align: center;
| |
| font-size: 28px;
| |
| line-height: 1.2;
| |
| font-weight: 800;
| |
| color: #183554;
| |
| }
| |
| | |
| /* Pasos */
| |
| .oroza-download-steps {
| |
| max-width: 860px;
| |
| margin: 22px auto 0;
| |
| display: grid;
| |
| gap: 14px;
| |
| }
| |
| | |
| .oroza-download-step {
| |
| display: flex;
| |
| gap: 14px;
| |
| align-items: flex-start;
| |
| padding: 18px;
| |
| background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
| |
| border: 1px solid #dce5ef;
| |
| border-radius: 18px;
| |
| box-shadow: 0 8px 18px rgba(43, 74, 109, 0.05);
| |
| }
| |
| | |
| .oroza-download-step-number {
| |
| width: 36px; | | width: 36px; |
| height: 36px; | | height: 36px; |
| min-width: 36px; | | margin-right: 4px; |
| | padding: 0; |
| | border: 0; |
| border-radius: 50%; | | border-radius: 50%; |
| background: linear-gradient(180deg, #355276 0%, #2b4a6d 100%); | | background: #edf2f7; |
| color: #ffffff; | | color: #52657a; |
| font-size: 15px;
| | font-family: Arial, sans-serif; |
| font-weight: 800;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| box-shadow: 0 8px 14px rgba(43, 74, 109, 0.18);
| |
| }
| |
| | |
| .oroza-download-step-body {
| |
| flex: 1;
| |
| text-align: left;
| |
| font-size: 15px;
| |
| line-height: 1.8;
| |
| color: #44566d;
| |
| }
| |
| | |
| /* Caja de ayuda */
| |
| .oroza-download-tip {
| |
| max-width: 920px;
| |
| margin: 24px auto 0;
| |
| padding: 20px 22px;
| |
| background: linear-gradient(180deg, #fffdf7 0%, #fff8ea 100%);
| |
| border: 1px solid #f0dfb3;
| |
| border-left: 5px solid #ffb400;
| |
| border-radius: 18px;
| |
| box-shadow: 0 8px 18px rgba(255, 180, 0, 0.08);
| |
| text-align: center;
| |
| }
| |
| | |
| .oroza-download-tip-title {
| |
| display: block;
| |
| margin-bottom: 8px;
| |
| font-size: 17px;
| |
| font-weight: 800; | |
| color: #6f4d00;
| |
| }
| |
| | |
| /* Bloque final */
| |
| .oroza-download-highlight {
| |
| max-width: 920px;
| |
| margin: 28px auto 0;
| |
| padding: 26px 22px;
| |
| border-radius: 22px;
| |
| background: linear-gradient(180deg, #355276 0%, #2b4a6d 100%);
| |
| border: 1px solid #274361;
| |
| box-shadow: 0 14px 26px rgba(43, 74, 109, 0.18);
| |
| text-align: center;
| |
| }
| |
| | |
| .oroza-download-highlight-title {
| |
| display: block;
| |
| margin-bottom: 8px;
| |
| font-size: 24px; | | font-size: 24px; |
| font-weight: 900; | | font-weight: 400; |
| color: #ffffff; | | line-height: 34px; |
| }
| |
| | |
| .oroza-download-highlight .oroza-section-text {
| |
| margin-bottom: 0;
| |
| color: rgba(255, 255, 255, 0.92);
| |
| }
| |
| | |
| /* Responsive */
| |
| @media (max-width: 960px) {
| |
| .oroza-download-shell {
| |
| flex-direction: column;
| |
| }
| |
| | |
| .oroza-download-sidebar,
| |
| .oroza-download-main {
| |
| width: 100%;
| |
| }
| |
| }
| |
| | |
| @media (max-width: 768px) {
| |
| .oroza-download-section,
| |
| .oroza-download-notice {
| |
| padding: 22px 18px;
| |
| border-radius: 18px;
| |
| }
| |
| | |
| .oroza-download-section-title {
| |
| font-size: 24px;
| |
| }
| |
| | |
| .oroza-download-step {
| |
| padding: 16px;
| |
| }
| |
| | |
| .oroza-download-step-body {
| |
| font-size: 14px;
| |
| }
| |
| | |
| .oroza-download-highlight-title {
| |
| font-size: 21px;
| |
| }
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| CLASES ADICIONALES PARA SOLUCIÓN DE PROBLEMAS
| |
| Imágenes, botones, listas centradas y divisores
| |
| ========================================================= */
| |
| | |
| .oroza-content-img {
| |
| display: block;
| |
| max-width: 100%;
| |
| border-radius: 12px;
| |
| margin: 15px auto;
| |
| }
| |
| | |
| .oroza-img-row {
| |
| display: flex;
| |
| justify-content: center;
| |
| gap: 20px;
| |
| flex-wrap: wrap;
| |
| margin-top: 15px;
| |
| }
| |
| | |
| .oroza-img-row .oroza-content-img {
| |
| width: 40%;
| |
| min-width: 260px;
| |
| margin: 0;
| |
| }
| |
| | |
| .oroza-button-container {
| |
| display: flex;
| |
| justify-content: center;
| |
| margin-top: 20px;
| |
| }
| |
| | |
| .oroza-button-container .oroza-action-link {
| |
| display: inline-block;
| |
| padding: 12px 24px;
| |
| font-size: 16px;
| |
| text-align: center; | | text-align: center; |
| | cursor: pointer; |
| | transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; |
| } | | } |
|
| |
|
| .oroza-list-centered { | | .oroza-global-search-clear:hover, |
| display: inline-block; | | .oroza-global-search-clear:focus { |
| text-align: left; | | background: #dfe8f1; |
| margin: 0 auto; | | color: #22364d; |
| | transform: scale(1.04); |
| | outline: none; |
| } | | } |
|
| |
|
| .oroza-download-highlight .oroza-feature-list { | | .oroza-global-search-clear[hidden] { |
| color: rgba(255, 255, 255, 0.92); | | display: none !important; |
| } | | } |
|
| |
|
| .oroza-mt-24 { | | .oroza-global-search-submit { |
| margin-top: 24px;
| | flex: 0 0 auto; |
| }
| | display: inline-flex; |
| | |
| /* Divisor sutil para separar el Problema de la Solución dentro de la misma tarjeta */
| |
| .oroza-divider {
| |
| border: 0; | |
| height: 1px;
| |
| background: #d7e2ee;
| |
| margin: 28px 0;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| CLASES ADICIONALES PARA SKILLS Y TABLAS
| |
| Utilidades para imágenes, iconos y textos secundarios
| |
| ========================================================= */
| |
| | |
| /* Centrado de GIFs animados de las clases */
| |
| .oroza-content-img {
| |
| display: block;
| |
| max-width: 100%;
| |
| border-radius: 12px;
| |
| margin: 15px auto;
| |
| }
| |
| | |
| /* Alineación de icono de skill con su nombre */
| |
| .oroza-skill-item {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 10px;
| |
| font-weight: 700;
| |
| color: #1f4368;
| |
| }
| |
| | |
| /* Textos aclaratorios en gris dentro de las tablas (ej. "Antes: X") */
| |
| .oroza-text-muted {
| |
| display: block;
| |
| color: #7b8d9f;
| |
| font-size: 13px;
| |
| margin-top: 6px;
| |
| line-height: 1.5;
| |
| }
| |
| | |
| /* Textos pequeños en los títulos (ej. "Incluye Babys") */
| |
| .oroza-text-small {
| |
| font-size: 16px;
| |
| font-weight: 500;
| |
| color: #4a6481;
| |
| vertical-align: middle;
| |
| }
| |
| | |
| /* =========================================================
| |
| CLASES ADICIONALES PARA MERCADO BÁSICO
| |
| Iconos pequeños y márgenes
| |
| ========================================================= */
| |
| | |
| /* Iconos de 18px alineados con el texto */
| |
| .oroza-icon-sm {
| |
| height: 24px;
| |
| width: auto;
| |
| vertical-align: middle;
| |
| margin-right: 8px;
| |
| }
| |
| | |
| /* Margen superior para separar párrafos continuos */
| |
| .oroza-mt-16 {
| |
| margin-top: 16px;
| |
| }
| |
| | |
| /* =========================================================
| |
| CLASES ADICIONALES PARA IMÁGENES DE EXHIBICIÓN (MEJORADO)
| |
| Centrado, tamaños optimizados e interactividad.
| |
| ========================================================= */
| |
| | |
| /* Imagen principal media (Banners, mapas, capturas grandes) */
| |
| .oroza-img-lg {
| |
| display: block;
| |
| /* UX: Reducido al 65% para no competir con el texto */
| |
| max-width: 65%;
| |
| width: 100%;
| |
| height: auto;
| |
| /* UI: Bordes redondeados estéticos */
| |
| border-radius: 22px;
| |
| /* UX: Siempre centrada */
| |
| margin: 0 auto 24px auto;
| |
| /* UI: Sombra suave inicial */
| |
| box-shadow: 0 6px 16px rgba(43, 74, 109, 0.05);
| |
| /* UI: Transición suave para el efecto hover */
| |
| transition: all 0.3s ease-in-out;
| |
| cursor: pointer; /* Indica interactividad */
| |
| }
| |
| | |
| /* Efecto Hover para .oroza-img-lg */
| |
| .oroza-img-lg:hover {
| |
| /* UI: Se eleva ligeramente */
| |
| transform: translateY(-5px) scale(1.01);
| |
| /* UI: Sombra más profunda y definida */
| |
| box-shadow: 0 14px 30px rgba(43, 74, 109, 0.12);
| |
| }
| |
| | |
| /* Imagen pequeña (Capturas de interfaz, iconos grandes) */
| |
| .oroza-img-sm {
| |
| display: block; | |
| max-width: 300px;
| |
| width: 100%;
| |
| height: auto;
| |
| border-radius: 12px;
| |
| /* UX: Siempre centrada */
| |
| margin: 20px auto 0 auto;
| |
| box-shadow: 0 8px 18px rgba(43, 74, 109, 0.08);
| |
| /* UI: Interactividad sutil también aquí */
| |
| transition: transform 0.2s ease;
| |
| }
| |
| | |
| .oroza-img-sm:hover {
| |
| transform: scale(1.03);
| |
| }
| |
| | |
| /* Utilidad de margen inferior */
| |
| .oroza-mb-16 {
| |
| margin-bottom: 16px;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| CLASES ADICIONALES PARA QUEST STONES (V2 MEJORADA)
| |
| Corrige anchos de tabla, alinea sprites y pule mapas
| |
| ========================================================= */
| |
| | |
| /* Sobrescribe el ancho del <th> (40%) para que la fila de 4 columnas no se aplaste */
| |
| .oroza-info-table.oroza-table-stats tbody th {
| |
| width: 20%;
| |
| white-space: nowrap;
| |
| }
| |
| .oroza-info-table.oroza-table-stats tbody td {
| |
| width: 30%;
| |
| }
| |
| | |
| /* Fila del monstruo: flexbox en columna para centrar sprite arriba y texto abajo */
| |
| .oroza-mob-cell {
| |
| display: flex;
| |
| flex-direction: column;
| |
| align-items: center; | | align-items: center; |
| justify-content: center; | | justify-content: center; |
| text-align: center;
| | gap: 7px; |
| gap: 8px; | | min-width: 118px; |
| padding: 8px 0; | | height: 44px; |
| }
| | padding: 0 18px; |
| | | border: 1px solid #bd9000; |
| .oroza-mob-cell span {
| | border-radius: 13px; |
| font-weight: 600;
| | background: linear-gradient(180deg, #ffe36a 0%, #efc21b 100%); |
| color: #1e4166;
| | color: #1c2b3b; |
| }
| | font-family: inherit; |
| | |
| /* Sprites de monstruos: tamaño ajustado para centrado vertical */
| |
| .oroza-mob-sprite {
| |
| display: block;
| |
| max-height: 65px;
| |
| width: auto;
| |
| margin: 0 auto;
| |
| filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
| |
| }
| |
| | |
| /* Iconos en los títulos */
| |
| .oroza-icon-md {
| |
| height: 26px; | |
| width: auto; | |
| vertical-align: middle;
| |
| margin-right: 8px;
| |
| }
| |
| | |
| /* Título de sección para los mapas */
| |
| .oroza-subtitle {
| |
| font-size: 17px;
| |
| font-weight: 800;
| |
| color: #183554;
| |
| margin: 24px 0 14px 0;
| |
| text-align: center;
| |
| }
| |
| | |
| /* Grid flexible para las tarjetas de mapas */
| |
| .oroza-map-flex {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| justify-content: center;
| |
| gap: 14px;
| |
| margin-top: 10px;
| |
| }
| |
| | |
| /* Tarjeta individual del mapa */
| |
| .oroza-map-item {
| |
| background: #ffffff;
| |
| border: 1px solid #d5e1ee; | |
| border-radius: 12px; | |
| padding: 10px; | |
| width: 130px;
| |
| text-align: center;
| |
| box-shadow: 0 4px 10px rgba(43, 74, 109, 0.04);
| |
| transition: transform 0.2s ease, box-shadow 0.2s ease;
| |
| }
| |
| | |
| .oroza-map-item:hover {
| |
| transform: translateY(-4px);
| |
| box-shadow: 0 8px 18px rgba(43, 74, 109, 0.1);
| |
| border-color: #b9d0e8;
| |
| }
| |
| | |
| .oroza-map-item strong {
| |
| display: block;
| |
| margin-bottom: 8px;
| |
| font-size: 13px;
| |
| color: #2b4a6d;
| |
| }
| |
| | |
| /* Imagen interior del mapa */
| |
| .oroza-map-img {
| |
| width: 100%;
| |
| height: auto;
| |
| border-radius: 6px;
| |
| border: 1px solid #eef3f8;
| |
| display: block;
| |
| margin: 0 auto;
| |
| }
| |
| | |
| /* Utilidad para texto secundario */
| |
| .oroza-text-muted {
| |
| color: #7b8d9f; | |
| font-size: 13px; | |
| margin-left: 6px;
| |
| }
| |
| | |
| /* =========================================================
| |
| CLASES ADICIONALES PARA MVPs Y DROPS
| |
| ========================================================= */
| |
| | |
| /* Sprite para Jefes (MVP): Permite que se vean más grandes y añade sombra */
| |
| .oroza-mvp-sprite {
| |
| display: block;
| |
| max-height: 140px;
| |
| width: auto;
| |
| margin: 0 auto 16px auto;
| |
| filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15));
| |
| }
| |
| | |
| /* Lista limpia y alineada para los drops (Evita estilos en línea) */
| |
| .oroza-drop-list {
| |
| list-style: none;
| |
| padding-left: 0;
| |
| margin: 0 auto;
| |
| display: inline-block;
| |
| text-align: left;
| |
| }
| |
| | |
| .oroza-drop-list li {
| |
| display: flex;
| |
| align-items: center;
| |
| margin-bottom: 8px;
| |
| font-size: 14px; | | font-size: 14px; |
| color: #44566d;
| |
| }
| |
|
| |
| .oroza-drop-list strong {
| |
| color: #1e4166;
| |
| margin-left: 4px;
| |
| }
| |
|
| |
| /* =========================================================
| |
| CLASES ADICIONALES PARA IMÁGENES DE EXHIBICIÓN (MEJORADO)
| |
| Centrado, tamaños optimizados e interactividad.
| |
| ========================================================= */
| |
|
| |
| /* Imagen principal media (Banners, mapas, capturas grandes) */
| |
| .oroza-img-lg {
| |
| display: block;
| |
| /* UX: Reducido al 65% para no competir con el texto */
| |
| max-width: 65%;
| |
| width: 100%;
| |
| height: auto;
| |
| /* UI: Bordes redondeados estéticos */
| |
| border-radius: 22px;
| |
| /* UX: Siempre centrada */
| |
| margin: 0 auto 24px auto;
| |
| /* UI: Sombra suave inicial */
| |
| box-shadow: 0 6px 16px rgba(43, 74, 109, 0.05);
| |
| /* UI: Transición suave para el efecto hover */
| |
| transition: all 0.3s ease-in-out;
| |
| cursor: pointer; /* Indica interactividad */
| |
| }
| |
|
| |
| /* Efecto Hover para .oroza-img-lg */
| |
| .oroza-img-lg:hover {
| |
| /* UI: Se eleva ligeramente */
| |
| transform: translateY(-5px) scale(1.01);
| |
| /* UI: Sombra más profunda y definida */
| |
| box-shadow: 0 14px 30px rgba(43, 74, 109, 0.12);
| |
| }
| |
|
| |
| /* Imagen pequeña (Capturas de interfaz, iconos grandes) */
| |
| .oroza-img-sm {
| |
| display: block;
| |
| max-width: 300px;
| |
| width: 100%;
| |
| height: auto;
| |
| border-radius: 12px;
| |
| /* UX: Siempre centrada */
| |
| margin: 20px auto 0 auto;
| |
| box-shadow: 0 8px 18px rgba(43, 74, 109, 0.08);
| |
| /* UI: Interactividad sutil también aquí */
| |
| transition: transform 0.2s ease;
| |
| }
| |
|
| |
| .oroza-img-sm:hover {
| |
| transform: scale(1.03);
| |
| }
| |
|
| |
| /* Utilidad de margen inferior */
| |
| .oroza-mb-16 {
| |
| margin-bottom: 16px;
| |
| }
| |
|
| |
| /* =========================================================
| |
| CLASES ADICIONALES PARA TABLAS EXPANDIDAS
| |
| Evita que las columnas de recompensas se vean apretadas
| |
| ========================================================= */
| |
|
| |
| /* Variante para tablas con contenido de items, expande columnas */
| |
| .oroza-table.oroza-table-expanded {
| |
| table-layout: auto !important; /* UX: Permite expansión natural */
| |
| width: 100%;
| |
| }
| |
|
| |
| .oroza-table.oroza-table-expanded th,
| |
| .oroza-table.oroza-table-expanded td {
| |
| padding: 16px 18px !important; /* UX: Más espacio interno */
| |
| }
| |
|
| |
| /* =========================================================
| |
| CLASES ADICIONALES PARA BATTLEGROUNDS
| |
| Alineación de texto, imágenes secundarias y vendedores
| |
| ========================================================= */
| |
|
| |
| /* Utilidad para centrar textos */
| |
| .oroza-text-center {
| |
| text-align: center;
| |
| }
| |
|
| |
| /* Imagen mediana (Mapas y Banners secundarios) */
| |
| .oroza-img-md {
| |
| display: block;
| |
| max-width: 450px;
| |
| width: 100%;
| |
| height: auto;
| |
| border-radius: 14px;
| |
| margin: 20px auto;
| |
| box-shadow: 0 8px 20px rgba(43, 74, 109, 0.08);
| |
| transition: transform 0.3s ease;
| |
| }
| |
|
| |
| .oroza-img-md:hover {
| |
| transform: scale(1.02);
| |
| }
| |
|
| |
| /* Iconos en línea (botones y medallas) */
| |
| .oroza-inline-icon {
| |
| height: 24px;
| |
| width: auto;
| |
| vertical-align: middle;
| |
| margin: 0 4px;
| |
| }
| |
|
| |
| /* Iconos de NPC vendedores */
| |
| .oroza-npc-icon {
| |
| height: 55px;
| |
| width: auto;
| |
| vertical-align: middle;
| |
| margin-right: 16px;
| |
| filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
| |
| }
| |
|
| |
| /* Lista estilizada de Vendedores (Tiendas) */
| |
| .oroza-vendor-list {
| |
| list-style: none;
| |
| padding: 0;
| |
| margin: 20px auto 0;
| |
| max-width: 800px;
| |
| text-align: left;
| |
| }
| |
|
| |
| .oroza-vendor-list li {
| |
| background: #fbfdff;
| |
| border: 1px solid #d5e1ee;
| |
| border-radius: 12px;
| |
| padding: 16px 20px;
| |
| margin-bottom: 16px;
| |
| display: flex;
| |
| align-items: center;
| |
| box-shadow: 0 4px 10px rgba(43, 74, 109, 0.03);
| |
| }
| |
|
| |
| .oroza-vendor-text {
| |
| flex: 1;
| |
| font-size: 15px;
| |
| color: #44566d;
| |
| line-height: 1.6;
| |
| }
| |
|
| |
| .oroza-vendor-text strong {
| |
| color: #1e4166;
| |
| font-size: 16px;
| |
| }
| |
|
| |
| .oroza-vendor-sub {
| |
| display: block;
| |
| font-size: 13.5px;
| |
| color: #7b8d9f;
| |
| margin-top: 4px;
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| /* =========================================================
| |
| CLASES PARA OBJETOS ESPECIALES Y ESENCIAS (COMPLETO)
| |
| ========================================================= */
| |
|
| |
| /* Iconos de items alineados */
| |
| .oroza-item-icon {
| |
| width: 24px;
| |
| height: auto;
| |
| vertical-align: middle;
| |
| margin-right: 8px;
| |
| }
| |
|
| |
| /* Rejilla de bonos para Libros de Secretos */
| |
| .oroza-bonus-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
| |
| gap: 12px;
| |
| margin-top: 15px;
| |
| padding: 0;
| |
| list-style: none;
| |
| }
| |
|
| |
| .oroza-bonus-grid li {
| |
| background: #f8fbff;
| |
| padding: 8px 12px;
| |
| border-radius: 8px;
| |
| font-size: 13px;
| |
| border: 1px solid #d5e1ee;
| |
| color: #44566d;
| |
| text-align: left;
| |
| }
| |
|
| |
| .oroza-bonus-grid li strong {
| |
| color: #1e4166;
| |
| display: inline-block;
| |
| min-width: 70px;
| |
| }
| |
|
| |
| /* Lista de fragmentos compacta dentro de tablas */
| |
| .oroza-fragment-list {
| |
| margin: 0;
| |
| padding: 10px 0;
| |
| list-style: none;
| |
| text-align: left;
| |
| }
| |
|
| |
| .oroza-fragment-list li {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 8px;
| |
| margin-bottom: 5px;
| |
| font-size: 13px;
| |
| }
| |
|
| |
| /* =========================================================
| |
| CLASES ADICIONALES PARA DUNGEON DEL DÍA (ACTUALIZADO)
| |
| ========================================================= */
| |
|
| |
| /* Tarjeta del NPC centrada y con ancho máximo */
| |
| .oroza-npc-card {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| gap: 24px;
| |
| background: #fbfdff;
| |
| border: 1px solid #d5e1ee;
| |
| border-radius: 16px;
| |
| padding: 24px;
| |
| margin: 0 auto;
| |
| max-width: 650px; /* Evita que se estire y fuerza el centrado */
| |
| box-shadow: 0 6px 16px rgba(43, 74, 109, 0.05);
| |
| text-align: center; /* Centra el texto interior */
| |
| }
| |
|
| |
| .oroza-npc-card img {
| |
| width: 100px;
| |
| min-width: 100px;
| |
| height: auto;
| |
| border-radius: 12px;
| |
| filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12));
| |
| }
| |
|
| |
| @media (max-width: 768px) {
| |
| .oroza-npc-card {
| |
| flex-direction: column;
| |
| gap: 16px;
| |
| }
| |
| }
| |
|
| |
| /* Modificador para centrar el texto de las celdas en la tabla */
| |
| .oroza-info-table.oroza-table-centered tbody th,
| |
| .oroza-info-table.oroza-table-centered tbody td {
| |
| text-align: center;
| |
| }
| |
|
| |
| /* Contenedor de tabla con ancho reducido para listas de 1 sola columna */
| |
| .oroza-table-wrap-md {
| |
| max-width: 500px;
| |
| margin: 20px auto 0 auto;
| |
| overflow-x: auto;
| |
| border-radius: 16px;
| |
| }
| |
|
| |
| /* =========================================================
| |
| CLASES ADICIONALES PARA CÓDIGOS PROMOCIONALES (MEJORADO)
| |
| ========================================================= */
| |
| .oroza-promo-wrapper {
| |
| text-align: center;
| |
| margin: 30px 0;
| |
| }
| |
|
| |
| .oroza-promo-code {
| |
| display: inline-block;
| |
| background: linear-gradient(135deg, #fff9e6 0%, #fff2cc 100%);
| |
| border: 3px dashed #ffb400;
| |
| border-radius: 16px;
| |
| padding: 20px 40px;
| |
| font-size: 34px;
| |
| font-family: 'Courier New', Courier, monospace; /* Tipografía de código */
| |
| font-weight: 900; | | font-weight: 900; |
| color: #c79400;
| |
| letter-spacing: 5px;
| |
| box-shadow: 0 10px 25px rgba(255, 180, 0, 0.2);
| |
| text-transform: uppercase;
| |
| user-select: all; /* UX: Selecciona todo el texto con un solo clic */
| |
| cursor: pointer; | | cursor: pointer; |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | | box-shadow: |
| | 0 7px 16px rgba(190, 142, 0, 0.25), |
| | inset 0 1px 0 rgba(255, 255, 255, 0.65); |
| | transition: |
| | background 0.18s ease, |
| | transform 0.18s ease, |
| | box-shadow 0.18s ease; |
| } | | } |
|
| |
|
| .oroza-promo-code:hover { | | .oroza-global-search-submit:hover, |
| transform: scale(1.05); | | .oroza-global-search-submit:focus { |
| box-shadow: 0 14px 30px rgba(255, 180, 0, 0.35); | | background: linear-gradient(180deg, #ffea82 0%, #f5cf36 100%); |
| border-color: #dcae1d; | | transform: translateY(-1px); |
| | box-shadow: |
| | 0 9px 19px rgba(190, 142, 0, 0.29), |
| | inset 0 1px 0 rgba(255, 255, 255, 0.72); |
| | outline: none; |
| } | | } |
|
| |
|
| .oroza-promo-hint { | | .oroza-global-search-helper { |
| display: block;
| | margin: 7px 8px 0; |
| margin-top: 12px; | | color: #64768b; |
| font-size: 13px;
| | font-size: 11.5px; |
| color: #7b8d9f; | | font-weight: 550; |
| font-weight: 800;
| | line-height: 1.45; |
| text-transform: uppercase;
| |
| letter-spacing: 1px;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| CLASES ADICIONALES PARA PROGRAMA DE CREADORES (MEJORADO)
| |
| ========================================================= */
| |
| | |
| /* Caja para el formulario (Contraste perfecto en fondos oscuros) */
| |
| .oroza-code-block {
| |
| background: rgba(15, 25, 38, 0.4); /* Fondo oscuro translúcido */
| |
| border: 1px solid rgba(255, 255, 255, 0.15);
| |
| border-left: 4px solid #ffb400; /* Toque dorado Oroza */
| |
| padding: 18px 22px;
| |
| border-radius: 8px;
| |
| font-family: 'Courier New', Courier, monospace;
| |
| font-size: 14.5px; | |
| color: #f8fbff; /* Texto blanco muy legible */
| |
| line-height: 1.8;
| |
| margin: 20px auto;
| |
| max-width: 700px;
| |
| text-align: left;
| |
| user-select: all; /* Permite copiar todo el bloque con un clic */
| |
| cursor: pointer;
| |
| box-shadow: inset 0 2px 6px rgba(0,0,0,0.2);
| |
| transition: all 0.2s ease;
| |
| }
| |
| | |
| .oroza-code-block:hover {
| |
| background: rgba(15, 25, 38, 0.6);
| |
| border-color: rgba(255, 180, 0, 0.4);
| |
| }
| |
| | |
| /* Botón estilo Discord */
| |
| .oroza-btn-discord {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| gap: 10px;
| |
| background: #5865F2;
| |
| color: #ffffff !important;
| |
| padding: 14px 28px;
| |
| border-radius: 12px;
| |
| font-weight: 800; | |
| font-size: 16px; | |
| text-decoration: none !important;
| |
| box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
| |
| transition: transform 0.2s ease, box-shadow 0.2s ease;
| |
| margin-top: 10px;
| |
| }
| |
| | |
| .oroza-btn-discord:hover {
| |
| transform: translateY(-3px);
| |
| box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
| |
| background: #4752C4;
| |
| }
| |
| | |
| /* =========================================================
| |
| CLASES ADICIONALES PARA IFRAMES (WIDGETBOT / DISCORD)
| |
| Actualizado para ocupar el 100% del ancho disponible
| |
| ========================================================= */
| |
| .oroza-iframe-container {
| |
| width: 100%;
| |
| max-width: 100%; /* Permite que explote al 100% del contenedor padre */
| |
| margin: 0 auto 30px auto;
| |
| border-radius: 16px;
| |
| overflow: hidden;
| |
| box-shadow: 0 10px 30px rgba(43, 74, 109, 0.15);
| |
| border: 1px solid #d5e1ee;
| |
| background: #ffffff;
| |
| }
| |
| | |
| .oroza-iframe-container iframe {
| |
| width: 100%;
| |
| height: 1250px; /* Altura masiva para leer cómodamente */
| |
| min-height: 85vh; /* Asegura buena altura dinámica */
| |
| display: block;
| |
| border: none;
| |
| }
| |
| | |
| /* Ajuste proporcional para móviles */
| |
| @media (max-width: 768px) {
| |
| .oroza-iframe-container iframe {
| |
| height: 850px;
| |
| }
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| CLASES ADICIONALES PARA RENACIMIENTO LEGENDARIO
| |
| ========================================================= */
| |
| | |
| /* Tarjeta para NPCs o Ítems destacados con texto al lado */
| |
| .oroza-feature-card { | |
| display: flex;
| |
| align-items: center;
| |
| gap: 24px;
| |
| background: #fbfdff;
| |
| border: 1px solid #d5e1ee;
| |
| border-radius: 16px;
| |
| padding: 24px;
| |
| margin: 20px 0;
| |
| box-shadow: 0 6px 16px rgba(43, 74, 109, 0.05);
| |
| }
| |
| | |
| .oroza-feature-card img {
| |
| width: 220px; /* Tamaño ideal para la insignia y la valkyrie */
| |
| height: auto;
| |
| border-radius: 12px;
| |
| filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12));
| |
| flex-shrink: 0;
| |
| }
| |
| | |
| /* Modificador para centrar el texto de celdas en tablas de stats */
| |
| .oroza-table-centered th,
| |
| .oroza-table-centered td {
| |
| text-align: center; | | text-align: center; |
| vertical-align: middle;
| |
| } | | } |
|
| |
|
| @media (max-width: 768px) {
| | .oroza-global-search-helper kbd { |
| .oroza-feature-card {
| | display: inline-block; |
| flex-direction: column;
| | min-width: 18px; |
| text-align: center;
| | padding: 1px 5px; |
| }
| | border: 1px solid #cdd8e4; |
| }
| | border-bottom-width: 2px; |
| | | border-radius: 5px; |
| /* =========================================================
| |
| CLASES ADICIONALES PARA CARRERA AL NIVEL MÁXIMO (PODIO)
| |
| ========================================================= */
| |
| | |
| /* Grid de 3 columnas para el podio */
| |
| .oroza-grid-3 {
| |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
| |
| gap: 20px;
| |
| margin: 20px 0; | |
| }
| |
| | |
| /* Tarjetas Base del Podio */
| |
| .oroza-podium-card {
| |
| border-radius: 16px;
| |
| padding: 24px 20px; | |
| box-shadow: 0 8px 20px rgba(43, 74, 109, 0.06);
| |
| transition: transform 0.2s ease, box-shadow 0.2s ease;
| |
| }
| |
| | |
| .oroza-podium-card:hover {
| |
| transform: translateY(-5px);
| |
| box-shadow: 0 12px 25px rgba(43, 74, 109, 0.12);
| |
| }
| |
| | |
| .oroza-podium-card h3 {
| |
| margin-top: 0;
| |
| font-size: 22px;
| |
| border-bottom: 2px solid rgba(0,0,0,0.05);
| |
| padding-bottom: 12px;
| |
| margin-bottom: 16px;
| |
| text-align: center;
| |
| }
| |
| | |
| .oroza-podium-card ul {
| |
| list-style: none;
| |
| padding-left: 0;
| |
| margin: 0;
| |
| font-size: 14px;
| |
| color: #44566d;
| |
| }
| |
| | |
| .oroza-podium-card li {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 10px;
| |
| margin-bottom: 12px;
| |
| line-height: 1.4;
| |
| }
| |
| | |
| .oroza-podium-card li strong {
| |
| color: #1e4166;
| |
| font-size: 15px;
| |
| }
| |
| | |
| /* Colores específicos del podio */
| |
| .oroza-podium-gold {
| |
| background: linear-gradient(180deg, #fffcf0 0%, #fff7d6 100%);
| |
| border: 1px solid #ffeeba;
| |
| }
| |
| .oroza-podium-gold h3 { color: #b8860b; }
| |
| | |
| .oroza-podium-silver {
| |
| background: linear-gradient(180deg, #f4f9ff 0%, #e6f0fa 100%);
| |
| border: 1px solid #b8daff;
| |
| }
| |
| .oroza-podium-silver h3 { color: #4682b4; }
| |
| | |
| .oroza-podium-bronze {
| |
| background: linear-gradient(180deg, #fff9f5 0%, #ffeee6 100%);
| |
| border: 1px solid #f5c6cb; | |
| }
| |
| .oroza-podium-bronze h3 { color: #cd5c5c; }
| |
| | |
| /* Modificador para centrar el texto de las celdas en tablas */
| |
| .oroza-info-table.oroza-table-centered th,
| |
| .oroza-info-table.oroza-table-centered td {
| |
| text-align: center;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| CLASES PARA BONUS POR DROP Y TABLAS EXTENSAS
| |
| ========================================================= */
| |
| | |
| /* Grid para tarjetas superiores */
| |
| .oroza-grid-3 {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
| |
| gap: 20px;
| |
| margin: 20px 0 30px;
| |
| }
| |
| | |
| .oroza-chance-card {
| |
| padding: 20px;
| |
| border-radius: 16px; | |
| text-align: center;
| |
| box-shadow: 0 6px 16px rgba(43, 74, 109, 0.05);
| |
| transition: transform 0.2s ease;
| |
| }
| |
| | |
| .oroza-chance-card:hover { transform: translateY(-4px); }
| |
| .oroza-chance-card h3 { margin-top: 0; font-size: 22px; margin-bottom: 10px; }
| |
| .oroza-chance-card p { margin-bottom: 0; font-size: 14.5px; color: #44566d; line-height: 1.5; }
| |
| | |
| .oroza-chance-1 { background: #fbfdff; border: 1px solid #d5e1ee; }
| |
| .oroza-chance-1 h3 { color: #2b4a6d; }
| |
| .oroza-chance-2 { background: #f0f8ff; border: 1px solid #b8daff; }
| |
| .oroza-chance-2 h3 { color: #1e70bf; }
| |
| .oroza-chance-3 { background: #fffcf0; border: 1px solid #ffeeba; }
| |
| .oroza-chance-3 h3 { color: #dcae1d; }
| |
| | |
| /* Controles de Filtro */
| |
| .oroza-filter-controls { margin-bottom: 20px; text-align: center; }
| |
| .oroza-cat-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 15px; }
| |
| | |
| .oroza-cat-btn {
| |
| appearance: none; border: 1px solid #d5e1ee; background: #ffffff; color: #2f3742;
| |
| padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700;
| |
| cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.02);
| |
| }
| |
| .oroza-cat-btn:hover { border-color: #ffb400; background: #fffcf0; }
| |
| .oroza-cat-btn.active {
| |
| background: linear-gradient(180deg, #fffaf1 0%, #fff4dd 100%);
| |
| border-color: #dcae1d; color: #7a5a16; box-shadow: 0 4px 10px rgba(220, 174, 29, 0.15);
| |
| }
| |
| | |
| .oroza-input {
| |
| padding: 10px 16px; font-size: 14px; text-align: center; border: 1px solid #d5e1ee;
| |
| border-radius: 12px; outline: none; background: #ffffff; color: #2b4a6d; | |
| width: 100%; max-width: 500px; margin: 0 auto; transition: all 0.25s ease;
| |
| }
| |
| .oroza-input:focus { border-color: #ffb400; box-shadow: 0 0 0 3px rgba(255, 180, 0, 0.15); }
| |
| | |
| /* Modificadores de Tablas Gigantes */
| |
| .oroza-table-centered th, .oroza-table-centered td { text-align: center; vertical-align: middle; }
| |
| .oroza-text-left { text-align: left !important; }
| |
| | |
| /* Colores de Rareza para evitar estilos en línea */
| |
| .text-common { color: #28a745; font-weight: 800; }
| |
| .text-rare { color: #1e70bf; font-weight: 800; }
| |
| .text-epic { color: #6f42c1; font-weight: 800; }
| |
| | |
| /* =========================================================
| |
| CLASES ADICIONALES PARA TABLAS ULTRA COMPACTAS (Ej. Drops)
| |
| ========================================================= */
| |
| .oroza-info-table.oroza-table-compact tbody th,
| |
| .oroza-info-table.oroza-table-compact tbody td {
| |
| font-size: 12.5px !important; /* Letra ligeramente más pequeña */
| |
| padding: 8px 6px !important; /* Reduce el espacio interno de la celda */
| |
| }
| |
| | |
| .oroza-info-table.oroza-table-compact thead th {
| |
| font-size: 13px !important; /* Encabezado un poco más grande que el texto */
| |
| padding: 10px 6px !important;
| |
| }
| |
| | |
| /* En celulares, la compactamos un nivel más para evitar scroll excesivo */
| |
| @media (max-width: 768px) {
| |
| .oroza-info-table.oroza-table-compact tbody th,
| |
| .oroza-info-table.oroza-table-compact tbody td {
| |
| font-size: 11.5px !important;
| |
| padding: 6px 4px !important;
| |
| }
| |
| }
| |
| | |
| /* =========================================================
| |
| CLASES ADICIONALES PARA TARJETAS DE PRECIO (PRICING)
| |
| ========================================================= */
| |
| | |
| /* Grid de 3 columnas para los paquetes VIP */
| |
| .oroza-grid-3 {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
| |
| gap: 20px;
| |
| margin: 20px 0;
| |
| }
| |
| | |
| /* Tarjeta de Precio Destacada */
| |
| .oroza-pricing-card {
| |
| background: #ffffff; | | background: #ffffff; |
| border: 1px solid #d5e1ee; | | color: #354b63; |
| border-top: 5px solid #ffb400; /* Borde superior dorado VIP */ | | font: 700 10px/1.3 "Segoe UI", Arial, sans-serif; |
| border-radius: 16px;
| | box-shadow: 0 1px 2px rgba(26, 44, 64, 0.06); |
| padding: 24px 20px;
| |
| text-align: center;
| |
| box-shadow: 0 8px 20px rgba(43, 74, 109, 0.08); | |
| transition: transform 0.2s ease, box-shadow 0.2s ease;
| |
| } | | } |
|
| |
|
| .oroza-pricing-card:hover { | | .oroza-global-search-results { |
| transform: translateY(-5px);
| | position: absolute; |
| box-shadow: 0 12px 25px rgba(43, 74, 109, 0.15);
| | top: calc(100% + 10px); |
| border-color: #dcae1d;
| | left: 50%; |
| }
| | z-index: 9999; |
| | |
| .oroza-pricing-title {
| |
| font-size: 20px; | |
| font-weight: 800;
| |
| color: #2b4a6d;
| |
| margin-top: 0; | |
| margin-bottom: 15px;
| |
| text-transform: uppercase;
| |
| letter-spacing: 1px;
| |
| }
| |
| | |
| .oroza-pricing-cost {
| |
| display: flex;
| |
| flex-direction: column;
| |
| gap: 10px;
| |
| margin: 20px 0;
| |
| padding: 15px 0;
| |
| border-top: 1px solid #eef3f8;
| |
| border-bottom: 1px solid #eef3f8;
| |
| }
| |
| | |
| .oroza-pricing-cost span {
| |
| font-size: 16px;
| |
| font-weight: 700;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| gap: 8px;
| |
| }
| |
| | |
| /* =========================================================
| |
| CLASES ACTUALIZADAS PARA GALERÍA POKÉMON (CLIC PARA AMPLIAR)
| |
| ========================================================= */
| |
| | |
| .oroza-pokedex-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
| |
| gap: 16px;
| |
| margin: 30px 0 10px 0;
| |
| }
| |
| | |
| /* El enlace ahora es la tarjeta en la cuadrícula */
| |
| .oroza-pokedex-link {
| |
| display: block; | |
| text-decoration: none !important; | |
| transition: transform 0.25s ease;
| |
| }
| |
| | |
| .oroza-pokedex-link img {
| |
| width: 100%; | | width: 100%; |
| height: auto; | | max-height: min(64vh, 560px); |
| border-radius: 12px; | | overflow-y: auto; |
| background: #ffffff;
| |
| border: 1px solid #d5e1ee;
| |
| padding: 5px; /* Marco blanco */
| |
| box-sizing: border-box; | | box-sizing: border-box; |
| box-shadow: 0 4px 10px rgba(43, 74, 109, 0.05);
| | transform: translateX(-50%); |
| transition: all 0.25s ease;
| | background: rgba(255, 255, 255, 0.985); |
| cursor: zoom-in; /* Ícono de lupa al pasar el ratón */
| | border: 1px solid #d5e0eb; |
| }
| |
| | |
| /* Efecto hover estilo carta coleccionable */
| |
| .oroza-pokedex-link:hover img {
| |
| transform: translateY(-6px) scale(1.08); | |
| box-shadow: 0 12px 24px rgba(43, 74, 109, 0.2); | |
| border-color: #ffb400; /* Borde dorado */
| |
| position: relative;
| |
| z-index: 10;
| |
| }
| |
| | |
| /* Ajuste para celulares */
| |
| @media (max-width: 768px) {
| |
| .oroza-pokedex-grid {
| |
| grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
| |
| gap: 10px;
| |
| }
| |
| }
| |
| | |
| /* =========================================================
| |
| CLASES ADICIONALES PARA GALERÍA DE LEGENDARIOS (CON ZOOM)
| |
| ========================================================= */
| |
| | |
| /* Tarjeta contenedora limpia y centrada */
| |
| .oroza-legendary-card {
| |
| background: #ffffff;
| |
| border: 1px solid #d7e2ee; | |
| border-radius: 18px; | | border-radius: 18px; |
| padding: 16px;
| | box-shadow: |
| text-align: center;
| | 0 24px 55px rgba(16, 31, 49, 0.23), |
| box-shadow: 0 8px 20px rgba(43, 74, 109, 0.05); | | 0 4px 12px rgba(16, 31, 49, 0.08); |
| transition: transform 0.2s ease, box-shadow 0.2s ease;
| | overscroll-behavior: contain; |
| } | | } |
|
| |
|
| .oroza-legendary-card:hover { | | .oroza-global-search-results[hidden] { |
| transform: translateY(-4px);
| | display: none !important; |
| box-shadow: 0 12px 25px rgba(43, 74, 109, 0.12);
| |
| border-color: #ffb400; /* Borde dorado al pasar el ratón */
| |
| }
| |
| | |
| /* Enlace que envuelve la imagen (Aplica el cursor de lupa) */
| |
| .oroza-legendary-link {
| |
| display: block; | |
| cursor: zoom-in;
| |
| text-decoration: none !important;
| |
| border-radius: 12px;
| |
| overflow: hidden;
| |
| margin-bottom: 14px; /* Separación con el nombre */
| |
| }
| |
| | |
| /* Imagen base fluida */
| |
| .oroza-legendary-link img {
| |
| width: 100%;
| |
| height: auto;
| |
| display: block;
| |
| transition: transform 0.3s ease;
| |
| } | | } |
|
| |
|
| /* Efecto de acercamiento interno en la imagen */
| | .oroza-search-status { |
| .oroza-legendary-link:hover img { | |
| transform: scale(1.05);
| |
| }
| |
| | |
| /* Nombre del Pokémon Legendario */
| |
| .oroza-legendary-name {
| |
| font-size: 18px;
| |
| font-weight: 800;
| |
| color: #2b4a6d;
| |
| display: block;
| |
| letter-spacing: 0.5px;
| |
| }
| |
| | |
| /* =========================================================
| |
| CLASES ADICIONALES PARA GALERÍA DE HATS (GIFS)
| |
| ========================================================= */
| |
| .oroza-gallery-gif {
| |
| width: 100%;
| |
| height: auto;
| |
| border-radius: 16px;
| |
| border: 1px solid #d5e1ee;
| |
| box-shadow: 0 4px 10px rgba(43, 74, 109, 0.05);
| |
| transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
| |
| cursor: zoom-in;
| |
| background-color: #ffffff;
| |
| }
| |
| | |
| .oroza-gallery-gif:hover {
| |
| transform: translateY(-4px) scale(1.02);
| |
| box-shadow: 0 10px 20px rgba(43, 74, 109, 0.12);
| |
| border-color: #ffb400;
| |
| }
| |
| | |
| /* Contenedor especial para centrar el último GIF */
| |
| .oroza-gallery-center {
| |
| text-align: center;
| |
| margin-top: 20px;
| |
| }
| |
| | |
| .oroza-gallery-center .oroza-gallery-gif {
| |
| max-width: 450px;
| |
| margin: 0 auto;
| |
| }
| |
| | |
| /* =========================================================
| |
| CORRECCIÓN DE BOTONES Y BOTÓN DORADO (FONDOS OSCUROS)
| |
| ========================================================= */
| |
| | |
| /* Elimina el error de los signos "??", anulando el pseudo-elemento roto */
| |
| .button-icon::before {
| |
| content: none !important;
| |
| }
| |
| | |
| /* Nuevo botón dorado para resaltar en fondos oscuros (como .oroza-download-highlight) */
| |
| .oroza-btn-gold {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| gap: 8px;
| |
| background: #ffb400;
| |
| color: #162234 !important;
| |
| padding: 12px 24px;
| |
| border-radius: 12px;
| |
| font-weight: 800;
| |
| font-size: 15px;
| |
| text-decoration: none !important;
| |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
| |
| transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
| |
| }
| |
| | |
| .oroza-btn-gold:hover {
| |
| transform: translateY(-3px);
| |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
| |
| background: #ffd043;
| |
| text-decoration: none !important;
| |
| }
| |
| | |
| /* =========================================================
| |
| CLASES ADICIONALES PARA ENDLESS TOWER (GIFS DE MOBS)
| |
| ========================================================= */
| |
| .oroza-mob-gallery {
| |
| display: flex; | | display: flex; |
| flex-wrap: wrap;
| |
| gap: 8px;
| |
| align-items: center; | | align-items: center; |
| justify-content: center; | | gap: 10px; |
| margin-top: 8px;
| | padding: 18px 20px; |
| padding-top: 8px; | | color: #5a6e84; |
| border-top: 1px dashed #e4ebf3; | | font-size: 13px; |
| }
| | font-weight: 650; |
| | |
| .oroza-mob-gallery img {
| |
| max-height: 45px; | |
| width: auto;
| |
| filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
| |
| transition: transform 0.2s ease; | |
| }
| |
| | |
| .oroza-mob-gallery img:hover {
| |
| transform: scale(1.15) translateY(-3px);
| |
| } | | } |
|
| |
|
| /* Efecto especial para resaltar a los Jefes (MvP) */
| | .oroza-search-spinner { |
| .oroza-mob-gallery img.mvp-gif { | | width: 18px; |
| max-height: 65px; | | height: 18px; |
| filter: drop-shadow(0 0 6px rgba(255, 180, 0, 0.8)); | |
| z-index: 2;
| |
| }
| |
| | |
| | |
| | |
| | |
| | |
| /* =========================================================
| |
| OROZA PET ATTACK REBALANCE V9
| |
| ---------------------------------------------------------
| |
| Presentación responsiva para MediaWiki.
| |
| Diseñado para evitar columnas cortadas con menú lateral.
| |
| Pegar en MediaWiki:Common.css o en tu style.css.
| |
| ========================================================= */
| |
| | |
| .oroza-page .oroza-pet-v6,
| |
| .oroza-page .oroza-pet-v6 * {
| |
| box-sizing: border-box; | | box-sizing: border-box; |
| | border: 2px solid #d8e2ec; |
| | border-top-color: #d6a91d; |
| | border-radius: 50%; |
| | animation: oroza-search-spin 0.75s linear infinite; |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v6 {
| | @keyframes oroza-search-spin { |
| width: 100%; | | to { transform: rotate(360deg); } |
| max-width: 100%;
| |
| overflow: visible;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-intro {
| |
| max-width: 980px;
| |
| margin-left: auto;
| |
| margin-right: auto;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-readmode {
| |
| display: grid;
| |
| grid-template-columns: repeat(3, minmax(0, 1fr));
| |
| gap: 14px;
| |
| margin: 22px 0;
| |
| } | |
| | |
| .oroza-page .oroza-pet-v6-readmode > div {
| |
| min-width: 0;
| |
| padding: 16px 18px;
| |
| border: 1px solid #d7e2ee;
| |
| border-radius: 18px;
| |
| background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
| |
| box-shadow: 0 8px 18px rgba(43, 74, 109, 0.06);
| |
| text-align: center;
| |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v6-readmode strong { | | .oroza-search-group-title { |
| display: block; | | padding: 11px 17px 8px; |
| margin-bottom: 6px; | | background: #f5f8fb; |
| color: #173a5f; | | border-top: 1px solid #edf1f5; |
| font-size: 15px; | | border-bottom: 1px solid #e6edf4; |
| | color: #556b82; |
| | font-size: 10.5px; |
| font-weight: 900; | | font-weight: 900; |
| | letter-spacing: 0.75px; |
| | line-height: 1.2; |
| | text-transform: uppercase; |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v6-readmode span { | | .oroza-search-group-title:first-child { |
| color: #49647f;
| | border-top: 0; |
| font-size: 13px;
| | border-radius: 18px 18px 0 0; |
| line-height: 1.6;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-legend {
| |
| display: grid;
| |
| grid-template-columns: repeat(4, minmax(0, 1fr));
| |
| gap: 14px;
| |
| margin: 20px 0;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-legend > div {
| |
| min-width: 0;
| |
| padding: 16px 16px;
| |
| background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
| |
| border: 1px solid #d7e2ee; | |
| border-radius: 18px;
| |
| box-shadow: 0 8px 18px rgba(43, 74, 109, 0.06);
| |
| text-align: center;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-legend strong {
| |
| display: block;
| |
| margin-bottom: 7px;
| |
| color: #173a5f;
| |
| font-size: 15px;
| |
| font-weight: 900;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-legend span {
| |
| color: #49647f;
| |
| line-height: 1.55;
| |
| font-size: 13px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-note p,
| |
| .oroza-page .oroza-pet-v6-final-note p {
| |
| margin-bottom: 0;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-example {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| justify-content: center;
| |
| align-items: center;
| |
| gap: 8px 12px;
| |
| margin: 22px 0 28px;
| |
| padding: 18px 20px;
| |
| background: linear-gradient(180deg, #fffdf7 0%, #fff8ea 100%);
| |
| border: 1px solid #f0dfb3;
| |
| border-left: 5px solid #ffb400;
| |
| border-radius: 18px; | |
| color: #21466c;
| |
| text-align: center;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-example > strong {
| |
| color: #173a5f;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-example small {
| |
| flex-basis: 100%;
| |
| color: #6b7890;
| |
| line-height: 1.6;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-searchbox {
| |
| position: static;
| |
| margin: 22px 0 26px;
| |
| padding: 18px;
| |
| background: #ffffff;
| |
| border: 1px solid #d7e2ee;
| |
| border-radius: 20px;
| |
| box-shadow: 0 10px 22px rgba(43, 74, 109, 0.08);
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-searchbox label {
| |
| display: block;
| |
| margin-bottom: 10px;
| |
| color: #173a5f;
| |
| font-size: 16px;
| |
| font-weight: 900;
| |
| text-align: center;
| |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v6-toolbar { | | .oroza-search-result-link { |
| display: grid; | | display: grid; |
| grid-template-columns: minmax(0, 1fr) auto; | | grid-template-columns: minmax(0, 1fr) auto; |
| gap: 10px; | | gap: 8px 14px; |
| align-items: center; | | align-items: center; |
| }
| | padding: 13px 17px; |
| | | border-bottom: 1px solid #edf1f5; |
| .oroza-page .oroza-pet-v6-search {
| | color: #24374d !important; |
| width: 100%;
| | text-decoration: none !important; |
| min-width: 0;
| |
| padding: 14px 16px; | |
| border: 1px solid #cfdbe8; | |
| border-radius: 14px;
| |
| background: #f8fbff;
| |
| color: #173a5f; | |
| font-size: 15px; | |
| outline: none; | | outline: none; |
| | transition: background 0.15s ease, box-shadow 0.15s ease; |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v6-search:focus { | | .oroza-search-result-link:hover, |
| border-color: #2b4a6d; | | .oroza-search-result-link:focus, |
| box-shadow: 0 0 0 4px rgba(43, 74, 109, 0.10); | | .oroza-search-result-link.is-active { |
| | background: linear-gradient(90deg, #f3f8fd 0%, #fffaf0 100%); |
| | box-shadow: inset 4px 0 0 #d6a91d; |
| | color: #17283b !important; |
| | text-decoration: none !important; |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v6-clear, | | .oroza-search-result-main { |
| .oroza-page .oroza-pet-v6-filter {
| |
| display: inline-flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| min-height: 40px;
| |
| padding: 9px 14px;
| |
| border: 1px solid #d7e2ee;
| |
| border-radius: 999px;
| |
| background: #ffffff;
| |
| color: #173a5f;
| |
| font-size: 13px;
| |
| font-weight: 900;
| |
| cursor: pointer;
| |
| transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-clear {
| |
| background: linear-gradient(180deg, #355276 0%, #2b4a6d 100%);
| |
| color: #ffffff;
| |
| white-space: nowrap;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-clear:hover,
| |
| .oroza-page .oroza-pet-v6-filter:hover,
| |
| .oroza-page .oroza-pet-v6-filter.is-active {
| |
| transform: translateY(-1px);
| |
| box-shadow: 0 7px 14px rgba(43, 74, 109, 0.12);
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-filter.is-active {
| |
| background: #ffb400;
| |
| border-color: #e1a000;
| |
| color: #17324f;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-filters {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| justify-content: center;
| |
| gap: 8px;
| |
| margin-top: 12px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-search-result {
| |
| margin: 10px 0 0;
| |
| color: #607086;
| |
| font-size: 13px;
| |
| text-align: center;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-accordion summary {
| |
| text-align: center;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-content {
| |
| text-align: left;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-list {
| |
| display: grid;
| |
| gap: 16px;
| |
| width: 100%;
| |
| margin-top: 18px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-card {
| |
| min-width: 0; | | min-width: 0; |
| background: #ffffff;
| |
| border: 1px solid #dbe5ef;
| |
| border-radius: 20px;
| |
| box-shadow: 0 8px 18px rgba(43, 74, 109, 0.06);
| |
| overflow: hidden;
| |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v6-chain { | | .oroza-search-result-title { |
| display: flex; | | display: block; |
| flex-wrap: wrap; | | margin-bottom: 4px; |
| justify-content: center; | | color: #1e3d5e; |
| align-items: center; | | font-size: 14px; |
| gap: 8px; | | font-weight: 850; |
| padding: 12px 14px; | | line-height: 1.3; |
| background: linear-gradient(180deg, #f8fbff 0%, #eef4fa 100%); | | overflow-wrap: anywhere; |
| border-bottom: 1px solid #dfe8f2;
| |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v6-pet-pill { | | .oroza-search-result-snippet { |
| display: inline-flex; | | display: -webkit-box; |
| align-items: center;
| | margin: 0; |
| gap: 8px;
| |
| min-width: 0;
| |
| max-width: 100%;
| |
| padding: 6px 10px;
| |
| border: 1px solid #d8e3ee;
| |
| border-radius: 999px;
| |
| background: #ffffff;
| |
| color: #173a5f;
| |
| font-weight: 900;
| |
| line-height: 1.2;
| |
| box-shadow: 0 3px 8px rgba(43, 74, 109, 0.04);
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-pet-pill strong {
| |
| min-width: 0; | |
| overflow: hidden; | | overflow: hidden; |
| text-overflow: ellipsis;
| | color: #607389; |
| white-space: nowrap;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-pet-pill small {
| |
| flex: 0 0 auto;
| |
| padding: 3px 7px;
| |
| border-radius: 999px;
| |
| background: #fff4d7;
| |
| color: #8a5d00;
| |
| font-size: 11px;
| |
| font-weight: 900;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-gif {
| |
| flex: 0 0 auto;
| |
| width: 30px;
| |
| height: 30px;
| |
| object-fit: contain;
| |
| image-rendering: auto;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-arrow {
| |
| color: #ffb400;
| |
| font-weight: 900;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-main {
| |
| display: grid;
| |
| grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
| |
| grid-template-areas:
| |
| "attack improve"
| |
| "stages stages";
| |
| gap: 14px;
| |
| align-items: stretch;
| |
| min-width: 0;
| |
| padding: 14px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-attack {
| |
| grid-area: attack;
| |
| display: flex;
| |
| flex-direction: row;
| |
| flex-wrap: wrap;
| |
| justify-content: flex-start;
| |
| align-items: center;
| |
| gap: 8px 10px;
| |
| min-width: 0;
| |
| padding: 14px;
| |
| border: 1px solid #dbe5ef;
| |
| border-radius: 16px;
| |
| background: #fbfdff;
| |
| text-align: left;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-attack strong {
| |
| min-width: 0;
| |
| color: #173a5f;
| |
| font-size: 16px;
| |
| line-height: 1.35;
| |
| overflow-wrap: anywhere;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-attack small {
| |
| flex-basis: 100%;
| |
| color: #6b7890; | |
| font-size: 12px; | | font-size: 12px; |
| line-height: 1.5; | | font-weight: 500; |
| | line-height: 1.45; |
| | -webkit-box-orient: vertical; |
| | -webkit-line-clamp: 2; |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v6-role { | | .oroza-search-result-category { |
| display: inline-flex; | | display: inline-flex; |
| flex: 0 0 auto;
| |
| align-items: center; | | align-items: center; |
| justify-content: center; | | justify-content: center; |
| padding: 6px 12px; | | max-width: 190px; |
| border-radius: 999px;
| |
| border: 1px solid #d2e0f2;
| |
| background: #edf4ff;
| |
| color: #21466c;
| |
| font-size: 13px;
| |
| font-weight: 900;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-role-físico,
| |
| .oroza-page .oroza-pet-v6-role-fisico {
| |
| background: #fff4dd;
| |
| border-color: #f0dfb3;
| |
| color: #7a5200;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-role-mágico,
| |
| .oroza-page .oroza-pet-v6-role-magico {
| |
| background: #edf4ff;
| |
| border-color: #d2e0f2;
| |
| color: #21466c;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-role-mixto {
| |
| background: #eefbea;
| |
| border-color: #cfeac8;
| |
| color: #2f6b2f;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-stage-list {
| |
| grid-area: stages;
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
| |
| gap: 12px;
| |
| min-width: 0;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-stage {
| |
| display: grid;
| |
| grid-template-columns: 1fr;
| |
| align-content: start;
| |
| gap: 8px;
| |
| min-width: 0;
| |
| padding: 12px;
| |
| border: 1px solid #dbe5ef;
| |
| border-radius: 16px;
| |
| background: #ffffff;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-stage-label {
| |
| display: inline-flex;
| |
| justify-self: start;
| |
| justify-content: center;
| |
| padding: 5px 9px; | | padding: 5px 9px; |
| | border: 1px solid rgba(214, 169, 29, 0.28); |
| border-radius: 999px; | | border-radius: 999px; |
| background: #fff4d7; | | background: rgba(214, 169, 29, 0.10); |
| color: #a36c00;
| | color: #806300; |
| font-size: 12px;
| | font-size: 10px; |
| font-weight: 900;
| | font-weight: 850; |
| white-space: nowrap;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-stage-name { | |
| min-width: 0;
| |
| color: #173a5f; | |
| font-size: 16px; | |
| font-weight: 900; | |
| line-height: 1.25; | | line-height: 1.25; |
| overflow-wrap: anywhere; | | text-align: center; |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-stats {
| |
| display: grid;
| |
| grid-template-columns: 1fr;
| |
| gap: 8px;
| |
| min-width: 0;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-stat {
| |
| display: grid;
| |
| grid-template-columns: minmax(0, 1fr) auto auto;
| |
| align-items: baseline;
| |
| gap: 4px 8px;
| |
| min-width: 0;
| |
| padding: 9px 10px;
| |
| border: 1px solid #d7e2ee;
| |
| border-radius: 14px;
| |
| background: #f4f8fc;
| |
| color: #173a5f;
| |
| font-size: 13px;
| |
| font-weight: 900;
| |
| white-space: normal; | | white-space: normal; |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v6-stat strong { | | .oroza-search-empty { |
| min-width: 0;
| | padding: 24px 20px; |
| color: #0f3f73;
| |
| font-size: 12px;
| |
| text-transform: uppercase;
| |
| letter-spacing: 0.02em;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-stat span {
| |
| color: #21466c;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-stat em {
| |
| grid-column: 1 / -1;
| |
| padding-top: 5px;
| |
| border-top: 1px dashed rgba(43, 74, 109, 0.16);
| |
| color: #607086;
| |
| font-size: 11px;
| |
| font-style: normal;
| |
| font-weight: 700;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-f {
| |
| background: #fffaf1;
| |
| border-color: #f0dfb3;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-m {
| |
| background: #edf4ff;
| |
| border-color: #d2e0f2;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-improve {
| |
| grid-area: improve;
| |
| display: grid;
| |
| grid-template-columns: 1fr;
| |
| align-content: center;
| |
| gap: 8px;
| |
| min-width: 0;
| |
| padding: 12px; | |
| border: 1px solid #f0dfb3;
| |
| border-radius: 16px;
| |
| background: linear-gradient(180deg, #fffdf7 0%, #fff8ea 100%);
| |
| text-align: center;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-improve > div {
| |
| display: grid;
| |
| grid-template-columns: 1fr;
| |
| gap: 3px;
| |
| padding: 8px;
| |
| border-radius: 12px;
| |
| background: rgba(255,255,255,0.72);
| |
| color: #173a5f;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-improve strong {
| |
| font-size: 12px;
| |
| color: #6f4d00;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-improve span {
| |
| font-size: 13px;
| |
| font-weight: 900;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-improve em {
| |
| font-style: normal;
| |
| color: #1b6b32;
| |
| font-weight: 900;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-improve small {
| |
| color: #6b7890;
| |
| font-size: 12px;
| |
| line-height: 1.45;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-card.is-hidden,
| |
| .oroza-page .oroza-pet-v6-accordion.is-hidden {
| |
| display: none !important;
| |
| }
| |
| | |
| @media (max-width: 1180px) {
| |
| .oroza-page .oroza-pet-v6-legend {
| |
| grid-template-columns: repeat(2, minmax(0, 1fr));
| |
| }
| |
| }
| |
| | |
| @media (max-width: 980px) {
| |
| .oroza-page .oroza-pet-v6-readmode {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-main {
| |
| grid-template-columns: 1fr;
| |
| grid-template-areas:
| |
| "attack"
| |
| "stages"
| |
| "improve";
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-searchbox {
| |
| position: relative;
| |
| top: auto;
| |
| }
| |
| }
| |
| | |
| @media (max-width: 720px) {
| |
| .oroza-page .oroza-pet-v6-legend {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-toolbar {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-clear {
| |
| width: 100%;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-stage-list {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-chain {
| |
| justify-content: flex-start;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-pet-pill {
| |
| max-width: calc(100% - 26px);
| |
| }
| |
| }
| |
| | |
| @media (max-width: 480px) {
| |
| .oroza-page .oroza-pet-v6-main,
| |
| .oroza-page .oroza-pet-v6-searchbox,
| |
| .oroza-page .oroza-pet-v6-example {
| |
| padding: 12px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-stage-name,
| |
| .oroza-page .oroza-pet-v6-attack strong {
| |
| font-size: 15px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v6-filter {
| |
| flex: 1 1 calc(50% - 8px);
| |
| }
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| OROZA PET ATTACK REBALANCE V9
| |
| ---------------------------------------------------------
| |
| Lectura clara por Pokémon, nivel de skill y ATK físico/mágico.
| |
| ========================================================= */
| |
| | |
| .oroza-page .oroza-pet-v8 {
| |
| container-type: inline-size;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-intro {
| |
| font-size: 15px;
| |
| line-height: 1.75;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-reader-guide {
| |
| display: grid;
| |
| grid-template-columns: repeat(4, minmax(0, 1fr));
| |
| gap: 14px;
| |
| margin: 22px 0;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-reader-guide > div {
| |
| min-width: 0;
| |
| padding: 16px 16px;
| |
| border: 1px solid #d7e2ee;
| |
| border-radius: 18px;
| |
| background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
| |
| box-shadow: 0 8px 18px rgba(43, 74, 109, 0.06);
| |
| text-align: center; | | text-align: center; |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v8-reader-guide strong { | | .oroza-search-empty-icon { |
| display: block; | | display: block; |
| margin-bottom: 7px; | | margin-bottom: 8px; |
| color: #173a5f;
| | font-size: 30px; |
| font-size: 15px; | |
| font-weight: 900;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-reader-guide span {
| |
| color: #49647f;
| |
| font-size: 13px;
| |
| line-height: 1.55;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-explain {
| |
| margin: 20px 0 22px;
| |
| line-height: 1.7;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-explain p {
| |
| margin-bottom: 0;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-example {
| |
| display: grid;
| |
| gap: 12px;
| |
| margin: 22px 0 28px;
| |
| padding: 18px 20px;
| |
| background: linear-gradient(180deg, #fffdf7 0%, #fff8ea 100%);
| |
| border: 1px solid #f0dfb3;
| |
| border-left: 5px solid #ffb400;
| |
| border-radius: 18px;
| |
| color: #21466c;
| |
| text-align: center;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-example > strong {
| |
| color: #173a5f;
| |
| font-size: 16px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-example > small {
| |
| color: #6b7890;
| |
| line-height: 1.6;
| |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v8-example-line { | | .oroza-search-empty-title { |
| display: flex;
| | margin: 0 0 5px; |
| flex-wrap: wrap;
| | color: #263d55; |
| align-items: stretch;
| |
| justify-content: center;
| |
| gap: 10px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-example-line > span:not(.oroza-pet-v6-arrow) {
| |
| display: grid;
| |
| gap: 4px;
| |
| min-width: 155px;
| |
| padding: 12px 14px;
| |
| border: 1px solid #ead8a8;
| |
| border-radius: 16px;
| |
| background: #ffffff;
| |
| box-shadow: 0 6px 14px rgba(43, 74, 109, 0.06);
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-example-line b {
| |
| color: #173a5f;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-example-line em {
| |
| color: #8a5d00;
| |
| font-style: normal;
| |
| font-weight: 900;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-example-line small {
| |
| color: #607086;
| |
| font-weight: 800;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8 .oroza-pet-v6-main {
| |
| display: block;
| |
| padding: 16px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-card-note {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| gap: 12px;
| |
| margin-bottom: 14px; | |
| padding: 14px 16px;
| |
| border: 1px solid #dbe5ef;
| |
| border-radius: 16px;
| |
| background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-card-note div {
| |
| min-width: 0;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-card-note strong {
| |
| display: block;
| |
| color: #173a5f; | |
| font-size: 15px; | | font-size: 15px; |
| font-weight: 900; | | font-weight: 850; |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-card-note small {
| |
| display: block;
| |
| margin-top: 3px;
| |
| color: #607086;
| |
| line-height: 1.45;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-line-role,
| |
| .oroza-page .oroza-pet-v8-role {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| width: fit-content;
| |
| padding: 6px 10px;
| |
| border-radius: 999px;
| |
| border: 1px solid #d2e0f2;
| |
| background: #edf4ff;
| |
| color: #21466c;
| |
| font-size: 12px;
| |
| font-weight: 900;
| |
| white-space: nowrap;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-role-fisico {
| |
| background: #fff4dd;
| |
| border-color: #f0dfb3;
| |
| color: #7a5200;
| |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v8-role-magico { | | .oroza-search-empty-text { |
| background: #edf4ff;
| |
| border-color: #d2e0f2;
| |
| color: #21466c;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-role-mixto {
| |
| background: #eefbea;
| |
| border-color: #cfeac8;
| |
| color: #2f6b2f;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-stage-list {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
| |
| gap: 14px;
| |
| align-items: stretch;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-stage {
| |
| display: flex;
| |
| flex-direction: column;
| |
| min-width: 0;
| |
| padding: 14px;
| |
| border: 1px solid #dbe5ef;
| |
| border-radius: 18px;
| |
| background: #ffffff;
| |
| box-shadow: 0 8px 18px rgba(43, 74, 109, 0.05);
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-stage-top {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| gap: 10px;
| |
| margin-bottom: 10px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-stage-top .oroza-pet-v6-stage-label {
| |
| display: inline-flex;
| |
| width: auto;
| |
| margin: 0; | | margin: 0; |
| padding: 5px 9px;
| | color: #687b90; |
| border-radius: 999px;
| |
| background: #fff4d7;
| |
| color: #8a5d00;
| |
| font-size: 11px;
| |
| font-weight: 900;
| |
| text-transform: uppercase;
| |
| letter-spacing: 0.02em;
| |
| white-space: nowrap;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-stage-top .oroza-pet-v6-stage-name {
| |
| min-width: 0;
| |
| color: #173a5f;
| |
| font-size: 17px;
| |
| font-weight: 900;
| |
| line-height: 1.2;
| |
| text-align: right;
| |
| word-break: break-word;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-skill-card {
| |
| display: grid;
| |
| gap: 4px;
| |
| margin-bottom: 10px;
| |
| padding: 12px;
| |
| border: 1px solid #e3eaf3;
| |
| border-radius: 15px;
| |
| background: linear-gradient(180deg, #f8fbff 0%, #f1f6fb 100%);
| |
| text-align: center;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-skill-card span {
| |
| color: #607086;
| |
| font-size: 11px;
| |
| font-weight: 900;
| |
| text-transform: uppercase;
| |
| letter-spacing: 0.04em;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-skill-card strong {
| |
| color: #173a5f;
| |
| font-size: 16px;
| |
| font-weight: 900;
| |
| line-height: 1.25;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-skill-card small {
| |
| color: #6b7890;
| |
| font-size: 12px;
| |
| line-height: 1.35;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-stage-meta {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| align-items: center;
| |
| justify-content: center;
| |
| gap: 8px;
| |
| margin-bottom: 10px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-stage-meta > span:not(.oroza-pet-v8-role) {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| padding: 6px 10px;
| |
| border-radius: 999px;
| |
| background: #f8fbff;
| |
| border: 1px solid #dbe5ef;
| |
| color: #49647f;
| |
| font-size: 12px;
| |
| font-weight: 800;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-stats {
| |
| display: grid;
| |
| grid-template-columns: 1fr;
| |
| gap: 8px;
| |
| margin-top: auto;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-stats .oroza-pet-v6-stat {
| |
| display: grid;
| |
| grid-template-columns: auto auto;
| |
| grid-template-areas:
| |
| "label value"
| |
| "range range";
| |
| gap: 4px 8px;
| |
| align-items: center;
| |
| min-width: 0;
| |
| width: 100%;
| |
| padding: 10px 12px;
| |
| border-radius: 14px;
| |
| opacity: 0.86;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-stats .oroza-pet-v6-stat strong {
| |
| grid-area: label;
| |
| font-size: 13px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-stats .oroza-pet-v6-stat > span {
| |
| display: inline;
| |
| font-size: 13px;
| |
| color: inherit;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-stats .oroza-pet-v6-stat em {
| |
| grid-area: range;
| |
| font-size: 12px;
| |
| line-height: 1.35;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-stats .oroza-pet-v6-stat.is-primary {
| |
| opacity: 1;
| |
| border-width: 2px;
| |
| box-shadow: 0 5px 12px rgba(43, 74, 109, 0.07);
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-improve {
| |
| display: grid;
| |
| grid-template-columns: repeat(2, minmax(0, 1fr));
| |
| gap: 10px;
| |
| margin-top: 14px;
| |
| padding: 14px;
| |
| border-radius: 16px;
| |
| background: #fbfdff;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-improve small {
| |
| grid-column: 1 / -1;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8 .oroza-pet-v6-card.is-hidden,
| |
| .oroza-page .oroza-pet-v8 [data-pet-section].is-hidden {
| |
| display: none !important;
| |
| }
| |
| | |
| @container (max-width: 920px) {
| |
| .oroza-page .oroza-pet-v8-reader-guide {
| |
| grid-template-columns: repeat(2, minmax(0, 1fr));
| |
| }
| |
| }
| |
| | |
| @container (max-width: 620px) {
| |
| .oroza-page .oroza-pet-v8-reader-guide {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-card-note {
| |
| align-items: stretch;
| |
| flex-direction: column;
| |
| text-align: center;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-line-role {
| |
| align-self: center;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-stage-list {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-stage-top {
| |
| align-items: flex-start;
| |
| flex-direction: column;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-stage-top .oroza-pet-v6-stage-name {
| |
| text-align: left;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-improve {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| }
| |
| | |
| @media (max-width: 900px) {
| |
| .oroza-page .oroza-pet-v8-reader-guide {
| |
| grid-template-columns: repeat(2, minmax(0, 1fr));
| |
| }
| |
| }
| |
| | |
| @media (max-width: 640px) {
| |
| .oroza-page .oroza-pet-v8-reader-guide {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8-example-line {
| |
| flex-direction: column;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v8 .oroza-pet-v6-toolbar {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| OROZA PET ATTACK REBALANCE V9 - AJUSTES DE CLARIDAD
| |
| ========================================================= */
| |
| | |
| .oroza-page .oroza-pet-v9 .oroza-pet-v6-searchbox {
| |
| position: static !important;
| |
| top: auto !important;
| |
| z-index: auto !important;
| |
| backdrop-filter: none !important;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v9 .oroza-pet-v8-card-note {
| |
| justify-content: center;
| |
| text-align: center;
| |
| background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v9 .oroza-pet-v8-card-note div {
| |
| max-width: 760px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v9 .oroza-pet-v8-stage-meta {
| |
| margin-bottom: 12px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v9 .oroza-pet-v9-skill-level {
| |
| background: #fff4d7 !important;
| |
| border-color: #f0dfb3 !important;
| |
| color: #7a5200 !important;
| |
| font-weight: 900 !important;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v9 .oroza-pet-v8-stats .oroza-pet-v6-stat {
| |
| opacity: 1;
| |
| border-width: 1px;
| |
| box-shadow: none;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v9 .oroza-pet-v8-stats .oroza-pet-v6-stat strong {
| |
| font-size: 13px;
| |
| letter-spacing: 0.03em;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v9 .oroza-pet-v8-stats .oroza-pet-v6-stat > span {
| |
| justify-self: end;
| |
| font-size: 14px;
| |
| font-weight: 900;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v9 .oroza-pet-v8-stats .oroza-pet-v6-stat em {
| |
| color: #52677f; | |
| font-size: 12px; | | font-size: 12px; |
| }
| |
|
| |
| .oroza-page .oroza-pet-v9-summary {
| |
| display: grid;
| |
| grid-template-columns: 1fr;
| |
| gap: 10px;
| |
| margin-top: 14px;
| |
| padding: 14px;
| |
| border: 1px solid #d7e2ee;
| |
| border-radius: 16px;
| |
| background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
| |
| text-align: center;
| |
| }
| |
|
| |
| .oroza-page .oroza-pet-v9-summary-title {
| |
| color: #173a5f;
| |
| font-size: 15px;
| |
| font-weight: 900;
| |
| }
| |
|
| |
| .oroza-page .oroza-pet-v9-summary p {
| |
| max-width: 760px;
| |
| margin: 0 auto;
| |
| color: #607086;
| |
| font-size: 13px;
| |
| line-height: 1.55; | | line-height: 1.55; |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v9-summary-grid { | | .oroza-search-suggestion { |
| display: grid;
| | display: block; |
| grid-template-columns: repeat(2, minmax(0, 1fr));
| | margin: 12px 17px; |
| gap: 10px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v9-summary-grid > div {
| |
| display: grid; | |
| gap: 4px; | |
| padding: 10px 12px; | | padding: 10px 12px; |
| border: 1px solid #dbe5ef; | | border: 1px solid #dce5ee; |
| border-radius: 14px; | | border-radius: 11px; |
| background: #ffffff; | | background: #f7fafc; |
| }
| | color: #3e5872; |
| | |
| .oroza-page .oroza-pet-v9-summary-grid strong {
| |
| color: #49647f; | |
| font-size: 12px; | | font-size: 12px; |
| font-weight: 900; | | font-weight: 650; |
| text-transform: uppercase;
| |
| letter-spacing: 0.03em;
| |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v9-summary-grid span { | | .oroza-search-suggestion button { |
| color: #173a5f; | | padding: 0; |
| font-size: 14px; | | border: 0; |
| font-weight: 900; | | background: transparent; |
| }
| | color: #1e70bf; |
| | | font: inherit; |
| .oroza-page .oroza-pet-v9-summary small {
| | font-weight: 850; |
| color: #6b7890; | | cursor: pointer; |
| font-size: 12px; | |
| line-height: 1.45; | |
| }
| |
| | |
| @container (max-width: 620px) {
| |
| .oroza-page .oroza-pet-v9-summary-grid { | |
| grid-template-columns: 1fr;
| |
| }
| |
| } | | } |
|
| |
|
| @media (max-width: 640px) {
| | .oroza-search-footer { |
| .oroza-page .oroza-pet-v9-summary-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| OROZA PET ATTACK REBALANCE V10 - GIFS + COMPACTO + CENTRADO
| |
| ========================================================= */
| |
| | |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-card-note {
| |
| padding: 18px 20px;
| |
| border-radius: 18px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-card-note strong {
| |
| display: block;
| |
| margin-bottom: 4px;
| |
| color: #173a5f;
| |
| font-size: 17px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-card-note small {
| |
| color: #587089;
| |
| line-height: 1.6;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-stage-list {
| |
| display: flex; | | display: flex; |
| flex-wrap: wrap;
| |
| justify-content: center;
| |
| gap: 16px;
| |
| }
| |
|
| |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-stage {
| |
| flex: 1 1 280px;
| |
| max-width: 420px;
| |
| min-width: 250px;
| |
| padding: 16px;
| |
| }
| |
|
| |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-stage-top {
| |
| display: grid;
| |
| justify-items: center;
| |
| gap: 10px;
| |
| margin-bottom: 12px;
| |
| text-align: center;
| |
| }
| |
|
| |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-stage-top .oroza-pet-v6-stage-label {
| |
| justify-self: start;
| |
| }
| |
|
| |
| .oroza-page .oroza-pet-v10-stage-identity {
| |
| display: grid;
| |
| justify-items: center;
| |
| gap: 8px;
| |
| width: 100%;
| |
| }
| |
|
| |
| .oroza-page .oroza-pet-v10-stage-gif {
| |
| width: 64px;
| |
| height: 64px;
| |
| object-fit: contain;
| |
| image-rendering: auto;
| |
| filter: drop-shadow(0 6px 10px rgba(43, 74, 109, 0.15));
| |
| }
| |
|
| |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-stage-top .oroza-pet-v6-stage-name {
| |
| text-align: center;
| |
| font-size: 18px;
| |
| }
| |
|
| |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-skill-card {
| |
| gap: 6px;
| |
| margin-bottom: 12px;
| |
| padding: 14px;
| |
| }
| |
|
| |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-skill-card span {
| |
| font-size: 12px;
| |
| }
| |
|
| |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-skill-card strong {
| |
| font-size: 18px;
| |
| }
| |
|
| |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-stage-meta {
| |
| justify-content: center;
| |
| margin-bottom: 12px;
| |
| }
| |
|
| |
| .oroza-page .oroza-pet-v10 .oroza-pet-v9-skill-level {
| |
| padding: 8px 14px !important;
| |
| font-size: 13px !important;
| |
| }
| |
|
| |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-stats {
| |
| grid-template-columns: repeat(2, minmax(0, 1fr));
| |
| gap: 10px;
| |
| }
| |
|
| |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-stats .oroza-pet-v6-stat {
| |
| display: grid;
| |
| grid-template-columns: minmax(0, 1fr) auto;
| |
| grid-template-areas:
| |
| "label value"
| |
| "range range"
| |
| "var var";
| |
| gap: 6px 10px;
| |
| min-width: 0;
| |
| padding: 12px 13px;
| |
| border-radius: 16px;
| |
| border-width: 1px;
| |
| }
| |
|
| |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-stats .oroza-pet-v6-stat strong {
| |
| grid-area: label;
| |
| display: block;
| |
| font-size: 14px;
| |
| line-height: 1.3;
| |
| }
| |
|
| |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-stats .oroza-pet-v6-f strong::before {
| |
| content: "⚔️ ";
| |
| }
| |
|
| |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-stats .oroza-pet-v6-m strong::before {
| |
| content: "✨ ";
| |
| }
| |
|
| |
| .oroza-page .oroza-pet-v10-stat-value {
| |
| grid-area: value;
| |
| align-self: start;
| |
| justify-self: end;
| |
| color: #173a5f;
| |
| font-size: 22px;
| |
| font-weight: 900;
| |
| line-height: 1;
| |
| }
| |
|
| |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-stats .oroza-pet-v6-stat em {
| |
| grid-area: range;
| |
| display: block;
| |
| margin: 0;
| |
| color: #52677f;
| |
| font-size: 12px;
| |
| line-height: 1.45;
| |
| font-style: normal;
| |
| }
| |
|
| |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-stats .oroza-pet-v6-stat em::before {
| |
| content: "📊 ";
| |
| }
| |
|
| |
| .oroza-page .oroza-pet-v10-stat-var {
| |
| grid-area: var;
| |
| display: inline-flex !important;
| |
| align-items: center; | | align-items: center; |
| justify-content: flex-start; | | justify-content: space-between; |
| width: fit-content;
| |
| padding: 4px 10px;
| |
| border-radius: 999px;
| |
| background: rgba(255,255,255,0.55);
| |
| border: 1px dashed rgba(73,100,127,0.28);
| |
| color: inherit !important;
| |
| font-size: 12px !important;
| |
| font-weight: 800 !important;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-stat-var::before {
| |
| content: "🎲 ";
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10 .oroza-pet-v9-summary {
| |
| margin-top: 16px;
| |
| padding: 16px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10 .oroza-pet-v9-summary-grid strong::before {
| |
| content: "🔹 ";
| |
| }
| |
| | |
| @container (max-width: 760px) {
| |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-stats {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| }
| |
| | |
| @media (max-width: 760px) {
| |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-stats {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-stage {
| |
| max-width: 100%;
| |
| min-width: 0;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-stage-gif {
| |
| width: 56px;
| |
| height: 56px;
| |
| }
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| V10.1 - CENTRAR POKEMON EN CABECERA DE TARJETA
| |
| ========================================================= */
| |
| | |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-stage-top {
| |
| position: relative;
| |
| display: flex;
| |
| flex-direction: column;
| |
| align-items: center;
| |
| justify-content: center;
| |
| gap: 10px;
| |
| margin-bottom: 12px;
| |
| padding-top: 34px;
| |
| text-align: center;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-stage-top .oroza-pet-v6-stage-label {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| margin: 0;
| |
| justify-self: auto;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-stage-identity {
| |
| width: 100%;
| |
| display: flex;
| |
| flex-direction: column;
| |
| align-items: center;
| |
| justify-content: center;
| |
| gap: 8px;
| |
| margin: 0 auto;
| |
| text-align: center;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-stage-gif {
| |
| display: block;
| |
| margin: 0 auto;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-stage-top .oroza-pet-v6-stage-name {
| |
| width: 100%;
| |
| margin: 0;
| |
| text-align: center;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| V10.2 - ACLARACION POR GOLPE / POR HIT
| |
| ========================================================= */
| |
| | |
| .oroza-page .oroza-pet-v10-2 .oroza-pet-v8-explain {
| |
| border-left: 5px solid #2b4a6d;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-2 .oroza-pet-v8-explain p {
| |
| line-height: 1.75;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-2 .oroza-pet-v9-skill-level {
| |
| background: #fff1cf !important;
| |
| border-color: #efcf82 !important;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-2 .oroza-pet-v8-stats .oroza-pet-v6-stat strong {
| |
| font-size: 13px;
| |
| line-height: 1.25;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-2 .oroza-pet-v10-stat-value {
| |
| font-size: 21px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-2 .oroza-pet-v9-summary-grid strong {
| |
| font-size: 11px;
| |
| line-height: 1.35;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| V10.3 - EXPLICACION CORRECTA POR HIT / GOLPE
| |
| ========================================================= */
| |
| | |
| .oroza-page .oroza-pet-v10-3 .oroza-pet-v8-reader-guide strong {
| |
| color: #173a5f;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-3 .oroza-pet-v8-explain p + p {
| |
| margin-top: 10px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-3 .oroza-pet-v9-skill-level {
| |
| background: #fff4d7 !important;
| |
| border-color: #f0dfb3 !important;
| |
| color: #7a5200 !important;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-3 .oroza-pet-v8-skill-card small {
| |
| max-width: 280px;
| |
| margin: 0 auto;
| |
| }
| |
| | |
| | |
| /* V10.4 - Ajuste de explicación confirmada con battle.cpp */
| |
| .oroza-page .oroza-pet-v10 .oroza-pet-v8-explain p strong { color: #173a5f; }
| |
| | |
| | |
| /* =========================================================
| |
| OROZA PET ATTACK REBALANCE V10.5 - ALINEADO A PET_DB
| |
| ========================================================= */
| |
| | |
| .oroza-page .oroza-pet-v10-5 .oroza-pet-v8-reader-guide div:nth-child(3) {
| |
| background: linear-gradient(180deg, #fffdf7 0%, #fff7e6 100%);
| |
| border-color: #f0dfb3;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-5 .oroza-pet-v8-reader-guide div:nth-child(3) strong {
| |
| color: #8a5d00;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-5 .oroza-pet-v8-explain {
| |
| border-left: 5px solid #ffb400;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-5 .oroza-pet-v8-stage-meta {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| align-items: center;
| |
| justify-content: center;
| |
| gap: 8px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-5-skill-level {
| |
| background: #fff4d7 !important;
| |
| border-color: #f0dfb3 !important;
| |
| color: #7a5200 !important;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-5-multihit-badge {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| padding: 8px 14px;
| |
| border-radius: 999px;
| |
| border: 1px solid #cfe0ff;
| |
| background: linear-gradient(180deg, #edf4ff 0%, #e7f0ff 100%);
| |
| color: #21466c;
| |
| font-size: 13px;
| |
| font-weight: 900;
| |
| white-space: nowrap;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-5-multihit-note {
| |
| flex-basis: 100%;
| |
| display: block;
| |
| max-width: 320px;
| |
| margin: 0 auto;
| |
| color: #607086;
| |
| font-size: 12px;
| |
| line-height: 1.45;
| |
| text-align: center;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-5-natural-multihit-stage {
| |
| border-color: #cfe0ff;
| |
| box-shadow: 0 10px 22px rgba(43, 74, 109, 0.08);
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-5-natural-multihit-stage .oroza-pet-v8-skill-card {
| |
| background: linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%);
| |
| border-color: #cfe0ff;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-5 .oroza-pet-v8-example {
| |
| border-left: 5px solid #ffb400;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| V10.6 - Wiki alineada a pet_db + notas de nivel/multi-hit
| |
| ========================================================= */
| |
| | |
| .oroza-page .oroza-pet-v10-6 .oroza-pet-v8-reader-guide div {
| |
| min-height: 0;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-6 .oroza-pet-v8-explain p {
| |
| text-align: left;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-6 .oroza-pet-v9-skill-level {
| |
| background: #fff4d7 !important;
| |
| border-color: #f0dfb3 !important;
| |
| color: #7a5200 !important;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-6-multihit {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| padding: 8px 14px;
| |
| border-radius: 999px;
| |
| border: 1px solid #cfeac8;
| |
| background: #eefbea;
| |
| color: #2f6b2f;
| |
| font-size: 13px;
| |
| font-weight: 900;
| |
| line-height: 1.2;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v10-6 .oroza-pet-v8-skill-card small {
| |
| max-width: 260px;
| |
| margin: 0 auto;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| OROZA PET ATTACK REBALANCE V12 - EXPLICACION COMPLETA
| |
| ========================================================= */
| |
| | |
| .oroza-page .oroza-pet-v12 .oroza-pet-v8-reader-guide {
| |
| grid-template-columns: repeat(4, minmax(0, 1fr));
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v12-term-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(3, minmax(0, 1fr));
| |
| gap: 12px; | | gap: 12px; |
| margin: 16px 0 18px; | | padding: 12px 17px; |
| | background: #f5f8fb; |
| | border-radius: 0 0 18px 18px; |
| | color: #64778c; |
| | font-size: 11.5px; |
| | font-weight: 650; |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v12-term-grid > div { | | .oroza-search-footer a { |
| padding: 14px 15px;
| | color: #1e5f9d !important; |
| border-radius: 18px;
| | font-weight: 850; |
| background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,249,255,0.78));
| | text-decoration: none !important; |
| border: 1px solid rgba(72, 101, 132, 0.16);
| |
| box-shadow: 0 10px 22px rgba(21, 44, 71, 0.06);
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v12-term-grid strong {
| |
| display: block;
| |
| color: #173a5f;
| |
| font-size: 15px;
| |
| margin-bottom: 4px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v12-term-grid span {
| |
| display: block;
| |
| color: #587089;
| |
| font-size: 13px;
| |
| line-height: 1.45;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v12-special-note {
| |
| margin: 14px 0 18px;
| |
| padding: 16px 18px;
| |
| border-radius: 18px;
| |
| background: linear-gradient(135deg, rgba(255,248,229,0.95), rgba(255,255,255,0.85));
| |
| border: 1px solid rgba(214, 161, 53, 0.26);
| |
| box-shadow: 0 12px 26px rgba(91, 69, 17, 0.08);
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v12-special-note strong {
| |
| display: block;
| |
| color: #6f4a00;
| |
| margin-bottom: 4px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v12-special-note p {
| |
| margin: 0;
| |
| color: #725b2d; | |
| line-height: 1.55;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v12 .oroza-pet-v8-stage-meta {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| align-items: center;
| |
| justify-content: center;
| |
| gap: 7px;
| |
| margin: 10px 0 12px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v12-chip {
| |
| display: inline-flex !important;
| |
| align-items: center;
| |
| justify-content: center;
| |
| width: auto !important;
| |
| max-width: 100%;
| |
| padding: 7px 10px !important;
| |
| border-radius: 999px !important;
| |
| background: rgba(255,255,255,0.75) !important;
| |
| border: 1px solid rgba(78,107,136,0.18) !important;
| |
| color: #254761 !important;
| |
| font-size: 12px !important;
| |
| font-weight: 850 !important; | |
| line-height: 1.2;
| |
| box-shadow: 0 6px 14px rgba(29, 51, 73, 0.05);
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v12-cast-chip {
| |
| background: rgba(240, 248, 255, 0.85) !important;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v12-cooldown-chip {
| |
| background: rgba(245, 241, 255, 0.85) !important;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v12-focus-fisico {
| |
| background: rgba(255, 246, 240, 0.9) !important;
| |
| border-color: rgba(207, 111, 61, 0.25) !important;
| |
| color: #8a4424 !important;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v12-focus-magico {
| |
| background: rgba(240, 245, 255, 0.9) !important;
| |
| border-color: rgba(87, 122, 211, 0.25) !important;
| |
| color: #334f9d !important;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v12-profile-chip {
| |
| flex-basis: 100%;
| |
| border-radius: 14px !important;
| |
| white-space: normal;
| |
| text-align: center; | |
| background: rgba(247, 250, 252, 0.92) !important;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v12-note {
| |
| flex-basis: 100%;
| |
| display: block;
| |
| text-align: center;
| |
| color: #66788d;
| |
| font-size: 12px;
| |
| line-height: 1.35;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v12-primary-stat {
| |
| outline: 2px solid rgba(57, 124, 194, 0.22);
| |
| box-shadow: 0 12px 22px rgba(24, 83, 143, 0.08);
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v12-primary-stat::after {
| |
| content: "Principal";
| |
| grid-area: var;
| |
| justify-self: end;
| |
| align-self: center;
| |
| padding: 4px 9px;
| |
| border-radius: 999px;
| |
| background: rgba(23, 58, 95, 0.08);
| |
| color: #173a5f;
| |
| font-size: 11px;
| |
| font-weight: 900;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v12 .oroza-pet-v10-stat-var {
| |
| justify-self: start;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v12 .oroza-pet-v9-summary-grid {
| |
| grid-template-columns: repeat(4, minmax(0, 1fr));
| |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v12-summary-extra { | | .oroza-search-footer a:hover { |
| background: rgba(255,255,255,0.52) !important; | | color: #173f68 !important; |
| | text-decoration: underline !important; |
| } | | } |
|
| |
|
| @container (max-width: 860px) { | | @media (max-width: 780px) { |
| .oroza-page .oroza-pet-v12 .oroza-pet-v8-reader-guide, | | .oroza-global-search { |
| .oroza-page .oroza-pet-v12-term-grid,
| | margin-top: 10px; |
| .oroza-page .oroza-pet-v12 .oroza-pet-v9-summary-grid {
| |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | | } |
| }
| |
|
| |
|
| @container (max-width: 560px) {
| | .oroza-global-search-form { |
| .oroza-page .oroza-pet-v12 .oroza-pet-v8-reader-guide,
| | width: 100%; |
| .oroza-page .oroza-pet-v12-term-grid,
| |
| .oroza-page .oroza-pet-v12 .oroza-pet-v9-summary-grid { | |
| grid-template-columns: 1fr; | |
| } | | } |
| }
| |
|
| |
|
| @media (max-width: 860px) {
| | .oroza-global-search-field { |
| .oroza-page .oroza-pet-v12 .oroza-pet-v8-reader-guide, | | min-height: 54px; |
| .oroza-page .oroza-pet-v12-term-grid,
| | border-radius: 15px; |
| .oroza-page .oroza-pet-v12 .oroza-pet-v9-summary-grid {
| |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | | } |
| }
| |
|
| |
|
| @media (max-width: 560px) {
| | .oroza-global-search-icon { |
| .oroza-page .oroza-pet-v12 .oroza-pet-v8-reader-guide, | | width: 36px; |
| .oroza-page .oroza-pet-v12-term-grid,
| | font-size: 23px; |
| .oroza-page .oroza-pet-v12 .oroza-pet-v9-summary-grid {
| |
| grid-template-columns: 1fr; | |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v12-chip { | | .oroza-global-search-input { |
| width: 100% !important; | | height: 40px; |
| }
| | padding-right: 5px; |
| }
| | font-size: 13px; |
| | |
| | |
| /* =========================================================
| |
| OROZA PET ATTACK REBALANCE V13 - EVOLUCIÓN PROFESIONAL
| |
| ========================================================= */
| |
| .oroza-page .oroza-pet-v13 .oroza-pet-v8-explain {
| |
| border-left: 5px solid rgba(218, 159, 61, 0.85);
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13 .oroza-pet-v12-chip {
| |
| white-space: normal;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13 .oroza-pet-v13-instant-chip {
| |
| background: linear-gradient(135deg, rgba(236, 255, 242, 0.96), rgba(214, 245, 225, 0.96));
| |
| border-color: rgba(57, 149, 82, 0.32);
| |
| color: #23623a;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13 .oroza-pet-v12-note {
| |
| display: block;
| |
| width: 100%;
| |
| margin-top: 6px;
| |
| color: #607489;
| |
| line-height: 1.45;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13 .oroza-pet-v12-primary-stat {
| |
| box-shadow: 0 10px 22px rgba(44, 83, 124, 0.10);
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13 .oroza-pet-v9-summary-grid {
| |
| align-items: stretch;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| OROZA PET ATTACK REBALANCE V13.1 - BADGE PRINCIPAL LIMPIO
| |
| Corrige el encimado de "Principal" con la variación ±.
| |
| ========================================================= */
| |
| | |
| .oroza-page .oroza-pet-v13-1 .oroza-pet-v8-stats {
| |
| gap: 12px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-1 .oroza-pet-v8-stats .oroza-pet-v6-stat {
| |
| position: relative;
| |
| overflow: hidden;
| |
| grid-template-columns: minmax(0, 1fr) auto;
| |
| grid-template-areas:
| |
| "label value"
| |
| "range range"
| |
| "var var"; | |
| align-content: start;
| |
| min-height: 126px;
| |
| padding: 13px 14px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-1 .oroza-pet-v8-stats .oroza-pet-v6-stat strong {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| gap: 5px;
| |
| min-width: 0;
| |
| font-size: 14px;
| |
| letter-spacing: 0.02em;
| |
| line-height: 1.18;
| |
| white-space: normal;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-1 .oroza-pet-v8-stats .oroza-pet-v6-f strong::before {
| |
| content: "⚔️";
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-1 .oroza-pet-v8-stats .oroza-pet-v6-m strong::before {
| |
| content: "✨";
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-1 .oroza-pet-v10-stat-value {
| |
| font-size: clamp(20px, 2.7vw, 26px);
| |
| line-height: 1;
| |
| letter-spacing: 0.01em;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-1 .oroza-pet-v8-stats .oroza-pet-v6-stat em {
| |
| margin-top: 2px;
| |
| font-size: 12px;
| |
| line-height: 1.45;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-1 .oroza-pet-v8-stats .oroza-pet-v6-stat em::before {
| |
| content: "📊 ";
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-1 .oroza-pet-v10-stat-var {
| |
| justify-self: start !important;
| |
| align-self: center;
| |
| margin-top: 3px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-1 .oroza-pet-v12-primary-stat {
| |
| grid-template-areas:
| |
| "label value"
| |
| "range range" | |
| "var badge" !important;
| |
| border-color: rgba(218, 159, 61, 0.46) !important;
| |
| background:
| |
| linear-gradient(135deg, rgba(255, 248, 232, 0.72), rgba(255, 255, 255, 0.42)) !important;
| |
| outline: 2px solid rgba(218, 159, 61, 0.18);
| |
| box-shadow: 0 14px 26px rgba(99, 70, 26, 0.10) !important;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-1 .oroza-pet-v12-primary-stat::after {
| |
| content: "⭐ Principal";
| |
| grid-area: badge;
| |
| position: static;
| |
| justify-self: end;
| |
| align-self: center;
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| max-width: 100%;
| |
| padding: 5px 9px;
| |
| border-radius: 999px;
| |
| background: linear-gradient(135deg, rgba(255, 236, 171, 0.96), rgba(255, 247, 219, 0.96));
| |
| border: 1px solid rgba(218, 159, 61, 0.36);
| |
| color: #7b4e00;
| |
| font-size: 11px;
| |
| font-weight: 950;
| |
| line-height: 1;
| |
| letter-spacing: 0.01em;
| |
| white-space: nowrap;
| |
| box-shadow: 0 6px 12px rgba(126, 86, 20, 0.09);
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-1 .oroza-pet-v12-primary-stat .oroza-pet-v10-stat-var {
| |
| grid-area: var;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-1 .oroza-pet-v12-focus-fisico,
| |
| .oroza-page .oroza-pet-v13-1 .oroza-pet-v12-focus-magico {
| |
| font-weight: 950 !important;
| |
| }
| |
| | |
| /* Cuando la tarjeta quede muy angosta dentro de la wiki, evita que el footer se apriete. */
| |
| @container (max-width: 720px) {
| |
| .oroza-page .oroza-pet-v13-1 .oroza-pet-v12-primary-stat {
| |
| grid-template-areas:
| |
| "label value"
| |
| "range range"
| |
| "var var"
| |
| "badge badge" !important;
| |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v13-1 .oroza-pet-v12-primary-stat::after { | | .oroza-global-search-submit { |
| justify-self: start; | | min-width: 50px; |
| margin-top: 1px; | | width: 50px; |
| | height: 40px; |
| | padding: 0; |
| | border-radius: 11px; |
| } | | } |
| }
| |
|
| |
|
| @media (max-width: 720px) {
| | .oroza-global-search-submit span:last-child { |
| .oroza-page .oroza-pet-v13-1 .oroza-pet-v12-primary-stat { | | display: none; |
| grid-template-areas: | |
| "label value"
| |
| "range range"
| |
| "var var"
| |
| "badge badge" !important;
| |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v13-1 .oroza-pet-v12-primary-stat::after { | | .oroza-global-search-helper { |
| justify-self: start; | | display: none; |
| margin-top: 1px;
| |
| } | | } |
| }
| |
|
| |
|
| @media (max-width: 460px) {
| | .oroza-global-search-results { |
| .oroza-page .oroza-pet-v13-1 .oroza-pet-v8-stats { | | top: calc(100% + 7px); |
| grid-template-columns: 1fr; | | max-height: min(68vh, 520px); |
| | border-radius: 15px; |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v13-1 .oroza-pet-v8-stats .oroza-pet-v6-stat { | | .oroza-search-result-link { |
| min-height: 0;
| |
| }
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| OROZA PET ATTACK REBALANCE V13.2 - STATS LIMPIAS
| |
| Presentación final sin badge interno de "Principal".
| |
| La información principal se comunica arriba con el chip "Daño principal"
| |
| y dentro de las stats solo se resalta visualmente la tarjeta correcta.
| |
| ========================================================= */
| |
| | |
| /* Evita cualquier badge heredado de versiones anteriores dentro de la tarjeta. */
| |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v12-primary-stat::after,
| |
| .oroza-page .oroza-pet-v13-2.oroza-pet-v13-1 .oroza-pet-v12-primary-stat::after,
| |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v13-1 .oroza-pet-v12-primary-stat::after {
| |
| content: none !important;
| |
| display: none !important;
| |
| }
| |
| | |
| /* El chip superior ya explica si el daño principal es físico o mágico. */
| |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v12-focus-fisico,
| |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v12-focus-magico {
| |
| font-weight: 950 !important;
| |
| box-shadow: 0 8px 18px rgba(80, 89, 108, 0.08);
| |
| }
| |
| | |
| /* Stats más limpias: dos tarjetas balanceadas y sin elementos compitiendo abajo. */
| |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v8-stats,
| |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v6-stats {
| |
| display: grid;
| |
| grid-template-columns: repeat(2, minmax(0, 1fr));
| |
| gap: 14px;
| |
| align-items: stretch;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v8-stats .oroza-pet-v6-stat,
| |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v6-stats .oroza-pet-v6-stat {
| |
| position: relative;
| |
| display: grid !important;
| |
| grid-template-columns: minmax(0, 1fr) auto;
| |
| grid-template-areas:
| |
| "label value"
| |
| "range range"
| |
| "var var";
| |
| gap: 9px 12px;
| |
| align-content: start;
| |
| min-height: 128px;
| |
| padding: 16px 16px 14px;
| |
| border-radius: 18px;
| |
| overflow: hidden;
| |
| }
| |
| | |
| /* Tarjeta principal: se diferencia por color y borde, no con texto extra. */
| |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v12-primary-stat {
| |
| border: 2px solid rgba(224, 178, 61, 0.68) !important;
| |
| background:
| |
| radial-gradient(circle at top right, rgba(255, 237, 178, 0.42), transparent 40%),
| |
| linear-gradient(180deg, rgba(255, 249, 234, 0.98), rgba(255, 243, 214, 0.96)) !important;
| |
| outline: none !important;
| |
| box-shadow: 0 14px 26px rgba(190, 139, 42, 0.12) !important;
| |
| }
| |
| | |
| /* Títulos simples: ATK Físico / ATK Mágico. El "por golpe/hit" va abajo. */
| |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v8-stats .oroza-pet-v6-stat strong,
| |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v6-stats .oroza-pet-v6-stat strong {
| |
| grid-area: label;
| |
| display: inline-flex;
| |
| align-items: center;
| |
| gap: 6px;
| |
| min-width: 0;
| |
| margin: 0;
| |
| color: #073e78;
| |
| font-size: 15px;
| |
| font-weight: 950;
| |
| line-height: 1.15;
| |
| letter-spacing: 0.01em;
| |
| white-space: normal;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v8-stats .oroza-pet-v6-f strong::before,
| |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v6-stats .oroza-pet-v6-f strong::before {
| |
| content: "⚔️";
| |
| flex: 0 0 auto;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v8-stats .oroza-pet-v6-m strong::before,
| |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v6-stats .oroza-pet-v6-m strong::before {
| |
| content: "✨";
| |
| flex: 0 0 auto;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v10-stat-value {
| |
| grid-area: value;
| |
| justify-self: end;
| |
| align-self: start;
| |
| color: #123b67;
| |
| font-size: clamp(22px, 3vw, 28px);
| |
| font-weight: 950;
| |
| line-height: 1;
| |
| letter-spacing: 0.01em;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v8-stats .oroza-pet-v6-stat em,
| |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v6-stats .oroza-pet-v6-stat em {
| |
| grid-area: range;
| |
| display: block;
| |
| margin: 0;
| |
| padding-top: 8px;
| |
| border-top: 1px dashed rgba(89, 113, 140, 0.24);
| |
| color: #4f6680;
| |
| font-size: 13px;
| |
| font-style: normal;
| |
| font-weight: 700;
| |
| line-height: 1.45;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v8-stats .oroza-pet-v6-stat em::before,
| |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v6-stats .oroza-pet-v6-stat em::before {
| |
| content: "📊 ";
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v10-stat-var {
| |
| grid-area: var;
| |
| justify-self: start !important;
| |
| align-self: end;
| |
| display: inline-flex !important;
| |
| align-items: center;
| |
| width: fit-content;
| |
| margin-top: 2px;
| |
| padding: 6px 12px;
| |
| border-radius: 999px;
| |
| background: rgba(255, 255, 255, 0.76);
| |
| border: 1px dashed rgba(91, 112, 139, 0.28);
| |
| color: #284865 !important;
| |
| font-size: 13px !important;
| |
| font-weight: 900 !important;
| |
| line-height: 1;
| |
| }
| |
| | |
| /* Un poco más de aire en las tarjetas de etapa para que la stats respiren. */
| |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v8-stage {
| |
| padding: 18px;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v8-stage-meta {
| |
| margin-bottom: 14px;
| |
| }
| |
| | |
| /* En anchos pequeños las stats pasan a una columna para evitar cortes. */
| |
| @container (max-width: 760px) {
| |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v8-stats,
| |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v6-stats {
| |
| grid-template-columns: 1fr; | | grid-template-columns: 1fr; |
| | gap: 8px; |
| | padding: 13px 14px; |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v8-stats .oroza-pet-v6-stat, | | .oroza-search-result-category { |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v6-stats .oroza-pet-v6-stat {
| | justify-self: start; |
| min-height: 0; | | max-width: 100%; |
| } | | } |
| }
| |
|
| |
|
| @media (max-width: 760px) {
| | .oroza-search-footer { |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v8-stats, | | align-items: flex-start; |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v6-stats {
| | flex-direction: column; |
| grid-template-columns: 1fr; | |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v8-stats .oroza-pet-v6-stat,
| |
| .oroza-page .oroza-pet-v13-2 .oroza-pet-v6-stats .oroza-pet-v6-stat {
| |
| min-height: 0; | |
| } | | } |
| } | | } |
|
| |
|
| | | @media (max-width: 480px) { |
| /* =========================================================
| | .oroza-global-search-field { |
| OROZA PET ATTACK REBALANCE V13.3 - STATS FINAL LIMPIO
| | padding: 5px; |
| Objetivo: eliminar encimados en tarjetas angostas.
| |
| Cambio visual: el titulo queda corto (Fisico/Magico), el valor va debajo
| |
| y el rango/variacion quedan en lineas separadas.
| |
| ========================================================= */
| |
| | |
| /* Evita cualquier badge heredado dentro de la tarjeta de stat. */
| |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v12-primary-stat::after {
| |
| content: none !important;
| |
| display: none !important;
| |
| }
| |
| | |
| /* Grid estable para las dos bases de daño. */
| |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v8-stats,
| |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v6-stats {
| |
| display: grid !important;
| |
| grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
| |
| gap: 12px !important;
| |
| align-items: stretch !important;
| |
| }
| |
| | |
| /* Cada stat usa lectura vertical: titulo -> valor -> rango -> variacion. */
| |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v8-stats .oroza-pet-v6-stat,
| |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v6-stats .oroza-pet-v6-stat {
| |
| position: relative !important;
| |
| display: grid !important;
| |
| grid-template-columns: 1fr !important;
| |
| grid-template-areas:
| |
| "label"
| |
| "value"
| |
| "range"
| |
| "var" !important;
| |
| gap: 8px !important;
| |
| align-content: start !important;
| |
| min-width: 0 !important;
| |
| min-height: 150px !important;
| |
| padding: 15px 14px 13px !important;
| |
| border-radius: 18px !important;
| |
| overflow: hidden !important;
| |
| }
| |
| | |
| /* Tarjeta principal: se entiende por color/borde, sin texto extra que estorbe. */
| |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v12-primary-stat {
| |
| border: 2px solid rgba(224, 178, 61, 0.72) !important;
| |
| background:
| |
| radial-gradient(circle at 88% 0%, rgba(255, 237, 178, 0.45), transparent 42%),
| |
| linear-gradient(180deg, rgba(255, 250, 236, 0.98), rgba(255, 243, 214, 0.97)) !important;
| |
| box-shadow: 0 13px 24px rgba(190, 139, 42, 0.13) !important;
| |
| }
| |
| | |
| /* Titulo compacto: ya no dice ATK Fisico/ATK Magico para evitar saltos feos. */
| |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v8-stats .oroza-pet-v6-stat strong,
| |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v6-stats .oroza-pet-v6-stat strong {
| |
| grid-area: label !important;
| |
| display: inline-flex !important;
| |
| align-items: center !important;
| |
| gap: 5px !important;
| |
| width: 100% !important;
| |
| max-width: none !important;
| |
| margin: 0 !important;
| |
| color: #083e77 !important;
| |
| font-size: 12px !important;
| |
| font-weight: 950 !important;
| |
| line-height: 1.1 !important;
| |
| letter-spacing: 0.02em !important;
| |
| text-transform: uppercase !important;
| |
| white-space: nowrap !important;
| |
| overflow: hidden !important;
| |
| text-overflow: ellipsis !important;
| |
| word-break: normal !important;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v8-stats .oroza-pet-v6-f strong::before,
| |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v6-stats .oroza-pet-v6-f strong::before {
| |
| content: "⚔️" !important;
| |
| flex: 0 0 auto !important;
| |
| font-size: 13px !important;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v8-stats .oroza-pet-v6-m strong::before,
| |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v6-stats .oroza-pet-v6-m strong::before {
| |
| content: "✨" !important;
| |
| flex: 0 0 auto !important;
| |
| font-size: 13px !important;
| |
| }
| |
| | |
| /* Valor grande pero seguro: ya no comparte fila con el titulo. */
| |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v10-stat-value {
| |
| grid-area: value !important;
| |
| display: block !important;
| |
| justify-self: start !important;
| |
| align-self: start !important;
| |
| margin: 0 !important;
| |
| color: #123b67 !important;
| |
| font-size: 20px !important;
| |
| font-weight: 950 !important;
| |
| line-height: 1 !important;
| |
| letter-spacing: 0.01em !important;
| |
| }
| |
| | |
| /* Rango claro y separado por linea punteada. */
| |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v8-stats .oroza-pet-v6-stat em,
| |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v6-stats .oroza-pet-v6-stat em {
| |
| grid-area: range !important;
| |
| display: block !important;
| |
| margin: 0 !important;
| |
| padding-top: 8px !important;
| |
| border-top: 1px dashed rgba(89, 113, 140, 0.24) !important;
| |
| color: #4f6680 !important;
| |
| font-size: 12px !important;
| |
| font-style: normal !important;
| |
| font-weight: 750 !important;
| |
| line-height: 1.45 !important;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v8-stats .oroza-pet-v6-stat em::before,
| |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v6-stats .oroza-pet-v6-stat em::before {
| |
| content: "📊 " !important;
| |
| }
| |
| | |
| /* Variacion como chip independiente. */
| |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v10-stat-var {
| |
| grid-area: var !important;
| |
| justify-self: start !important;
| |
| align-self: end !important;
| |
| display: inline-flex !important;
| |
| align-items: center !important;
| |
| width: fit-content !important;
| |
| margin-top: 2px !important;
| |
| padding: 6px 10px !important;
| |
| border-radius: 999px !important;
| |
| background: rgba(255, 255, 255, 0.78) !important;
| |
| border: 1px dashed rgba(91, 112, 139, 0.28) !important;
| |
| color: #284865 !important;
| |
| font-size: 12px !important;
| |
| font-weight: 900 !important;
| |
| line-height: 1 !important;
| |
| }
| |
| | |
| /* Ajuste fino de las tarjetas de etapa. */
| |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v8-stage {
| |
| padding: 18px !important;
| |
| }
| |
| | |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v8-stage-meta {
| |
| margin-bottom: 14px !important;
| |
| }
| |
| | |
| /* En contenedores estrechos, una sola columna evita cualquier corte. */
| |
| @container (max-width: 680px) { | |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v8-stats, | |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v6-stats {
| |
| grid-template-columns: 1fr !important; | |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v8-stats .oroza-pet-v6-stat, | | .oroza-global-search-icon { |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v6-stats .oroza-pet-v6-stat {
| | width: 32px; |
| min-height: 0 !important; | | font-size: 21px; |
| } | | } |
| }
| |
|
| |
|
| @media (max-width: 760px) {
| | .oroza-global-search-input { |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v8-stats,
| | font-size: 12px; |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v6-stats { | |
| grid-template-columns: 1fr !important; | |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v8-stats .oroza-pet-v6-stat, | | .oroza-global-search-clear { |
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v6-stats .oroza-pet-v6-stat {
| | width: 32px; |
| min-height: 0 !important; | | height: 32px; |
| | font-size: 21px; |
| | line-height: 30px; |
| } | | } |
|
| |
|
| .oroza-page .oroza-pet-v13-3 .oroza-pet-v10-stat-value { | | .oroza-search-result-title { |
| font-size: 19px !important;
| | font-size: 13px; |
| }
| |
| }
| |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| /* =========================================================
| |
| OROZA WIKI - GUÍA DE INSTALACIÓN V2
| |
| Estilos completos y aislados para la página de descargas
| |
| ========================================================= */
| |
| | |
| /* =========================================================
| |
| CONTENEDOR GENERAL
| |
| ========================================================= */
| |
| | |
| .mw-parser-output .oroza-install-v2 {
| |
| width: 100% !important;
| |
| box-sizing: border-box !important;
| |
| }
| |
| | |
| /* Evita que MediaWiki convierta estos enlaces en links simples */
| |
| .mw-parser-output .oroza-install-v2 a,
| |
| .mw-body .oroza-install-v2 a {
| |
| text-decoration: none !important;
| |
| }
| |
| | |
| /* =========================================================
| |
| BOTONES PRINCIPALES DE DESCARGA
| |
| ========================================================= */
| |
| | |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-downloads {
| |
| display: flex !important;
| |
| flex-direction: column !important;
| |
| align-items: center !important;
| |
| justify-content: center !important;
| |
| gap: 16px !important;
| |
| margin-top: 30px !important;
| |
| width: 100% !important;
| |
| }
| |
| | |
| /* Botón principal: Instalador Inteligente */
| |
| .mw-parser-output .oroza-install-v2 a.oroza-install-v2-btn-main {
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| justify-content: center !important;
| |
| gap: 18px !important;
| |
| | |
| width: 100% !important;
| |
| max-width: 680px !important;
| |
| min-height: 88px !important;
| |
| box-sizing: border-box !important;
| |
| | |
| padding: 20px 30px !important;
| |
| border-radius: 22px !important;
| |
| | |
| background: linear-gradient(180deg, #ffcf3a 0%, #ffb400 48%, #d79a00 100%) !important;
| |
| border: 2px solid #fff0b8 !important;
| |
| | |
| color: #162234 !important;
| |
| text-align: left !important;
| |
| font-weight: 900 !important;
| |
| | |
| cursor: pointer !important;
| |
| | |
| box-shadow:
| |
| 0 16px 34px rgba(255, 180, 0, 0.38),
| |
| inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
| |
| | |
| transition:
| |
| transform 0.22s ease,
| |
| box-shadow 0.22s ease,
| |
| filter 0.22s ease !important;
| |
| }
| |
| | |
| .mw-parser-output .oroza-install-v2 a.oroza-install-v2-btn-main:hover {
| |
| transform: translateY(-4px) scale(1.01) !important;
| |
| filter: brightness(1.05) !important;
| |
| color: #162234 !important;
| |
| text-decoration: none !important;
| |
| | |
| box-shadow:
| |
| 0 22px 44px rgba(255, 180, 0, 0.52),
| |
| inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
| |
| }
| |
| | |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-btn-icon {
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| justify-content: center !important;
| |
| | |
| width: 54px !important;
| |
| min-width: 54px !important;
| |
| height: 54px !important;
| |
| | |
| border-radius: 16px !important;
| |
| background: rgba(255, 255, 255, 0.42) !important;
| |
| | |
| font-size: 30px !important;
| |
| line-height: 1 !important;
| |
| | |
| box-shadow: inset 0 1px 0 rgba(255,255,255,0.55) !important;
| |
| }
| |
| | |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-btn-content {
| |
| display: flex !important;
| |
| flex-direction: column !important;
| |
| min-width: 0 !important;
| |
| }
| |
| | |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-btn-title {
| |
| display: block !important;
| |
| color: #162234 !important;
| |
| font-size: 21px !important;
| |
| line-height: 1.2 !important;
| |
| font-weight: 950 !important;
| |
| }
| |
| | |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-btn-subtitle {
| |
| display: block !important;
| |
| margin-top: 7px !important;
| |
| color: rgba(22, 34, 52, 0.78) !important;
| |
| font-size: 13px !important;
| |
| line-height: 1.35 !important;
| |
| font-weight: 800 !important;
| |
| }
| |
| | |
| /* Botón secundario: Google Drive */
| |
| .mw-parser-output .oroza-install-v2 a.oroza-install-v2-btn-mirror {
| |
| display: inline-flex !important;
| |
| align-items: center !important;
| |
| justify-content: center !important;
| |
| gap: 10px !important;
| |
| | |
| width: 100% !important;
| |
| max-width: 440px !important;
| |
| min-height: 54px !important;
| |
| box-sizing: border-box !important;
| |
| | |
| padding: 14px 22px !important;
| |
| border-radius: 16px !important;
| |
| | |
| background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
| |
| border: 2px solid #d7e2ee !important;
| |
| | |
| color: #1e4166 !important;
| |
| font-size: 15px !important;
| |
| font-weight: 900 !important;
| |
| | |
| cursor: pointer !important;
| |
| | |
| box-shadow: 0 9px 20px rgba(43, 74, 109, 0.11) !important;
| |
| | |
| transition:
| |
| transform 0.22s ease,
| |
| box-shadow 0.22s ease,
| |
| border-color 0.22s ease, | |
| background 0.22s ease !important;
| |
| }
| |
| | |
| .mw-parser-output .oroza-install-v2 a.oroza-install-v2-btn-mirror:hover {
| |
| transform: translateY(-3px) !important;
| |
| border-color: #ffb400 !important;
| |
| background: linear-gradient(180deg, #ffffff 0%, #fff8e8 100%) !important;
| |
| color: #17324f !important;
| |
| text-decoration: none !important;
| |
| box-shadow: 0 14px 26px rgba(43, 74, 109, 0.15) !important;
| |
| }
| |
| | |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-btn-icon-small {
| |
| font-size: 18px !important;
| |
| line-height: 1 !important;
| |
| }
| |
| | |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-note {
| |
| margin-top: 16px !important;
| |
| text-align: center !important;
| |
| }
| |
| | |
| /* =========================================================
| |
| PASO OBLIGATORIO
| |
| ========================================================= */
| |
| | |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-warning-step {
| |
| background: linear-gradient(180deg, #fffdf7 0%, #fff8ea 100%) !important;
| |
| border-color: #f0dfb3 !important;
| |
| box-shadow: 0 8px 18px rgba(255, 180, 0, 0.10) !important;
| |
| }
| |
| | |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-warning-step .oroza-download-step-number {
| |
| background: linear-gradient(180deg, #ffb400 0%, #dcae1d 100%) !important;
| |
| color: #162234 !important;
| |
| }
| |
| | |
| /* =========================================================
| |
| TARJETA RECOMENDADA
| |
| ========================================================= */
| |
| | |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-recommended-card {
| |
| border-top-color: #ffb400 !important;
| |
| background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%) !important;
| |
| }
| |
| | |
| /* =========================================================
| |
| BOTONES ZIP - DESCARGA ALTERNATIVA
| |
| ========================================================= */
| |
| | |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-zip-downloads {
| |
| display: grid !important;
| |
| grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
| |
| gap: 22px !important;
| |
| | |
| margin: 32px auto 0 !important;
| |
| width: 100% !important;
| |
| max-width: 940px !important;
| |
| clear: both !important;
| |
| }
| |
| | |
| /* Botón ZIP base */
| |
| .mw-parser-output .oroza-install-v2 a.oroza-install-v2-zip-btn {
| |
| position: relative !important;
| |
| | |
| display: flex !important;
| |
| flex-direction: column !important;
| |
| align-items: center !important;
| |
| justify-content: center !important;
| |
| | |
| min-height: 145px !important;
| |
| box-sizing: border-box !important;
| |
| | |
| padding: 24px 22px 22px !important;
| |
| border-radius: 22px !important;
| |
| | |
| background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%) !important;
| |
| border: 2px solid #d7e2ee !important;
| |
| | |
| color: #1e4166 !important;
| |
| text-align: center !important;
| |
| | |
| cursor: pointer !important;
| |
| overflow: hidden !important;
| |
| | |
| box-shadow:
| |
| 0 14px 30px rgba(43, 74, 109, 0.12),
| |
| inset 0 1px 0 rgba(255,255,255,0.8) !important;
| |
| | |
| transition:
| |
| transform 0.22s ease,
| |
| box-shadow 0.22s ease,
| |
| border-color 0.22s ease,
| |
| background 0.22s ease,
| |
| filter 0.22s ease !important;
| |
| }
| |
| | |
| /* Barra superior */
| |
| .mw-parser-output .oroza-install-v2 a.oroza-install-v2-zip-btn::before {
| |
| content: "" !important;
| |
| position: absolute !important;
| |
| top: 0 !important;
| |
| left: 0 !important;
| |
| width: 100% !important;
| |
| height: 7px !important;
| |
| background: #2b4a6d !important;
| |
| }
| |
| | |
| /* Etiqueta DESCARGAR */
| |
| .mw-parser-output .oroza-install-v2 a.oroza-install-v2-zip-btn::after {
| |
| content: "DESCARGAR" !important;
| |
| display: inline-flex !important;
| |
| align-items: center !important;
| |
| justify-content: center !important;
| |
| | |
| margin-top: 14px !important;
| |
| padding: 8px 18px !important;
| |
| border-radius: 999px !important;
| |
| | |
| background: linear-gradient(180deg, #355276 0%, #2b4a6d 100%) !important;
| |
| color: #ffffff !important;
| |
| | |
| font-size: 12px !important;
| |
| font-weight: 950 !important;
| |
| letter-spacing: 0.08em !important;
| |
| line-height: 1 !important;
| |
| | |
| box-shadow: 0 7px 15px rgba(43, 74, 109, 0.18) !important;
| |
| }
| |
| | |
| /* Hover ZIP */
| |
| .mw-parser-output .oroza-install-v2 a.oroza-install-v2-zip-btn:hover {
| |
| transform: translateY(-5px) scale(1.015) !important;
| |
| border-color: #ffb400 !important;
| |
| background: linear-gradient(180deg, #ffffff 0%, #fff8e8 100%) !important;
| |
| color: #17324f !important;
| |
| text-decoration: none !important;
| |
| | |
| box-shadow:
| |
| 0 20px 42px rgba(43, 74, 109, 0.18),
| |
| 0 0 0 4px rgba(255, 180, 0, 0.10),
| |
| inset 0 1px 0 rgba(255,255,255,0.85) !important;
| |
| }
| |
| | |
| /* Español */
| |
| .mw-parser-output .oroza-install-v2 a.oroza-install-v2-zip-es::before {
| |
| background: linear-gradient(90deg, #2b4a6d 0%, #355276 100%) !important;
| |
| }
| |
| | |
| /* Inglés */
| |
| .mw-parser-output .oroza-install-v2 a.oroza-install-v2-zip-en::before {
| |
| background: linear-gradient(90deg, #ffb400 0%, #dcae1d 100%) !important;
| |
| }
| |
| | |
| /* Icono / badge superior */
| |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-zip-icon {
| |
| display: inline-flex !important;
| |
| align-items: center !important;
| |
| justify-content: center !important;
| |
| | |
| width: 48px !important;
| |
| height: 48px !important;
| |
| margin-bottom: 12px !important;
| |
| | |
| border-radius: 16px !important;
| |
| background: #eef4ff !important;
| |
| border: 1px solid #d7e2ee !important;
| |
| | |
| color: #1e4166 !important;
| |
| font-size: 0 !important;
| |
| font-weight: 950 !important;
| |
| line-height: 1 !important;
| |
| | |
| box-shadow: 0 7px 15px rgba(43, 74, 109, 0.08) !important;
| |
| }
| |
| | |
| /* Evita que algunos navegadores muestren la bandera como MX/US plano */
| |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-zip-es .oroza-install-v2-zip-icon::before {
| |
| content: "ES" !important;
| |
| font-size: 16px !important;
| |
| }
| |
| | |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-zip-en .oroza-install-v2-zip-icon::before {
| |
| content: "EN" !important;
| |
| font-size: 16px !important;
| |
| }
| |
| | |
| /* Título ZIP */
| |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-zip-title {
| |
| display: block !important;
| |
| | |
| color: #14375e !important;
| |
| font-size: 21px !important;
| |
| font-weight: 950 !important;
| |
| line-height: 1.25 !important;
| |
| | |
| text-decoration: none !important;
| |
| }
| |
| | |
| /* Subtítulo ZIP */
| |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-zip-subtitle {
| |
| display: block !important;
| |
| | |
| margin-top: 8px !important;
| |
| | |
| color: #6f8298 !important;
| |
| font-size: 13px !important;
| |
| font-weight: 800 !important;
| |
| line-height: 1.35 !important;
| |
| | |
| text-decoration: none !important;
| |
| }
| |
| | |
| /* Hover en textos internos */
| |
| .mw-parser-output .oroza-install-v2 a.oroza-install-v2-zip-btn:hover .oroza-install-v2-zip-title {
| |
| color: #162234 !important;
| |
| }
| |
| | |
| .mw-parser-output .oroza-install-v2 a.oroza-install-v2-zip-btn:hover .oroza-install-v2-zip-icon {
| |
| border-color: #ffb400 !important;
| |
| background: #fff8e8 !important;
| |
| transform: scale(1.04) !important;
| |
| }
| |
| | |
| /* =========================================================
| |
| BOTÓN VCREDIST
| |
| ========================================================= */
| |
| | |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-vcredist-box {
| |
| margin-top: 32px !important;
| |
| }
| |
| | |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-vcredist-actions {
| |
| display: flex !important;
| |
| justify-content: center !important;
| |
| margin-top: 20px !important;
| |
| }
| |
| | |
| .mw-parser-output .oroza-install-v2 a.oroza-install-v2-vcredist-btn {
| |
| display: inline-flex !important;
| |
| align-items: center !important;
| |
| justify-content: center !important;
| |
| | |
| min-width: 330px !important;
| |
| min-height: 58px !important;
| |
| box-sizing: border-box !important;
| |
| | |
| padding: 15px 28px !important;
| |
| border-radius: 17px !important;
| |
| | |
| background: linear-gradient(180deg, #355276 0%, #2b4a6d 100%) !important;
| |
| border: 2px solid #2b4a6d !important;
| |
| | |
| color: #ffffff !important;
| |
| font-size: 16px !important;
| |
| font-weight: 950 !important;
| |
| | |
| cursor: pointer !important;
| |
| | |
| box-shadow: 0 12px 26px rgba(43, 74, 109, 0.22) !important;
| |
| | |
| transition:
| |
| transform 0.22s ease,
| |
| box-shadow 0.22s ease,
| |
| background 0.22s ease,
| |
| border-color 0.22s ease !important;
| |
| }
| |
| | |
| .mw-parser-output .oroza-install-v2 a.oroza-install-v2-vcredist-btn:hover {
| |
| transform: translateY(-4px) !important;
| |
| background: linear-gradient(180deg, #ffcf3a 0%, #ffb400 100%) !important;
| |
| border-color: #ffb400 !important;
| |
| color: #162234 !important;
| |
| text-decoration: none !important;
| |
| | |
| box-shadow:
| |
| 0 18px 36px rgba(255, 180, 0, 0.35),
| |
| 0 0 0 4px rgba(255, 180, 0, 0.10) !important;
| |
| }
| |
| | |
| /* =========================================================
| |
| RESPONSIVE
| |
| ========================================================= */
| |
| | |
| @media (max-width: 768px) {
| |
| .mw-parser-output .oroza-install-v2 a.oroza-install-v2-btn-main {
| |
| justify-content: flex-start !important;
| |
| border-radius: 18px !important;
| |
| padding: 17px 18px !important;
| |
| min-height: 78px !important;
| |
| }
| |
| | |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-btn-icon {
| |
| width: 44px !important;
| |
| min-width: 44px !important;
| |
| height: 44px !important;
| |
| font-size: 24px !important;
| |
| }
| |
| | |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-btn-title {
| |
| font-size: 16px !important;
| |
| }
| |
| | |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-btn-subtitle {
| |
| font-size: 12px !important;
| |
| }
| |
| | |
| .mw-parser-output .oroza-install-v2 a.oroza-install-v2-btn-mirror {
| |
| max-width: 100% !important;
| |
| }
| |
| | |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-zip-downloads {
| |
| grid-template-columns: 1fr !important;
| |
| gap: 16px !important;
| |
| }
| |
| | |
| .mw-parser-output .oroza-install-v2 a.oroza-install-v2-zip-btn {
| |
| min-height: 132px !important;
| |
| padding: 22px 18px 20px !important;
| |
| } | | } |
|
| |
|
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-zip-title { | | .oroza-search-result-snippet { |
| font-size: 18px !important; | | font-size: 11.5px; |
| }
| |
| | |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-zip-subtitle {
| |
| font-size: 12.5px !important;
| |
| }
| |
| | |
| .mw-parser-output .oroza-install-v2 a.oroza-install-v2-vcredist-btn {
| |
| width: 100% !important;
| |
| min-width: 0 !important;
| |
| } | | } |
| } | | } |
|
| |
|
| @media (max-width: 480px) { | | @media (prefers-reduced-motion: reduce) { |
| .mw-parser-output .oroza-install-v2 a.oroza-install-v2-btn-main { | | .oroza-global-search-field, |
| flex-direction: column !important;
| | .oroza-global-search-clear, |
| text-align: center !important;
| | .oroza-global-search-submit, |
| align-items: center !important;
| | .oroza-search-result-link { |
| }
| | transition: none !important; |
| | |
| .mw-parser-output .oroza-install-v2 .oroza-install-v2-btn-content { | |
| align-items: center !important; | |
| } | | } |
|
| |
|
| .mw-parser-output .oroza-install-v2 a.oroza-install-v2-zip-btn { | | .oroza-search-spinner { |
| min-height: 126px !important; | | animation-duration: 1.5s; |
| } | | } |
| } | | } |