/* ================================================================
   StreamLink Catalog — catalog.css
   ================================================================ */

/* ── Variables ─────────────────────────────────────────────────── */
.slc-catalog {
    --slc-bg:          transparent;
    --slc-surface:     #1a1a1a;
    --slc-surface2:    #242424;
    --slc-border:      #2e2e2e;
    --slc-text:        #e8e8e8;
    --slc-text-muted:  #fff;
    --slc-accent:      #e50914;
    --slc-accent2:     #ff6b6b;
    --slc-radius:      10px;
    --slc-radius-sm:   6px;
    --slc-shadow:      0 4px 24px rgba(0,0,0,.6);
    --slc-gap:         16px;
    --slc-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-family:       var(--slc-font);
    color:             var(--slc-text);
    background:        var(--slc-bg);
    padding: 0 20px 0 20px;
    border-radius:     var(--slc-radius);
    /*max-width:         1400px;*/
    margin:            0 auto;
    box-sizing:        border-box;
}

*, *::before, *::after { box-sizing: inherit; }



/* ── Barra superior ─────────────────────────────────────────────── */
.slc-topbar {
    display:         flex;
    align-items:     center;
    gap:             12px;
    margin-bottom:   var(--slc-gap);
    flex-wrap:       wrap;
}

/* ── Selector de país ────────────────────────────────────────────── */
.slc-country-wrap { position: relative; }


div.slc-topbar
{    
    position: fixed;
    right: 4%;
    transform: translate(-0%, -0%);
    left: 10%;
        
    
   /* position: sticky;*/
    top: 0;
    z-index: var(--z-header);
    height: var(--mt-header-h);
    /*background: var(--mt-header-bg);*/
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 16px;
    /*box-shadow: 0 6px 20px rgb(0 0 0 / 55%), 0 2px 4px rgb(0 0 0 / 40%), inset 0 1px 0 rgb(255 255 255 / 18%), inset 0 -8px 4px rgb(0 0 0 / 30%);*/}




.slc-country-btn {
    display:         flex;
    align-items:     center;
    gap:             6px;
    padding:         10px 14px;
    background:      var(--slc-surface);
    border:          1px solid #fff;
    border-radius:   20px;
    color:           var(--slc-text);
    cursor:          pointer;
    font-size:       14px;
    white-space:     nowrap;
    transition:      border-color .2s;
}
/*.slc-country-btn:hover { border-color: var(--slc-accent); }*/
.slc-chevron { flex-shrink: 0; opacity: .6; }

.slc-country-dropdown {
    display:          none;
    position:         absolute;
    top:              calc(100% + 6px);
    left:             0;
    z-index:          1000;
    background:       var(--slc-surface);
    border:           1px solid var(--slc-border);
    border-radius:    var(--slc-radius-sm);
    box-shadow:       var(--slc-shadow);
    width:            240px;
    max-height:       360px;
    overflow:         hidden;
    flex-direction:   column;
}
.slc-country-dropdown.slc-open { display: flex; }

.slc-country-search {
    padding:          10px 12px;
    border:           none;
    border-bottom:    1px solid var(--slc-border);
    background:       var(--slc-surface2);
    color:            var(--slc-text);
    font-size:        13px;
    outline:          none;
    width:            100%;
}

#slc-country-list {
    list-style:       none;
    margin:           0;
    padding:          0;
    overflow-y:       auto;
    max-height:       300px;
}
#slc-country-list li {
    padding:          9px 14px;
    cursor:           pointer;
    font-size:        13px;
    transition:       background .15s;
}
#slc-country-list li:hover { background: var(--slc-surface2); }

/* ── Buscador ───────────────────────────────────────────────────── */
.slc-search-wrap {
    position:         relative;
    flex:             1;
    min-width:        200px;
}
.slc-search-icon {
    position:         absolute;
    left:             12px;
    top:              50%;
    transform:        translateY(-50%);
    color:            var(--slc-text-muted);
    pointer-events:   none;
}
.slc-search-input {
    width:            100%;
    padding:          10px 36px 10px 40px;
    background:       var(--slc-surface);
    border:           1px solid #fff;
    border-radius:    20px;
    color:            var(--slc-text);
    font-size:        15px;
    outline:          none;
    transition:       border-color .2s;
}
/*.slc-search-input:focus { border-color: var(--slc-accent); }*/
.slc-search-input::placeholder { color: var(--slc-text-muted); }
.slc-search-clear {
    position:         absolute;
    right:            10px;
    top:              50%;
    transform:        translateY(-50%);
    background:       none;
    border:           none;
    color:            var(--slc-text-muted);
    cursor:           pointer;
    padding:          4px;
    border-radius:    50%;
    display:          flex;
    align-items:      center;
}
.slc-search-clear:hover { color: var(--slc-text); }

/* ── Filtros ────────────────────────────────────────────────────── */
.slc-filters {
    display:          flex;
    flex-direction:   column;
    gap:              14px;
   /* margin-bottom:    20px;*/
}
.slc-filter-group {
    display:          flex;
    align-items:      flex-start;
    gap:              10px;
    flex-wrap:        wrap;
}
.slc-filter-label {
    font-size:        15px;
    text-transform:   uppercase;
    letter-spacing:   .08em;
    color:            var(--slc-text-muted);
    padding-top:      7px;
    min-width:        80px;
    flex-shrink:      0;
}

/* Botones de plataforma */
.slc-platforms-btns {
    display:          flex;
    flex-wrap:        wrap;
    gap:              8px;
    justify-content: center;
}
.slc-plat-btn {
    display:          flex;
    align-items:      center;
    /*padding:          5px 12px;
    background:       var(--slc-surface);
    border:           1px solid var(--slc-border);*/
    border-radius:    20px;
    color:            var(--slc-text-muted);
    cursor:           pointer;
    font-size:        13px;
   
    /*height:           34px;*/
        background: transparent;
    border: 0;
    padding:          2px;
}
.slc-plat-btn:hover        { border-color: var(--slc-accent); color: var(--slc-text); }
.slc-plat-btn.slc-active   {      border-radius: 20pc;   border: 3px solid darkgreen; background: darkgreen;/*border-color: var(--slc-accent); color: var(--slc-text); background: rgba(229,9,20,.12);padding: 2px;*/ }
.slc-plat-logo--btn {
    height:           35px;
    width:            auto;
    object-fit:       contain;
    /*border-radius:    3px;*/
    border-radius: 20pc;
}

