*{
 box-sizing:border-box;
}

html,body{
 min-height:100%;
}

body{
 margin:0;
 background:#010912;
 color:white;
 font-family:Arial,sans-serif;
 display:flex;
 flex-direction:column;
 min-height:100vh;
}

.top{
 height:65px;
 flex-shrink:0;
 background:#06111d;
 border-bottom:1px solid #2aa8ff;
 display:flex;
 align-items:center;
 padding:0 40px;
}

.logo{
 font-size:30px;
 font-weight:800;
 letter-spacing:-1px;
}

.logo span{
 color:#2aa8ff;
}

.stream-container{
 width:100%;
 max-width:1200px;
 margin:30px auto;
 padding:20px;
 background:#020f1d;
 border-radius:15px;
 flex:1;
}

.player-box{
 width:100%;
 aspect-ratio:16/9;
 background:#000;
 border:1px solid #2aa8ff;
 border-radius:14px;
 overflow:hidden;
}

.player-box iframe{
 width:100%;
 height:100%;
 border:0;
}

.channel-options{
 display:flex;
 gap:12px;
 margin-top:35px;margin-bottom:25px;
 flex-wrap:wrap;
}

.channel-options a{
 background:#071d33;
 color:white;
 border:1px solid #2aa8ff;
 padding:12px 28px;
 border-radius:10px;
 text-decoration:none;
}

.channel-options a:hover{
 background:#0d4f80;
}

footer{
 flex-shrink:0;
 background:#06111d;
 border-top:1px solid #2aa8ff;
 padding:25px;
 text-align:center;
}


.titulo-stream{
    font-size:18px;
    font-weight:700;
    margin-bottom:15px;
}

.volver-agenda{
    margin-bottom:15px;
}

.volver-agenda a{
    color:white;
    text-decoration:none;
    background:#071d33;
    border:1px solid #2aa8ff;
    padding:8px 18px;
    border-radius:8px;
    display:inline-block;
}

.player-box{
    margin-bottom:20px;
}

.channel-options{
    margin-top:25px;
}


.logo{
    display:flex;
    flex-direction:column;
    line-height:1;
}

.logo small{
    font-size:12px;
    font-weight:normal;
    margin-top:4px;
    color:#ffffff;
}

.volver-agenda{
    margin-top:25px;
}

.volver-agenda a{
    display:inline-block;
    padding:10px 20px;
    border-radius:8px;
    border:1px solid #2aa8ff;
    background:#071d33;
    color:white;
    text-decoration:none;
}

@media(max-width:600px){
    .channel-options{
        flex-direction:column;
    }

    .channel-options a{
        width:100%;
        text-align:center;
    }
}


/* Ajuste final cabecera y vuelta */
.top{
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
}

.logo small{
    display:block;
    margin-top:5px;
    font-size:13px;
    font-weight:400;
}

.volver-agenda{
    width:100%;
    text-align:center;
    margin-top:30px;
}

.volver-agenda a{
    display:inline-block;
}

@media(max-width:600px){
    .volver-agenda{
        text-align:center;
    }
}


/* Cabecera más limpia */
.top{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
}

.logo{
    display:block;
    line-height:1;
}

.logo small{
    display:block;
    margin-top:6px;
    font-size:12px;
}

/* Barra lateral verde */
::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#010912;
}

::-webkit-scrollbar-thumb{
    background:#2aa8ff;
    border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
    background:#249cff;
}

*{
    scrollbar-width:thin;
    scrollbar-color:#2aa8ff #010912;
}


/* Ajustes finales de cabecera y espacios */
.top{
    padding-top:8px;
    padding-bottom:8px;
}

.logo{
    line-height:1.05;
}

.logo small{
    margin-top:8px;
    font-size:12px;
}

/* menos separación entre opciones y volver */
.volver-agenda{
    margin-top:18px;
}

/* opciones opcionales: si no existen no reservan espacio */

@media(max-width:600px){
    .stream-container{
        margin-top:12px;
        padding:12px;
    }

    .channel-options{
        margin-bottom:0;
    }

    .volver-agenda{
        margin-top:18px;
    }
}


.logo-icon{
    width:42px;
    height:42px;
    object-fit:cover;
    border-radius:50%;
    margin-right:12px;
    vertical-align:middle;
}

.logo{
    display:flex;
    align-items:center;
}

