/* Report CSS
//--------------------------------------------------------------------- */
/* REPORT TITLES */
.report-title {
    background: var(--gradient-main);
    color: var(--color-blanco);
    display: inline-block;
    padding: 10px 10px 10px 0;
    position: relative;
    font-family: var(--font-family-secundaria);
}

.report-title::before {
    content: '';
    display: block;
    width: 100vw;
    height: 100%;
    position: absolute;
    right: 100%;
    top: 0;
    background: var(--color-teal);
}

/* REPORT MAIN BUTTON */
.report-main-button {
    background: var(--gradient-main);
    color: var(--color-blanco);
    padding: 10px 20px;
    position: relative;
    border-radius: 10px;
    font-family: var(--font-family-secundaria);
    float: right;
}

.report-main-button:hover { background: var(--color-blue); }

@media (max-width: 575px) { .report-main-button { float: none; width: 100%; display: block; text-align: center; margin-bottom: 30px; } }

/* Participants Home
//--------------------------------------------------------------------- */
div.report-participants-header {
    margin-top: 80px;
    height: 33.333vh;
    position: relative;
    overflow: hidden;
}

div.report-participants-header.home-version { height: 70vh; }

div.report-participants-header div.container {
    height: 100%;
    position: relative;
}

div.report-participants-header div.title {
    font-family: var(--font-family-secundaria);
    background: var(--color-blanco);
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 15px 15px 0 0;
}

div.report-participants-header div.title::before {
    content: '';
    display: block;
    width: 100vw;
    height: 100%;
    position: absolute;
    right: 100%;
    top: 0;
    background: var(--color-blanco);
}

div.report-participants-header div.title::after {
    content: '';
    display: block;
    width: 100vw;
    height: 20px;
    position: absolute;
    left: 100%;
    bottom: 0;
    background: var(--gradient-main);
}

div.report-participants-header div.title .tagline {
    color: var(--color-principal);
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

div.report-participants-header div.title h1 { color: var(--color-teal); }

div.report-participants-header div.title .label {
    background: var(--gradient-main);
    color: var(--color-blanco);
    display: inline-block;
    padding: 10px;
    margin-top: 5px;
    font-weight: 600;
}

@media (max-width: 767px) {
    div.report-participants-header { margin-top: 60px; }
    div.report-participants-header div.title { padding-left: 15px; }
}

@media (max-width: 575px) {
    div.report-participants-header,
    div.report-participants-header.home-version { height: auto; }
    div.report-participants-header div.title { position: relative; margin-top: 33.333vh; }
}

div.report-participants-list div.pod {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
    margin: 30px 0;
}

div.report-participants-list div.pod div.item {
    background: var(--color-clear);
    position: relative;
}

div.report-participants-list div.pod div.item div.img {
    position: relative;
    padding-top: 100%;
    overflow: hidden;
}

div.report-participants-list div.pod div.item div.img img { transition: all .3s ease; }
div.report-participants-list div.pod div.item:hover div.img img { transform: scale(1.1); }

div.report-participants-list div.pod div.item div.txt {
    padding: 15px;
    position: relative;
}

div.report-participants-list div.pod div.item div.txt::after {
    content: '';
    display: block;
    width: 50%;
    height: 10px;
    position: absolute;
    right: 0;
    top: -5px;
    background: var(--gradient-main);
    transition: all .3s ease;
}

div.report-participants-list div.pod div.item:hover div.txt::after { width: 100%; }

div.report-participants-list div.pod div.item div.txt h5 {
    color: var(--color-teal);
    margin-bottom: 5px;
}

div.report-participants-list div.pod div.item div.txt div.rte * { margin-bottom: 0; }

div.report-participants-list div.pod div.item a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

@media (max-width: 991px) { div.report-participants-list div.pod { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 767px) { div.report-participants-list div.pod { gap: 15px; } }
@media (max-width: 575px) { div.report-participants-list div.pod { grid-template-columns: 1fr 1fr; } }

/* Participants Single CSS
//--------------------------------------------------------------------- */
div.report-participants-single-header {
    height: auto;
    margin-top: 80px;
    overflow: hidden;
}

div.report-participants-single-header div.pod {
    display: grid;
    grid-template-columns: 50% 50%;
}

div.report-participants-single-header div.pod div.txt div.title {
    position: relative;
    padding: 30px 0;
    font-family: var(--font-family-secundaria);
}

div.report-participants-single-header div.pod div.txt div.title::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 50vw;
    height: 100%;
    background: url(../imagenes/temp_report_participants_single_header_a.jpg);
    background-size: cover;
}

div.report-participants-single-header div.pod div.txt div.title div.inner-title { position: relative; }

div.report-participants-single-header div.pod div.txt div.title div.inner-title .tagline {
    color: var(--color-blanco);
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
}

div.report-participants-single-header div.pod div.txt div.title div.inner-title h1 { color: var(--color-teal); }

div.report-participants-single-header div.pod div.txt div.title div.inner-title .label {
    background: var(--gradient-main);
    color: var(--color-blanco);
    display: inline-block;
    padding: 10px;
    font-weight: 600;
    margin-top: 5px;
}

div.report-participants-single-header div.pod div.txt div.name { padding: 15px 15px 0 0; }

div.report-participants-single-header div.pod div.txt div.name .subtitle {
    font-family: var(--font-family-secundaria);
    color: var(--color-teal);
}

div.report-participants-single-header div.pod div.txt div.name .subtitle br { display: none; }
div.report-participants-single-header div.pod div.img { position: relative; }

div.report-participants-single-header div.pod div.img::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 50vw;
    height: 100%;
    background: url(../imagenes/temp_report_participants_single_header_b.jpg);
    background-size: cover;
}