/* Botones de estado */
.slc-status-btns {
    display:          flex;
    flex-wrap:        wrap;
    gap:              8px;
}
.slc-status-btn {
    padding:          6px 14px;
    background:       var(--slc-surface);
    border:           1px solid var(--slc-border);
  /*  border-radius:    20px;*/
    color:            var(--slc-text-muted);
    cursor:           pointer;
    font-size:        13px;
   /* transition:       all .2s;*/
}
.slc-status-btn:hover      { border-color: var(--slc-accent); color: var(--slc-text); }
.slc-status-btn.slc-active { border-color: var(--slc-accent); color: var(--slc-accent); background: rgba(229,9,20,.1); }

/* Botones de género */
.slc-genres-list {
    display:          flex;
    flex-wrap:        wrap;
    gap:              6px;
    max-height:       90px;
    overflow-y:       auto;
}
.slc-genre-btn {
    padding:          4px 12px;
    background:       var(--slc-surface);
    border:           1px solid var(--slc-border);
   /* border-radius:    16px;*/
    color:            var(--slc-text-muted);
    cursor:           pointer;
  font-size:        17px;
  /*  transition:       all .2s;*/
}
.slc-genre-btn:hover      { border-color: #fff; background: darkgreen; }
.slc-genre-btn.slc-active { background: seagreen; }

/* Filtro años */
.slc-year-inputs {
    display:          flex;
    align-items:      center;
    gap:              4px;
}
.slc-year-input {
   /* width:            90px;*/
    padding:          10px 3px;
    background:       var(--slc-surface);
    border:           1px solid #fff;
    border-radius:    20px;
    color:            #fff;
    font-size:        16px;
    outline:          none;
    /*transition:       border-color .2s;*/
    -moz-appearance: textfield;
    text-align: center;
}
.slc-year-input:focus { border-color: var(--slc-accent); }
.slc-year-input::-webkit-outer-spin-button,
.slc-year-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.slc-year-sep { color: var(--slc-text-muted); font-size: 16px; }

/* ── Info de resultados ─────────────────────────────────────────── */
.slc-results-info {
    font-size:        13px;
    color:            var(--slc-text-muted);
    margin-bottom:    16px;
    min-height:       18px;
}

/* ── Grid de películas ──────────────────────────────────────────── */
.slc-movies-grid {
    display:          grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap:              var(--slc-gap);
}

/* ── Tarjeta ─────────────────────────────────────────────────────── */
.slc-card {
    position:         relative;
    border-radius:    var(--slc-radius);
    overflow:         hidden;
    cursor:           pointer;
    transition:       transform .25s, box-shadow .25s;
    background:       var(--slc-surface);
    aspect-ratio:     2/3;
    border: 1px solid #000;
}
.slc-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 32px rgba(0,0,0,.7); }
.slc-card--seen { /*opacity: .5;*/position: relative; overflow: hidden; }
.slc-card--seen::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
     background-color: #72aee670;
    z-index: 1;
    pointer-events: none;
}
/*.slc-card--seen:hover { opacity: .75; }*/

.slc-card-inner {
    position:         relative;
    width:            100%;
    height:           100%;
}
.slc-card-img {
    width:            100%;
    height:           100%;
    object-fit:       cover;
    display:          block;
}
.slc-card-no-img {
    width:            100%;
    height:           100%;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    background:       var(--slc-surface2);
    color:            var(--slc-text-muted);
}

/* Logos de plataformas sobre la imagen */
.slc-card-plats {
    position:         absolute;
    top:              6px;
    left:             6px;
    display:          flex;
    flex-wrap:        wrap;
    gap:              3px;
    z-index:          2;
}
.slc-plat-logo--card {
    height:           34px;
    width:            auto;
    object-fit:       contain;
    border-radius:    4px;
    background:       rgba(0,0,0,.7);
    padding:          1px 3px;
}
.slc-plat-text {
    font-size:        10px;
    background:       rgba(0,0,0,.75);
    padding:          2px 5px;
    border-radius:    4px;
}

/* Rating sobre la imagen */
.slc-card-rating {
    position:         absolute;
    top:              6px;
    right:            6px;
    background:       rgba(0,0,0,.75);
    color:            #f5c518;
    font-size:        11px;
    font-weight:      600;
    padding:          2px 6px;
    border-radius:    4px;
    z-index:          2;
}

/* Overlay inferior con título */
.slc-card-overlay {
    position:         absolute;
    bottom:           0;
    left:             0;
    right:            0;
    padding:          24px 10px 10px;
    background:       linear-gradient(0deg, rgba(0,0,0,.92) 0%, transparent 100%);
    z-index:          2;
}
.slc-card-title {
    margin:           0;
    font-size: 25px;
    -webkit-text-stroke: 1px #000;
    line-height:      1.3;
    color:            #fff;
    overflow:         hidden;
    display:          -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: center;

}
.slc-card-year {
    font-size:        15px;
    color:            #fff;
    display:          block;
    margin-top:       2px;
    text-align: center;
}

/* Botón ver más tarde en tarjeta */
.slc-card-watchlater {
    position:         absolute;
    bottom:           8px;
    right:            8px;
   background: darkgreen;
    border:           none;
    border-radius:    50%;
    width:            30px;
    height:           30px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    cursor:           pointer;
    color:            rgba(255,255,255,.7);
    z-index:          3;
    transition:       all .2s;
    opacity:          0;
}
.slc-card:hover .slc-card-watchlater,
.slc-card-watchlater.slc-active { opacity: 1; }
.slc-card-watchlater.slc-active { color: var(--slc-accent); }
.slc-card-watchlater:hover { background: rgba(229,9,20,.3); color: var(--slc-accent); }

