/* =========================================================
📺 VIEW: CAMARAS
========================================================== */
.view {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #000;
    z-index: 10;
}

.camera-frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #000;
}

.camera-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(18px) brightness(.55) saturate(1.25);
    transform: scale(1.12);
}

.camera-main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.camera-stage {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    transition: opacity .6s ease-in-out;
}

.camera-stage.is-active {
    opacity: 1;
    z-index: 20;
}

.camera-stage.fade-out {
    opacity: 0;
}

.camera-stage video,
.camera-stage iframe {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
    display: block;
    background: #000;
    filter: brightness(0.75) contrast(1.15) saturate(1.2);
}

.camera-stage video.camera-square {
    width: 100%;
    height: 100%;
    object-fit: fill !important;
    transform: scaleX(1.12);
}

.camera-label-group {
    position: absolute;
    left: 30px;
    top: 30px;
    z-index: 100;

    display: flex;
    align-items: center;
}

.camera-label {
    position: relative;
    left: 0;
    top: 0;
    padding-right: 12px;
    z-index: 100;
    padding: 8px 8px ;
    background: linear-gradient(
        90deg,
        rgba(47, 1, 44),
        rgba(56, 21, 75),
        rgba(112, 56, 142),
        rgba(143, 85, 155)
    );
    border-left: 6px solid var(--codelis-logoL-rgb);
    border-radius: 12px 0px 0px 12px; /*arriba-izquierda arriba-derecha abajo-derecha abajo-izquierda;*/
    opacity: 1;
    color: var(--blanco);
    font-size: 24px;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.pulse-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 5px 5px;
    border-radius: 12px;

    background: var(--danger-oscuro-rgb);
    border: 1px solid var(--danger);

    font-weight: bold;
    font-size: 24px;
    letter-spacing: 1px;

    animation: liveFade 2s infinite;
}

.pulse {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff2d2d;
    box-shadow: 0 0 0 rgba(255, 45, 45, .7);
    animation: pulseLive 1.4s infinite;
}


/* CONTADOR REGRESIVO INTEGRADO EN LA ETIQUETA DE CÁMARA */
.camera-label .next-timer {
    min-width: 66px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    padding: 0 8px;
    border-radius: 9px;

    border: 1px solid #007bff;
    background: #164272;
    color: var(--warning-rgb);

    font-family: Monaco, Consolas, monospace;
    font-size: 20px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .02em;

    box-sizing: border-box;
    text-shadow: 0 2px 4px rgba(0,0,0,.65);
}

.camera-label .next-timer.alert {
    border-color: #dc3545;
    background: #5b1118;
    animation: cameraNextTimerAlert .8s infinite alternate;
}

@keyframes cameraNextTimerAlert {
    from { box-shadow: 0 0 0 rgba(220,53,69,0); }
    to   { box-shadow: 0 0 12px rgba(220,53,69,.72); }
}

@keyframes liveFade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}
@keyframes pulseLive {
    0% { box-shadow: 0 0 0 0 rgba(255,45,45,.7); }
    70% { box-shadow: 0 0 0 8px rgba(255,45,45,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,45,45,0); }
}

/* =========================================================
⛅ CLIMA CIUDAD CAMARA EN VIVO
========================================================== */
.camera-label-weather {
    position: relative; /* 👈 cambia esto */
    top: 0;
    left: 0;

    margin-left: 0; /* separación visual */
    height: 55px !important;
    display: flex;
    align-items: center;

    padding: 0 8px;

    border-radius: 0 12px 12px 0;

    /* 🔥 tus colores (los mantengo) */
    background: linear-gradient(
        90deg,
        rgba(22, 66, 114),
        rgba(28, 90, 156),
        rgba(0, 123, 255)
    );

    font-size: 24px !important;
}

/* =========================================================
🗺️ ICONO MAPA ARGENTINA
========================================================== */
.camera-map {
    position: absolute;

    /* debajo del camera-label */
    top: 30px;
    left: 30px;

    width: 70px;
    height: 114px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        90deg,
        rgba(56, 21, 75),
        rgba(47, 1, 44)
    );
    
    border-left: 6px solid var(--codelis-logoL-rgb);
    border-radius: 12px 0 0 12px;

    color: #fff;
    overflow: hidden;

    z-index: 100;
    opacity: 1;
    pointer-events: none;
}