div.report-participants-single-header div.pod div.img::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50vw;
    height: 20px;
    background: var(--gradient-main);
}

div.report-participants-single-header div.pod div.img div.portrait {
    position: absolute;
    aspect-ratio: 1/1;
    height: calc(100% - 20px);
}

@media (max-width: 1199px) {
    div.report-participants-single-header div.pod { grid-template-columns: 70% 30%; }
    div.report-participants-single-header div.pod div.txt div.title::before { width: 70vw; }
    div.report-participants-single-header div.pod div.img::before { width: 50vw; }
    div.report-participants-single-header div.pod div.img::after { width: 50vw; }
}

@media (max-width: 767px) {
    div.report-participants-single-header { margin-top: 60px; }
    div.report-participants-single-header div.container { padding: 0; }
    div.report-participants-single-header div.pod div.txt div.title { padding: 30px 15px; }
    div.report-participants-single-header div.pod div.txt div.name { padding: 15px; }
    div.report-participants-single-header div.pod div.img div.portrait { width: 100%; aspect-ratio: unset; aspect-ratio: auto; }
}

@media (max-width: 575px) {
    div.report-participants-single-header div.pod { grid-template-columns: 1fr; }
    div.report-participants-single-header div.pod div.txt div.title::before { width: 100vw; }
    div.report-participants-single-header div.pod div.img { padding-top: 100%; }
    div.report-participants-single-header div.pod div.img div.portrait { top: 0; left: 0; width: 100%; height: 100%; }

}

div.report-participants-single-contents div.pod .subtitle {
    color: var(--color-teal);
    font-family: var(--font-family-secundaria);
    margin-bottom: 15px;
}

div.report-participants-single-contents div.pod div.items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

div.report-participants-single-contents div.pod div.items div.item a {
    display: inline-block;
    color: var(--color-teal);
    font-weight: 600;
    margin-right: 15px;
}

div.report-participants-single-contents div.pod div.items div.item a:hover {
    text-decoration: underline;
}

div.report-participants-single-contents div.pod div.items div.item a:first-child { margin-bottom: 15px; }
div.report-participants-single-contents div.pod div.items div.item .rte { font-style: italic; }
div.report-participants-single-contents div.pod div.items div.item .botones { font-style: normal; }
div.report-participants-single-contents div.pod div.items div.item .botones * { margin-bottom: 0 !important; display: inline-block; }
div.report-participants-single-contents div.pod div.items div.item .botones *:hover { text-decoration: underline; }