/* ── Loader / spinner ───────────────────────────────────────────── */
.slc-loader {
    display:          none;
    justify-content:  center;
    padding:          32px;
}
.slc-spinner {
    width:            36px;
    height:           36px;
    border:           3px solid var(--slc-border);
    border-top-color: var(--slc-accent);
    border-radius:    50%;
    animation:        slc-spin .8s linear infinite;
}
@keyframes slc-spin { to { transform: rotate(360deg); } }

.slc-end-msg, .slc-empty {
    text-align:       center;
    color:            var(--slc-text-muted);
    padding:          32px;
    font-size:        14px;
}
.slc-empty {
    flex-direction:   column;
    align-items:      center;
    gap:              12px;
}
.slc-empty svg { opacity: .4; }

/* ═══════════════════════════════════════════════════════════════════
   MODAL PELÍCULA
═══════════════════════════════════════════════════════════════════ */
.slc-modal-overlay {
    position:         fixed;
    inset:            0;
   /* background:       rgba(0,0,0,.85);*/
    z-index:          9999;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          20px;
    overflow-y:       auto;
    backdrop-filter:  blur(4px);
}

.slc-modal {
   /* position:         relative;*/
    background:       #335163; /*#141414;*/
    border-radius:    14px;
    width:            100%;
    max-width:        900px;
    overflow:         hidden;
    box-shadow:       0 24px 80px rgba(0,0,0,.9);
    max-height:       90vh;
   overflow-y:       auto;

    padding: 0 10px 0 10px;
}

.slc-modal-close {
position: absolute !important;
   top: 31px;
    right: 272px;
    z-index: 10 !important;
    background: red;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
}
.slc-modal-close:hover { background: rgba(229,9,20,.8); }

/* Backdrop */

#slc-modal-backdrop > * {
    position: relative;
    z-index: 1;
}

.slc-modal-backdrop {
  /*   height:           220px;
    background-size:  cover;
    background-position: center top;
    background-color: var(--slc-surface2);
    position:         relative;
    */
     /* top: 0;
    left: 0;
    right: 0;*/
    height: 100vh;
    background-size: cover;
    background-position: center top;
    
    box-shadow: 0 0 20px rgb(0 0 0), 0 0 4px rgb(0 0 0 / 40%), inset 0 0 4px rgb(255 255 255), inset 0 0 12px rgb(0 0 0);
}
.slc-modal-backdrop::after {
    content:          '';
    position:         absolute;
   /* bottom:           0;
    left:             0;
    right:            0;
    height:           100%;*/
      background: linear-gradient( to bottom, rgba(10,10,15,.5) 0%, rgba(10,10,15,.85) 60%, rgba(10,10,15,.5) 100% );
inset: 0;
}

/* Body del modal: 2 columnas */
.slc-modal-body {
    display:          flex;
    gap:              28px;
    padding:          0 28px 28px;
    top: -128px;
    position: inherit;
}

/* Columna izquierda: poster + botones */
.slc-modal-left {
    flex-shrink:      0;
    width:            180px;
   /* margin-top:       -80px;*/
    position:         relative;
    z-index:          2;
    display:          flex;
    flex-direction:   column;
    gap:              10px;
    margin-top: 134px;
}
.slc-modal-poster {
    width:            100%;
    border-radius:    10px;
    border: 1px solid #000;
   box-shadow: 0 0 20px rgb(0 0 0), 0 0 4px rgb(0 0 0 / 40%), inset 0 0 4px rgb(255 255 255), inset 0 0 12px rgb(0 0 0);
    display:          block;
    background:       var(--slc-surface2);
    aspect-ratio:     2/3;
    object-fit:       cover;
}