.camera-map img {
    display: block;
    width: 45px;
    height: auto;
    max-height: 110px;
    object-fit: contain;
    
}

/* =========================================================
🧡 FECHA ESPECIAL A LA DERECHA
========================================================== */
.camera-especial-right {
    position: absolute;
    top: 30px;
    right: 30px;

    width: 114px;
    height: 114px;

    display: none;
    align-items: center;
    justify-content: center;

    z-index: 100;
    pointer-events: none;
}

/* CÍRCULO */
.camera-especial-circle {
    width: 116px;
    height: 116px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    

    border: 5px solid var(--codelis-logoL-rgb);

    box-shadow:
        0 0 12px rgba(0,0,0,.65),
        0 0 14px rgba(143, 85, 155, .65);

    overflow: hidden;
}

.camera-especial-circle img {
    display: block;
    width: 110px;
    height: 110px;
    padding: 1px;
    object-fit: contain;
}

/* SLIDE TEXTO FECHA ESPECIAL */
.camera-especial-slide {
    position: absolute;
    top: 42px;
    right: 110px;

    height: 34px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    padding: 0 8px;

    border-radius: 12px 0 0 12px;

    background: linear-gradient(
        90deg,
        rgba(47, 1, 44),
        rgba(56, 21, 75),
        rgba(112, 56, 142),
        rgba(143, 85, 155)
    );

    border-left: 6px solid var(--codelis-logoL-rgb);

    color: #fff;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: .5px;

    opacity: .75;
    transform: translateX(200%);
    transition:
        opacity .45s ease,
        transform .55s ease;

    white-space: nowrap;
    overflow: hidden;
}

.camera-especial-slide.is-visible {
    opacity: .75;
    transform: translateX(0);
}

.camera-especial-slide i {
    margin-right: 8px;
    color: var(--warning-rgb);
}

/* =========================================================
⚽ MUNDIAL 2026 · MINI LIVE DEBAJO DE EN VIVO
========================================================== */

.camera-worldcup-mini {
    position: absolute;
    top: 97px !important;
    left: 30px;
    width: 430px;
    height: 60px;
    display: grid;
    grid-template-columns: 56px minmax(260px, 1fr) 56px;
    align-items: stretch;
    margin: 0;
    padding: 0;
    border-radius: 12px 12px 12px 12px;
    background: linear-gradient(
        90deg,
        rgba(47, 1, 44, .96),
        rgba(56, 21, 75, .96),
        rgba(112, 56, 142, .96),
        rgba(143, 85, 155, .96)
    );
    box-shadow:
        0 6px 14px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.08);
    color: #fff;
    overflow: hidden;
    z-index: 101;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: opacity .35s ease, visibility .35s ease, transform .35s ease;
}

.camera-worldcup-mini.is-visible {
    opacity: .96;
    visibility: visible;
    transform: translateX(0);
}

.camera-worldcup-mini .cwm-score {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: linear-gradient(180deg, rgba(112, 56, 142, .98), rgba(143, 85, 155, .98));
    color: #ffffff;
    font-family: Monaco, Consolas, monospace;
    font-size: 24px;
    font-weight: 950;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0,0,0,.75);
}

.camera-worldcup-mini .cwm-score-away {
    border-radius: 0 12px 12px 0;
}

.camera-worldcup-mini .cwm-center {
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 10px;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(17, 8, 23, .98), rgba(56, 21, 75, .98));
    border-left: 1px solid rgba(255,255,255,.10);
    border-right: 1px solid rgba(255,255,255,.10);
}

.camera-worldcup-mini .cwm-team {
    min-width: 42px;
    max-width: 80px;
    color: #fff;
    font-size: 24px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .03em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 2px 4px rgba(0,0,0,.85);
}