@media (max-width: 767px) {
    div.report-participants-single-contents .report-main-button { display: block; width: 100%; margin-bottom: 30px; text-align: center; float: none; }
    div.report-participants-single-contents div.pod div.items { grid-template-columns: 1fr; }
}

/* Stocktale Single CSS
//--------------------------------------------------------------------- */
div.report-stocktale-single-header {
    position: relative;
    padding: 160px 0;
    margin-top: 80px;
    background: var(--color-principal);
    color: var(--color-blanco);
}

div.report-stocktale-single-header img { opacity: .3; }
div.report-stocktale-single-header div.pod { width: 50%; }

div.report-stocktale-single-header div.pod div.title .tagline {
    color: var(--color-blanco);
    display: block;
    margin-bottom: 5px;
    font-family: var(--font-family-secundaria);
}

div.report-stocktale-single-header div.pod div.title h1 {
    color: var(--color-teal);
    font-family: var(--font-family-secundaria);
}

div.report-stocktale-single-header div.pod div.title .label {
    background: var(--gradient-main);
    color: var(--color-blanco);
    display: inline-block;
    padding: 10px;
    margin-top: 5px;
    font-family: var(--font-family-secundaria);
}

div.report-stocktale-single-header div.pod div.title .subtitle { margin-top: 30px; }
div.report-stocktale-single-header div.pod div.title .rte { margin-top: 15px; }

div.report-stocktale-single-header::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50vw;
    height: 20px;
    background: var(--gradient-main);
}

div.report-stocktale-single-header div.pod div.title .rte a {
    display: inline-block;
    background: transparent;
    color: var(--color-blanco);
    padding: 10px 20px;
    position: relative;
    border-radius: 10px;
    font-family: var(--font-family-secundaria);
    border: 1px solid var(--color-clear);
    font-size: .8em;
}

div.report-stocktale-single-header div.pod div.title .rte a:hover {
    background: var(--color-dark-blue);
    border-color: var(--color-dark-blue);
}

@media (max-width: 991px) {
    div.report-stocktale-single-header { padding: 80px 0; }
    div.report-stocktale-single-header div.pod { width: 60%; }
    div.report-stocktale-single-header::after { width: 40vw; }
}

@media (max-width: 767px) {
    div.report-stocktale-single-header { margin-top: 60px; padding: 60px 0; }
    div.report-stocktale-single-header div.pod { width: 80%; }
    div.report-stocktale-single-header::after { width: 20vw; }
}

@media (max-width: 767px) {
    div.report-stocktale-single-header div.pod { width: 100%; }
    div.report-stocktale-single-header::after { width: 50vw; }
}

div.report-stocktale-single-index div.pod .subtitle {
    color: var(--color-teal);
    font-family: var(--font-family-secundaria);
    margin-bottom: 15px;
}

div.report-stocktale-single-index div.pod ul { padding-left: 15px; }

div.report-stocktale-single-index div.pod ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 15px;
}

div.report-stocktale-single-index div.pod ul li::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-teal);
    position: absolute;
    top: .3em;
    left: 0;
}

div.report-stocktale-single-index div.pod ul li a {
    color: var(--color-teal);
    text-decoration: underline;
    font-family: var(--font-family-secundaria);
}

div.report-stocktale-single-index div.pod ul li a:hover { text-decoration: none; }
div.report-stocktale-single-subchapter { background: var(--color-clear); }
div.report-stocktale-single-subchapter div.pod { padding: 30px 0; }

div.report-stocktale-single-subchapter div.pod div.main {
    display: grid;
    grid-template-columns: 1fr min-content;
    gap: 30px;
}

div.report-stocktale-single-subchapter div.pod div.main h4 {
    color: var(--color-teal);
    cursor: pointer;
    font-family: var(--font-family-secundaria);
}