/* Botones VER EN */
.slc-btn-play {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    gap:              11px;
    padding:          2px 14px;
    background:       var(--plat-color, #e50914);
    border-radius:    var(--slc-radius-sm);
    color:            #fff;
    font-size:        17px;
    font-weight:      600;
    cursor:           pointer;
    width:            100%;
    transition:       opacity .2s, transform .15s;
    border-radius: 20pc;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 6px 20px rgb(0 0 0 / 55%), 0 2px 4px rgb(0 0 0 / 40%), inset 0 1px 0 rgb(255 255 255 / 18%), inset 0 -2px 4px rgb(0 0 0 / 30%);
    margin-bottom: 7px;
}
.slc-btn-play:hover { transform: scale(1.02); }
.slc-plat-logo--btn {
    height:           35px;
    width:            auto;
    object-fit:       contain;
    border-radius:    3px;
    border-radius: 20pc;
}

.slc-btn-trailer {
display: flex;
    align-items: center;
    justify-content: center;
    gap: 38px;
    padding: 9px 14px;
    background: midnightblue;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: opacity .2s, transform .15s;
    border-radius: 20pc;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 6px 20px rgb(0 0 0 / 55%), 0 2px 4px rgb(0 0 0 / 40%), inset 0 1px 0 rgb(255 255 255 / 18%), inset 0 -2px 4px rgb(0 0 0 / 30%);
    margin-bottom: 8px;
}
.slc-btn-trailer:hover { transform: scale(1.02); }

.slc-btn-watchlater {
display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 9px 14px;
    background: darkgreen;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: opacity .2s, transform .15s;
    border-radius: 20pc;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 6px 20px rgb(0 0 0 / 55%), 0 2px 4px rgb(0 0 0 / 40%), inset 0 1px 0 rgb(255 255 255 / 18%), inset 0 -2px 4px rgb(0 0 0 / 30%);
    /*margin-bottom: 20px;*/
}
/*
.slc-plat-logo--btn {

    width: 40% !important;
    object-fit: none !important;
border-radius: 0!important;
}

*/

.slc-btn-watchlater:hover {transform: scale(1.02);}

.slc-btn-watchlater.slc-active { color: var(--slc-accent); border-color: var(--slc-accent); }

/* Columna derecha: info */
.slc-modal-right {
    flex:             1;
    min-width:        0;
    padding-top:      16px;
}

.slc-modal-platforms {
    display:          flex;
    flex-wrap:        wrap;
    gap:              6px;
    margin-bottom:    10px;
}
.slc-plat-logo--modal {
    height:           28px;
    width:            auto;
    object-fit:       contain;
    border-radius:    6px;
    background:       rgba(255,255,255,.08);
    padding:          2px 6px;
}

.slc-modal-title {
    font-size:        clamp(28px, 3vw, 26px);
    font-weight:      700;
    margin:           4px 0 0;
    line-height:      1.2;
    color:            #fff;
}
.slc-modal-tagline {
    font-style:       italic;
    color:            var(--slc-text-muted);
    font-size:        14px;
    margin:           0;
}

.slc-modal-meta {
    display:          flex;
    flex-wrap:        wrap;
    gap:              10px;
    margin-bottom:    16px;
    font-size:        13px;
    color:            var(--slc-text-muted);
}
.slc-meta-item::after {
    content:          '·';
    margin-left:      10px;
    opacity:          .4;
}
.slc-meta-item:last-child::after { display: none; }

.slc-modal-synopsis {
    font-size:        17px;
    line-height:      1.7;
    color:            #fff;
    margin-bottom:    20px;
}

/* Personas */
.slc-modal-people {
    display:          flex;
    flex-direction:   column;
    gap:              10px;
    margin-bottom:    20px;
    
}
.slc-people-row {
    display:          flex;
    gap:              8px;
    align-items:      flex-start;
}
.slc-people-label {
  font-size:        15px;
    text-transform:   uppercase;
    letter-spacing:   .06em;
    color:            var(--slc-text-muted);
    min-width:        70px;
    padding-top:      4px;
    flex-shrink:      0;
}
.slc-people-list {
    display:          flex;
    flex-wrap:        wrap;
    gap:              6px;
}
.slc-person-link {
    background:       var(--slc-surface2);
    border:           1px solid var(--slc-border);
    border-radius:    16px;
    padding:          3px 10px;
    font-size:        13px;
    color:            var(--slc-text);
    cursor:           pointer;
    transition:       all .2s;
}
.slc-person-link:hover { border-color: var(--slc-accent); color: var(--slc-accent); }

/* Rating */
.slc-rating-section {
    border-top:       1px solid var(--slc-border);
    padding-top:      16px;
    margin-top:       4px;
}
.slc-rating-display {
    display:          flex;
    align-items:      center;
    gap:              6px;
    margin-bottom:    12px;
    font-size:        20px;
    justify-content: center;
    margin-top: -54px;
}
.slc-rating-icon {
    color:            #f5c518;
    font-size:        20px;
}
.slc-rating-count {
  font-size:        20px;
    color:            var(--slc-text-muted);
}

.slc-user-rating-wrap {
    display:          flex;
    align-items:      center;
    gap:              10px;
    flex-wrap:        wrap;
    justify-content: center;
   /* margin-top: -120px;*/
    -webkit-text-stroke: 1px #dd9933;
    margin-top: -11px;
}
.slc-stars {
    display:          flex;
    gap:              2px;
}
.slc-star {
    background:       none;
    border:           none;
    font-size:        22px;
    cursor:           pointer;
    color:            var(--slc-border);
    padding:          0 1px;
    line-height:      1;
    transition:       color .1s, transform .1s;
}
.slc-star:hover,
.slc-star.slc-hover { color: #f5c518; transform: scale(1.15); }
.slc-star.slc-active { color: #f5c518; }

.slc-login-msg {
    font-size:        13px;
    color:            var(--slc-text-muted);
    margin:           0;
}
.slc-login-msg a { color: var(--slc-accent); text-decoration: none; }
.slc-login-msg a:hover { text-decoration: underline; }

.slc-no-links {
    font-size:        13px;
    color:            var(--slc-text-muted);
    text-align:       center;
    padding:          10px 0;
    margin:           0;
}

/* ═══════════════════════════════════════════════════════════════════
   MODAL TRÁILER
═══════════════════════════════════════════════════════════════════ */
.slc-trailer-overlay,
.slc-player-overlay {
    position:         fixed;
    inset:            0;
    background:       rgba(0,0,0,.52);
    z-index:          10000;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          20px;
    backdrop-filter:  blur(6px);
    
}

.slc-trailer-wrap,
.slc-player-wrap {
    position:         relative;
    width:            100%;
    max-width:        900px;
    aspect-ratio:     16/9;
    border-radius:    10px;
    overflow:         hidden;
    background:       #000;
    box-shadow:       0 20px 60px rgba(0,0,0,.9);
    border: 2px solid;
}

.slc-trailer-wrap iframe,
.slc-player-wrap iframe {
    width:            100%;
    height:           100%;
    border:           none;
    display:          block;
}

.slc-trailer-close,
.slc-player-close {
    position:         absolute;
    top:              53px;
    right:            0;
    background:       red;
    border: 5px solid;
    color:            #fff;
    cursor:           pointer;
    padding:          6px;
    border-radius:    50%;
    display:          flex;
    align-items:      center;
        z-index: 9;
}
.slc-trailer-close:hover,
.slc-player-close:hover { background: rgba(255,255,255,.15); }

/* ═══════════════════════════════════════════════════════════════════
   PANEL PERSONA
═══════════════════════════════════════════════════════════════════ */
.slc-person-overlay {
    position:         fixed;
    inset:            0;
   /* background:       rgba(0,0,0,.85);*/
    z-index:          9999;
    display:          flex;
    align-items:      flex-end;
    justify-content:  center;
    backdrop-filter:  blur(4px);
}

.slc-person-wrap {
    background:       #181818;
    width:            100%;
    max-width:        100%;
    max-height:       80vh;
    border-radius:    14px 14px 0 0;
    overflow-y:       auto;
    padding:          20px;
}

.slc-person-header {
    display:          flex;
    justify-content:  space-between;
    align-items:      center;
    margin-bottom:    20px;
    position:         sticky;
    top:              0;
    background:       #181818;
    padding-bottom:   10px;
    border-bottom:    1px solid var(--slc-border);
    z-index:          1;
    box-shadow: 0 -6px 20px rgb(0 0 0 / 55%), 0 -2px 4px rgb(0 0 0 / 40%), inset 0 -1px 0 rgb(255 255 255 / 18%), inset 0 1px 4px rgb(0 0 0 / 30%);
}
.slc-person-header h3 {
    margin:           0;
    font-size:        18px;
    color:            #fff;
}
.slc-person-close {
       background:       red;
    border: 3px solid;
    border-radius:    50%;
    width:            32px;
    height:           32px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    cursor:           pointer;
    color:            #fff;
}

.slc-person-grid {
    display:          grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap:              14px;
}
.slc-empty-person {
    color:            var(--slc-text-muted);
    text-align:       center;
    grid-column:      1 / -1;
    padding:          32px;
}

span#slc-modal-genres.slc-meta-item.slc-meta-genres{background: rgba(232,184,75,.15);
    border: 1px solid rgba(232,184,75,.3);
    color: #e8b84b;
    font-size: 14px;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 500;}

span#slc-modal-duration.slc-meta-item{background: #1e1e30;
    padding: 5px 12px;
    font-size: 14px;
    border-radius: 20px;}


span#slc-modal-year.slc-meta-item{background: #1e1e30;
    padding: 5px 12px;
    font-size: 14px;
    border-radius: 20px;}

