#modernMultipantalla {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    color: #fff;
    font-family: 'Montserrat', 'Open Sans', sans-serif;
    background:
        radial-gradient(circle at 52% 40%, rgba(30, 48, 91, 0.9), rgba(4, 9, 19, 0.98) 68%),
        repeating-linear-gradient(60deg, rgba(42, 83, 132, 0.06) 0 1px, transparent 1px 36px);
    box-sizing: border-box;
}

#modernMultipantalla [data-modern-block] {
    --ts-block-x: 0px;
    --ts-block-y: 0px;
    transform: translate(var(--ts-block-x), var(--ts-block-y));
    transform-origin: center;
    box-sizing: border-box;
}
.ts-modern-brand,
.ts-modern-event,
.ts-modern-pending-panel,
.ts-modern-secondary-panel,
.ts-modern-sponsors-panel { position: relative; }

#modernMultipantalla::after {
    content: '';
    position: absolute;
    inset: 132px 0 110px;
    pointer-events: none;
    border-top: 4px solid #167dff;
    border-bottom: 2px solid #21466f;
    box-shadow: inset 0 18px 28px rgba(0, 0, 0, 0.45), 0 -2px 16px rgba(0, 174, 255, 0.45);
}

.ts-modern-header {
    position: relative;
    z-index: 2;
    height: 132px;
    display: grid;
    grid-template-columns: 28% 1fr 170px;
    gap: 7%;
    align-items: center;
    padding: 18px 28px;
    background: linear-gradient(90deg, #071124, #0d1730 55%, #090b19);
    border-bottom: 3px solid #00bfff;
    box-sizing: border-box;
}

.ts-modern-header::before {
    content: '';
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 5px;
    background: linear-gradient(90deg, #00d9ff 0%, #1685ff 58%, #633cff 82%, #b33cff 100%);
    box-shadow: 0 0 14px rgba(0, 174, 255, .8), 0 0 20px rgba(179, 60, 255, .48);
}

.ts-modern-header::after {
    content: '';
    position: absolute;
    z-index: 2;
    right: 5.5%;
    bottom: -5px;
    width: 245px;
    height: 66px;
    border-top: 4px solid #8b3dff;
    border-right: 4px solid #b33cff;
    transform: skewX(-44deg);
    transform-origin: right bottom;
    filter: drop-shadow(0 0 7px rgba(179, 60, 255, .8));
    pointer-events: none;
}

.ts-modern-brand,
.ts-modern-event,
.ts-modern-clock {
    min-width: 0;
}

.ts-modern-brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ts-modern-brand-icon {
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
    overflow: visible;
    filter: drop-shadow(0 0 9px rgba(0, 217, 255, .65));
    cursor: pointer;
}
.ts-modern-brand-icon:focus-visible { outline: 2px solid #facc15; outline-offset: 4px; }

.ts-modern-brand-copy { min-width: 0; }
.ts-modern-brand-controls { display: flex; min-width: 150px; margin-left: 1cm; flex-direction: column; align-items: stretch; gap: 4px; }

.ts-modern-brand-title {
    font-size: clamp(26px, 2vw, 42px);
    line-height: 1;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 1px;
    white-space: nowrap;
}

.ts-modern-brand-title span { color: #20d7ff; }
.ts-modern-brand-slogan { margin-top: 10px; color: #9cb3d3; font-size: 13px; font-weight: 800; letter-spacing: 3px; }
.ts-modern-event { text-align: center; }
.ts-modern-event.is-arena { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; column-gap: 14px; text-align: left; }
.ts-modern-event.is-arena .ts-modern-arena-logo { grid-row: 1 / span 3; }
.ts-modern-arena-logo { display: none; width: 76px; height: 76px; border: 2px solid #ef4444; border-radius: 12px; object-fit: cover; box-shadow: 0 0 16px rgba(239,68,68,.45); }
.ts-modern-proof { display: inline-block; margin-bottom: 6px; padding: 4px 13px; border: 1px solid #258cff; border-radius: 99px; background: #153b70; font-size: 12px; font-weight: 900; }
.ts-modern-event-name { overflow: hidden; color: #fff; font-size: clamp(23px, 2.15vw, 40px); font-weight: 900; letter-spacing: 2px; text-overflow: ellipsis; white-space: nowrap; }
.ts-modern-location { margin-top: 7px; overflow: hidden; color: #9fb2d0; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-overflow: ellipsis; white-space: nowrap; }
.ts-modern-location::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: #00d9ff; box-shadow: 0 0 8px #00d9ff; }
.ts-modern-clock {
    position: relative;
    z-index: 4;
    min-width: 150px;
    padding: 13px 14px 12px;
    border: 2px solid #2578ff;
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(13, 31, 58, .98), rgba(4, 10, 23, .98));
    box-shadow: 0 0 13px rgba(37, 120, 255, .42), inset 0 0 14px rgba(0, 217, 255, .06);
    text-align: center;
    box-sizing: border-box;
}
.ts-modern-clock-label { color: #8cbde4; font-size: 11px; font-weight: 900; letter-spacing: 2px; }
.ts-modern-clock-time { margin-top: 5px; font-size: 30px; font-weight: 900; }

.ts-modern-stage {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(300px, 500px) minmax(500px, 610px) minmax(250px, 310px);
    justify-content: space-between;
    align-items: start;
    gap: 40px;
    min-height: calc(100vh - 242px);
    padding: 50px 28px 130px;
    box-sizing: border-box;
}

.ts-modern-left-column { display: grid; gap: 26px; }
.ts-modern-placeholder,
.ts-modern-live-panel {
    overflow: hidden;
    border: 2px solid #1685ff;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(16, 40, 75, 0.96), rgba(3, 9, 19, 0.98));
    box-shadow: 0 12px 28px rgba(0,0,0,.55), 0 0 12px rgba(0, 174, 255, .28);
}
#modernMultipantalla.ts-modern-layout-ready [data-modern-block="C"] { min-width: 0; }
#modernMultipantalla.ts-modern-layout-ready [data-modern-block="F"],
#modernMultipantalla.ts-modern-layout-ready [data-modern-block="G"] { min-height: 0; }

.ts-modern-placeholder { min-height: 250px; opacity: .72; }
.ts-modern-placeholder-large { min-height: 310px; }
.ts-modern-placeholder-right { align-self: center; min-height: 320px; }
.ts-modern-placeholder::before { content: ''; display: block; height: 58px; background: linear-gradient(90deg, #143c63, #173457); }

.ts-modern-pending-panel {
    height: 250px;
    overflow: hidden;
    border: 2px solid #1685ff;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(16,40,75,.96), rgba(3,9,19,.98));
    box-shadow: 0 12px 28px rgba(0,0,0,.55), 0 0 12px rgba(0,174,255,.28);
}

.ts-modern-pending-header {
    height: var(--ts-header-58, 58px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 20px;
    background: linear-gradient(90deg, #143c63, #173457);
    color: #a3ecff;
    font-size: var(--ts-font-14, 14px);
    font-weight: 900;
    letter-spacing: 1.5px;
    box-sizing: border-box;
}
.ts-modern-pending-header span { color: #789fc9; font-size: var(--ts-font-10, 10px); letter-spacing: .5px; white-space: nowrap; }

.ts-modern-pending-list {
    height: calc(100% - var(--ts-header-58, 58px));
    padding: 8px 14px 12px;
    overflow-y: auto;
    scrollbar-width: none;
    box-sizing: border-box;
}
.ts-modern-pending-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
.ts-modern-pending-empty { min-height: var(--ts-empty-168, 168px); display: grid; place-items: center; color: #7890b0; font-size: var(--ts-font-14, 14px); text-align: center; }
.ts-modern-pending-row { min-height: var(--ts-row-78, 78px); padding: 9px 10px; border-bottom: 1px solid #223a58; border-radius: 8px; box-sizing: border-box; }
.ts-modern-pending-meta { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: #69ceff; font-size: var(--ts-font-9, 9px); font-weight: 900; text-transform: uppercase; }
.ts-modern-pending-players { overflow: hidden; color: #f4f8ff; font-size: var(--ts-font-14, 14px); font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.ts-modern-pending-players span { color: #789fc9; font-size: var(--ts-font-10, 10px); padding: 0 5px; }
.ts-modern-pending-row.is-launched { border: 1px solid #31e981; background: rgba(30,200,120,.2); box-shadow: 0 0 14px rgba(49,233,129,.45); animation: ts-modern-launched-pulse 1s ease-in-out infinite alternate; }
.ts-modern-pending-row.is-launched .ts-modern-pending-status { color: #31e981; }
@keyframes ts-modern-launched-pulse { from { background-color: rgba(30,200,120,.12); } to { background-color: rgba(30,200,120,.3); } }

.ts-modern-secondary-panel {
    height: 342px;
    overflow: hidden;
    border: 2px solid #1685ff;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(16,40,75,.96), rgba(3,9,19,.98));
    box-shadow: 0 12px 28px rgba(0,0,0,.55), 0 0 12px rgba(0,174,255,.28);
}

.ts-modern-secondary-header {
    height: var(--ts-header-58, 58px);
    display: flex;
    align-items: center;
    padding: 0 24px;
    background: linear-gradient(90deg, #143c63, #173457);
    color: #a3ecff;
    font-size: var(--ts-font-16, 16px);
    font-weight: 900;
    letter-spacing: 2px;
    box-sizing: border-box;
}

.ts-modern-secondary-list {
    height: calc(100% - var(--ts-header-58, 58px));
    padding: 8px 20px 12px;
    overflow-y: auto;
    scrollbar-width: none;
    box-sizing: border-box;
}
.ts-modern-secondary-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
.ts-modern-secondary-empty { min-height: var(--ts-empty-250, 250px); display: grid; place-items: center; color: #7890b0; font-size: var(--ts-font-14, 14px); text-align: center; }
.ts-modern-ranking-row { display: grid; grid-template-columns: 42px minmax(0,1fr) 74px; align-items: center; min-height: var(--ts-row-48, 48px); border-bottom: 1px solid #223a58; gap: 8px; }
.ts-modern-ranking-position { color: #69ceff; font-size: var(--ts-font-16, 16px); font-weight: 900; }
.ts-modern-ranking-tsid { overflow: hidden; font-size: var(--ts-font-16, 16px); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.ts-modern-ranking-points { color: #31e981; font-size: var(--ts-font-17, 17px); font-weight: 900; text-align: right; }
.ts-modern-result-row { min-height: var(--ts-row-72, 72px); padding: 9px 0; border-bottom: 1px solid #223a58; box-sizing: border-box; }
.ts-modern-result-meta { margin-bottom: 5px; color: #69ceff; font-size: var(--ts-font-10, 10px); font-weight: 900; text-transform: uppercase; }
.ts-modern-result-player { display: flex; justify-content: space-between; gap: 10px; font-size: var(--ts-font-15, 15px); font-weight: 800; line-height: 1.4; }
.ts-modern-result-player span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-modern-info-card { min-height: var(--ts-info-264, 264px); padding: 8px 0; box-sizing: border-box; }
.ts-modern-info-meta { display: flex; justify-content: space-between; margin-bottom: 5px; color: #69ceff; font-size: var(--ts-font-10, 10px); font-weight: 900; }
.ts-modern-info-player { display: grid; grid-template-columns: 40px minmax(0,1fr) 38px; align-items: center; gap: 10px; min-height: var(--ts-row-61, 61px); border-bottom: 1px solid #223a58; }
.ts-modern-info-player img { width: 36px; height: 36px; border: 2px solid #258cff; border-radius: 50%; object-fit: cover; background: #07152e; }
.ts-modern-info-identity { min-width: 0; }
.ts-modern-info-identity strong { display: block; overflow: hidden; color: white; font-size: var(--ts-font-14, 14px); text-overflow: ellipsis; white-space: nowrap; }
.ts-modern-info-identity span { display: block; margin-top: 4px; color: #7890b0; font-size: var(--ts-font-9, 9px); font-weight: 800; }
.ts-modern-info-identity span.is-active { color: #31e981; }
.ts-modern-info-player > b { color: white; font-size: var(--ts-font-27, 27px); text-align: right; }
.ts-modern-info-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; padding-top: 10px; color: #7890b0; font-size: var(--ts-font-9, 9px); font-weight: 900; }
.ts-modern-info-stats span { display: flex; justify-content: space-between; gap: 7px; }
.ts-modern-info-stats b { color: #d9e8fb; }

.ts-modern-sponsors-panel {
    align-self: center;
    min-height: 320px;
    overflow: hidden;
    border: 2px solid #1685ff;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(16, 40, 75, .96), rgba(3, 9, 19, .98));
    box-shadow: 0 12px 28px rgba(0,0,0,.55), 0 0 12px rgba(0,174,255,.28);
}

.ts-modern-sponsors-header {
    height: 58px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    background: linear-gradient(90deg, #143c63, #173457);
    color: #a3ecff;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 2px;
    box-sizing: border-box;
}

.ts-modern-sponsor-viewport {
    position: relative;
    height: calc(100% - 58px);
    overflow: hidden;
}
.ts-modern-sponsor-track {
    height: 100%;
    transform: translateY(0);
    will-change: transform;
}
.ts-modern-sponsor-slide {
    height: 258px;
    flex: 0 0 258px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
}
.ts-modern-sponsor-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ts-modern-sponsors-empty { min-height: 258px; display: grid; place-items: center; padding: 20px; color: #7890b0; font-size: 14px; text-align: center; box-sizing: border-box; }

.ts-modern-live-panel {
    position: relative;
    align-self: center;
    min-height: 520px;
    border-color: #00d9ff;
    box-shadow: 0 14px 32px rgba(0,0,0,.65), -2px 0 12px rgba(0,217,255,.42), 2px 0 12px rgba(179,60,255,.35);
}

.ts-modern-live-header {
    height: var(--ts-header-64, 64px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px;
    background: linear-gradient(90deg, #16456f, #18365e 65%, #26174d);
    box-sizing: border-box;
}

.ts-modern-live-header strong { font-size: var(--ts-font-20, 20px); letter-spacing: 3px; }
.ts-modern-active-count { color: #c8d8ed; font-size: var(--ts-font-14, 14px); font-weight: 900; }
.ts-modern-active-count::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #31e6a1; box-shadow: 0 0 10px #31e6a1; }

.ts-modern-match-list {
    height: calc(100% - var(--ts-header-64, 64px));
    padding: 14px 18px 14px 20px;
    overflow-y: auto;
    scrollbar-width: none;
    box-sizing: border-box;
}

.ts-modern-match-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
.ts-modern-empty { display: grid; min-height: var(--ts-empty-380, 380px); place-items: center; color: #8097b8; font-size: var(--ts-font-18, 18px); font-weight: 700; }

.ts-modern-match-card {
    position: relative;
    min-height: var(--ts-row-92, 92px);
    margin-bottom: 10px;
    padding: 28px 18px 9px;
    border: 1px solid #244562;
    border-radius: 9px;
    background: #050e1b;
    box-sizing: border-box;
    transition: border-color .25s, background .25s, transform .25s;
}

.ts-modern-match-card.is-event { border: 2px solid #22c55e; background: #06140f; }
.ts-modern-match-meta { position: absolute; top: 7px; left: 18px; right: 18px; display: flex; justify-content: space-between; gap: 12px; color: #69ceff; font-size: var(--ts-font-10, 10px); font-weight: 900; text-transform: uppercase; }
.ts-modern-match-player { display: flex; justify-content: space-between; gap: 14px; font-size: var(--ts-font-18, 18px); font-weight: 800; line-height: 1.55; }
.ts-modern-match-player span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-modern-match-player.is-scorer { color: #31e981; text-shadow: 0 0 9px rgba(49,233,129,.65); }

.ts-modern-event-popup {
    position: absolute;
    z-index: 20;
    top: 46%;
    left: 50%;
    width: min(620px, 88vw);
    overflow: hidden;
    border: 3px solid #2ee58c;
    border-radius: 14px;
    background: #030b13;
    box-shadow: 0 18px 44px rgba(0,0,0,.85), 0 0 24px rgba(46,229,140,.35);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.94);
    transition: opacity .22s, transform .22s;
}

.ts-modern-event-popup.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ts-modern-event-popup.is-final { border-color: #ef4444; box-shadow: 0 18px 44px rgba(0,0,0,.85), 0 0 24px rgba(239,68,68,.35); }
.ts-modern-event-title { display: flex; justify-content: space-between; padding: 11px 24px; background: linear-gradient(90deg, #0d6d42, #16a366); font-size: 14px; font-weight: 900; letter-spacing: 2px; }
.ts-modern-event-popup.is-final .ts-modern-event-title { background: linear-gradient(90deg, #7f1d1d, #dc2626); }
.ts-modern-event-body { padding: 10px 28px 14px; }
.ts-modern-event-player { display: flex; justify-content: space-between; font-size: 26px; font-weight: 900; line-height: 1.5; }
.ts-modern-event-player.is-highlighted { color: #35ef8d; text-shadow: 0 0 9px rgba(53,239,141,.65); }
.ts-modern-event-queue { display: none; position: absolute; z-index: 21; top: calc(46% + 92px); left: 50%; padding: 7px 18px; border: 1px solid #315b87; border-radius: 99px; background: #091a31; color: #b9cbe1; font-size: 11px; font-weight: 900; transform: translateX(-50%); }
.ts-modern-event-queue.is-visible { display: block; }

.ts-modern-footer { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 84px; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 24px; border-top: 2px solid #21466f; background: rgba(5,11,21,.94); box-sizing: border-box; }

.ts-modern-layout-toolbar { position: static; z-index: 1000004; align-items: center; gap: 5px; padding: 4px; border: 1px solid #315b87; border-radius: 8px; background: rgba(3, 10, 23, .94); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.ts-modern-layout-toolbar button { padding: 8px 12px; border: 0; border-radius: 7px; background: #2563eb; color: white; font-size: 11px; font-weight: 900; cursor: pointer; }
.ts-modern-layout-actions { align-items: center; gap: 7px; }
#modernLayoutSave { background: #10b981; }
#modernLayoutReset { background: #f59e0b; }
#modernLayoutCancel { background: #475569; }
#modernMultipantalla.ts-modern-editing [data-modern-block] { z-index: 50 !important; overflow: visible !important; outline: 2px dashed #facc15; outline-offset: 4px; cursor: move; touch-action: none; }
#modernMultipantalla.ts-modern-editing [data-modern-block]::before { content: 'BLOQUE ' attr(data-modern-block); position: absolute; z-index: 100; top: -23px; left: 0; padding: 3px 7px; border-radius: 4px; background: #facc15; color: #111827; font-size: 9px; font-weight: 900; line-height: 1.2; pointer-events: none; }
.ts-modern-resize-handle { position: absolute; z-index: 101; width: 24px; height: 18px; display: none; align-items: center; justify-content: center; border: 2px solid white; border-radius: 7px; background: #f59e0b; color: #111827; box-shadow: 0 0 8px rgba(245,158,11,.8); font-size: 13px; font-weight: 900; touch-action: none; }
.ts-modern-resize-width { top: 50%; right: -13px; cursor: ew-resize; transform: translateY(-50%); }
.ts-modern-resize-height { bottom: -10px; left: 50%; cursor: ns-resize; transform: translateX(-50%); }
#modernMultipantalla.ts-modern-editing .ts-modern-resize-handle { display: block; }
#section-multipantalla.modern-active .ts-modern-brand-controls .mp-controls { position: static !important; width: auto !important; display: flex !important; flex-direction: column !important; align-items: stretch; gap: 4px; }
#section-multipantalla.modern-active .ts-modern-brand-controls .mp-switch-container { justify-content: space-between; font-size: 9px; white-space: nowrap; }
#section-multipantalla.modern-active:not(.ts-modern-controls-open) .ts-modern-brand-controls .mp-controls { visibility: hidden; opacity: 0; pointer-events: none; }
#section-multipantalla.modern-active .ts-modern-brand-controls .mp-controls { transition: opacity .2s ease; }

#section-multipantalla.modern-active { padding: 0 !important; background: #030711 !important; }
#section-multipantalla.modern-active #multipantallaGrid { display: none !important; }
#section-multipantalla.modern-active #multipantallaControlBar { position: fixed !important; z-index: 1000002; top: 146px; right: 18px; width: auto; margin: 0 !important; }
#section-multipantalla.modern-active #multipantallaControlBar > :not(.mp-controls) { display: none !important; }
#section-multipantalla.modern-active #multipantallaControlBar .mp-controls { position: static !important; width: auto !important; padding: 9px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; background: rgba(3,8,18,.84); }

@media (max-width: 1200px) {
    .ts-modern-stage { grid-template-columns: 1fr minmax(480px, 600px); }
    .ts-modern-left-column, .ts-modern-sponsors-panel { display: none; }
}