div.report-stocktale-single-subchapter div.pod div.main a {
    display: block;
    color: var(--color-principal);
    border: 1px solid var(--color-gris-azulado-claro);
    border-radius: 500px;
    padding: 5px 15px;
    text-align: center;
    width: 125px;
    font-family: var(--font-family-secundaria);
}

div.report-stocktale-single-subchapter div.pod div.main a:hover {
    background: var(--color-blue);
    color: var(--color-blanco);
}

div.report-stocktale-single-subchapter div.pod div.content {
    font-style: italic;
    display: none;
}

div.report-stocktale-single-subchapter div.pod.is-open div.content { display: block; }
div.report-stocktale-single-subchapter div.pod div.content .rte { margin-top: 30px; }
div.report-stocktale-single-subchapter div.pod div.content .botones { margin-top: 15px; font-style: normal; }
div.report-stocktale-single-subchapter div.pod div.content .botones * { margin-bottom: 0; display: inline-block; }
div.report-stocktale-single-subchapter div.pod div.content .botones *:hover { text-decoration: underline; }

div.report-stocktale-single-subchapter div.pod div.content a {
    display: inline-block;
    color: var(--color-teal);
    font-weight: 600;
    margin-right: 15px;
}

div.report-stocktale-single-subchapter div.pod div.content a:hover { text-decoration: underline; }

div.report-stocktale-responses h1 {
    color: var(--color-teal);
    font-family: var(--font-family-secundaria);
}

div.report-stocktale-responses div.pod {
    padding: 30px 0;
}

div.report-stocktale-responses div.pod div.main {
    display: grid;
    grid-template-columns: 1fr min-content;
    gap: 30px;
}

div.report-stocktale-responses div.pod div.main h4 {
    color: var(--color-teal);
    font-family: var(--font-family-secundaria);
    cursor: pointer;
}

div.report-stocktale-responses div.pod div.main div.item:last-child { white-space: nowrap; }

div.report-stocktale-responses div.pod div.main a {
    display: inline-block;
    color: var(--color-principal);
    border: 1px solid var(--color-gris-azulado-claro);
    border-radius: 500px;
    padding: 5px 15px;
    text-align: center;
    min-width: 125px;
    font-family: var(--font-family-secundaria);
}

div.report-stocktale-responses div.pod div.main a:nth-of-type(1) {
    background: var(--gradient-main);
    color: var(--color-blanco);
}

div.report-stocktale-responses div.pod div.main a:hover {
    background: var(--color-blue);
    color: var(--color-blanco);
}

div.report-stocktale-responses div.pod div.content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
    margin-top: 30px;
    display: none;
}

div.report-stocktale-responses div.pod.is-open div.content {
    display: grid;
}

div.report-stocktale-responses div.pod div.content div.item {
    background: var(--color-clear);
    padding: 15px;
    border-radius: 15px;
}

div.report-stocktale-responses div.pod div.content div.item .rte span:last-child {
    font-family: var(--font-family-secundaria);
    color: var(--color-teal);
    display: block;
    margin-top: 15px;
}

@media (max-width: 767px) {
    div.report-stocktale-responses div.pod div.main,
    div.report-stocktale-responses div.pod div.content { grid-template-columns: 1fr; gap: 15px; }
}

/* Home Modules
//--------------------------------------------------------------------- */
div.report-home-text-menu div.pod {
    display: grid;
    grid-template-columns: 1fr min-content;
    grid-gap: 90px;
}

div.report-home-text-menu div.pod div.menu a {
    display: block;
    white-space: nowrap;
    padding: 10px 15px;
    background: var(--color-blanco);
    border: 1px solid var(--color-gris-azulado-claro);
    border-radius: 200px;
    text-align: center;
    color: var(--color-principal);
    margin-bottom: 15px;
    font-family: var(--font-family-secundaria);
    min-width: 250px;
}

div.report-home-text-menu div.pod div.menu a:hover {
    background: var(--color-teal);
    color: var(--color-blanco);
}

@media (max-width: 1199px) { div.report-home-text-menu div.pod { grid-gap: 60px; } }