.camera-worldcup-mini .cwm-flag {
    width: 32px;
    height: 22px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.20),
        0 2px 5px rgba(0,0,0,.45);
}

.camera-worldcup-mini .cwm-time {
    min-width: 82px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    border-radius: 10px;
    background: rgba(0,0,0,.45);
    color: var(--warning-rgb, #ffc107);
    font-family: Monaco, Consolas, monospace;
    font-size: 20px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .02em;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0,0,0,.85);
}

.camera-worldcup-mini.is-live .cwm-time {
    animation: cwmPulseLive 1.4s infinite;
}

.camera-worldcup-mini.is-halftime .cwm-time,
.camera-worldcup-mini.is-finished .cwm-time {
    min-width: 112px;
    font-size: 20px;
    font-family: inherit;
}

.camera-worldcup-events .cwe-team-flag {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 3px;
    margin-left: 4px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.25);
}

@keyframes cwmPulseLive {
    0%, 100% { box-shadow: 0 0 0 rgba(255,193,7,0); }
    50% { box-shadow: 0 0 12px rgba(255,193,7,.55); }
}

/* =========================================================
⚽ MUNDIAL 2026 · EVENTO COMPACTO AL LADO DEL MINI
========================================================== */

.camera-worldcup-events {
    position: absolute;
    top: 103px !important;
    left: 459px;

    width: auto;
    max-width: 545px;
    height: 50px;

    display: flex;
    align-items: stretch;
    justify-content: flex-start;

    border-radius: 0 12px 12px 0;

    background: linear-gradient(
        90deg,
        rgba(17, 8, 23, .98),
        rgba(47, 1, 44, .98),
        rgba(56, 21, 75, .98)
    );

    box-shadow:
        0 6px 14px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.08);

    color: #fff;
    overflow: hidden;

    z-index: 102;
    pointer-events: none;

    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);

    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .35s ease;
}

.camera-worldcup-events.is-visible {
    opacity: .96;
    visibility: visible;
    transform: translateX(0);
}

/* Sin título/header: solo chip de evento */
.camera-worldcup-events .cwe-header,
.camera-worldcup-events .cwe-title,
.camera-worldcup-events .cwe-subtitle {
    display: none !important;
}

