:root{
    --envivo-azul-900:#041925;
    --envivo-azul-800:#062838;
    --envivo-azul-700:#08384f;
    --envivo-azul-600:#0b4d6d;
    --envivo-rojo:#e5242e;
    --envivo-rojo-oscuro:#b81421;
    --envivo-blanco:#ffffff;
    --envivo-humo:#eef3f7;
    --envivo-metal:#d5dde5;
    --envivo-texto:#12202b;
    --envivo-muted:#6b7b87;
    --envivo-verde:#15a66a;
    --envivo-amarillo:#ffc247;
    --envivo-card:#ffffff;
    --envivo-shadow:0 18px 45px rgba(0,0,0,.16);
    --envivo-radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    color:var(--envivo-texto);
    background:radial-gradient(circle at 18% 0%, rgba(229,36,46,.13), transparent 30%),linear-gradient(135deg,#e8eef4 0%,#f7fafc 42%,#dce5ec 100%);
    min-height:100vh;
}
body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.055;
    background-image:url('img/envivotv-hero.jpg');
    background-size:cover;
    background-position:center;
    filter:grayscale(10%);
    z-index:-2;
}
body:after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.94));
    z-index:-1;
}
a{color:var(--envivo-rojo);text-decoration:none}
a:hover{text-decoration:none;filter:brightness(.94)}
.container{max-width:1150px;margin:0 auto;padding:24px}
.header{
    background:linear-gradient(135deg,rgba(4,25,37,.97),rgba(8,56,79,.98)),url('img/envivotv-hero.jpg');
    background-size:cover;
    background-position:center;
    color:#fff;
    padding:12px 0;
    box-shadow:0 8px 24px rgba(4,25,37,.32);
    border-bottom:3px solid var(--envivo-rojo);
    position:relative;
    z-index:5;
}
.header .container{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:10px;padding-bottom:10px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:22px;font-weight:900;color:#fff!important;letter-spacing:.2px}
.brand-logo img,.brand-img{display:block;height:54px;width:auto;max-width:230px;object-fit:contain;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.brand-logo span{display:inline-block;padding:6px 10px;border-left:1px solid rgba(255,255,255,.18);color:#fff;font-size:15px;text-transform:uppercase;letter-spacing:.08em}
.nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nav a{color:#fff!important;font-weight:700;padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.nav a:hover{background:var(--envivo-rojo);filter:none}
.card{background:rgba(255,255,255,.96);border:1px solid rgba(8,56,79,.10);border-radius:var(--envivo-radius);padding:24px;box-shadow:0 12px 30px rgba(8,56,79,.10);margin-bottom:20px;backdrop-filter:blur(8px)}
.card h1,.card h2,.card h3{color:var(--envivo-azul-900);margin-top:0}
.card h2:after,.card h3:after{content:"";display:block;width:76px;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--envivo-rojo),var(--envivo-azul-600));margin-top:10px}
.center{text-align:center}
.muted{color:var(--envivo-muted)}
.logo-card{text-align:center;background:linear-gradient(135deg,var(--envivo-azul-900),var(--envivo-azul-700));color:#fff;overflow:hidden;position:relative}
.logo-card:before{content:"";position:absolute;inset:0;background:url('img/envivotv-hero.jpg') center/cover;opacity:.18}
.logo-card>*{position:relative}
.logo-card p{color:#fff;font-weight:800;letter-spacing:.02em;margin-bottom:0}
.logo-main{max-width:360px;width:100%;height:auto;border-radius:16px;box-shadow:var(--envivo-shadow)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.form-group label,label{display:block;font-weight:800;margin:0 0 7px;color:var(--envivo-azul-900)}
.form-control,select,textarea,input{width:100%;padding:12px 13px;border:1px solid #c9d4dc;border-radius:12px;font-size:15px;background:#fff;color:var(--envivo-texto);outline:none;transition:.18s ease}
.form-control:focus,select:focus,textarea:focus,input:focus{border-color:var(--envivo-rojo);box-shadow:0 0 0 4px rgba(229,36,46,.12)}
textarea{min-height:95px;resize:vertical}
.btn,button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:12px 17px;background:linear-gradient(135deg,var(--envivo-rojo),var(--envivo-rojo-oscuro));color:#fff!important;font-weight:900;cursor:pointer;text-align:center;box-shadow:0 10px 20px rgba(229,36,46,.22);transition:.18s ease}
.btn:hover,button:hover{transform:translateY(-1px);filter:brightness(1.02);box-shadow:0 14px 24px rgba(229,36,46,.28)}
.btn-success{background:linear-gradient(135deg,var(--envivo-verde),#087a4d);box-shadow:0 10px 20px rgba(21,166,106,.22)}
.btn-danger{background:linear-gradient(135deg,#dc3545,#a5101d)}
.btn-warning{background:linear-gradient(135deg,#ffc247,#d18d00);color:#111!important}
.btn-light{background:#e9eef3;color:var(--envivo-azul-900)!important;box-shadow:none;border:1px solid #cfd8df}
.btn-grande{font-size:18px;padding:15px 24px;margin:8px}
.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.alert{padding:14px 16px;border-radius:14px;margin:14px 0;border:1px solid transparent;font-weight:700}
.alert-success{background:#dcfce7;color:#14532d;border-color:#a7f3d0}
.alert-danger{background:#fee2e2;color:#7f1d1d;border-color:#fecaca}
.alert-info{background:#dbeafe;color:#1e3a8a;border-color:#bfdbfe}
.alert-warning{background:#fff3cd;color:#664d03;border-color:#ffec99}
.table-wrap{overflow:auto;border-radius:16px;box-shadow:0 10px 28px rgba(8,56,79,.08)}
.table{width:100%;border-collapse:collapse;background:#fff}
.table th,.table td{color:#000;padding:13px;border-bottom:1px solid #e7edf2;text-align:left;vertical-align:top}
.table th{background:linear-gradient(180deg,#f7fafc,#eef4f8);color:var(--envivo-azul-900);font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900}
.badge-pendiente,.badge-pendiente_pago{background:#fff3cd;color:#8a5a00}
.badge-habilitado{background:#dcfce7;color:#14532d}
.badge-bloqueado{background:#fee2e2;color:#7f1d1d}
.copy-box{background:#f9fafb;border:1px dashed #9ca3af;padding:12px;border-radius:12px;word-break:break-all}
.video-box{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:18px;background:#000;box-shadow:var(--envivo-shadow)}
.video-box iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.login-box{max-width:450px;margin:60px auto}
.login-box:before{content:"";display:block;height:120px;margin:-5px auto 18px;background:url('img/logo-envivotv.png') center/contain no-repeat}
.access-box{max-width:760px;margin:55px auto;background:rgba(255,255,255,.97);color:var(--envivo-texto);border-radius:22px;padding:30px;box-shadow:var(--envivo-shadow);text-align:center;border-top:5px solid var(--envivo-rojo)}
.access-box:before{content:"";display:block;max-width:330px;height:1px;margin:0 auto 12px; center/contain no-repeat}
.youtube-btn{background:#ff0000!important;border-radius:14px!important;font-size:18px!important;padding:16px 24px!important}
.help-box{margin-top:22px;background:#f3f6fb;border-left:4px solid var(--envivo-rojo);border-radius:14px;padding:16px;text-align:left;line-height:1.5}
.tv-body{background:linear-gradient(135deg,rgba(4,25,37,.92),rgba(8,56,79,.92)),url('img/envivotv-hero.jpg') center/cover fixed;color:#fff;min-height:100vh}
.tv-body:before,.tv-body:after{display:none}
.tv-screen{max-width:980px;margin:0 auto;padding:44px 24px;text-align:center}
.tv-logo{max-width:390px;width:60%;height:auto;border-radius:18px;box-shadow:var(--envivo-shadow);margin-bottom:1px}
.tv-code{font-size:64px;letter-spacing:9px;font-weight:900;background:#fff;color:var(--envivo-azul-900);border-radius:22px;padding:26px 34px;margin:24px auto;display:inline-block;border:4px solid var(--envivo-rojo);box-shadow:0 18px 42px rgba(0,0,0,.26)}
.tv-screen h1{font-size:38px;margin:8px 0 12px;color:#fff}
.tv-screen h2{color:#fff;word-break:break-word}
.tv-screen .muted{color:#c9d7e2}
#estado{font-size:20px;font-weight:800;margin-top:18px}

.cliente-resumen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 18px 0 24px 0;
}

.cliente-resumen div {
    background: rgba(18, 32, 43, 0.06);
    border: 1px solid rgba(18, 32, 43, 0.10);
    border-radius: 14px;
    padding: 14px;
}

.cliente-resumen span {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cliente-resumen strong {
    display: block;
    color: #12202b;
    font-size: 15px;
    word-break: break-word;
}

.transmisiones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.transmision-card {
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
    border: 1px solid rgba(18, 32, 43, 0.10);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.10);
    transition: 0.22s ease;
    display: flex;
    flex-direction: column;
    min-height: 330px;
}

.transmision-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.16);
}

.transmision-top {
    position: relative;
    min-height: 135px;
    background:
        linear-gradient(135deg, rgba(18, 32, 43, 0.96), rgba(10, 38, 69, 0.96)),
        url('img/logo-envivotv.png') center center / 75% auto no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.live-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #e72232;
    color: #ffffff;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.transmision-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(5px);
}

.transmision-body {
    padding: 18px;
    flex: 1;
}

.transmision-body h3 {
    margin: 0 0 8px 0;
    color: #12202b;
    font-size: 20px;
}

.transmision-body p {
    margin: 0 0 18px 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.45;
}

.transmision-precio {
    background: #12202b;
    color: #ffffff;
    border-radius: 14px;
    padding: 13px;
}

.transmision-precio span {
    display: block;
    font-size: 12px;
    color: #cbd5e1;
    margin-bottom: 4px;
}

.transmision-precio strong {
    display: block;
    font-size: 22px;
    color: #ffffff;
}

.transmision-form {
    padding: 0 18px 18px 18px;
}

.btn-transmision {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 14px 16px;
    background: #e72232;
    color: #ffffff;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    transition: 0.2s ease;
}

.btn-transmision:hover {
    background: #ff3445;
    transform: translateY(-1px);
}

.estado-card {
    margin-top: 12px;
    padding: 10px 12px;
    background: #eef2f7;
    border-radius: 12px;
    color: #12202b;
    font-size: 14px;
}

.estado-card strong {
    text-transform: uppercase;
}

.btn-ver-transmision {
    display: block;
    text-align: center;
    background: #198754;
    text-decoration: none;
}

.btn-ver-transmision:hover {
    background: #157347;
    text-decoration: none;
}

.btn-bloqueado {
    background: #6c757d;
    cursor: not-allowed;
    opacity: 0.75;
}

.badge-habilitado-card {
    background: #198754;
}

.badge-pendiente-card {
    background: #ffc107;
    color: #111827;
}

.badge-bloqueado-card {
    background: #6c757d;
}

.reloj-top {
    text-decoration:none;
    filter:brightness(.94);
    color: #fff !important;
    font-weight: 700;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
}


@media (max-width: 768px) {
    .cliente-resumen {
        grid-template-columns: 1fr;
    }

    .transmisiones-grid {
        grid-template-columns: 1fr;
    }

    .transmision-card {
        min-height: auto;
    }
}

@media(max-width:760px){
    .header .container{display:block;text-align:center}
    .brand{justify-content:center;margin-bottom:10px}
    .brand-logo img,.brand-img{height:48px;max-width:210px;margin:auto}
    .brand-logo span{display:none}
    .nav{justify-content:center;margin-top:10px}
    .nav a{font-size:13px;padding:9px 10px}
    .form-grid{grid-template-columns:1fr}
    .container{padding:15px}
    .card{padding:18px;border-radius:16px}
    .table th,.table td{font-size:13px;padding:10px}
    .actions{display:block}
    .actions .btn{margin-bottom:8px;width:100%}
    .btn,button{width:100%;margin-top:7px}
    .login-box{margin:28px auto}
    .access-box{margin:28px auto;padding:22px}
    .access-box:before{height:1px}
    .tv-screen{padding:30px 14px}
    .tv-logo{max-width:310px}
    .tv-code{font-size:38px;letter-spacing:5px;padding:20px 22px}
    .tv-screen h1{font-size:30px}
}