* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    background: #161a21;
    color: #e5e7eb;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* Barra de progreso tipo YouTube (infinita, discreta) */
#topbar-progress.topbar-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 2px;
    z-index: 10000; overflow: hidden; pointer-events: none;
    opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s;
}
#topbar-progress.topbar-progress.loading {
    opacity: 1; visibility: visible;
}
#topbar-progress.topbar-progress::before {
    content: '';
    position: absolute; left: 0; top: 0; height: 100%;
    width: 30%; background: var(--primary);
    animation: topbar-progress-slide 1.5s ease-in-out infinite;
}
@keyframes topbar-progress-slide {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(333%); }
    100% { transform: translateX(-100%); }
}

/* Skeleton loading tipo Facebook */
.app-content-skeleton {
    min-height: 200px;
}
.app-content-skeleton .skeleton-line {
    height: 1rem; background: linear-gradient(90deg, #2d323e 25%, #3a3f4b 50%, #2d323e 75%);
    background-size: 200% 100%; animation: skeleton-shimmer 1.2s ease-in-out infinite;
    border-radius: 4px;
}
.app-content-skeleton .skeleton-title { width: 45%; height: 1.5rem; margin-bottom: 1.5rem; }
.app-content-skeleton .skeleton-filters { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.app-content-skeleton .skeleton-filter { width: 8rem; height: 2.25rem; }
.app-content-skeleton .skeleton-table { margin-top: 1rem; }
.app-content-skeleton .skeleton-row {
    display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0;
    border-bottom: 1px solid #2d323e;
}
.app-content-skeleton .skeleton-avatar {
    width: 28px; height: 28px; min-width: 28px; min-height: 28px;
    flex: 0 0 28px; aspect-ratio: 1; border-radius: 50%;
    background: linear-gradient(90deg, #2d323e 25%, #3a3f4b 50%, #2d323e 75%);
    background-size: 200% 100%; animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
.app-content-skeleton .skeleton-title,
.app-content-skeleton .skeleton-filter {
    background: linear-gradient(90deg, #2d323e 25%, #3a3f4b 50%, #2d323e 75%);
    background-size: 200% 100%; animation: skeleton-shimmer 1.2s ease-in-out infinite;
    border-radius: 4px;
}
.app-content-skeleton .skeleton-row .skeleton-line { flex: 1; min-width: 0; }
.app-content-skeleton .skeleton-row .skeleton-line:nth-child(2) { flex: 2; }
.app-content-skeleton .skeleton-row .skeleton-line:nth-child(3) { width: 4rem; flex: none; }

/* Skeleton Dashboard */
.app-content-skeleton.skeleton-dashboard .skeleton-dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.app-content-skeleton.skeleton-dashboard .skeleton-dash-title { width: 180px; height: 1.5rem; }
.app-content-skeleton.skeleton-dashboard .skeleton-dash-select { width: 140px; height: 2rem; }
.app-content-skeleton.skeleton-dashboard .skeleton-dash-kpis { display: flex; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.app-content-skeleton.skeleton-dashboard .skeleton-dash-kpi { width: 140px; height: 80px; border-radius: 8px; }
.app-content-skeleton.skeleton-dashboard .skeleton-dash-section { margin-bottom: 1.5rem; }
.app-content-skeleton.skeleton-dashboard .skeleton-dash-section-title { width: 200px; height: 1.1rem; margin-bottom: 1rem; }
.app-content-skeleton.skeleton-dashboard .skeleton-dash-chart { height: 200px; border-radius: 8px; }
.app-content-skeleton.skeleton-dashboard .skeleton-dash-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
.app-content-skeleton.skeleton-dashboard .skeleton-dash-card { aspect-ratio: 16/9; border-radius: 6px; }
.app-content-skeleton.skeleton-dashboard .skeleton-dash-title,
.app-content-skeleton.skeleton-dashboard .skeleton-dash-select,
.app-content-skeleton.skeleton-dashboard .skeleton-dash-kpi,
.app-content-skeleton.skeleton-dashboard .skeleton-dash-section-title,
.app-content-skeleton.skeleton-dashboard .skeleton-dash-chart,
.app-content-skeleton.skeleton-dashboard .skeleton-dash-card {
    background: linear-gradient(90deg, #2d323e 25%, #3a3f4b 50%, #2d323e 75%);
    background-size: 200% 100%; animation: skeleton-shimmer 1.2s ease-in-out infinite;
    border-radius: 4px;
}

/* Skeleton Perfil */
.app-content-skeleton.skeleton-perfil .skeleton-perfil-title { width: 160px; height: 1.5rem; margin-bottom: 1.5rem; }
.app-content-skeleton.skeleton-perfil .skeleton-perfil-line { width: 70%; height: 1rem; margin-bottom: 0.75rem; }
.app-content-skeleton.skeleton-perfil .skeleton-perfil-title,
.app-content-skeleton.skeleton-perfil .skeleton-perfil-line {
    background: linear-gradient(90deg, #2d323e 25%, #3a3f4b 50%, #2d323e 75%);
    background-size: 200% 100%; animation: skeleton-shimmer 1.2s ease-in-out infinite;
    border-radius: 4px;
}

/* Skeleton Genérico */
.app-content-skeleton.skeleton-generic .skeleton-gen-title { width: 40%; height: 1.5rem; margin-bottom: 1.5rem; }
.app-content-skeleton.skeleton-generic .skeleton-gen-lines { margin-bottom: 1.5rem; }
.app-content-skeleton.skeleton-generic .skeleton-gen-line { height: 1rem; margin-bottom: 0.5rem; border-radius: 4px; }
.app-content-skeleton.skeleton-generic .skeleton-gen-title,
.app-content-skeleton.skeleton-generic .skeleton-gen-line {
    background: linear-gradient(90deg, #2d323e 25%, #3a3f4b 50%, #2d323e 75%);
    background-size: 200% 100%; animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
.app-content-skeleton.skeleton-generic .skeleton-gen-line:nth-child(1) { width: 90%; }
.app-content-skeleton.skeleton-generic .skeleton-gen-line:nth-child(2) { width: 75%; }
.app-content-skeleton.skeleton-generic .skeleton-gen-line:nth-child(3) { width: 60%; }
.app-content-skeleton.skeleton-generic .skeleton-gen-line:nth-child(4) { width: 85%; }
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

:root {
    --primary: #fc2044;
    --primary-hover: #e01a3a;
    --primary-soft: rgba(252, 32, 68, 0.12);
    --primary-glow: rgba(252, 32, 68, 0.28);
    --topbar-base-h: 56px;
    --topbar-h: calc(var(--topbar-base-h) + env(safe-area-inset-top, 0px));
    --sidebar-w: 240px;
    --bottom-bar-h: 60px;
    --bottom-bar-total-h: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom, 0px));

    --bg-base: #0f1115;
    --bg-surface-1: #14171d;
    --bg-surface-2: #1a1e26;
    --bg-surface-hover: rgba(255, 255, 255, 0.04);
    --bg-surface-hover-strong: rgba(255, 255, 255, 0.06);
    --border-color: rgba(255, 255, 255, 0.07);
    --border-color-strong: rgba(255, 255, 255, 0.1);
    --text-primary: #e5e7eb;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.25);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.4);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ui-surface-radius: 14px;
    --ui-surface-glow:
        radial-gradient(ellipse 85% 70% at 100% 0%, rgba(124, 58, 237, 0.07) 0%, transparent 52%),
        radial-gradient(ellipse 55% 45% at 0% 100%, rgba(252, 32, 68, 0.05) 0%, transparent 48%);
}

/* Topbar */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    min-height: var(--topbar-h);
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: 1rem;
    padding-bottom: 0;
    padding-left: 0.25rem;
    background: rgba(20, 23, 29, 0.85);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 900;
}
.topbar-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 9px;
    padding: 0;
    margin-right: 0.25rem;
    transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.topbar-menu-btn:hover { background: var(--bg-surface-hover-strong); color: var(--text-primary); }
.topbar-menu-btn .topbar-menu-icon { width: 20px; height: 20px; display: block; }
.topbar-brand {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    padding: 0 0.25rem;
}
.topbar-brand-logo {
    height: 36px;
    display: block;
}
.topbar-spacer { flex: 1; }

/* Topbar search */
.topbar-search-wrap {
    padding-left: 2.5rem;
    flex: 1;
    min-width: 0;
    max-width: 420px;
}
.topbar-search-box { position: relative; }
.topbar-search-icon {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
    transition: color 0.18s var(--ease);
}
.topbar-search-input {
    width: 100%;
    max-width: 340px;
    padding: 0.55rem 0.9rem 0.55rem 2.3rem;
    font-size: 0.875rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    outline: none;
    transition: all 0.2s var(--ease);
}
.topbar-search-input::placeholder { color: var(--text-muted); }
.topbar-search-input:hover { background: rgba(255, 255, 255, 0.06); }
.topbar-search-input:focus {
    background: var(--bg-surface-1);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.topbar-search-box:focus-within .topbar-search-icon { color: var(--primary); }
.topbar-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 360px;
    overflow-y: auto;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    padding: 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color-strong) transparent;
}
.topbar-search-dropdown::-webkit-scrollbar { width: 6px; }
.topbar-search-dropdown::-webkit-scrollbar-track { background: transparent; }
.topbar-search-dropdown::-webkit-scrollbar-thumb {
    background: var(--border-color-strong); border-radius: 3px;
    transition: background 0.2s;
}
.topbar-search-dropdown::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
.topbar-search-dropdown.visible { display: block; animation: dropdown-in 0.18s var(--ease); }
@keyframes dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.topbar-search-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    transition: background 0.15s var(--ease);
}
.topbar-search-item + .topbar-search-item { margin-top: 2px; }
.topbar-search-item:hover { background: var(--bg-surface-hover-strong); }
.topbar-search-item-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-surface-2);
}
.topbar-search-item-body { flex: 1; min-width: 0; }
.topbar-search-item-name { font-weight: 600; color: var(--text-primary); font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-search-item-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem; }
.topbar-search-item-live {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    text-transform: uppercase;
}
.topbar-search-item-live::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
    animation: pulse-live 1.5s ease-in-out infinite;
}
@keyframes pulse-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.topbar-search-empty { padding: 1rem; color: var(--text-muted); font-size: 0.85rem; text-align: center; }
.topbar-search-history-header {
    padding: 0.5rem 0.75rem 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    opacity: 0.7;
}
.topbar-search-history-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s var(--ease);
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.topbar-search-history-item:hover {
    background: var(--bg-surface-hover-strong);
    color: var(--text-primary);
}
.topbar-search-history-item + .topbar-search-history-item { margin-top: 1px; }
.topbar-search-history-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.45;
    stroke-width: 2;
}
.topbar-search-history-item:hover .topbar-search-history-icon { opacity: 0.7; }
.topbar-search-history-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* App layout */
.app-layout { min-height: 100vh; }
.app-layout .main-content:not(.standalone) {
    margin-left: var(--sidebar-w);
    margin-top: var(--topbar-h);
    min-height: calc(100vh - var(--topbar-h));
    padding: 1.5rem;
}

/* Sidebar */
.sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    padding: 0;
    display: flex;
    flex-direction: column;
    z-index: 850;
}
.sidebar-overlay { display: none; }
.sidebar-header { padding: 0 0.75rem 0.75rem; border-bottom: 1px solid var(--border-color); }
.sidebar-brand { font-size: 1.2rem; font-weight: 700; color: var(--primary); text-decoration: none; }
.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
    scrollbar-width: thin;
    scrollbar-color: #3a3f4b transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
    background: #3a3f4b;
    border-radius: 3px;
    transition: background 0.2s;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: #4f5668; }

/* Nav links (primary) */
.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.7rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 8px;
    transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.nav-link:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.nav-link .nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.85;
    transition: opacity 0.18s var(--ease), color 0.18s var(--ease);
}
.nav-link:hover .nav-icon { opacity: 1; }
.nav-link.active {
    background: var(--primary-soft);
    color: var(--primary);
}
.nav-link.active .nav-icon { opacity: 1; color: var(--primary); }
.nav-link.active::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    background: var(--primary);
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 8px var(--primary-glow);
}
.nav-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Nav section (collapsible) */
.nav-section { margin-top: 0.25rem; }
.nav-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.5rem 0.7rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.18s var(--ease), background 0.18s var(--ease);
    user-select: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    border-radius: 8px;
}
.nav-section-toggle:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.nav-section-toggle .nav-section-label {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    flex: 1;
}
.nav-section-toggle .nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.85;
}
.nav-section-toggle .nav-section-arrow {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--text-muted);
    opacity: 0.7;
    transition: transform 0.22s var(--ease), opacity 0.18s var(--ease), color 0.18s var(--ease);
}
.nav-section-toggle:hover .nav-section-arrow { opacity: 1; color: var(--text-secondary); }
.nav-section.expanded .nav-section-arrow { transform: rotate(90deg); }
.nav-section.has-active .nav-section-toggle { color: var(--text-primary); }
.nav-section.has-active .nav-section-toggle .nav-icon { color: var(--primary); opacity: 1; }

.nav-section-sub {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.28s var(--ease), opacity 0.22s var(--ease), margin 0.22s var(--ease);
    position: relative;
    margin: 0;
    padding-left: 1.35rem;
}
.nav-section-sub::before {
    content: '';
    position: absolute;
    left: 1.05rem;
    top: 0.2rem;
    bottom: 0.2rem;
    width: 1px;
    background: var(--border-color-strong);
}
.nav-section.expanded .nav-section-sub {
    max-height: 600px;
    opacity: 1;
    margin-top: 0.2rem;
    margin-bottom: 0.25rem;
}
.nav-sublink {
    position: relative;
    display: block;
    padding: 0.4rem 0.65rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 6px;
    transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.nav-sublink + .nav-sublink { margin-top: 1px; }
.nav-sublink:hover { color: var(--text-primary); background: var(--bg-surface-hover); }
.nav-sublink.active {
    color: var(--primary);
    background: var(--primary-soft);
    font-weight: 600;
}
.nav-sublink.active::before {
    content: '';
    position: absolute;
    left: calc(-0.3rem - 1px);
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 14px;
    background: var(--primary);
    border-radius: 2px;
}

/* Nav group (always-open grouper, no toggle) */
.nav-group { margin-top: 0.9rem; }
.nav-group-label {
    display: block;
    padding: 0 0.7rem 0.3rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    opacity: 0.75;
    user-select: none;
}
.nav-group-items {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Grupo Administración — colapsable, solo admins */
.nav-group--admin {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(252,32,68,0.12);
}
.nav-admin-toggle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    background: rgba(252,32,68,0.07);
    border: 1px solid rgba(252,32,68,0.16);
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    color: rgba(252,32,68,0.85);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: default;
    text-align: left;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}
.nav-admin-toggle:hover {
    background: rgba(252,32,68,0.07);
    color: rgba(252,32,68,0.85);
}
.nav-admin-toggle .nav-icon {
    width: 16px; height: 16px;
    opacity: 1;
    color: rgba(252,32,68,0.7);
    flex-shrink: 0;
}
.nav-admin-toggle:hover .nav-icon { color: #fc2044; }
.nav-admin-arrow {
    width: 13px; height: 13px;
    margin-left: auto;
    opacity: 0.85;
    flex-shrink: 0;
    transform: rotate(90deg);
}
.nav-group--admin.open .nav-admin-arrow {
    transform: rotate(90deg);
    opacity: 0.85;
}
.nav-admin-items {
    overflow: hidden;
    max-height: 900px;
    opacity: 1;
    margin-top: 3px;
}
.nav-group--admin.open .nav-admin-items {
    max-height: 900px;
    opacity: 1;
}

/* Mobile mas-panel: admin group */
.mas-admin-group {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(252,32,68,0.12);
}
.mas-admin-toggle {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    background: rgba(252,32,68,0.07);
    border: 1px solid rgba(252,32,68,0.16);
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    color: rgba(252,32,68,0.85);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: default;
    text-align: left;
    transition: background 0.15s;
    font-family: inherit;
    margin-bottom: 2px;
}
.mas-admin-toggle:hover { background: rgba(252,32,68,0.07); }
.mas-admin-toggle .mas-item-icon {
    color: rgba(252,32,68,0.75);
    flex-shrink: 0;
}
.mas-admin-arrow {
    width: 14px; height: 14px;
    margin-left: auto;
    opacity: 0.85;
    flex-shrink: 0;
    transform: rotate(90deg);
}
.mas-admin-group.open .mas-admin-arrow {
    transform: rotate(90deg);
    opacity: 0.85;
}
.mas-admin-items {
    overflow: hidden;
    max-height: 1200px;
    opacity: 1;
}
.mas-admin-group.open .mas-admin-items {
    max-height: 1200px;
    opacity: 1;
}

/* Pending/coming-soon items (no destination yet) */
.nav-link--pending,
.nav-sublink--pending {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* Sidebar footer */
.sidebar-footer {
    padding: 0.6rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-footer-user {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.45rem 0.55rem;
    border-radius: 9px;
    text-decoration: none;
    color: inherit;
    transition: background 0.18s var(--ease);
}
.sidebar-footer-user:hover { background: var(--bg-surface-hover); }
.sidebar-footer-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-color);
}
.sidebar-footer-user-info {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}
.sidebar-footer-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-footer-plan { font-size: 0.7rem; color: var(--text-muted); }
.sidebar-footer-logout {
    padding: 0.45rem 0.55rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    border-radius: 8px;
}
.sidebar-footer-logout:hover { color: var(--primary); background: var(--primary-soft); }

/* ---- Topbar user menu ---- */
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-right: 0.25rem;
}
.user-menu { position: relative; }
.user-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.55rem 0.3rem 0.3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.user-menu-trigger:hover { background: rgba(255, 255, 255, 0.07); }
.user-menu.open .user-menu-trigger {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--border-color-strong);
}
.user-menu-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}
.user-menu-name {
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-menu-chevron {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    transition: transform 0.22s var(--ease);
    flex-shrink: 0;
}
.user-menu.open .user-menu-chevron { transform: rotate(180deg); color: var(--text-secondary); }

.user-menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 260px;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 0.45rem;
    z-index: 950;
}
.user-menu.open .user-menu-dropdown {
    display: block;
    animation: dropdown-in 0.18s var(--ease);
}
.user-menu-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem;
}
.user-menu-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}
.user-menu-header-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.user-menu-header-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-menu-header-email {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-menu-header-plan {
    margin-top: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-soft);
    padding: 2px 8px;
    border-radius: 999px;
    align-self: flex-start;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.user-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.35rem 0.1rem;
}
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.user-menu-item:hover { background: var(--bg-surface-hover-strong); color: var(--text-primary); }
.user-menu-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; }
.user-menu-item--danger { color: #fca5a5; }
.user-menu-item--danger:hover { background: rgba(252, 32, 68, 0.1); color: #fc8181; }

@media (max-width: 767px) {
    .user-menu-name { display: none; }
    .user-menu-trigger { padding: 0.25rem; }
    .user-menu-chevron { display: none; }
    .user-menu-dropdown { min-width: 240px; right: 0.25rem; }
}

.main-content.standalone { max-width: 480px; margin: 0 auto; padding: 3rem 1.5rem; }
.main-content.standalone.auth-layout {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ── Auth (login / register) ─────────────────────────────────────────── */
.auth-page {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    overflow: hidden;
}
.auth-page-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 70% at 15% 10%, rgba(252, 32, 68, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 70% 55% at 85% 85%, rgba(99, 102, 241, 0.14) 0%, transparent 50%),
        linear-gradient(155deg, #080a0f 0%, #12151d 38%, #18121c 72%, #0a0c12 100%);
}
.auth-grid {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
}
.auth-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    animation: auth-orb-float 14s ease-in-out infinite;
}
.auth-orb--1 {
    width: min(420px, 55vw);
    height: min(420px, 55vw);
    top: -8%;
    left: -6%;
    background: rgba(252, 32, 68, 0.35);
}
.auth-orb--2 {
    width: min(360px, 48vw);
    height: min(360px, 48vw);
    bottom: -10%;
    right: -4%;
    background: rgba(129, 140, 248, 0.28);
    animation-delay: -4s;
}
.auth-orb--3 {
    width: min(220px, 32vw);
    height: min(220px, 32vw);
    top: 42%;
    left: 58%;
    background: rgba(246, 195, 67, 0.12);
    animation-delay: -8s;
}
@keyframes auth-orb-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(12px, -18px) scale(1.04); }
    66% { transform: translate(-10px, 10px) scale(0.96); }
}