.camera-worldcup-events .cwe-body {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: stretch;
    justify-content: flex-start;

    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.camera-worldcup-events .cwe-row {
    width: 100%;
    height: 50px;
    min-height: 50px;

    display: grid;
    grid-template-columns: 58px 28px minmax(78px, auto) minmax(0, 1fr);
    align-items: center;
    column-gap: 6px;

    padding: 0 8px;
    box-sizing: border-box;

    border-radius: 0 12px 12px 0;
    border: 1px solid rgba(255,255,255,.08);

    background: rgba(0,0,0,.24);
    overflow: hidden;
}

.camera-worldcup-events .cwe-minute {
    height: 100%;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    color: var(--warning-rgb, #ffc107);

    font-family: Monaco, Consolas, monospace;
    font-size: 22px;
    font-weight: 950;
    line-height: 1;

    white-space: nowrap;
}

.camera-worldcup-events .cwe-minute i {
    font-size: 20px;
}

.camera-worldcup-events .cwe-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 22px;
    line-height: 1;
}

.camera-worldcup-events .cwe-main {
    min-width: 0;

    color: #fff;
    font-size: 22px;
    font-weight: 950;
    line-height: 1;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.camera-worldcup-events .cwe-player {
    min-width: 0;

    display: inline-flex;
    align-items: center;
    gap: 4px;

    color: rgba(255,255,255,.84);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;

    white-space: nowrap;
    overflow: hidden;
}

.camera-worldcup-events .cwe-player i {
    flex: 0 0 auto;
    color: var(--warning-rgb, #ffc107);
    font-size: 22px;
}

.camera-worldcup-events .cwe-player span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.camera-worldcup-events .cwe-row.is-goal {
    background: rgba(40, 167, 69, .24);
}

.camera-worldcup-events .cwe-row.is-red-card {
    background: rgba(220, 53, 69, .26);
}

.camera-worldcup-events .cwe-row.is-yellow-card {
    background: rgba(255, 193, 7, .20);
}

.camera-worldcup-events .cwe-row.is-substitution {
    background: rgba(0, 123, 255, .20);
}

.camera-worldcup-events .cwe-row.is-woodwork {
    background: rgba(255, 193, 7, .16);
}



/* =========================================================
⚽ MUNDIAL 2026 · AJUSTE COMPACTO 20PX
========================================================== */
.camera-worldcup-mini {
    height: 60px;
    grid-template-columns: 56px minmax(260px, 1fr) 56px;
}

.camera-worldcup-mini .cwm-score {
    font-size: 28px;
}

.camera-worldcup-mini .cwm-team,
.camera-worldcup-mini .cwm-time,
.camera-worldcup-mini.is-halftime .cwm-time,
.camera-worldcup-mini.is-finished .cwm-time {
    font-size: 22px;
}

.camera-worldcup-mini .cwm-team {
    min-width: 38px;
    max-width: 70px;
}

.camera-worldcup-mini .cwm-flag {
    width: 32px;
    height: 22px;
}

.camera-worldcup-mini .cwm-time {
    min-width: 82px;
    padding: 3px 6px;
}

.camera-worldcup-mini.is-halftime .cwm-time,
.camera-worldcup-mini.is-finished .cwm-time {
    min-width: 112px;
}

.camera-worldcup-events {
    top: 100px;
    height: 50px;
}

.camera-worldcup-events .cwe-row {
    height: 50px;
    min-height: 50px;
    grid-template-columns: 58px 28px minmax(78px, auto) minmax(0, 1fr);
    column-gap: 6px;
    padding: 0 8px;
}

.camera-worldcup-events .cwe-minute,
.camera-worldcup-events .cwe-minute i,
.camera-worldcup-events .cwe-icon,
.camera-worldcup-events .cwe-main,
.camera-worldcup-events .cwe-player,
.camera-worldcup-events .cwe-player i {
    font-size: 22px;
}

.camera-worldcup-events .cwe-team-flag {
    width: 22px;
    height: 16px;
}

/* =========================================================
⚽ MUNDIAL 2026 · EVENTOS EXTRA 365SCORES
========================================================== */
.camera-worldcup-events .cwe-row.is-disallowed-goal {
    background: rgba(220, 53, 69, .22);
}

.camera-worldcup-events .cwe-row.is-own-goal,
.camera-worldcup-events .cwe-row.is-missed-penalty {
    background: rgba(220, 53, 69, .24);
}

.camera-worldcup-events .cwe-row.is-penalty,
.camera-worldcup-events .cwe-row.is-corner,
.camera-worldcup-events .cwe-row.is-goal-kick,
.camera-worldcup-events .cwe-row.is-foul,
.camera-worldcup-events .cwe-row.is-offside,
.camera-worldcup-events .cwe-row.is-shot-on-target,
.camera-worldcup-events .cwe-row.is-shot-off-target,
.camera-worldcup-events .cwe-row.is-save,
.camera-worldcup-events .cwe-row.is-var {
    background: rgba(255, 193, 7, .16);
}

/* =========================================================
⚽ MUNDIAL 2026 · LIVE MATCH CAMARAS · BACKGROUND ANIMADO
   V3: círculos reales, redondos y sin deformarse
========================================================== */
.camera-worldcup-mini {
    isolation: isolate !important;
    background:
        radial-gradient(circle at 12% 50%, rgba(0, 123, 255, .22), transparent 36%),
        radial-gradient(circle at 88% 50%, rgba(143, 85, 155, .30), transparent 36%),
        linear-gradient(90deg,
            rgba(47, 1, 44, .82),
            rgba(56, 21, 75, .80),
            rgba(22, 66, 114, .74),
            rgba(112, 56, 142, .78),
            rgba(47, 1, 44, .82)
        ) !important;
    background-size: 230% 230% !important;
    animation: cameraWcMiniBgFlow 6s ease-in-out infinite alternate !important;
    box-shadow:
        0 6px 14px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 0 18px rgba(255,255,255,.045) !important;
}

/* CÍRCULOS: no son radial-gradients estirados; son círculos reales con box-shadow */
.camera-worldcup-mini::before {
    content: "";
    position: absolute;
    left: -42px;
    top: -34px;
    z-index: 1;
    pointer-events: none;

    width: 74px;
    height: 74px;
    border-radius: 50%;

    background: rgba(0, 123, 255, .34);
    border: 2px solid rgba(255,255,255,.12);
    box-shadow:
        142px 58px 0 -12px rgba(255, 193, 7, .24),
        276px 2px 0 -8px rgba(255,255,255,.14),
        422px 54px 0 -5px rgba(143, 85, 155, .38),
        520px -4px 0 -18px rgba(0, 123, 255, .24);

    opacity: .80;
    filter: blur(.15px);
    animation: cameraWcMiniCircleFloat 5.2s ease-in-out infinite alternate !important;
}

/* BRILLO que cruza por arriba */
.camera-worldcup-mini::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: .42;
    background: linear-gradient(
        110deg,
        transparent 0%,
        transparent 32%,
        rgba(255,255,255,.22) 48%,
        transparent 64%,
        transparent 100%
    );
    transform: translateX(-135%);
    mix-blend-mode: screen;
    animation: cameraWcMiniShine 3.6s ease-in-out infinite !important;
}

.camera-worldcup-mini .cwm-score,
.camera-worldcup-mini .cwm-center {
    position: relative !important;
    z-index: 3 !important;
    background-size: 210% 210% !important;
    animation: cameraWcMiniPanelFlow 6s ease-in-out infinite alternate !important;
}

.camera-worldcup-mini .cwm-score {
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), transparent 45%),
        linear-gradient(135deg,
            rgba(112, 56, 142, .80),
            rgba(143, 85, 155, .78),
            rgba(22, 66, 114, .62),
            rgba(112, 56, 142, .78)
        ) !important;
}