@media (max-width: 991px) {
    div.report-home-text-menu div.pod { grid-gap: 60px; }
    div.report-home-text-menu div.pod div.menu a { min-width: 200px; }
}

@media (max-width: 767px) {
    div.report-home-text-menu div.pod { grid-gap: 30px; }
    div.report-home-text-menu div.pod div.menu a { min-width: unset; }
}

@media (max-width: 575px) {
    div.report-home-text-menu div.pod { grid-template-columns: 1fr; }
    div.report-home-text-menu div.pod div.menu a { min-width: unset; }
}




div.report-home-people {
    background: var(--color-clear);
}

div.report-home-people .tagline {
    text-transform: uppercase;
    color: var(--color-teal);
    display: block;
    margin-bottom: 5px;
    font-family: var(--font-family-secundaria);
}

div.report-home-people .tagline.alt {
    margin-top: 30px;
}

/* ============================================================
   POD now contains ROWS (stack)
============================================================ */

div.report-home-people div.pod {
    /* stack rows vertically */
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 30px 0;

    /* column math (4-col grid) */
    --people-gap: 30px;
    --people-col-4: calc((100% - (var(--people-gap) * 3)) / 4);
    --people-col-2: calc((100% - (var(--people-gap) * 1)) / 2);
}

/* Each row is a grid by default */
div.report-home-people div.pod div.pod-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--people-gap);
}

/* Single-item row → flex center */
div.report-home-people div.pod div.pod-row.is-single {
    display: flex;
    justify-content: center;
}

/* The centered card must match exactly 1 normal column width */
div.report-home-people div.pod div.pod-row.is-single > div.item {
    width: var(--people-col-4);
}

/* Item styles (same as your original) */
div.report-home-people div.pod div.item {
    position: relative;
}

div.report-home-people div.pod div.item div.title {
    font-family: var(--font-family-secundaria);
    color: var(--color-blue);
    height: 30px;
    font-weight: 600;
}

div.report-home-people div.pod div.item div.img {
    padding-top: 125%;
    position: relative;
}

div.report-home-people div.pod div.item div.txt h5 {
    color: var(--color-teal);
    margin-top: 5px;
}

div.report-home-people div.pod div.item div.rte * {
    margin-bottom: 0;
}

div.report-home-people div.pod div.item a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* empty filler cells (for grid rows) */
div.report-home-people div.pod div.item.is-empty {
    pointer-events: none;
}

/* ============================================================
   Responsive
============================================================ */

@media (max-width: 991px) {
    div.report-home-people div.pod {
        gap: 15px;
        --people-gap: 15px;
    }
}

@media (max-width: 575px) {

    /* rows become 2 cols */
    div.report-home-people div.pod div.pod-row {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--people-gap);
    }

    /* centered single row matches 1 of 2 columns */
    div.report-home-people div.pod div.pod-row.is-single > div.item {
        width: var(--people-col-2);
    }
}




div.report-home-cards div.pod {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 45px;
    padding: 30px 0;
}

div.report-home-cards div.pod div.item {
    background: var(--gradient-main);
    color: var(--color-blanco);
    overflow: hidden;
    border-radius: 15px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas: 'txt img';
}

div.report-home-cards div.pod div.item div.txt {
    padding: 30px;
    display: flex;
    align-items: center;
    grid-area: txt;
}

div.report-home-cards div.pod div.item div.txt h4,
div.report-home-cards div.pod div.item div.txt span.subtitle { font-family: var(--font-family-secundaria); }

div.report-home-cards div.pod div.item div.txt .rte,
div.report-home-cards div.pod div.item div.txt .botones {
    margin-top: 15px;
}

div.report-home-cards div.pod div.item div.txt .botones a {
    font-family: var(--font-family-secundaria);
    color: var(--color-blanco);
    padding: 10px 15px;
    border: 1px solid var(--color-blanco);
    border-radius: 200px;
    display: inline-block;
    text-decoration: none;
}

