/* ============================================================ smgr · css/pages/viz_evolucion_jugadores.css — DISEÑO de la visualización "Evolución de carrera" (visualizacion_evolucion_jugadores.php). La TARJETA capturable (gráfica Chart.js, fondo oscuro) va scopeada bajo #captureArea; los CONTROLES viven FUERA (namespace .evo-tools) y el menú del autocompletado jQuery UI se adjunta a (selectores .ui-autocomplete globales). Ancho natural 1100px. Sin reset global ni body{background}. ============================================================ */ /* ---------- Controles (fuera del captureArea) ---------- */ .evo-tools .controls { background: #fff; border-radius: 12px; padding: 20px 25px; width: 1100px; max-width: 100%; margin: 16px auto 0; box-shadow: 0 4px 20px rgba(0,0,0,0.08); display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; font-family: 'Inter', sans-serif; } .evo-tools .control-group { display: flex; flex-direction: column; gap: 4px; } .evo-tools .control-group label { font-size: 11px; font-weight: 600; color: #4a5568; text-transform: uppercase; letter-spacing: 0.5px; } .evo-tools .control-group input, .evo-tools .control-group select { font-family: 'Inter', sans-serif; font-size: 13px; padding: 8px 12px; border: 1px solid #cbd5e0; border-radius: 8px; outline: none; background: #f7fafc; } .evo-tools .control-group input { width: 210px; } .evo-tools .control-group input:focus, .evo-tools .control-group select:focus { border-color: #4299e1; box-shadow: 0 0 0 2px rgba(66,153,225,0.2); } .evo-tools .btn-load { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #2c5282 0%, #2a4365 100%); color: #fff; border: none; padding: 9px 22px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .evo-tools .btn-load:hover { opacity: 0.9; transform: translateY(-1px); } .evo-tools .btn-load:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .evo-tools .player-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; } .evo-tools .mode-toggle { display: inline-flex; border-radius: 8px; overflow: hidden; border: 1px solid #cbd5e0; margin-bottom: 2px; } .evo-tools .mode-toggle button { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; padding: 8px 14px; border: none; cursor: pointer; background: #f7fafc; color: #4a5568; transition: all 0.15s; } .evo-tools .mode-toggle button.active { background: linear-gradient(135deg, #2c5282 0%, #2a4365 100%); color: #fff; } /* ---------- jQuery UI autocomplete (menú adjunto a ) ---------- */ .ui-autocomplete { background: #fff !important; border: 1px solid #cbd5e0 !important; border-radius: 8px !important; max-height: 250px; overflow-y: auto; box-shadow: 0 8px 25px rgba(0,0,0,0.12) !important; z-index: 9999 !important; padding: 4px 0 !important; } .ui-autocomplete .ui-menu-item a { color: #2d3748 !important; background: transparent !important; padding: 8px 14px !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; border: none !important; } .ui-autocomplete .ui-menu-item a.ui-state-focus, .ui-autocomplete .ui-menu-item a.ui-state-active { background: #edf2f7 !important; color: #2d3748 !important; margin: 0 !important; } /* ---------- Tarjeta capturable (gráfica) ---------- */ #captureArea { font-family: 'Inter', sans-serif; background: #2d3748; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.1); overflow: hidden; width: 1100px; } #captureArea * { box-sizing: border-box; } #captureArea .chart-header { background: linear-gradient(135deg, #2c5282 0%, #2a4365 100%); padding: 20px 30px; display: flex; align-items: center; gap: 15px; } #captureArea .chart-header h2 { color: #fff; font-size: 20px; font-weight: 700; } #captureArea .chart-header p { color: rgba(255,255,255,0.7); font-size: 12px; margin-top: 4px; } #captureArea .chart-body { padding: 15px 20px 10px; } #captureArea .chart-footer { padding: 10px 20px; text-align: center; font-size: 12px; display: flex; justify-content: center; gap: 20px; } #captureArea .chart-footer span { color: #fff; opacity: 0.8; } #captureArea .empty-state { color: #a0aec0; text-align: center; padding: 160px 20px; font-size: 14px; }