.camera-worldcup-mini .cwm-center {
    background:
        radial-gradient(circle at 18% 50%, rgba(0,123,255,.14), transparent 38%),
        radial-gradient(circle at 82% 50%, rgba(255,193,7,.08), transparent 38%),
        linear-gradient(135deg,
            rgba(17, 8, 23, .78),
            rgba(56, 21, 75, .76),
            rgba(22, 66, 114, .58),
            rgba(56, 21, 75, .76)
        ) !important;
}

.camera-worldcup-mini .cwm-score > *,
.camera-worldcup-mini .cwm-center > * {
    position: relative;
    z-index: 5;
}

@keyframes cameraWcMiniBgFlow {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}

@keyframes cameraWcMiniPanelFlow {
    from { background-position: 0% 0%; }
    to   { background-position: 100% 100%; }
}

@keyframes cameraWcMiniCircleFloat {
    from { transform: translate3d(-14px, -4px, 0) rotate(-3deg); }
    to   { transform: translate3d(18px, 7px, 0) rotate(3deg); }
}

@keyframes cameraWcMiniShine {
    0%   { transform: translateX(-135%); opacity: 0; }
    18%  { opacity: .42; }
    52%  { transform: translateX(135%); opacity: .42; }
    100% { transform: translateX(135%); opacity: 0; }
}

/* Mundial cámaras · evento tiro libre desde play-by-play */
.camera-worldcup-events .cwe-row.is-free-kick {
    background: rgba(255, 193, 7, .18);
}

/* FIX FINAL · tamaños blindados para live mundial cámaras */
.camera-worldcup-mini .cwm-flag,
.camera-worldcup-mini img.cwm-flag,
#cwm-home-flag,
#cwm-away-flag {
    width: 32px !important;
    height: 22px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    object-fit: cover !important;
    display: block !important;
    flex: 0 0 32px !important;
}

.camera-worldcup-events .cwe-team-flag,
.camera-worldcup-events img.cwe-team-flag {
    width: 22px !important;
    height: 16px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    object-fit: cover !important;
    display: inline-block !important;
    flex: 0 0 22px !important;
}