div.report-home-cards div.pod div.item div.txt .botones a:hover {
    background: var(--color-blue);
    color: var(--color-blanco);
    border-color: var(--color-blue);
}

div.report-home-cards div.pod div.item div.txt a {
    text-decoration: underline;
    color: var(--color-blanco);
}

div.report-home-cards div.pod div.item div.txt a:hover { text-decoration: none; }

div.report-home-cards div.pod div.item div.img {
    position: relative;
    grid-area: img;
}

div.report-home-cards div.pod div.item.large {
    grid-column: 1 / 3;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'img txt';
}

@media (max-width: 1199px) {
    div.report-home-cards div.pod { gap: 30px; } 
}

@media (max-width: 991px) {
    div.report-home-cards div.pod div.item { grid-template-columns: 1fr; grid-template-areas: 'img' 'txt'; }
    div.report-home-cards div.pod div.item div.img { height: 125px; }
    div.report-home-cards div.pod div.item.large div.img { height: 100%; }
    div.report-home-cards div.pod div.item div.txt { padding: 15px; display: block; }
}

@media (max-width: 767px) {
    div.report-home-cards div.pod div.item { grid-column: 1 / 3; }
    div.report-home-cards div.pod div.item.large { grid-template-columns: 1fr; grid-template-areas: 'img' 'txt';}
    div.report-home-cards div.pod div.item.large div.img { height: 125px; } 
}
/* ============================================
   LIGHTBOX WRAPPER
============================================ */
.comment-lightbox {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 99999;
}
.comment-lightbox.active {
    display: block;
}

.clb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(3px);
}

/* ============================================
   MODAL (⚡ UPDATED FOR RESPONSIVE FIX)
============================================ */
.clb-modal {
    position: relative;
    width: 90%;
    max-width: 620px;
    margin: 50px auto;

    background: var(--color-blanco);
    border-radius: 14px;
    padding: 25px 35px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.25);

    /* NEW: Ensures content fits on small screens */
    max-height: 90vh;
    overflow-y: auto;
}

/* Optional: nicer scrollbar */
.clb-modal::-webkit-scrollbar {
    width: 8px;
}
.clb-modal::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.clb-modal::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
.clb-modal::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* ============================================
   CLOSE BUTTON
============================================ */
.clb-close-x {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 22px;
    color: var(--color-principal);
    cursor: pointer;
}

/* ============================================
   TITLE
============================================ */
.clb-title {
    font-size: 26px;
    margin-bottom: 18px;
    color: var(--color-dark-blue);
}

/* ============================================
   FORM INPUTS
============================================ */
.clb-label {
    display: block;
    margin-top: 12px;
    margin-bottom: 5px;
    font-size: 16px;
    color: var(--color-principal);
}

.clb-input,
.clb-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-gris-azulado-claro);
    border-radius: 6px;
    font-size: 16px;
}

/* ============================================
   SUBMIT BUTTON
============================================ */
.clb-submit {
    width: 100%;
    margin-top: 20px;
    background: var(--color-teal);
    color: var(--color-blanco);
    border: none;
    padding: 14px;
    font-size: 18px;
    border-radius: 6px;
    cursor: pointer;
}
.clb-submit:hover {
    background: var(--color-teal-2);
}

/* ============================================
   DROPZONE
============================================ */
.clb-dropzone {
    border: 2px dashed var(--color-teal);
    background: var(--color-clear-2);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    margin-top: 8px;
    border-radius: 6px;
    transition: 0.25s;
}
.clb-dropzone.dragover {
    border-color: var(--color-blue);
    background: var(--color-clear);
}

.clb-dropzone input {
    display: none;
}

.clb-file-list {
    margin-top: 10px;
    list-style: none;
    padding: 0;
}

.clb-file-list li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-clear);
}

/* ============================================
   SUCCESS BOX
============================================ */
.clb-success {
    display: none;
    text-align: center;
    padding: 40px 20px;
}
.clb-success h3 {
    color: var(--color-teal);
    margin-bottom: 10px;
}
.clb-success button {
    margin-top: 15px;
    padding: 10px 18px;
    border: none;
    background: var(--color-teal);
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
}

