/* ═══════════════════════════════════════════════════════════ SYMPOSIA - CLÁSICO (tema blanco institucional) Scoped estrictamente a body.classic Referencias: Web of Science / FECYT / ORCID — blanco, plano, sobrio, bordes grises finos, acento solo en botones y enlaces. Es el tema POR DEFECTO; Modern/Vintage/Sci-Fi son los premium. ═══════════════════════════════════════════════════════════ */ body.classic { /* Paleta base clara */ --bg-dark: #f5f6f8; /* fondo de página, gris muy claro tipo WoS */ --bg-card: #ffffff; /* superficies */ --text-primary: #1f2733; /* casi negro (FECYT usa #212529) */ --text-secondary: #5b6675; --border: #e1e5ec; /* borde gris fino, sin tinte de color */ /* Colores de acento FIJOS: el Clásico usa siempre los colores institucionales de Symposia. Los temas de color personalizados (mint/blue/purple…) son un extra Pro y solo aplican a los temas Pro (Modern/Vintage/Sci-Fi). Definidos aquí en el body, ganan a las variables que theme-manager pone en . */ --primary: #2DD4A3; --primary-dark: #00AB84; --accent: #00D9A3; --primary-rgb: 45, 212, 163; background: var(--bg-dark); background-image: none; color: var(--text-primary); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; letter-spacing: normal; } /* ── HEADER ──────────────────────────────────────────────── */ body.classic .header { background: #ffffff; backdrop-filter: none; border-bottom: 1px solid var(--border); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); } body.classic .btn-icon { background: #f5f6f8; border: 1px solid var(--border); color: var(--text-secondary); } body.classic .btn-icon:hover { background: var(--primary); border-color: var(--primary); color: #ffffff; } /* ── SUPERFICIES (tarjetas, paneles, secciones) ─────────── */ body.classic .stat-card, body.classic .card, body.classic .friend-card, body.classic .chart-card, body.classic .info-card, body.classic .cv-item, body.classic .bg-card, body.classic .edit-section, body.classic .cv-section, body.classic .settings-group, body.classic .globe-container, body.classic .activity-item, body.classic .message-item, body.classic .collaborator-item, body.classic .dropdown-panel, body.classic .country-card, body.classic .sx-card, body.classic .beelzebub-card, body.classic .beelzebub-chip, body.classic .suggestion-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); clip-path: none !important; } body.classic .stat-card:hover, body.classic .chart-card:hover, body.classic .friend-card:hover, body.classic .country-card:hover { transform: none; border-color: #c9d2de; box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08); } /* ── TIPOGRAFÍA ──────────────────────────────────────────── */ body.classic h1, body.classic h2, body.classic h3, body.classic .section-title, body.classic .card-title, body.classic .chart-title { color: var(--text-primary); text-transform: none; text-shadow: none; } /* Valores de métricas: acento sobrio (verde oscuro legible en blanco) */ body.classic .stat-value { background: none; -webkit-text-fill-color: initial; color: var(--primary-dark, #00AB84); text-shadow: none; } /* El logo del header mantiene el degradado de marca (funciona en blanco) */ /* ── NAV INFERIOR ────────────────────────────────────────── */ body.classic .bottom-nav { background: #ffffff; backdrop-filter: none; border-top: 1px solid var(--border); box-shadow: 0 -1px 2px rgba(16, 24, 40, 0.04); } body.classic .nav-item { background: transparent; border: none; color: var(--text-secondary); border-radius: 8px; box-shadow: none; } body.classic .nav-item:hover { background: #f0f2f5; color: var(--text-primary); } body.classic .nav-item.active { background: transparent; color: var(--primary-dark, #00AB84); box-shadow: none; } body.classic .nav-item.active .nav-item-label { font-weight: 700; } /* ── BOTONES ─────────────────────────────────────────────── */ body.classic .btn-primary { background: var(--primary-dark, #00AB84); border: 1px solid var(--primary-dark, #00AB84); color: #ffffff; border-radius: 6px; box-shadow: none; text-shadow: none; } body.classic .btn-primary:hover { background: var(--primary); border-color: var(--primary); box-shadow: 0 2px 6px rgba(16, 24, 40, 0.12); transform: none; } body.classic .btn-secondary { background: #ffffff; border: 1px solid var(--border); color: var(--text-primary); border-radius: 6px; box-shadow: none; } body.classic .btn-secondary:hover { border-color: var(--primary-dark, #00AB84); color: var(--primary-dark, #00AB84); background: #ffffff; } /* ── FORMULARIOS ─────────────────────────────────────────── */ body.classic input[type="text"], body.classic input[type="email"], body.classic input[type="search"], body.classic input[type="number"], body.classic input[type="date"], body.classic input[type="url"], body.classic textarea, body.classic select { background: #ffffff; border: 1px solid #c9d2de; color: var(--text-primary); border-radius: 6px; } body.classic input::placeholder, body.classic textarea::placeholder { color: #9aa5b1; } body.classic input:focus, body.classic textarea:focus, body.classic select:focus { border-color: var(--primary-dark, #00AB84); outline: none; box-shadow: 0 0 0 3px rgba(0, 171, 132, 0.12); } /* ── MODALES Y OVERLAYS ──────────────────────────────────── */ body.classic .modal-overlay { background: rgba(31, 39, 51, 0.45); backdrop-filter: none; } body.classic .modal-content, body.classic .modal-card, body.classic .settings-panel { background: #ffffff; border: 1px solid var(--border); color: var(--text-primary); box-shadow: 0 8px 30px rgba(16, 24, 40, 0.16); } /* ── AVATARES ────────────────────────────────────────────── */ body.classic .profile-avatar, body.classic .friend-avatar, body.classic .collab-avatar, body.classic .message-avatar { border-color: var(--border); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12); } /* ── ENLACES GENÉRICOS DENTRO DE TARJETAS ────────────────── */ body.classic a { color: inherit; } /* ── SCROLLBAR SOBRIO (WebKit) ───────────────────────────── */ body.classic ::-webkit-scrollbar { width: 10px; height: 10px; } body.classic ::-webkit-scrollbar-track { background: #f0f2f5; } body.classic ::-webkit-scrollbar-thumb { background: #c9d2de; border-radius: 5px; } /* ═══════════════════════════════════════════════════════════ AJUSTES POR PÁGINA (elementos con colores oscuros en línea) ═══════════════════════════════════════════════════════════ */ /* Acreditación: hero y tarjetas de país */ body.classic .accred-hero { background: #ffffff; border: 1px solid var(--border); box-shadow: none; } body.classic .accred-hero-title { color: var(--text-primary); background: none; -webkit-text-fill-color: initial; text-shadow: none; } /* Beelzebub: mantiene su identidad roja pero sobre blanco */ body.classic .beelzebub-generate-btn { background: #fdf2f2; border: 1px dashed rgba(220, 38, 38, 0.45); color: #b91c1c; } body.classic .beelzebub-generate-btn:hover { background: #fbe5e5; } /* Píldoras/chips genéricos */ body.classic .sx-chip { background: #eef2f7; color: #3d4a5c; } body.classic .sx-year-btn { background: #ffffff; border: 1px solid #c9d2de; color: var(--text-secondary); } body.classic .sx-year-btn.sel { background: rgba(0, 171, 132, 0.08); border-color: var(--primary-dark, #00AB84); color: var(--primary-dark, #00AB84); } /* Badges de estado (mantener contraste sobre blanco) */ body.classic .badge { text-shadow: none; } /* ── ACENTOS DE TEXTO ───────────────────────────────────── El mint claro (--primary) se diseñó para fondo oscuro; sobre blanco no se lee. En Clásico los acentos de TEXTO usan el tono oscuro (--primary-dark), que sigue el tema de color. */ body.classic .ai-generate-btn, body.classic .project-title, body.classic .suggestions-regenerate-btn, body.classic .quartile-label, body.classic .quartile-badge.q1-badge, body.classic .collab-rank, body.classic .collab-papers, body.classic .chart-value, body.classic .metric-accent, body.classic .progress-label, body.classic .hub-chip.chip-green, body.classic .profile-username, body.classic .edit-section-title { color: var(--primary-dark, #00795d); } body.classic .hub-chip.chip-blue { color: #2563eb; } /* CTA de ORCID en login: verde oscuro para que el blanco se lea */ body.classic .orcid-btn { background: var(--primary-dark, #00AB84); box-shadow: 0 2px 8px rgba(16, 24, 40, 0.15); } /* Avatar con iniciales: degradado algo más profundo en claro */ body.classic .profile-avatar { background: linear-gradient(135deg, var(--primary-dark, #00AB84), var(--primary)); } body.classic .ai-generate-btn, body.classic .suggestions-regenerate-btn { border-color: var(--primary-dark, #00795d); background: rgba(0, 171, 132, 0.06); } /* Enlaces con estilo en línea color:var(--primary) (los fondos no se tocan) */ body.classic a[style*="color:var(--primary)"], body.classic a[style*="color: var(--primary)"] { color: var(--primary-dark, #00795d) !important; border-color: var(--primary-dark, #00795d) !important; } /* Citas con estrella (dorado #FFD700 pensado para oscuro) */ body.classic .paper-cites { color: #b45309 !important; } /* Porcentaje sobre la barra mint de cuartiles: tinta oscura */ body.classic .quartile-percent { color: #083b2d; text-shadow: none; } /* Estilos en línea con colores claros pensados para fondo oscuro */ body.classic [style*="color:var(--primary)"], body.classic [style*="color: var(--primary)"], body.classic [style*="color:#2DD4A3"], body.classic [style*="color: #2DD4A3"], body.classic [style*="color:#00D9A3"], body.classic [style*="color: #00D9A3"] { color: var(--primary-dark, #00795d) !important; } body.classic [style*="color:#10b981"], body.classic [style*="color: #10b981"] { color: #047857 !important; } body.classic [style*="color:#FFD700"], body.classic [style*="color: #FFD700"] { color: #b45309 !important; } body.classic [style*="color:#b794f4"], body.classic [style*="color: #b794f4"] { color: #7c5cbf !important; } /* ── CURRICULUM ──────────────────────────────────────────── */ body.classic .cvn-item-date, body.classic .cvn-subsection-title, body.classic .sec6-pill.has-data, body.classic .badge-verified { color: var(--primary-dark, #00795d); } /* Magic Upload (chat lateral): de noche a día, conservando su lila */ body.classic .cv-chat-panel { background: #ffffff; border-left: 1px solid var(--border); box-shadow: -8px 0 32px rgba(16, 24, 40, 0.18); } body.classic .cvc-header { background: rgba(108, 92, 231, 0.06); border-bottom: 1px solid var(--border); } body.classic .cvc-title { color: #5b4bc4; } body.classic .cvc-btn-close { color: var(--text-secondary); } body.classic .cvc-btn-close:hover { color: var(--text-primary); background: #f0f2f5; } body.classic .cvc-welcome { color: var(--text-secondary); } body.classic .cvc-welcome strong { color: var(--text-primary); } body.classic .cvc-msg--user { background: rgba(108, 92, 231, 0.10); border-color: rgba(108, 92, 231, 0.28); color: var(--text-primary); } body.classic .cvc-msg--model { background: #f5f6f8; border-color: var(--border); color: var(--text-primary); } body.classic .cvc-msg--system { background: rgba(0, 151, 119, 0.08); border-color: rgba(0, 151, 119, 0.25); color: #007a5f; } body.classic .cvc-msg--error { background: #fdf2f2; border-color: rgba(220, 38, 38, 0.3); color: #b91c1c; } body.classic .cvc-msg--typing { background: #f5f6f8; border-color: var(--border); } body.classic .cvc-dots span { background: rgba(31, 39, 51, 0.35); } body.classic .cvc-btn-done { background: rgba(0, 151, 119, 0.08); color: #007a5f; border-color: rgba(0, 151, 119, 0.3); } body.classic .cvc-footer { background: #ffffff; border-top: 1px solid var(--border); } body.classic .cvc-input-row { background: #f5f6f8; } body.classic .cvc-attach-btn { color: var(--text-secondary); } body.classic .cvc-messages::-webkit-scrollbar-thumb { background: #c9d2de; } /* Login (pre-sesión): mismo blanco institucional */ body.classic .login-card { background: #ffffff; border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(16, 24, 40, 0.08); } body.classic .feature-item { background: #f8f9fb; border: 1px solid var(--border); } body.classic .login-subtitle, body.classic .feature-desc, body.classic .footer-text { color: var(--text-secondary); } /* Selector de estilos (ajustes): candado Pro */ body.classic .style-option, body.classic .theme-option { background: transparent; } .style-option { position: relative; } .style-lock--inline { position: static !important; } .style-lock { position: absolute; top: 4px; right: 4px; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: linear-gradient(135deg, #f59e0b, #d97706); color: #ffffff; letter-spacing: 0.3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); pointer-events: none; z-index: 2; }