.auth-card {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border-radius: 20px;
    background: rgba(22, 26, 34, 0.55);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
    animation: auth-card-enter 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes auth-card-enter {
    from {
        opacity: 0;
        transform: translateY(-22px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.auth-card__header {
    text-align: center;
    margin-bottom: 1.35rem;
}
.auth-card__logo {
    display: block;
    height: auto;
    max-width: 132px;
    margin: 0 auto 1.1rem;
    opacity: 0.95;
}
.auth-card__title {
    margin: 0;
    font-size: clamp(1.35rem, 3vw, 1.65rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #f4f6fb;
    line-height: 1.2;
}
.auth-card__subtitle {
    margin: 0.45rem 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: rgba(203, 213, 225, 0.72);
    font-weight: 400;
}
.auth-card__alert {
    margin-bottom: 1rem;
    border-radius: 10px;
    font-size: 0.88rem;
}
.auth-card__body { min-width: 0; }

.auth-verify-copy {
    margin-bottom: 1.25rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.88);
}
.auth-verify-copy p { margin: 0 0 0.85rem; }
.auth-verify-copy p:last-child { margin-bottom: 0; }
.auth-verify-copy strong { color: #f8fafc; font-weight: 600; }
.auth-verify-copy__muted {
    font-size: 0.84rem;
    color: rgba(148, 163, 184, 0.82);
}
.auth-verify-hint {
    margin: 0.45rem 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgba(148, 163, 184, 0.78);
}
.auth-verify-other-device {
    margin: 0 0 1rem;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.82rem;
    line-height: 1.45;
    text-align: center;
    color: rgba(203, 213, 225, 0.9);
}
.auth-verify-other-device a {
    color: var(--primary, #fc2044);
    font-weight: 600;
    text-decoration: none;
}
.auth-verify-other-device a:hover {
    color: #fff;
    text-decoration: underline;
}
.auth-verify-copy--success {
    margin-bottom: 1.15rem;
    color: rgba(167, 243, 208, 0.95);
}
.auth-verify-welcome {
    text-align: center;
}
.auth-verify-welcome__hi {
    margin: 0 0 0.65rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #f8fafc;
}
.auth-verify-welcome__lead {
    margin: 0 0 0.85rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.9);
}
.auth-verify-welcome__lead strong {
    color: #fff;
    font-weight: 700;
}
.auth-verify-welcome__highlight {
    margin: 0 0 1.15rem;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    border: 1px solid rgba(252, 32, 68, 0.35);
    background: rgba(252, 32, 68, 0.1);
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(252, 210, 218, 0.95);
}
.auth-verify-welcome__highlight strong {
    color: #fff;
    font-weight: 700;
}
.auth-verify-welcome__highlight--soft {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(203, 213, 225, 0.92);
}
.auth-verify-welcome__cta {
    width: 100%;
    margin-top: 0.15rem;
}
.auth-verify-countdown {
    text-align: center;
}
.auth-verify-countdown__num {
    color: #6ee7b7;
    font-weight: 700;
}
.auth-verify-countdown .auth-form__submit {
    margin-top: 0.35rem;
}

.auth-form .form-group { margin-bottom: 0.95rem; }
.auth-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
@media (max-width: 480px) {
    .auth-form__row { grid-template-columns: 1fr; gap: 0; }
}
.auth-form label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(203, 213, 225, 0.65);
}
.auth-form input {
    width: 100%;
    padding: 0.72rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    background: rgba(10, 12, 18, 0.55);
    color: #f1f5f9;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.auth-form input::placeholder { color: rgba(148, 163, 184, 0.45); }
.auth-form input:focus {
    outline: none;
    border-color: rgba(252, 32, 68, 0.55);
    box-shadow: 0 0 0 3px rgba(252, 32, 68, 0.12);
    background: rgba(10, 12, 18, 0.72);
}
.auth-form input[readonly] {
    opacity: 0.75;
    cursor: not-allowed;
}
.auth-form__submit {
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.78rem 1rem;
    border-radius: 11px;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 24px rgba(252, 32, 68, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.auth-form__submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(252, 32, 68, 0.34);
}
.auth-recaptcha {
    display: flex;
    justify-content: center;
    margin: 0.25rem 0 0.85rem;
    transform: scale(0.94);
    transform-origin: center top;
}
.auth-links {
    margin: 1.15rem 0 0;
    font-size: 0.86rem;
    text-align: center;
    color: rgba(148, 163, 184, 0.85);
    line-height: 1.6;
}
.auth-links--center { margin-top: 0; }
.auth-links a {
    color: rgba(252, 129, 157, 0.95);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}
.auth-links a:hover { color: #fff; }
.auth-links-sep {
    margin: 0 0.35rem;
    opacity: 0.45;
}

.auth-box {
    background: #252830; padding: 2rem; border-radius: 8px; border: 1px solid #3a3f4b;
}
.auth-box h1 { margin-top: 0; color: var(--primary); }
.auth-form .btn-retry { font-weight: 600; animation: pulse-subtle 2s ease-in-out infinite; }
@keyframes pulse-subtle { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } }
.auth-intro { margin: 0 0 1rem; color: #8b95a5; font-size: 0.92rem; line-height: 1.5; }

.btn { display: inline-block; padding: 0.5rem 1rem; border-radius: 4px; border: none; cursor: pointer; font-size: 1rem; text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.alert { padding: 0.75rem; border-radius: 4px; margin-bottom: 1rem; }
.alert-error { background: #742a2a; color: #feb2b2; }
.session-limit-alert { padding: 1rem 1.25rem; border-left: 4px solid var(--primary); }
.alert-success { background: #22543d; color: #9ae6b4; }
.alert-warning { background: #744210; color: #fbd38d; }
.trial-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: rgba(246, 195, 67, 0.12);
    border: 1px solid rgba(246, 195, 67, 0.28);
    color: #f6e05e;
    font-size: 0.92rem;
    line-height: 1.45;
}
.trial-banner-link {
    color: #faf089;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.trial-banner-link:hover { color: #fff; }
.standalone-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }
.text-success { color: #9ae6b4; }
.text-error { color: #feb2b2; }
.welcome-card, .page-home, .page-perfil, .page-admin {
    padding: 1.5rem;
}
.welcome-card h2, .page-home h2, .page-perfil h2, .page-admin h2 { margin-top: 0; color: var(--primary); }

/* Admin: tablas, formularios, modales */
.page-header { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.filter-tabs { display: flex; gap: 0.25rem; margin-bottom: 1rem; }
.filter-tab { padding: 0.4rem 0.8rem; border-radius: 4px; color: #a0aec0; text-decoration: none; font-size: 0.9rem; }
.filter-tab:hover { background: #2d323e; color: #e4e6eb; }
.filter-tab.active { background: rgba(252, 32, 68, 0.15); color: var(--primary); }

.report-filters { margin-bottom: 1.5rem; }
.report-filters .filter-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.report-filters label { color: #a0aec0; font-size: 0.9rem; }
.report-filters .filter-group .custom-select { min-width: 140px; }
@media (max-width: 480px) {
    .report-filters .filter-group .custom-select { width: 100%; min-width: 0; }
}
.report-filters select {
    padding: 0.4rem 0.6rem; border: 1px solid #3a3f4b; border-radius: 4px;
    background: #1a1d23; color: #e4e6eb; font-size: 0.9rem;
}
@media (max-width: 480px) {
    .report-filters .filter-row { flex-direction: column; align-items: stretch; gap: 1rem; }
    .report-filters .filter-group { display: flex; flex-direction: column; min-width: 0; }
    .report-filters .filter-group label { margin-bottom: 0.25rem; }
    .report-filters .filter-group select { width: 100%; max-width: none; box-sizing: border-box; }
    .report-variacion-info { display: none; }
}
.report-variacion { font-weight: 600; }
.report-variacion.report-variacion-cell { display: inline-block; padding: 0.2rem 0.15rem 0.2rem 0; }
.report-variacion-up { color: #9ae6b4; }
.report-variacion-down { color: #feb2b2; }
.report-variacion-na { color: #718096; }
.report-tooltip-trigger { cursor: help; }
#report-custom-tooltip.report-custom-tooltip {
    position: fixed;
    padding: 0.6rem 0.9rem;
    background: #1a1d23;
    border: 1px solid #3a3f4b;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    font-size: 0.875rem;
    color: #e4e6eb;
    pointer-events: none;
}
#report-custom-tooltip.report-custom-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: #3a3f4b;
}
#report-custom-tooltip.report-custom-tooltip.visible {
    opacity: 1;
    visibility: visible;
}
#report-custom-tooltip.report-custom-tooltip-wide {
    white-space: normal;
    max-width: 280px;
    text-align: center;
}
.report-variacion-info {
    margin-left: 0.35rem; cursor: help; opacity: 0.8; font-size: 0.9em;
}
.report-variacion-info:hover { opacity: 1; }
.report-row-favorito { background: rgba(252, 32, 68, 0.06); }
.report-row-favorito:hover { background: rgba(252, 32, 68, 0.1); }
.report-favorito-star { color: #fc2044; font-size: 0.95em; margin-left: 0.4rem; }
.report-rank { width: 2rem; min-width: 2rem; text-align: center; color: #718096; font-weight: 600; padding-right: 0.35rem; }
.report-canal-cell { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.report-canal-line1 { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex-wrap: nowrap; }
.report-canal-meta-group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
    min-width: 0;
}
.report-canal-logo { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.report-canal-nombre {
    font-weight: 600; color: #e4e6eb;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.report-canal-link {
    text-decoration: none; color: inherit;
}
.report-canal-link:hover { color: var(--primary); }
@media (min-width: 768px) {
    .report-canal-nombre { min-width: 0; }
}
.report-total-cell { white-space: nowrap; min-width: 4.5rem; }
.report-th-sortable .report-th-sort {
    color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem;
    cursor: pointer; padding: 0.2rem 0; border-radius: 4px;
    white-space: nowrap;
}
.report-th-sort:hover { color: var(--primary); }
.report-th-sort-active { color: var(--primary); font-weight: 700; }
.table-container .data-table.report-table { table-layout: fixed; }
.table-container .data-table.report-table th:nth-child(1),
.table-container .data-table.report-table .report-rank { width: 2.5rem; }
.table-container .data-table.report-table th:nth-child(2),
.table-container .data-table.report-table .report-canal-td { width: auto; min-width: 14rem; max-width: 28rem; overflow: hidden; }
.table-container .data-table.report-table th:nth-child(3),
.table-container .data-table.report-table .report-total-cell { width: 6rem; }
.table-container .data-table.report-table th:nth-child(4) { width: 6rem; }
.report-canal-line2 { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.report-canal-meta { font-size: 0.8rem; color: #718096; display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.report-flag { width: 18px; height: 14px; object-fit: contain; vertical-align: middle; }
.report-canal-meta-sep { color: #4a5568; font-size: 0.75rem; }

/* ========== Podios globales v2 — scroll por pantalla + índice ========== */

@keyframes podioHeroGlow {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.06); }
}
@keyframes podioHeroTrophyFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-6px) rotate(2deg); }
}
@keyframes podioSlideIn {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

.podios-page--v2 {
    max-width: none;
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-layout .main-content:not(.standalone):has(.podios-page--v2) {
    padding: 0;
    overflow: hidden;
    height: calc(100dvh - var(--topbar-h, 56px));
    min-height: 0;
}
#app-content:has(.podios-page--v2) {
    height: 100%;
    min-height: 0;
}

.podios-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 800;
    color: #f0f2f5;
    letter-spacing: -0.02em;
}
.podios-title-icon {
    width: 32px;
    height: 32px;
    color: #f6c343;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(246, 195, 67, 0.4));
}
.podios-intro {
    color: #8b95a5;
    line-height: 1.5;
}

.podios-v2-head {
    flex-shrink: 0;
    padding: 1.25rem 1.5rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.podios-page--v2 .podios-title {
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    margin: 0;
}
.podios-page--v2 .podios-intro {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    max-width: 40rem;
}

.podios-v2-shell {
    flex: 1;
    min-height: 0;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 0;
    box-sizing: border-box;
}

.podios-v2-scroll {
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
    padding: 0 1rem 2rem 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: #3a3f4b transparent;
}
.podios-v2-scroll::-webkit-scrollbar { width: 4px; }
.podios-v2-scroll::-webkit-scrollbar-track { background: transparent; }
.podios-v2-scroll::-webkit-scrollbar-thumb { background: #3a3f4b; border-radius: 3px; }
.podios-v2-scroll::-webkit-scrollbar-thumb:hover { background: #4f5668; }

.podios-v2-slide {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: 100%;
    display: flex;
    align-items: center;
    padding: 2rem 0;
    box-sizing: border-box;
    opacity: 0.35;
    transition: opacity 0.45s ease;
}
.podios-v2-slide.is-visible {
    opacity: 1;
}
.podios-v2-slide-inner {
    width: 100%;
    max-width: none;
    min-width: 0;
    animation: podioSlideIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.podios-v2-slide.is-visible .podios-v2-slide-inner {
    animation: podioSlideIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.podios-v2-slide-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: clamp(0.85rem, 2.5vh, 1.75rem);
}
.podios-v2-slide-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: #8b95a5;
}
.podios-v2-slide-icon .podio-cat-icon {
    width: 22px;
    height: 22px;
}
.podios-v2-slide-title {
    margin: 0;
    font-size: clamp(1.45rem, 2.8vw, 2.15rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #f4f6fb;
}

.podios-v2-slide--growth .podios-v2-slide-icon {
    color: #68d391;
    background: rgba(72, 187, 120, 0.12);
}
.podios-v2-slide--growth .podios-v2-slide-title {
    color: #d4f5e2;
}

.podios-v2-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(0.85rem, 2vw, 1.75rem);
    align-items: start;
    min-width: 0;
}

/* --- Hero #1 --- */
.podios-v2-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: clamp(0.85rem, 2vh, 1.35rem) clamp(0.85rem, 2vw, 1.25rem) clamp(1rem, 2.5vh, 1.5rem);
    border-radius: 16px;
    border: 1px solid rgba(246, 195, 67, 0.22);
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(246, 195, 67, 0.14) 0%, transparent 70%),
        linear-gradient(165deg, #252018 0%, #1a1d23 55%, #14171d 100%);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    min-height: 0;
    min-width: 0;
}
.podios-v2-hero-glow {
    position: absolute;
    inset: 8% 15% auto;
    height: 40%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(246, 195, 67, 0.28) 0%, transparent 70%);
    animation: podioHeroGlow 3.5s ease-in-out infinite;
    pointer-events: none;
}
.podios-v2-hero-trophy-wrap {
    position: relative;
    z-index: 1;
    margin-bottom: 0.25rem;
    animation: podioHeroTrophyFloat 4s ease-in-out infinite;
}
.podio-hero-trophy {
    width: clamp(36px, 5vh, 52px);
    height: clamp(36px, 5vh, 52px);
    color: #f6c343;
    filter: drop-shadow(0 0 14px rgba(246, 195, 67, 0.55));
}
.podios-v2-hero-canal {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.4rem, 1vh, 0.65rem);
    text-decoration: none;
    color: inherit;
    max-width: 100%;
    min-width: 0;
}
.podios-v2-hero-avatar {
    width: clamp(64px, 10vh, 96px);
    height: clamp(64px, 10vh, 96px);
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(246, 195, 67, 0.5);
    box-shadow: 0 0 0 4px rgba(246, 195, 67, 0.1), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.podios-v2-hero-avatar--ph {
    display: block;
    background: linear-gradient(135deg, #3a3f4b 0%, #2d3139 100%);
}
.podios-v2-hero-name {
    font-size: clamp(1rem, 1.8vh, 1.35rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.podios-v2-hero-canal:hover .podios-v2-hero-name {
    color: var(--primary, #fc2044);
}
.podios-v2-hero-metrics {
    position: relative;
    z-index: 1;
    margin-top: clamp(0.35rem, 1vh, 0.75rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}
.podio-hero-value {
    font-size: clamp(1.35rem, 3vh, 2.1rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #f6c343;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    text-shadow: 0 0 20px rgba(246, 195, 67, 0.3);
    text-align: center;
    max-width: 100%;
    word-break: break-word;
}
.podios-v2-slide--growth .podio-hero-value {
    color: #68d391;
    text-shadow: 0 0 24px rgba(72, 187, 120, 0.35);
}

/* --- Runners 2–5 --- */
.podios-v2-runners {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    justify-content: center;
    min-width: 0;
}
.podios-v2-runner {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    grid-template-areas:
        "rank main"
        "metrics metrics";
    gap: 0.4rem 0.65rem;
    align-items: start;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-width: 0;
    overflow: hidden;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.podios-v2-runner:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}
.podios-v2-runner-rank {
    grid-area: rank;
    font-size: 0.95rem;
    font-weight: 800;
    color: #9ca3af;
    text-align: center;
    line-height: 1;
    padding-top: 0.15rem;
}
.podios-v2-runner-main {
    grid-area: main;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.podios-v2-runner-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #1a1d23;
    border: 2px solid rgba(255, 255, 255, 0.08);
}
.podios-v2-runner-avatar--ph {
    display: block;
    background: linear-gradient(135deg, #2d3139, #3a3f4b);
}
.podios-v2-runner-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.podios-v2-runner-name {
    font-size: clamp(0.9rem, 1.4vw, 1.05rem);
    font-weight: 700;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.podios-v2-runner-main:hover .podios-v2-runner-name {
    color: var(--primary, #fc2044);
}
.podios-v2-runner-metrics {
    grid-area: metrics;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem 0.5rem;
    min-width: 0;
    width: 100%;
    padding-left: 2.65rem;
    box-sizing: border-box;
}
.podio-runner-value {
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    font-weight: 800;
    color: #9ae6b4;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    text-align: right;
    max-width: 100%;
    word-break: break-word;
}

/* media (vivo / short) */
.podio-media {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    color: #8b95a5;
    max-width: 100%;
}
.podio-media--hero {
    flex-direction: column;
    margin-top: clamp(0.35rem, 1vh, 0.6rem);
    max-width: 100%;
}
.podio-hero-live-thumb {
    width: min(100%, clamp(120px, 18vh, 180px));
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    object-fit: cover;
    background: #1a1d23;
}
.podio-runner-live-thumb {
    width: 48px;
    height: 28px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    background: #1a1d23;
}
.podio-runner-live-thumb--short {
    width: 28px;
    height: 40px;
}
.podio-media-ph {
    display: inline-block;
    background: linear-gradient(135deg, #2d3139, #3a3f4b);
}
.podio-media-title {
    font-size: 0.75rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.podio-media--hero .podio-media-title {
    font-size: 0.78rem;
    max-width: min(100%, 220px);
}

.podio-empty {
    margin: 0;
    color: #5a6270;
    font-size: 1rem;
    font-style: italic;
}

.podio-pct {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.12rem 0.45rem;
    border-radius: 20px;
    white-space: nowrap;
}
.podio-pct--up {
    color: #68d391;
    background: rgba(72, 187, 120, 0.12);
}
.podio-pct--down {
    color: #fc8181;
    background: rgba(252, 129, 129, 0.12);
}
.podio-prev {
    font-size: 0.68rem;
    color: #5a6270;
    white-space: nowrap;
}

/* --- Índice sticky (izquierda) --- */
.podios-v2-index {
    position: sticky;
    top: 0;
    align-self: start;
    height: calc(100dvh - var(--topbar-h, 56px));
    overflow-y: auto;
    padding: 1rem 0.5rem 1.5rem 0.85rem;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(270deg, transparent 0%, rgba(20, 23, 29, 0.92) 12%);
    scrollbar-width: thin;
    scrollbar-color: #3a3f4b transparent;
}
.podios-v2-index::-webkit-scrollbar { width: 4px; }
.podios-v2-index::-webkit-scrollbar-track { background: transparent; }
.podios-v2-index::-webkit-scrollbar-thumb { background: #3a3f4b; border-radius: 3px; }
.podios-v2-index::-webkit-scrollbar-thumb:hover { background: #4f5668; }
.podios-v2-index-label {
    margin: 0 0 0.75rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
}
.podios-v2-index-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.podios-v2-index-link {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.45rem 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    color: #8b95a5;
    font-size: 0.72rem;
    line-height: 1.35;
    border-left: 2px solid transparent;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.podios-v2-index-link:hover {
    color: #e4e6eb;
    background: rgba(255, 255, 255, 0.04);
}
.podios-v2-index-link.is-active {
    color: #f6c343;
    background: rgba(246, 195, 67, 0.08);
    border-left-color: #f6c343;
}
.podios-v2-index-thumb {
    flex-shrink: 0;
}
.podios-v2-index-avatar {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: #1a1d23;
}
.podios-v2-index-link.is-active .podios-v2-index-avatar {
    border-color: rgba(246, 195, 67, 0.55);
    box-shadow: 0 0 0 2px rgba(246, 195, 67, 0.15);
}
.podios-v2-index-avatar--ph {
    background: linear-gradient(135deg, #2d3139, #3a3f4b);
}
.podios-v2-index-text {
    min-width: 0;
}

@media (max-height: 780px) {
    .podios-v2-slide {
        padding: 0.75rem 0;
        align-items: flex-start;
    }
    .podios-v2-slide-title {
        font-size: clamp(1.2rem, 2.5vh, 1.65rem);
    }
    .podios-v2-hero-trophy-wrap {
        margin-bottom: 0;
    }
    .podio-media--hero .podio-media-title {
        -webkit-line-clamp: 1;
    }
}

@media (max-width: 960px) {
    .podios-v2-shell {
        grid-template-columns: 56px minmax(0, 1fr);
    }
    .podios-v2-index {
        position: sticky;
        top: 0;
        z-index: 2;
        height: 100%;
        max-height: none;
        border-right: 1px solid rgba(255, 255, 255, 0.06);
        border-left: 0;
        background: rgba(20, 23, 29, 0.96);
        padding: 0.5rem 0.25rem 0.75rem;
    }
    .podios-v2-index-label { display: none; }
    .podios-v2-index-list {
        flex-direction: column;
        flex-wrap: nowrap;
        overflow-x: hidden;
        overflow-y: auto;
        gap: 0.15rem;
        padding-bottom: 0;
        max-height: 100%;
    }
    .podios-v2-index-link {
        flex: 0 0 auto;
        max-width: none;
        justify-content: center;
        padding: 0.35rem 0.2rem;
        border-left: 2px solid transparent;
        border-bottom: 0;
    }
    .podios-v2-index-link.is-active {
        border-left-color: #f6c343;
        border-bottom-color: transparent;
    }
    .podios-v2-index-avatar {
        width: 24px;
        height: 24px;
    }
    .podios-v2-index-text { display: none; }
    .podios-v2-scroll { padding: 0 0.75rem 1.5rem 1rem; }
    .podios-v2-stage {
        grid-template-columns: 1fr;
    }
    .podios-v2-slide {
        padding: 1.25rem 0;
    }
}

@media (max-width: 767px) {
    .app-layout .main-content:not(.standalone):has(.podios-page--v2) {
        height: calc(100dvh - var(--topbar-h, 56px) - var(--bottom-bar-total-h, 60px));
        margin-bottom: 0;
        padding-bottom: 0;
    }
}

@media (max-width: 520px) {
    .podios-v2-head { padding: 1rem 1rem 0.65rem; }
    .podios-v2-runner {
        padding: 0.7rem 0.75rem;
    }
    .podios-v2-runner-metrics {
        padding-left: 2.15rem;
    }
}

.admin-toolbar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.search-form { display: flex; gap: 0.5rem; align-items: center; }
.search-input {
    padding: 0.5rem 0.75rem; border: 1px solid #3a3f4b; border-radius: 4px;
    background: #1a1d23; color: #e4e6eb; font-size: 1rem; min-width: 200px;
}
.search-input:focus { outline: none; border-color: var(--primary); }
.search-input::placeholder { color: #718096; }
.total-count { color: #718096; font-size: 0.9rem; }

.pagination { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #3a3f4b; }
.pagination-prev, .pagination-next { color: var(--primary); text-decoration: none; font-size: 0.9rem; }
.pagination-prev:hover, .pagination-next:hover { text-decoration: underline; }
.pagination-info { color: #718096; font-size: 0.9rem; }

.page-desc { color: #718096; font-size: 0.9rem; margin: 0; }
.table-container { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 0.6rem 0.8rem; text-align: left; border-bottom: 1px solid #3a3f4b; }
.data-table th { color: #718096; font-weight: 600; font-size: 0.85rem; }
.data-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.data-table .actions { white-space: nowrap; }
.data-table .actions .btn { margin-right: 0.3rem; }
.data-table code { background: #1a1d23; padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.9rem; }

.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.85rem; }
.btn-ghost { background: transparent; color: #a0aec0; border: 1px solid #3a3f4b; }
.btn-ghost:hover { background: #2d323e; color: #e4e6eb; }
.btn-danger { background: #742a2a; color: #feb2b2; }
.btn-danger:hover:not(:disabled) { background: #8b3333; }
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

.admin-form .form-group, .modal-body .form-group { margin-bottom: 1rem; }
.admin-form label, .modal-body label { display: block; margin-bottom: 0.3rem; color: #a0aec0; }
.admin-form input[type="text"], .admin-form input[type="email"], .admin-form input[type="password"],
.admin-form select, .modal-body input[type="text"], .modal-body input[type="email"], .modal-body input[type="password"],
.modal-body select {
    width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #3a3f4b; border-radius: 4px;
    background: #1a1d23; color: #e4e6eb; font-size: 1rem;
}
.admin-form input:focus, .modal-body input:focus { outline: none; border-color: var(--primary); }
.admin-form textarea, .modal-body textarea {
    width: 100%; box-sizing: border-box;
    padding: 0.5rem 0.75rem; border: 1px solid #3a3f4b; border-radius: 4px;
    background: #1a1d23; color: #e4e6eb; font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    min-height: 5rem;
}
.admin-form textarea:focus, .modal-body textarea:focus { outline: none; border-color: var(--primary); }
.form-row { display: flex; gap: 1rem; }
.form-row .form-group { flex: 1; }
.form-actions { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.checkbox-group label { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.checkbox-columns { flex-direction: column; max-height: 200px; overflow-y: auto; }
.inline-form { display: inline; }
.inline-checkbox-wrap { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; user-select: none; }
.inline-checkbox-wrap input { cursor: pointer; margin: 0; }
.inline-checkbox-label { font-size: 0.85rem; color: #718096; }
.form-section { margin: 1.5rem 0; padding-top: 1rem; border-top: 1px solid #3a3f4b; }
.form-section h3 { margin: 0 0 0.5rem; color: #a0aec0; font-size: 1rem; }
.form-hint { color: #718096; font-size: 0.85rem; margin: 0 0 1rem; }
.horario-row { margin-bottom: 0.75rem; }
.horario-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.horario-fields input[type="time"] { padding: 0.35rem 0.5rem; width: auto; max-width: 120px; }
.horario-dias-label { margin-left: 0.5rem; color: #718096; font-size: 0.9rem; }
.horario-dia { display: inline-flex; align-items: center; gap: 0.2rem; margin-right: 0.5rem; font-size: 0.85rem; cursor: pointer; }
.horario-dia input { width: auto; }
#add-horario { margin-top: 0.5rem; }
.horario-resumen { font-size: 0.85rem; color: #718096; margin-top: 0.2rem; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal[hidden] { display: none !important; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.modal-content { position: relative; background: #252830; border: 1px solid #3a3f4b; border-radius: 8px; max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid #3a3f4b; }
.modal-header h3 { margin: 0; color: var(--primary); }
.modal-close { background: none; border: none; color: #a0aec0; font-size: 1.5rem; cursor: pointer; padding: 0 0.25rem; line-height: 1; }
.modal-close:hover { color: #e4e6eb; }
.modal-body { padding: 1.25rem; }
.modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.25rem; border-top: 1px solid #3a3f4b; }

/* Dashboard */
.dashboard { max-width: 1200px; }
.dashboard-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.dashboard-title { margin: 0; color: var(--primary); font-size: 1.5rem; }
.dashboard-pais-form { display: flex; align-items: center; gap: 0.5rem; }
.pais-label { color: #718096; font-size: 0.9rem; }
.pais-select {
    padding: 0.4rem 0.75rem; border: 1px solid #3a3f4b; border-radius: 4px;
    background: #1a1d23; color: #e4e6eb; font-size: 0.95rem; min-width: 180px;
}
.pais-select:focus { outline: none; border-color: var(--primary); }
.dashboard-kpis { display: flex; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.kpi-card {
    background: #252830; border: 1px solid #3a3f4b; border-radius: 8px;
    padding: 1.25rem 1.5rem; min-width: 160px;
}
.kpi-value { display: block; font-size: 1.75rem; font-weight: 700; color: #e4e6eb; }
.kpi-label { font-size: 0.9rem; color: #718096; }
.kpi-highlight .kpi-value { color: var(--primary); }
.kpi-pico-ref { cursor: help; font-weight: 500; }
.kpi-pico-up { color: #9ae6b4; }
.kpi-pico-down { color: #feb2b2; }
.dashboard-section { margin-bottom: 2rem; }
.dashboard-section h2 { margin: 0 0 1rem; font-size: 1.1rem; color: #a0aec0; font-weight: 600; }
.section-live { display: flex; align-items: center; gap: 0.5rem; }
.section-live em { font-style: normal; color: var(--primary); }
.live-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #fc2044;
    animation: live-pulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(252, 32, 68, 0.5); }
    50% { opacity: 0.9; transform: scale(1.1); box-shadow: 0 0 0 6px rgba(252, 32, 68, 0); }
}
.top-canales-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.canal-card {
    display: flex; align-items: center; gap: 0.75rem;
    background: #252830; border: 1px solid #3a3f4b; border-radius: 8px; padding: 0.75rem 1rem;
    text-decoration: none; color: inherit;
}
.canal-card:hover { border-color: var(--primary); }
.canal-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.canal-info { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.canal-nombre-wrap { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.canal-nombre { font-weight: 600; color: #e4e6eb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.canal-badge { flex-shrink: 0; display: inline-flex; line-height: 0; }
.canal-badge-svg { width: 16px; height: 16px; }
.canal-viewers { font-size: 0.85rem; color: var(--primary); }
.canal-viewers strong { font-weight: 700; }
.dashboard-charts { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (max-width: 900px) { .dashboard-charts { grid-template-columns: 1fr; } }
.dashboard-chart { background: #252830; border: 1px solid #3a3f4b; border-radius: 8px; padding: 1.25rem; }
.chart-container { position: relative; width: 100%; height: 200px; }
.chart-container-tall { height: 420px; }
.chart-pie .chart-container { height: 280px; min-height: 240px; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.media-shorts .media-card { max-width: 160px; }
.media-card {
    display: block; background: #252830; border: 1px solid #3a3f4b; border-radius: 8px;
    overflow: hidden; text-decoration: none; color: inherit; transition: border-color 0.2s;
}
.media-card:hover { border-color: var(--primary); }
.media-thumb-wrap {
    position: relative; overflow: hidden; background: #1a1d23;
    aspect-ratio: 16/9; width: 100%;
}
.media-short .media-thumb-wrap { aspect-ratio: 9/16; }
.media-thumb-placeholder {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: #718096;
}
.media-thumb {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
    max-width: 100%; max-height: 100%;
}
.media-preview {
    position: absolute; inset: 0; z-index: 2;
    overflow: hidden; background: #000;
    width: 100%; height: 100%; box-sizing: border-box;
}
.media-preview iframe {
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    width: 100%; height: 100%; max-width: 100%; max-height: 100%;
    border: none; pointer-events: none; box-sizing: border-box;
}
.media-preview-overlay {
    position: absolute; inset: 0; z-index: 3;
    pointer-events: auto; cursor: default;
}
.media-hover-progress {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    height: 3px; background: rgba(0,0,0,0.5); overflow: hidden;
}
.media-hover-progress-fill {
    display: block; height: 100%; background: var(--primary);
    animation: media-hover-progress 1.5s linear forwards;
}
@keyframes media-hover-progress {
    from { width: 0%; }
    to { width: 100%; }
}
.media-short .media-thumb-wrap { aspect-ratio: 9/16; }
.media-placeholder {
    display: none; width: 100%; aspect-ratio: 16/9; background: #1a1d23;
    align-items: center; justify-content: center; font-size: 2rem; color: #718096;
}
.media-short .media-placeholder { aspect-ratio: 9/16; }
.media-placeholder.show { display: flex; }
.media-info { padding: 0.6rem 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; }
.media-titulo { font-size: 0.9rem; font-weight: 600; color: #e4e6eb; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.media-canal { font-size: 0.8rem; color: #718096; }
.media-views { font-size: 0.85rem; color: var(--primary); }
.media-views-secondary { font-size: 0.78rem; color: #718096; display: block; margin-top: 0.15rem; }
.dashboard-empty { color: #718096; font-style: italic; }

/* Live Channels page */
.live-channels-page { padding: 0 0 2rem; }
.live-channels-header {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    margin-bottom: 1rem;
}
.live-channels-title {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--text-primary, #e4e6eb);
    letter-spacing: -0.02em;
}
.live-channels-header .live-channels-filters {
    flex: 1 1 auto;
    min-width: 0;
}
.live-channels-chart-controls {
    margin-bottom: 0;
}
.live-channels-chart-controls .chart-range-selector .custom-select {
    min-width: 10rem;
}
.chart-espectadores-block .chart-range-selector .custom-select {
    min-width: 8.5rem;
}
.chart-espectadores-block .channel-chart-controls .custom-select.open {
    z-index: 120;
}
.chart-espectadores-block .channel-chart-controls .custom-select-dropdown {
    z-index: 200;
}
.channel-v2-metric-panel .channel-section-topbar,
.channel-v2-metric-panel .channel-chart-controls {
    position: relative;
    z-index: 40;
}
.channel-v2-metric-panel .echarts-container {
    z-index: 1;
}
.live-channels-filters .filter-group {
    display: flex; align-items: center; gap: 0.5rem;
}
.live-channels-filters label { font-size: 0.9rem; color: #a0aec0; }
.live-channels-filters .filter-select {
    padding: 0.4rem 0.75rem; border-radius: 6px;
    background: #252830; border: 1px solid #3a3f4b; color: #e4e6eb;
    font-size: 0.9rem; min-width: 140px;
}

/* Pizarra en vivo */
.pizarra-fullscreen-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: #0f1115;
    overflow: hidden;
}
.pizarra-fs-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.pizarra-vivo-page--fullscreen {
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    padding: 0.35rem;
    box-sizing: border-box;
}
.pizarra-vivo-grid-wrap--fullscreen {
    flex: 1;
    min-height: 0;
}
.pizarra-vivo-toolbar-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}
.pizarra-vivo-page {
    display: flex; flex-direction: column;
    min-height: calc(100vh - 3.5rem);
    max-height: calc(100vh - 3.5rem);
    padding: 0 0 0.75rem;
    box-sizing: border-box;
}
.pizarra-vivo-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.75rem; margin-bottom: 0.75rem; flex-shrink: 0;
}
.pizarra-vivo-title { margin: 0; font-size: 1.2rem; font-weight: 600; color: #e4e6eb; }
.pizarra-vivo-grid-wrap {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.pizarra-vivo-grid {
    flex: 1; display: grid; gap: 0.45rem; min-height: 0; width: 100%;
    grid-auto-flow: row;
}
/* Formato: FILASxCOLUMNAS */
.pizarra-vivo-grid--1x2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; }
.pizarra-vivo-grid--2x2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.pizarra-vivo-grid--2x3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.pizarra-vivo-grid--3x3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.pizarra-slot {
    display: flex; flex-direction: column; min-height: 0;
    background: #1a1d23; border: 1px solid #3a3f4b; border-radius: 8px; overflow: hidden;
}
.pizarra-slot-head {
    display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.55rem; flex-shrink: 0; background: #252830; border-bottom: 1px solid #3a3f4b;
}
.pizarra-slot-name {
    font-weight: 600; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0; text-align: left;
}
.pizarra-slot-name--drag-handle {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 4px;
    padding: 0.1rem 0.2rem;
    margin: -0.1rem -0.2rem;
    transition: background 0.15s, color 0.15s;
}
.pizarra-slot-name--drag-handle:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--primary);
}
.pizarra-slot-name--drag-handle:active {
    cursor: grabbing;
}
/*
 * Importante: no usar transform, filter ni opacity en .pizarra-slot durante el drag.
 * En Chromium/WebKit eso recrea el contexto de composición y el <iframe> se recarga.
 */
.pizarra-slot--drag-source {
    outline: 2px dashed rgba(255, 255, 255, 0.45);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    z-index: 2;
}
.pizarra-slot--drop-target {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(252, 32, 68, 0.28), 0 12px 32px rgba(0, 0, 0, 0.45);
    z-index: 3;
}
/* Atenuar el resto solo con borde suave (sin filter/opacity en el slot del iframe) */
.pizarra-vivo-grid--drag-active .pizarra-slot:not(.pizarra-slot--drag-source):not(.pizarra-slot--drop-target) {
    outline: 1px solid rgba(255, 255, 255, 0.06);
    outline-offset: -1px;
}
/* Fantasma de arrastre (caja sintética; no clona el bloque con iframe) */
.pizarra-drag-ghost-head {
    padding: 0.4rem 0.55rem;
    flex-shrink: 0;
    background: #252830;
    border-bottom: 1px solid #3a3f4b;
    font-weight: 600;
    font-size: 0.8rem;
    color: #e4e6eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pizarra-drag-ghost-body {
    flex: 1;
    min-height: 48px;
    background: linear-gradient(145deg, #252830 0%, #12141a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4a5568;
    font-size: 1.5rem;
    font-weight: 800;
    opacity: 0.65;
}
.pizarra-drag-ghost-body::after {
    content: '▶';
}
.pizarra-slot-viewers {
    font-size: 0.78rem; font-weight: 700; color: #a0aec0; flex-shrink: 0;
}
.pizarra-slot-viewers--live { color: var(--primary); }
.pizarra-slot-body {
    flex: 1; min-height: 100px; position: relative; background: #000;
}
.pizarra-slot-iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.pizarra-slot-empty,
.pizarra-slot-offline {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    padding: 0.75rem; color: #718096; font-size: 0.85rem;
}
/* El atributo hidden debe ganar: sin esto, display:flex del autor anula el ocultamiento */
.pizarra-slot-empty[hidden],
.pizarra-slot-offline[hidden],
.pizarra-slot-iframe[hidden] {
    display: none !important;
}
.pizarra-offline-msg {
    margin: 0; max-width: 20rem; line-height: 1.4; font-weight: 600; font-size: 0.9rem; color: #a0aec0;
}
.pizarra-no-signal {
    font-size: 1rem; font-weight: 800; letter-spacing: 0.12em; color: #4a5568;
    margin-bottom: 0.35rem;
}
.pizarra-layout-select-wrap { min-width: 6rem; }
.pizarra-layout-select-wrap .custom-select-trigger {
    padding: 0.4rem 0.65rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}
/* Channel picker (inline dropdown in each slot head) */
.pizarra-slot-channel-picker { position: relative; flex: 1; min-width: 0; }
.pizarra-slot-picker-btn {
    display: flex; align-items: center; gap: 0.3rem; width: 100%;
    background: none; border: none; color: inherit; font: inherit; cursor: pointer;
    padding: 0.1rem 0.2rem; border-radius: 4px; transition: background 0.15s;
}
.pizarra-slot-picker-btn:hover { background: rgba(255,255,255,0.06); }
.pizarra-slot-picker-arrow { font-size: 0.55rem; color: #718096; flex-shrink: 0; }
.pizarra-slot-picker-dropdown {
    position: absolute; top: 100%; left: 0; z-index: 800;
    width: 280px; max-height: 320px; overflow: auto;
    background: #1e2128; border: 1px solid #3a3f4b; border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5); margin-top: 0.25rem;
}
.pizarra-slot-search-input {
    display: block; width: 100%; padding: 0.5rem 0.6rem;
    background: #252830; border: none; border-bottom: 1px solid #3a3f4b;
    color: #e4e6eb; font-size: 0.85rem; outline: none;
    box-sizing: border-box;
}
.pizarra-slot-search-input::placeholder { color: #718096; }
.pizarra-slot-search-results { max-height: 260px; overflow: auto; }
.pizarra-slot-search-hint { padding: 0.75rem; font-size: 0.8rem; color: #718096; text-align: center; }
.pizarra-slot-search-result {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    padding: 0.45rem 0.6rem; background: none; border: none; border-bottom: 1px solid #2d323e;
    color: #e4e6eb; font: inherit; cursor: pointer; text-align: left;
}
.pizarra-slot-search-result:last-child { border-bottom: none; }
.pizarra-slot-search-result:hover { background: #2d323e; }
.pizarra-search-avatar {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #2d323e;
}
.pizarra-search-avatar--empty { display: block; }
.pizarra-search-info { flex: 1; min-width: 0; }
.pizarra-search-name {
    display: block; font-weight: 600; font-size: 0.82rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pizarra-search-meta { display: block; font-size: 0.72rem; color: #718096; margin-top: 0.1rem; }
.pizarra-search-live {
    flex-shrink: 0; background: var(--primary); color: #fff; font-size: 0.65rem;
    font-weight: 700; padding: 0.15rem 0.35rem; border-radius: 4px; letter-spacing: 0.05em;
}
/* Live navigation arrows */
.pizarra-slot-live-nav {
    display: flex; align-items: center; gap: 0.2rem; flex-shrink: 0;
}
.pizarra-live-nav-btn {
    background: none; border: 1px solid #3a3f4b; color: #a0aec0; cursor: pointer;
    border-radius: 4px; font-size: 0.65rem; padding: 0.15rem 0.3rem; line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.pizarra-live-nav-btn:hover { background: rgba(255,255,255,0.08); color: #e4e6eb; }
.pizarra-live-indicator { font-size: 0.7rem; color: #718096; min-width: 1.8em; text-align: center; }

/* Custom Select - componente reutilizable */
.custom-select {
    position: relative;
    display: inline-block;
    min-width: 140px;
}
.custom-select.open {
    z-index: 1050;
}
.custom-select select {
    appearance: none;
    -webkit-appearance: none;
}
.custom-select-trigger {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    background: #252830;
    border: 1px solid #3a3f4b;
    color: #e4e6eb;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s;
}
.custom-select-trigger:hover { border-color: #4a4f5b; }
.custom-select:not(.open) .custom-select-trigger:hover:not(.locked) { border-color: #4a4f5b; }
.custom-select.open .custom-select-trigger { border-color: var(--primary); }
.custom-select-trigger.locked {
    cursor: not-allowed;
    opacity: 0.85;
}
.custom-select-value { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.4rem; }
.custom-select-value .custom-select-opt-flag-wrap { display: inline-flex; align-items: center; }
.custom-select-value .custom-select-opt-flag { width: 18px; height: 14px; object-fit: contain; }
.custom-select-arrow { 
    font-size: 1em;
    opacity: 0.8;
    transition: transform 0.2s;
    position: absolute;
    right: 7px;
 }
.custom-select.open .custom-select-arrow { transform: rotate(180deg); }
.custom-select-lock { font-size: 0.9em; opacity: 0.9; }
.custom-select-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: -40px;
    max-height: 240px;
    overflow-y: auto;
    background: #252830;
    border: 1px solid #3a3f4b;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 1050;
    scrollbar-width: thin;
    scrollbar-color: #3a3f4b #252830; 
}
.custom-select-dropdown::-webkit-scrollbar { width: 6px; }
.custom-select-dropdown::-webkit-scrollbar-track { background: #252830; }
.custom-select-dropdown::-webkit-scrollbar-thumb { background: #3a3f4b; border-radius: 3px; }
.custom-select.open .custom-select-dropdown { display: block; }
.custom-select-option {
    font-size:14px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid #2d323e;
}
.custom-select-option:last-child { border-bottom: none; }
.custom-select-option:hover:not(.disabled) { background: #2d323e; }
.custom-select-option.selected { background: rgba(252, 32, 68, 0.15); color: var(--primary); }
.custom-select-option.disabled { cursor: not-allowed; opacity: 0.6; }
.custom-select-opt-flag-wrap { display: flex; align-items: center; flex-shrink: 0; }
.custom-select-opt-flag { width: 18px; height: 14px; object-fit: contain; }
.custom-select-opt-globe { color: #94a3b8; }
.custom-select-opt-globe .custom-select-globe-icon { width: 18px; height: 18px; display: block; }
.custom-select-value .custom-select-opt-globe .custom-select-globe-icon { width: 18px; height: 18px; }
.custom-select-opt-text { flex: 1; min-width: 0; }

/* Tooltip para selector bloqueado */
#custom-select-locked-tooltip.custom-select-locked-tooltip {
    position: fixed;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #1a1d23;
    border: 1px solid #3a3f4b;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    max-width: 280px;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: auto;
    font-size: 0.875rem;
    color: #e4e6eb;
    line-height: 1.4;
}
#custom-select-locked-tooltip.custom-select-locked-tooltip.visible {
    opacity: 1;
    visibility: visible;
}
.custom-select-locked-tooltip-icon { font-size: 1.1rem; flex-shrink: 0; opacity: 0.9; }
.custom-select-locked-tooltip-text { flex: 1; min-width: 0; }
#custom-select-locked-tooltip.custom-select-locked-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: #3a3f4b;
}
#custom-select-locked-tooltip.custom-select-locked-tooltip.custom-select-locked-tooltip-below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #3a3f4b;
}
/* Two-column layout */
.live-channels-page {
    /* anula el padding-bottom heredado para que el layout llene el alto */
    padding-bottom: 0 !important;
}
.lc-layout {
    display: flex;
    align-items: stretch;
    height: calc(100vh - var(--topbar-h) - 3rem); /* topbar + padding main-content */
}
.lc-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #3a3f4b #1a1d23;
    padding-right: 1.25rem;
}
.lc-main::-webkit-scrollbar { width: 5px; }
.lc-main::-webkit-scrollbar-track { background: #1a1d23; border-radius: 3px; }
.lc-main::-webkit-scrollbar-thumb { background: #3a3f4b; border-radius: 3px; }

/* Chart controls alineados a la derecha dentro del panel principal */
.lc-main .channel-chart-controls {
    justify-content: flex-end;
}

/* Header dentro de lc-main: título + toggle arriba, filtros abajo — sticky */
.lc-main .live-channels-header {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0.65rem;
    margin-bottom: 1rem;
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg-surface-1, #14171d);
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border-color);
}
.lc-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex-shrink: 0;
    min-width: 0;
}
.lc-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    width: 100%;
    min-width: 0;
}
.lc-header-top .lc-header-left {
    flex: 1;
}
.lc-header-top .lc-charts-toggle-wrap {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.05rem;
}
.lc-main .live-channels-header .live-channels-count {
    margin-bottom: 0;
    font-size: 0.78rem;
}
.lc-main .live-channels-header .live-channels-filters {
    flex: unset;
    width: 100%;
}
@media (min-width: 768px) {
    .lc-main .live-channels-header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem 1rem;
    }
    .lc-header-top {
        flex: 1 1 auto;
        min-width: 12rem;
    }
    .lc-main .live-channels-header .live-channels-filters {
        width: auto;
        margin-left: auto;
    }
}
.lc-main .channel-chart-controls {
    justify-content: flex-end;
    margin-bottom: 0;
}

/* Switch Canales / Transmisiones (mobile) */
.lc-view-switch {
    display: none;
    gap: 0.35rem;
    padding: 0.35rem;
    margin-bottom: 0.85rem;
    border-radius: 10px;
    background: var(--bg-surface-2, #1a1d23);
    border: 1px solid var(--border-color, #2d3348);
}
.lc-view-switch-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.35rem;
    padding: 0.45rem 0.65rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #a0aec0;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.lc-view-switch-btn.is-active,
.lc-view-switch-btn[aria-selected="true"] {
    background: rgba(252, 32, 68, 0.12);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(252, 32, 68, 0.28);
}
.lc-view-switch-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.68rem;
    font-weight: 700;
    color: #e4e6eb;
}
.lc-view-switch-btn.is-active .lc-view-switch-count {
    background: rgba(252, 32, 68, 0.22);
    color: #fff;
}

/* Gráficos live-channels */
.lc-charts-toggle-wrap {
    align-self: center;
}
.lc-charts-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    border-radius: 8px;
    border: 1px solid #3a3f4b;
    background: #252830;
    color: #a0aec0;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.lc-charts-toggle:hover,
.lc-charts-toggle[aria-expanded="true"] {
    color: #e4e6eb;
    border-color: #4a5568;
    background: #2d3348;
}
.lc-charts-toggle[aria-expanded="true"] {
    color: var(--primary, #fc2044);
    border-color: rgba(252, 32, 68, 0.35);
    background: rgba(252, 32, 68, 0.08);
}
.lc-charts-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.lc-charts-toggle-icon[hidden] { display: none !important; }
.lc-charts-toggle svg { display: block; }
.lc-charts-section {
    margin-bottom: 1rem;
    --lc-chart-h: 220px;
    --lc-chart-card-min-h: 280px;
}
.lc-charts-section[hidden] { display: none !important; }
.lc-charts-row {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 0.85rem;
}
.lc-chart-card {
    background: var(--bg-surface-2, #1a1d23);
    border: 1px solid var(--border-color, #2d3348);
    border-radius: 10px;
    padding: 0.75rem 0.85rem 0.5rem;
    min-height: var(--lc-chart-card-min-h);
    display: flex;
    flex-direction: column;
    overflow: visible;
    min-width: 0;
}
.lc-chart-card--line {
    overflow: hidden;
}
.lc-chart-card--line .lc-chart-el {
    overflow: hidden;
    position: relative;
    isolation: isolate;
    flex: 0 0 var(--lc-chart-h);
    height: var(--lc-chart-h);
    min-height: 0;
    max-height: var(--lc-chart-h);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.lc-chart-card--line .lc-chart-el > div {
    width: 100% !important;
    max-width: 100% !important;
}
.lc-chart-card--pie {
    overflow: hidden;
}
.lc-chart-card--pie .lc-chart-el {
    overflow: hidden;
    position: relative;
    isolation: isolate;
    flex: 0 0 var(--lc-chart-h);
    height: var(--lc-chart-h);
    min-height: 0;
    max-height: var(--lc-chart-h);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.lc-chart-card--pie .lc-chart-el > div {
    width: 100% !important;
    max-width: 100% !important;
}
.lc-chart-title {
    margin: 0 0 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #a0aec0;
    letter-spacing: 0.01em;
    line-height: 1.3;
}
.lc-chart-el {
    flex: 1;
    min-height: 248px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}
@media (min-width: 2000px) {
    .lc-charts-section {
        --lc-chart-h: 286px;
        --lc-chart-card-min-h: 364px;
    }
}
@media (max-width: 900px) {
    .lc-charts-row {
        grid-template-columns: 1fr;
    }
    .lc-chart-card { min-height: 260px; }
    .lc-chart-el { min-height: 228px; }
}

.lc-vivos-panel {
    width: 370px;
    flex-shrink: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #3a3f4b #1a1d23;
    border-left: 1px solid var(--border-color);
    padding-left: 1.5rem;
    background:
        radial-gradient(ellipse 80% 50% at 100% 0%, rgba(124, 58, 237, 0.04) 0%, transparent 55%),
        var(--bg-surface-1, #14171d);
}
.lc-vivos-panel::-webkit-scrollbar { width: 5px; }
.lc-vivos-panel::-webkit-scrollbar-track { background: #1a1d23; border-radius: 3px; }
.lc-vivos-panel::-webkit-scrollbar-thumb { background: #3a3f4b; border-radius: 3px; }

.lc-vivos-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary, #e4e6eb);
    position: sticky;
    top: 0;
    background: transparent;
    z-index: 1;
    letter-spacing: 0.01em;
}
.lc-vivos-live-badge {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #fc2044;
    background: rgba(252,32,68,0.12);
    border: 1px solid rgba(252,32,68,0.25);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    animation: lc-badge-blink 2.5s ease-in-out infinite;
}
@keyframes lc-badge-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
.lc-vivos-count {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--text-muted, #718096);
    background: rgba(255,255,255,0.06);
    border-radius: 20px;
    padding: 0.1rem 0.5rem;
    font-weight: 500;
}
.lc-vivo-item {
    display: flex;
    gap: 0.65rem;
    padding: 0.6rem 0.35rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
    border-radius: 6px;
    transition: background 0.12s;
    animation: lc-fade-in 0.3s ease;
}
.lc-vivo-item:hover { background: rgba(255,255,255,0.05); }
@keyframes lc-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lc-vivo-thumb-wrap {
    position: relative;
    width: 106px;
    min-width: 106px;
    padding-top: 0;
    aspect-ratio: 16/9;
    background: rgba(255,255,255,0.05);
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
}
.lc-vivo-thumb {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.lc-vivo-dur {
    position: absolute;
    bottom: 3px; right: 3px;
    background: rgba(0,0,0,0.78);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    line-height: 1.3;
}
.lc-vivo-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.05rem;
}
.lc-vivo-titulo {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary, #e4e6eb);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
.lc-vivo-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.73rem;
    color: var(--text-muted, #718096);
    flex-wrap: wrap;
}
.lc-vivo-viewers {
    color: #fc2044;
    font-weight: 800;
    font-size: 0.78rem;
}
.lc-vivo-viewers.flash {
    animation: lc-viewers-flash 0.4s ease;
}
@keyframes lc-viewers-flash {
    0%   { color: #fff; }
    100% { color: #fc2044; }
}
.lc-vivo-peak { color: var(--text-muted, #718096); }
.lc-vivos-empty {
    font-size: 0.78rem;
    color: var(--text-muted, #718096);
    padding: 1.25rem 0.5rem;
    text-align: center;
}

@media (max-width: 767px) {
    .live-channels-page {
        padding-bottom: 2rem !important;
    }
    .lc-layout {
        flex-direction: column;
        height: auto;
        min-height: 0;
        gap: 0;
    }
    .lc-main {
        overflow: visible;
        padding-right: 0;
        flex: none;
        min-height: 0;
        display: block;
    }
    .lc-main .live-channels-header {
        gap: 0.65rem;
        padding-bottom: 0.75rem;
    }
    .lc-main .live-channels-header .live-channels-count {
        font-size: 0.75rem;
    }
    .lc-main .channel-chart-controls.live-channels-chart-controls {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 0.5rem;
        width: 100%;
    }
    .lc-main .lc-filter-field {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.28rem;
    }
    .lc-main .lc-filter-field label {
        font-size: 0.72rem;
        font-weight: 600;
        color: #718096;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }
    .lc-main .lc-filter-field .custom-select,
    .lc-main .live-channels-chart-controls .chart-range-selector .custom-select {
        width: 100%;
        min-width: 0;
    }
    .lc-view-switch {
        display: flex;
        flex-shrink: 0;
        margin-bottom: 0.75rem;
    }
    .lc-canales-content {
        overflow: visible;
    }
    .lc-layout[data-lc-view="transmisiones"] .lc-canales-content {
        display: none !important;
    }
    .lc-layout[data-lc-view="canales"] .lc-vivos-panel {
        display: none !important;
    }
    .lc-vivos-panel {
        width: 100%;
        flex: none;
        min-height: 0;
        max-height: none;
        overflow: visible;
        border-left: none;
        border-top: none;
        padding-left: 0;
        padding-top: 0;
        padding-bottom: 0.75rem;
        display: block;
    }
    .lc-layout[data-lc-view="transmisiones"] .lc-vivos-panel {
        display: block !important;
    }
    .lc-vivos-list {
        overflow: visible;
    }
}

@media (min-width: 768px) {
    .lc-view-switch {
        display: none !important;
    }
    .lc-layout[data-lc-view="transmisiones"] .lc-canales-content,
    .lc-layout[data-lc-view="canales"] .lc-canales-content {
        display: block !important;
    }
    .lc-layout[data-lc-view="canales"] .lc-vivos-panel,
    .lc-layout[data-lc-view="transmisiones"] .lc-vivos-panel {
        display: block !important;
    }
}

.live-channels-count { font-size: 0.9rem; color: #718096; margin-bottom: 1.25rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; }
.live-channels-viewers-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.live-channels-viewers-wrap[hidden] { display: none !important; }
.live-channels-count-sep { color: #4a5568; }
.live-channels-viewers-total {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--primary, #fc2044);
    letter-spacing: -0.01em;
}
.live-channels-viewers-label { font-size: 0.85rem; color: #718096; font-weight: 500; }
.live-channels-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    transition: opacity 0.25s ease;
}
@media (min-width: 768px) {
    .live-channels-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
    }
}
.live-channels-grid.live-channels-updating {
    opacity: 0.85;
}
.live-channel-card {
    display: flex; align-items: center; gap: 0.75rem;
    position: relative;
    overflow: hidden;
    background: var(--bg-surface-2, #1a1e26);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.15s;
    text-decoration: none; color: inherit;
}
.live-channel-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--ui-surface-glow);
    opacity: 0.85;
}
.live-channel-card > * { position: relative; z-index: 1; }
.live-channel-card:hover {
    border-color: rgba(252, 32, 68, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.live-channel-avatar-wrap {
    position: relative; flex-shrink: 0;
}
.live-channel-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    object-fit: cover; display: block;
}
.live-channel-fav-star {
    position: absolute; top: -2px; left: -2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--bg-surface-2, #1a1e26);
    border: 2px solid var(--border-color-strong);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; color: #f5a623; line-height: 1;
    z-index: 1; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.live-channel-card-favorito .live-channel-fav-star {
    border-color: rgba(252, 32, 68, 0.4); background: #2a2d36;
}
.live-channel-body {
    display: flex; flex-direction: column; gap: 0.25rem;
    min-width: 0; flex: 1;
}
.live-channel-flag { width: 16px; height: 12px; object-fit: contain; vertical-align: middle; flex-shrink: 0; }
.live-channel-name-wrap {
    display: flex; align-items: center; flex-wrap: nowrap; gap: 0.25rem; min-width: 0;
}
.live-channel-name {
    font-size: 0.95rem; font-weight: 600; color: #e4e6eb;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0; 
}
.live-channel-badge {
    flex-shrink: 0; display: inline-flex; align-items: center; line-height: 0;
    margin-left: 0.15rem; vertical-align: middle;
}
.live-channel-badge-svg { width: 14px; height: 14px; }
.live-channel-card { position: relative; }
.live-channel-card-favorito {
    background: rgba(252, 32, 68, 0.06);
    border-color: rgba(252, 32, 68, 0.22);
}
.live-channel-card-favorito::before {
    background:
        radial-gradient(ellipse 80% 70% at 100% 0%, rgba(252, 32, 68, 0.12) 0%, transparent 55%),
        var(--ui-surface-glow);
}
.live-channel-card-favorito:hover {
    border-color: var(--primary);
    background: rgba(252, 32, 68, 0.09);
}
.live-channel-card-chart-top {
    border-color: var(--lc-chart-color, var(--border-color));
    border-width: 2px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--lc-chart-color) 30%, transparent);
}
.live-channel-card-chart-top::before {
    background:
        radial-gradient(ellipse 80% 70% at 100% 0%, color-mix(in srgb, var(--lc-chart-color) 16%, transparent) 0%, transparent 55%),
        var(--ui-surface-glow);
}
.live-channel-card-chart-top:hover {
    border-color: var(--lc-chart-color);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--lc-chart-color) 22%, transparent);
}
.live-channel-card-favorito.live-channel-card-chart-top {
    background: color-mix(in srgb, var(--lc-chart-color) 6%, var(--bg-surface-2, #1a1e26));
}
.live-channel-card-favorito.live-channel-card-chart-top:hover {
    background: color-mix(in srgb, var(--lc-chart-color) 10%, var(--bg-surface-2, #1a1e26));
}
.live-channel-viewers {
    font-size: 1.25rem; font-weight: 700; color: var(--primary);
    line-height: 1.2;
    transition: color 0.3s ease, transform 0.2s ease;
}
.live-channel-viewers.views-up {
    color: #48bb78;
    animation: views-pulse-up 0.4s ease-out;
}
.live-channel-viewers.views-down {
    color: #f56565;
    animation: views-pulse-down 0.4s ease-out;
}
@keyframes views-pulse-up {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
@keyframes views-pulse-down {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}
.live-channels-updated {
    color: #718096;
    font-weight: 400;
}
.live-channels-grid {
    transition: opacity 0.25s ease;
}
.live-channels-grid.live-channels-updating {
    opacity: 0.85;
}
.live-channels-grid {
    transition: opacity 0.25s ease;
}
.live-channels-grid.live-channels-updating {
    opacity: 0.85;
}
.live-channels-grid {
    transition: opacity 0.25s ease;
}
.live-channels-grid.live-channels-updating {
    opacity: 0.85;
}
.live-channels-grid {
    transition: opacity 0.25s ease;
}
.live-channels-grid.live-channels-updating {
    opacity: 0.85;
}
.live-channels-grid {
    transition: opacity 0.25s ease;
}
.live-channels-grid.live-channels-updating {
    opacity: 0.85;
    pointer-events: none;
}
.live-channels-grid {
    transition: opacity 0.25s ease;
}
.live-channels-grid.live-channels-updating {
    opacity: 0.85;
}
.live-channels-grid.live-channels-updating .live-channel-card {
    transition: transform 0.35s ease-out, opacity 0.25s ease;
}
.live-channels-empty { color: #718096; font-style: italic; margin: 0; }

/* Live channels — mobile: 2 cards per row (~50% each), horizontal layout */
@media (max-width: 767px) {
    .live-channels-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }
    .live-channels-grid .live-channel-card {
        flex-direction: row;
        align-items: center;
        text-align: left;
        min-width: 0;
        max-width: 100%;
        width: 100%;
        padding: 0.45rem 0.4rem;
        gap: 0.4rem;
        border-radius: 10px;
    }
    .live-channels-grid .live-channel-avatar {
        width: 34px;
        height: 34px;
    }
    .live-channels-grid .live-channel-body {
        align-items: flex-start;
        min-width: 0;
        flex: 1;
        overflow: hidden;
    }
    .live-channels-grid .live-channel-name-wrap {
        justify-content: flex-start;
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }
    .live-channels-grid .live-channel-name {
        display: block;
        flex: 1;
        min-width: 0;
        font-size: 0.72rem;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .live-channels-grid .live-channel-viewers {
        font-size: 0.74rem;
        font-weight: 700;
        line-height: 1.15;
    }
    .live-channels-grid .live-channel-flag {
        width: 14px;
        height: 10px;
    }
    .live-channels-grid .live-channel-fav-star {
        width: 16px;
        height: 16px;
        font-size: 0.55rem;
        top: -2px;
        left: -2px;
    }
}

/* ── Vivos finalizados ──────────────────────────────────────────────────── */
.vivos-fin-page { padding: 0 0 2rem; }
.vivos-fin-title { display: flex; align-items: center; gap: 0.5rem; }
.vivos-fin-title svg { color: #a0aec0; flex-shrink: 0; }

/* Sidebar: canales que transmitieron hoy */
.vf-canales-list { display: flex; flex-direction: column; }
.vf-canal-item {
    display: flex;
    gap: 0.65rem;
    padding: 0.65rem 0.35rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
    border-radius: 6px;
    transition: background 0.12s;
}
.vf-canal-item:hover { background: rgba(255,255,255,0.05); }
.vf-canal-item-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255,255,255,0.06);
}
.vf-canal-item-avatar--empty {
    display: block;
}
.vf-canal-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.vf-canal-item-name {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary, #e4e6eb);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vf-canal-item-titulo {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-primary, #d1d5db);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vf-canal-item-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    margin-top: 0.1rem;
}
.vf-canal-item-peak {
    color: #fc2044;
    font-weight: 800;
    font-size: 0.82rem;
}
.vf-canal-item-prom {
    color: #a0aec0;
    font-weight: 600;
    font-size: 0.78rem;
}

.vf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.1rem;
    margin-top: 1rem;
}

.vf-card {
    display: flex; flex-direction: column;
    background: #1e2128; border: 1px solid #2d323e; border-radius: 8px;
    overflow: hidden; text-decoration: none; color: inherit;
    transition: border-color 0.18s, transform 0.18s;
}
.vf-card:hover { border-color: var(--primary); transform: translateY(-2px); }

.vf-thumb-wrap {
    position: relative; aspect-ratio: 16 / 9;
    background: #141619; overflow: hidden; flex-shrink: 0;
}
.vf-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-thumb-wrap--no-img { background: #1a1d23; }
.vf-dur {
    position: absolute; bottom: 5px; right: 5px;
    background: rgba(0,0,0,0.82); color: #e4e6eb;
    font-size: 0.68rem; font-weight: 600; line-height: 1;
    padding: 2px 5px; border-radius: 3px; letter-spacing: 0.01em;
}

.vf-body { padding: 0.55rem 0.7rem 0.7rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }

.vf-canal { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.vf-flag  { width: 14px; height: 10px; object-fit: cover; border-radius: 1px; flex-shrink: 0; }
.vf-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.vf-canal-name {
    font-size: 0.74rem; color: #8899b0; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
}

.vf-titulo {
    margin: 0; font-size: 0.84rem; font-weight: 500; color: #d8dce6;
    line-height: 1.35; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.vf-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.35rem; font-size: 0.72rem; color: #718096; margin-top: auto; padding-top: 0.25rem; flex-wrap: wrap; }
.vf-ended { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.vf-ended-label { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #718096; }
.vf-ended-viewers { font-size: 0.88rem; font-weight: 800; color: #fc2044; line-height: 1.1; }
.vf-time { color: #a0aec0; font-size: 0.74rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.vf-viewers { display: flex; align-items: center; gap: 0.25rem; }

@keyframes vf-card-appear {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.vf-card--new { animation: vf-card-appear 0.4s ease; }

@media (max-width: 600px) {
    .vf-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; }
}

/* Tarjeta de actualización de plan (debajo del grid) */
.live-channels-upgrade-card {
    margin-top: 2rem; padding: 2rem;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 80% at 100% 0%, rgba(252, 32, 68, 0.14) 0%, transparent 55%),
        linear-gradient(135deg, rgba(252, 32, 68, 0.1) 0%, rgba(252, 32, 68, 0.04) 100%);
    border: 1px solid rgba(252, 32, 68, 0.28);
    border-radius: var(--ui-surface-radius, 14px);
    text-align: center;
}
.live-channels-upgrade-icon {
    width: 64px; height: 64px; margin: 0 auto 1.25rem;
    background: rgba(252, 32, 68, 0.2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.live-channels-upgrade-icon svg {
    width: 32px; height: 32px;
    color: var(--primary);
}
.live-channels-upgrade-title {
    margin: 0 0 0.75rem; font-size: 1.35rem; font-weight: 700;
    color: #e4e6eb;
}
.live-channels-upgrade-desc {
    margin: 0 0 1.5rem; font-size: 1rem; color: #a0aec0;
    line-height: 1.5;
}
.live-channels-upgrade-benefits {
    margin: 0 0 1.5rem; padding: 0; list-style: none;
    text-align: left; max-width: 320px; margin-left: auto; margin-right: auto;
}
.live-channels-upgrade-benefits li {
    padding: 0.5rem 0 0.5rem 1.75rem; position: relative;
    color: #cbd5e0; font-size: 0.95rem;
}
.live-channels-upgrade-benefits li::before {
    content: '✓'; position: absolute; left: 0;
    color: #48bb78; font-weight: 700; font-size: 1rem;
}
.live-channels-upgrade-btn {
    display: inline-block; padding: 0.75rem 2rem;
    background: var(--primary); color: #fff;
    font-weight: 600; font-size: 1rem;
    border-radius: 8px; text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}
.live-channels-upgrade-btn:hover {
    background: #ff4d6d; color: #fff;
    transform: translateY(-1px);
}

/* Channel detail page */
.channel-detail-page { padding: 0 0 2rem; max-width: 1200px; }
.channel-detail-header-wrap { margin-bottom: 2.5rem; }
.channel-detail-header {
    position: relative;
    z-index: 90;
    overflow: hidden;
    border-radius: 12px;
}
.channel-detail-header-with-banner {
    position: relative;
    padding: 1rem;
    background: #1a1d2399;
    backdrop-filter: blur(10px);
}
.channel-detail-header-with-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--channel-banner);
    background-size: cover;
    background-position: center;
    filter: grayscale(1);
    opacity: 0.1;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
}
.channel-detail-header-with-banner .channel-detail-hero {
    position: relative;
    z-index: 1;
}
.channel-detail-header.channel-header-is-sticky {
    position: fixed;
    top: calc(var(--topbar-h) + 1.5rem);
    left: calc(var(--sidebar-w) + 1.5rem);
    right: 1.5rem;
    width: calc(100% - var(--sidebar-w) - 3rem);
    max-width: 1200px;
    margin-left: 0;
    margin-right: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
@media (max-width: 767px) {
    .channel-detail-header.channel-header-is-sticky {
        left: 0.5rem;
        right: 0.5rem;
        width: calc(100% - 1rem);
    }
}
.channel-detail-header.channel-header-is-sticky .channel-detail-hero {
    padding: 0.6rem 1rem;
    gap: 0.85rem;
}
.channel-detail-header.channel-header-is-sticky .channel-detail-avatar {
    width: 48px;
    height: 48px;
}
.channel-detail-header.channel-header-is-sticky .channel-detail-title {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}
.channel-detail-header.channel-header-is-sticky .channel-detail-badge .channel-badge-svg {
    width: 14px;
    height: 14px;
}
.channel-detail-header.channel-header-is-sticky .channel-detail-meta {
    font-size: 0.85rem;
}
.channel-detail-header.channel-header-is-sticky .channel-viewers-count {
    font-size: 1.15rem;
}
.channel-detail-avatar {
    transition: width 0.25s ease, height 0.25s ease;
}
.channel-detail-title {
    transition: font-size 0.25s ease, margin 0.25s ease;
}
.channel-detail-back {
    display: inline-block; margin-bottom: 1rem;
    color: #718096; text-decoration: none; font-size: 0.9rem;
}
.channel-detail-back:hover { color: var(--primary); }
.channel-detail-banner-wrap {
    width: 100%; max-height: 180px; overflow: hidden; border-radius: 12px; margin-bottom: 1rem;
}
.channel-detail-banner { width: 100%; height: auto; display: block; object-fit: cover; }
.channel-detail-hero {
    display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    background: var(--bg-surface-2, #1a1e26);
    border: 1px solid var(--border-color);
    border-radius: var(--ui-surface-radius, 14px);
    padding: 1.5rem;
    transition: padding 0.25s ease, gap 0.25s ease, border-radius 0.25s ease;
}
.channel-detail-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--ui-surface-glow);
    opacity: 0.8;
}
.channel-detail-hero > * { position: relative; z-index: 1; }
.channel-detail-header-with-banner .channel-detail-hero {
    background: transparent;
    border: none;
}
.channel-detail-header-with-banner .channel-detail-hero::before {
    display: none;
}
.channel-detail-avatar {
    width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.channel-detail-info { flex: 1; min-width: 0; }
.channel-detail-title {
    display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem;
    font-size: 1.35rem; font-weight: 700; color: #e4e6eb;
}
.channel-detail-badge { flex-shrink: 0; display: inline-flex; line-height: 0; }
.channel-detail-badge .channel-badge-svg { width: 16px; height: 16px; }
.channel-detail-title-pais {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    line-height: 0;
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
    transition: opacity 0.15s;
}
a.channel-detail-title-pais:hover { opacity: 0.85; }
.channel-detail-flag--title {
    width: 22px;
    height: 16px;
    object-fit: contain;
}
.channel-detail-meta {
    display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
    font-size: 0.9rem; color: #718096;
}
.channel-detail-flag { width: 20px; height: 15px; object-fit: contain; vertical-align: middle; }
.channel-detail-meta-sep { color: #4a5568; }
.channel-detail-live { display: inline-flex; align-items: center; gap: 0.5rem; }
.channel-viewers-count {
    font-size: 1.4rem; font-weight: 800; color: var(--primary);
    text-shadow: 0 0 12px rgba(252, 32, 68, 0.5);
    transition: transform 0.2s, box-shadow 0.2s;
}
.channel-viewers-count.channel-viewers-updated {
    animation: channel-viewers-pulse 0.8s ease;
}
@keyframes channel-viewers-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; transform: scale(1.08); }
}
.channel-viewers-label { font-size: 0.9rem; color: #718096; }
#channel-viewers-wrap[data-live="0"] .live-dot {
    background: #4a5568; animation: none;
}
#channel-viewers-wrap[data-live="0"] .channel-viewers-count {
    color: #718096; text-shadow: none;
}
.channel-section {
    margin-bottom: 2.5rem;
    position: relative;
    overflow: hidden;
    background: var(--bg-surface-2, #1a1e26);
    border: 1px solid var(--border-color);
    border-radius: var(--ui-surface-radius, 14px);
    padding: 1.25rem;
}
.channel-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--ui-surface-glow);
    opacity: 0.75;
}
.channel-section > * { position: relative; z-index: 1; }
#section-espectadores.channel-section:not(.channel-section-no-pad) {
    padding-bottom: 1.75rem;
}
.channel-section h2 { margin: 0 0 1rem; font-size: 1.1rem; color: #a0aec0; font-weight: 600; }
.channel-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.channel-section-header h2 { margin: 0; }
.channel-content-orden { min-width: 200px; }
.channel-chart-controls {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1rem;
}
.chart-range-selector { display: flex; align-items: center; gap: 0.5rem; }
.chart-range-selector label { font-size: 0.9rem; color: #a0aec0; }
.chart-custom-range {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}
.chart-custom-range label { font-size: 0.9rem; color: #a0aec0; }
.chart-custom-range input[type="date"] {
    padding: 0.35rem 0.5rem; border-radius: 4px;
    background: #1a1d23; border: 1px solid #3a3f4b; color: #e4e6eb;
}
.channel-esp-prog-toggle-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.channel-esp-prog-toggle-wrap .channel-live-programacion-toggle {
    font-size: 0.82rem;
    color: #a0aec0;
}
.channel-chart-empty, .channel-empty { color: #718096; font-style: italic; margin: 0.5rem 0 0; }
.channel-daily-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.channel-tab {
    padding: 0.4rem 0.9rem; border-radius: 6px;
    background: #1a1d23; border: 1px solid #3a3f4b; color: #a0aec0;
    font-size: 0.9rem; cursor: pointer; transition: all 0.2s;
}
.channel-tab:hover { border-color: #4a5568; color: #e4e6eb; }
.channel-tab.active {
    background: var(--primary); border-color: var(--primary); color: #fff;
}
.channel-daily-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    margin-bottom: 0.75rem;
    background: rgba(74, 144, 217, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(74, 144, 217, 0.2);
}
.daily-summary-label { font-size: 0.9rem; color: #a0aec0; }
.daily-summary-value { font-size: 1.1rem; font-weight: 700; color: #e4e6eb; }

.channel-period-highlight {
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    border-radius: 8px;
    border: 1px solid #3a3f4b;
    border-left-width: 4px;
    background: #1e2128;
}
.channel-period-highlight--modal {
    margin-bottom: 0.65rem;
    flex-shrink: 0;
}
.channel-period-highlight--views { border-left-color: #4a90d9; }
.channel-period-highlight--subs { border-left-color: #48bb78; }
.channel-period-highlight--vids {
    border-left: 4px solid #fc2044;
}
.channel-period-highlight-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #e4e6eb;
    margin-bottom: 0.4rem;
}
.channel-period-highlight-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    font-size: 0.85rem;
}
.channel-period-highlight-range { color: #718096; }
.channel-period-highlight-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #e4e6eb;
}
.channel-period-highlight-avg {
    flex-basis: 100%;
    font-size: 0.82rem;
    color: #a0aec0;
    margin-top: 0.15rem;
}

.channel-daily-table-wrap { margin-top: 1rem; overflow-x: auto; }
.channel-daily-table { width: 100%; }
.channel-lives-list { display: flex; flex-direction: column; gap: 0.75rem; }
.channel-live-card {
    display: flex; gap: 1rem; align-items: flex-start;
    padding: 0.75rem; background: #1a1d23; border: 1px solid #3a3f4b;
    border-radius: 8px; color: #e4e6eb; text-decoration: none;
    transition: border-color 0.2s;
}
.channel-live-card:hover { border-color: var(--primary); }
.channel-live-card .channel-live-link {
    flex: 1; min-width: 0; display: flex; gap: 1rem; align-items: flex-start;
    text-decoration: none; color: inherit;
}
.channel-live-card .channel-live-generar-post {
    flex-shrink: 0; align-self: center; white-space: nowrap;
}
.channel-live-thumb-wrap {
    width: 200px; min-width: 200px; flex-shrink: 0; position: relative;
    aspect-ratio: 16/9; overflow: hidden; background: #1a1d23; border-radius: 6px;
}
.channel-live-thumb-placeholder {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: #718096;
}
.channel-live-thumb {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: 6px;
}
.channel-live-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.channel-live-titulo { font-weight: 600; font-size: 0.95rem; }
.channel-live-meta { font-size: 0.8rem; color: #718096; }
.live-badge-ahora {
    display: inline-block; padding: 0.2rem 0.5rem; background: rgba(252, 32, 68, 0.2);
    color: var(--primary); font-size: 0.75rem; font-weight: 600; border-radius: 4px;
    margin-top: 0.25rem;
}
.media-card.media-card-detail {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    width: 100%;
    max-width: none;
    margin-bottom: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    text-decoration: none;
    color: inherit;
}
.media-card-detail .media-card-link {
    flex: 0 0 min(320px, 38%);
    display: block;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #1a1d23;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.media-card-detail .media-card-link:hover {
    border-color: rgba(252, 32, 68, 0.45);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.media-card-detail .media-thumb-wrap {
    border-radius: 0;
}
.media-card-detail .media-info {
    flex: 1;
    min-width: 0;
    padding: 0;
    gap: 0.35rem;
}
.media-card-detail .media-titulo {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary, #e4e6eb);
    margin: 0 0 0.35rem;
    overflow: visible;
    -webkit-line-clamp: unset;
}
.media-card-detail .media-views {
    display: inline-flex;
    align-items: center;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--primary);
}
.media-card.media-card-detail.media-short .media-card-link {
    flex-basis: min(180px, 32%);
}
.content-meta-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.65rem;
    margin-top: 0.85rem;
    width: 100%;
}
.content-meta-card {
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    min-width: 0;
}
.content-meta-card-registro { border-left: 3px solid #4a90d9; }
.content-meta-card-mejor { border-left: 3px solid #48bb78; }
.content-meta-label {
    font-size: 0.68rem;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.content-meta-value { font-size: 1rem; font-weight: 700; color: #e4e6eb; line-height: 1.2; }
.content-meta-extra { font-size: 0.82rem; color: var(--primary); font-weight: 600; }

.channel-detail-page .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}

.channel-detail-page.page-admin.content-detail-page {
    padding: 1.25rem 1rem 2rem;
    max-width: 960px;
}
.content-detail-page .channel-detail-header {
    margin-bottom: 0.75rem;
    border-radius: 0;
    overflow: visible;
}
.content-detail-page .channel-detail-back {
    margin-bottom: 0;
    font-size: 0.85rem;
    font-weight: 500;
}
.content-detail-page .channel-section {
    margin-bottom: 1.25rem;
    padding: 1.15rem;
}
.content-detail-page .channel-section h2 {
    font-size: 1rem;
}
.content-detail-page .channel-chart-controls {
    gap: 0.65rem;
}
.content-detail-page .channel-chart-controls .filter-select {
    flex: 1;
    min-width: 0;
    max-width: 100%;
}
.content-detail-page .channel-zoom-hint {
    font-size: 0.78rem;
    color: #718096;
}
.content-detail-page .chart-container {
    height: 220px;
}
.content-detail-page .channel-daily-table-wrap {
    margin-top: 0.85rem;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    .channel-detail-page.page-admin.content-detail-page {
        padding: 0.65rem 0.5rem 2rem;
    }
    .content-detail-page .channel-section {
        padding: 0.85rem;
        margin-bottom: 1rem;
        border-radius: 12px;
    }
    .content-detail-page .channel-chart-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .content-detail-page .channel-chart-controls label {
        font-size: 0.82rem;
    }
    .content-detail-page .channel-zoom-hint {
        display: none;
    }
    .content-detail-page .chart-container {
        height: 200px;
    }
    .content-detail-page .data-table th,
    .content-detail-page .data-table td {
        padding: 0.45rem 0.5rem;
        font-size: 0.8rem;
        white-space: nowrap;
    }
}

@media (max-width: 767px) {
    .media-card.media-card-detail {
        flex-direction: column;
        gap: 0.85rem;
    }
    .media-card-detail .media-card-link {
        flex: none;
        width: 100%;
        max-width: none;
    }
    .media-card.media-card-detail.media-short .media-card-link {
        width: min(160px, 55%);
        margin: 0 auto;
    }
    .media-card-detail .media-titulo {
        font-size: 1.02rem;
        line-height: 1.3;
    }
    .media-card-detail .media-views {
        font-size: 0.88rem;
    }
    .content-meta-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        margin-top: 0.65rem;
    }
    .content-meta-card {
        padding: 0.55rem 0.65rem;
    }
    .content-meta-value {
        font-size: 0.92rem;
    }
    .content-meta-extra {
        font-size: 0.76rem;
    }
}

@media (max-width: 420px) {
    .content-meta-cards {
        grid-template-columns: 1fr;
    }
}

.channel-pico-card {
    padding: 0.5rem 1rem; background: rgba(252, 32, 68, 0.12);
    border: 1px solid rgba(252, 32, 68, 0.3); border-radius: 8px;
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.channel-pico-time { color: #a0aec0; font-size: 0.9rem; }

.channel-espectadores-period-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #2d323e;
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 640px) {
    .channel-espectadores-period-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.channel-espectadores-period-stats.is-prog-linked {
    border-top-color: rgba(56, 189, 248, 0.45);
}
.channel-espectadores-period-stats.is-prog-linked .channel-espectadores-stat-tile {
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(56, 189, 248, 0.08);
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.12);
}
.channel-espectadores-period-stats.is-prog-linked .channel-espectadores-stat-label {
    color: #7dd3fc;
}
.channel-espectadores-period-stats.is-prog-linked .channel-espectadores-stat-value {
    color: #f0f9ff;
}
.channel-espectadores-period-stats.is-prog-linked .channel-espectadores-stat-sub {
    color: #93c5fd;
}
.channel-espectadores-period-stats.is-prog-linked .channel-espectadores-stat-meta {
    color: #bae6fd;
}

/* Debug MG ganados (?debug_mg=1) — detalle_v2 */
.channel-debug-mg-ganados {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px dashed rgba(148, 163, 184, 0.45);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.55);
    font-size: 0.78rem;
    color: #cbd5e1;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}
.channel-debug-mg-ganados-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    color: #e2e8f0;
}
.channel-debug-mg-ganados-hint {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: normal;
}
.channel-debug-mg-ganados-rule {
    opacity: 0.92;
    font-size: 0.72rem;
    color: #a5b4fc;
}
.channel-debug-mg-ganados-block {
    padding-top: 0.35rem;
    border-top: 1px solid rgba(71, 85, 105, 0.5);
}
.channel-debug-mg-ganados-block:first-child {
    border-top: 0;
    padding-top: 0;
}
.channel-debug-mg-ganados-title {
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #f1f5f9;
}
.channel-debug-mg-ganados-meta {
    margin: 0.2rem 0;
    line-height: 1.45;
}
.channel-debug-mg-ganados-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.35rem;
    font-size: 0.74rem;
}
.channel-debug-mg-ganados-table th,
.channel-debug-mg-ganados-table td {
    border: 1px solid rgba(71, 85, 105, 0.55);
    padding: 0.25rem 0.4rem;
    text-align: left;
    vertical-align: top;
}
.channel-debug-mg-ganados-table th {
    background: rgba(30, 41, 59, 0.9);
    color: #94a3b8;
    font-weight: 600;
}
.channel-debug-mg-ganados-table code {
    font-size: 0.85em;
}

.channel-espectadores-stat-tile {
    background: #252830;
    border: 1px solid #3a3f4b;
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.channel-espectadores-stat-label {
    font-size: 0.65rem;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.channel-espectadores-stat-value {
    font-size: 1.12rem;
    font-weight: 700;
    color: #e4e6eb;
    line-height: 1.15;
}
.channel-espectadores-stat-meta {
    font-size: 0.72rem;
    font-weight: 500;
    color: #94a3b8;
    line-height: 1.2;
    margin-top: 0.05rem;
}
.channel-espectadores-stat-sub {
    font-size: 0.72rem;
    color: #718096;
    line-height: 1.2;
}

.channel-espectadores-stat-tile--interactive {
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}
.channel-espectadores-stat-tile--interactive:hover:not(.is-active):not(.channel-espectadores-stat-tile--inactive) {
    background: #2c313a;
    border-color: #4b5263;
}
.channel-espectadores-stat-tile--interactive.channel-espectadores-stat-tile--inactive {
    cursor: not-allowed;
    opacity: 0.55;
}
.channel-espectadores-stat-tile--interactive.channel-espectadores-stat-tile--inactive:hover {
    background: #252830;
    border-color: #3a3f4b;
}

.channel-espectadores-stat-tile--accent-pico.is-active {
    border-color: #f472b6;
    box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.25);
    background: rgba(244, 114, 182, 0.06);
}
.channel-espectadores-stat-tile--accent-pico.is-active .channel-espectadores-stat-label,
.channel-espectadores-stat-tile--accent-pico.is-active .channel-espectadores-stat-value {
    color: #f9a8d4;
}

.channel-espectadores-stat-tile--accent-prom.is-active {
    border-color: #38bdf8;
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25);
    background: rgba(56, 189, 248, 0.06);
}
.channel-espectadores-stat-tile--accent-prom.is-active .channel-espectadores-stat-label,
.channel-espectadores-stat-tile--accent-prom.is-active .channel-espectadores-stat-value {
    color: #7dd3fc;
}

.channel-espectadores-stat-tile--accent-interaccion.is-active {
    border-color: #34d399;
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.28);
    background: rgba(52, 211, 153, 0.07);
}
.channel-espectadores-stat-tile--accent-interaccion.is-active .channel-espectadores-stat-label,
.channel-espectadores-stat-tile--accent-interaccion.is-active .channel-espectadores-stat-value {
    color: #6ee7b7;
}

.channel-espectadores-stat-tile--accent-mg.is-active {
    border-color: #fbbf24;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.28);
    background: rgba(251, 191, 36, 0.07);
}
.channel-espectadores-stat-tile--accent-mg.is-active .channel-espectadores-stat-label,
.channel-espectadores-stat-tile--accent-mg.is-active .channel-espectadores-stat-value {
    color: #fcd34d;
}
.channel-espectadores-stat-tile--accent-mg.is-active .channel-espectadores-stat-meta {
    color: rgba(252, 211, 77, 0.88);
}

/* uPlot espectadores: bloque contenedor con padding propio para evitar aspecto flotante */
.chart-espectadores-block {
    padding: 1.25rem 1.5rem 1.5rem;
    position: relative;
    overflow: hidden;
    background: var(--bg-surface-2, #1a1e26);
    border: 1px solid var(--border-color);
    border-radius: var(--ui-surface-radius, 14px);
}
.chart-espectadores-block::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--ui-surface-glow);
    opacity: 0.65;
}
.chart-espectadores-block > * { position: relative; z-index: 1; }
.chart-espectadores-block .channel-chart-controls {
    margin-bottom: 1.25rem;
    z-index: 40;
}
.chart-espectadores-block .echarts-container {
    z-index: 1;
}
#section-espectadores .chart-container-tall {
    padding: 0;
}
#chart-espectadores-wrap {
    padding: 0 0 0.35rem 0;
    box-sizing: border-box;
}
#chart-espectadores-wrap .uplot .u-legend {
    margin-top: 1rem;
    padding: 0.5rem 0 0;
}
.chart-nav-buttons {
    display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap;
}
.chart-nav-btn {
    width: 32px; height: 32px; padding: 0;
    background: #1a1d23; border: 1px solid #3a3f4b;
    color: #a0aec0; font-size: 1rem; cursor: pointer;
    border-radius: 6px; display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.chart-nav-btn:hover {
    background: #2d323e; border-color: #4a5568; color: #e4e6eb;
}
.chart-nav-btn.chart-nav-reset { font-size: 1.1rem; }
#chart-espectadores-wrap .uplot .u-legend {
    color: #a0aec0;
    font-size: 13px;
}
#chart-espectadores-wrap .uplot .u-legend th {
    color: #e4e6eb;
    font-size: 14px;
}
#chart-espectadores-wrap .uplot .u-legend .u-value,
#chart-espectadores-wrap .uplot .u-legend td {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: #e4e6eb !important;
}
#chart-espectadores-wrap .uplot .u-cursor-x,
#chart-espectadores-wrap .uplot .u-cursor-y {
    border-color: rgba(160, 174, 192, 0.5);
}
#chart-espectadores-wrap .uplot .u-select {
    background: rgba(252, 32, 68, 0.15);
}
.channel-daily-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.channel-acumulado-toggle {
    display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer;
    font-size: 0.9rem; color: #a0aec0; user-select: none;
}
.channel-acumulado-switch {
    position: relative; width: 44px; height: 24px;
    background: #3a3f4b; border-radius: 12px;
    transition: background 0.25s ease;
}
.channel-acumulado-switch.active { background: var(--primary); }
.channel-acumulado-switch::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; transition: transform 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.channel-acumulado-switch.active::after {
    transform: translateX(20px);
}
.channel-acumulado-toggle span:last-child { color: #a0aec0; }
.chart-container-diario { height: 260px; }

/* ── Skeleton loading ─────────────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}
.skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 1200px 100%;
    animation: skeleton-shimmer 1.4s infinite linear;
    border-radius: 6px;
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}
.skeleton * { visibility: hidden !important; }
/* Chart skeleton: shimmer overlay via ::before so ECharts canvas renders normally */
.echarts-container.skeleton {
    position: relative;
    overflow: hidden;
}
.echarts-container.skeleton::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(22,24,30,0.92) 0%, rgba(22,24,30,0.85) 40%, rgba(40,44,54,0.88) 50%, rgba(22,24,30,0.85) 60%, rgba(22,24,30,0.92) 100%);
    background-size: 1200px 100%;
    animation: skeleton-shimmer 1.4s infinite linear;
}
.echarts-container.skeleton * { visibility: hidden !important; }
/* Lives list skeleton placeholder */
.skeleton-list-wrap:empty::before {
    content: '';
    display: block;
    height: 220px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 1200px 100%;
    animation: skeleton-shimmer 1.4s infinite linear;
}
.skeleton-line {
    display: block;
    height: 0.9em;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 1200px 100%;
    animation: skeleton-shimmer 1.4s infinite linear;
}

/* ── Channel v2: Stats bar ────────────────────────────────────────────────── */
.channel-stats-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}
.channel-stat-card {
    flex: 1 1 120px;
    position: relative;
    overflow: hidden;
    background: var(--bg-surface-2, #1a1e26);
    border: 1px solid var(--border-color);
    border-radius: var(--ui-surface-radius, 14px);
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 100px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}
.channel-stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--ui-surface-glow);
    opacity: 0.75;
}
.channel-stat-card > * { position: relative; z-index: 1; }
.channel-stat-label {
    font-size: 0.68rem;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}
.channel-stat-value {
    font-size: 1.45rem;
    font-weight: 800;
    color: #e4e6eb;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.channel-stat-extra,
.channel-stat-peak-date {
    font-size: 0.8rem;
    color: #718096;
    line-height: 1.25;
    margin-top: 0.12rem;
    font-weight:bold;
}
.channel-stat-vs-prev {
    font-size: 0.74rem;
    line-height: 1.25;
    margin-top: 0.2rem;
    color: #718096;
    font-weight: 500;
}
.channel-stat-vs-prev--up {
    color: #48bb78;
}
.channel-stat-vs-prev--down {
    color: #fc2044;
}
.channel-stat-vs-prev--same {
    color: #718096;
}
a.channel-stat-card--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.channel-stat-card--link:hover {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.28);
}
a.channel-stat-card--link:focus-visible {
    outline: 2px solid #fc2044;
    outline-offset: 2px;
}
.channel-stat-hint {
    font-size: 0.7rem;
    color: #4a5568;
}

/* ── Channel v2: Two-column grid ─────────────────────────────────────────── */
.channel-main-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
@media (min-width: 1100px) {
    .channel-main-grid {
        grid-template-columns: 3fr 2fr;
        align-items: start;
    }
}

/* ── Channel v2: Section topbar ───────────────────────────────────────────── */
.channel-section-no-pad {
    padding: 0;
    overflow: hidden;
}
.channel-section-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem 0;
    position: relative;
    z-index: 40;
}
.channel-section-topbar h2 {
    margin: 0;
    font-size: 1rem;
    color: #a0aec0;
    font-weight: 600;
}
.channel-section-no-pad .chart-espectadores-block {
    padding: 0.75rem 1.1rem 1.25rem;
}
.channel-section .chart-espectadores-block {
    border: none;
    background: transparent;
}
.channel-section .chart-espectadores-block::before {
    display: none;
}
.channel-section-no-pad .channel-daily-controls {
    padding: 0.5rem 1.1rem 0;
}
.channel-section-no-pad .channel-daily-summary {
    margin: 0.5rem 1.1rem 0;
}
.channel-section-no-pad .channel-chart-empty {
    padding: 0.5rem 1.1rem 1rem;
}
.channel-section-no-pad .channel-daily-table-section {
    padding: 0 1.1rem 1.1rem;
}

/* ── ECharts containers ───────────────────────────────────────────────────── */
.echarts-container {
    width: 100%;
    box-sizing: border-box;
}
.echarts-espectadores {
    height: 400px;
}
.echarts-diario {
    height: 280px;
    padding: 0 1.1rem 0;
    margin-top: 0.5rem;
}

/* ── Chart expand button ──────────────────────────────────────────────────── */
.chart-expand-btn {
    width: 28px;
    height: 28px;
    background: #1a1d23;
    border: 1px solid #3a3f4b;
    border-radius: 6px;
    color: #718096;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.chart-expand-btn:hover {
    background: #2d323e;
    border-color: #4a5568;
    color: #e4e6eb;
}

/* ── Table controls ───────────────────────────────────────────────────────── */
.channel-daily-table-section { margin-top: 0.6rem; }
.channel-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}
.channel-table-title {
    font-size: 0.78rem;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.channel-table-toggle-btn {
    background: none;
    border: none;
    color: #4a90d9;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s;
}
.channel-table-toggle-btn:hover { color: #63a8e8; }
.channel-daily-table-wrap {
    max-height: 220px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid #2d323e;
    border-radius: 6px;
}
.channel-daily-table-wrap::-webkit-scrollbar { width: 5px; height: 5px; }
.channel-daily-table-wrap::-webkit-scrollbar-track { background: #1a1d23; }
.channel-daily-table-wrap::-webkit-scrollbar-thumb { background: #3a3f4b; border-radius: 3px; }

/* ── Chart modals ─────────────────────────────────────────────────────────── */
.chart-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(0, 0, 0, 0.82);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.chart-modal-inner {
    width: calc(100vw - 2rem);
    max-width: 1600px;
    max-height: calc(100vh - 2rem);
    background: #1e2229;
    border: 1px solid #3a3f4b;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.chart-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid #2d323e;
    flex-shrink: 0;
}
.chart-modal-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #e4e6eb;
}
.chart-modal-close {
    width: 30px;
    height: 30px;
    background: #252830;
    border: 1px solid #3a3f4b;
    border-radius: 6px;
    color: #a0aec0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.chart-modal-close:hover { background: #2d323e; color: #e4e6eb; border-color: #4a5568; }
.chart-modal-body {
    flex: 1;
    overflow: auto;
    padding: 1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.chart-modal-body-split {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.chart-modal-echarts {
    width: 100%;
    height: calc(100vh - 200px);
    min-height: 300px;
    flex-shrink: 0;
}
.chart-modal-body-split .chart-modal-echarts {
    height: 55vh;
    min-height: 260px;
}
.chart-modal-table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 30vh;
    border: 1px solid #2d323e;
    border-radius: 6px;
}
.chart-modal-table-wrap::-webkit-scrollbar { width: 5px; height: 5px; }
.chart-modal-table-wrap::-webkit-scrollbar-track { background: #1a1d23; }
.chart-modal-table-wrap::-webkit-scrollbar-thumb { background: #3a3f4b; border-radius: 3px; }

/* ── Responsive tweaks ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .channel-stats-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
    .channel-stat-card { padding: 0.6rem 0.75rem; }
    .channel-stat-card:first-child { grid-column: 1 / -1; }
    .channel-stat-value { font-size: 1.15rem; }
    .echarts-espectadores { height: 300px; }
    .echarts-diario { height: 220px; }
    .chart-modal-echarts { height: 50vh; }
}

/* Bottom bar (mobile) */
.bottom-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-bar-total-h);
    padding: 0 0.5rem;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(20, 23, 29, 0.95);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--border-color);
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
    z-index: 900;
}
.bottom-bar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem 0.9rem;
    font-size: 0.7rem;
    border-radius: 10px;
    transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.bottom-bar-btn:hover, .bottom-bar-btn:active { color: var(--text-primary); background: var(--bg-surface-hover); }
.bottom-bar-icon { width: 20px; height: 20px; display: block; }

/* Responsive: mobile */
@media (max-width: 767px) {
    .topbar-menu-btn { display: inline-flex; }
    .topbar-search-wrap { margin-left: 0; padding-left: 0.25rem; max-width: none; }
    .app-layout .main-content:not(.standalone) {
        margin-left: 0;
        margin-bottom: var(--bottom-bar-total-h);
        padding-bottom: 1.5rem;
    }
    .sidebar {
        top: var(--topbar-h);
        left: 0;
        width: var(--sidebar-w);
        transform: translateX(-100%);
        transition: transform 0.28s var(--ease);
        box-shadow: var(--shadow-lg);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        top: var(--topbar-h);
        background: rgba(0,0,0,0.55);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 840;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s var(--ease);
    }
    .sidebar-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }
    .bottom-bar {
        display: flex;
    }
}

@media (min-width: 768px) {
    .sidebar.open { transform: none; }
}

/* Responsive: ajustes para móvil en contenido admin */
@media (max-width: 767px) {
    .app-layout .main-content:not(.standalone) { padding: 0.5rem; }
    .page-admin { padding: 1rem; }
    .page-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .admin-toolbar { flex-direction: column; align-items: stretch; }
    .search-form { flex-direction: column; }
    .search-input { min-width: 100%; }
    .data-table th, .data-table td { padding: 0.5rem 0.6rem; font-size: 0.85rem; }
    .form-row { flex-direction: column; }
    .report-canal-nombre { flex: 1 1 auto; min-width: 0; }
    .report-canal-line1 { flex-wrap: wrap; align-items: flex-start; row-gap: 0.2rem; }
    .report-canal-meta-group {
        flex: 1 1 100%;
        padding-left: calc(28px + 0.5rem);
        flex-wrap: wrap;
    }
    .table-container .data-table.report-table { table-layout: fixed; width: 100%; max-width: 100%; }
    .table-container .data-table.report-table th:nth-child(1),
    .table-container .data-table.report-table .report-rank { width: 2rem; }
    .table-container .data-table.report-table th:nth-child(2),
    .table-container .data-table.report-table .report-canal-td { width: calc(100% - 11rem); min-width: 0; overflow: hidden; }
    .table-container .data-table.report-table th:nth-child(3),
    .table-container .data-table.report-table .report-total-cell { width: 4.5rem; }
    .table-container .data-table.report-table th:nth-child(4) { width: 4.5rem; }
}

/* Categorías v2 — gestión y pantalla de categorización */
.catv2-admin-lead { color: #a0aec0; font-size: 0.9rem; max-width: 52rem; line-height: 1.45; margin: 0 0 1rem; }
.catv2-admin-lead a { color: var(--primary); }
.catv2-cat-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.catv2-layout {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(220px, 1.1fr) minmax(220px, 1.1fr);
    gap: 1rem;
    min-height: 420px;
    align-items: stretch;
}
.catv2-col {
    background: #1e2128;
    border: 1px solid #3a3f4b;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.catv2-col-title { margin: 0 0 0.5rem; font-size: 0.95rem; color: #cbd5e0; font-weight: 600; }
.catv2-tree-scroll { overflow: auto; flex: 1; max-height: min(70vh, 640px); }
.catv2-tree-list { list-style: none; margin: 0; padding: 0; }
.catv2-tree-list .catv2-tree-list { margin-left: 0.75rem; padding-left: 0.35rem; border-left: 1px solid #3a3f4b; }
.catv2-tree-item { margin: 0.15rem 0; }
.catv2-tree-node {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    text-align: left;
    padding: 0.35rem 0.5rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #e2e8f0;
    font: inherit;
    cursor: pointer;
    transition: background 0.15s;
}
.catv2-tree-node:hover { background: rgba(255,255,255,0.06); }
.catv2-tree-node.is-selected { background: rgba(59, 130, 246, 0.2); outline: 1px solid rgba(59, 130, 246, 0.45); }
.catv2-tree-node--drop.catv2-drop-hover { background: rgba(16, 185, 129, 0.15); outline: 1px dashed #34d399; }
.catv2-tree-node--parent { opacity: 0.6; cursor: default; }
.catv2-tree-node--parent:hover { background: transparent; }
.catv2-tree-chevron { width: 0.5rem; flex-shrink: 0; }
.catv2-tree-label { flex: 1; min-width: 0; }
.catv2-assigned-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; }
.catv2-selected-label { font-size: 0.85rem; color: #718096; margin: 0; min-height: 1.2em; flex: 1 1 100%; }
.catv2-assigned-search { flex: 1 1 0; }
.catv2-assigned-count { font-size: 0.8rem; color: #718096; white-space: nowrap; }
.catv2-channel-list {
    flex: 1;
    overflow: auto;
    max-height: min(62vh, 580px);
    min-height: 120px;
    padding: 0.25rem;
    border-radius: 6px;
    background: #252830;
}
.catv2-channel-list--drop.catv2-drop-hover { outline: 2px dashed var(--primary); background: rgba(59, 130, 246, 0.08); }
.catv2-channel-card {
    padding: 0.45rem 0.6rem;
    margin-bottom: 0.35rem;
    border-radius: 6px;
    background: #2d3139;
    border: 1px solid #3a3f4b;
    cursor: grab;
    user-select: none;
}
.catv2-channel-card:active { cursor: grabbing; }
.catv2-channel-card.is-dragging { opacity: 0.55; }
.catv2-channel-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}
.catv2-channel-card-head .catv2-channel-title {
    display: block;
    font-weight: 500;
    font-size: 0.9rem;
    flex: 1;
    min-width: 0;
}
.catv2-channel-open {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0.2rem 0.45rem;
    font-size: 0.75rem;
}
.catv2-channel-title { display: block; font-weight: 500; font-size: 0.9rem; }
.catv2-channel-meta { display: block; font-size: 0.75rem; color: #718096; margin-top: 0.2rem; }
.catv2-empty, .catv2-loading, .catv2-error { font-size: 0.85rem; color: #718096; margin: 0.5rem 0; }
.catv2-error { color: #fc8181; }
.catv2-uncat-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.catv2-uncat-search { flex: 1 1 0; min-width: 0; padding: 0.25rem 0.5rem; font-size: 0.85rem; border: 1px solid #4a5568; border-radius: 4px; background: #2d3748; color: #e2e8f0; outline: none; }
.catv2-uncat-search:focus { border-color: #63b3ed; }
.catv2-pagination-info { font-size: 0.8rem; color: #718096; white-space: nowrap; }
.catv2-pagination-btns { display: flex; gap: 0.25rem; }
@media (max-width: 1100px) {
    .catv2-layout { grid-template-columns: 1fr; }
    .catv2-tree-scroll, .catv2-channel-list { max-height: 360px; }
}

/* ---- Posts programas ---- */
.postprog-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
    vertical-align: middle;
}
.postprog-text-cell {
    max-width: 280px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #cbd5e0;
}
.postprog-date-cell {
    white-space: nowrap;
    font-size: 0.85rem;
}
.postprog-published-at {
    display: block;
    color: #68d391;
    margin-top: 2px;
}
.postprog-status-select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    outline: none;
    min-width: 90px;
}
.postprog-badge-warning {
    background: rgba(237,187,29,0.18);
    color: #ecc94b;
}
.postprog-badge-success {
    background: rgba(72,187,120,0.18);
    color: #68d391;
}
.postprog-badge-danger {
    background: rgba(245,101,101,0.18);
    color: #fc8181;
}
.postprog-no-img {
    display: inline-block;
    width: 64px;
    text-align: center;
    color: #718096;
}

/* ---- Perfil ---- */
.page-perfil--new,
.page-perfil--v3 {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
.page-perfil--v3 .perfil-shell {
    max-width: 920px;
    margin: 0 auto;
    padding: 0.35rem 0.75rem 2rem;
}
.page-perfil--v3 .perfil-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1rem;
}
.page-perfil--v3 .perfil-head__identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    padding: 1.15rem 1.25rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.88) 100%);
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}
.page-perfil--v3 .perfil-head__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(148, 163, 184, 0.25);
    background: var(--bg-surface-2);
    flex-shrink: 0;
}
.page-perfil--v3 .perfil-head__info { min-width: 0; }
.page-perfil--v3 .perfil-head__name {
    margin: 0 0 0.25rem;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1.2;
}
.page-perfil--v3 .perfil-head__email {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-secondary);
    word-break: break-all;
}
.page-perfil--v3 .perfil-head__plan {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1rem 1.1rem;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(56, 189, 248, 0.12) 0%, rgba(99, 102, 241, 0.1) 55%, rgba(15, 23, 42, 0.85) 100%);
    border: 1px solid rgba(96, 165, 250, 0.22);
    box-shadow: 0 10px 32px rgba(37, 99, 235, 0.12);
}
.page-perfil--v3 .perfil-head__plan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.page-perfil--v3 .perfil-head__plan-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(191, 219, 254, 0.85);
}
.page-perfil--v3 .perfil-head__plan-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.page-perfil--v3 .perfil-head__plan-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem 0.75rem;
    margin: 0;
}
.page-perfil--v3 .perfil-head__plan-meta div { min-width: 0; }
.page-perfil--v3 .perfil-head__plan-meta dt {
    margin: 0;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(148, 163, 184, 0.85);
    font-weight: 600;
}
.page-perfil--v3 .perfil-head__plan-meta dd {
    margin: 0.12rem 0 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: #e2e8f0;
}
.page-perfil--v3 .perfil-head__plan-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: auto;
    font-size: 0.82rem;
    font-weight: 600;
    color: #93c5fd;
    text-decoration: none;
}
.page-perfil--v3 .perfil-head__plan-link:hover { color: #bfdbfe; }
.page-perfil--v3 .perfil-panel {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.page-perfil--v3 .perfil-panel__section {
    padding: 1.1rem 1.25rem;
}
.page-perfil--v3 .perfil-panel__section + .perfil-panel__section {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.page-perfil--v3 .perfil-panel__section-head { margin-bottom: 0.85rem; }
.page-perfil--v3 .perfil-panel__section-head h2 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}
.page-perfil--v3 .perfil-panel__section-head p {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.page-perfil--v3 .perfil-panel__section-head--row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}
.page-perfil--v3 .perfil-panel__section-head--row .perfil-push-actions {
    flex-shrink: 0;
    margin: 0;
}
.page-perfil--v3 .perfil-form--compact .perfil-form-row {
    gap: 0.75rem;
}
.page-perfil--v3 .perfil-form-row--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.page-perfil--v3 .perfil-form-footer--inline {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.65rem;
}
.page-perfil--v3 .perfil-form-footer--inline .perfil-form-feedback {
    flex: 1;
    min-height: 0;
    text-align: left;
}
.page-perfil--v3 .perfil-panel__section--push .perfil-push-inline {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.page-perfil--v3 .perfil-panel__section--fold {
    padding: 0;
}
.page-perfil--v3 .perfil-panel__fold-summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    user-select: none;
}
.page-perfil--v3 .perfil-panel__fold-summary::-webkit-details-marker { display: none; }
.page-perfil--v3 .perfil-panel__fold-summary strong {
    display: block;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.page-perfil--v3 .perfil-panel__fold-summary small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 400;
}
.page-perfil--v3 .perfil-panel__section--fold[open] .perfil-card-chevron {
    transform: rotate(-135deg);
    margin-top: 0.25rem;
}
.page-perfil--v3 .perfil-panel__fold-body {
    padding: 0 1.25rem 1.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
@media (max-width: 820px) {
    .page-perfil--v3 .perfil-head {
        grid-template-columns: 1fr;
    }
    .page-perfil--v3 .perfil-form-row--3 {
        grid-template-columns: 1fr;
    }
    .page-perfil--v3 .perfil-panel__section-head--row {
        flex-direction: column;
    }
}
@media (max-width: 520px) {
    .page-perfil--v3 .perfil-head__identity {
        flex-direction: column;
        text-align: center;
    }
    .page-perfil--v3 .perfil-head__plan-meta {
        grid-template-columns: 1fr;
    }
}

.perfil-layout {
    max-width: 520px;
    margin: 0 auto;
    padding: 0.5rem 0.75rem 2.5rem;
}
.perfil-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.65rem;
    margin-bottom: 1.75rem;
    padding-top: 0.25rem;
}
.perfil-stack {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}
.perfil-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}
.perfil-header .perfil-header-info { flex: 1; min-width: 0; }
.perfil-header .btn { flex-shrink: 0; }
.perfil-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color-strong);
    background: var(--bg-surface-2);
    flex-shrink: 0;
}
.perfil-title {
    margin: 0 0 0.3rem;
    font-size: 1.45rem;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.perfil-header-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.perfil-header-email { color: var(--text-secondary); font-size: 0.9rem; }
.perfil-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
}
.perfil-chip--success { color: #68d391; background: rgba(72, 187, 120, 0.15); }
.perfil-chip--warning { color: #ecc94b; background: rgba(237, 187, 29, 0.15); }
.perfil-chip--danger { color: #fc8181; background: rgba(252, 32, 68, 0.15); }
.perfil-chip--muted { color: var(--text-muted); background: var(--bg-surface-hover-strong); }

.perfil-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}
.perfil-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.perfil-card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}
.perfil-card-header h3 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 600;
}
.perfil-card-header p {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.perfil-card--collapsible {
    padding: 0;
    overflow: hidden;
    gap: 0;
}
.perfil-card--collapsible > summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    user-select: none;
}
.perfil-card--collapsible > summary::-webkit-details-marker { display: none; }
.perfil-card-summary-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.perfil-card-summary-text strong {
    font-size: 0.98rem;
    color: var(--text-primary);
}
.perfil-card-summary-text small {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 400;
}
.perfil-card-chevron {
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    flex-shrink: 0;
    transition: transform 0.18s var(--ease);
}
.perfil-card--collapsible[open] .perfil-card-chevron {
    transform: rotate(-135deg);
    margin-top: 0.25rem;
}
.perfil-card-collapsible-body {
    padding: 0 1.15rem 1.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.perfil-push-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.perfil-push-status {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.perfil-push-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #64748b;
}
.perfil-push-status-dot.is-on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
.perfil-push-status-dot.is-off { background: #f87171; box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15); }
.perfil-push-status-dot.is-muted { background: #64748b; }
.perfil-push-status-text {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}
.perfil-push-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.perfil-push-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.perfil-push-feedback { margin-top: 0; min-height: 1.1rem; }
.perfil-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.perfil-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}
.perfil-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.perfil-form-field label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.perfil-form-field input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.perfil-form-field input:hover { border-color: var(--border-color-strong); }
.perfil-form-field input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.perfil-form-field input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.perfil-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}
.perfil-form-feedback {
    font-size: 0.8rem;
    color: var(--text-muted);
    flex: 1;
    min-width: 0;
}
.perfil-form-feedback.is-error { color: #fc8181; }
.perfil-form-feedback.is-success { color: #68d391; }
.perfil-pending-email {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    background: rgba(237, 187, 29, 0.08);
    border: 1px solid rgba(237, 187, 29, 0.25);
    border-radius: 10px;
}
.perfil-pending-email-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.perfil-pending-email-body strong {
    color: #ecc94b;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 600px) {
    .perfil-form-row { grid-template-columns: 1fr; }
}

/* ---- Membresía ---- */
.page-membresia .perfil-header { margin-bottom: 1.5rem; }
.membresia-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.membresia-plan-card, .membresia-billing-card, .membresia-history-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}
.membresia-plan-card { background: linear-gradient(135deg, var(--bg-surface-1) 0%, rgba(252, 32, 68, 0.04) 100%); }
.membresia-plan-name {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.01em;
    margin: 0.5rem 0 1rem;
}
.membresia-dl {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0;
}
.membresia-dl > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border-color);
}
.membresia-dl > div:last-child { border-bottom: none; }
.membresia-dl dt {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}
.membresia-dl dd {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
}
.membresia-dl dd code {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--bg-surface-hover-strong);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}
.membresia-amount {
    font-size: 1.05rem !important;
    color: var(--primary) !important;
}
.membresia-empty {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0.5rem 0;
    text-align: center;
    padding: 1rem 0;
}
.membresia-history-card .perfil-card-header { margin-bottom: 0.5rem; }
.membresia-payments { width: 100%; }
.membresia-payments code {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ---- Verify email page ---- */
.verify-email-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
}
.verify-email-card {
    max-width: 420px;
    text-align: center;
    padding: 2.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}
.verify-email-icon { width: 56px; height: 56px; }
.verify-email-icon--success { color: #68d391; }
.verify-email-icon--error { color: #fc8181; }
.verify-email-card h2 { margin: 0; color: var(--text-primary); }
.verify-email-card p { margin: 0; color: var(--text-secondary); }

/* ---- btn-ghost / btn-sm (common reuse) ---- */
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color-strong);
    transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn-ghost:hover { background: var(--bg-surface-hover-strong); color: var(--text-primary); border-color: rgba(255,255,255,0.15); }
.btn-sm { padding: 0.35rem 0.7rem; font-size: 0.8rem; border-radius: 7px; }

/* ── Channel detail v2 (full width, sidebar lives, carousels) ───────────── */
.channel-detail-v2.channel-detail-page {
    max-width: none;
    /* Anula por completo el padding horizontal y superior de .main-content (#app-content) */
    width: calc(100% + 3rem);
    margin: -1.5rem -1.5rem 0;
    box-sizing: border-box;
    overflow-x: clip;
}
@media (max-width: 767px) {
    .channel-detail-v2.channel-detail-page {
        width: calc(100% + 1rem);
        margin: -0.5rem -0.5rem 0;
    }
}
.channel-v2-body {
    padding: 1.25rem 1.5rem 2rem;
    box-sizing: border-box;
}
@media (max-width: 767px) {
    .channel-v2-body {
        padding: 1rem 0.5rem 1.5rem;
    }
}

.channel-v2-sticky-head {
    position: sticky;
    top: var(--topbar-h);
    z-index: 88;
    width: 100%;
    margin-bottom: 0;
}
/* Cabecera siempre opaca: sin translucidez ni backdrop-filter (anula estilos globales del canal con banner) */
.channel-detail-v2 .channel-detail-header.channel-detail-header-with-banner {
    background: var(--bg-surface-1, #14171d) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
}
.channel-detail-v2 .channel-detail-header-with-banner::before {
    display: none !important;
}
.channel-detail-v2 .channel-v2-header-inner {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.38);
    box-shadow: none;
    background: var(--bg-surface-1, #14171d);
}
.channel-detail-v2 .channel-detail-header-with-banner .channel-v2-hero,
.channel-detail-v2 .channel-v2-hero {
    padding: 1.05rem clamp(1rem, 2vw, 1.75rem);
    border-radius: 0;
    border: none;
    position: relative;
    background: var(--bg-surface-1, #14171d);
}
.channel-detail-v2 .channel-v2-hero::before,
.channel-detail-v2 .channel-detail-hero.channel-v2-hero::before {
    display: none;
}
.channel-detail-v2 .channel-detail-meta {
    color: #9ca8bc;
}
.channel-detail-v2 .channel-detail-meta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: inherit;
    text-decoration: none;
    border-radius: 6px;
    padding: 0.1rem 0.35rem 0.1rem 0.15rem;
    margin: -0.1rem -0.15rem;
    transition: color 0.15s, background 0.15s;
}
.channel-detail-v2 .channel-detail-meta-link:hover {
    color: #f4f6fb;
    background: rgba(255, 255, 255, 0.06);
}
.channel-detail-v2 .channel-detail-avatar {
    width: 58px;
    height: 58px;
    box-shadow:
        0 0 0 2px rgba(252, 32, 68, 0.28),
        0 8px 24px rgba(0, 0, 0, 0.32);
    transition: width 0.25s ease, height 0.25s ease, box-shadow 0.25s ease;
}
.channel-detail-v2 .channel-detail-avatar--live {
    box-shadow:
        0 0 0 2px #fc2044,
        0 0 0 4px rgba(252, 32, 68, 0.28),
        0 0 18px rgba(252, 32, 68, 0.42),
        0 8px 24px rgba(0, 0, 0, 0.32);
}
.channel-detail-v2 .channel-detail-title {
    font-size: clamp(1.15rem, 1.1rem + 0.4vw, 1.35rem);
    margin-bottom: 0.35rem;
    letter-spacing: -0.03em;
    color: #f4f6fb;
    transition: font-size 0.25s ease, margin 0.25s ease;
}
.channel-detail-v2 .channel-viewers-count {
    transition: font-size 0.25s ease;
}

/* ── Acciones del canal ─────────────────────────────────── */
.channel-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-self: flex-end;
    flex-shrink: 0;
    margin-left: auto;
}
.channel-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: #c8d0e0;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.3;
}
.channel-action-btn:hover {
    background: rgba(255,255,255,0.11);
    color: #fff;
    border-color: rgba(255,255,255,0.2);
}
.channel-action-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
/* Favorito activo */
.channel-action-btn[data-is-fav="1"] {
    color: #fbbf24;
    border-color: rgba(251,191,36,0.35);
    background: rgba(251,191,36,0.08);
}
.channel-action-btn[data-is-fav="1"]:hover {
    background: rgba(251,191,36,0.14);
}
/* YouTube */
.channel-action-btn--yt:hover {
    color: #ff4444;
    border-color: rgba(255,68,68,0.35);
}
/* Pendientes */
.channel-action-btn--pending {
    opacity: 0.38;
    cursor: not-allowed;
}
.channel-action-btn--pending:hover {
    background: rgba(255,255,255,0.06);
    color: #c8d0e0;
    border-color: rgba(255,255,255,0.1);
}

/* ── Mobile: strip horizontal debajo del hero ── */
@media (max-width: 767px) {
    /* Posicionado fuera del hero por JS; aquí define su estilo como strip */
    .channel-actions {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-top: 0;
        padding: 0.55rem clamp(1rem, 2vw, 1.75rem);
        gap: 0.45rem;
        background: var(--bg-surface-1, #14171d);
        border-bottom: 1px solid var(--border-color);
    }
    .channel-actions::-webkit-scrollbar { display: none; }
    .channel-action-btn {
        padding: 0.35rem 0.75rem;
        font-size: 0.8rem;
    }
    .channel-action-icon { width: 14px; height: 14px; }
}

/* ── Hero compacto al hacer scroll (solo mobile) ── */
@media (max-width: 767px) {
    .channel-v2-hero--compact {
        padding: 0.45rem 1rem !important;
        gap: 0.6rem !important;
    }
    .channel-v2-hero--compact .channel-detail-avatar {
        width: 34px !important;
        height: 34px !important;
        box-shadow: 0 0 0 1.5px rgba(252, 32, 68, 0.35) !important;
    }
    .channel-v2-hero--compact .channel-detail-avatar--live {
        box-shadow:
            0 0 0 2px #fc2044,
            0 0 0 3px rgba(252, 32, 68, 0.3),
            0 0 12px rgba(252, 32, 68, 0.4) !important;
    }
    .channel-v2-hero--compact .channel-detail-title {
        font-size: 0.95rem !important;
        margin-bottom: 0.1rem !important;
    }
    .channel-v2-hero--compact .channel-detail-badge .channel-badge-svg {
        width: 12px !important;
        height: 12px !important;
    }
    .channel-v2-hero--compact .channel-viewers-count {
        font-size: 1rem !important;
    }
    .channel-v2-hero--compact .channel-detail-meta {
        font-size: 0.78rem !important;
        gap: 0.25rem !important;
    }
    .channel-v2-hero--compact .channel-detail-flag--title {
        width: 18px !important;
        height: 13px !important;
    }
    .channel-v2-hero--compact .channel-detail-flag {
        width: 16px !important;
        height: 12px !important;
    }
}
.channel-v2-sticky-head::after {
    content: none;
    display: none;
}
.channel-detail-v2 .channel-v2-sticky-head {
    border-bottom: 1px solid rgba(0, 0, 0, 0.38);
}
#section-espectadores {
    scroll-margin-top: calc(var(--topbar-h) + 72px);
}

.channel-detail-v2 .channel-stats-bar {
    gap: 0.75rem;
    margin-bottom: 1.35rem;
}
.channel-detail-v2 .channel-stats-bar .channel-stat-card {
    background: var(--bg-surface-2, #1a1e26);
    border: 1px solid var(--border-color);
    border-radius: var(--ui-surface-radius, 14px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}
.channel-detail-v2 .channel-stats-bar .channel-stat-card::before {
    display: block;
    opacity: 0.75;
}
.channel-detail-v2 .channel-stats-bar a.channel-stat-card--link:hover,
.channel-detail-v2 .channel-stats-bar button.channel-stat-card--peak:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.12);
    background: var(--bg-surface-2, #1a1e26);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.28);
    transform: none;
}
.channel-detail-v2 .channel-stats-bar .channel-stat-extra,
.channel-detail-v2 .channel-stats-bar .channel-stat-peak-date {
    font-size: 0.82rem;
}
.channel-detail-v2 .channel-stats-bar .channel-stat-vs-prev {
    font-size: 0.78rem;
}
.channel-detail-v2 .channel-stats-bar .channel-stat-card--peak .channel-stat-label {
    color: #718096;
}
.channel-detail-v2 .channel-stats-bar .channel-stat-card--peak .channel-stat-value {
    color: #e4e6eb;
    text-shadow: none;
}
.channel-detail-v2 .channel-stats-bar .channel-stat-card--peak .channel-stat-hint,
.channel-detail-v2 .channel-stats-bar .channel-stat-card--peak .channel-stat-peak-date {
    color: #718096;
    opacity: 1;
}
/* Vista on-demand youtube_daily (vistas / subs / videos) */
.channel-youtube-diario-page .channel-yt-diario-head {
    margin-bottom: 1.25rem;
}
.channel-yt-diario-back {
    display: inline-block;
    font-size: 0.88rem;
    color: #a0aec0;
    text-decoration: none;
    margin-bottom: 0.75rem;
}
.channel-yt-diario-back:hover { color: #e4e6eb; }
.channel-yt-diario-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.channel-yt-diario-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
}
.channel-yt-diario-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #f0f2f7;
}
.channel-yt-diario-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: #718096;
}
.channel-yt-diario-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.channel-yt-diario-toggle {
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    color: #718096;
    background: #252830;
    border: 1px solid #3a3f4b;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.channel-yt-diario-toggle:hover {
    color: #a0aec0;
    border-color: #4a5568;
}
.channel-yt-diario-toggle.is-on {
    color: #fff;
    border-color: rgba(252, 32, 68, 0.55);
    background: linear-gradient(165deg, #2e1a22 0%, #252830 100%);
    box-shadow: 0 0 0 1px rgba(252, 32, 68, 0.12);
}
.channel-yt-diario-toggle:focus-visible {
    outline: 2px solid #fc2044;
    outline-offset: 2px;
}
.channel-yt-diario-section {
    padding-bottom: 1.5rem;
}
.channel-yt-diario-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    padding: 0 1.1rem 0.85rem;
}
.channel-yt-diario-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.72rem;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.channel-yt-diario-field input[type="date"] {
    background: #1a1d24;
    border: 1px solid #3a3f4b;
    color: #e4e6eb;
    border-radius: 8px;
    padding: 0.4rem 0.55rem;
    font-size: 0.88rem;
}
.channel-yt-diario-acumulado {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: #a0aec0;
    cursor: pointer;
    user-select: none;
}
.channel-yt-diario-hint {
    font-size: 0.72rem;
    color: #4a5568;
    padding: 0 1.1rem 0.75rem;
    margin: 0;
}
.channel-yt-diario-chart {
    height: 320px;
    margin: 0 1.1rem;
    border-radius: 10px;
    background: #1a1d24;
    border: 1px solid #2d323e;
}
.channel-yt-diario-empty {
    padding: 1rem 1.1rem;
    text-align: center;
    color: #718096;
}
.channel-yt-diario-table-wrap {
    margin: 1rem 1.1rem 0;
    max-height: 280px;
    overflow: auto;
    border: 1px solid #2d323e;
    border-radius: 10px;
}
.channel-yt-diario-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.channel-yt-diario-table th,
.channel-yt-diario-table td {
    padding: 0.45rem 0.65rem;
    text-align: left;
    border-bottom: 1px solid #2d323e;
}
.channel-yt-diario-table th {
    background: #252830;
    color: #a0aec0;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}
.channel-yt-diario-table td { color: #e4e6eb; }

/* Exportar espectadores */
.channel-export-page .channel-v2-body {
    max-width: 1100px;
    margin: 0 auto;
}
.channel-export-head {
    margin-bottom: 1.25rem;
}
.channel-export-back {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #718096;
    text-decoration: none;
}
.channel-export-back:hover { color: var(--primary, #fc2044); }
.channel-export-hero {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.channel-export-avatar {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}
.channel-export-title {
    margin: 0 0 0.2rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #e4e6eb);
}
.channel-export-subtitle {
    margin: 0;
    font-size: 0.82rem;
    color: #718096;
}
.channel-export-summary {
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
    overflow: visible;
}
.channel-export-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}
.channel-export-stat {
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.06);
    min-width: 0;
}
.channel-export-stat--accent {
    border-color: rgba(252, 32, 68, 0.35);
    background: rgba(252, 32, 68, 0.08);
}
.channel-export-stat--jump {
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.channel-export-stat--jump:hover {
    border-color: rgba(252, 32, 68, 0.55);
    background: rgba(252, 32, 68, 0.14);
    box-shadow: 0 2px 12px rgba(252, 32, 68, 0.12);
}
.channel-export-stat--jump:focus-visible {
    outline: 2px solid rgba(252, 32, 68, 0.55);
    outline-offset: 2px;
}
.channel-export-stat-label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #718096;
    margin-bottom: 0.2rem;
}
.channel-export-stat-value {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    color: #e4e6eb;
    line-height: 1.1;
}
.channel-export-stat-value--sm {
    font-size: 0.92rem;
    font-weight: 600;
}
.channel-export-stat-hint {
    display: block;
    font-size: 0.68rem;
    color: #718096;
    margin-top: 0.15rem;
}
.channel-export-stat--accent .channel-export-stat-hint--when {
    font-size: 0.72rem;
    color: #f0aab8;
    margin-top: 0.25rem;
    font-weight: 500;
}
.channel-export-stat--period {
    min-width: 0;
}
.channel-export-period-form {
    margin-top: 0.15rem;
}
.channel-export-period-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.65rem 0.85rem;
}
.channel-export-range {
    margin: 0;
}
.channel-export-range label {
    font-size: 0.72rem;
    color: #718096;
}
.channel-export-range .custom-select {
    min-width: 10.5rem;
}
.channel-export-stat--period .channel-export-range .custom-select {
    width: 100%;
    min-width: 0;
}
.channel-export-stat--period:has(.custom-select.open) {
    position: relative;
    z-index: 30;
}
.channel-export-range .custom-select.open {
    z-index: 40;
}
.channel-export-range .custom-select-dropdown {
    z-index: 50;
}
.channel-export-custom-range {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
}
.channel-export-custom-range label {
    font-size: 0.72rem;
    color: #718096;
}
.channel-export-date-input {
    padding: 0.38rem 0.5rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.22);
    color: #e4e6eb;
    font-size: 0.82rem;
    font-family: inherit;
}
.channel-export-date-input:focus {
    outline: none;
    border-color: rgba(252, 32, 68, 0.45);
    box-shadow: 0 0 0 2px rgba(252, 32, 68, 0.15);
}
.channel-export-period-hint {
    margin: 0.55rem 0 0;
    font-size: 0.78rem;
    color: #718096;
    line-height: 1.35;
}
.channel-export-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}
.channel-export-day-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.channel-export-day-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.22);
    color: #c8d0e0;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
a.channel-export-day-btn:hover {
    background: rgba(252, 32, 68, 0.12);
    border-color: rgba(252, 32, 68, 0.35);
    color: #f0f2f8;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
a.channel-export-day-btn:focus-visible {
    outline: 2px solid rgba(252, 32, 68, 0.55);
    outline-offset: 2px;
}
.channel-export-day-current {
    font-size: 0.85rem;
    font-weight: 600;
    color: #a0aec0;
    padding: 0 0.35rem;
}
.channel-export-day-btn.is-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
    color: #718096;
    border-color: rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.12);
}
.channel-export-table-section {
    margin-bottom: 2rem;
}
.channel-export-empty {
    padding: 1rem 1.15rem;
    margin: 0;
}
.channel-export-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-height: min(70vh, 720px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #3a3f4b transparent;
}
.channel-export-table-wrap::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
.channel-export-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}
.channel-export-table-wrap::-webkit-scrollbar-thumb {
    background: #3a3f4b;
    border-radius: 999px;
}
.channel-export-table-wrap::-webkit-scrollbar-thumb:hover {
    background: #4f5668;
}
.channel-export-table-wrap::-webkit-scrollbar-corner {
    background: transparent;
}
.channel-export-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.channel-export-table th,
.channel-export-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
    white-space: nowrap;
}
.channel-export-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-surface-2, #1a1e26);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #718096;
    font-weight: 600;
}
.channel-export-table td { color: #e4e6eb; }
.channel-export-num {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.channel-export-row--peak {
    background: rgba(252, 32, 68, 0.1);
}
.channel-export-row--peak td {
    color: #fff;
    font-weight: 600;
}
.channel-export-row--flash {
    animation: channel-export-peak-flash 1.1s ease;
}
@keyframes channel-export-peak-flash {
    0%, 100% { background: rgba(252, 32, 68, 0.1); }
    45% { background: rgba(252, 32, 68, 0.32); }
}
.channel-export-row--zero {
    opacity: 0.45;
}
.channel-export-pct-cell {
    min-width: 140px;
}
.channel-export-pct-bar-wrap {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.2rem;
}
.channel-export-pct-bar {
    height: 100%;
    background: linear-gradient(90deg, rgba(252, 32, 68, 0.55), var(--primary, #fc2044));
    border-radius: 999px;
    min-width: 0;
}
.channel-export-pct-label {
    font-size: 0.72rem;
    color: #718096;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
    .channel-export-summary-grid {
        grid-template-columns: 1fr;
    }
    .channel-export-period-row {
        flex-direction: column;
        align-items: stretch;
    }
    .channel-export-range .custom-select {
        width: 100%;
        min-width: 0;
    }
    .channel-export-custom-range {
        flex-direction: column;
        align-items: stretch;
    }
    .channel-export-date-input {
        width: 100%;
    }
    .channel-export-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .channel-export-day-nav {
        justify-content: space-between;
        width: 100%;
    }
    .channel-export-csv-btn {
        width: 100%;
        text-align: center;
    }
}

.channel-v2-main-row {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "top"
        "sidebar"
        "bottom";
    gap: 1rem;
    align-items: start;
    margin-bottom: 1.25rem;
}
.channel-v2-primary-top    { grid-area: top; }
.channel-v2-primary-bottom { grid-area: bottom; }
.channel-v2-sidebar        { grid-area: sidebar; }

/* Sin vivos recientes: ocultar gráfico + sidebar; métricas on-demand siguen visibles */
.channel-v2-main-row--no-live .channel-v2-primary-top,
.channel-v2-main-row--no-live .channel-v2-sidebar {
    display: none !important;
}
@media (min-width: 1100px) {
    .channel-v2-main-row--no-live {
        grid-template-columns: 1fr;
        grid-template-areas: "bottom";
    }
}

/* ~70% espectadores / ~30% lives en anchos grandes (fr escala con el contenedor) */
@media (min-width: 1100px) {
    .channel-v2-main-row {
        grid-template-columns: minmax(0, 7fr) minmax(300px, 3fr);
        grid-template-areas:
            "top    sidebar"
            "bottom sidebar";
        gap: clamp(1rem, 2vw, 1.75rem);
        align-items: stretch;
    }
}
@media (min-width: 1600px) {
    .channel-v2-main-row {
        gap: 2rem;
    }
}

.channel-detail-v2 #section-espectadores.channel-section {
    border-radius: var(--ui-surface-radius, 14px);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    background: var(--bg-surface-2, #1a1e26);
}
.channel-detail-v2 #section-espectadores .chart-espectadores-block {
    border: none;
    border-radius: 0;
    background: transparent;
}
.channel-detail-v2 #section-espectadores .channel-section-topbar h2 {
    font-size: clamp(1rem, 0.92rem + 0.35vw, 1.18rem);
    color: #e8ecf4;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.channel-detail-v2 .echarts-espectadores {
    height: clamp(280px, 32vh, 360px);
}

.channel-v2-sidebar {
    overflow: hidden;
    background: var(--bg-surface-2, #1a1e26);
    border: 1px solid var(--border-color);
    border-radius: var(--ui-surface-radius, 14px);
    padding: 0;
    max-height: min(960px, calc(100vh - 96px));
    position: sticky;
    top: calc(var(--topbar-h) + 6px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}
.channel-v2-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--ui-surface-glow);
    opacity: 0.85;
}
.channel-v2-sidebar > * { position: relative; z-index: 1; }

.channel-v2-prog-details {
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    margin: 0;
}
.channel-v2-prog-summary {
    list-style: none;
    cursor: pointer;
    padding: 0;
    user-select: none;
}
.channel-v2-prog-summary::-webkit-details-marker {
    display: none;
}
.channel-v2-prog-summary-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.15rem 0.35rem;
}
.channel-v2-prog-title {
    margin: 0;
    font-size: clamp(1.05rem, 1vw + 0.85rem, 1.2rem);
    color: #f0f2f8;
    font-weight: 800;
    letter-spacing: -0.03em;
}
.channel-v2-prog-date {
    display: block;
    margin-top: 0.15rem;
}
.channel-v2-prog-chevron {
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid #9fb0c8;
    border-bottom: 2px solid #9fb0c8;
    transform: rotate(45deg);
    flex-shrink: 0;
    margin: 0.35rem 0.15rem 0 0;
    transition: transform 0.2s ease;
}
.channel-v2-prog-details[open] .channel-v2-prog-chevron {
    transform: rotate(-135deg);
    margin-top: 0.55rem;
}
.channel-v2-prog-preview {
    padding: 0 1.15rem 0.85rem;
}
.channel-v2-prog-preview-line {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #d5dce8;
}
.channel-v2-prog-preview-line:first-child {
    margin-top: 0;
}
.channel-v2-prog-k {
    color: #fbbf24;
    font-weight: 700;
}
.channel-v2-prog-dim {
    color: #8b9cb5;
    font-weight: 500;
}
.channel-v2-prog-expanded {
    padding: 0 0.85rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.12);
    max-height: 400px;
    overflow-y: auto;
}
.channel-v2-prog-expanded::-webkit-scrollbar { width: 5px; }
.channel-v2-prog-expanded::-webkit-scrollbar-track { background: #1a1d23; }
.channel-v2-prog-expanded::-webkit-scrollbar-thumb { background: #3a3f4b; border-radius: 3px; }
.channel-v2-prog-expanded-hint {
    margin: 0.65rem 0 0.5rem;
    font-size: 0.72rem;
    line-height: 1.4;
    color: #7a8ca4;
}
.channel-v2-prog-expanded-hint code {
    font-size: 0.68rem;
    color: #9fb0c8;
}
.channel-v2-prog-slot-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.channel-v2-prog-slot {
    border-radius: 10px;
    padding: 0.6rem 0.7rem;
    margin-bottom: 0.45rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.channel-v2-prog-slot:last-child {
    margin-bottom: 0;
}
.channel-v2-prog-slot--pasado {
    opacity: 0.62;
}
.channel-v2-prog-slot--actual {
    border-color: rgba(252, 32, 68, 0.45);
    background: linear-gradient(135deg, rgba(252, 32, 68, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
    box-shadow: 0 0 0 1px rgba(252, 32, 68, 0.08);
}
.channel-v2-prog-slot-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}
.channel-v2-prog-slot-time {
    font-size: 0.78rem;
    font-weight: 700;
    color: #93c5fd;
    letter-spacing: 0.02em;
}
.channel-v2-prog-slot-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.06);
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
}
.channel-v2-prog-slot-badge--now {
    color: #fecdd3;
    background: rgba(252, 32, 68, 0.35);
}
.channel-v2-prog-slot-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.35;
}
.channel-v2-prog-slot-metrics {
    margin-top: 0.35rem;
    font-size: 0.74rem;
    color: #a8b8d0;
}
.channel-v2-prog-slot-sep {
    opacity: 0.5;
    margin: 0 0.15rem;
}
.channel-v2-prog-slot-fuente {
    color: #7dd3fc;
    font-weight: 600;
}
.channel-v2-sidebar-head {
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(252, 32, 68, 0.07) 0%, transparent 100%);
}
.channel-v2-sidebar-head h2 {
    margin: 0;
    font-size: clamp(1.05rem, 1vw + 0.85rem, 1.2rem);
    color: #f0f2f8;
    font-weight: 800;
    letter-spacing: -0.03em;
}
/* Sidebar tabs */
.sidebar-tabs {
    display: flex;
    gap: 4px;
}
.sidebar-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: #7a8fb0;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.45rem 0.4rem;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    letter-spacing: 0.01em;
}
.sidebar-tab:hover {
    color: #c8d4ec;
    background: rgba(255,255,255,0.06);
}
.sidebar-tab--active {
    color: #f0f2f8;
    background: rgba(255,255,255,0.1);
}
.sidebar-panel-hidden {
    display: none !important;
}
.channel-v2-sidebar-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 0 0 auto;
    height: auto;
}
.channel-v2-sidebar-more-btn {
    flex-shrink: 0;
    width: 100%;
    margin: 0;
    padding: 0.65rem 0.85rem 0.75rem;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(252, 32, 68, 0.08);
    color: var(--primary, #fc2044);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.channel-v2-sidebar-more-btn:hover {
    background: rgba(252, 32, 68, 0.14);
    color: #ff4d6d;
}
.channel-v2-sidebar-more-btn[hidden] {
    display: none !important;
}
.channel-v2-sidebar-panel > .channel-empty {
    padding: 0 0.85rem 0.85rem;
    margin: 0;
}
/* Títulos list */
.titulo-card {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.titulo-card:last-child { border-bottom: none; }
.titulo-card--link {
    text-decoration: none;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.12s;
}
.titulo-card--link:hover { background: rgba(255,255,255,0.05); }
.titulo-thumb {
    width: 80px;
    height: 45px;
    object-fit: cover;
    border-radius: 5px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
}
.titulo-body { flex: 1; min-width: 0; }
.titulo-texto {
    font-size: 0.8rem;
    color: #d0daf0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.titulo-meta {
    font-size: 0.71rem;
    color: #7a8fb0;
    margin-top: 0.2rem;
}
/* Notas list */
.nota-sidebar-card {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.55rem 0.1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.12s;
}
.nota-sidebar-card:last-child { border-bottom: none; }
.nota-sidebar-card:hover { background: rgba(255,255,255,0.05); }
.nota-sidebar-titulo {
    font-size: 0.8rem;
    color: #d0daf0;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nota-sidebar-meta {
    font-size: 0.7rem;
    color: #7a8fb0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.nota-sidebar-badge {
    font-size: 0.66rem;
    padding: 0.1rem 0.45rem;
    border-radius: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.nota-sidebar-badge--global { background: rgba(99,102,241,0.18); color: #a5b4fc; }
.nota-sidebar-badge--equipo { background: rgba(52,211,153,0.18); color: #6ee7b7; }
.nota-sidebar-badge--propia { background: rgba(255,255,255,0.08); color: #94a3b8; }
.channel-v2-sidebar-hint {
    font-size: 0.78rem;
    color: #90a0b8;
}
.channel-v2-lives-scroll {
    overflow-y: auto;
    padding: 0.75rem 0.85rem 1rem;
    flex: 1;
    min-height: 0;
}
.channel-v2-lives-scroll::-webkit-scrollbar { width: 5px; }
.channel-v2-lives-scroll::-webkit-scrollbar-track { background: #1a1d23; }
.channel-v2-lives-scroll::-webkit-scrollbar-thumb { background: #3a3f4b; border-radius: 3px; }

.channel-v2-compare-teaser {
    display: block;
    flex-shrink: 0;
    margin: 0;
    padding: 0.95rem 1rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.04) 0%, rgba(252, 32, 68, 0.04) 100%);
    text-decoration: none;
    color: inherit;
    transition: background 0.18s var(--ease);
}
.channel-v2-compare-teaser:hover {
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.08) 0%, rgba(252, 32, 68, 0.08) 100%);
}
.channel-v2-compare-teaser-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.channel-v2-compare-teaser-kicker {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}
.channel-v2-compare-teaser-meta {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
}
.channel-v2-compare-teaser-versus {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 0.45rem;
}
.channel-v2-compare-teaser-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    text-align: center;
}
.channel-v2-compare-teaser-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    box-sizing: border-box;
    flex-shrink: 0;
}
.channel-v2-compare-teaser-side--a .channel-v2-compare-teaser-avatar {
    border: 2px solid #fc2044;
}
.channel-v2-compare-teaser-side--b .channel-v2-compare-teaser-avatar {
    border: 2px solid #38bdf8;
}
.channel-v2-compare-teaser-name {
    font-size: 0.76rem;
    font-weight: 600;
    color: #e2e8f0;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.channel-v2-compare-teaser-stat {
    font-size: 0.72rem;
    color: #94a3b8;
}
.channel-v2-compare-teaser-stat strong {
    color: #f8fafc;
    font-weight: 800;
}
.channel-v2-compare-teaser-vs {
    align-self: center;
    margin-top: 0.35rem;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.62rem;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.03em;
}
.channel-v2-compare-teaser-cta {
    display: block;
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 0.78rem;
    font-weight: 700;
    color: #38bdf8;
    text-align: center;
}
.channel-v2-compare-teaser:hover .channel-v2-compare-teaser-cta {
    color: #7dd3fc;
}

.channel-v2-live-card {
    margin-bottom: 0.65rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.channel-v2-live-thumb-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    opacity: 0;
    transition: opacity 0.22s ease, background 0.22s ease;
    z-index: 3;
    pointer-events: none;
    border-radius: 8px;
}
.channel-v2-live-link:hover .channel-v2-live-thumb-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0.58);
}
.channel-v2-live-thumb-overlay-text {
    color: #f8fafc;
    font-weight: 700;
    font-size: 0.82rem;
    text-align: center;
    padding: 0 0.5rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}
/* Detalle de un vivo */
.channel-live-detail-page .channel-live-chart {
    height: 380px;
    min-height: 260px;
}
/* Two-column layout: page + titles sidebar (siblings in app-content) */
.live-detail-outer {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}
.live-detail-outer .channel-live-detail-page {
    flex: 1 1 0;
    min-width: 0;
}
.live-detail-sidebar {
    flex: 1 0 280px;
    max-width: clamp(280px, 28vw, 380px);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: min(calc(100vh - 88px), 680px);
    max-height: calc(100vh - 88px);
    position: sticky;
    top: 72px;
    margin-top: 2.6rem;
    min-width: 0;
}
.live-sidebar-panel {
    background: #1e2028;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 140px;
    overflow: hidden;
}
.live-sidebar-head {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.live-sidebar-head--titulos {
    background: linear-gradient(180deg, rgba(99,102,241,0.07) 0%, transparent 100%);
}
.live-sidebar-head--notas {
    background: linear-gradient(180deg, rgba(52,211,153,0.08) 0%, transparent 100%);
}
.live-sidebar-head h2 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.live-sidebar-head--titulos h2 { color: #c7d2fe; }
.live-sidebar-head--notas h2 { color: #a7f3d0; }
.live-sidebar-scroll {
    overflow-y: auto;
    padding: 0.6rem 0.75rem 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #3a3f4b transparent;
}
.live-sidebar-scroll::-webkit-scrollbar { width: 4px; }
.live-sidebar-scroll::-webkit-scrollbar-thumb { background: #3a3f4b; border-radius: 3px; }

.live-nota-card {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.65rem 0.55rem;
    margin: 0;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.12s;
    font: inherit;
}
.live-nota-card:last-child { border-bottom: none; }
.live-nota-card:hover { background: rgba(255,255,255,0.05); }
.live-nota-titulo {
    font-size: 0.82rem;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1.35;
    margin-bottom: 0.35rem;
}
.live-nota-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.3rem;
}
.live-nota-autor {
    font-size: 0.7rem;
    color: #94a3b8;
}
.live-nota-periodo {
    font-size: 0.7rem;
    color: #7dd3fc;
    margin-bottom: 0.35rem;
    line-height: 1.35;
}
.live-nota-desc {
    margin: 0;
    font-size: 0.76rem;
    color: #cbd5e1;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Legacy aliases (titulos sidebar) */
.live-detail-titulos-sidebar {
    flex: 1 0 260px;
    max-width: clamp(260px, 28vw, 360px);
    background: #1e2028;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    position: sticky;
    top: 72px;
    overflow: hidden;
    margin-top: 2.6rem;
}
.live-titulos-head {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(99,102,241,0.07) 0%, transparent 100%);
}
.live-titulos-head h2 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #c7d2fe;
    letter-spacing: -0.01em;
}
.live-titulos-scroll {
    overflow-y: auto;
    padding: 0.6rem 0.75rem 0.75rem;
    flex: 1;
}
@media (max-width: 900px) {
    .live-detail-outer { flex-direction: column; }
    .live-detail-sidebar {
        flex: none;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        position: static;
        margin-top: 0;
    }
    .live-sidebar-panel {
        flex: none;
        min-height: 0;
        max-height: 280px;
    }
    .live-detail-titulos-sidebar { flex: none; width: 100%; max-width: 100%; max-height: 320px; position: static; margin-top: 0; }
}
.channel-live-detail-hero {
    margin-bottom: 0.5rem;
}
.channel-live-detail-card {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-items: flex-start;
}
.channel-live-detail-thumb-link {
    flex-shrink: 0;
    text-decoration: none;
}
.channel-live-detail-thumb {
    position: relative;
    width: 280px;
    max-width: 100%;
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;
    background: #14171d;
}
.channel-live-detail-thumb-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #718096;
}
.channel-live-detail-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.channel-live-detail-info {
    flex: 1;
    min-width: 200px;
}
.channel-live-detail-title {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: #f0f2f8;
    letter-spacing: -0.03em;
}
.channel-live-detail-meta {
    font-size: 0.88rem;
    color: #a0aec0;
    margin-bottom: 0.4rem;
}
.channel-live-badge-en-vivo {
    color: #4ade80;
    font-weight: 600;
}
.channel-live-detail-duracion {
    margin: 0 0 0.85rem;
    font-size: 0.9rem;
    color: #c5cad6;
    line-height: 1.45;
}
.channel-live-detail-yt-btn {
    display: inline-block;
    padding: 0.45rem 1rem;
    border-radius: 8px;
    font-size: 0.88rem;
}
.channel-live-detail-chart-title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: #d8dce6;
}

.channel-live-programacion-panel {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid #2d3f4f;
    background: linear-gradient(165deg, rgba(14, 165, 233, 0.06), rgba(30, 34, 41, 0.92));
}
.channel-live-programacion-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.channel-live-programacion-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #e2e8f0;
}
.channel-live-programacion-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.82rem;
    color: #a0aec0;
    user-select: none;
}
.channel-live-programacion-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.channel-live-programacion-toggle-ui {
    width: 38px;
    height: 20px;
    border-radius: 999px;
    background: #2d323e;
    border: 1px solid #3a4555;
    position: relative;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.channel-live-programacion-toggle-ui::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #94a3b8;
    transition: transform 0.15s ease, background 0.15s ease;
}
.channel-live-programacion-toggle input:checked + .channel-live-programacion-toggle-ui {
    background: rgba(56, 189, 248, 0.25);
    border-color: rgba(56, 189, 248, 0.55);
}
.channel-live-programacion-toggle input:checked + .channel-live-programacion-toggle-ui::after {
    transform: translateX(16px);
    background: #38bdf8;
}
.channel-live-programacion-toggle input:disabled + .channel-live-programacion-toggle-ui {
    opacity: 0.45;
    cursor: not-allowed;
}
.channel-live-programacion-toggle input:focus-visible + .channel-live-programacion-toggle-ui {
    outline: 2px solid rgba(56, 189, 248, 0.65);
    outline-offset: 2px;
}
.channel-live-programacion-hint {
    margin: 0 0 0.65rem;
    font-size: 0.72rem;
    color: #718096;
    line-height: 1.35;
}
.channel-live-programacion-body {
    font-size: 0.88rem;
    color: #c5cad6;
    line-height: 1.5;
}
.channel-live-programacion-line {
    margin: 0.35rem 0 0;
}
.channel-live-programacion-line:first-child {
    margin-top: 0;
}

.channel-live-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 640px) {
    .channel-live-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Tabla detalle vivo: cabecera fija al hacer scroll */
.channel-live-detail-table-wrap {
    max-height: min(70vh, 560px);
    overflow: auto;
    border-radius: 8px;
    border: 1px solid #2d323e;
    background: #1e2229;
}
.channel-live-detail-table-wrap .data-table {
    margin: 0;
}
.channel-live-detail-table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #252830;
    box-shadow: 0 1px 0 #3a3f4b;
}
.channel-v2-live-card--now {
    border: 1px solid rgba(252, 32, 68, 0.45);
    border-radius: 10px;
    padding: 0.5rem;
    background: rgba(252, 32, 68, 0.08);
}
.channel-v2-live-link {
    display: flex;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
}
.channel-v2-live-thumb {
    width: 128px;
    min-width: 128px;
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 8px;
    background: #14171d;
}
.channel-v2-live-thumb .channel-live-thumb-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #718096;
}
.channel-v2-live-thumb .channel-live-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (min-width: 1100px) {
    .channel-v2-live-thumb {
        width: 100%;
        max-width: 168px;
        min-width: 0;
    }
}
@media (min-width: 1440px) {
    .channel-v2-live-thumb {
        max-width: 200px;
    }
}
.channel-v2-live-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.channel-v2-live-body .channel-live-titulo--clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    line-height: 1.35;
}
.channel-live-viewers-live {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary);
}
.channel-live-viewers-record {
    font-size: 0.82rem;
    font-weight: 600;
    color: #a0aec0;
}

.channel-v2-metrics-section-title {
    margin: 1.5rem 0 0.85rem;
    font-size: 1.08rem;
    font-weight: 700;
    color: #d8dce6;
    letter-spacing: -0.02em;
}
.channel-v2-metrics-stack {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.channel-v2-metric-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.channel-v2-metric-topbar h2,
.channel-v2-metric-title-link h2 {
    margin: 0;
    font-size: 1rem;
    color: #c8ceda;
    font-weight: 600;
}
.channel-v2-metric-title-link {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    padding: 0.12rem 0.4rem 0.12rem 0.15rem;
    margin-left: -0.15rem;
    max-width: 100%;
    transition: background 0.15s ease, color 0.15s ease;
}
.channel-v2-metric-title-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #e8ecf4;
}
.channel-v2-metric-title-link:hover h2 {
    color: #fff;
}
.channel-v2-metric-title-chevron {
    font-size: 1.45rem;
    font-weight: 300;
    line-height: 1;
    color: #718096;
    margin-top: -0.05em;
    transition: transform 0.15s ease, color 0.15s ease;
}
.channel-v2-metric-title-link:hover .channel-v2-metric-title-chevron {
    color: #fc2044;
    transform: translateX(3px);
}
.channel-v2-metric-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.channel-diario-acumulado-toggle {
    flex-shrink: 0;
}
.channel-acumulado-toggle--inline {
    font-size: 0.78rem;
    gap: 0.5rem;
    padding: 0.38rem 0.75rem 0.38rem 0.5rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #363d4d 0%, #282e3a 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 8px rgba(0, 0, 0, 0.25);
    color: #d4dae8;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
}
.channel-acumulado-toggle--inline:hover {
    border-color: rgba(255, 255, 255, 0.22);
    color: #f0f4fc;
}
.channel-acumulado-toggle--inline[aria-checked="true"] {
    background: linear-gradient(180deg, rgba(252, 32, 68, 0.45) 0%, rgba(252, 32, 68, 0.12) 100%);
    border-color: rgba(252, 32, 68, 0.65);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(252, 32, 68, 0.2), 0 4px 16px rgba(252, 32, 68, 0.15);
}
.channel-acumulado-toggle--inline .channel-acumulado-switch {
    width: 36px;
    height: 20px;
    border: 1px solid rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.channel-acumulado-toggle--inline[aria-checked="true"] .channel-acumulado-switch {
    background: rgba(20, 22, 28, 0.55);
    border-color: rgba(255, 255, 255, 0.12);
}
.channel-acumulado-toggle--inline .channel-acumulado-switch::after {
    width: 16px;
    height: 16px;
    top: 2px;
    left: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.channel-acumulado-toggle--inline .channel-acumulado-switch.active::after {
    transform: translateX(16px);
}
.channel-v2-metric-panel {
    margin-bottom: 0 !important;
    position: relative;
    overflow: hidden;
    background: var(--bg-surface-2, #1a1e26) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    border-radius: var(--ui-surface-radius, 14px) !important;
}
.channel-v2-metric-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--ui-surface-glow);
    opacity: 0.75;
}
.channel-v2-metric-panel > * { position: relative; z-index: 1; }
.channel-detail-v2 .channel-v2-metric-panel + .channel-v2-metric-panel {
    margin-top: 0.25rem;
}
.channel-detail-v2 .channel-v2-metric-panel .channel-period-highlight {
    margin-bottom: 0.5rem;
    padding: 0.55rem 0.85rem;
}
.channel-detail-v2 .channel-v2-metric-panel .channel-period-highlight.channel-period-highlight--vids {
    border-left: 4px solid #fc2044;
}
.channel-detail-v2 .channel-v2-metric-panel .daily-table-wrap {
    max-height: 260px;
    overflow-x: auto;
    overflow-y: auto;
    scroll-behavior: smooth;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.15);
}
.channel-detail-v2 .channel-v2-metric-panel .daily-table-wrap::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.channel-detail-v2 .channel-v2-metric-panel .daily-table-wrap::-webkit-scrollbar-thumb {
    background: #3a3f4b;
    border-radius: 3px;
}
.echarts-diario--compact {
    height: 240px;
    padding: 0 0.45rem !important;
}

.channel-v2-carousel-block .channel-section-header {
    margin-bottom: 0.85rem;
}

/* Sin transmisiones recientes */
.channel-v2-no-streams {
    margin: 0 0 1.25rem;
    padding: 0.65rem 0.9rem;
    font-size: 0.82rem;
    color: var(--text-muted, #9ca3af);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    text-align: center;
}

/* Videos / Shorts — toolbar inline */
.channel-v2-media-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    position: relative;
    z-index: 4;
}
.channel-v2-media-block > .channel-v2-media-carousel-wrap,
.channel-v2-media-block > .channel-v2-media-expanded {
    position: relative;
    z-index: 1;
}
.channel-v2-media-filter.custom-select.open {
    z-index: 1050;
}
.channel-v2-media-filter .custom-select-dropdown {
    z-index: 1050;
}
.channel-v2-media-toolbar-main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    min-width: 0;
}
.channel-v2-media-title {
    margin: 0;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
    font-weight: 700;
    color: var(--text-primary, #e8ecf4);
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.channel-v2-media-filter {
    min-width: 0;
}
.channel-v2-media-filter .custom-select-trigger {
    min-width: 11.5rem;
    font-size: 0.82rem;
}
.channel-v2-media-more {
    margin-left: auto;
    padding: 0;
    border: none;
    background: none;
    color: var(--primary, #fc2044);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-align: right;
    white-space: nowrap;
    transition: color 0.15s ease, opacity 0.15s ease;
}
.channel-v2-media-more:hover {
    color: #ff4d6d;
    text-decoration: underline;
}

/* Carrusel horizontal con scroll custom */
.channel-v2-media-carousel-wrap {
    margin: 0 -0.15rem;
    padding-bottom: 0.35rem;
}
.channel-v2-hscroll {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #3a3f4b #1a1d23;
    padding-bottom: 0.45rem;
}
.channel-v2-hscroll::-webkit-scrollbar {
    height: 5px;
}
.channel-v2-hscroll::-webkit-scrollbar-track {
    background: #1a1d23;
    border-radius: 3px;
}
.channel-v2-hscroll::-webkit-scrollbar-thumb {
    background: #3a3f4b;
    border-radius: 3px;
}
.channel-detail-v2 .media-carousel.channel-v2-hscroll {
    scrollbar-color: #3a3f4b #1a1d23;
}
.channel-v2-media-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.85rem;
    padding: 0.2rem 0.25rem 0.35rem;
    min-height: min-content;
}
.channel-v2-media-track .channel-v2-media-card {
    flex: 0 0 196px;
    scroll-snap-align: start;
}
.channel-v2-media-track--shorts .channel-v2-media-card {
    flex: 0 0 132px;
}

.channel-detail-v2 .channel-v2-media-card {
    background: var(--bg-surface-2, #1a1e26);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.18s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.channel-detail-v2 .channel-v2-media-card:hover {
    border-color: rgba(252, 32, 68, 0.45);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
.channel-detail-v2 .channel-v2-media-card .media-info {
    padding: 0.65rem 0.7rem 0.75rem;
    gap: 0.2rem;
}
.channel-detail-v2 .channel-v2-media-card .media-titulo {
    font-size: 0.84rem;
    line-height: 1.35;
    -webkit-line-clamp: 2;
}
.channel-detail-v2 .media-time-ago {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.74rem;
    color: var(--text-muted, #9ca3af);
    font-weight: 500;
}

/* Listado ampliado (hasta 100) */
.channel-v2-media-expanded {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.channel-v2-media-expanded-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.channel-v2-media-expanded-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary, #e8ecf4);
}
.channel-v2-media-expanded-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary, #9ca3af);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.channel-v2-media-expanded-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #e8ecf4);
    border-color: rgba(255, 255, 255, 0.12);
}
.channel-v2-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 0.85rem;
}
.channel-v2-media-grid--shorts {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.channel-v2-media-loading {
    margin: 0;
    padding: 1rem 0;
    font-size: 0.85rem;
    color: var(--text-muted, #9ca3af);
    grid-column: 1 / -1;
}

@media (max-width: 767px) {
    .channel-v2-media-toolbar {
        align-items: flex-start;
    }
    .channel-v2-media-more {
        margin-left: 0;
        text-align: left;
        white-space: normal;
    }
    .channel-v2-media-track .channel-v2-media-card {
        flex-basis: 168px;
    }
    .channel-v2-media-track--shorts .channel-v2-media-card {
        flex-basis: 118px;
    }
}

.media-carousel-outer {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.media-carousel {
    flex: 1;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.media-carousel-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    padding: 0.25rem 0;
    min-height: min-content;
}
.media-carousel-track.media-grid {
    display: flex;
}
.media-carousel-track .media-card {
    flex: 0 0 168px;
    scroll-snap-align: start;
}
.media-carousel--shorts .media-carousel-track .media-card {
    flex: 0 0 150px;
}
.media-carousel-btn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    background: var(--bg-surface-2, #1a1e26);
    border: 1px solid var(--border-color);
    color: #a0aec0;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.media-carousel-btn:hover {
    background: #2d323e;
    border-color: #4a5568;
    color: #e4e6eb;
}

.channel-stat-card--peak {
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    width: auto;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.channel-stat-card--peak:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.28);
}
.channel-stat-card--peak:disabled {
    cursor: default;
    opacity: 0.85;
}

@media (min-width: 1100px) {
    .channel-v2-sidebar-panel {
        flex: 1 1 auto;
    }
    #sidebar-panel-vivos {
        height: -webkit-fill-available;
        flex: 0 1 auto;
    }
}

@media (max-width: 1099px) {
    .channel-v2-sidebar {
        position: relative;
        top: auto;
        max-height: none;
        height: auto;
        overflow: visible;
    }
    .channel-v2-sidebar-panel,
    #sidebar-panel-vivos {
        flex: 0 0 auto;
        height: auto;
        max-height: none;
    }
    .channel-v2-lives-scroll {
        max-height: 500px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: none;
        height: auto;
        min-height: 0;
    }
    .channel-v2-live-card.is-list-collapsed {
        display: none;
    }
}

/* Topbar notificaciones (campanita) */
.topbar-notif {
    position: relative;
    margin-right: 0.5rem;
}
.topbar-notif-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: #a0aec0;
    text-decoration: none;
    border: 1px solid transparent;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.topbar-notif-link:hover,
.topbar-notif.open .topbar-notif-link {
    background: #252830;
    color: #e4e6eb;
    border-color: #3a3f4b;
}
.topbar-notif-bell { font-size: 1.15rem; line-height: 1; }
.topbar-notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e85d6c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}
.topbar-notif-badge[hidden] { display: none; }

.topbar-notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(380px, calc(100vw - 1.5rem));
    max-height: min(520px, calc(100vh - var(--topbar-h, 56px) - 1.5rem));
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--bg-surface-1, #1a1d23);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
    z-index: 1200;
    overflow: hidden;
}
.topbar-notif.open .topbar-notif-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.topbar-notif-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.topbar-notif-panel-head strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}
.topbar-notif-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.55rem;
}
.topbar-notif-panel-body::-webkit-scrollbar { width: 6px; }
.topbar-notif-panel-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}
.topbar-notif-panel-loading,
.topbar-notif-panel-error {
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.topbar-notif-panel-foot {
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.55rem;
    background: rgba(255, 255, 255, 0.02);
}
.topbar-notif-panel-all {
    display: block;
    text-align: center;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #7dd3fc;
    text-decoration: none;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.topbar-notif-panel-all:hover {
    background: rgba(56, 189, 248, 0.1);
    color: #bae6fd;
}

.notif-list--panel {
    gap: 0.35rem;
}
.notif-card--compact {
    padding: 0.65rem 0.7rem;
    border-radius: 10px;
}
.notif-card--compact .notif-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}
.notif-card--compact .notif-card-title {
    font-size: 0.86rem;
}
.notif-card--compact .notif-card-text {
    font-size: 0.8rem;
    margin-top: 0.25rem;
}
.notif-card--compact .notif-card-actions {
    margin-top: 0.5rem;
}
.notif-card--compact .notif-action {
    padding: 0.35rem 0.6rem;
    font-size: 0.72rem;
}
.notif-card--unread {
    border-color: rgba(56, 189, 248, 0.22);
    background: rgba(56, 189, 248, 0.04);
}
.notif-panel-empty {
    text-align: center;
    padding: 2rem 1rem 1.75rem;
}
.notif-panel-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 0.65rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: #64748b;
}
.notif-panel-empty-title {
    margin: 0 0 0.25rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: #e2e8f0;
}
.notif-panel-empty-sub {
    margin: 0;
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.4;
}

@media (max-width: 480px) {
    .topbar-notif-panel {
        position: fixed;
        top: calc(var(--topbar-h, 56px) + 6px);
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
    }
}

/* Equipos y notificaciones (páginas) */
.equipos-page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 0 2rem;
}
.equipos-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.equipos-page-head--compact { margin-bottom: 1rem; }
.equipos-page-head .equipos-page-desc { margin-bottom: 0; }
.equipos-page-cta { flex-shrink: 0; }
.equipos-page-count {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}
.equipos-back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.85rem;
    color: #94a3b8;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s;
}
.equipos-back:hover { color: var(--primary, #fc2044); }
.equipos-inline-link {
    color: var(--primary, #fc2044);
    text-decoration: none;
    font-weight: 600;
}
.equipos-inline-link:hover { text-decoration: underline; }

.equipos-empty {
    text-align: center;
    padding: 2.5rem 1.25rem;
    border-radius: 14px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}
.equipos-empty--compact { padding: 1.75rem 1rem; }
.equipos-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 0.85rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: #64748b;
}
.equipos-empty-title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 700;
    color: #e2e8f0;
}
.equipos-empty-sub {
    margin: 0;
    font-size: 0.88rem;
    color: #94a3b8;
    line-height: 1.45;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.equipos-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}
.equipos-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1rem 1.05rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--bg-surface-1, #1a1d23);
    text-decoration: none;
    color: inherit;
    min-height: 100%;
    transition: border-color 0.18s, background 0.18s, transform 0.12s;
}
.equipos-card:hover {
    border-color: rgba(252, 32, 68, 0.28);
    background: var(--bg-surface-2, #1e2229);
    transform: translateY(-1px);
}
.equipos-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}
.equipos-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: #e4e6eb;
    line-height: 1.3;
}
.equipos-card-badge {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
}
.equipos-card-badge--admin {
    color: #fca5a5;
    background: rgba(252, 32, 68, 0.12);
    border: 1px solid rgba(252, 32, 68, 0.22);
}
.equipos-card-badge--miembro {
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.equipos-card-desc {
    margin: 0;
    font-size: 0.84rem;
    color: #94a3b8;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.equipos-card-link {
    margin-top: auto;
    padding-top: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary, #fc2044);
}

.equipos-panel {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: var(--bg-surface-1, #1a1d23);
    padding: 1rem 1.1rem 1.15rem;
    margin-bottom: 0.85rem;
}
.equipos-panel--form { max-width: 560px; }
.equipos-panel--notas {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    min-height: 280px;
}
.equipos-section-title {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #e2e8f0;
}
.equipos-subsection-title {
    margin: 1rem 0 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.equipos-input,
.equipos-form .equipos-input {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.2);
    color: #e2e8f0;
    font-size: 0.9rem;
    transition: border-color 0.15s;
}
.equipos-input:focus {
    outline: none;
    border-color: rgba(252, 32, 68, 0.45);
}
.equipos-textarea {
    resize: vertical;
    min-height: 88px;
    line-height: 1.45;
}
.equipos-form .form-group { margin-bottom: 1rem; }
.equipos-form .form-group label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #cbd5e1;
}
.equipos-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.25rem 0 0;
}
.equipos-flash { margin: 0 0 1rem; }
.equipos-flash--ok { color: #9ae6b4; }
.equipos-flash--err { color: #feb2b2; }

.equipos-ver-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 0.85rem;
    align-items: start;
}
.equipos-ver-main { min-width: 0; }
.equipos-ver-main .equipos-panel:last-child { margin-bottom: 0; }

.equipos-members {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.equipos-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.equipos-member-body { min-width: 0; }
.equipos-member-name {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: #e2e8f0;
}
.equipos-member-email {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.1rem;
    word-break: break-all;
}
.equipos-member-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.equipos-member-rol {
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
}
.equipos-member-quitar { margin: 0; }
.equipos-btn-danger { color: #fca5a5 !important; }
.equipos-btn-danger:hover { color: #fecaca !important; background: rgba(252, 32, 68, 0.1) !important; }

.equipos-invite-hint {
    margin: -0.25rem 0 0.85rem;
    font-size: 0.84rem;
    line-height: 1.45;
    color: #94a3b8;
}
.equipos-invite-form { margin: 0; }
.equipos-invite-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}
.equipos-invite-row .equipos-input { flex: 1; min-width: 200px; }
.equipos-invite-row .btn { flex-shrink: 0; align-self: stretch; }

.equipos-pending {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.equipos-pending li {
    font-size: 0.82rem;
    color: #94a3b8;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

/* Notas del equipo */
.equipos-notas-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}
.equipos-notas-head .equipos-section-title { margin-bottom: 0.2rem; }
.equipos-notas-sub {
    margin: 0;
    font-size: 0.78rem;
    color: #64748b;
}
.equipos-notas-filter-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 180px;
}
.equipos-notas-filter-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}
.equipos-notas-filter {
    padding: 0.45rem 0.65rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    color: #e2e8f0;
    font-size: 0.84rem;
    color-scheme: dark;
}
.equipos-notas-filter option {
    background: #1a1d24;
    color: #e2e8f0;
}
.equipos-notas-filter:focus {
    outline: none;
    border-color: rgba(252, 32, 68, 0.4);
}
.equipos-notas-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
    min-height: 0;
    max-height: 720px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #3a3f4b transparent;
    padding-right: 0.15rem;
}
.equipos-notas-list::-webkit-scrollbar { width: 4px; }
.equipos-notas-list::-webkit-scrollbar-thumb { background: #3a3f4b; border-radius: 3px; }
.equipos-notas-empty-filter {
    margin: 0.75rem 0 0;
    font-size: 0.84rem;
    color: #94a3b8;
    text-align: center;
}
.eq-nota-card {
    padding: 0.8rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.15s, background 0.15s;
}
.eq-nota-card:hover {
    border-color: rgba(52, 211, 153, 0.25);
    background: rgba(52, 211, 153, 0.04);
}
.eq-nota-titulo {
    margin: 0 0 0.45rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1.35;
}
.eq-nota-meta {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.eq-nota-meta li {
    font-size: 0.78rem;
    color: #94a3b8;
    line-height: 1.4;
}
.eq-nota-meta-label {
    font-weight: 700;
    color: #64748b;
    margin-right: 0.25rem;
}
.eq-nota-link {
    color: #7dd3fc;
    text-decoration: none;
    font-weight: 600;
}
.eq-nota-link:hover { text-decoration: underline; color: #bae6fd; }
.eq-nota-desc {
    margin: 0 0 0.55rem;
    font-size: 0.84rem;
    color: #cbd5e1;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.eq-nota-live-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary, #fc2044);
    text-decoration: none;
}
.eq-nota-live-link:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .equipos-ver-grid { grid-template-columns: 1fr; }
    .equipos-panel--notas { min-height: 0; }
    .equipos-notas-list { max-height: none; }
}
@media (max-width: 560px) {
    .equipos-page-head { flex-direction: column; align-items: stretch; }
    .equipos-page-cta { width: 100%; text-align: center; }
    .equipos-invite-row .btn { width: 100%; }
    .equipos-member { flex-direction: column; align-items: flex-start; }
    .equipos-member-actions { width: 100%; justify-content: space-between; }
}

/* Legacy aliases */
.equipos-list { list-style: none; margin: 0; padding: 0; }
.equipos-list li { margin: 0.4rem 0; }
.equipos-rol { color: #a0aec0; font-size: 0.9rem; }
.link-back { display: inline-block; margin-bottom: 0.75rem; color: #a0aec0; font-size: 0.9rem; }

.notif-page { max-width: 720px; }
.notif-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.notif-page-head .panel-page-desc { margin-bottom: 0; }
.notif-page-count {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}
.notif-empty {
    text-align: center;
    padding: 2.5rem 1.25rem;
    border-radius: 14px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}
.notif-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 0.85rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: #64748b;
}
.notif-empty-title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 700;
    color: #e2e8f0;
}
.notif-empty-sub {
    margin: 0;
    font-size: 0.88rem;
    color: #94a3b8;
    line-height: 1.45;
}
.notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.notif-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0.8rem 0.9rem;
    background: var(--bg-surface-1, #1a1d23);
    transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.notif-card:hover {
    border-color: rgba(255, 255, 255, 0.14);
    background: var(--bg-surface-2, #1e2229);
}
.notif-card-layout {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}
.notif-card-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.notif-card-icon--equipo_invitacion {
    color: #7dd3fc;
    background: rgba(56, 189, 248, 0.1);
    border-color: rgba(56, 189, 248, 0.22);
}
.notif-card-icon--equipo_aceptacion {
    color: #86efac;
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.22);
}
.notif-card-icon--sistema {
    color: #fca5a5;
    background: rgba(252, 32, 68, 0.1);
    border-color: rgba(252, 32, 68, 0.22);
}
.notif-card-body {
    flex: 1;
    min-width: 0;
}
.notif-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.65rem;
}
.notif-card-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.3;
}
.notif-card-time {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: #64748b;
    white-space: nowrap;
}
.notif-card-text {
    margin: 0.35rem 0 0;
    font-size: 0.84rem;
    color: #94a3b8;
    line-height: 1.45;
}
.notif-card-meta {
    margin: 0.3rem 0 0;
    font-size: 0.76rem;
    font-weight: 600;
    color: #64748b;
}
.notif-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.65rem;
}
.notif-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: none;
    border-radius: 8px;
    padding: 0.42rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.12s var(--ease);
}
.notif-action:active { transform: scale(0.98); }
.notif-action--accept {
    background: #fc2044;
    color: #fff;
}
.notif-action--accept:hover {
    background: #e0153a;
}
.notif-action--reject {
    background: transparent;
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.notif-action--reject:hover {
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
}
.notif-action--open {
    background: rgba(56, 189, 248, 0.12);
    color: #7dd3fc;
    border: 1px solid rgba(56, 189, 248, 0.28);
}
.notif-action--open:hover {
    background: rgba(56, 189, 248, 0.18);
    color: #bae6fd;
    border-color: rgba(56, 189, 248, 0.4);
}
.notif-action--open svg { flex-shrink: 0; }

@media (max-width: 640px) {
    .notif-page-head {
        flex-direction: column;
        align-items: stretch;
    }
    .notif-page-count { align-self: flex-start; }
    .notif-card-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }
    .notif-card-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .notif-action { width: 100%; }
}

.list-plain { list-style: disc; margin-left: 1.1rem; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.equipos-page-h1, .panel-page-h1 {
    margin: 0 0 0.35rem;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #e4e6eb;
}
.equipos-page-desc, .panel-page-desc {
    color: #a0aec0;
    font-size: 0.95rem;
    margin: 0 0 1.25rem;
    line-height: 1.45;
}
.form-hint-inline {
    font-weight: 400;
    color: #718096;
    font-size: 0.85rem;
}
.form-error { color: #feb2b2; margin: 0 0 1rem; font-size: 0.95rem; }
.form-ok { color: #9ae6b4; margin: 0 0 1rem; font-size: 0.95rem; }

/* ── Gráficos: menú ⋯ y notas ───────────────────────────────────────────── */
.chart-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
.channel-section-topbar .chart-toolbar-actions {
    margin-left: auto;
}
.chart-menu-wrap {
    position: relative;
    z-index: 50;
}
.chart-menu-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    background: #1a1d23;
    border: 1px solid #3a3f4b;
    border-radius: 6px;
    color: #a0aec0;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.chart-menu-btn:hover {
    background: #2d323e;
    border-color: #4a5568;
    color: #e4e6eb;
}
.chart-menu-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 11rem;
    background: #252830;
    border: 1px solid #3a3f4b;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    z-index: 200;
    padding: 0.35rem;
}
.chart-menu-dropdown[hidden] {
    display: none !important;
}
.chart-menu-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.65rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #e4e6eb;
    font-size: 0.9rem;
    cursor: pointer;
}
.chart-menu-dropdown button:hover {
    background: #2d323e;
}

.chart-nota-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.chart-nota-modal[hidden] {
    display: none !important;
}
.chart-nota-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.chart-nota-modal__panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow: auto;
    background: #1e2229;
    border: 1px solid #3a3f4b;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.chart-nota-modal__panel--form {
    max-width: 460px;
}
.chart-nota-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1rem 0.5rem;
    border-bottom: 1px solid #2d323e;
}
.chart-nota-modal__title {
    margin: 0;
    font-size: 1.05rem;
    color: #e8ecf4;
    font-weight: 700;
    flex: 1;
    min-width: 0;
}
.chart-nota-modal__head-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
.chart-nota-modal__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    padding: 0.4rem 0.65rem;
    border-radius: 6px;
    border: 1px solid rgba(99, 102, 241, 0.5);
    background: rgba(49, 46, 129, 0.45);
    color: #c7d2fe;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
}
.chart-nota-modal__edit:hover {
    color: #fff;
    background: #4338ca;
    border-color: #818cf8;
}
.chart-nota-modal__edit:focus-visible {
    outline: 2px solid #818cf8;
    outline-offset: 2px;
}
.chart-nota-modal__del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    padding: 0.4rem 0.65rem;
    border-radius: 6px;
    border: 1px solid rgba(248, 113, 113, 0.55);
    background: rgba(127, 29, 29, 0.55);
    color: #fecaca;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
}
.chart-nota-modal__del:hover {
    color: #fff;
    background: #b91c1c;
    border-color: #f87171;
    box-shadow: 0 2px 8px rgba(248, 113, 113, 0.25);
}
.chart-nota-modal__del:focus-visible {
    outline: 2px solid #f87171;
    outline-offset: 2px;
}
.chart-nota-modal__x {
    background: none;
    border: none;
    color: #a0aec0;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
}
.chart-nota-modal__x:hover {
    color: #e4e6eb;
}
.chart-nota-modal__body {
    padding: 1rem;
}
.chart-nota-meta {
    font-size: 0.88rem;
    color: #a0aec0;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}
.chart-nota-meta strong {
    color: #c7cdd8;
}
.chart-nota-desc {
    margin: 0;
    font-size: 0.92rem;
    color: #e4e6eb;
    line-height: 1.45;
    white-space: pre-wrap;
}
.chart-nota-form .form-group {
    margin-bottom: 0.85rem;
}
.chart-nota-form label {
    display: block;
    margin-bottom: 0.3rem;
    color: #a0aec0;
    font-size: 0.88rem;
}
.chart-nota-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.6rem;
    border: 1px solid #3a3f4b;
    border-radius: 6px;
    background: #1a1d23;
    color: #e4e6eb;
    font-size: 0.95rem;
}
.chart-nota-form .inline-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}
.cn-alcance-fieldset {
    border: 1px solid #2d323e;
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    margin: 0 0 1rem;
}
.cn-alcance-fieldset legend {
    padding: 0 0.35rem;
    color: #a0aec0;
    font-size: 0.85rem;
}
.cn-radio {
    display: block;
    margin: 0.35rem 0;
    color: #e4e6eb;
    font-size: 0.9rem;
    cursor: pointer;
}
.chart-nota-form-err {
    color: #feb2b2;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}
.channel-live-chart-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 0 0 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE UI — Topbar, Bottombar, Panel "Más"
   ═══════════════════════════════════════════════════════════════ */

/* Botón de búsqueda (sólo mobile) */
.topbar-search-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 9px;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.18s var(--ease), color 0.18s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.topbar-search-btn:hover { background: var(--bg-surface-hover-strong); color: var(--text-primary); }

/* Botón "atrás" dentro del buscador (sólo mobile) */
.topbar-search-back {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 8px;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.topbar-search-back:hover { color: var(--text-primary); }

/* Notif: reemplaza el emoji con el SVG inline */
.topbar-notif-bell {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bottom bar — rediseño 5 tabs ─────────────────────────────── */
.bottom-bar-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    height: var(--bottom-bar-h);
    min-width: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    font-size: 0.625rem;
    font-weight: 500;
    font-family: inherit;
    letter-spacing: 0.01em;
    padding: 0.35rem 0.25rem;
    transition: color 0.18s var(--ease);
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
.bottom-bar-tab svg { width: 22px; height: 22px; display: block; flex-shrink: 0; }
.bottom-bar-tab:hover,
.bottom-bar-tab:active { color: var(--text-primary); }
.bottom-bar-tab.active { color: var(--primary); }
.bottom-bar-tab.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: var(--primary);
    border-radius: 0 0 3px 3px;
}
.bottom-bar-tab--pending {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* Panel "Más" ─────────────────────────────────────────────── */
.mas-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--bottom-bar-total-h);
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 960;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s var(--ease);
}
.mas-overlay.visible { opacity: 1; pointer-events: auto; }

.mas-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: var(--bottom-bar-total-h);
    width: min(88vw, 250px);
    background: #1a1e26;
    border-left: 1px solid var(--border-color);
    border-bottom-left-radius: 14px;
    z-index: 970;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s var(--ease);
    overflow: hidden;
    overscroll-behavior: contain;
}
.mas-panel.open { transform: translateX(0); }

/* Header usuario */
.mas-header {
    padding: 1rem 1rem 0.75rem;
    padding-top: calc(1rem + env(safe-area-inset-top, 0));
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    position: relative;
}
.mas-close {
    position: absolute;
    top: calc(0.75rem + env(safe-area-inset-top, 0));
    right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--bg-surface-hover);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    transition: background 0.18s var(--ease), color 0.18s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.mas-close:hover { background: var(--bg-surface-hover-strong); color: var(--text-primary); }

.mas-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
    padding-right: 2.5rem;
}
.mas-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
    background: var(--bg-surface-2);
}
.mas-profile-info { min-width: 0; }
.mas-profile-name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mas-profile-plan {
    display: inline-block;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    background: var(--primary-soft);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

/* Nav scrollable */
.mas-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0.5rem 0;
    overscroll-behavior: contain;
}
.mas-nav::-webkit-scrollbar { width: 4px; }
.mas-nav::-webkit-scrollbar-track { background: transparent; }
.mas-nav::-webkit-scrollbar-thumb { background: var(--border-color-strong); border-radius: 4px; }

.mas-group-label {
    display: block;
    padding: 0.75rem 0.6rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    opacity: 0.7;
    user-select: none;
}
.mas-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.7rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 10px;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}
.mas-item:hover,
.mas-item:active { background: var(--bg-surface-hover); color: var(--text-primary); }
.mas-item.active { color: var(--primary); background: var(--primary-soft); font-weight: 600; }
.mas-item--pending { opacity: 0.38; pointer-events: none; cursor: default; }
.mas-item-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.85;
}
.mas-item:hover .mas-item-icon,
.mas-item.active .mas-item-icon { opacity: 1; }
.mas-item.active .mas-item-icon { color: var(--primary); }

/* Footer usuario */
.mas-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--border-color);
    padding: 0.6rem 0.4rem;
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}
.mas-footer-item {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 12px;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.mas-footer-item:hover,
.mas-footer-item:active { background: var(--bg-surface-hover); color: var(--text-primary); }
.mas-footer-item--danger { color: #e05560; }
.mas-footer-item--danger:hover { background: rgba(224, 85, 96, 0.1); color: #e05560; }
.mas-footer-icon { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.85; }
.mas-footer-item:hover .mas-footer-icon { opacity: 1; }

/* ── Overrides mobile ≤767px ─────────────────────────────── */
@media (max-width: 767px) {
    /* Topbar: sólo logo + search btn */
    .topbar-menu-btn  { display: none !important; }
    .topbar-spacer    { flex: 1; }
    .topbar-notif     { display: none; }
    .topbar-actions   { display: none; }
    .topbar-search-btn { display: flex; }

    /* Search wrap: oculto por defecto, aparece como overlay al activarse */
    .topbar-search-wrap {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        box-sizing: border-box;
        min-height: var(--topbar-h);
        padding-top: env(safe-area-inset-top, 0px);
        background: rgba(20, 23, 29, 0.97);
        backdrop-filter: saturate(180%) blur(16px);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        border-bottom: 1px solid var(--border-color);
        z-index: 910;
        align-items: center;
        gap: 0.5rem;
        padding-left: 0.5rem;
        padding-right: 0.75rem;
        margin-left: 0;
    }
    .topbar-search-wrap.active { display: flex; }
    .topbar-search-back { display: flex; }
    .topbar-search-box { flex: 1; }
    .topbar-search-input { width: 100%; }

    /* Bottom bar: 5 tabs iguales */
    .bottom-bar {
        display: flex;
        justify-content: space-around;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Mas panel y overlay visibles sólo en mobile */
    .mas-overlay { display: block; }
}

/* Ocultar mas panel en desktop */
@media (min-width: 768px) {
    .mas-overlay,
    .mas-panel { display: none !important; }
    .topbar-search-back { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   FAVORITOS PAGE
   ═══════════════════════════════════════════════════════════════ */
.fav-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

/* Header */
.fav-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.fav-header .fav-chart-toggle {
    align-self: center;
    flex-shrink: 0;
}
.fav-section[hidden] { display: none !important; }
.fav-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.4rem;
}
.fav-header-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.fav-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.fav-meta-chip--live {
    background: rgba(99,102,241,0.1);
    border-color: rgba(99,102,241,0.3);
    color: #818cf8;
}
.fav-meta-chip--viewers {
    background: rgba(252,32,68,0.12);
    border-color: rgba(252,32,68,0.3);
    color: #fc2044;
}

/* Pulse dot */
.fav-dot-pulse {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: fav-pulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes fav-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.75); }
}

/* Estado vacío */
.fav-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1rem;
    gap: 0.75rem;
}
.fav-empty-icon {
    width: 56px;
    height: 56px;
    color: var(--text-muted);
    opacity: 0.4;
    margin-bottom: 0.5rem;
}
.fav-empty-icon svg { width: 100%; height: 100%; }
.fav-empty-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
}
.fav-empty-sub {
    font-size: 0.875rem;
    color: var(--text-muted);
    max-width: 340px;
    margin: 0;
    line-height: 1.5;
}
.fav-empty-btn {
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.25rem;
    background: var(--primary);
    color: #fff;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.18s var(--ease);
}
.fav-empty-btn:hover { opacity: 0.88; }

/* Secciones */
.fav-section {
    margin-bottom: 2.25rem;
}
.fav-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Indicador "en vivo" del gráfico */
.fav-live-status {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    padding-bottom: 0.15rem;
}
.fav-live-status .fav-dot-pulse {
    color: #4ade80;
}
.fav-live-status-label {
    color: #4ade80;
    font-weight: 600;
}
.fav-live-status-sep {
    opacity: 0.4;
}
#fav-last-update {
    color: var(--text-muted);
}
.fav-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.2rem;
}
.fav-section-sub {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
}

/* Gráfico */
.fav-chart-outer {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    padding: 1rem 0.75rem 0.75rem;
}
.fav-chart {
    width: 100%;
    height: 280px;
}
.fav-chart-empty {
    display: none; /* mostrado solo via JS con la clase --visible */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    height: 180px;
    color: var(--text-muted);
    font-size: 0.875rem;
}
.fav-chart-empty--visible {
    display: flex;
}
.fav-chart-empty svg {
    width: 32px;
    height: 32px;
    opacity: 0.4;
}

/* Tabla de canales */
.fav-canales-wrap {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.fav-table {
    min-width: 520px;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.fav-col-canal  { width: 190px; }
.fav-col-estado { width: 130px; }
.fav-col-ultimo { width: 200px; }
.fav-th {
    padding: 0.65rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.fav-th--center { text-align: center; }
.fav-th--right  { text-align: right; }
.fav-tr {
    transition: background 0.15s var(--ease);
}
.fav-tr:hover { background: var(--bg-surface-hover); }
.fav-tr + .fav-tr { border-top: 1px solid var(--border-color); }
.fav-td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.fav-td--center { text-align: center; }
.fav-td--right  { text-align: right; }
.fav-td--num    { font-variant-numeric: tabular-nums; }
.fav-td--muted  { color: var(--text-muted); font-size: 0.8125rem; }

.fav-canal-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.fav-canal-link:hover .fav-canal-texto { color: var(--primary); }
.fav-canal-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-color);
    background: var(--bg-surface-2);
    flex-shrink: 0;
}
.fav-canal-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.1rem;
}
.fav-canal-texto {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    transition: color 0.15s var(--ease);
}
.fav-canal-username {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.fav-multilive {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0.05rem 0.35rem;
    background: rgba(251,146,60,0.15);
    border: 1px solid rgba(251,146,60,0.35);
    color: #fb923c;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    vertical-align: middle;
    white-space: nowrap;
}
.fav-badge-live {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.6rem;
    background: rgba(252,32,68,0.12);
    border: 1px solid rgba(252,32,68,0.3);
    color: #fc2044;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.fav-badge-off {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.03em;
}
.fav-viewers {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
}
.fav-viewers-off { color: var(--text-muted); }
.fav-en-curso {
    font-size: 0.8125rem;
    color: #fc2044;
    font-weight: 500;
}
.fav-ultimo-vivo {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
}
.fav-ultimo-fila {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}
.fav-ultimo-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.65;
    white-space: nowrap;
}
.fav-ultimo-pico {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.fav-ultimo-sep {
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.5;
}
.fav-ultimo-tiempo {
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.fav-td--muted {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* Comparaciones */
.fav-comps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}
.fav-comp-card {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0 0.5rem;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.875rem 1rem;
    transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.fav-comp-card:hover {
    border-color: var(--border-color-strong);
    background: var(--bg-surface-2, rgba(255,255,255,0.02));
}
.fav-comp-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}
.fav-comp-side--right { align-items: center; }
.fav-comp-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-color);
    background: var(--bg-surface-2);
}
.fav-comp-nombre {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.3;
    transition: color 0.15s var(--ease);
}
.fav-comp-card:hover .fav-comp-nombre { color: var(--text-primary); }
.fav-comp-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.03em;
    flex-shrink: 0;
}
.fav-comp-fecha {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

/* Debug panel */
.fav-debug {
    margin-top: 2.5rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 1rem;
    font-family: monospace;
}
.fav-debug-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
}
.fav-debug-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.fav-debug-table th {
    text-align: left;
    padding: 0.25rem 0.5rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.fav-debug-table td {
    padding: 0.3rem 0.5rem;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    vertical-align: middle;
}
.fav-debug-total td {
    font-weight: 700;
    color: var(--text-primary);
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: none;
}
.fav-debug-ms { font-weight: 600; white-space: nowrap; }
.fav-debug-ok   { color: #34d399; }
.fav-debug-med  { color: #fb923c; }
.fav-debug-slow { color: #fc2044; }
.fav-debug-rows { color: var(--text-muted); }

@media (max-width: 540px) {
    .fav-chart { height: 220px; }
    .fav-canal-texto, .fav-canal-username { max-width: 110px; }
}
@media (min-width: 768px) {
    .fav-chart { height: 340px; }
    .fav-page  { padding: 2rem 1.5rem 3rem; }
}

/* ══════════════════════════════════════════════════════════════
   TENDENCIAS
   ══════════════════════════════════════════════════════════════ */
.tr-page {
    padding: 1rem 1rem 5rem;
    max-width: 1200px;
    margin: 0 auto;
}
.tr-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}
.tr-header .live-channels-filters {
    flex: unset;
    width: 100%;
}
.tr-page-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Section */
.tr-section {
    margin-bottom: 2rem;
}
.tr-section-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}
.tr-section-icon {
    font-size: 1.15rem;
    line-height: 1;
    flex-shrink: 0;
}
.tr-section-title-group {
    flex: 1;
    min-width: 0;
}
.tr-section-title-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.tr-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}
.tr-section-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    display: block;
    margin-top: 0.15rem;
}
.tr-section-count {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    background: rgba(255,255,255,0.06);
    border-radius: 20px;
    padding: 0.15rem 0.5rem;
    flex-shrink: 0;
}
.tr-section-age {
    font-size: 0.68rem;
    color: var(--text-muted);
    flex-shrink: 0;
    min-width: 60px;
    text-align: right;
}

/* Scroll row */
.tr-scroll {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: #3a3f4b #1a1d23;
}
.tr-scroll::-webkit-scrollbar { height: 5px; }
.tr-scroll::-webkit-scrollbar-track { background: #1a1d23; border-radius: 3px; }
.tr-scroll::-webkit-scrollbar-thumb { background: #3a3f4b; border-radius: 3px; }
.tr-scroll--updating { opacity: 0.6; transition: opacity 0.15s; }

/* ── LIVE card ── */
.tr-card--live {
    flex: 0 0 160px;
    min-width: 160px;
    max-width: 160px;
    background: var(--card-bg, #1e2128);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 0.85rem 0.75rem 0.8rem;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: background 0.15s, border-color 0.15s;
    cursor: pointer;
}
.tr-card--live:hover {
    background: var(--card-hover-bg, #252830);
    border-color: rgba(255,255,255,0.12);
}
.tr-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.tr-card-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255,255,255,0.06);
}
.tr-card-head-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.tr-flag {
    width: 14px;
    height: 10px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}
.tr-card-canal {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.tr-card-dur {
    font-size: 0.65rem;
    color: var(--text-muted);
}
.tr-card-metric {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.tr-card-metric-main {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}
.tr-card-metric-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    line-height: 1.2;
}
.tr-card-metric-sub {
    font-size: 0.68rem;
    color: var(--text-secondary);
}
.tr-card-titulo-small {
    font-size: 0.65rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Color variants */
.tr-color-green { color: #34d399; }
.tr-color-gold  { color: #fbbf24; }
.tr-color-blue  { color: #60a5fa; }
.tr-color-pink  { color: #f472b6; }

.tr-card--green { border-top: 2px solid #34d399; }
.tr-card--gold  { border-top: 2px solid #fbbf24; }
.tr-card--blue  { border-top: 2px solid #60a5fa; }
.tr-card--pink  { border-top: 2px solid #f472b6; }

/* Badges */
.tr-badge {
    display: inline-block;
    width: fit-content;
    align-self: flex-start;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
}
.tr-badge--green { background: rgba(52,211,153,0.15); color: #34d399; }
.tr-badge--blue  { background: rgba(96,165,250,0.15); color: #60a5fa; }
.tr-badge--gold  { background: rgba(251,191,36,0.15);  color: #fbbf24; }
.tr-badge--pink  { background: rgba(244,114,182,0.15); color: #f472b6; }

/* Progress bar */
.tr-progress-bar {
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    overflow: hidden;
    margin: 0.15rem 0;
}
.tr-progress-fill {
    height: 100%;
    background: #fbbf24;
    border-radius: 4px;
    transition: width 0.4s ease;
}

/* ── VIDEO card ── */
.tr-card--video {
    flex: 0 0 160px;
    min-width: 160px;
    max-width: 160px;
    background: var(--card-bg, #1e2128);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: background 0.15s, border-color 0.15s;
    cursor: pointer;
}
.tr-card--video:hover {
    background: var(--card-hover-bg, #252830);
    border-color: rgba(255,255,255,0.12);
}
.tr-card-thumb-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    background: rgba(255,255,255,0.04);
    overflow: hidden;
    flex-shrink: 0;
}
.tr-card-thumb-wrap--square {
    padding-top: 125%; /* 4:5 portrait */
}
.tr-card-thumb-wrap--empty {
    background: rgba(255,255,255,0.04);
}
.tr-card-thumb {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.tr-card-delta-badge {
    display: inline-block;
    background: rgba(52,211,153,0.12);
    color: #34d399;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 5px;
    padding: 0.2rem 0.5rem;
    letter-spacing: 0.01em;
    align-self: flex-start;
}
.tr-card-video-body {
    padding: 0.6rem 0.65rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}
.tr-card-video-titulo {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
.tr-card-video-canal {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.65rem;
    color: var(--text-muted);
}
.tr-card-canal-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Info button */
.tr-info-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}
.tr-info-btn:hover {
    color: var(--text-secondary);
    background: rgba(255,255,255,0.07);
}

/* Modal */
.tr-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 900;
    backdrop-filter: blur(2px);
}
.tr-modal-overlay.visible { display: block; }

.tr-modal {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: min(92vw, 360px);
    background: #1e2128;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 1.5rem 1.5rem 1.75rem;
    z-index: 901;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.tr-modal.open {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.tr-modal-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0.25rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}
.tr-modal-close:hover { color: var(--text-primary); }
.tr-modal-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.6rem;
}
.tr-modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.65rem;
}
.tr-modal-body {
    font-size: 0.83rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Empty state */
.tr-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 1rem;
    color: var(--text-muted);
    text-align: center;
    font-size: 0.85rem;
}

@media (min-width: 768px) {
    .tr-page { padding: 2rem 1.5rem 3rem; }
    .tr-card--live, .tr-card--video { flex: 0 0 180px; min-width: 180px; max-width: 180px; }
    .tr-card-metric-main { font-size: 1.6rem; }
}

/* ═══════════════════════════════════════════════════════
   EXPLORAR PAGE — map hub
═══════════════════════════════════════════════════════ */
.exp-page { padding: 0 0 2rem; }
.exp-page--map {
    margin: -1.5rem -1.5rem -1.5rem;
    padding: 0;
    height: calc(100dvh - var(--topbar-h, 56px));
    max-height: calc(100dvh - var(--topbar-h, 56px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.app-layout .main-content:not(.standalone):has(.exp-page--map) {
    overflow: hidden;
}

.exp-map-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.5rem;
    padding: 1rem 1.5rem 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(20,24,36,0.95) 0%, rgba(19,21,26,0.6) 100%);
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}
.exp-map-header-top {
    display: contents;
}
.exp-map-header-main { flex: 1 1 200px; min-width: 0; }
.exp-map-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.2rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #e4e6eb;
}
.exp-map-title svg { width: 20px; height: 20px; color: #fc2044; flex-shrink: 0; }
.exp-map-subtitle { margin: 0; font-size: 0.78rem; color: #718096; }
.exp-map-header-stats { display: flex; gap: 1.25rem; align-items: center; }
.exp-map-stat { display: flex; align-items: center; gap: 0.35rem; }
.exp-map-stat-num {
    font-size: 1.1rem;
    font-weight: 700;
    color: #e4e6eb;
    font-variant-numeric: tabular-nums;
}
.exp-map-stat-label { font-size: 0.72rem; color: #718096; }
.exp-map-header-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.exp-map-countries-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: #e4e6eb;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.exp-map-countries-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.exp-map-countries-btn:hover,
.exp-map-countries-btn[aria-expanded="true"] {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
}
.exp-map-link-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    background: rgba(252,32,68,0.12);
    border: 1px solid rgba(252,32,68,0.25);
    color: #fc2044;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.exp-map-link-btn:hover {
    background: rgba(252,32,68,0.2);
    border-color: rgba(252,32,68,0.4);
    color: #ff4d6d;
}

.exp-cat-nav { position: relative; }
.exp-cat-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: #e4e6eb;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.exp-cat-nav-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.exp-cat-nav-chevron { width: 12px !important; height: 12px !important; opacity: 0.6; }
.exp-cat-nav-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
.exp-cat-nav-btn[aria-expanded="true"] {
    background: rgba(124,58,237,0.12);
    border-color: rgba(124,58,237,0.35);
}
.exp-cat-nav-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 260px;
    max-width: min(320px, calc(100vw - 2rem));
    max-height: 320px;
    overflow-y: auto;
    background: rgba(22,26,38,0.97);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
    backdrop-filter: blur(12px);
    z-index: 50;
    padding: 0.35rem;
    scrollbar-width: thin;
    scrollbar-color: #3a3f4b transparent;
}
.exp-cat-nav-menu::-webkit-scrollbar { width: 5px; }
.exp-cat-nav-menu::-webkit-scrollbar-track { background: transparent; }
.exp-cat-nav-menu::-webkit-scrollbar-thumb {
    background: #3a3f4b;
    border-radius: 3px;
}
.exp-cat-nav-menu::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
.exp-cat-nav-list { display: flex; flex-direction: column; gap: 2px; }
.exp-cat-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s;
}
.exp-cat-nav-item:hover { background: rgba(255,255,255,0.06); }
.exp-cat-nav-name { font-size: 0.82rem; font-weight: 600; color: #e4e6eb; }
.exp-cat-nav-meta {
    font-size: 0.68rem;
    color: #718096;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}
.exp-cat-nav-live {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #fc2044;
    font-weight: 600;
}
.exp-cat-nav-loading, .exp-cat-nav-empty {
    font-size: 0.78rem;
    color: #718096;
    padding: 0.75rem;
    text-align: center;
}

.exp-map-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
.exp-map-container {
    flex: 1;
    min-width: 0;
    min-height: 0;
    height: 100%;
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(124,58,237,0.06) 0%, transparent 70%),
        #0f1219;
}
.exp-map-loading {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: min(380px, 36vw);
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(124,58,237,0.06) 0%, transparent 70%),
        #0f1219;
}
.exp-map-loading.is-hidden {
    opacity: 0;
    visibility: hidden;
}
.exp-map-loading .exp-load-error {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    font-size: 0.8rem;
    color: #718096;
    text-align: center;
}

.exp-panel-backdrop {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 4;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.exp-panel-backdrop[hidden] { display: none !important; }

/* Explorar — placeholder shimmer (estilo lazy image) */
.exp-shimmer {
    position: relative;
    overflow: hidden;
}
.exp-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.025) 35%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.025) 65%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    animation: exp-shimmer-slide 1.8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes exp-shimmer-slide {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.exp-country-panel {
    position: relative;
    flex: 0 0 min(380px, 36vw);
    width: min(380px, 36vw);
    z-index: 5;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}
.exp-country-panel-inner {
    flex: 1;
    min-height: 0;
    background: rgba(18,22,34,0.96);
    border-left: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.exp-country-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0.85rem 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: #3a3f4b transparent;
}
.exp-country-panel-body::-webkit-scrollbar { width: 5px; }
.exp-country-panel-body::-webkit-scrollbar-track { background: transparent; }
.exp-country-panel-body::-webkit-scrollbar-thumb {
    background: #3a3f4b;
    border-radius: 3px;
}
.exp-country-panel-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* Sidebar — country list */
.exp-cp-list-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    padding: 0 0.15rem;
}
.exp-cp-list-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #e4e6eb;
}
.exp-cp-list-count {
    font-size: 0.72rem;
    color: #718096;
    white-space: nowrap;
}
.exp-cp-countries-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.exp-cp-country-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.6rem 0.65rem;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.exp-cp-country-row:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
    transform: translateX(2px);
}
.exp-cp-country-row--active {
    background: rgba(252,32,68,0.08);
    border-color: rgba(252,32,68,0.25);
}
.exp-cp-country-rank {
    width: 18px;
    font-size: 0.68rem;
    font-weight: 800;
    color: #718096;
    text-align: center;
    flex-shrink: 0;
}
.exp-cp-country-flag {
    width: 28px;
    height: 19px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.exp-cp-country-info { flex: 1; min-width: 0; }
.exp-cp-country-name {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #e4e6eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.15rem;
}
.exp-cp-country-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    align-items: center;
}
.exp-cp-country-meta-item {
    font-size: 0.78rem;
    color: #718096;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.exp-cp-country-meta-item--live { color: #fc2044; font-weight: 600; }
.exp-cp-country-meta-item--viewers {
    color: #cbd5e1;
    font-weight: 700;
}
.exp-cp-country-meta-item--channels {
    color: #94a3b8;
    font-weight: 600;
}
.exp-cp-country-top {
    display: block;
    margin-top: 0.28rem;
}
.exp-cp-canal-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    max-width: 100%;
}
.exp-cp-canal-label--top {
    color: #cbd5e1;
}
.exp-cp-canal-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #252d3d;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.exp-cp-canal-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.exp-cp-canal-label--top .exp-cp-canal-name {
    font-size: 0.8rem;
    font-weight: 600;
}
.exp-cp-country-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #718096;
    opacity: 0.7;
}

.exp-cp-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
    padding: 0.35rem 0.5rem 0.35rem 0.35rem;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: #a0aec0;
    font-size: 0.76rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.exp-cp-back svg { width: 14px; height: 14px; flex-shrink: 0; }
.exp-cp-back:hover { background: rgba(255,255,255,0.08); color: #e4e6eb; }

.exp-cp-header {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.exp-cp-flag {
    width: 48px;
    height: 32px;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    flex-shrink: 0;
}
.exp-cp-header-text { min-width: 0; flex: 1; }
.exp-cp-name {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #e4e6eb;
    line-height: 1.2;
}
.exp-cp-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    align-items: center;
    margin-top: 0.15rem;
}
.exp-cp-stat {
    font-size: 0.95rem;
    color: #a0aec0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1.3;
}
.exp-cp-stat--live { color: #fc2044; font-weight: 700; }
.exp-cp-stat--viewers {
    color: #e2e8f0;
    font-weight: 800;
    font-size: 1rem;
}
.exp-cp-stat--channels {
    color: #94a3b8;
    font-weight: 700;
    font-size: 0.92rem;
}
.exp-cp-stat--muted { color: #718096; }
.exp-cp-metrics-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
    padding: 0.72rem 0.85rem;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(124, 58, 237, 0.28);
    color: #c4b5fd;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}
.exp-cp-metrics-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.85;
}
.exp-cp-metrics-btn:hover {
    background: rgba(124, 58, 237, 0.2);
    border-color: rgba(124, 58, 237, 0.42);
    color: #e9d5ff;
    transform: translateY(-1px);
}
.exp-cp-rank {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(124,58,237,0.12) 0%, rgba(252,32,68,0.08) 100%);
    border: 1px solid rgba(124,58,237,0.2);
}
.exp-cp-rank-pos {
    font-size: 1.35rem;
    font-weight: 800;
    color: #c4b5fd;
    line-height: 1;
}
.exp-cp-rank-label { font-size: 0.75rem; color: #a0aec0; }
.exp-cp-section { margin-bottom: 1.25rem; }
.exp-cp-section-title {
    margin: 0 0 0.65rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.exp-cp-cat-lead {
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
}
.exp-cp-cat-lead--link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.exp-cp-cat-lead--link:hover {
    background: rgba(124,58,237,0.1);
    border-color: rgba(124,58,237,0.28);
    transform: translateX(2px);
}
.exp-cp-cat-lead-body { min-width: 0; flex: 1; }
.exp-cp-cat-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #c4b5fd;
    opacity: 0.85;
}
.exp-cp-cat-name {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: #e4e6eb;
    margin-bottom: 0.2rem;
}
.exp-cp-cat-meta { font-size: 0.72rem; color: #718096; }
.exp-cp-lives { display: flex; flex-direction: column; gap: 0.55rem; }
.exp-cp-live {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    padding: 0.55rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.exp-cp-live:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(252,32,68,0.25);
    transform: translateX(2px);
}
.exp-cp-live-rank {
    width: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #718096;
    text-align: center;
    flex-shrink: 0;
}
.exp-cp-live-thumb {
    position: relative;
    width: 72px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: #252d3d;
    flex-shrink: 0;
}
.exp-cp-live-thumb img { width: 100%; height: 100%; object-fit: cover; }
.exp-cp-live-thumb--empty { background: #252d3d; }
.exp-cp-live-badge {
    position: absolute;
    bottom: 3px;
    left: 3px;
    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    background: rgba(252,32,68,0.9);
    color: #fff;
    padding: 1px 4px;
    border-radius: 2px;
}
.exp-cp-live-info { min-width: 0; flex: 1; }
.exp-cp-live-canal {
    display: flex;
    align-items: center;
    min-width: 0;
    margin-bottom: 0.12rem;
}
.exp-cp-live-canal .exp-cp-canal-label {
    min-width: 0;
    max-width: 100%;
}
.exp-cp-live-canal .exp-cp-canal-avatar {
    width: 22px;
    height: 22px;
}
.exp-cp-live-canal .exp-cp-canal-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #f1f5f9;
}
.exp-cp-live-title {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #e4e6eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0.1rem 0;
}
.exp-cp-live-meta {
    font-size: 0.76rem;
    color: #fc2044;
    font-weight: 700;
}
.exp-cp-empty { font-size: 0.78rem; color: #718096; margin: 0; }
.exp-cp-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}
.exp-cp-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.7rem;
    border-radius: 9px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    color: #e4e6eb;
    font-size: 0.74rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.exp-cp-link svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7; }
.exp-cp-link:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); }
.exp-cp-link--primary {
    grid-column: 1 / -1;
    background: rgba(252,32,68,0.1);
    border-color: rgba(252,32,68,0.25);
    color: #fc2044;
}
.exp-cp-link--primary:hover { background: rgba(252,32,68,0.18); }
.exp-cp-cat-picker { position: relative; }
.exp-cp-cat-picker-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border-radius: 9px;
    border: 1px dashed rgba(255,255,255,0.12);
    background: transparent;
    color: #a0aec0;
    font-size: 0.74rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.exp-cp-cat-picker-btn svg { width: 14px; height: 14px; opacity: 0.6; }
.exp-cp-cat-picker-btn:hover { border-color: rgba(124,58,237,0.35); color: #e4e6eb; }
.exp-cp-cat-picker-menu {
    margin-top: 0.4rem;
    max-height: 180px;
    overflow-y: auto;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(15,18,28,0.95);
    padding: 0.3rem;
}
.exp-cp-cat-item {
    display: block;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    font-size: 0.76rem;
    color: #e4e6eb;
    text-decoration: none;
    transition: background 0.12s;
}
.exp-cp-cat-item:hover { background: rgba(255,255,255,0.06); }
.exp-cp-cat-live { font-size: 0.65rem; color: #fc2044; font-weight: 600; }

/* Sections (shared with live_categorias heatmap) */
.exp-section { margin-bottom: 2rem; }
.exp-section-header {
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 0.75rem; flex-wrap: wrap;
}
.exp-section-title {
    margin: 0; font-size: 0.95rem; font-weight: 700;
    color: #e4e6eb; display: flex; align-items: center; gap: 0.4rem;
}
.exp-section-more {
    margin-left: auto; font-size: 0.75rem; color: #718096;
    text-decoration: none; transition: color 0.15s;
}
.exp-section-more:hover { color: #e4e6eb; }
.exp-section-sub { font-size: 0.72rem; color: #718096; margin-left: auto; }

/* CATEGORY CARDS (live_categorias) */
.exp-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.85rem; margin-bottom: 1.5rem;
}
.exp-cat-grid--lg {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}
.exp-cat-card {
    border-radius: 12px; overflow: hidden;
    background: #1e2435;
    border: 1px solid rgba(255,255,255,0.05);
    padding: 1rem; display: flex; gap: 0.75rem;
    align-items: flex-start; cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
    position: relative;
    text-decoration: none;
    color: inherit;
}
.exp-cat-card--lg {
    padding: 1.15rem 1.2rem;
    border-radius: 14px;
    flex-direction: column;
    align-items: stretch;
    min-height: 168px;
}
.exp-cat-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--cat-c1, #fc2044) 0%, transparent 55%);
    opacity: 0.1; pointer-events: none; transition: opacity 0.15s;
}
.exp-cat-card:hover { transform: translateY(-2px); border-color: var(--cat-c1, #fc2044); }
.exp-cat-card:hover::before { opacity: 0.18; }
.exp-cat-icon {
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--cat-c1, #fc2044);
    opacity: 0.85;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.exp-cat-icon svg { width: 18px; height: 18px; color: #fff; }
.exp-cat-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.exp-cat-name {
    display: block; font-size: 0.88rem; font-weight: 700;
    color: #e4e6eb; margin-bottom: 0.35rem;
}
.exp-cat-card--lg .exp-cat-name {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}
.exp-cat-stats { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; margin-bottom: 0.35rem; }
.exp-cat-card--lg .exp-cat-stats { margin-bottom: 0.45rem; }
.exp-cat-stat { font-size: 0.68rem; color: #718096; display: flex; align-items: center; gap: 3px; }
.exp-cat-card--lg .exp-cat-stat { font-size: 0.75rem; }
.exp-cat-stat--live { color: #fc2044; font-weight: 600; }
.exp-cat-stat--views { font-weight: 600; color: #cbd5e0; }
.exp-cat-card--lg .dash-delta { font-size: 0.72rem; margin-bottom: 0.65rem; display: inline-block; }
.exp-cat-leader {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: auto;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.exp-cat-leader-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.exp-cat-leader-body { min-width: 0; flex: 1; }
.exp-cat-leader-canal {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #e4e6eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.exp-cat-leader-live {
    display: block;
    font-size: 0.68rem;
    color: #718096;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.1rem;
}
.exp-cat-top { font-size: 0.65rem; color: #a0aec0; font-style: italic; }
.exp-cat-heatmap-btn {
    position: absolute; top: 0.6rem; right: 0.6rem;
    background: rgba(255,255,255,0.06); border: none; border-radius: 5px;
    color: #718096; cursor: pointer; padding: 0.28rem;
    transition: background 0.15s, color 0.15s;
    display: flex; align-items: center;
}
.exp-cat-heatmap-btn:hover { background: rgba(252,32,68,0.15); color: #fc2044; }

/* HEATMAP */
.exp-heatmap-section { margin-top: 0.5rem; }
.exp-heatmap-title { font-size: 0.9rem; }
.exp-heatmap-close {
    margin-left: auto; background: none; border: none;
    color: #718096; cursor: pointer; font-size: 0.85rem;
    padding: 0.2rem 0.4rem; border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.exp-heatmap-close:hover { color: #e4e6eb; background: rgba(255,255,255,0.06); }
.exp-heatmap-container {
    width: 100%; height: 220px;
    background: #13151a; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
}

/* Empty / Loading */
.exp-empty { font-size: 0.82rem; color: #718096; padding: 1rem 0; }
.exp-loading { font-size: 0.82rem; color: #718096; padding: 2rem 0; text-align: center; }

/* Mobile — explorar map */
@media (max-width: 767px) {
    .app-layout .main-content:not(.standalone):has(.exp-page--map) {
        overflow: hidden;
        padding: 0;
        margin-bottom: var(--bottom-bar-total-h);
    }
    .exp-page--map {
        margin: 0;
        height: calc(100dvh - var(--topbar-h, 56px) - var(--bottom-bar-total-h, 60px));
        max-height: calc(100dvh - var(--topbar-h, 56px) - var(--bottom-bar-total-h, 60px));
    }
    .exp-map-header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
        padding: 0.55rem 0.75rem 0.6rem;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        position: relative;
        z-index: 30;
    }
    .exp-map-header-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.65rem;
        min-width: 0;
    }
    .exp-map-header-main {
        flex: 1 1 auto;
        min-width: 0;
    }
    .exp-map-title {
        font-size: 0.92rem;
        margin: 0;
        gap: 0.4rem;
    }
    .exp-map-title svg { width: 17px; height: 17px; }
    .exp-map-subtitle { display: none; }
    .exp-map-header-stats {
        flex: 0 0 auto;
        gap: 0.75rem;
        align-items: center;
    }
    .exp-map-stat-num { font-size: 0.88rem; }
    .exp-map-stat-label { font-size: 0.62rem; }
    .exp-map-header-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.45rem;
        width: 100%;
    }
    .exp-map-countries-btn {
        display: inline-flex;
        width: 100%;
        min-height: 2.15rem;
    }
    .exp-cat-nav { flex: 1; min-width: 0; }
    .exp-cat-nav-btn {
        width: 100%;
        min-height: 2.15rem;
        justify-content: center;
        font-size: 0.74rem;
        padding: 0.4rem 0.55rem;
    }
    .exp-cat-nav-menu { left: 0; right: 0; min-width: 0; z-index: 40; }
    .exp-cat-nav { position: relative; z-index: 41; }
    .exp-map-stage {
        flex: 1;
        flex-direction: row;
        min-height: 0;
        position: relative;
    }
    .exp-map-container {
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
        min-height: 0;
    }
    .exp-map-loading {
        right: 0;
        bottom: 0;
        height: 100%;
    }
    .exp-panel-backdrop:not([hidden]) {
        display: block;
    }
    .exp-country-panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        flex: none;
        height: min(72vh, 520px);
        max-height: min(72vh, 520px);
        z-index: 12;
        transform: translateY(100%);
        transition: transform 0.28s ease;
        pointer-events: none;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
    }
    .exp-country-panel.is-open {
        transform: translateY(0);
        pointer-events: auto;
    }
    .exp-country-panel-inner {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.08);
        border-radius: 14px 14px 0 0;
    }
    .exp-cp-links { grid-template-columns: 1fr; }
    .exp-cat-grid { grid-template-columns: 1fr; }
    .exp-heatmap-container { height: 200px; }
}
@media (min-width: 768px) {
    .exp-heatmap-container { height: 240px; }
}


/* ── Live Categorías page ──────────────────────────────────────────────── */
.lcat-page { padding: 1.25rem 1rem 3rem; max-width: 1200px; margin: 0 auto; }
.lcat-header { margin-bottom: 1.5rem; }
.lcat-header-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.lcat-filter { margin: 0; }
.lcat-filter .custom-select-trigger { min-width: 10rem; }
.lcat-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 1.35rem; font-weight: 700; color: var(--text-primary);
    margin: 0 0 0.25rem;
}
.lcat-title--detail { margin-top: 0.35rem; }
.lcat-title-icon { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.lcat-subtitle { margin: 0; font-size: 0.85rem; color: var(--text-muted); }
.lcat-country-link { color: var(--accent); text-decoration: none; }
.lcat-country-link:hover { text-decoration: underline; }
.lcat-title--pais { gap: 0.65rem; }
.lcat-pais-flag {
    width: 28px;
    height: 20px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.lcat-detail-categorias { grid-column: span 12; }
.lcat-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 0.25rem;
    transition: color 0.15s;
}
.lcat-back svg { width: 14px; height: 14px; }
.lcat-back:hover { color: var(--text-primary); }

/* Detail page */
.lcat-detail-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}
.lcat-detail-kpis {
    grid-column: span 12;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
.lcat-detail-chart { grid-column: span 12; }
.lcat-detail-kpi-leader {
    min-width: 0;
}
.lcat-leader-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.65rem;
    width: 100%;
    margin-top: 0.35rem;
}
.lcat-detail-kpi-leader .lcat-leader-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.lcat-leader-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.lcat-leader-canal {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lcat-leader-live {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lcat-detail-kpi-leader .dash-v2-kpi-live-link {
    flex-shrink: 0;
    align-self: center;
    white-space: nowrap;
}
.lcat-detail-heatmap { grid-column: span 7; }
.lcat-detail-lives { grid-column: span 5; }
.lcat-detail-ondemand { grid-column: span 12; }
.lcat-detail-winners { grid-column: span 12; }
.lcat-detail-lives .dash-v2-live-avatar { width: 28px; height: 28px; }
.lcat-detail-lives .dash-v2-live-card { padding: 0.65rem 0.7rem; align-items: center; }
.lcat-detail-lives .dash-v2-live-body { min-width: 0; flex: 1; }
.lcat-detail-lives .dash-v2-live-canal {
    display: block;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lcat-detail-lives .dash-v2-live-title {
    display: block;
    font-size: 0.82rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lcat-detail-lives .dash-v2-live-viewers { font-size: 0.85rem; font-weight: 700; flex-shrink: 0; }
.lcat-detail-lives .dash-v2-rank { flex-shrink: 0; }
.lcat-winners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.85rem;
}
.lcat-winner-card {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem;
    border-radius: 12px;
    background: var(--bg-surface-1, #1a1d23);
    border: 1px solid rgba(255,255,255,0.05);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, background 0.15s;
    align-items: stretch;
    min-height: 84px;
}
.lcat-winner-card:hover {
    border-color: rgba(252,32,68,0.25);
    background: var(--bg-surface-2, #252830);
}
.lcat-winner-card--empty { align-items: center; justify-content: center; min-height: 100px; }
.lcat-winner-badge {
    display: inline;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent);
    background: rgba(252,32,68,0.12);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    line-height: 1.2;
    margin-right: 0.15rem;
    white-space: nowrap;
    vertical-align: baseline;
}
.lcat-winner-thumb-wrap {
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    background: #252d3d;
}
.lcat-winner-thumb {
    height: 100%;
    width: auto;
    max-width: 148px;
    min-width: 56px;
    object-fit: cover;
    display: block;
}
.lcat-winner-card--short .lcat-winner-thumb { max-width: 52px; min-width: 44px; }
.lcat-winner-body { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.lcat-winner-title {
    display: -webkit-box;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lcat-winner-canal {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lcat-winner-val {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #10b981;
}
.lcat-winner-total {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

@media (max-width: 991px) {
    .lcat-detail-heatmap,
    .lcat-detail-lives,
    .lcat-detail-kpi-leader { grid-column: span 12; }
    .lcat-detail-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }
    .lcat-detail-kpis .lcat-detail-kpi-leader {
        grid-column: 1 / -1;
    }
    .exp-cat-grid--lg { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .lcat-page.lcat-detail {
        padding: 1rem 0.75rem 2.5rem;
    }
    .lcat-header-main {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
    }
    .lcat-filter .custom-select,
    .lcat-filter .custom-select-trigger {
        width: 100%;
        min-width: 0;
    }
    .lcat-title--detail {
        font-size: 1.15rem;
    }
    .lcat-detail-kpis {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .lcat-detail-kpis .dash-v2-kpi {
        padding: 0.7rem 0.75rem;
        gap: 0.6rem;
        align-items: center;
        min-width: 0;
        border-radius: 12px;
        overflow: visible;
    }
    .lcat-detail-kpis .dash-v2-kpi:not(.lcat-detail-kpi-leader) {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }
    .lcat-detail-kpis .dash-v2-kpi-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        margin-top: 0.1rem;
    }
    .lcat-detail-kpis .dash-v2-kpi-icon svg {
        width: 15px;
        height: 15px;
    }
    .lcat-detail-kpis .dash-v2-kpi-body {
        flex: 1;
        min-width: 0;
        overflow: visible;
    }
    .lcat-detail-kpis .dash-v2-kpi-num {
        font-size: 1.35rem;
        line-height: 1.1;
        white-space: nowrap;
        overflow: visible;
        text-overflow: unset;
    }
    .lcat-detail-kpis .dash-v2-kpi-label {
        font-size: 0.72rem;
        line-height: 1.3;
        margin-top: 0.15rem;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }
    .lcat-detail-kpis .dash-v2-kpi .dash-delta {
        display: block;
        font-size: 0.68rem;
        line-height: 1.25;
        margin-top: 0.3rem;
        white-space: normal;
    }
    .lcat-detail-kpi-leader.dash-v2-kpi {
        padding: 0.7rem 0.75rem;
        align-items: flex-start;
    }
    .lcat-detail-kpi-leader .dash-v2-kpi-label {
        font-size: 0.72rem;
        margin-bottom: 0.2rem;
    }
    .lcat-detail-kpi-leader .lcat-leader-row {
        margin-top: 0;
        gap: 0.55rem;
    }
    .lcat-detail-kpi-leader .lcat-leader-avatar {
        width: 36px;
        height: 36px;
    }
    .lcat-leader-canal {
        font-size: 0.82rem;
        line-height: 1.25;
    }
    .lcat-leader-live {
        font-size: 0.7rem;
    }
    .lcat-detail-kpi-leader .dash-v2-kpi-live-link {
        font-size: 0.72rem;
    }
    .lcat-detail-lives .dash-v2-live-card {
        flex-wrap: wrap;
        gap: 0.45rem;
    }
    .lcat-winners-grid {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 768px) {
    .lcat-page { padding: 1.25rem 1.5rem 3rem; }
}

/* ── Contenido Visto ───────────────────────────────────────────────────── */
.cv-page { padding: 1.25rem 1rem 3rem; max-width: 1400px; margin: 0 auto; }

.cv-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.cv-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 1.35rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.2rem;
}
.cv-title-icon { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.cv-subtitle { margin: 0; font-size: 0.83rem; color: var(--text-muted); }
.cv-count-wrap { display: flex; align-items: center; }
.cv-count {
    font-size: 0.8rem; color: var(--text-muted);
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px; padding: 0.2rem 0.65rem;
}

/* Controls bar */
.cv-controls {
    display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
    margin-bottom: 1.5rem; position: sticky; top: 0; z-index: 20;
    background: var(--bg-main); padding: 0.65rem 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cv-type-switch {
    display: flex; background: rgba(255,255,255,0.05); border-radius: 8px;
    padding: 3px; gap: 2px; border: 1px solid rgba(255,255,255,0.08);
}
.cv-type-btn {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.75rem; border-radius: 6px; border: none; cursor: pointer;
    font-size: 0.82rem; font-weight: 600;
    color: var(--text-muted); background: transparent; transition: all 0.15s;
}
.cv-type-btn:hover { color: var(--text-primary); }
.cv-type-btn--active {
    background: var(--accent); color: #fff;
}
.cv-filter-wrap { position: relative; }
.cv-select {
    appearance: none; -webkit-appearance: none;
    background: rgba(255,255,255,0.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 0.6rem center;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
    color: var(--text-primary); font-size: 0.82rem;
    padding: 0.35rem 2rem 0.35rem 0.75rem; cursor: pointer; outline: none;
    transition: border-color 0.15s;
}
.cv-select:hover, .cv-select:focus { border-color: rgba(255,255,255,0.25); }

/* Grid */
.cv-grid { position: relative; }
.cv-items-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (min-width: 560px)  { .cv-items-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .cv-items-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .cv-items-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1500px) { .cv-items-grid { grid-template-columns: repeat(6, 1fr); } }

/* Skeleton loading */
.cv-loading {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (min-width: 560px)  { .cv-loading { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .cv-loading { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .cv-loading { grid-template-columns: repeat(5, 1fr); } }

/* Card */
.cv-card {
    display: flex; flex-direction: column;
    border-radius: 10px; overflow: hidden;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
    text-decoration: none; color: inherit; transition: transform 0.15s, border-color 0.15s;
}
.cv-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.16); }
.cv-card:hover .cv-play-icon { opacity: 1; }

.cv-thumb-wrap {
    position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 */
    background: #1a1d23; overflow: hidden;
}
.cv-thumb-wrap--err { background: #1e2230; }
.cv-thumb {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.2s;
}
.cv-card:hover .cv-thumb { transform: scale(1.04); }
.cv-play-icon {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.35); opacity: 0; transition: opacity 0.15s;
    color: #fff;
}

/* Skeleton thumb */
.cv-thumb-wrap--skeleton {
    padding-bottom: 56.25%;
    background: linear-gradient(90deg, #1e2230 25%, #252a3a 50%, #1e2230 75%);
    background-size: 200% 100%;
    animation: cv-shimmer 1.4s infinite;
}
@keyframes cv-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.cv-skeleton-line {
    height: 10px; border-radius: 4px; margin-bottom: 6px;
    background: linear-gradient(90deg, #1e2230 25%, #252a3a 50%, #1e2230 75%);
    background-size: 200% 100%;
    animation: cv-shimmer 1.4s infinite;
}
.cv-skeleton-line--title { width: 85%; height: 11px; }
.cv-skeleton-line--meta  { width: 55%; }

/* Card body */
.cv-card-body { padding: 0.55rem 0.65rem 0.65rem; display: flex; flex-direction: column; gap: 0.35rem; }
.cv-card-title {
    font-size: 0.78rem; font-weight: 600; color: var(--text-primary);
    line-height: 1.35; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cv-card-channel {
    display: flex; align-items: center; gap: 0.35rem; margin-top: 0.1rem;
}
.cv-avatar {
    width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    background: #252a3a;
}
.cv-avatar-placeholder {
    width: 18px; height: 18px; border-radius: 50%; background: #252a3a; flex-shrink: 0;
}
.cv-canal-name {
    font-size: 0.73rem; color: var(--text-muted); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
}
.cv-flag { width: 16px; height: 11px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.cv-card-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.4rem; margin-top: 0.05rem;
}
.cv-views-stat { font-size: 0.71rem; font-weight: 700; color: var(--accent); }
.cv-date-stat  { font-size: 0.69rem; color: var(--text-muted); text-align: right; }

.cv-empty {
    text-align: center; color: var(--text-muted); padding: 3rem 1rem;
    font-size: 0.9rem; grid-column: 1/-1;
}

/* Shorts: aspecto 9:16 */
.cv-card--short .cv-thumb-wrap { padding-bottom: 177.78%; /* 9:16 */ }
.cv-card--short .cv-thumb-wrap--skeleton { padding-bottom: 177.78%; }

/* Grid shorts: más columnas porque las cards son más angostas */
.cv-items-grid--shorts {
    grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 560px)  { .cv-items-grid--shorts { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px)  { .cv-items-grid--shorts { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1200px) { .cv-items-grid--shorts { grid-template-columns: repeat(7, 1fr); } }
@media (min-width: 1500px) { .cv-items-grid--shorts { grid-template-columns: repeat(9, 1fr); } }

/* ═══════════════════════════════════════════════════════
   DASHBOARD V2 (/dash)
═══════════════════════════════════════════════════════ */
.dash-v2 {
    max-width: none;
    width: 100%;
    padding: 0 0 2rem;
}
.dash-v2-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.dash-v2-header-main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}
.dash-v2-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text-primary, #e4e6eb);
}
.dash-v2-filter { margin: 0; }
.dash-v2-filter .custom-select-trigger { min-width: 10rem; }

/* Grid layout — cards que se encajan horizontalmente */
.dash-v2-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.75rem;
    align-items: start;
}
#dash-v2-zone-chart,
#dash-v2-zone-lives,
#dash-v2-zone-sidebar,
#dash-v2-zone-categories {
    align-self: stretch;
}
@media (min-width: 768px) {
    #dash-v2-zone-chart,
    #dash-v2-zone-lives,
    #dash-v2-zone-categories {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    #dash-v2-zone-lives .dash-v2-section-head { flex-shrink: 0; }
    #dash-v2-zone-categories .dash-v2-section-title { flex-shrink: 0; }
    #dash-v2-zone-categories .dash-v2-cat-split {
        flex: 1;
        min-height: 442px;
        align-items: stretch;
    }
    #dash-v2-zone-categories .dash-v2-cat-pie {
        height: 100%;
        min-height: 442px;
    }
    #dash-v2-zone-categories .dash-v2-cat-list {
        max-height: none;
        height: 100%;
    }
    .dash-v2-lives-col .dash-v2-lives,
    #dash-v2-zone-lives .dash-v2-lives {
        flex: 0 0 auto;
        min-height: 0;
        overflow-y: auto;
    }
    #dash-v2-zone-sidebar.dash-v2-sidebar-col {
        min-height: 0;
    }
}
.dash-v2-span-12 { grid-column: span 12; }
.dash-v2-span-9  { grid-column: span 9; }
.dash-v2-span-8  { grid-column: span 8; }
.dash-v2-span-7  { grid-column: span 7; }
.dash-v2-span-6  { grid-column: span 6; }
.dash-v2-span-5  { grid-column: span 5; }
.dash-v2-span-4  { grid-column: span 4; }
.dash-v2-span-3  { grid-column: span 3; }

.dash-v2-card {
    background: var(--bg-surface-1, #1a1d23);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 0.85rem 1rem 1rem;
    min-width: 0;
}
.dash-v2-kpis-wrap { min-width: 0; }

.dash-v2-scroll {
    max-height: 380px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #3a3f4b transparent;
    padding-right: 0.15rem;
}
.dash-v2-scroll::-webkit-scrollbar { width: 4px; }
.dash-v2-scroll::-webkit-scrollbar-thumb { background: #3a3f4b; border-radius: 3px; }

#dash-v2-zone-lives .dash-v2-lives {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #3a3f4b transparent;
    padding-right: 0.15rem;
}
#dash-v2-zone-lives .dash-v2-lives::-webkit-scrollbar { width: 4px; }
#dash-v2-zone-lives .dash-v2-lives::-webkit-scrollbar-thumb { background: #3a3f4b; border-radius: 3px; }

.dash-v2-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
    margin-bottom: 0;
}
.dash-v2-kpi {
    background: var(--bg-surface-1, #1a1d23);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 0.85rem 0.9rem 0.75rem;
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}
.dash-v2-kpi::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary, #fc2044), transparent);
    opacity: 0.45;
}
.dash-v2-kpi-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(252,32,68,0.12);
    color: var(--primary, #fc2044);
}
.dash-v2-kpi-icon svg { width: 16px; height: 16px; }
.dash-v2-kpi-body { min-width: 0; flex: 1; }
.dash-v2-kpi-num {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary, #e4e6eb);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.dash-v2-kpi-label {
    display: block;
    font-size: 0.68rem;
    color: var(--text-muted, #718096);
    margin-top: 0.15rem;
}
.dash-v2-kpi-sub {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    font-size: 0.65rem;
    color: var(--text-muted, #a0aec0);
    flex-wrap: wrap;
}
.dash-v2-kpi-sub.lcat-leader-row {
    flex-wrap: nowrap;
    gap: 0.65rem;
    font-size: inherit;
    color: inherit;
}
.dash-v2-kpi-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
}
.dash-v2-kpi-live-link {
    color: var(--primary, #fc2044);
    font-weight: 600;
    text-decoration: none;
    margin-left: auto;
}

.dash-delta {
    display: inline-flex;
    align-items: center;
    font-size: 0.76rem;
    font-weight: 700;
    margin-top: 0.25rem;
}
.dash-v2-kpi .dash-delta { font-size: 0.8rem; margin-top: 0.3rem; }
.dash-delta--sm { font-size: 0.72rem; margin-top: 0; }
.dash-v2-live-meta .dash-delta--sm { font-size: 0.76rem; }
.dash-delta--up { color: #48bb78; }
.dash-delta--down { color: #fc8181; }

/* PWA install KPI (mobile browser only) */
.dash-v2-kpi--install {
    padding: 0;
    border-color: rgba(252, 32, 68, 0.35);
    background: linear-gradient(135deg, rgba(252, 32, 68, 0.14) 0%, rgba(124, 58, 237, 0.1) 100%);
    box-shadow: 0 0 0 1px rgba(252, 32, 68, 0.08), 0 8px 24px rgba(252, 32, 68, 0.12);
}
.dash-v2-kpi--install::after {
    opacity: 0.85;
    height: 3px;
}
.dash-v2-kpi-install-btn {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    width: 100%;
    padding: 0.85rem 0.9rem 0.75rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.dash-v2-kpi-icon--install {
    background: rgba(252, 32, 68, 0.22);
    animation: pwa-bell-pulse 2.4s ease-in-out infinite;
}
.dash-v2-kpi-num--install {
    font-size: 1.05rem !important;
    line-height: 1.25;
}
.dash-v2-kpi-install-cta {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary, #fc2044);
}
.dash-v2-kpi--push {
    padding: 0;
    border-color: rgba(124, 58, 237, 0.35);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.14) 0%, rgba(252, 32, 68, 0.1) 100%);
    box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.08), 0 8px 24px rgba(124, 58, 237, 0.12);
}
.dash-v2-kpi--push::after {
    opacity: 0.85;
    height: 3px;
}
.dash-v2-kpi-icon--push {
    background: rgba(124, 58, 237, 0.22);
    animation: pwa-bell-pulse 2.4s ease-in-out infinite;
}
.dash-v2-pwa-push-feedback {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    line-height: 1.35;
}
.dash-v2-pwa-push-feedback.is-error { color: #fc8181; }
.dash-v2-pwa-push-feedback.is-success { color: #48bb78; }
@media (max-width: 767px) {
    .dash-v2-kpis--4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .dash-v2-kpi--install,
    .dash-v2-kpi--push {
        grid-column: 1 / -1;
    }
}
@media (min-width: 768px) {
    #dash-v2-pwa-install,
    #dash-v2-pwa-push { display: none !important; }
}
#dash-v2-pwa-install[hidden],
.dash-v2-pwa-install--hidden,
html.ld-pwa-mode #dash-v2-pwa-install,
html[data-pwa-installed="1"] #dash-v2-pwa-install,
#dash-v2-pwa-push[hidden],
.dash-v2-pwa-push--hidden {
    display: none !important;
}
@keyframes pwa-bell-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(252, 32, 68, 0.35); }
    50% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(252, 32, 68, 0); }
}

.pwa-icon-update-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 11000;
    padding: 0.65rem 0.75rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
}
.pwa-icon-update-banner-inner {
    pointer-events: auto;
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(252, 32, 68, 0.35);
    background: rgba(26, 29, 35, 0.96);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
.pwa-icon-update-banner-text {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #e2e8f0;
}
.pwa-icon-update-banner-actions {
    flex-shrink: 0;
}

/* PWA modals */
body.pwa-modal-open { overflow: hidden; }
.pwa-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 12000;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}
.pwa-modal-overlay.visible { display: block; }
.pwa-modal {
    display: none;
    position: fixed;
    z-index: 12001;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: min(92vw, 400px);
    max-height: min(88vh, 560px);
    overflow: auto;
    background: var(--bg-surface-1, #1a1d23);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.35rem 1.25rem 1.15rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.pwa-modal.open {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.pwa-modal-close {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pwa-modal-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.65rem;
}
.pwa-modal-icon--bell { filter: drop-shadow(0 0 8px rgba(252, 32, 68, 0.45)); }
.pwa-modal-title {
    margin: 0 0 0.65rem;
    font-size: 1.15rem;
    font-weight: 700;
}
.pwa-modal-body,
.pwa-modal-note {
    margin: 0 0 1rem;
    color: var(--text-muted, #9ca3af);
    font-size: 0.92rem;
    line-height: 1.45;
}
.pwa-modal-steps {
    margin: 0 0 1rem 1.1rem;
    padding: 0;
    color: var(--text-muted, #9ca3af);
    font-size: 0.92rem;
    line-height: 1.5;
}
.pwa-modal-steps li + li { margin-top: 0.45rem; }
.pwa-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.75rem;
    vertical-align: middle;
}
.pwa-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.pwa-modal-feedback {
    margin-top: 0.65rem;
    font-size: 0.85rem;
    min-height: 1.1em;
}
.pwa-modal-feedback.is-error { color: #f87171; }
.pwa-modal-feedback.is-success { color: #34d399; }

.dash-v2-totals {
    display: flex;
    gap: 0.65rem;
}
.dash-v2-totals-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.85rem;
    min-height: 100%;
}
.dash-v2-total {
    flex: 1;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
}
.dash-v2-total-num {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary, #e4e6eb);
}
.dash-v2-total-label {
    font-size: 0.68rem;
    color: var(--text-muted, #718096);
}

.dash-v2-section { margin-bottom: 0; }
.dash-v2-card .dash-v2-section-title { margin-bottom: 0.65rem; }
.dash-v2-section-title--spaced { margin-top: 0.85rem; }
.dash-v2-section-sub--block { display: block; margin: -0.35rem 0 0.65rem; }
.dash-v2-heatmap-peak {
    font-size: 0.78rem;
    color: var(--text-muted, #718096);
    white-space: nowrap;
}
.dash-v2-heatmap-peak strong { color: var(--primary, #fc2044); font-weight: 800; }
.dash-v2-heatmap {
    width: 100%;
    height: 240px;
    border-radius: 10px;
    background: rgba(0,0,0,0.15);
}
.dash-v2-heatmap--wide { height: 260px; }
.dash-v2-chart-12h {
    width: 100%;
    height: 280px;
}
.dash-v2-chart-12h--hero {
    flex: 0 0 auto;
    flex-shrink: 0;
    min-height: 280px;
    height: 280px;
    width: 100%;
}
.dash-v2-chart-hero {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 0;
}
.dash-v2-chart-hero .dash-v2-section-head { flex-shrink: 0; margin-bottom: 0.5rem; }
.dash-v2-chart-hero .dash-v2-empty { flex: 1; }
.dash-v2-chart-hero .dash-v2-chart-12h--hero {
    flex: 0 0 auto;
    flex-shrink: 0;
    min-height: 280px;
    height: 280px;
    width: 100%;
}

.dash-v2-lives-col {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 0;
}
.dash-v2-lives-col .dash-v2-section-head { flex-shrink: 0; margin-bottom: 0.5rem; }
.dash-v2-lives-col .dash-v2-empty { flex: 1; }

/* Watermark de fondo para gráficos de línea (logo centrado, opacidad baja) */
.chart-line-watermark {
    position: relative;
    overflow: hidden;
}
.chart-line-watermark::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    width: clamp(200px, 72%, 520px);
    aspect-ratio: 900 / 187;
    background: url('logo_livedata_blanco.png') center center / contain no-repeat;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}
/* Leyenda arriba (favoritos): centrar watermark en el área del plot */
.chart-line-watermark--legend-top::before {
    top: 55%;
}

/* Columna izquierda: top 3 + heatmap (junto a viewers por categoría) */
.dash-v2-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    align-self: stretch;
}
.dash-v2-sidebar-col .dash-v2-cat-stack-wrap { flex: 0 0 auto; }
.dash-v2-heatmap-sidebar {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.dash-v2-heatmap--sidebar {
    flex: 1;
    min-height: 160px;
    height: auto;
}
.dash-v2-heatmap-peak--inline {
    margin: 0.65rem 0 0;
    padding: 0.6rem 0.75rem;
    font-size: 0.82rem;
    text-align: center;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(252,32,68,0.12) 0%, rgba(124,58,237,0.07) 100%);
    border: 1px solid rgba(252,32,68,0.22);
    color: var(--text-primary, #e4e6eb);
}
.dash-v2-heatmap-peak--inline strong {
    font-size: 1rem;
    letter-spacing: 0.01em;
}
.dash-v2-heatmap-peak-val {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--primary, #fc2044);
}
.dash-v2-section-head--compact { margin-bottom: 0.45rem; }
.dash-v2-section-head--compact .dash-v2-section-title { margin-bottom: 0.15rem; }

/* Top 3 categorías — stack vertical al lado del gráfico */
.dash-v2-cat-stack-wrap { display: flex; flex-direction: column; }
.dash-v2-cat-stack {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
}
.dash-v2-cat-stack-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.72rem 0.78rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
}
a.dash-v2-cat-stack-item {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.12s var(--ease);
}
a.dash-v2-cat-stack-item:hover {
    border-color: rgba(252, 32, 68, 0.35);
    background: rgba(255, 255, 255, 0.05);
}
a.dash-v2-cat-stack-item:active {
    transform: scale(0.99);
}
.dash-v2-cat-stack-item--1 {
    padding: 0.85rem 0.8rem;
    background: linear-gradient(135deg, rgba(252,32,68,0.12) 0%, rgba(255,255,255,0.03) 100%);
    border-color: rgba(252,32,68,0.22);
}
.dash-v2-cat-stack-item--2,
.dash-v2-cat-stack-item--3 {
    padding: 0.78rem 0.8rem;
}
.dash-v2-cat-stack-rank {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--primary, #fc2044);
    min-width: 2.1rem;
    text-align: center;
    flex-shrink: 0;
}
.dash-v2-cat-stack-item--1 .dash-v2-cat-stack-rank { font-size: 1.5rem; }
.dash-v2-cat-stack-item--2 .dash-v2-cat-stack-rank,
.dash-v2-cat-stack-item--3 .dash-v2-cat-stack-rank { font-size: 1.28rem; }
.dash-v2-cat-stack-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
}
.dash-v2-cat-stack-name {
    display: inline;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary, #e4e6eb);
    line-height: 1.25;
    margin-bottom: 0;
}
.dash-v2-cat-stack-item--1 .dash-v2-cat-stack-name { font-size: 0.98rem; }
.dash-v2-cat-stack-item--2 .dash-v2-cat-stack-name,
.dash-v2-cat-stack-item--3 .dash-v2-cat-stack-name { font-size: 0.92rem; }
.dash-v2-cat-stack-viewers {
    display: inline;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--primary, #fc2044);
    white-space: nowrap;
}
.dash-v2-cat-stack-item--1 .dash-v2-cat-stack-viewers { font-size: 0.92rem; }
.dash-v2-cat-stack-item--2 .dash-v2-cat-stack-viewers,
.dash-v2-cat-stack-item--3 .dash-v2-cat-stack-viewers { font-size: 0.86rem; }
.dash-v2-cat-stack-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-muted, #718096);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Viewers por categoría: torta + listado lado a lado */
.dash-v2-cat-split {
    display: grid;
    grid-template-columns: minmax(260px, 42%) 1fr;
    gap: 0.85rem;
    align-items: start;
}
.dash-v2-cat-split .dash-v2-cat-list {
    max-height: 442px;
}
.dash-v2-cat-list--compact .dash-v2-cat-row { padding: 0.45rem 0.55rem; }
.dash-v2-cat-pie {
    width: 100%;
    height: 442px;
    min-height: 360px;
}
.dash-v2-skeleton--pie { height: 442px; }

/* On demand winner */
.dash-v2-od-winner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.7rem;
    margin-bottom: 0.55rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(252,32,68,0.12) 0%, rgba(124,58,237,0.08) 100%);
    border: 1px solid rgba(252,32,68,0.22);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.15s;
}
.dash-v2-od-winner:hover {
    border-color: rgba(252,32,68,0.4);
    transform: translateY(-1px);
}
.dash-v2-od-winner-badge {
    font-size: 0.72rem;
    font-weight: 900;
    color: #fc2044;
    background: rgba(252,32,68,0.15);
    border-radius: 6px;
    padding: 0.15rem 0.4rem;
    flex-shrink: 0;
}
.dash-v2-od-winner-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(252,32,68,0.35);
}
.dash-v2-od-winner-body { flex: 1; min-width: 0; }
.dash-v2-od-winner-name {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary, #e4e6eb);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-v2-od-winner-val {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--primary, #fc2044);
    margin-top: 0.1rem;
}
.dash-v2-od-runners { display: flex; flex-direction: column; gap: 0.2rem; }
.dash-v2-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.dash-v2-section-title {
    margin: 0 0 0.75rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary, #e4e6eb);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.dash-v2-section-head .dash-v2-section-title { margin-bottom: 0; }
.dash-v2-section-link {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted, #718096);
    text-decoration: none;
}
.dash-v2-section-link:hover { color: var(--primary, #fc2044); }
.dash-v2-section-sub {
    font-size: 0.68rem;
    color: var(--text-muted, #718096);
}
.dash-v2-empty {
    font-size: 0.8rem;
    color: var(--text-muted, #718096);
    margin: 0;
    padding: 0.5rem 0;
}
.dash-v2-skeleton {
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
.dash-v2-skeleton--chart { height: 320px; margin-top: 0.5rem; }
.dash-v2-skeleton--block { height: 140px; }
.dash-v2-skeleton--list { height: 280px; margin-top: 0.5rem; }
.dash-v2-skeleton--pie { height: 384px; }
.dash-v2-cache-hint {
    font-size: 0.72rem;
    color: var(--text-muted, #718096);
    margin: 0.35rem 0 0;
}

.dash-v2-rank {
    width: 26px;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text-muted, #718096);
    text-align: center;
    flex-shrink: 0;
}

/* Live cards */
.dash-v2-lives {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.dash-v2-live-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem;
    border-radius: 12px;
    background: var(--bg-surface-1, #1a1d23);
    border: 1px solid rgba(255,255,255,0.05);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, border-color 0.15s;
}
.dash-v2-live-card:hover {
    background: var(--bg-surface-2, #252830);
    border-color: rgba(252,32,68,0.2);
}
.dash-v2-live-card--chart {
    box-shadow: inset 3px 0 0 var(--dash-live-accent, transparent);
}
.dash-v2-live-thumb {
    position: relative;
    width: 96px;
    height: 54px;
    border-radius: 8px;
    overflow: hidden;
    background: #252d3d;
    flex-shrink: 0;
}
.dash-v2-live-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dash-v2-live-thumb--empty { background: #252d3d; }
.dash-v2-live-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    background: rgba(252,32,68,0.92);
    color: #fff;
    padding: 1px 4px;
    border-radius: 2px;
}
.dash-v2-live-body { min-width: 0; flex: 1; }
.dash-v2-live-channel {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.15rem;
}
.dash-v2-live-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.dash-v2-live-canal {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted, #a0aec0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-v2-live-title {
    margin: 0 0 0.2rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary, #e4e6eb);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-v2-live-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}
.dash-v2-live-viewers {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--primary, #fc2044);
}
.dash-v2-live-tags {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.62rem;
    color: var(--text-muted, #718096);
    margin-top: 0.15rem;
}
.dash-v2-flag {
    width: 14px;
    height: auto;
    border-radius: 2px;
}
.dash-v2-flag--lg { width: 22px; height: auto; border-radius: 2px; }

/* Channel rows */
.dash-v2-channels {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.dash-v2-channel-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.65rem;
    border-radius: 11px;
    background: var(--bg-surface-1, #1a1d23);
    border: 1px solid rgba(255,255,255,0.05);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.dash-v2-channel-row:hover { background: var(--bg-surface-2, #252830); }
.dash-v2-channel-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.dash-v2-channel-info { flex: 1; min-width: 0; }
.dash-v2-channel-name {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary, #e4e6eb);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-v2-channel-viewers {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary, #fc2044);
}
.dash-v2-channel-tags {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.62rem;
    color: var(--text-muted, #718096);
}
.dash-v2-channel-delta { margin-left: auto; flex-shrink: 0; }

/* Categories */
.dash-v2-cat-top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.dash-v2-cat-top-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 0.65rem 0.75rem;
    text-align: center;
}
.dash-v2-cat-top--compact .dash-v2-cat-top-card { padding: 0.45rem 0.55rem; }
.dash-v2-cat-top-rank {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--primary, #fc2044);
    margin-bottom: 0.15rem;
}
.dash-v2-cat-top-name {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary, #e4e6eb);
    margin-bottom: 0.2rem;
}
.dash-v2-cat-top-viewers {
    font-size: 0.65rem;
    color: var(--text-muted, #718096);
}
.dash-v2-cat-list { display: flex; flex-direction: column; gap: 0.45rem; }
.dash-v2-cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    flex-wrap: wrap;
}
.dash-v2-cat-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    flex-wrap: wrap;
}
.dash-v2-cat-row-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary, #e4e6eb);
}
.dash-v2-cat-row-viewers {
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--primary, #fc2044);
    white-space: nowrap;
}
.dash-v2-cat-row-viewers-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-muted, #718096);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.dash-v2-cat-row-total {
    font-size: 0.68rem;
    color: var(--primary, #fc2044);
    font-weight: 600;
}
.dash-v2-cat-leader {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--text-muted, #a0aec0);
    text-decoration: none;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    background: rgba(255,255,255,0.03);
}
.dash-v2-cat-leader:hover { color: var(--text-primary, #e4e6eb); }
.dash-v2-cat-leader-name {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-v2-cat-leader-viewers {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--primary, #fc2044);
    white-space: nowrap;
}
.dash-v2-cat-leader-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}
.dash-v2-cat-leader-viewers {
    color: var(--primary, #fc2044);
    font-weight: 600;
}

/* On demand */
.dash-v2-ondemand {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
}
.dash-v2-od-block {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 0.65rem;
}
.dash-v2-od-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.dash-v2-od-head-text { min-width: 0; }
.dash-v2-od-head h3 {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary, #e4e6eb);
}
.dash-v2-od-sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--text-muted, #718096);
    line-height: 1.3;
}
.dash-v2-od-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.2rem;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
    transition: background 0.12s;
}
.dash-v2-od-row:hover { background: rgba(255,255,255,0.04); }
.dash-v2-od-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}
.dash-v2-od-name {
    flex: 1;
    min-width: 0;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-primary, #e4e6eb);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-v2-od-val {
    font-size: 0.65rem;
    font-weight: 700;
    color: #48bb78;
}

/* Países */
.dash-v2-paises { display: flex; flex-direction: column; gap: 0.5rem; }
.dash-v2-pais-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.65rem;
    border-radius: 11px;
    background: var(--bg-surface-1, #1a1d23);
    border: 1px solid rgba(255,255,255,0.05);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.dash-v2-pais-row:hover { background: var(--bg-surface-2, #252830); }
.dash-v2-pais-flag {
    width: 28px;
    height: 19px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}
.dash-v2-pais-info { flex: 1; min-width: 0; }
.dash-v2-pais-name {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary, #e4e6eb);
    margin-bottom: 0.35rem;
}
.dash-v2-pais-bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 0.25rem;
}
.dash-v2-bar-wrap {
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
}
.dash-v2-bar {
    height: 100%;
    border-radius: 2px;
    min-width: 2px;
    transition: width 0.3s ease;
}
.dash-v2-bar--viewers { background: var(--primary, #fc2044); }
.dash-v2-bar--canales { background: #7c3aed; opacity: 0.85; }
.dash-v2-pais-meta {
    font-size: 0.62rem;
    color: var(--text-muted, #718096);
}

/* Growth */
.dash-v2-growth { display: flex; flex-direction: column; gap: 0.45rem; }
.dash-v2-growth-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    background: var(--bg-surface-1, #1a1d23);
    border: 1px solid rgba(255,255,255,0.05);
    text-decoration: none;
    color: inherit;
}
.dash-v2-growth-row:hover { background: var(--bg-surface-2, #252830); }
.dash-v2-growth-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}
.dash-v2-growth-info { flex: 1; min-width: 0; }
.dash-v2-growth-name {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary, #e4e6eb);
}
.dash-v2-growth-detail {
    font-size: 0.62rem;
    color: var(--text-muted, #718096);
}

@media (max-width: 1200px) {
    .dash-v2-span-8 { grid-column: span 12; }
    .dash-v2-sidebar-col,
    .dash-v2-span-4.dash-v2-heatmap-sidebar { grid-column: span 12; }
    .dash-v2-sidebar-col { flex-direction: row; flex-wrap: wrap; }
    .dash-v2-sidebar-col .dash-v2-cat-stack-wrap,
    .dash-v2-sidebar-col .dash-v2-heatmap-sidebar { flex: 1; min-width: 280px; }
    .dash-v2-cat-stack { flex-direction: row; flex-wrap: wrap; }
    .dash-v2-cat-stack-item { flex: 1; min-width: 160px; }
}
@media (max-width: 1100px) {
    .dash-v2-span-7,
    .dash-v2-span-8 { grid-column: span 12; }
    .dash-v2-span-5,
    .dash-v2-span-4,
    .dash-v2-span-6 { grid-column: span 6; }
    .dash-v2-cat-split { grid-template-columns: 1fr; }
    .dash-v2-cat-pie { height: 230px; min-height: 200px; }
    .dash-v2-skeleton--pie { height: 230px; }
}
@media (max-width: 767px) {
    .dash-v2-kpis { grid-template-columns: 1fr; }
    .dash-v2-sidebar-col { flex-direction: column; }
    .dash-v2-cat-stack { flex-direction: column; }
    .dash-v2-cat-stack-item { min-width: 0; }
    .dash-v2-live-thumb { width: 80px; height: 45px; }
    .dash-v2-span-5,
    .dash-v2-span-4,
    .dash-v2-span-6,
    .dash-v2-span-8 { grid-column: span 12; }
    .dash-v2-ondemand { grid-template-columns: 1fr; }
    .dash-v2-chart-12h--hero { min-height: 260px; }
    #dash-v2-zone-lives .dash-v2-lives-scroll {
        max-height: 380px;
    }
}
@media (min-width: 768px) {
    .dash-v2-kpis { gap: 0.85rem; }
    .dash-v2-kpi-num { font-size: 1.5rem; }
}

/* ── Comparar canales ─────────────────────────────────────────────────────── */
.cmp-page {
    max-width: 1200px;
    margin: 0 auto;
    --cmp-color-a: #fc2044;
    --cmp-color-b: #38bdf8;
}
.cmp-header { margin-bottom: 1.25rem; }
.cmp-title {
    margin: 0 0 0.25rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
}
.cmp-subtitle { margin: 0; font-size: 0.85rem; color: var(--text-muted); }

.cmp-toolbar {
    display: grid;
    grid-template-columns: 1fr minmax(220px, 1.1fr) 1fr;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}
.cmp-picker-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cmp-picker-box {
    position: relative;
    min-height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--bg-surface-1, #1a1d23);
}
.cmp-picker-row {
    display: flex;
    align-items: stretch;
    min-height: 46px;
}
.cmp-picker-selected {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.5rem 0.45rem 0.65rem;
    flex-shrink: 0;
    max-width: 58%;
    min-width: 0;
}
.cmp-picker-box--filled .cmp-picker-selected {
    border-right: 1px solid rgba(255,255,255,0.08);
}
.cmp-picker-avatar,
.cmp-dd-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-sizing: border-box;
}
#cmp-picker-1 .cmp-picker-avatar {
    border: 2px solid var(--cmp-color-a);
}
#cmp-picker-2 .cmp-picker-avatar {
    border: 2px solid var(--cmp-color-b);
}
.cmp-picker-name,
.cmp-dd-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cmp-picker-clear {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.15rem;
}
.cmp-picker-clear:hover { color: var(--text-primary); }
.cmp-picker-search {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}
.cmp-picker-input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.88rem;
    padding: 0.72rem 0.85rem;
    outline: none;
    min-width: 0;
}
.cmp-picker-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 260px;
    overflow-y: auto;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(15,18,28,0.98);
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.14) transparent;
}
.cmp-picker-dropdown::-webkit-scrollbar { width: 4px; }
.cmp-picker-dropdown::-webkit-scrollbar-track { background: transparent; }
.cmp-picker-dropdown::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.14);
    border-radius: 999px;
}
.cmp-picker-dropdown::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }
.cmp-dd-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    padding: 0.55rem 0.65rem;
    cursor: pointer;
    font-family: inherit;
}
.cmp-dd-item:hover { background: rgba(255,255,255,0.06); }
.cmp-dd-body { min-width: 0; flex: 1; }
.cmp-dd-meta {
    display: block;
    font-size: 0.72rem;
    color: #fc2044;
    margin-top: 0.1rem;
}
.cmp-dd-hint {
    padding: 0.75rem 0.85rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.cmp-range-inner {
    min-height: 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--bg-surface-1, #1a1d23);
}
.cmp-range-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.cmp-range-btn {
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: var(--text-muted);
    border-radius: 8px;
    padding: 0.35rem 0.55rem;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cmp-range-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.cmp-range-btn--active {
    color: #c4b5fd;
    border-color: rgba(124,58,237,0.35);
    background: rgba(124,58,237,0.12);
}
.cmp-range-custom {
    display: none;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}
.cmp-range-custom.is-open {
    display: flex;
}
.cmp-range-custom[hidden] {
    display: none !important;
}
.cmp-date-input {
    flex: 1;
    min-width: 120px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.2);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
    font-size: 0.78rem;
    font-family: inherit;
}
.cmp-range-sep { color: var(--text-muted); font-size: 0.78rem; }

.cmp-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
}
.cmp-results { display: flex; flex-direction: column; gap: 1rem; }
.cmp-results--loading .dash-v2-section-title,
.cmp-results--loading .dash-v2-section-sub { opacity: 0.45; }

.cmp-hero-card--skel { min-height: 96px; }
.cmp-skel-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}
.cmp-skel-line { height: 14px; border-radius: 6px; }
.cmp-skel-line--lg { width: 72%; }
.cmp-skel-line--sm { width: 42%; height: 12px; }
.cmp-skel-head { height: 14px; width: 100%; border-radius: 6px; }
.cmp-skel-metric { height: 36px; width: 100%; border-radius: 8px; }
.cmp-metrics-head--skel,
.cmp-metrics-row--skel { border-bottom-color: transparent; padding: 0.55rem 0; }

.cmp-hero-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}
.cmp-hero-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--bg-surface-1, #1a1d23);
    overflow: hidden;
}
.cmp-hero-body {
    display: flex;
    align-items: stretch;
    min-width: 0;
    min-height: 96px;
}
.cmp-hero-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.45rem;
    min-width: 0;
    flex: 1;
    padding: 0.95rem 0.85rem 0.95rem 1rem;
}
.cmp-hero-main-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.cmp-hero-main-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.cmp-hero-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
    flex-shrink: 0;
}
.cmp-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    min-width: 72px;
}
.cmp-hero-stat--peak {
    background: rgba(252,32,68,0.08);
    border-color: rgba(252,32,68,0.22);
}
.cmp-hero-stat--score {
    align-self: stretch;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.2rem;
    min-width: 108px;
    padding: 0.85rem 1.15rem 0.85rem 0.75rem;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255,255,255,0.07);
    border-radius: 0;
}
.cmp-hero-stat--score .cmp-hero-stat-val {
    font-size: clamp(2rem, 2.2vw + 1rem, 2.65rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}
.cmp-hero-stat-denom {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-left: 0.08rem;
    opacity: 0.55;
}
.cmp-hero-stat-meta {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.2;
}
.cmp-hero-stat--score .cmp-hero-stat-label {
    font-size: 0.65rem;
    margin-top: 0.1rem;
}
.cmp-hero-stat--score .cmp-hero-stat-meta {
    font-size: 0.74rem;
    font-weight: 700;
}
.cmp-hero-stat--win {
    background: rgba(34,197,94,0.1);
    border-color: rgba(34,197,94,0.28);
}
.cmp-hero-stat--win .cmp-hero-stat-val { color: #86efac; }
.cmp-hero-stat--win .cmp-hero-stat-meta { color: #86efac; }
.cmp-hero-stat--lose {
    background: rgba(248,113,113,0.08);
    border-color: rgba(248,113,113,0.22);
}
.cmp-hero-stat--lose .cmp-hero-stat-val { color: #fca5a5; }
.cmp-hero-stat--lose .cmp-hero-stat-meta { color: #fca5a5; }
.cmp-hero-stat--tie {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
}
.cmp-hero-stat--tie .cmp-hero-stat-val { color: var(--text-primary); }
.cmp-hero-stat--score.cmp-hero-stat--win,
.cmp-hero-stat--score.cmp-hero-stat--lose,
.cmp-hero-stat--score.cmp-hero-stat--tie {
    background: transparent;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: 1px solid rgba(255,255,255,0.07);
}
.cmp-hero-stat--score.cmp-hero-stat--win .cmp-hero-stat-val { color: #4ade80; }
.cmp-hero-stat--score.cmp-hero-stat--win .cmp-hero-stat-meta { color: rgba(74, 222, 128, 0.75); }
.cmp-hero-stat--score.cmp-hero-stat--lose .cmp-hero-stat-val { color: #f87171; }
.cmp-hero-stat--score.cmp-hero-stat--lose .cmp-hero-stat-meta { color: rgba(248, 113, 113, 0.75); }
.cmp-hero-stat--score.cmp-hero-stat--tie .cmp-hero-stat-val { color: var(--text-primary); }
.cmp-hero-stat--score.cmp-hero-stat--tie .cmp-hero-stat-meta { color: var(--text-muted); }
.cmp-hero-stat-val {
    font-size: 1rem;
    font-weight: 800;
    color: #86efac;
    line-height: 1.1;
}
.cmp-hero-stat--peak .cmp-hero-stat-val {
    color: #fca5a5;
}
.cmp-hero-stat-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.cmp-skel-line--tag { width: 48px; height: 10px; }
.cmp-skel-stat { width: 72px; height: 42px; border-radius: 8px; }
.cmp-skel-stat--score {
    width: 108px;
    height: auto;
    align-self: stretch;
    border-radius: 0;
    flex-shrink: 0;
}
.cmp-hero-card--skel .cmp-hero-body { align-items: stretch; }
.cmp-hero-card--skel .cmp-hero-main-text { flex: 1; display: flex; flex-direction: column; gap: 0.35rem; }
.cmp-hero-tag {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.cmp-hero-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    box-sizing: border-box;
    flex-shrink: 0;
}
.cmp-hero-avatar.cmp-channel-a {
    outline: 2px solid var(--cmp-color-a);
    padding: 3px;
    background: var(--bg-surface-1, #1a1d23);
}
.cmp-hero-avatar.cmp-channel-b {
    outline: 2px solid var(--cmp-color-b);
    padding: 3px;
    background: var(--bg-surface-1, #1a1d23);
}
.cmp-hero-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cmp-hero-name:hover { color: #fc2044; }
.cmp-hero-live {
    font-size: 0.78rem;
    color: #fc2044;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.cmp-hero-live--off { color: var(--text-muted); }

.cmp-chart { height: 320px; width: 100%; }

.cmp-metrics-table { display: flex; flex-direction: column; gap: 0; }
.cmp-metrics-head,
.cmp-metrics-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    column-gap: 0.5rem;
    row-gap: 0.65rem;
    align-items: center;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cmp-metrics-head {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cmp-metrics-row:last-child { border-bottom: none; }
.cmp-metrics-label { font-size: 0.84rem; color: var(--text-primary); }
.cmp-metrics-col {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.cmp-metrics-col.cmp-channel-a {
    align-items: flex-end;
    text-align: right;
    padding-right: 0.95rem;
    border-right: 1px solid rgba(255, 255, 255, 0.09);
}
.cmp-metrics-col.cmp-channel-b {
    align-items: flex-start;
    text-align: left;
    padding-left: 0.95rem;
}
.cmp-metrics-head .cmp-metrics-col.cmp-channel-a {
    color: var(--cmp-color-a);
}
.cmp-metrics-head .cmp-metrics-col.cmp-channel-b {
    color: var(--cmp-color-b);
}
.cmp-val-num {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.cmp-val-when {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.3;
}
.cmp-val-edge {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
}
.cmp-val-edge--up { color: #86efac; }
.cmp-val-edge--down { color: #fca5a5; }
.cmp-metrics-card + .cmp-metrics-card { margin-top: 0; }
.cmp-ondemand-sub {
    display: block;
    margin: -0.35rem 0 0.65rem;
}

/* Comparar fechas */
.cmp-fechas-page {
    --cmp-color-a: #fc2044;
    --cmp-color-b: #38bdf8;
}
.cmp-fechas-toolbar {
    grid-template-columns: 1fr minmax(200px, 0.85fr);
}
.cmp-fechas-modo .cmp-range-inner {
    justify-content: center;
}
.cmp-modo-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    width: 100%;
}
.cmp-modo-btn {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: var(--text-muted);
    border-radius: 8px;
    padding: 0.45rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cmp-modo-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.cmp-modo-btn--active {
    color: #c4b5fd;
    border-color: rgba(124,58,237,0.35);
    background: rgba(124,58,237,0.12);
}
.cmp-fechas-form-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
}
.cmp-fechas-panel {
    flex: 1 1 100%;
    min-width: 0;
}
.cmp-fechas-panel[hidden] {
    display: none !important;
}
.cmp-fechas-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
}
.cmp-fechas-period {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.85rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.15);
}
.cmp-fechas-period--a {
    border-color: rgba(252,32,68,0.22);
    background: rgba(252,32,68,0.04);
}
.cmp-fechas-period--b {
    border-color: rgba(56,189,248,0.22);
    background: rgba(56,189,248,0.04);
}
.cmp-fechas-period .cmp-date-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.5rem 0.65rem;
    font-size: 0.82rem;
}
.cmp-fechas-period-tag {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.cmp-fechas-period-tag--a { color: var(--cmp-color-a); }
.cmp-fechas-period-tag--b { color: var(--cmp-color-b); }
.cmp-fechas-range-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.cmp-fechas-range-field {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.cmp-fechas-actions {
    flex: 0 0 auto;
    align-self: flex-end;
    margin-left: auto;
}
.cmp-run-btn {
    border: none;
    border-radius: 10px;
    padding: 0.62rem 1.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed 0%, #fc2044 100%);
    box-shadow: 0 4px 14px rgba(124,58,237,0.25);
    transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s;
}
.cmp-run-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(124,58,237,0.32);
}
.cmp-run-btn:active { transform: translateY(0); opacity: 0.92; }
#cmp-fechas-picker .cmp-picker-avatar {
    border: 2px solid rgba(124,58,237,0.55);
}
.cmp-hero-tag--a { color: var(--cmp-color-a) !important; }
.cmp-hero-tag--b { color: var(--cmp-color-b) !important; }
.cmp-hero-live--date {
    font-size: 0.76rem !important;
    color: var(--text-muted) !important;
}
.cmp-fechas-page .cmp-chart { min-height: 280px; }
.cmp-chart-head {
  align-items: flex-start;
  gap: 0.75rem;
}
.cmp-chart-head-text { min-width: 0; flex: 1; }
.cmp-chart-metric-switch {
  display: flex;
  flex-shrink: 0;
  gap: 0.35rem;
  padding: 0.2rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.15);
}
.cmp-modo-btn--sm {
  flex: none;
  min-width: 5.5rem;
  padding: 0.38rem 0.55rem;
  font-size: 0.72rem;
}

@media (max-width: 900px) {
    .cmp-toolbar { grid-template-columns: 1fr; }
    .cmp-hero-cards { grid-template-columns: 1fr; }
    .cmp-hero-body { flex-direction: column; align-items: stretch; }
    .cmp-hero-stat--score {
        align-items: center;
        min-width: 0;
        padding: 0.75rem 1rem;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.07);
    }
    .cmp-hero-stat--score.cmp-hero-stat--win,
    .cmp-hero-stat--score.cmp-hero-stat--lose,
    .cmp-hero-stat--score.cmp-hero-stat--tie {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.07);
    }
    .cmp-hero-stat--score .cmp-hero-stat-val {
        font-size: 2.35rem;
    }
    .cmp-hero-stats {
        flex-direction: row;
        justify-content: flex-end;
        align-items: stretch;
    }
    .cmp-hero-stat { flex: 1; align-items: center; min-width: 0; }
    .cmp-metrics-head,
    .cmp-metrics-row {
        grid-template-columns: 1fr 1fr;
        gap: 0.35rem 0.65rem;
    }
    .cmp-metrics-head .cmp-metrics-col:nth-child(3),
    .cmp-metrics-row .cmp-metrics-col:nth-child(3) {
        grid-column: span 1;
    }
    .cmp-metrics-head .cmp-metrics-label { grid-column: 1 / -1; }
    .cmp-metrics-row .cmp-metrics-label { grid-column: 1 / -1; font-weight: 600; }
    .cmp-fechas-toolbar { grid-template-columns: 1fr; }
    .cmp-fechas-dates { grid-template-columns: 1fr; }
    .cmp-fechas-actions { width: 100%; margin-left: 0; }
    .cmp-run-btn { width: 100%; }
    .cmp-fechas-range-row { flex-direction: column; align-items: stretch; }
    .cmp-fechas-range-row .cmp-range-sep { display: none; }
}

/* Dash v2: fila gráfico + en vivo — altura pareada (al final para ganar en cascada) */
@media (min-width: 768px) {
    .dash-v2 {
        --dash-v2-chart-lives-h: 420px;
    }
    #dash-v2-zone-chart,
    #dash-v2-zone-lives {
        align-self: stretch;
    }
    #dash-v2-zone-chart > .dash-v2-section-head,
    #dash-v2-zone-lives > .dash-v2-section-head {
        flex: 0 0 auto;
        min-height: 2.875rem;
        margin-bottom: 0.5rem;
        align-items: flex-start;
    }
    #dash-v2-zone-chart .dash-v2-chart-12h--hero {
        flex: 1 1 0;
        min-height: var(--dash-v2-chart-lives-h);
        height: auto;
        max-height: none;
    }
    #dash-v2-zone-lives .dash-v2-lives.dash-v2-lives-scroll {
        flex: 1 1 0;
        min-height: var(--dash-v2-chart-lives-h);
        height: auto;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
    }
    #dash-v2-zone-chart .dash-v2-skeleton--chart,
    #dash-v2-zone-lives .dash-v2-skeleton--list {
        flex: 1 1 0;
        min-height: var(--dash-v2-chart-lives-h);
        height: auto;
        flex-shrink: 0;
    }
}
@media (min-width: 1101px) {
    .dash-v2 {
        --dash-v2-chart-lives-h: 500px;
    }
}

/* ── Admin dashboard ─────────────────────────────────────────────────────── */
.admin-dashboard-page {
    max-width: 1200px;
    margin: 0 auto;
}
.admin-dashboard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.admin-dashboard-head h2 {
    margin: 0 0 0.25rem;
}
.admin-dashboard-sub {
    margin: 0;
    font-size: 0.82rem;
    color: #718096;
}
.admin-dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}
.admin-dash-kpi {
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    min-width: 0;
}
.admin-dash-kpi--accent {
    border-color: rgba(252, 32, 68, 0.35);
    background: rgba(252, 32, 68, 0.08);
}
.admin-dash-kpi--pay {
    border-color: rgba(34, 197, 94, 0.28);
    background: rgba(34, 197, 94, 0.07);
}
.admin-dash-kpi__label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #718096;
    margin-bottom: 0.25rem;
}
.admin-dash-kpi__value {
    display: block;
    font-size: 1.45rem;
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.admin-dash-kpi__hint {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.68rem;
    color: #64748b;
}
.admin-dashboard-section {
    margin-bottom: 1.25rem;
}
.admin-dashboard-section-head {
    margin-bottom: 0.75rem;
}
.admin-dashboard-section-head h3 {
    margin: 0 0 0.15rem;
    font-size: 0.95rem;
    color: #e2e8f0;
}
.admin-dashboard-section-head p {
    margin: 0;
    font-size: 0.78rem;
    color: #718096;
}
.admin-dashboard-presence {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}
.admin-dash-presence-card {
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-dash-presence-card--active {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.08);
}
.admin-dash-presence-card--absent {
    border-color: rgba(100, 116, 139, 0.35);
    background: rgba(100, 116, 139, 0.1);
}
.admin-dash-presence-card__label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #718096;
}
.admin-dash-presence-card__value {
    display: block;
    font-size: 1.65rem;
    font-weight: 800;
    color: #f8fafc;
    margin: 0.15rem 0;
    font-variant-numeric: tabular-nums;
}
.admin-dash-presence-card__hint {
    font-size: 0.72rem;
    color: #64748b;
}
.admin-dashboard-charts-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.admin-dashboard-charts-row--presence {
    grid-template-columns: minmax(0, 280px);
}
.admin-dash-chart-card {
    padding: 0.85rem 0.9rem 0.75rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.06);
    min-width: 0;
}
.admin-dash-chart-card--sm {
    max-width: 280px;
}
.admin-dash-chart-title {
    margin: 0 0 0.35rem;
    font-size: 0.88rem;
    color: #cbd5e1;
    font-weight: 600;
}
.admin-dash-chart {
    width: 100%;
    height: 220px;
}
.admin-dash-chart--tall {
    height: 260px;
}
.admin-dashboard-table-wrap {
    margin-top: 0;
}
.admin-dashboard-online-table td {
    vertical-align: middle;
}
.admin-dashboard-table-more {
    text-align: center;
    font-size: 0.78rem;
    color: #64748b;
    padding-top: 0.65rem !important;
}
.admin-dash-user-name {
    display: block;
    font-weight: 600;
    color: #e2e8f0;
}
.admin-dash-user-email {
    display: block;
    font-size: 0.75rem;
    color: #718096;
}
.admin-dash-tag {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
}
.admin-dash-tag--pay {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}
.admin-dash-status {
    display: inline-block;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}
.admin-dash-status--active {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}
.admin-dash-status--absent {
    background: rgba(100, 116, 139, 0.2);
    color: #cbd5e1;
}
@media (max-width: 1100px) {
    .admin-dashboard-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 720px) {
    .admin-dashboard-kpis,
    .admin-dashboard-presence,
    .admin-dashboard-charts-row {
        grid-template-columns: 1fr;
    }
    .admin-dash-chart-card--sm {
        max-width: none;
    }
}