/*
Theme Name: Tema Personalizado Novelas
Theme URI: https://plantillasplus.com
Author: Plantillas Plus
Author URI: https://plantillasplus.com
Description: Plantilla personalizada en sistema WordPress, diseñado por Plantillas Plus.
Version: 1.0
License: GPL-2.0+
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: web-novelas
*/

  /* Colores institucionales */
  :root {
    --color-principal: #005b99;
    --color-secundario: #586c91;
    --color-terciario: #8e44ad;
  }
*, ::after, ::before {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
}
body {
    background-color: #e8ebf5;
    color: #364569;
    font-family: Arial, sans-serif;
    margin: 0;
    overflow-x: hidden;
    height: 100%;
}

.limit {
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
}
.widget {
    background: #fff;
    padding: 15px;
    border-radius: 3px;
    box-shadow: 1px 3px 8px rgba(49, 49, 49, 0.1);
    margin-bottom: 10px;
}
.secct {
    background: #fff;
    padding: 10px;
    border-radius: 3px;
    box-shadow: 1px 3px 8px rgba(49, 49, 49, 0.1);
    margin-bottom: 10px;
}
a.hometarj {
    text-decoration: none;
}

/* ===== WIDGET GENEROS (LISTADO PREMIUM) ===== */
.widget .wp-block-categories {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* item */
.widget .wp-block-categories .cat-item {
    margin-bottom: 8px;
}

/* enlace */
.widget .wp-block-categories .cat-item a {
    display: flex;
    align-items: center;

    padding: 10px 14px;
    border-radius: 8px;

    font-size: 14px;
    font-weight: 500;
    text-decoration: none;

    color: #827575;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);

    transition: all 0.25s ease;
}

/* icono */
.widget .wp-block-categories .cat-item a::before {
    content: "›";
    margin-right: 10px;
    font-size: 16px;
    opacity: 0.4;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* hover */
.widget .wp-block-categories .cat-item a:hover {
    background: rgba(255, 255, 255, 0.10);
    color: var(--color-secundario);
    transform: translateX(4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* hover icono */
.widget .wp-block-categories .cat-item a:hover::before {
    opacity: 1;
    transform: translateX(3px);
}

/* activo */
.widget .wp-block-categories .current-cat a {
    background: var(--color-secundario);
    color: #fff;
    border-color: transparent;
    font-weight: 600;
}

/* activo icono */
.widget .wp-block-categories .current-cat a::before {
    opacity: 1;
}

/* ===== SERIES POPULARES ===== */
.series-populares.lista .serie-item {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    position: relative;
}

.series-populares .posicion {
    font-weight: 800;
    color: #ffb347;
    font-size: 18px;
}

.series-populares .thumb img {
    width: 60px;
    height: auto;
    border-radius: 8px;
    aspect-ratio: auto;
}

.series-populares .titulo {
    font-size: 13px;
    margin: 0 0 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.series-populares a {
    text-decoration: none;
}
.info {
    width: 100%;
    overflow: hidden;
}
.series-populares .titulo a {
    text-decoration: none;
    color: var(--color-secundario);
    font-weight: 600;
}

.series-populares .excerpt {
    font-size: 10px;
    color: #777;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    margin: 0;
}
.generos {
    width: 100%;
    overflow: hidden;
}
.series-populares .generos a {
    font-size: 9px;
    padding: 2px 9px;
    background: rgb(0 0 0 / 8%);
    border-radius: 17px;
    margin-right: 5px;
    color: #8f8f8f;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.series-populares .generos a:hover {
    color: #000;
}

/* GRID */
.series-populares.grid {
    display: grid;
    gap: 12px;
}

.series-populares.grid .img {
    position: relative;
    display: block;
}

.series-populares.grid .titulo {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgb(0 0 0), #00000000);
    color: #fff;
    padding: 41px 7px 7px;
    font-size: 13px;
    text-align: center;
    margin: 0;
}
.series-populares.grid img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
}
.series-populares.grid span.posicion {
    position: absolute;
    font-size: 35px;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
    color: white;
    padding: 0px 9px;
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {
	.front-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
    .site-logo img {
        height: 25px;
    }
}


/* ===============================
   WIDGET GÉNEROS
=============================== */

.widget-generos.lista {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.widget-generos.lista .genero-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    text-decoration: none;
    color: #827575;
    transition: all .25s ease;
}

.widget-generos.lista .genero-item:hover {
    background: rgba(255,255,255,0.08);
    transform: translateX(4px);
    color: var(--color-secundario);
}

.widget-generos.lista .icono {
    font-size: 18px;
}

.widget-generos.lista .nombre {
    flex: 1;
    font-weight: 500;
}

.widget-generos.lista .contador {
    background: var(--color-secundario);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}
/* ===============================
   SCROLL BONITO PARA GÉNEROS
=============================== */

.widget-generos {
    scrollbar-width: thin;
    scrollbar-color: var(--color-secundario) transparent;
    overflow-x: hidden;
}

.widget-generos::-webkit-scrollbar {
    width: 6px;
}

.widget-generos::-webkit-scrollbar-track {
    background: transparent;
}

.widget-generos::-webkit-scrollbar-thumb {
    background-color: var(--color-secundario);
    border-radius: 10px;
}


/* ===============================
   NUBE
=============================== */

.widget-generos.nube {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.widget-generos.nube .genero-nube {
    background: rgba(255,255,255,0.06);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    text-decoration: none;
    color: #827575;
    transition: all .25s ease;
}

.widget-generos.nube .genero-nube:hover {
    background: var(--color-secundario);
    color: #fff;
    transform: translateY(-2px);
}


/* ===============================
   PREVIEW WIDGET EN EDITOR
=============================== */

.wp-block-legacy-widget__edit-preview {
    padding: 12px;
}

.widget-preview-box {
    border: 1px dashed rgba(255,255,255,0.25);
    padding: 14px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: #fff;
}

.widget-preview-box strong {
    font-size: 15px;
}


/* ================= THEMES ================= */
@media (prefers-color-scheme: dark) {
    html:not(.theme-light) {
        background: #121212;
        color: #eaeaea;
    }
}

html.theme-dark {
    background: #121212;
    color: #eaeaea;
}

html.theme-dark body {
    background: #121212;
    color: #ced4d5;
}


html.theme-dark .site-header {
    background: #1b1b1b;
    border-color: #2a2a2a;
}

html.theme-dark a {
    color: #7f8aa5;
}

html.theme-dark .theme-menu {
    background: #222;
}

body.theme-dark .theme-menu button:hover {
    background: rgba(255,255,255,.08);
}
html.theme-dark button {
    color: #c7c7c7;
    background: #151515;
    border: none;
}
html.theme-dark .secct {
    background: #1d1d1d;
}
html.theme-dark .widget {
    background: #1d1d1d;
}
html.theme-dark input {
    background: #151515;
    border: 1px solid #3f3f3f !important;
    color: #cccdce;
}
html.theme-dark .card-thumb {
    background: #151515;
}
html.theme-dark .tablimit {
    background: #151515;
    background-color: #151515;
}
html.theme-dark .tab:hover {
    background-color: #1d1d1d;
}
html.theme-dark button.tab-btn.next {
    background: linear-gradient(270deg, #586c91, #141414);
}
html.theme-dark button.tab-btn.prev {
    background: linear-gradient(89deg, #586c91, #151515);
}
html.theme-dark .site-logo img {filter: invert(1);}
html.theme-dark .single-tax span {
    background: #151515;
}
html.theme-dark .dark {background: #151515;}
html.theme-dark .darkb {background: #121212;}
html.theme-dark .account-content {background: #151515;}
html.theme-dark .account-sidebar {background: #151515;}
html.theme-dark .dash-card {background: #0d0d0d;}
html.theme-dark .profile-card {background: #0d0d0d;}
html.theme-dark .fav-item {background: #0d0d0d;}
html.theme-dark .fav-info span {background: #151515;}
html.theme-dark .swal2-popup.swal2-modal.swal2-icon-warning.swal2-show {background: #040404;}
html.theme-dark .pmpro_card {background: #151515;border: solid 1px #141414;color: #b4b4b4;}
html.theme-dark .pmpro_card h3 {color: #b4b4b4;}
html.theme-dark .pmpro {color: #b4b4b4;}
html.theme-dark .subscription-section {background: #1b1b1b;}
html.theme-dark .section-title {color: #b4b4b4;}
html.theme-dark .footer-note {background-color: #151515;color: #d8d8d8;}
html.theme-dark .footer-note b {color: #ffffff;}
html.theme-dark .pricing-card {background: #151515;border: 2px solid #2f2f2f;color: #fff;}
html.theme-dark .price {color: #d9d9d9;}
html.theme-dark .single-sinopsis {color: #afaeae;}
html.theme-dark a.btn-main {background: #151515;}