.logo small{
    display:block;
}
@media(max-width:600px){
    .logo-icon{
        width:35px;
        height:35px;
    }
}


.stream-actions{
    width:100%;
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:35px;margin-bottom:25px;
    flex-wrap:wrap;
}

.stream-actions a{
    display:inline-block;
    padding:10px 20px;
    border-radius:8px;
    border:1px solid #2aa8ff;
    background:#071d33;
    color:white;
    text-decoration:none;
}

.stream-actions a:hover{
    background:#0d4f80;
}

@media(max-width:600px){
    .stream-actions{
        flex-direction:column;
        align-items:center;
    }

    .stream-actions a{
        width:100%;
        text-align:center;
    }
}


/* Corrección logo cabecera */
.top{
    flex-direction:row;
    align-items:center;
}

.logo{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    line-height:1.05;
}

.logo-icon{
    flex-shrink:0;
}


/* Cabecera y footer estilo agenda */
header,
.top{
    background:#071d33;
    border-bottom:1px solid #2aa8ff;
}

footer{
    background:#071d33;
    border-top:1px solid #2aa8ff;
    color:white;
}

.logo{
    display:block;
    white-space:nowrap;
    line-height:1;
}

.logo small{
    display:block;
    margin-top:5px;
    font-size:12px;
}

.brand,
.logo-container{
    display:flex;
    align-items:center;
}