/* ── Aviso de login ──────────────────────────────────────────────── */
.slc-login-notice {
    position:         absolute;
    bottom:           calc(100% + 6px);
    right:            0;
    background:       #1a1a1a;
    border:           1px solid var(--slc-border);
    border-radius:    var(--slc-radius-sm);
    padding:          8px 12px;
    font-size:        13px;
    white-space:      nowrap;
    box-shadow:       var(--slc-shadow);
    z-index:          10;
    animation:        slc-fadein .2s ease;
}
.slc-login-notice a { color: var(--slc-accent); text-decoration: none; }

@keyframes slc-fadein {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}


.cs-movie-container{    margin: 0 auto;
   
    display: flex;
    gap: 48px;
    align-items: flex-start;}

.cs-movie-left{ flex-shrink: 0;
    width: 260px;
    text-align: center;display: grid;
    place-items: center;
    height: 81vh;}

.cs-movie-right{flex: 1;
    min-width: 0;
    padding-top: 53px;margin-left: -22px;}
    
    .descripcion{display: grid;
    place-items: center;
    height: 60vh; }
/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════ */
 .slc-btn-watchlater
      {    margin-bottom: 0px;
    flex: 0 0 calc(50% - 5px);
    box-sizing: border-box;}
     .slc-btn-report
      {    margin-bottom: 0px;
    flex: 0 0 calc(50% - 5px);
    box-sizing: border-box;}
     
     button.slc-btn-play
           {
    flex: 0 0 calc(50% - 5px);
    box-sizing: border-box;
     }


 .slc-modal-play-btns {  display: flex;gap: 10px;flex-wrap: wrap;}


.slc-modal-play-btns button:only-child {
    flex: 1 1 100%;
    max-width: 100%;
}

@media (max-width: 900px) {
    .slc-modal-meta{margin-top: 18px;}
    
       .descripcion{display: block;
    place-items: center;
    height: auto; }
    
    .slc-person-wrap{padding: 0px 5px 5px 5px}
    .slc-person-header{z-index: 3;}
    
    .slc-modal-close{right: 10px;}
    
    .cs-movie-right {
    padding-top: 0;
    margin-left: 0;
}
    
    .cs-movie-left {
/*flex-direction: column;
    align-items: center;
    display: flex;*/
    width: 100%;
    height: 67vh;
}
    
 .cs-movie-container   
    {align-items: flex-start;
    flex-direction: column;
    padding: 30px 16px 24px;
    gap: 24px;}
    
    
    
    .slc-catalog { padding: 12px; }

    .slc-topbar { flex-direction: column; align-items: stretch; }
    .slc-country-wrap { width: 100%; }
    .slc-country-btn { width: 100%; justify-content: space-between; }

    .slc-filter-group {
        flex-direction: column;
        gap: 8px;
    }
    .slc-filter-label { min-width: auto; padding-top: 0; }

    .slc-movies-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 10px;
    }

    /* Modal: columna única en móvil */
    .slc-modal { border-radius: 0; max-height: 100vh; max-width: 100%; }
    .slc-modal-overlay { padding: 0; align-items: flex-end; }
    .slc-modal { border-radius: 14px 14px 0 0; }
    .slc-modal-body { flex-direction: column; padding: 0 16px 24px; gap: 16px; }
    .slc-modal-left { width: 100%; flex-direction: column; flex-wrap: wrap; margin-top:-60px; }
    .slc-modal-poster { width: 180px; flex-shrink: 0; margin-top: 0; }
    .slc-modal-play-btns { flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; }
   /* .slc-modal-backdrop { height: 198px; }*/
    .slc-person-grid{gap: 4px;}
    .slc-rating-section {    padding-top: 69px;
    margin-top: 0;}
    
    .slc-star { font-size: 18px; }
    .slc-user-rating-wrap { flex-direction: column; align-items: flex-start;     margin-top: 0; }
.slc-stars {

    margin-top: -10px;
}
    /* Tráiler/player: pantalla completa */
    .slc-trailer-wrap, .slc-player-wrap {
        max-width: 100%;
        border-radius: 0;
        
    }
    .slc-trailer-overlay, .slc-player-overlay { padding: 0; }
    .slc-trailer-close, .slc-player-close {
        top: 8px;
        right: 8px;
        background: rgba(0,0,0,.7);
    }
    
    .slc-people-row{display: contents;}
    
}

