/* ==========================================================================
   1. VARIABLES & CONFIGURACIÓN GLOBAL
   ========================================================================== */
:root {
    --brand-red: #E41C36;
    --brand-dark-red: #be0027;
    --brand-wine: #73131F;
    --white: #ffffff;
    --black: #000000;
    --gray-dark: #111111;
    --gray-light: #1a1a1a;
    --gray-border: #ddd;
    --font-roboto: 'roboto', sans-serif !important;
}

body {
    background-color: #3e3c3d !important;
}

/* Elementos Nativos */
a {
    color: #E41C36;
    font-weight: bold;
}

a:hover, 
a:focus {
    color: #E41C36; !important;
    text-decoration: none;
}

b, 
strong {
    color: var(--white) !important;
}

ul{color: var(--white) !important;}

em{color: var(--white) !important;}

li{color: var(--white) !important;text-align: justify;}

.wp-block-image :where(figcaption) {
    margin-bottom: 1em;
    margin-top: .5em;
    color: white;
}


/* ==========================================================================
   2. ESTRUCTURA Y LAYOUT BASE (Móvil Primero)
   ========================================================================== */
.main-layout, 
.related, 
.ticker {
    max-width: 1440px; 
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.main-layout { 
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 4rem;
    row-gap: 1rem;
    margin-top: 5rem;
    padding-top: 4rem;
    align-items: start;
}


/* ==========================================================================
   3. COMPONENTE: TICKER (NOTICIAS)
   ========================================================================== */
.ticker { 
    display: flex; 
    align-items: center; 
    margin-bottom: 2rem; 
}

.ticker__tag {
    background: var(--brand-dark-red);
    color: var(--white);
    padding: 2px 1.2rem;
    font-family: var(--font-roboto);
    font-size: 1.2rem;
    font-weight: 800;
    white-space: nowrap;
    border-radius: 4px;
    margin-right: 2rem;
}

.ticker__scroll {
    color: var(--white);
    font-size: 1.4rem;
}

.ticker__scroll a {
    color: var(--black);
    font-family: var(--font-roboto);
    text-decoration: none;
    margin-right: 2.5rem;
}


/* ==========================================================================
   4. COMPONENTE: ARTÍCULO (POST)
   ========================================================================== */
.post__header {
    grid-column: 1 / -1;
    width: 100%;
    margin-bottom: 0.5rem;
}

.post__header h1 {
    color: var(--white) !important;
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    margin: 1.5rem 0 1rem 0;
}

.post__source-text {
    color: var(--white);
    font-family: var(--font-roboto);
    font-size: 0.9em;
    margin-top: 8px;
}

.post__author {
    color: var(--white);
    font-family: var(--font-roboto);
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.post__date {
    color: var(--white);
    font-family: var(--font-roboto);
    font-size: 1.6rem;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.post__date time {
    display: inline-block;
    margin-bottom: 0 !important;
}

.post__category {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 1px;
    font-family: var(--font-roboto);
}

.post__category a {
    color: #fff;
}

/* Multimedia (Imágenes del Post) */
.post__media {
    position: relative;
    overflow: hidden;
    margin-top: 0 !important;
    margin-bottom: 2.5rem;
    border-radius: 8px;
}

.post__media img {
    display: block;
    width: 100%;
    border: 2px solid var(--white);
    transition: transform 0.5s ease; 
}

.post__media:hover img { 
    transform: scale(1.01); 
    border: 2px solid var(--white);
}

.post__body p {
    color: var(--white);
    font-family: var(--font-roboto);
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: justify; 
    padding-top: 1rem;
    margin-bottom: 2rem;
}

.promo-inner { 
    margin-bottom: 50px; 
}


/* ==========================================================================
   5. COMPONENTE: SIDEBAR (GENERAL Y TABS)
   ========================================================================= */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.sidebar__card {
    padding: 2rem;
    margin-bottom: 0;
    background: var(--white);
    border: 1px solid var(--brand-dark-red);
    border-radius: 1.2rem;
}

/* Caja de pestañas unificadas */
.sidebar__card.tabs-box {
    background: var(--white) !important;
    border: 1px solid var(--gray-border);
}

.sidebar__nav {
    display: flex;
    border-bottom: 2px solid var(--border-color, var(--gray-border));
    margin-bottom: 20px;
}

.sidebar__nav label {
    font-size: 1.5rem;
}

.sidebar__btn {
    flex: 1;
    position: relative;
    background: none;
    border: none;
    color: var(--brand-red) !important;
    font-family: var(--font-roboto);
    font-weight: 700;
    text-align: center;
    padding: 1.8rem;
    cursor: pointer;
}

/* Estados e Inputs lógicos de las Pestañas */
.sidebar__switch { 
    display: none; 
}

#content-leido, 
#content-ultimo {
    display: none;
    animation: fadeIn 0.4s ease;
}

.sidebar__btn.active,
#tab-ultimo:checked ~ .sidebar__nav #label-ultimo,
#tab-leido:checked ~ .sidebar__nav #label-leido {
    color: var(--brand-dark-red) !important;
}

#tab-ultimo:checked ~ .sidebar__nav #label-ultimo::after,
#tab-leido:checked ~ .sidebar__nav #label-leido::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--brand-dark-red);
}

