/* ========================================================================== COMPATIBILIDAD CON eLife Lens / JATS XML -------------------------------------------------------------------------- El visor Lens usa . Las reglas globales de body y enlaces del tema quedan excluidas del lector XML mediante body:not(.reader), evitando que el CSS editorial interfiera con Figures, References, Info y los recursos gráficos del visor. ========================================================================== */ /* ========================================================================== 1. VARIABLES DE COLOR Y FUENTES ========================================================================= */ :root { --color-fondo-cabecera: #000000; --color-dorado: #d4af37; --color-dorado-hover: #b8972f; --color-texto-principal: #1a1a1a; --color-texto-mutado: #666666; --color-bordes-sutiles: #e2e8f0; /* Gris claro para los marcos */ --color-fondo-sitio: #f8fafc; /* Un fondo gris casi blanco para que resalten las tarjetas */ --fuente-limpia: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* ========================================================================== 2. ESTILOS GENERALES ========================================================================= */ body:not(.reader) { font-family: var(--fuente-limpia); color: var(--color-texto-principal); line-height: 1.7; background-color: var(--color-fondo-sitio); /* Fondo del sitio ligeramente gris */ } body:not(.reader) a { color: var(--color-dorado); text-decoration: none; transition: all 0.2s ease; } body:not(.reader) a:hover { color: var(--color-dorado-hover); text-decoration: underline; } /* ========================================================================== 3. MENÚ DE NAVEGACIÓN PRINCIPAL ========================================================================= */ .pkp_navigation_primary > li > a { font-family: var(--fuente-limpia); font-weight: 500; letter-spacing: 0.5px; color: var(--color-dorado) !important; padding: 10px 15px !important; } .pkp_navigation_primary > li > a:hover { color: #ffffff !important; text-decoration: none; } /* ========================================================================== 4. EFECTO DE DESTELLO LENTO EN EL LOGOTIPO ========================================================================= */ .pkp_site_name_wrapper { position: relative; overflow: hidden; display: inline-block; } .pkp_site_name_wrapper img { display: block; max-width: 100%; height: auto; } .pkp_site_name_wrapper::after { content: ''; position: absolute; top: 0; left: -150%; width: 60%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-25deg); animation: destelloLento 8s infinite ease-in-out; } @keyframes destelloLento { 0% { left: -150%; } 37.5% { left: 150%; } 100% { left: 150%; } } /* ========================================================================== 5. LISTADO DE ARTÍCULOS (Efecto de Marco Sombreado / Tarjetas) ========================================================================= */ .obj_article_summary { background-color: #ffffff !important; /* Fondo blanco para contrastar */ border: 1px solid var(--color-bordes-sutiles); /* Borde sutil */ border-radius: 8px; /* Esquinas redondeadas elegantes */ padding: 30px !important; /* Espacio interno para que respire el texto */ margin-bottom: 25px !important; /* Espacio entre una tarjeta y otra */ /* El sombreado suave */ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); /* Transición suave para el efecto de movimiento */ transition: transform 0.3s ease, box-shadow 0.3s ease; } /* Efecto al pasar el cursor sobre el artículo */ .obj_article_summary:hover { transform: translateY(-3px); /* Eleva la tarjeta ligeramente */ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04); /* Sombra más profunda */ } /* Título del artículo dentro del marco */ .obj_article_summary .title a { font-family: var(--fuente-limpia); font-size: 1.4rem; color: var(--color-texto-principal); font-weight: 600; line-height: 1.3; } .obj_article_summary .title a:hover { color: var(--color-dorado); text-decoration: none; } /* Autores del artículo */ .obj_article_summary .authors { color: var(--color-texto-mutado); font-size: 0.95rem; margin-top: 10px; font-weight: 500; } /* Botón de PDF minimalista */ .obj_galley_link { background-color: transparent !important; color: var(--color-dorado) !important; border: 1px solid var(--color-dorado) !important; border-radius: 4px; padding: 6px 16px !important; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; transition: all 0.3s ease; display: inline-block; margin-top: 15px; } .obj_galley_link:hover { background-color: var(--color-dorado) !important; color: #ffffff !important; text-decoration: none !important; } /* ========================================================================== 6. BARRA LATERAL (Sidebar limpia) ========================================================================= */ .pkp_structure_sidebar { background: transparent; border: none; padding-left: 20px; } .pkp_structure_sidebar .block { background-color: #ffffff; border: 1px solid var(--color-bordes-sutiles); border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); } .pkp_structure_sidebar .title { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-texto-principal); border-bottom: 2px solid var(--color-dorado); padding-bottom: 5px; margin-bottom: 15px; }