@media (max-width: 400px) {
    .slc-movies-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .slc-movies-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

/* ── Scrollbar personalizado ─────────────────────────────────────── */
.slc-modal::-webkit-scrollbar,
.slc-person-wrap::-webkit-scrollbar,
#slc-country-list::-webkit-scrollbar,
.slc-genres-list::-webkit-scrollbar { width: 5px; height: 5px; }
.slc-modal::-webkit-scrollbar-track,
.slc-person-wrap::-webkit-scrollbar-track,
#slc-country-list::-webkit-scrollbar-track,
.slc-genres-list::-webkit-scrollbar-track { background: transparent; }
.slc-modal::-webkit-scrollbar-thumb,
.slc-person-wrap::-webkit-scrollbar-thumb,
#slc-country-list::-webkit-scrollbar-thumb,
.slc-genres-list::-webkit-scrollbar-thumb { background: var(--slc-border); border-radius: 4px; }

/* ── Transiciones de fade para tarjetas ─────────────────────────── */
/*.slc-card {
    animation: slc-cardIn .3s ease both;
}*/
@keyframes slc-cardIn {
    from { opacity: 0; transform: scale(.95); }
    to   { opacity: 1; transform: scale(1); }
}
/*.slc-card--seen { animation: none; }*/



/* Contenedor principal */
/* Contenedor */
.slc-filter-group {
    position: relative;
    display: inline-block;
    user-select: none;
}

/* Ocultamos el checkbox físicamente */
.slc-trigger-input {
    display: none;
}

/* Estilo del botón disparador */
.slc-filter-label-a {
    background: #000;
    padding: 8px 15px;
    border-radius: 20px;
    /* display: flex; */
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    border: 1px solid #ccc;
    cursor: pointer;
    min-width: 150px;
}

/* La lista de botones */
.slc-sort-btns {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 105%;
    left: 0;
    background-color: var(--slc-surface);
    padding: 4px;
    min-width: 200px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 100;
    border-radius: 6px;
      box-shadow: 0 0 20px rgb(0 0 0 / 55%), 0 0 4px rgb(0 0 0 / 40%), inset 0 0 4px rgb(255 255 255 / 18%), inset 0 0 12px rgb(0 0 0 / 30%);
}

/* LÓGICA CLAVE: Si el checkbox está marcado, mostrar la lista */
.slc-trigger-input:checked ~ .slc-sort-btns {
    display: block;
}



div#slc-genres-list.slc-sort-btns.lis {padding: 4px;
    min-width: 692px;
    margin-left: -657px;
    margin-top: 10px;}

/*
@media (max-width: 900px) {
div#slc-genres-list.slc-sort-btns.lis {    
     min-width: 299px;
    margin-left: 0;
    min-height: 125px;
    
    }
}*/

@media (min-width: 901px) {
    .busqueda-celular{display: none;}
    
    .menu-inferior{display: none;}
    
    
}


@media (max-width: 900px) {
    .slc-topbar { display: none !important; }
    
    .slc-topbar.filtros-activos { display: block !important; }
    
    .slc-country-dropdown,
    .slc-sort-btns,
    .slc-status-btns,
    #slc-genres-list,
    .slc-year-inputs{
        display: none !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: #1a1a2e;
        padding: 20px;
        flex-wrap: wrap ;
        gap: 10px !important;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: 0 0 20px 20px;
        width: 120%;
    }
    
  .slc-country-dropdown  {    flex-wrap: inherit;}
    
    
    .slc-country-dropdown.visible,
    .slc-sort-btns.visible,
    .slc-status-btns.visible,
    #slc-genres-list.visible,
    .slc-year-inputs{
        display: flex !important;
    }

    #slc-country-list {
    /*margin-left: -229px !important;*/
    margin-top: 42px;
}
    
    div#slc-genres-list.slc-sort-btns.lis {
    min-width: 299px;
    margin-left: -36px;
    margin-top: 0;
    margin-right: -10px;
}
    .slc-country-dropdown.visible {
    margin-left: -41px;
}
    .slc-year-inputs{
    height: 40vh;
        z-index: 0;
        margin-right: -15px;
    margin-left: -37px;
}
    
 .slc-status-btns   
  {margin-right: -15px;
    margin-left: -37px;
       max-height: 70vh;
  }
    
  .slc-sort-btns.visible   
  {margin-right: -15px;
    margin-left: -37px;}   
    
    .busqueda-celular{left: 0;
    display: flex;
    align-items: center;
    position: sticky;
    top: 13%;
    right: 0;
    transform: translate(0%, -50%);
    margin-right: -10px;
    margin-left: -11px;
    z-index: 3;}
    
    
    
    /*BOTONES MENU INFERIOR CELULAR*/

    .ltv-cb{
        width:42px;height:42px;border:none;border-radius:20px;
        background:#007bff;color:#fff;font-size:20px;
        cursor:pointer;padding:6px;
        display:flex;align-items:center;justify-content:center;
    }
   /* .ltv-cb:hover{background:rgba(255,255,255,.15)}*/
/*FIN BOTONES MENU INFERIOR CELULAR*/

.menu-inferior{gap: clamp(2.3rem, 2vw, 1rem); position: fixed; left: 0; bottom: 0; width: 100%;  text-align: center; z-index: 1000;display: flex;  justify-content: center;align-items: center;box-shadow:   0 -6px 20px rgb(0 0 0 / 55%),   0 -2px 4px rgb(0 0 0 / 40%), inset 0 -1px 0 rgb(255 255 255 / 18%),  inset 0 8px 4px rgb(0 0 0 / 30%);background: var(--mt-header-bg)}


