/* DVYER Home Live v15 · clean dashboard */
.live-dashboard { margin: 30px auto 14px; padding: 28px; border: 1px solid rgba(148,184,172,.16); border-radius: 18px; background: #08110e; box-shadow: 0 18px 48px rgba(0,0,0,.2); }
.live-dashboard-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.live-dashboard-head h2 { margin-top: 5px; font-size: clamp(28px,3vw,40px); line-height: 1.08; letter-spacing: -.04em; }
.live-dashboard-head p { max-width: 680px; margin-top: 8px; color: var(--muted); font-size: 12px; }
.live-dashboard-state { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgba(20,230,164,.2); border-radius: 8px; color: #baf4df; background: rgba(20,230,164,.055); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.live-dashboard-state i,.live-activity-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 8px rgba(20,230,164,.65); }
.live-dashboard-state.is-offline { color: #ffd1da; border-color: rgba(251,113,133,.25); background: rgba(251,113,133,.06); }
.live-dashboard-state.is-offline i { background: var(--red); box-shadow: none; }
.live-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.live-kpi { min-width: 0; padding: 17px 18px; border: 1px solid rgba(148,184,172,.12); border-radius: 12px; background: #0b1713; transition: border-color .2s ease,transform .2s ease; }
.live-kpi:hover { transform: translateY(-1px); border-color: rgba(20,230,164,.28); }
.live-kpi-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 9px; font-weight: 700; }
.live-kpi-label span:last-child { color: var(--emerald); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.live-kpi strong { display: block; margin-top: 10px; color: #f2fbf8; font-size: clamp(25px,2.4vw,35px); line-height: 1; letter-spacing: -.04em; }
.live-kpi small { display: block; margin-top: 8px; color: var(--muted-2); font-size: 8px; }
.live-kpi.is-bumping { border-color: rgba(20,230,164,.42); }
.live-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.live-panel { min-width: 0; padding: 18px; border: 1px solid rgba(148,184,172,.12); border-radius: 12px; background: #0a1512; }
.live-panel-events { grid-column: 1 / -1; }
.live-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 24px; margin-bottom: 13px; padding-bottom: 11px; border-bottom: 1px solid rgba(148,184,172,.1); }
.live-panel-head h3 { font-size: 13px; letter-spacing: -.01em; }
.live-panel-head span { color: var(--muted-2); font-family: var(--mono); font-size: 8px; }
.live-route-list,.live-user-list { display: grid; gap: 7px; }
.live-route-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px 12px; align-items: center; padding: 9px 10px; border-radius: 8px; background: rgba(255,255,255,.018); }
.live-route-main { min-width: 0; display: flex; align-items: center; gap: 9px; }
.live-route-rank { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 6px; color: var(--emerald); background: rgba(20,230,164,.09); font: 800 8px var(--mono); }
.live-route-main code { min-width: 0; overflow: hidden; color: #dce9e4; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.live-route-count { color: #e7f7f1; font: 700 9px var(--mono); }
.live-route-track { grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.05); }
.live-route-track i { display: block; width: var(--route-width,0%); height: 100%; border-radius: inherit; background: var(--emerald); transition: width .4s ease; }
.live-user-row { display: grid; grid-template-columns: 24px 34px minmax(0,1fr) auto auto; align-items: center; gap: 9px; min-height: 49px; padding: 7px 9px; border-radius: 8px; background: rgba(255,255,255,.018); }
.live-user-rank { color: var(--muted-2); font: 700 8px var(--mono); text-align: center; }
.live-user-rank.is-medal { color: var(--amber); }
.live-user-avatar { width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; color: #052117; background: #39d9a5; font-size: 10px; font-weight: 900; }
.live-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.live-user-copy { min-width: 0; }
.live-user-copy strong,.live-user-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-user-copy strong { font-size: 9px; }
.live-user-copy small { margin-top: 2px; color: var(--muted-2); font-size: 8px; }
@keyframes spinVip { 100% { transform: rotate(360deg) scale(1.1); } }
@keyframes spinAdmin { 0% { transform: rotate(0deg) scale(1.2); filter: hue-rotate(0deg) drop-shadow(0 0 8px #ef4444); } 100% { transform: rotate(360deg) scale(1.2); filter: hue-rotate(360deg) drop-shadow(0 0 8px #ef4444); } }
@keyframes pulseNeon { 0%, 100% { filter: brightness(1) drop-shadow(0 0 5px currentColor); } 50% { filter: brightness(1.4) drop-shadow(0 0 12px currentColor); } }
@keyframes rainbowGlow { 0% { color: #ef4444; text-shadow: 0 0 10px #ef4444; } 33% { color: #3b82f6; text-shadow: 0 0 10px #3b82f6; } 66% { color: #10b981; text-shadow: 0 0 10px #10b981; } 100% { color: #ef4444; text-shadow: 0 0 10px #ef4444; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

.vip-icon { display: inline-block; width: 24px; height: 24px; margin-right: 6px; border-radius: 50%; mix-blend-mode: screen; filter: drop-shadow(0 0 5px currentColor) contrast(1.3) brightness(1.2); }
.live-user-row[data-plan="ultra"] .vip-icon, .live-user-row[data-plan="pro"] .vip-icon { animation: spinVip 4s linear infinite; }
.live-user-row[data-plan="admin"] .vip-icon { width: 18px; height: 18px; animation: spinAdmin 1.5s linear infinite; margin-right: 5px; filter: drop-shadow(0 0 5px #ff0000); }

.live-role { display: flex; align-items: center; justify-content: center; padding: 4px 7px; border-radius: 6px; color: #a8efd5; background: rgba(20,230,164,.07); font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; }

/* Nombres colorizados con Neón MÁS INTENSO y en todo el texto */
.live-user-row[data-plan="ultra"] .live-user-copy * { color: #f59e0b; text-shadow: 0 0 8px rgba(245, 158, 11, 0.6); font-weight: 900; }
.live-user-row[data-plan="pro"] .live-user-copy * { color: #d8b4fe; text-shadow: 0 0 8px rgba(168, 85, 247, 0.6); font-weight: 900; }
.live-user-row[data-plan="plus"] .live-user-copy * { color: #93c5fd; text-shadow: 0 0 8px rgba(59, 130, 246, 0.6); font-weight: 900; }
.live-user-row[data-plan="admin"] .live-user-copy * { animation: rainbowGlow 3s infinite; font-weight: 900; font-family: monospace; font-size: 11px; }

/* Badges VIP Neón Giratorios */
.live-user-row[data-plan="ultra"] .live-role { color: #fbbf24; background: #1a1000; box-shadow: 0 0 15px rgba(245,158,11,0.8), inset 0 0 5px rgba(245,158,11,0.4); border: 1px solid #fbbf24; animation: float 2s ease-in-out infinite; padding: 2px 8px; border-radius: 8px; font-size: 10px; }
.live-user-row[data-plan="pro"] .live-role { color: #d8b4fe; background: #140026; box-shadow: 0 0 15px rgba(168,85,247,0.8), inset 0 0 5px rgba(168,85,247,0.4); border: 1px solid #d8b4fe; animation: float 2.5s ease-in-out infinite; padding: 2px 8px; border-radius: 8px; font-size: 10px; }
.live-user-row[data-plan="plus"] .live-role { color: #93c5fd; background: #001026; box-shadow: 0 0 12px rgba(59,130,246,0.8); border: 1px solid #93c5fd; padding: 2px 8px; border-radius: 8px; font-size: 10px; }
.live-user-row[data-plan="admin"] .live-role { color: #fca5a5; background: #1a0000; box-shadow: 0 0 25px #ef4444, inset 0 0 15px #ef4444; border: 2px solid #ef4444; font-family: monospace; font-size: 10px; padding: 2px 8px; border-radius: 8px; animation: pulseNeon 0.5s ease-in-out infinite alternate; transform: scale(1.1); margin-right: 5px; }
/* Fondos brillantes y saltantes para todos los planes de pago */
.live-user-row[data-plan="admin"] { background: rgba(239, 68, 68, 0.15) !important; border: 1px solid rgba(239, 68, 68, 0.5); box-shadow: inset 0 0 20px rgba(239, 68, 68, 0.3); transform: scale(1.02); z-index: 10; position: relative; }
.live-user-row[data-plan="ultra"] { background: rgba(245, 158, 11, 0.15) !important; border: 1px solid rgba(245, 158, 11, 0.5); box-shadow: inset 0 0 20px rgba(245, 158, 11, 0.3); transform: scale(1.02); z-index: 9; position: relative; }
.live-user-row[data-plan="pro"] { background: rgba(168, 85, 247, 0.15) !important; border: 1px solid rgba(168, 85, 247, 0.5); box-shadow: inset 0 0 20px rgba(168, 85, 247, 0.3); transform: scale(1.02); z-index: 8; position: relative; }
.live-user-row[data-plan="plus"] { background: rgba(59, 130, 246, 0.15) !important; border: 1px solid rgba(59, 130, 246, 0.5); box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.3); transform: scale(1.02); z-index: 7; position: relative; }

/* Hacer que los iconos giren para todos los de pago igual que el admin */
.live-user-row[data-plan="ultra"] .vip-icon, .live-user-row[data-plan="pro"] .vip-icon, .live-user-row[data-plan="plus"] .vip-icon { animation: spinAdmin 3s linear infinite; }

.live-user-row[data-plan="admin"] .live-user-avatar { border: 2px solid #ef4444; box-shadow: 0 0 15px #ef4444; animation: spinAdmin 3s linear infinite; }
.live-user-row[data-plan="free"] .live-role { color: #94a3b8; background: rgba(148,163,184,0.1); border: 1px dashed rgba(148,163,184,0.3); box-shadow: none; }
.live-user-total { color: #e7f7f1; font: 700 10px var(--mono); text-align: right; }
.live-country-list { display: grid; gap: 7px; }
.live-country-row { display: grid; grid-template-columns: 22px 27px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; background: rgba(255,255,255,.018); }
.live-country-rank { color: var(--muted-2); font: 700 8px var(--mono); text-align: center; }
.live-country-flag { font-size: 18px; line-height: 1; }
.live-country-row strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.live-country-row b { color: #e7f7f1; font: 700 8px var(--mono); }
.live-country-track { grid-column: 3 / -1; height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.05); }
.live-country-track i { display: block; width: var(--country-width,0%); height: 100%; border-radius: inherit; background: var(--emerald); }
.live-event-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 18px; }
.live-event-row { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 42px; padding: 7px 4px; border-bottom: 1px solid rgba(148,184,172,.08); }
.live-event-copy { min-width: 0; }
.live-event-copy strong,.live-event-copy code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-event-copy strong { color: #dfeae6; font-size: 9px; }
.live-event-copy code { margin-top: 2px; color: var(--emerald); font-size: 8px; }
.live-event-time { color: var(--muted-2); font: 7px var(--mono); white-space: nowrap; }
.live-empty { min-height: 150px; display: grid; place-items: center; padding: 20px; color: var(--muted-2); font-size: 9px; text-align: center; }
.live-privacy { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(148,184,172,.1); color: var(--muted-2); font-size: 8px; }
.live-privacy strong { color: #bdd4cb; }
.live-privacy time { font-family: var(--mono); }
.metrics-strip .metric-live-tag { color: var(--emerald); }

@media (max-width:1100px) { .live-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .live-panel-countries,.live-panel-events { grid-column: 1 / -1; } }
@media (max-width:900px) { .live-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); } .live-grid { grid-template-columns: 1fr; } .live-panel-countries,.live-panel-events { grid-column: auto; } }
@media (max-width:620px) { .live-dashboard { width: calc(100% - 22px); margin-top: 20px; padding: 16px 13px; border-radius: 14px; } .live-dashboard-head { align-items: flex-start; flex-direction: column; gap: 14px; } .live-dashboard-head h2 { font-size: 27px; } .live-dashboard-head p { font-size: 10px; } .live-kpis { gap: 7px; } .live-kpi { padding: 13px 11px; } .live-kpi strong { font-size: 23px; } .live-panel { padding: 13px 11px; } .live-event-list { grid-template-columns: 1fr; } .live-privacy { align-items: flex-start; flex-direction: column; gap: 5px; } }
@media (prefers-reduced-motion:reduce) { .live-kpi,.live-route-track i { transition: none; } }