/*
 * DooPlay — layout moderno
 * Capa por encima de front.style.min.css y colors.*.min.css. Todo va bajo body.doo-modern,
 * que solo se pone con el layout moderno activo (inc/doo_modern.php).
 */

/* ------------------------------------------------------------------ *
 * Tokens
 * ------------------------------------------------------------------ */
:root{
    --doo-accent:#E50914;
    --doo-bg:#0a0a0d;
    --doo-surface:#141418;
    --doo-surface-2:#1c1c22;
    --doo-line:rgba(255,255,255,.08);
    --doo-text:#f5f5f7;
    --doo-muted:#a3a3ad;
    --doo-radius:12px;
    --doo-gutter:clamp(16px, 4vw, 56px);
    --doo-max:1600px;
    --doo-header:72px;
    --doo-font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ------------------------------------------------------------------ *
 * Base
 * ------------------------------------------------------------------ */
body.doo-modern{
    background:var(--doo-bg) !important;
    color:var(--doo-text);
    font-family:var(--doo-font) !important;
    font-size:15px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
body.doo-modern h1,body.doo-modern h2,body.doo-modern h3,body.doo-modern h4,
body.doo-modern input,body.doo-modern button,body.doo-modern textarea,body.doo-modern select{
    font-family:var(--doo-font) !important;
}
body.doo-modern a{color:inherit}
body.doo-modern a:hover{color:#fff}
body.doo-modern ::selection{background:var(--doo-accent);color:#fff}

/* El fondo dinamico fijo del theme se sustituye por la cabecera de la ficha. */
body.doo-modern #dt_contenedor{background:var(--doo-bg) !important;background-image:none !important}
body.doo-modern #contenedor{max-width:none !important;width:100%;margin:0 !important;padding-top:var(--doo-header)}
body.doo-modern .module,
body.doo-modern #single{background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border:0 !important}

/* ------------------------------------------------------------------ *
 * Cabecera
 * ------------------------------------------------------------------ */
body.doo-modern header.main{
    height:var(--doo-header);
    background:linear-gradient(180deg, rgba(10,10,13,.85) 0%, rgba(10,10,13,0) 100%) !important;
    box-shadow:none !important;
    border:0 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transition:background .3s ease, box-shadow .3s ease;
}
body.doo-modern.doo-scrolled header.main,
body.doo-modern:not(.home):not(.single) header.main{
    background:rgba(10,10,13,.92) !important;
    backdrop-filter:saturate(160%) blur(14px) !important;
    -webkit-backdrop-filter:saturate(160%) blur(14px) !important;
    box-shadow:0 1px 0 var(--doo-line) !important;
}
body.doo-modern header.main .hbox{
    max-width:var(--doo-max);
    height:var(--doo-header);
    padding:0 var(--doo-gutter);
}
body.doo-modern header.main .hbox .fix-hidden{
    display:flex;
    align-items:center;
    gap:32px;
    height:100%;
    /* El theme base la recorta (overflow:hidden) y los submenus se quedaban cortados a la altura
       de la barra. */
    overflow:visible;
}
body.doo-modern header.main .hbox .logo{
    float:none;
    padding:0;
    background:none !important;
    display:flex;
    align-items:center;
    height:auto;
    flex:none;
}
body.doo-modern header.main .hbox .logo img{height:30px}
body.doo-modern header.main .hbox .head-main-nav{float:none;flex:1;min-width:0}
body.doo-modern header.main .hbox .head-main-nav ul.main-header{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;float:none;height:var(--doo-header)}
body.doo-modern header.main .hbox .head-main-nav ul.main-header>li{float:none;flex:none;position:relative}
body.doo-modern header.main .hbox .head-main-nav ul.main-header>li>a{
    float:none;display:block;white-space:nowrap;
    padding:8px 12px !important;
    border-radius:999px;
    font-size:14px;
    font-weight:500;
    color:#fff !important;
    background:rgba(255,255,255,.08);
    line-height:20px;
    transition:color .2s, background .2s;
}
body.doo-modern header.main .hbox .head-main-nav ul.main-header li.menu-item-has-children>a:after{float:none;margin:0 0 0 6px;font-size:11px}
body.doo-modern header.main .hbox .head-main-nav ul.main-header li ul.sub-menu{
    top:calc(100% - 10px);left:0;min-width:360px;padding:8px !important;
    border-radius:var(--doo-radius);background:var(--doo-surface) !important;
    box-shadow:0 0 0 1px var(--doo-line), 0 20px 40px -12px rgba(0,0,0,.8) !important;opacity:1;
}
body.doo-modern header.main .hbox .head-main-nav ul.main-header li ul.sub-menu li a{white-space:nowrap;border-radius:8px;padding:10px 12px !important;color:var(--doo-muted) !important;background:none !important}
body.doo-modern header.main .hbox .head-main-nav ul.main-header li ul.sub-menu li a:hover{background:rgba(255,255,255,.06) !important;color:#fff !important}
/* Todos los botones iguales; en rojo al pasar el raton, tambien mientras su submenu esta abierto. */
body.doo-modern header.main .hbox .head-main-nav ul.main-header>li>a:hover,
body.doo-modern header.main .hbox .head-main-nav ul.main-header>li:hover>a{
    color:#fff !important;
    background:var(--doo-accent);
}
body.doo-modern header.main .hbox .headitems{
    float:none;
    display:flex;
    align-items:center;
    gap:12px;
    width:auto !important;
    margin-left:auto;
    padding:0 !important;
}
/* Busca: un icono que se abre hacia la izquierda, por encima del menu, al pulsarlo. */
body.doo-modern header.main .hbox .search{float:none;padding:0;width:42px;height:42px;position:relative;flex:none}
body.doo-modern header.main .hbox .search form{
    position:absolute;right:0;top:0;z-index:5;
    width:42px;height:42px;
    background:rgba(255,255,255,.08) !important;
    border:1px solid var(--doo-line);
    border-radius:999px;
    transition:width .3s ease, background .2s, border-color .2s;
}
body.doo-modern header.main .hbox .search form:focus-within,
body.doo-modern header.main .hbox .search form:has(input:not(:placeholder-shown)){
    width:min(340px, 60vw);
    background:rgba(20,20,24,.96) !important;
    border-color:rgba(255,255,255,.22);
}
body.doo-modern header.main .hbox .search form input[type=text]{
    height:40px;padding:0 44px 0 18px;font-size:14px;font-weight:400;
    cursor:pointer;color:transparent !important;
}
body.doo-modern header.main .hbox .search form input[type=text]::placeholder{color:transparent}
body.doo-modern header.main .hbox .search form:focus-within input[type=text]{cursor:text;color:#fff !important}
body.doo-modern header.main .hbox .search form:focus-within input[type=text]::placeholder{color:var(--doo-muted)}
body.doo-modern header.main .hbox .search form button[type=submit]{padding:0;width:40px;height:40px;pointer-events:none}
body.doo-modern header.main .hbox .search form:focus-within button[type=submit]{pointer-events:auto}
body.doo-modern header.main .hbox .dtuser{float:none;padding:0;margin:0;display:flex;align-items:center}
body.doo-modern header.main .hbox .dtuser .gravatar{display:flex;align-items:center;gap:10px;padding:0}
body.doo-modern header.main .hbox .dtuser .gravatar img{border-radius:50%;width:34px;height:34px}
body.doo-modern .headitems a#dooplay_signout{float:none;padding:8px 0;font-size:14px;color:var(--doo-muted) !important}
body.doo-modern .headitems a#dooplay_signout:hover{color:#fff !important}
body.doo-modern header.main .live-search{border-radius:var(--doo-radius);overflow:hidden}

/* Cabecera del movil.
   Fija, como la de escritorio. El theme la deja flotando (float:left) dentro del flujo, y con
   la portada subiendo por debajo de la barra eso hacia que el navegador no pintara el destacado. */
body.doo-modern .fixheadresp{position:fixed;top:var(--wp-admin--admin-bar--height, 0px);left:0;right:0;z-index:105}
body.doo-modern .fixheadresp header.responsive{float:none;height:var(--doo-header)}
body.doo-modern .fixheadresp header.responsive .logo{padding:calc((var(--doo-header) - 30px) / 2) 0}
body.doo-modern .fixheadresp header.responsive .logo img{height:30px}
body.doo-modern .fixheadresp header.responsive{
    background:rgba(10,10,13,.94) !important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 1px 0 var(--doo-line) !important;
    border:0 !important;
}
body.doo-modern .fixheadresp .menuresp,
body.doo-modern .fixheadresp .search_responsive{background:var(--doo-surface) !important}

/* Glosario de letras: una fila de pastillas */
body.doo-modern .letter_home{background:transparent !important;padding:24px var(--doo-gutter) 0;max-width:var(--doo-max);margin:0 auto;float:none}
body.doo-modern .letter_home .fixresp ul.glossary{
    display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
    background:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;padding:0;
}
body.doo-modern .letter_home .fixresp ul.glossary::-webkit-scrollbar{display:none}
body.doo-modern .letter_home .fixresp ul.glossary li{float:none;width:auto;flex:none}
body.doo-modern .letter_home .fixresp ul.glossary li a{
    display:block;min-width:34px;padding:7px 10px;text-align:center;border-radius:8px;
    background:var(--doo-surface);color:var(--doo-muted);font-size:13px;font-weight:600;
}
body.doo-modern .letter_home .fixresp ul.glossary li a:hover,
body.doo-modern .letter_home .fixresp ul.glossary li a.active{background:var(--doo-accent);color:#fff}
body.doo-modern .letter_home>.items_glossary{border-radius:var(--doo-radius)}

/* ------------------------------------------------------------------ *
 * Botones
 * ------------------------------------------------------------------ */
.doo-modern .mbtn{
    display:inline-flex;align-items:center;gap:10px;
    height:48px;padding:0 26px;border-radius:999px;
    font-size:15px;font-weight:700;letter-spacing:.01em;
    transition:transform .15s ease, background .2s, box-shadow .2s;
    white-space:nowrap;
}
.doo-modern .mbtn:active{transform:scale(.97)}
.doo-modern .mbtn-primary{background:var(--doo-accent);color:#fff !important;box-shadow:0 10px 30px -10px var(--doo-accent)}
.doo-modern .mbtn-primary:hover{filter:brightness(1.1)}
.doo-modern .mbtn-ghost{background:rgba(255,255,255,.14);color:#fff !important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.doo-modern .mbtn-ghost:hover{background:rgba(255,255,255,.22)}

/* ------------------------------------------------------------------ *
 * Portada: destacado
 * ------------------------------------------------------------------ */
.doo-modern .mhome{display:block;width:100%;margin-top:calc(var(--doo-header) * -1)}
.doo-modern .mhero{
    position:relative;
    height:clamp(520px, 82vh, 860px);
    overflow:hidden;
    background:var(--doo-bg);
}
.doo-modern .mhero-slide{
    position:absolute;inset:0;
    background:var(--bg) center 20% / cover no-repeat;
    opacity:0;visibility:hidden;
    transition:opacity .9s ease, visibility .9s;
}
.doo-modern .mhero-slide.is-active{opacity:1;visibility:visible}
.doo-modern .mhero-slide::before{
    content:"";position:absolute;inset:0;
    background:
        linear-gradient(90deg, rgba(10,10,13,.92) 0%, rgba(10,10,13,.7) 32%, rgba(10,10,13,.15) 62%, rgba(10,10,13,0) 100%),
        linear-gradient(0deg, var(--doo-bg) 0%, rgba(10,10,13,0) 38%);
}
/* La entrada animada solo al cambiar de slide (el script pone .is-animated). El primero sale
   ya visible: el texto nunca depende de que corra una animacion o el JavaScript. */
.doo-modern .mhero.is-animated .mhero-slide.is-active .mhero-body>*{animation:doo-rise .8s both}
.doo-modern .mhero.is-animated .mhero-slide.is-active .mhero-body>*:nth-child(2){animation-delay:.06s}
.doo-modern .mhero.is-animated .mhero-slide.is-active .mhero-body>*:nth-child(3){animation-delay:.12s}
.doo-modern .mhero.is-animated .mhero-slide.is-active .mhero-body>*:nth-child(4){animation-delay:.18s}
.doo-modern .mhero.is-animated .mhero-slide.is-active .mhero-body>*:nth-child(5){animation-delay:.24s}
@keyframes doo-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.doo-modern .mhero-body{
    position:absolute;
    left:0;right:0;bottom:clamp(120px, 20vh, 200px);
    max-width:var(--doo-max);margin:0 auto;padding:0 var(--doo-gutter);
}
.doo-modern .mhero-body>*{max-width:620px}
.doo-modern .mhero-kicker{
    display:inline-flex;align-items:center;
    font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:#fff;margin-bottom:14px;
}
.doo-modern .mhero-kicker::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--doo-accent);margin-right:10px}
.doo-modern .mhero-title{
    font-size:clamp(2.2rem, 5.2vw, 4.4rem);
    font-weight:800;line-height:1.02;letter-spacing:-.02em;
    margin:0 0 16px;color:#fff;
    text-shadow:0 2px 30px rgba(0,0,0,.4);
}
.doo-modern .mhero-title a{color:#fff !important}
.doo-modern .mhero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}
.doo-modern .mhero-meta span{
    font-size:13px;font-weight:600;color:#e7e7ea;
    padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.12);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.doo-modern .mhero-meta .mrate{background:rgba(245,197,24,.16);color:#f5c518}
.doo-modern .mhero-meta .mrate i{font-size:11px}
.doo-modern .mhero-text{
    font-size:16px;line-height:1.6;color:#d4d4d8;margin:0 0 26px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.doo-modern .mhero-actions{display:flex;flex-wrap:wrap;gap:12px}
.doo-modern .mhero-dots{
    position:absolute;z-index:3;
    right:var(--doo-gutter);bottom:clamp(130px, 21vh, 210px);
    display:flex;gap:8px;
}
.doo-modern .mhero-dots button{
    width:10px;height:10px;padding:0;border:0;border-radius:999px;cursor:pointer;
    background:rgba(255,255,255,.35);transition:width .3s, background .3s;
}
.doo-modern .mhero-dots button.is-active{width:28px;background:#fff}

/* ------------------------------------------------------------------ *
 * Portada: filas
 * ------------------------------------------------------------------ */
.doo-modern .mrows{position:relative;z-index:2;padding:0 0 40px}
.doo-modern .mrows.has-hero{margin-top:clamp(-110px, -12vh, -60px)}
.doo-modern .mrows:not(.has-hero){padding-top:32px}
.doo-modern .mrow{max-width:var(--doo-max);margin:0 auto 38px;padding:0 var(--doo-gutter)}
.doo-modern .mrow-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.doo-modern .mrow-head h2{font-size:clamp(1.15rem, 1.6vw, 1.45rem);font-weight:700;letter-spacing:-.01em;color:#fff;margin:0}
.doo-modern .mrow-all{font-size:13px;font-weight:600;color:var(--doo-muted) !important;display:inline-flex;align-items:center;gap:6px}
.doo-modern .mrow-all i{font-size:10px;transition:transform .2s}
.doo-modern .mrow-all:hover{color:#fff !important}
.doo-modern .mrow-all:hover i{transform:translateX(3px)}

.doo-modern .mrow-wrap{position:relative}
.doo-modern .mrow-track{
    display:grid;grid-auto-flow:column;
    grid-auto-columns:clamp(132px, 13.5vw, 210px);
    gap:clamp(10px, 1.1vw, 16px);
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scroll-padding-left:0;scrollbar-width:none;
    padding:8px 2px 14px;margin:-8px -2px -14px;
}
.doo-modern .mrow-track::-webkit-scrollbar{display:none}
.doo-modern .mrow-ep .mrow-track{grid-auto-columns:clamp(240px, 24vw, 340px)}
.doo-modern .mrow-ranked .mrow-track{grid-auto-columns:clamp(190px, 19vw, 280px)}

.doo-modern .mrow-nav{
    position:absolute;top:0;bottom:44px;z-index:4;
    width:46px;border:0;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:18px;
    opacity:0;transition:opacity .2s;
}
.doo-modern .mrow-nav.prev{left:calc(var(--doo-gutter) * -1);background:linear-gradient(90deg, var(--doo-bg) 20%, rgba(10,10,13,0))}
.doo-modern .mrow-nav.next{right:calc(var(--doo-gutter) * -1);background:linear-gradient(270deg, var(--doo-bg) 20%, rgba(10,10,13,0))}
.doo-modern .mrow-wrap:hover .mrow-nav{opacity:1}
.doo-modern .mrow-wrap.at-start .mrow-nav.prev,
.doo-modern .mrow-wrap.at-end .mrow-nav.next,
.doo-modern .mrow-wrap.no-scroll .mrow-nav{opacity:0 !important;pointer-events:none}

/* ------------------------------------------------------------------ *
 * Tarjetas
 * ------------------------------------------------------------------ */
.doo-modern .mcard{scroll-snap-align:start;min-width:0}
.doo-modern .mcard-link{display:block;color:inherit}
.doo-modern .mcard-img{
    position:relative;aspect-ratio:2/3;border-radius:var(--doo-radius);overflow:hidden;
    background:var(--doo-surface-2);
}
.doo-modern .mcard-ep .mcard-img{aspect-ratio:16/9}
.doo-modern .mcard-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease, filter .3s}
/* Por dentro de la imagen: por fuera, la fila cortaba el borde de la primera tarjeta. */
.doo-modern .mcard-img::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    border-radius:inherit;box-shadow:inset 0 0 0 2px var(--doo-accent);
}
.doo-modern .mcard-link:hover .mcard-img img{transform:scale(1.06)}
.doo-modern .mcard-rate,
.doo-modern .mcard-type,
.doo-modern .mcard-badge{
    position:absolute;z-index:2;
    font-size:11px;font-weight:700;line-height:1;
    padding:6px 8px;border-radius:7px;
    background:rgba(10,10,13,.72);color:#fff;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.doo-modern .mcard-rate{top:8px;left:8px;color:#f5c518}
.doo-modern .mcard-rate i{font-size:9px;margin-right:2px}
.doo-modern .mcard-type{top:8px;right:8px;text-transform:uppercase;letter-spacing:.06em;font-size:10px}
.doo-modern .mcard-badge{left:8px;bottom:8px;background:var(--doo-accent)}
/* Aviso de la portada (Customize > «Home notice»), debajo de la barra superior. Las clases son
   las del HTML de ejemplo; otro HTML se ve con el estilo del texto de la portada. Cada propiedad
   que importa va explicita: el CSS adicional de un sitio puede traer reglas para .info-box del
   layout clasico (caja azul clara, texto azul oscuro) que en el fondo oscuro no se leen. */
.doo-modern .mnotice{
    position:relative;z-index:3;max-width:var(--doo-max);margin:0 auto;
    padding:calc(var(--doo-header) + 16px) var(--doo-gutter) 16px;color:#d4d4d8;font-size:14px;line-height:1.55;
}
.doo-modern .mnotice a{color:#fff;font-weight:700;text-decoration:underline}
.doo-modern .mnotice .doo-home-notices{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.doo-modern .mnotice .info-box{
    flex:1 1 420px;max-width:none;margin:0;padding:14px 18px;border:0;border-radius:var(--doo-radius);
    background:var(--doo-surface);box-shadow:0 0 0 1px var(--doo-line);
    color:#d4d4d8;text-align:left;font-size:14px;
}
.doo-modern .mnotice .info-box b{color:#fff}
.doo-modern .mnotice .info-box a{color:#fff;font-weight:700;text-decoration:underline}
.doo-modern .mnotice .info-code{
    display:inline-block;margin:0 8px 0 0;padding:4px 8px;border-radius:6px;vertical-align:1px;
    background:var(--doo-accent);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;line-height:1;
}
.doo-modern .mnotice .discord-wrap{display:flex}
.doo-modern .mnotice .dc-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;
    border-radius:var(--doo-radius);background:#5865F2;color:#fff;text-decoration:none;font-weight:700;
    transition:background .2s;
}
.doo-modern .mnotice .dc-btn:hover{background:#4752C4}
.doo-modern .mnotice .dc-btn::before{content:"\f392";font-family:"Font Awesome 5 Brands";font-weight:400;font-size:20px}
@media (max-width:768px){
    .doo-modern .mnotice .discord-wrap,
    .doo-modern .mnotice .dc-btn{width:100%}
}
/* Busqueda: la etiqueta del tipo como en las tarjetas, la nota con estrella y las banderas */
body.doo-modern .result-item article .image{border-radius:10px}
body.doo-modern .result-item article .image .thumbnail img{height:110px;object-fit:cover}
body.doo-modern .result-item article .image .thumbnail span{
    top:6px;right:6px;padding:4px 7px;border-radius:6px;font-size:9px;font-weight:700;letter-spacing:.05em;line-height:1;
    background:rgba(10,10,13,.78) !important;color:#fff;
}
body.doo-modern .result-item article .details .title a{color:#fff;font-weight:600}
body.doo-modern .result-item article .details .meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
body.doo-modern .result-item article .details .meta span.rating{
    float:none;width:auto;margin:0;padding:4px 8px;border-radius:6px;font-family:inherit;font-size:12px;
    background:rgba(245,197,24,.14);color:#f5c518;
}
body.doo-modern .result-item article .details .meta span.rating i{font-size:10px;margin-right:2px}
body.doo-modern .result-item article .details .meta span.year{float:none;margin:0;color:var(--doo-muted)}
body.doo-modern .result-item article .details .meta img.flag{width:20px;height:auto;border-radius:3px;margin:0}
/* El h1 de la portada: para buscadores y lectores de pantalla, no se ve. */
.doo-modern .mhome-h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* El color lo pone .featu, desde la opcion del theme. */
.doo-modern .mfeat{
    z-index:2;font-size:9px;font-weight:700;line-height:1;letter-spacing:.04em;
    padding:6px 7px;border-radius:7px;
}
/* Las marcas de abajo, apiladas: destacado (solo en movil), nuevo y visualizaciones. */
.doo-modern .mcard-tags{
    position:absolute;inset:8px;z-index:2;pointer-events:none;
    display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:4px;
}
.doo-modern .mcard-tags .mfeat{position:absolute;top:0;left:50%;right:auto;transform:translateX(-50%)}
/* En las tarjetas numeradas, mas estrechas, mas pequeña para caber entre la nota y el tipo. */
.doo-modern .mcard.is-ranked .mcard-tags .mfeat{font-size:8px;padding:5px;letter-spacing:0}
/* A la derecha: a la izquierda las tapa el numero del ranking. */
.doo-modern .mcard.is-ranked .mcard-tags{align-items:flex-end}
/* Arriba solo si cabe entre la nota y el tipo; si no, baja con las demas. Lo decide el ancho de
   la tarjeta y no el de la pantalla: el de la tarjeta depende de la fila. */
.doo-modern .mcard-img{container-type:inline-size}
@container (max-width:195px){
    .doo-modern .mcard:not(.is-ranked) .mcard-tags .mfeat{position:static;transform:none}
}
@container (max-width:175px){
    .doo-modern .mcard.is-ranked .mcard-tags .mfeat{position:static;transform:none}
}
.doo-modern .mnew,
.doo-modern .mviews{font-size:10px;font-weight:700;line-height:1;padding:5px 7px;border-radius:7px}
.doo-modern .mnew{background:#fff;color:#0a0a0d;text-transform:uppercase;letter-spacing:.04em}
.doo-modern .mnew[hidden]{display:none !important}
.doo-modern .mviews{background:rgba(10,10,13,.72);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.doo-modern .mviews i{margin-right:2px;font-size:9px}
body.doo-modern .module .content .items .item .poster .mnew{position:absolute;z-index:2;left:8px;bottom:8px}
/* Episodios: abajo a la izquierda ya va el numero. */
.doo-modern .mcard-ep .mnew{position:absolute;z-index:2;top:8px;left:8px}
body.doo-modern .module .content .items .item.se .poster .mnew{top:8px;bottom:auto}
body.doo-modern #seasons .se-c .se-a ul.episodios li .imagen .mnew{position:absolute;z-index:1;top:6px;left:6px;font-size:9px;padding:4px 5px;border-radius:5px}
.doo-modern .mhero-meta .mfeat{position:static;padding:7px 12px;border-radius:999px;font-size:11px}
/* En los listados la nota ocupa la esquina izquierda. */
body.doo-modern .module .content .items .item .poster .featu{left:auto;right:8px;top:8px;border-radius:7px}
/* El play de todos los posters: el triangulo vaciado del theme (play4.svg) como mascara, con el
   color de acento. Era un circulo rojo lleno; asi pesa menos sobre la imagen. La sombra lo separa
   de los posters claros. */
.doo-modern .mplay,
body.doo-modern .module .content .items .item .poster .see::before,
body.doo-modern #seasons .se-c .se-a ul.episodios li .imagen::before{
    background:var(--doo-accent);
    -webkit-mask:url(img/play4.svg) center/contain no-repeat;mask:url(img/play4.svg) center/contain no-repeat;
    filter:drop-shadow(0 3px 8px rgba(0,0,0,.65));
}
.doo-modern .mplay{
    position:absolute;z-index:2;left:50%;top:50%;
    width:46px;height:46px;margin:-23px 0 0 -23px;
    display:block;font-size:0;
}
.doo-modern .mplay i{display:none}
/* Siempre a la vista: el theme lo deja transparente hasta pasar el raton, y en el movil, que no
   tiene raton, no salia nunca. Al pasar por encima crece un poco. */
body.doo-modern .module .content .items .item .poster .see,
body.doo-modern .module .content .items .item .poster a:hover>.see{background:none !important;opacity:1 !important;transform:none !important}
body.doo-modern .module .content .items .item .poster .see::before{transition:transform .25s ease}
body.doo-modern .module .content .items .item .poster a:hover>.see::before{transform:scale(1.15)}
body.doo-modern .module .content .items .item .poster .see::before{
    content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
}
.doo-modern .mcard-title{
    margin:10px 2px 2px;font-size:14px;font-weight:600;line-height:1.35;color:#fff;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.doo-modern .mcard-sub{display:block;margin:0 2px;font-size:12.5px;color:var(--doo-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Top: numero grande al lado del poster */
/* La columna del numero tiene ancho fijo: si no, cada poster sale de un tamaño segun lo ancho
   que sea su numero (el 1 es mas estrecho que el 5). */
.doo-modern .mcard.is-ranked .mcard-link{display:grid;grid-template-columns:clamp(46px, 4.6vw, 76px) 1fr;align-items:end}
.doo-modern .mcard-rank{
    grid-row:1;grid-column:1;align-self:end;justify-self:end;
    font-size:clamp(4.5rem, 7vw, 7.5rem);font-weight:800;line-height:.78;letter-spacing:-.06em;
    color:var(--doo-bg);-webkit-text-stroke:2px rgba(255,255,255,.45);
    margin-right:-12px;position:relative;z-index:1;
}
.doo-modern .mcard.is-ranked .mcard-img{grid-row:1;grid-column:2}
.doo-modern .mcard.is-ranked .mcard-title,
.doo-modern .mcard.is-ranked .mcard-sub{grid-column:2}

.doo-modern .mads{max-width:var(--doo-max);margin:0 auto 38px;padding:0 var(--doo-gutter);text-align:center}

/* ------------------------------------------------------------------ *
 * Listados (archivos, busqueda, generos)
 * ------------------------------------------------------------------ */
body.doo-modern .module{float:none;min-height:0;max-width:var(--doo-max);margin:0 auto;padding:0 var(--doo-gutter) 48px}
body.doo-modern .module .sidebar,
body.doo-modern .dtsingle .sidebar{display:none !important}
body.doo-modern .module .content,
body.doo-modern .module .content.right,
body.doo-modern .module .content.left,
body.doo-modern .module .content.full,
body.doo-modern .module .content.normal{width:100% !important;margin:0 !important;padding:32px 0 0 !important;float:none}
body.doo-modern .module .content h1.heading-archive{
    font-size:clamp(1.8rem, 3.4vw, 2.8rem);font-weight:800;letter-spacing:-.02em;color:#fff;
    margin:8px 0 8px;padding:0;float:none;
}
body.doo-modern .module .content header,
body.doo-modern .module .content header.archive_post{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    float:none;width:100%;padding:24px 0 14px !important;border:0 !important;background:none !important;
}
body.doo-modern .module .content header h1,
body.doo-modern .module .content header h2{float:none;padding:0 !important;font-size:clamp(1.15rem, 1.6vw, 1.45rem);font-weight:700;color:#fff;border:0 !important}
body.doo-modern .module .content header h2::before,
body.doo-modern .module .content header h1::before{display:none}
body.doo-modern .module .content header span{float:none;color:var(--doo-muted);font-size:13px}
body.doo-modern .module .content header span a.see-all{background:transparent !important;color:var(--doo-muted) !important;font-size:13px;text-transform:none;font-weight:600;padding:0;margin-left:8px}
body.doo-modern .module .content header span a.see-all:hover{color:#fff !important}

body.doo-modern .module .content .items{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(clamp(132px, 13vw, 190px), 1fr));
    gap:22px clamp(10px, 1.2vw, 18px);
    float:none;width:100%;margin:0 0 28px;border:0 !important;
}
body.doo-modern .module .content .items::before,
body.doo-modern .module .content .items::after{display:none}
body.doo-modern .module .content .items .item,
body.doo-modern .module .content .items.normal .item,
body.doo-modern .module .content .items.full .item,
body.doo-modern .module .content .items .se{width:auto !important;float:none;padding:0 !important;margin:0}
body.doo-modern .module .content .items .se,
body.doo-modern .module .content .items .item.se{grid-column:span 2}
/* El theme reserva el hueco del poster con padding-top:140%, y un poster es 2:3 (150%): quedaba
   una franja vacia debajo de la imagen. */
body.doo-modern .module .content .items .item .poster{padding-top:150% !important}
/* Y height:auto. El theme le pone height:100%: en la rejilla eso es el alto de TODA la tarjeta,
   y sumado al padding el poster se salia por debajo, encima del titulo y la fecha, y la fila
   siguiente acababa tapandolos. */
body.doo-modern .module .content .items .item .poster{height:auto !important;float:none !important;display:block}
body.doo-modern .module .content .items .item .poster img{top:0;left:0;height:100%;margin-top:0 !important}
body.doo-modern .module .content .items .se .poster{padding-top:56.25% !important}
body.doo-modern .module .content,
body.doo-modern .dtsingle .content{border:0 !important}
body.doo-modern .module .content .items .item .poster{
    border-radius:var(--doo-radius);background:var(--doo-surface-2) !important;
    box-shadow:0 0 0 1px var(--doo-line);
    transition:transform .25s ease, box-shadow .25s ease;
}
body.doo-modern .module .content .items .item:hover .poster{transform:translateY(-4px);box-shadow:0 0 0 2px var(--doo-accent), 0 18px 40px -16px rgba(0,0,0,.9)}
body.doo-modern .module .content .items .item .poster:hover>img{transform:scale(1.06);filter:brightness(.55)}
body.doo-modern .module .content .items .item .poster .rating{
    top:8px;left:8px;bottom:auto;right:auto;margin:0;border-radius:7px;
    background:rgba(10,10,13,.72);color:#f5c518;text-shadow:none;font-weight:700;font-size:11px;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
body.doo-modern .module .content .items .item .poster .rating:before{color:#f5c518;font-size:9px}
body.doo-modern .module .content .items .item .poster .quality,
body.doo-modern .module .content .items .item .poster span.quality{border-radius:6px;background:var(--doo-accent) !important;color:#fff !important;font-weight:700}
body.doo-modern .module .content .items .item .data{margin:10px 0 0;float:none}
body.doo-modern .module .content .items .item .data h3{font-size:14px;font-weight:600;color:#fff;float:none}
body.doo-modern .module .content .items .item .data h3 a{color:#fff}
body.doo-modern .module .content .items .item .data span{float:none;display:block;color:var(--doo-muted);font-size:12.5px}
body.doo-modern .module .content .items .item .dtinfo{display:none !important}

/* Paginacion */
body.doo-modern .pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;float:none;width:100%;margin:12px 0 0}
body.doo-modern .pagination a,
body.doo-modern .pagination span{
    float:none;min-width:40px;height:40px;padding:0 12px;line-height:40px;text-align:center;
    border:0 !important;border-radius:10px;background:var(--doo-surface) !important;color:var(--doo-muted) !important;font-weight:600;
}
body.doo-modern .pagination a:hover{background:var(--doo-surface-2) !important;color:#fff !important}
body.doo-modern .pagination span.current{background:var(--doo-accent) !important;color:#fff !important}

/* ------------------------------------------------------------------ *
 * Ficha (pelicula, serie, temporada, episodio)
 * ------------------------------------------------------------------ */
body.doo-modern #single{float:none}
body.doo-modern.doo-hero-page #single{margin-top:calc(var(--doo-header) * -1)}

/* Player grande (Opciones > Player > «Bigger»). El theme lo pone ANTES de la ficha, fuera de
   #single, y lo llena por JavaScript al reproducir. La cabecera de la ficha sube por debajo de
   la barra superior con margen negativo, asi que le tapaba la parte de abajo: con player grande
   la cabecera ya no sube. Vacio, no se enseña la caja. */
body.doo-modern #contenedor>.dooplay_player{position:relative;z-index:30;margin-top:20px !important}
body.doo-modern #contenedor>.dooplay_player:has(#dooplay_player_big_content:empty){display:none}
body.doo-modern.doo-hero-page #contenedor:has(>.dooplay_player #dooplay_player_big_content:not(:empty)) #single{margin-top:0}
body.doo-modern.doo-hero-page #contenedor:has(>.dooplay_player #dooplay_player_big_content:not(:empty)) .sheader{padding-top:48px !important;min-height:0}
body.doo-modern .dtsingle .content,
body.doo-modern .dtsingle .content.right,
body.doo-modern .dtsingle .content.left{width:100% !important;margin:0 !important;float:none}
/* Con player (peliculas con fuentes o trailer) el orden es el del HTML: primero el player y
   debajo la ficha. La ficha entonces no sube por debajo de la barra superior: eso es solo para
   cuando abre la pagina (series, temporadas, peliculas sin fuentes). */
body.doo-modern .dtsingle .content{display:flex;flex-direction:column}
body.doo-modern .dtsingle .content>*{min-width:0}
body.doo-modern.doo-hero-page #single:has(.dooplay_player){margin-top:0}
body.doo-modern #single:has(.dooplay_player) .sheader{
    min-height:clamp(320px, 46vh, 520px);
    padding-top:48px !important;
    margin-top:28px;
}

/* La cabecera de la ficha, sobre la imagen de fondo */
body.doo-modern .sheader{
    position:relative;float:none;
    display:flex;align-items:flex-end;gap:clamp(20px, 3vw, 40px);
    min-height:clamp(440px, 70vh, 700px);
    padding:calc(var(--doo-header) + 48px) max(var(--doo-gutter), calc((100% - var(--doo-max)) / 2 + var(--doo-gutter))) 40px !important;
    background:var(--doo-hero, none) center 20% / cover no-repeat, var(--doo-surface);
    overflow:hidden;border:0 !important;margin:0;
}
body.doo-modern .sheader::before{
    content:"";position:absolute;inset:-2px;z-index:0;
    background:
        linear-gradient(90deg, rgba(10,10,13,.95) 0%, rgba(10,10,13,.75) 38%, rgba(10,10,13,.25) 75%, rgba(10,10,13,.1) 100%),
        linear-gradient(0deg, var(--doo-bg) 0%, rgba(10,10,13,0) 55%);
}
body.doo-modern .sheader>*{position:relative;z-index:1}
body.doo-modern .sheader .poster{
    float:none;flex:none;width:clamp(130px, 15vw, 230px);
    border-radius:var(--doo-radius);overflow:hidden;
    box-shadow:0 0 0 1px var(--doo-line), 0 30px 60px -20px rgba(0,0,0,.9);
}
body.doo-modern .sheader .poster img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
body.doo-modern .sheader .data{width:auto !important;margin:0 !important;padding:0 0 6px;flex:1;min-width:0;float:none}
body.doo-modern .sheader .data h1{
    font-size:clamp(2rem, 4.6vw, 3.8rem) !important;font-weight:800 !important;line-height:1.04 !important;
    letter-spacing:-.02em;color:#fff;margin:0 0 14px;white-space:normal;
}
body.doo-modern .sheader .data .extra{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px}
body.doo-modern .sheader .data .extra span{
    float:none;margin:0 !important;padding:5px 12px !important;border-radius:999px;
    background:rgba(255,255,255,.12);color:#e7e7ea;font-size:13px;font-weight:600;border:0 !important;
}
body.doo-modern .sheader .data .extra span:empty{display:none}
/* El lema de la pelicula no es una etiqueta: va como texto, en su propia linea. */
body.doo-modern .sheader .data .extra span.tagline{
    flex-basis:100%;order:-1;padding:0 !important;background:none;border-radius:0;
    font-size:16px;font-weight:500;font-style:italic;color:#d4d4d8;
}
body.doo-modern .sheader .data .extra span a{color:#fff}
body.doo-modern .sheader .data .sgeneros{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;float:none;height:auto;overflow:visible;padding:0}
body.doo-modern .sheader .data .sgeneros a{
    float:none;margin:0 !important;padding:7px 14px;border-radius:999px;
    border:1px solid rgba(255,255,255,.22);color:#fff !important;font-size:13px;font-weight:600;background:transparent !important;
}
body.doo-modern .sheader .data .sgeneros a:hover{background:#fff !important;color:#000 !important;border-color:#fff}
body.doo-modern .sheader .data .sgeneros a::after{display:none}

/* Caja de puntuacion: la nota a la izquierda y, al lado, las estrellas y los votos */
body.doo-modern .sheader .starstruck-wrap{float:none;width:auto;display:block;margin:0;padding:0}
body.doo-modern .sheader .dt_rating_data{
    float:none;position:relative;display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
    min-height:74px;padding:12px 18px 12px 84px;border-radius:16px;
    background:rgba(10,10,13,.55);border:1px solid var(--doo-line);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
body.doo-modern .sheader .starstruck-wrap .dt_rating_vgs{
    position:absolute;left:12px;top:50%;transform:translateY(-50%);
    width:56px;height:50px;padding:0;line-height:50px;font-size:24px;font-weight:800;
    background:var(--doo-accent) !important;color:#fff !important;border-radius:12px;
}
body.doo-modern .sheader .starstruck{min-width:0}
body.doo-modern .sheader .starstruck-rating{display:flex;align-items:center;gap:5px;margin:0;color:var(--doo-muted)}
body.doo-modern .sheader .starstruck-rating i{float:none;margin:0}
body.doo-modern .sheader .starstruck-rating-wrap{margin:0;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.1) !important;color:#fff;font-weight:500}

/* Pestañas */
body.doo-modern .single_tabs{
    position:sticky;top:var(--doo-header);z-index:20;float:none;
    padding:12px max(var(--doo-gutter), calc((100% - var(--doo-max)) / 2 + var(--doo-gutter))) !important;
    background:rgba(10,10,13,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--doo-line);
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
body.doo-modern ul.smenu{display:flex;gap:6px;float:none;padding:0 !important;overflow-x:auto;scrollbar-width:none}
body.doo-modern ul.smenu li{float:none;flex:none}
body.doo-modern ul.smenu li a{
    padding:9px 18px !important;border-radius:999px !important;
    background:transparent !important;color:var(--doo-muted) !important;font-weight:600 !important;
}
body.doo-modern ul.smenu li a:hover{color:#fff !important;background:rgba(255,255,255,.08) !important}
body.doo-modern ul.smenu li a.selected,
body.doo-modern ul.smenu li a.active{background:var(--doo-accent) !important;color:#fff !important}
body.doo-modern .single_tabs .user_control{float:none;order:2;margin-left:auto}

/* Bloques de la ficha */
body.doo-modern #single .content .sbox{
    float:none;width:100%;border:0 !important;background:transparent !important;
    padding:32px max(var(--doo-gutter), calc((100% - var(--doo-max)) / 2 + var(--doo-gutter))) !important;
}
body.doo-modern .sbox h2,
body.doo-modern .sbox h1{float:none;border:0 !important;font-size:clamp(1.15rem, 1.6vw, 1.45rem) !important;font-weight:700 !important;color:#fff;padding:0 0 14px !important;margin:0 !important}
body.doo-modern .sbox .wp-content,
body.doo-modern .sbox .wp-content p{color:#d4d4d8;font-size:16px;line-height:1.7;max-width:880px}
body.doo-modern .custom_fields{
    display:flex;gap:16px;float:none;max-width:880px;
    padding:12px 0 !important;border-bottom:1px solid var(--doo-line) !important;background:none !important;
}
body.doo-modern .custom_fields b.variante{flex:0 0 200px;float:none;color:var(--doo-muted);font-weight:500;width:auto}
body.doo-modern .custom_fields span.valor{float:none;color:#fff;width:auto}

/* Reparto */
body.doo-modern .persons{display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:12px;float:none;width:100%;margin-bottom:28px}
body.doo-modern .persons .person{
    display:flex;align-items:center;gap:12px;float:none;width:auto !important;margin:0 !important;
    padding:10px !important;border-radius:var(--doo-radius);background:var(--doo-surface);border:0 !important;
}
/* El theme la sacaba de la tarjeta (absolute) y la subia 15px: tapaba el nombre. */
body.doo-modern .persons .person .img{position:static;float:none;flex:none;width:52px;height:52px;border-radius:50%;overflow:hidden;margin:0 !important}
body.doo-modern .persons .person .img img{width:100%;height:100%;object-fit:cover;object-position:center top;margin:0}
body.doo-modern .persons .person .data{float:none;padding:0 !important;width:auto;min-width:0;flex:1;margin:0 !important}
body.doo-modern .persons .person .data .name a{color:#fff;font-weight:600}
body.doo-modern .persons .person .data .caracter{color:var(--doo-muted)}

/* Player */
body.doo-modern .dooplay_player{
    float:none;width:auto;
    margin:28px max(var(--doo-gutter), calc((100% - var(--doo-max)) / 2 + var(--doo-gutter))) 0 !important;
    border-radius:16px;overflow:hidden;background:var(--doo-surface) !important;
    box-shadow:0 0 0 1px var(--doo-line), 0 30px 60px -30px rgba(0,0,0,.9);
}
/* Dentro de la caja: titulo y fuentes arriba, el video debajo. */
body.doo-modern .dooplay_player{display:flex;flex-direction:column}
body.doo-modern .dooplay_player>h2{order:1}
body.doo-modern .dooplay_player>#playeroptions{order:2}
body.doo-modern .dooplay_player>#playcontainer{order:3}
body.doo-modern .dooplay_player h2{background:transparent !important;border-color:var(--doo-line) !important;padding:18px 24px !important;color:#fff}
body.doo-modern .dooplay_player .play,
body.doo-modern .dooplay_player .play .pframe,
body.doo-modern .dooplay_player .play .preplayer{background:#000 !important}
body.doo-modern .dooplay_player .options{background:transparent !important;padding:0 16px !important}
body.doo-modern .dooplay_player .options ul{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 !important}
body.doo-modern .dooplay_player .options ul li{
    float:none;width:auto !important;display:inline-flex;align-items:center;gap:8px;
    padding:10px 16px !important;border-radius:999px;border:1px solid var(--doo-line) !important;
    background:var(--doo-surface-2) !important;color:#fff;
}
body.doo-modern .dooplay_player .options ul li i{margin-right:0 !important;font-size:15px}
body.doo-modern .dooplay_player .options ul li:hover{border-color:rgba(255,255,255,.3) !important}
body.doo-modern .dooplay_player .options ul li.on,
body.doo-modern .dooplay_player .options ul li.on:hover{background:var(--doo-accent) !important;border-color:var(--doo-accent) !important}
body.doo-modern .dooplay_player .options ul li span.server{margin-left:0;color:rgba(255,255,255,.7)}
body.doo-modern .dooplay_player .options ul li span.flag{float:none;margin-left:2px;display:flex}
/* Sin el borde de 2px del esquema oscuro: en una bandera de 12px solo se veia el borde. */
body.doo-modern .dooplay_player .options ul li span.flag img{width:20px;height:auto;border:0 !important;border-radius:3px;display:block}
/* El nombre siempre blanco: el color principal del hover (Customize) lo dejaba rojo sobre el rojo del
   canal elegido, y no se leia. */
body.doo-modern .dooplay_player .options ul li span.title,
body.doo-modern .dooplay_player .options ul li:hover span.title{color:#fff !important}

/* Temporadas y episodios */
body.doo-modern #seasons .se-c{margin-bottom:12px;border-radius:var(--doo-radius);overflow:hidden;background:var(--doo-surface);border:1px solid var(--doo-line)}
body.doo-modern #seasons .se-c .se-q{
    background:transparent !important;margin:0;padding-left:84px;min-height:58px;
    transition:background .2s;
}
body.doo-modern #seasons .se-c .se-q:hover{background:rgba(255,255,255,.04) !important}
body.doo-modern #seasons .se-c .se-q span.se-t{
    width:58px;height:58px;padding:0;line-height:58px;font-family:var(--doo-font);font-weight:800;font-size:20px;
    background:var(--doo-accent) !important;color:#fff !important;
}
body.doo-modern #seasons .se-c .se-q span.se-t.se-o{background:var(--doo-accent) !important}
body.doo-modern #seasons .se-c .se-q span.title{padding:16px 0;font-size:16px;font-weight:700;color:#fff}
body.doo-modern #seasons .se-c .se-q span.title i{color:var(--doo-muted)}
body.doo-modern #seasons .se-c .se-a ul.episodios li{
    display:flex;align-items:center;gap:16px;float:none;position:relative;
    padding:10px 16px !important;border:0 !important;border-top:1px solid var(--doo-line) !important;
    transition:background .2s;
}
body.doo-modern #seasons .se-c .se-a ul.episodios li:hover{background:rgba(255,255,255,.04)}
body.doo-modern #seasons .se-c .se-a ul.episodios li .imagen{float:none;flex:none;width:150px;margin:0;border-radius:10px;overflow:hidden;aspect-ratio:16/9}
body.doo-modern #seasons .se-c .se-a ul.episodios li .imagen img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
body.doo-modern #seasons .se-c .se-a ul.episodios li:hover .imagen img{transform:scale(1.06)}
/* El boton de play, dibujado aqui para no dejar un icono suelto en el layout clasico. */
body.doo-modern #seasons .se-c .se-a ul.episodios li .imagen{position:relative}
body.doo-modern #seasons .se-c .se-a ul.episodios li .imagen::before{
    content:"";position:absolute;z-index:1;left:50%;top:50%;
    width:32px;height:32px;margin:-16px 0 0 -16px;
}
/* Encima de la imagen, como en las tarjetas de la portada. */
body.doo-modern #seasons .se-c .se-a ul.episodios li .numerando{
    position:absolute;z-index:1;left:22px;bottom:16px;float:none;width:auto;margin:0;padding:6px 8px;border:0 !important;
    border-radius:7px;background:var(--doo-accent);color:#fff;font-weight:700;font-size:11px;line-height:1;
}
body.doo-modern #seasons .se-c .se-a ul.episodios li .episodiotitle{position:static;float:none;flex:1;min-width:0;padding:0 !important;width:auto}
body.doo-modern #seasons .se-c .se-a ul.episodios li .episodiotitle a{font-size:15px;font-weight:600;color:#fff;float:none;display:block}
body.doo-modern #seasons .se-c .se-a ul.episodios li .episodiotitle span.date{float:none;display:block;color:var(--doo-muted);padding-top:4px}
/* El enlace del titulo cubre toda la fila. */
body.doo-modern #seasons .se-c .se-a ul.episodios li .episodiotitle a::after{content:"";position:absolute;inset:0;z-index:2}

/* Relacionados, comentarios, migas */
body.doo-modern #single .content .srelacionados{background:transparent !important}
body.doo-modern #single .content .srelacionados #single_relacionados{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none}
body.doo-modern #single .content .srelacionados article{flex:none;width:clamp(120px, 12vw, 170px) !important;float:none;padding:0 !important;margin:0}
body.doo-modern #single .content .srelacionados article img{border-radius:10px}
body.doo-modern #single .content .smais .smais-row{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none}
body.doo-modern #single .content .smais h2 a{color:inherit}
body.doo-modern #single .content .smais h2 a:hover{color:var(--doo-accent)}

/* Rejilla de episodios: columnas propias. En la de posters cada episodio ocupaba dos columnas
   estrechas, y con un numero impar de columnas sobraba una vacia a la derecha. */
body.doo-modern .module .content .items.doo-epgrid{grid-template-columns:repeat(auto-fill, minmax(clamp(240px, 22vw, 330px), 1fr))}
body.doo-modern .module .content .items.doo-epgrid .se,
body.doo-modern .module .content .items.doo-epgrid .item.se{grid-column:auto}
@media (max-width:640px){
    body.doo-modern .module .content .items.doo-epgrid{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr))}
}

/* Colecciones (inc/doo_collections.php) */
body.doo-modern .doo-colhead{position:relative;margin:0 0 8px;padding:8px 0 4px}
body.doo-modern .doo-colhead[style]{padding:clamp(28px,6vw,72px) clamp(16px,3vw,40px) 20px;border-radius:var(--doo-radius);overflow:hidden;
    background:linear-gradient(0deg, var(--doo-bg) 0%, rgba(10,10,13,.85) 45%, rgba(10,10,13,.55) 100%), var(--doo-colbg) center/cover no-repeat}
body.doo-modern .doo-colhead .desc_category{max-width:900px}
body.doo-modern .doo-colhead .desc_category p{color:var(--doo-muted);font-size:15px;line-height:1.65;margin:0 0 10px}
body.doo-modern .doo-colhead .desc_category a{color:var(--doo-text);font-weight:600}
body.doo-modern .doo-colitems{counter-reset:doocol}
body.doo-modern .doo-colitems article{counter-increment:doocol;position:relative}
body.doo-modern .doo-colitems article::before{content:counter(doocol);position:absolute;z-index:5;top:8px;left:8px;min-width:30px;height:30px;padding:0 8px;border-radius:999px;
    background:var(--doo-accent);color:#fff;font-weight:800;font-size:14px;line-height:30px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.5);pointer-events:none}
body.doo-modern .doo-colback{clear:both;padding:24px 0 0;margin:0}
body.doo-modern .doo-colback a{color:var(--doo-muted);font-weight:600}
body.doo-modern .doo-colback a:hover{color:var(--doo-accent)}
body.doo-modern .doo-colgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;clear:both}
body.doo-modern .doo-colcard a{display:block;color:var(--doo-text)}
body.doo-modern .doo-colcard img,
body.doo-modern .doo-colcard .doo-colnoimg{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:var(--doo-radius);background:var(--doo-surface);border:1px solid var(--doo-line);transition:transform .2s,box-shadow .2s}
body.doo-modern .doo-colcard a:hover img{transform:translateY(-4px);box-shadow:0 0 0 2px var(--doo-accent),0 18px 40px -16px rgba(0,0,0,.9)}
body.doo-modern .doo-colcard h3{font-size:14px;font-weight:700;line-height:1.3;margin:10px 0 2px;color:var(--doo-text)}
body.doo-modern .doo-colcard span{font-size:12px;color:var(--doo-muted)}
body.doo-modern #single .content .doo-colbox h2 span{font-size:13px;font-weight:500;color:var(--doo-muted);margin-left:6px}
body.doo-modern #single .content .doo-colbox article{position:relative;flex:none;width:clamp(110px,11vw,150px)}
body.doo-modern #single .content .doo-colbox article img{border-radius:10px;width:100%;aspect-ratio:2/3;object-fit:cover}
body.doo-modern #single .content .doo-colbox article.atual img{box-shadow:0 0 0 3px var(--doo-accent)}
body.doo-modern #single .content .doo-colbox .doo-colnum{position:absolute;z-index:2;top:6px;left:6px;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:rgba(0,0,0,.75);color:#fff;font-weight:800;font-size:12px;line-height:24px;text-align:center}
body.doo-modern #single .content .doo-colbox article.atual .doo-colnum{background:var(--doo-accent)}
body.doo-modern #single .content .doo-colbox .doo-colalso{margin:12px 0 0;color:var(--doo-muted);font-size:14px}
body.doo-modern #single .content .doo-colbox .doo-colalso a{color:var(--doo-text);font-weight:600}
@media (max-width:640px){
    body.doo-modern .doo-colgrid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
}

/* Entrada de los archivos de peliculas y series: texto y atajos por genero y año */
body.doo-modern .doo-ptintro{clear:both;padding:20px 0 4px;max-width:1100px}
body.doo-modern .doo-ptintro p{color:var(--doo-muted);font-size:15px;line-height:1.65;margin:0 0 18px}
body.doo-modern .doo-ptintro p a{color:var(--doo-text);font-weight:600}
body.doo-modern .doo-ptintro p a:hover{color:var(--doo-accent)}
body.doo-modern .doo-chips{margin:0 0 16px}
body.doo-modern .doo-chips h2{font-size:13px !important;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--doo-muted) !important;margin:0 0 10px;padding:0 !important;border:0 !important}
body.doo-modern .doo-chips h2::before{display:none}
body.doo-modern .doo-chips ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
body.doo-modern .doo-chips li{margin:0;padding:0;list-style:none}
body.doo-modern .doo-chips a{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:var(--doo-surface);border:1px solid var(--doo-line);color:var(--doo-text);font-size:14px;font-weight:600;line-height:1.2;transition:border-color .15s,color .15s}
body.doo-modern .doo-chips a span{color:var(--doo-muted);font-weight:500;font-size:12px}
body.doo-modern .doo-chips a:hover{border-color:var(--doo-accent);color:#fff}
@media (max-width:640px){
    body.doo-modern .doo-chips ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
    body.doo-modern .doo-chips ul::-webkit-scrollbar{display:none}
    body.doo-modern .doo-chips a{white-space:nowrap}
}
body.doo-modern .breadcrumb_bottom,
body.doo-modern .dt-breadcrumb{
    padding:16px max(var(--doo-gutter), calc((100% - var(--doo-max)) / 2 + var(--doo-gutter))) 32px !important;
    color:var(--doo-muted);font-size:13px;float:none;background:none !important;border:0 !important;
}

/* ------------------------------------------------------------------ *
 * Pie
 * ------------------------------------------------------------------ */
body.doo-modern footer.main{float:none;margin:40px 0 0 !important;border-top:1px solid var(--doo-line)}
body.doo-modern footer.main .fcmpbox{background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;box-shadow:none !important}
body.doo-modern footer.main .fbox{max-width:var(--doo-max);padding:0 var(--doo-gutter);color:var(--doo-muted)}
body.doo-modern footer.main .fbox .copy{padding:32px 0;color:var(--doo-muted)}
body.doo-modern footer.main .fbox .copy a{color:#fff}
body.doo-modern footer.main .fbox .top-page a{
    background:var(--doo-surface-2) !important;border-radius:12px;color:#fff !important;
    width:44px;height:44px;display:flex;align-items:center;justify-content:center;
}
body.doo-modern footer.main .fbox .fmenu ul li{border:0 !important}

/* En escritorio la cabecera y las pestañas se alinean con el resto de la ficha. */
@media (min-width: 769px){
    body.doo-modern.doo-hero-page #single{margin-top:0}
    body.doo-modern .sheader{
        width:auto;min-height:clamp(320px, 46vh, 520px);border-radius:16px;
        margin:28px max(var(--doo-gutter), calc((100% - var(--doo-max)) / 2 + var(--doo-gutter))) 0;
        padding:48px 32px 40px !important;
    }
    body.doo-modern .single_tabs{
        width:auto;
        margin:0 max(var(--doo-gutter), calc((100% - var(--doo-max)) / 2 + var(--doo-gutter)));
        padding:12px 0 !important;
    }
    body.doo-modern .pag_episodes{
        margin:16px max(var(--doo-gutter), calc((100% - var(--doo-max)) / 2 + var(--doo-gutter))) 0;
    }
}

/* Las lineas del theme atravesaban la imagen de la cabecera. */
body.doo-modern .sheader .starstruck-wrap{border:0 !important}

/* Episodio: la navegacion y la fecha */
body.doo-modern .pag_episodes{
    display:flex;float:none;width:auto;border-radius:12px;overflow:hidden;
    background:var(--doo-surface) !important;box-shadow:0 0 0 1px var(--doo-line);
}
body.doo-modern .pag_episodes .item{flex:1;float:none;width:auto;background:transparent !important;border-color:var(--doo-line) !important}
body.doo-modern #info>span.date{position:static;display:block;float:none;clear:both;margin:0;padding-top:12px;color:var(--doo-muted)}

/* ------------------------------------------------------------------ *
 * Moviles
 * ------------------------------------------------------------------ */
/* Hasta 1180px la barra de escritorio no cabe con un menu largo: se usa la del movil (☰). */
@media (max-width: 1180px){
    :root{--doo-header:60px}
    body.doo-modern header.main{display:none !important}
    body.doo-modern .fixheadresp header.responsive,
    body.doo-modern .search_responsive{display:block}
}
@media (max-width: 768px){
    body.doo-modern #contenedor{padding-top:var(--doo-header)}
    .doo-modern .mhero{height:min(78vh, 620px)}
    .doo-modern .mhero-slide{background-position:center top}
    .doo-modern .mhero-slide::before{
        background:linear-gradient(0deg, var(--doo-bg) 0%, rgba(10,10,13,.75) 42%, rgba(10,10,13,.15) 75%, rgba(10,10,13,.35) 100%);
    }
    .doo-modern .mhero-body{bottom:96px}
    .doo-modern .mhero-text{font-size:14.5px;-webkit-line-clamp:2;margin-bottom:20px}
    .doo-modern .mhero-dots{left:var(--doo-gutter);right:auto;bottom:64px}
    .doo-modern .mbtn{height:44px;padding:0 20px;font-size:14px}
    .doo-modern .mrows.has-hero{margin-top:-40px}
    .doo-modern .mrow{margin-bottom:28px}
    .doo-modern .mrow-nav{display:none}
    .doo-modern .mrow-track{grid-auto-columns:34vw;scroll-snap-type:x proximity}
    .doo-modern .mrow-ep .mrow-track{grid-auto-columns:72vw}
    .doo-modern .mrow-ranked .mrow-track{grid-auto-columns:52vw}
    .doo-modern .mplay{width:36px;height:36px;margin:-18px 0 0 -18px}

    body.doo-modern .sheader{min-height:0;flex-direction:column;align-items:flex-start;padding-top:calc(var(--doo-header) + 140px) !important}
    body.doo-modern .sheader::before{background:linear-gradient(0deg, var(--doo-bg) 0%, rgba(10,10,13,.8) 45%, rgba(10,10,13,.3) 100%)}
    body.doo-modern .sheader .poster{width:120px}
    body.doo-modern .custom_fields{flex-direction:column;gap:2px}
    body.doo-modern .custom_fields b.variante{flex:none}
    body.doo-modern #seasons .se-c .se-a ul.episodios li .imagen{width:112px}
    body.doo-modern #seasons .se-c .se-a ul.episodios li .numerando{left:19px;bottom:13px;padding:3px 5px;border-radius:5px;font-size:9px}
    body.doo-modern #seasons .se-c .se-a ul.episodios li .imagen::before{width:26px;height:26px;margin:-13px 0 0 -13px}
    body.doo-modern .module .content .items{grid-template-columns:repeat(auto-fill, minmax(104px, 1fr));gap:16px 10px}
}

/* En moviles pequenos la barra de compartir queda fija abajo (front.mobile): se deja su
   altura libre al final de la pagina para que no tape las migas ni el pie. Va en
   #dt_contenedor y no en body: el contenedor es flotante (front.style) y el relleno del body
   no alarga la pagina. */
@media only screen and (max-width: 424px){
    body.doo-modern:has(.dt_social_single) #dt_contenedor{padding-bottom:calc(52px + env(safe-area-inset-bottom, 0px))}
}
@media (prefers-reduced-motion: reduce){
    .doo-modern *{animation:none !important;transition:none !important}
}

/* Portada: texto de presentacion al final (el del sitio antiguo, con enlaces). */
body.doo-modern .mhome-intro{max-width:var(--doo-max);margin:0 auto;padding:8px var(--doo-gutter) 36px;border-top:1px solid rgba(255,255,255,.08)}
body.doo-modern .mhome-intro h2{font-size:clamp(1.05rem, 1.4vw, 1.25rem);font-weight:700;color:#fff;margin:22px 0 12px}
body.doo-modern .mhome-intro p{max-width:1100px}