.boton-menu-fijo{
	background: radial-gradient(ellipse 60% 40% at 35% 30%, rgba(255,255,255,0.22) 0%, transparent 60%),linear-gradient(145deg, #1e3a8a 0%, #0f1f60 40%, #080f38 100%) !important;
    box-shadow: 0 6px 20px rgb(0 0 0 / 55%), 0 2px 4px rgb(0 0 0 / 40%), inset 0 1px 0 rgb(255 255 255 / 18%), inset 0 -2px 4px rgb(0 0 0 / 30%);
    backdrop-filter: blur(8px);
}

/*
.boton-menu-fijo:hover{transform:translateY(-3px) scale(1.08);background:radial-gradient(ellipse 60% 40% at 35% 30%, rgba(255,255,255,0.3) 0%, transparent 60%),linear-gradient(145deg, #2d52cc 0%, #1a31a0 40%, #0f1f70 100%);box-shadow:0 10px 28px rgba(0,0,0,0.6),0 4px 8px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.25),inset 0 -2px 4px rgba(0,0,0,0.3),0 0 20px rgba(100,140,255,0.25);}
*/

/*
.boton-menu-fijo:active{transform:translateY(1px) scale(0.96);}*/
    
    
    
}

/* Estilo de los botones internos */
.slc-sort-btn {
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    background: none;
    border: none;
   /* border-bottom: 1px solid #eee;*/
    cursor: pointer;
    display: block;
        color: #fff;
}

.slc-sort-btn:hover {
    background-color: #2e2e2e;
}

.slc-sort-btn.slc-active {
    background-color: #2e2e2e;
    color: #fff;
    font-weight: bold;
}

/* Opcional: Rotar la flecha al abrir */
.slc-trigger-input:checked + .slc-filter-label .arrow {
    transform: rotate(180deg);
}

.arrow {
    transition: transform 0.2s;
    font-size: 0.8em;
    margin-left: 10px;
}


/* ══════════════════════════════════════════════════════════
   LOGIN TOAST — aparece en esquina inferior derecha
══════════════════════════════════════════════════════════ */
.slc-login-toast {
    position:         fixed;
    bottom:           24px;
    right:            24px;
    z-index:          99999;
    background:       #1a1a1a;
    border:           1px solid #e50914;
    border-left:      3px solid #e50914;
    color:            #eee;
    font-size:        14px;
    padding:          12px 18px;
    border-radius:    8px;
    box-shadow:       0 6px 24px rgba(0,0,0,.6);
    display:          flex;
    align-items:      center;
    gap:              10px;
    max-width:        320px;
    opacity:          0;
    transform:        translateY(12px);
    transition:       opacity .25s ease, transform .25s ease;
    pointer-events:   auto;
}
.slc-login-toast.slc-toast-visible {
    opacity: 1;
    transform: translateY(0);
}
.slc-toast-link {
    color:            #e50914;
    text-decoration:  none;
    font-weight:      600;
    white-space:      nowrap;
}
.slc-toast-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════
   BOTÓN REPORTAR ERROR (en popup de película)