/* ============================================
   LOADER
============================================ */
.clb-loader {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(3px);
}
.clb-loader.active {
    display: block;
}
.clb-loader::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 48px; height: 48px;
    margin-left: -24px; margin-top: -24px;
    border: 4px solid var(--color-teal);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   MOBILE FIX
============================================ */
@media (max-width: 480px) {
    .clb-modal {
        padding: 20px;
        max-width: 95%;
    }

    .clb-title {
        font-size: 22px;
    }
}

/* ============================================================
   REPORT: PARTICIPANTS CTA (Scrolling avatars)
============================================================ */

div.report-home-participants-cta div.pod {
    padding: 30px 0;
}

div.report-home-participants-cta div.pod div.item.large {
    background: var(--gradient-main);
    color: var(--color-blanco);
    overflow: hidden;
    border-radius: 15px;
}

/* Scroller area */
div.report-home-participants-cta .cta-scroller {
    position: relative;
    padding: 18px 0;
    overflow: hidden;                 /* keep inside container */
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

/* Inner wrapper */
div.report-home-participants-cta .cta-scroller-inner {
    overflow: hidden;
}

/* Track (animated) */
div.report-home-participants-cta .cta-track {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    will-change: transform;
    animation: ctaScroll var(--cta-speed, 55s) linear infinite;
}

/* Pause on hover */
div.report-home-participants-cta .cta-scroller:hover .cta-track {
    animation-play-state: paused;
}

/* Avatar links */
div.report-home-participants-cta .cta-avatar {
    width: 150px;
    height: 150px;
    border-radius: 999px;
    overflow: hidden;
    display: block;
    border: 2px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.08);
    flex: 0 0 auto;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

div.report-home-participants-cta .cta-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

div.report-home-participants-cta .cta-avatar:hover {
    border-color: rgba(255,255,255,0.85);
}

/* Fade edges (so it looks premium) */
div.report-home-participants-cta .cta-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    pointer-events: none;
}

div.report-home-participants-cta .cta-fade.left {
    left: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.25), rgba(0,0,0,0));
}

div.report-home-participants-cta .cta-fade.right {
    right: 0;
    background: linear-gradient(to left, rgba(0,0,0,0.25), rgba(0,0,0,0));
}

/* Text area (reuse your card style) */
div.report-home-participants-cta div.item.large div.txt {
    padding: 24px 30px 30px;
}

div.report-home-participants-cta div.item.large div.txt h4,
div.report-home-participants-cta div.item.large div.txt span.subtitle {
    font-family: var(--font-family-secundaria);
}

div.report-home-participants-cta div.item.large div.txt .rte,
div.report-home-participants-cta div.item.large div.txt .botones {
    margin-top: 15px;
}

div.report-home-participants-cta div.item.large div.txt .botones a {
    font-family: var(--font-family-secundaria);
    color: var(--color-blanco);
    padding: 10px 15px;
    border: 1px solid var(--color-blanco);
    border-radius: 200px;
    display: inline-block;
    text-decoration: none;
}

div.report-home-participants-cta div.item.large div.txt .botones a:hover {
    background: var(--color-blue);
    color: var(--color-blanco);
    border-color: var(--color-blue);
}

/* Animation */
@keyframes ctaScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); } /* JS duplicates content so 50% loops clean */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    div.report-home-participants-cta .cta-track {
        animation: none;
    }
}

/* Responsive */
@media (max-width: 991px) {
    div.report-home-participants-cta .cta-scroller {
        padding: 14px 0;
    }
    div.report-home-participants-cta .cta-avatar {
        width: 120px;
        height: 120px;
    }
    div.report-home-participants-cta div.item.large div.txt {
        padding: 15px;
    }
}

@media (max-width: 575px) {
    div.report-home-participants-cta .cta-fade { width: 40px; }
    div.report-home-participants-cta .cta-avatar {
        width: 100px;
        height: 100px;
    }
}