#tab-leido:checked ~ #content-leido { display: block; }
#tab-ultimo:checked ~ #content-ultimo { display: block; }

/* Rankings / Listas dentro de Tabs */
.sidebar__ranking { 
    padding: 0; 
    list-style: none; 
}

.sidebar__ranking li {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-color, #eee);
}

.sidebar__ranking p {
    color: var(--black) !important;
    font-family: var(--font-roboto);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

.sidebar__ranking a {
    color: var(--white) !important;
    font-family: var(--font-roboto);
    font-weight: normal;
    text-decoration: none;
}

.sidebar__ranking a:hover {
    color: var(--brand-dark-red) !important;
}

.sidebar__num {
    color: var(--brand-red);
    font-weight: 800;
    font-size: 2.2rem;
    line-height: 1;
}


/* ==========================================================================
   6. COMPONENTE: ENCUESTA (WIDGET GENERAL & YOP POLLS)
   ========================================================================== */

/* Contenedor principal de la encuesta (Efecto Volumen/3D) */
.sidebar__card.poll {
    background:#3e3c3d !important;
    border: 1px solid var(--white);
    padding: 1.5rem !important;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sidebar__card.poll:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(228, 28, 54, 0.1), 
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Bordes generales y contenedores YOP */
.yop-poll-container, 
.yop-poll-form {
    border: 2px solid var(--white) !important;
    padding: 15px; 
    border-radius: 8px; 
}

div[id^="yop-poll-container-"] {
    border: 0px solid var(--white) !important;
}

.yop-poll[data-template="classic"] {
    background: #3e3c3d !important;
    border: 1px solid var(--white);
}

/* Títulos internos nativos y preguntas */
.sidebar__card.poll h3, 
.sidebar__card.poll .yop-poll-question,
.yop-poll-question {
    color: var(--white) !important;
    font-family: var(--font-roboto);
    font-size: var(--yop-q-ts, 1.8rem);
    font-weight: var(--yop-q-tw, 800);
    line-height: 1.3;
    letter-spacing: -0.5px;
    margin-bottom: 2rem;
    margin-block-end: var(--yop-q-gap, 12px);
    text-align: var(--yop-el-ta, center);
    background-color: var(--brand-red) !important;
    border: 1px solid var(--white) !important;
}

/* Opciones nativas (Respuestas) */
.sidebar__card.poll .yop-poll-answers li {
    list-style: none;
    background: var(--gray-light);
    border: 1px solid #2a2a2a;
    padding: 1rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    margin-bottom: 1.2rem;
}

.sidebar__card.poll .yop-poll-answers li:hover {
    background: var(--black);
    border-color: var(--brand-red);
}

.sidebar__card.poll .yop-poll-answers label,
.yop-poll-answer-text {
    color: var(--white) !important;
    font-family: var(--font-roboto);
    font-size: var(--yop-ans-ts, 1.4rem);
    font-weight: var(--yop-ans-tw, normal);
    display: inline-block;
    margin-left: 0.8rem;
    cursor: pointer;
}

.yop-poll-answers {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--white);
    margin-top: -13px !important;
}

/* Botones de Votar */
.sidebar__card.poll button.yop-poll-button,
.sidebar__card.poll input[type="button"].yop-poll-button,
.yop-poll-vote-button {
    width: 100%;
    background: linear-gradient(180deg, var(--brand-red) 0%, var(--brand-dark-red) 100%) !important;
    border: 1px solid var(--white) !important;
    border-color: var(--white) !important;
    border-radius: var(--yop-btn-br, 0px) !important;
    color: var(--white) !important;
    font-family: var(--font-roboto);
    font-weight: 800;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1.2rem;
    margin-top: 1.5rem;
    box-shadow: 0 4px 12px rgba(190, 0, 39, 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
}

.sidebar__card.poll button.yop-poll-button:hover {
    background: linear-gradient(180deg, #ff2a4b 0%, var(--brand-red) 100%) !important;
    box-shadow: 0 6px 16px rgba(190, 0, 39, 0.6);
    transform: translateY(-1px);
}

.sidebar__card.poll button.yop-poll-button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(190, 0, 39, 0.4);
}

/* Footers de la encuesta */
.yop-poll-footer {
    margin-block-start: -25px !important;
}

/* Analíticas / Barras de Resultados */
.sidebar__card.poll .yop-poll-results-bar {
    background: #2a2a2a !important;
    height: 16px !important;
    overflow: hidden;
    border-radius: 10px;
    margin-top: 0.5rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.sidebar__card.poll .yop-poll-results-bar div {
    background: linear-gradient(90deg, var(--brand-dark-red) 0%, var(--brand-red) 100%) !important;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.2) inset;
    animation: slideInBar 1s ease-out;
}

.sidebar__card.poll .yop-poll-result-percent {
    color: var(--white) !important;
    font-family: var(--font-roboto);
    font-size: 1.3rem;
    font-weight: 700;
}

/* Personalización Unificada del Contenedor "Basic" de Yop Poll */
.basic-yop-poll-container {
    background-color: var(--black) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.basic-yop-poll-container .basic-inner {
    background-color: var(--black) !important; 
    padding: 0px 0px !important;
}

.basic-yop-poll-container ul.basic-answers {
    padding-left: 0;
    margin-left: 0;
    border: 1px solid var(--white);
}

.basic-yop-poll-container ul.basic-answers li.basic-answer {
    line-height: 1.4;
    margin-left: 0;
    padding-left: 10px !important;
    padding-right: 5px !important;
}

.basic-yop-poll-container .basic-answer .basic-answer-results-details, 
.basic-yop-poll-container .basic-answer .basic-answer-total-votes, 
.basic-yop-poll-container .basic-answer .basic-text {
    color: var(--white) !important;
}

.basic-yop-poll-container .basic-vote { 
    display: block;
    text-align: center !important; 
    background-color: var(--brand-red) !important;
    margin-right: 0px !important;
    margin-bottom: -25px !important;
    border-radius: 0px 0px 40px 40px !important;
    border: 1px solid var(--white);
}

.basic-yop-poll-container .basic-vote a {
    background-color: var(--brand-red) !important;
    text-align: center !important;
}

.basic-yop-poll-container .basic-vote a:hover {
    color: var(--white) !important;
}

.basic-yop-poll-container .basic-stats { 
    display: none !important; 
}

.basic-yop-poll-container .basic-custom-field, 
.basic-yop-poll-container .basic-question {
    margin-top: 0px !important;
}

.basic-yop-poll-container .basic-question-title {
    margin-bottom: 0;
    margin-top: 0;
    font-size: 17px !important;
}

.basic-yop-poll-container .basic-answers-results .progress .progress-bar {
    background-color: var(--brand-red) !important;
}

.basic-yop-poll-container .basic-message { 
    background-color: var(--white) !important; 
    border-left: 10px solid var(--brand-red) !important;
}

/* Títulos y Elementos de Estructura de la Respuesta "Basic" */
.basic-question-title { 
    color: var(--white) !important; 
    background-color: var(--brand-red) !important;
    text-align: center !important;
    border-radius: 20px 20px 0px 0px !important;
    border: 1px solid var(--white);
}

.bootstrap-yop ol, 
.bootstrap-yop ul {
    margin-bottom: 0px !important;
}

.yop-poll-result-text {
    color: #ffffff !important;
}

.yop-poll-message {
    color: #ffffff !important;
}

.yop-poll-message--success {
    border-left-color: #E41C36 !important;
}

.yop-poll-element {
    padding-top: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 5px !important;
    padding-left: 0px !important;
}


/* ==========================================================================
   7. SECCIÓN: RELACIONADOS (POSTS RELACIONADOS)
   ========================================================================== */
.related { 
    margin-top: 6rem;
    margin-bottom: 8rem; 
    padding-top: 4rem; 
    padding-bottom: 8rem; 
}

.related__grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px; 
}

.related__title { 
    text-align: center; 
    border-top: 2px solid var(--brand-red); 
    margin-bottom: 4rem; 
}

.related__title span {
    position: relative;
    top: -18px;
    display: inline-block;
    background: var(--brand-red);
    color: var(--white);
    font-family: var(--font-roboto);
    font-size: 1.1rem;
    font-weight: 800;
    padding: 5px 20px;
    border-radius: 4px;
}

.related__card {
    text-align: center;
    font-family: var(--font-roboto);
    font-size: 15px !important;
    border: 2px solid var(--white);
}

.related__card h3 { 
    color: var(--white); 
    font-size: 14px;
}

.related__post-title {
    font-size: 20px;
}

.related__date { 
    color: var(--text-dim); 
}

.related__date-text {
    color: var(--white);
    font-family: var(--font-roboto) !important;
    font-size: 15px !important;
}


/* ==========================================================================
   8. ANIMACIONES
   ========================================================================== */
@keyframes slideInBar {
    from { width: 0%; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* ==========================================================================
   9. MEDIA QUERIES (RESPONSIVE)
   ========================================================================== */

/* Tablets y iPad */
@media (width >= 768px) {
    .main-layout {
        grid-template-columns: 1fr 30rem; 
        gap: 3rem;
        margin-top: 3rem;
    }

    .related__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
    
    .post__header h1 {
        font-size: 3.2rem;
    }

    .promo-inner { 
        margin-bottom: 30px; 
    }
}

/* Desktop Grande */
@media (width >= 1280px) {
    .main-layout {
        grid-template-columns: 1fr 40rem;
        column-gap: 6rem;
        row-gap: 1.5rem;
        margin-top: 5rem !important; 
    }

    .post__header h1 {
        font-size: 4.0rem;
        font-family: var(--font-roboto);
    }

    .related__grid {
        grid-template-columns: repeat(4, 1fr); 
    }
}