══════════════════════════════════════════════════════════ */
.slc-btn-report {
margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 9px 14px;
    background: red;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: opacity .2s, transform .15s;
    border-radius: 20pc;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 6px 20px rgb(0 0 0 / 55%), 0 2px 4px rgb(0 0 0 / 40%), inset 0 1px 0 rgb(255 255 255 / 18%), inset 0 -2px 4px rgb(0 0 0 / 30%);
   /* margin-bottom: 20px;*/
}
.slc-btn-report:hover { border-color: #e50914; transform: scale(1.02);}

/* ══════════════════════════════════════════════════════════
   MODAL REPORTAR ERROR
══════════════════════════════════════════════════════════ */
.slc-report-overlay {
    position:         fixed;
    inset:            0;
    background:       rgba(0,0,0,.75);
    z-index:          10001;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          20px;
    backdrop-filter:  blur(4px);
    
}
.slc-report-wrap {
    background:       #1a1a1a;
    border:           1px solid #2e2e2e;
    border-radius:    12px;
    padding:          28px;
    width:            100%;
    max-width:        500px;
    position:         relative;
    box-shadow:       0 16px 48px rgba(0,0,0,.8);
}
.slc-report-close {
    position:         absolute;
    top:              14px;
    right:            14px;
    background:       rgba(255,255,255,.07);
    border:           none;
    border-radius:    50%;
    width:            32px;
    height:           32px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    cursor:           pointer;
    color:            #aaa;
    transition:       background .2s;
}
.slc-report-close:hover { background: rgba(229,9,20,.25); color: #fff; }
.slc-report-header {
    display:          flex;
    align-items:      center;
    gap:              10px;
    margin-bottom:    10px;
}
.slc-report-header h3 {
    margin:           0;
    font-size:        17px;
    color:            #eee;
}
.slc-report-movie-info {
    font-size:        13px;
    color:            #aaa;
    margin:           0 0 14px;
    font-style:       italic;
}
.slc-report-textarea {
    width:            100%;
    background:       #111;
    border:           1px solid #333;
    border-radius:    8px;
    color:            #eee;
    font-size:        14px;
    padding:          12px;
    resize:           vertical;
    min-height:       110px;
    font-family:      inherit;
    outline:          none;
    box-sizing:       border-box;
    transition:       border-color .2s;
}
.slc-report-textarea:focus { border-color: #555; }
.slc-report-actions {
    display:          flex;
    align-items:      center;
    gap:              12px;
    margin-top:       14px;
    flex-wrap:        wrap;
}
.slc-btn-report-submit {
    padding:          10px 22px;
    background:       #e50914;
    border:           none;
    border-radius:    6px;
    color:            #fff;
    font-size:        14px;
    font-weight:      600;
    cursor:           pointer;
    transition:       opacity .2s;
}
.slc-btn-report-submit:hover    { opacity: .88; }
.slc-btn-report-submit:disabled { opacity: .5; cursor: default; }
.slc-report-result      { font-size: 13px; flex: 1; }
.slc-report-ok          { color: #46b450; }
.slc-report-error       { color: #e50914; }

@media (max-width: 560px) {
    .slc-report-wrap { padding: 20px 16px; }
    .slc-login-toast { right: 12px; bottom: 12px; max-width: calc(100vw - 24px); }
}

/* ═══════════════════════════════════════════════════════════════
   PANEL ADMIN EN MODAL
═══════════════════════════════════════════════════════════════ */
.slc-admin-panel {
    border-top:      1px solid #2a2a2a;
    margin-top:      8px;
    padding-top:     6px;
        justify-content: right;
    display: grid;
}

.slc-admin-panel-toggle {
    display:         flex;
    align-items:     center;
    gap:             6px;
    background:      red;
    border:          1px solid #444;
    border-radius:   20px;
    color:           #fff;
    font-size:       11px;
    font-weight:     600;
    text-transform:  uppercase;
    letter-spacing:  .06em;
    padding:         5px 10px;
    cursor:          pointer;
    transition:      border-color .2s, color .2s;
}
.slc-admin-panel-toggle:hover { border-color: #888; color: #ddd; }
.slc-admin-chevron { transition: transform .2s; }

.slc-admin-panel-body {
    margin-top:      10px;
    background:      #111;
    border:          1px solid #2e2e2e;
    border-radius:   8px;
    padding:         14px 16px;
}

.slc-admin-section {
    margin-bottom:   18px;
    padding-bottom:  16px;
    border-bottom:   1px solid #222;
}
.slc-admin-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.slc-admin-section-title {
    margin:          0 0 4px;
    font-size:       12px;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  .06em;
    color:           #bbb;
}
.slc-admin-section-desc {
    margin:          0 0 10px;
    font-size:       16px;
    color:           #fff;
    line-height:     1.5;
}

.slc-admin-change-tmdb-section {
    background:      #1a1400;
    border:          1px solid #5a4500;
    border-radius:   6px;
    padding:         12px 14px;
    margin-bottom:   0;
    padding-bottom:  12px;
}
.slc-admin-change-tmdb-section .slc-admin-section-title { color: #e0a800; }

/* Re-vincular list */
.slc-admin-relink-row {
    display:         flex;
    align-items:     flex-start;
    gap:             10px;
    padding:         10px 0;
    border-bottom:   1px solid #1e1e1e;
}
.slc-admin-relink-row:last-child { border-bottom: none; padding-bottom: 0; }

.slc-admin-relink-plat {
    width:           52px;
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    padding-top:     3px;
}
.slc-admin-plat-logo  { height: 20px; width: auto; object-fit: contain; border-radius: 3px; }
.slc-admin-plat-name  { font-size: 11px; color: #888; }

.slc-admin-relink-fields {
    flex:            1;
    display:         flex;
    align-items:     center;
    gap:             8px;
    flex-wrap:       wrap;
}
.slc-admin-relink-current {
    font-size:       12px;
    color:           #fff;
    flex-shrink:     0;
}
.slc-admin-relink-current strong { color: #bbb; }
.slc-admin-tmdb-link { color: #5b9bd5; text-decoration: none; font-size: 11px; }
.slc-admin-tmdb-link:hover { text-decoration: underline; }

.slc-admin-no-links { font-size: 12px; color: #666; margin: 0; }

/* Inputs y botones admin */
.slc-admin-input {
    background:      #1e1e1e;
    border:          1px solid #3a3a3a;
    border-radius:   5px;
    color:           #ddd;
    font-size:       12px;
    padding:         5px 8px;
    width:           130px;
}
.slc-admin-input:focus { outline: none; border-color: #555; }

.slc-admin-btn {
    background:      #2a2a2a;
    border:          1px solid #444;
    border-radius:   5px;
    color:           #ccc;
    font-size:       12px;
    font-weight:     600;
    padding:         5px 10px;
    cursor:          pointer;
    transition:      background .2s, border-color .2s;
    white-space:     nowrap;
}
.slc-admin-btn:hover:not(:disabled) { background: #333; border-color: #666; color: #fff; }
.slc-admin-btn:disabled             { opacity: .5; cursor: default; }

.slc-admin-btn-relink {
    background:      #0d2a4a;
    border-color:    #1e5080;
    color:           #7ecbff;
}
.slc-admin-btn-relink:hover:not(:disabled) { background: #1a3d60; border-color: #3a80b0; }

.slc-admin-btn-danger {
    background:      #2a0d0d;
    border-color:    #6b2020;
    color:           #ff9090;
}
.slc-admin-btn-danger:hover:not(:disabled) { background: #3d1515; border-color: #a03030; }

.slc-admin-result  { font-size: 12px; }
.slc-admin-ok      { color: #46b450; font-weight: 600; }
.slc-admin-error   { color: #e05050; font-weight: 600; }

/* ═══ PUBLICIDAD & SUSCRIPCIONES ════════════════════════════════ */

/* Bloque de publicidad debajo del catálogo */
#slc-publicidad {
    text-align: center;
    margin: 20px 0;
    min-height: 50px;
}

/* Overlay de pre-roll */
#slc-preroll {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.slc-preroll-media {
    position: relative;
    width: 100%;
    max-width: 860px;
}

#slc-preroll-video,
#slc-preroll-image {
    width: 100%;
    border-radius: 8px;
    max-height: 480px;
    object-fit: contain;
}

.slc-preroll-ui {
    width: 100%;
    max-width: 860px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding: 0 4px;
    gap: 10px;
    flex-wrap: wrap;
}

#slc-preroll-badge {
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

#slc-preroll-count {
    color: rgba(255,255,255,.6);
    font-size: 13px;
    flex: 1;
    text-align: center;
}

#slc-preroll-cta {
    background: #f5c842;
    color: #000;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
}

#slc-preroll-skip {
    background: rgba(255,255,255,.2);
    border: none;
    color: #fff;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: background .15s;
}
#slc-preroll-skip:hover { background: rgba(255,255,255,.35); }

/* ── Aviso para suscribirse (banner flotante opcional) ─────────── */
.slc-sub-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, rgba(245,200,66,.12), rgba(255,159,28,.08));
    border: 1px solid rgba(245,200,66,.25);
    border-radius: 10px;
    padding: 10px 16px;
    margin: 12px 0;
    font-size: 13px;
    color: rgba(255,255,255,.7);
}
.slc-sub-banner a {
    color: #f5c842;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.slc-sub-banner a:hover { text-decoration: underline; }