/* Igual que la estructura original 437 */
main{
    display:block !important;
    box-sizing:border-box !important;
    width:1200px !important;
    max-width:1200px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

.player-box{
    width:100% !important;
}

@media(max-width:1230px){
    main{
        width:calc(100% - 30px) !important;
        max-width:1200px !important;
    }
}


/* Ajustes finales */
html,body{
    min-height:100%;
}

body{
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
}

main{
    flex:1;
    max-width:1200px !important;
    width:1200px !important;
    margin:50px auto 30px !important;
}

.player-box{
    width:100% !important;
    max-width:1200px !important;
    overflow:hidden !important;
    position:relative !important;
    aspect-ratio:16/9 !important;
}

.player-box iframe{
    width:100% !important;
    max-width:100% !important;
    height:100% !important;
    border:0 !important;
    display:block !important;
}

@media(max-width:1230px){
    main{
        width:calc(100% - 30px) !important;
    }
}

@media(max-width:600px){
    main{
        width:calc(100% - 20px) !important;
        margin-top:20px !important;
    }
}

.seo-text{
    margin-top:40px;
    padding:20px;
    background:#041526;
    border-radius:12px;
    line-height:1.6;
    font-size:14px;
}
.seo-text h2{
    font-size:20px;
    margin-bottom:15px;
}

/* Ajuste final opciones y acciones */
.channel-options{
    margin-bottom:35px !important;
}

.stream-actions{
    margin-top:0 !important;
    margin-bottom:25px !important;
}


/* Separacion final entre opciones y acciones */
.channel-options{
    margin-bottom:40px !important;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.stream-actions{
    margin-top:0 !important;
    margin-bottom:30px !important;
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}

/* Navegación a portada principal */
.dl-principal-link{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1px solid #2aa8ff;border-radius:10px;background:#071d33;color:#fff;text-decoration:none;font-weight:700;white-space:nowrap}
.dl-principal-link:hover{background:#2aa8ff;color:#00140e}
@media(max-width:600px){.dl-principal-link{padding:8px 10px;font-size:13px}}


/* Principal debajo del logo en movil */
@media(max-width:600px){
  .top{height:auto!important;min-height:105px!important;padding:10px 20px!important;align-items:flex-start!important;justify-content:center!important;}
  .top .brand{width:100%!important;}
  .top .dl-principal-link{margin:8px 0 0 0!important;align-self:flex-start!important;padding:8px 10px!important;font-size:13px!important;}
}

/* Botón pantalla completa - estilo Fútbol Libre */
.fullscreen-action button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:10px 20px;
    border:1px solid #2aa8ff;
    border-radius:8px;
    background:#071d33;
    color:#fff;
    font:inherit;
    font-weight:600;
    line-height:1.2;
    cursor:pointer;
    transition:background .2s ease, transform .2s ease;
}
.fullscreen-action button:hover{
    background:#0d4f80;
}
.fullscreen-action button:active{
    transform:scale(.98);
}
@media(max-width:600px){
    .fullscreen-action button{
        min-height:42px;
        padding:10px 18px;
    }
}

/* Correccion final cabecera movil: logo y Principal en lineas separadas */
@media(max-width:600px){
  .top{
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    height:auto !important;
    min-height:105px !important;
    padding:10px 20px !important;
    box-sizing:border-box !important;
  }
  .top .brand,
  .top .logo-container{
    width:100% !important;
    min-width:0 !important;
  }
  .top .dl-principal-link{
    display:inline-flex !important;
    width:auto !important;
    max-width:100% !important;
    margin:8px 0 0 0 !important;
    align-self:flex-start !important;
    box-sizing:border-box !important;
  }
}


/* Controles flexibles unificados Fútbol Libre */
.player-controls-flex{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin:10px 0 30px;
}
/* En pantallas con ancho, todos los botones participan en el mismo flujo. */
.player-controls-flex > .fullscreen-action,
.player-controls-flex > .channel-options,
.player-controls-flex > .stream-actions{
    display:contents !important;
}
.player-controls-flex .fullscreen-action,
.player-controls-flex .channel-options,
.player-controls-flex .stream-actions{
    margin:0 !important;
}
@media(max-width:600px){
    .player-controls-flex{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
        margin:10px 0 30px;
    }
    .player-controls-flex > .fullscreen-action{
        display:flex !important;
        justify-content:center;
        width:100%;
        margin:0 !important;
    }
    .player-controls-flex > .channel-options,
    .player-controls-flex > .stream-actions{
        display:flex !important;
        flex-direction:column;
        width:100%;
        gap:12px;
        margin:0 !important;
    }
    .player-controls-flex .channel-options a,
    .player-controls-flex .stream-actions a{
        width:100%;
        box-sizing:border-box;
        margin:0 !important;
    }
}

/* Acciones principales destacadas: pantalla completa, actualizar y volver */
.player-controls-flex .fullscreen-action button,
.player-controls-flex .stream-actions a{
    background:#0d4f80 !important;
    border-color:#2aa8ff !important;
    color:#fff !important;
    font-weight:700 !important;
    box-shadow:0 0 8px rgba(0,255,136,.38), inset 0 0 0 1px rgba(0,255,136,.12);
    transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.player-controls-flex .fullscreen-action button:hover,
.player-controls-flex .stream-actions a:hover{
    background:#0d568a !important;
    box-shadow:0 0 12px rgba(0,255,136,.55), inset 0 0 0 1px rgba(0,255,136,.18);
}


/* Opcion activa Fútbol Libre */
.channel-options a.opcion-activa{
    background:#168cff !important;
    border-color:#55baff !important;
    box-shadow:0 0 0 1px rgba(36,156,255,.28),0 0 12px rgba(36,156,255,.24);
    font-weight:700;
}
.channel-options a.opcion-activa:hover{
    background:#168cff !important;
}

/* Futbol Libre azul: identidad visual de reproductores */
.top .brand .logo{font-size:28px!important;font-weight:800;color:#fff!important}.top .brand .logo span{color:#249cff!important}.top .brand .logo::after{content:none!important}.stream-actions a,.fullscreen-action button{background:#168cff!important;border-color:#55baff!important;color:#fff!important}.stream-actions a:hover,.fullscreen-action button:hover{background:#249cff!important}.channel-options a{border-color:#2aa8ff!important}.channel-options a:hover{background:#0d4f80!important}

/* FUTBOL LIBRE - AZUL V4: controles del reproductor */
.top .dl-principal-link,
.player-controls-flex .fullscreen-action button,
.player-controls-flex .stream-actions a,
.fullscreen-action button,
.stream-actions a {
  background:#168cff !important;
  border-color:#55baff !important;
  color:#fff !important;
  box-shadow:none !important;
}
.top .dl-principal-link:hover,
.player-controls-flex .fullscreen-action button:hover,
.player-controls-flex .stream-actions a:hover,
.fullscreen-action button:hover,
.stream-actions a:hover { background:#249cff !important; }
.channel-options a.btn { background:#071f35 !important; border-color:#249cff !important; color:#fff !important; }
.channel-options a.btn.dl-option-active { background:#168cff !important; border-color:#55baff !important; box-shadow:0 0 10px rgba(36,156,255,.75),0 0 22px rgba(36,156,255,.35) !important; }