/* ──────────────────────────────
   Variables de tema ESREDA
   ────────────────────────────── */

:root{
    /* Colores base */
    --esreda-accent:           #2d6cdf;
    --esreda-accent-alt:       #00a6ff;
    --esreda-accent-alt-dark:  #0284d4;
    --esreda-brand-dark:       #044569;
    --esreda-brand-light:      #3384A4;

    --esreda-text:             #1f2a37;
    --esreda-text-soft:        #2b3a42;
    --esreda-muted:            #6b7a90;

    --esreda-gray-111:         #111111;
    --esreda-gray-444:         #444444;
    --esreda-gray-555:         #555555;
    --esreda-gray-666:         #666666;

    --esreda-border:           #e6edf4;
    --esreda-card-border:      #e6eef2;
    --esreda-tabs-border:      #e3e6ea;

    --esreda-soft:             #f7fafc;
    --esreda-white:            #ffffff;
    --esreda-item-bg:          #ffffff6e;

    --esreda-table-head-bg:    #f5f9ff;
    --esreda-table-stripe-bg:  #fbfdff;

    /* Estados */
    --esreda-success-bg:       #e7f7ee;
    --esreda-success-border:   #59d289;;
    --esreda-error-bg:         #fde7e7;
    --esreda-error-border:     #c21c1c;

    /* Next event */
    --esreda-next-label:       #F7FAFC;
    --esreda-next-title:       #BFDEFF;
    --esreda-next-meta:        #91EED8;

    /* Extras */
    --esreda-shadow-card:      0 2px 8px rgba(0,0,0,.04);
    --esreda-code-bg:          #0b102614;
    --esreda-link-hover:       #0279c5;

    /* Radios */
    --esreda-radius-lg:        16px;
    --esreda-radius-md:        12px;
    --esreda-radius-sm:        10px;
    --esreda-radius-xs:        8px;
    --esreda-radius-pill:      999px;
}

/* ──────────────────────────────
   Layout tarjetas / mensajes
   ────────────────────────────── */

.esreda-grid{
    display:grid;
    gap:1.25rem;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}

.esreda-card{
    background:var(--esreda-white);
    border:1px solid var(--esreda-card-border);
    border-radius:var(--esreda-radius-lg);
    overflow:hidden;
    box-shadow:var(--esreda-shadow-card);
    transition:transform .2s ease;
}

.esreda-card:hover{
    transform:translateY(-3px);
}

.esreda-thumb img{
    width:100%;
    display:block;
    aspect-ratio:16/9;
    object-fit:cover;
}

.esreda-card-body{
    padding:16px 16px 18px;
}

.esreda-title{
    margin:0 0 6px;
    font-size:1.05rem;
    line-height:1.25;
    color:var(--esreda-brand-dark);
}

.esreda-meta{
    font-size:.9rem;
    color:var(--esreda-brand-light);
    margin-bottom:6px;
}

.esreda-excerpt{
    color:var(--esreda-text-soft);
    font-size:.95rem;
}

/* Mensajes OK / error */

.esreda-ok,
.esreda-error{
    padding:.6rem .8rem;
    margin:.6rem 0;
}

.esreda-ok{
    background:var(--esreda-success-bg);
    border-left:4px solid var(--esreda-success-border);
}

.esreda-error{
    background:var(--esreda-error-bg);
    border-left:4px solid var(--esreda-error-border);
}

/* Grid simple 2 columnas */

.grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

/* ──────────────────────────────
   Contenido single ESREDA
   ────────────────────────────── */

.single-esreda_seminar .entry-content,
.single-esreda_webinar .entry-content{
    color:var(--esreda-text);
    line-height:1.7;
    font-size:17px;
}

/* Titulares dentro del contenido */

.single-esreda_seminar .entry-content h2,
.single-esreda_webinar .entry-content h2{
    margin:1.6em 0 .6em;
}

.single-esreda_seminar .entry-content h3,
.single-esreda_webinar .entry-content h3{
    margin:1.3em 0 .5em;
}

/* Párrafos y listas */

.single-esreda_* .entry-content p,
.single-esreda_* .entry-content li{
    max-width:80ch;
}

.single-esreda_seminar .entry-content ul,
.single-esreda_webinar .entry-content ul,
.single-esreda_seminar .entry-content ol,
.single-esreda_webinar .entry-content ol{
    padding-left:1.2em;
    margin:.6em 0 1em;
}

.single-esreda_seminar .entry-content li+li,
.single-esreda_webinar .entry-content li+li{
    margin-top:.35em;
}

/* Imágenes */

.single-esreda_seminar .entry-content .wp-block-image img,
.single-esreda_webinar .entry-content .wp-block-image img{
    border-radius:var(--esreda-radius-md);
}

.single-esreda_seminar .entry-content .wp-block-image figcaption,
.single-esreda_webinar .entry-content .wp-block-image figcaption{
    color:var(--esreda-muted);
    font-size:.9em;
    text-align:center;
    margin-top:.4rem;
}

/* Citas */

.single-esreda_seminar .entry-content .wp-block-quote,
.single-esreda_webinar .entry-content .wp-block-quote{
    border-left:4px solid var(--esreda-accent);
    background:var(--esreda-soft);
    padding:.9rem 1rem .9rem 1.2rem;
    border-radius:var(--esreda-radius-xs);
    color:var(--esreda-text);
}

.single-esreda_seminar .entry-content .wp-block-quote cite,
.single-esreda_webinar .entry-content .wp-block-quote cite{
    display:block;
    margin-top:.5rem;
    color:var(--esreda-muted);
    font-style:normal;
}

/* Separadores */

.single-esreda_seminar .entry-content .wp-block-separator,
.single-esreda_webinar .entry-content .wp-block-separator{
    border-color:var(--esreda-border);
    opacity:1;
    margin:2rem 0;
}

/* Botones Gutenberg */

.single-esreda_seminar .entry-content .wp-block-button__link,
.single-esreda_webinar .entry-content .wp-block-button__link{
    background:var(--esreda-accent);
    color:var(--esreda-white);
    border-radius:var(--esreda-radius-pill);
    padding:.6rem 1.1rem;
    box-shadow:none;
    text-decoration:none;
}

.single-esreda_seminar .entry-content .is-style-outline .wp-block-button__link,
.single-esreda_webinar .entry-content .is-style-outline .wp-block-button__link{
    background:transparent;
    color:var(--esreda-accent);
    border:2px solid var(--esreda-accent);
}

.single-esreda_seminar .entry-content .wp-block-button__link:hover,
.single-esreda_webinar .entry-content .wp-block-button__link:hover{
    filter:brightness(.92);
}

/* Archivos (wp-block-file) */

.single-esreda_seminar .entry-content .wp-block-file,
.single-esreda_webinar .entry-content .wp-block-file{
    display:flex;
    align-items:center;
    gap:.75rem;
    flex-wrap:wrap;
    padding:.8rem 1rem;
    border:1px solid var(--esreda-border);
    border-radius:var(--esreda-radius-sm);
    background:var(--esreda-white);
}

.single-esreda_seminar .entry-content .wp-block-file .wp-block-file__button,
.single-esreda_webinar .entry-content .wp-block-file .wp-block-file__button{
    background:var(--esreda-accent);
    color:var(--esreda-white);
    border-radius:8px;
    padding:.45rem .8rem;
}

/* Código */

.single-esreda_seminar .entry-content .wp-block-code,
.single-esreda_webinar .entry-content .wp-block-code{
    border:1px solid var(--esreda-border);
    background:var(--esreda-code-bg);
    border-radius:var(--esreda-radius-sm);
    padding:12px;
}

.single-esreda_seminar .entry-content pre code,
.single-esreda_webinar .entry-content pre code{
    font-size:.95em;
}

/* Tablas Gutenberg */

.single-esreda_seminar .entry-content .wp-block-table,
.single-esreda_webinar .entry-content .wp-block-table{
    overflow-x:auto;
}

.single-esreda_seminar .entry-content .wp-block-table table,
.single-esreda_webinar .entry-content .wp-block-table table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    border:1px solid var(--esreda-border);
    border-radius:var(--esreda-radius-md);
    overflow:hidden;
    background:var(--esreda-white);
}

.single-esreda_seminar .entry-content .wp-block-table thead th,
.single-esreda_webinar .entry-content .wp-block-table thead th{
    background:var(--esreda-table-head-bg);
    color:#0f3a57;
    font-weight:600;
    padding:12px 14px;
    border-bottom:1px solid var(--esreda-border);
}

.single-esreda_seminar .entry-content .wp-block-table td,
.single-esreda_webinar .entry-content .wp-block-table td{
    padding:12px 14px;
    border-bottom:1px solid var(--esreda-border);
    vertical-align:top;
}

.single-esreda_seminar .entry-content .wp-block-table tr:last-child td,
.single-esreda_webinar .entry-content .wp-block-table tr:last-child td{
    border-bottom:0;
}

.single-esreda_seminar .entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) td,
.single-esreda_webinar .entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) td{
    background:var(--esreda-table-stripe-bg);
}

.single-esreda_seminar .entry-content .wp-block-table figcaption,
.single-esreda_webinar .entry-content .wp-block-table figcaption{
    font-size:.85em;
    color:var(--esreda-muted);
    margin-top:.5rem;
    text-align:left;
}

/* Galería */

.single-esreda_seminar .entry-content .wp-block-gallery,
.single-esreda_webinar .entry-content .wp-block-gallery{
    gap:12px;
}

.single-esreda_seminar .entry-content .wp-block-gallery .wp-block-image img,
.single-esreda_webinar .entry-content .wp-block-gallery .wp-block-image img{
    border-radius:var(--esreda-radius-sm);
}

/* Embeds */

.single-esreda_seminar .entry-content .wp-block-embed iframe,
.single-esreda_webinar .entry-content .wp-block-embed iframe{
    border-radius:var(--esreda-radius-md);
    overflow:hidden;
    box-shadow:0 1px 0 rgba(0,0,0,.02);
}

/* ──────────────────────────────
   WHEN / WHERE del shortcode
   ────────────────────────────── */

.esreda-kv{
    margin:1rem 0 1.2rem;
    font-size:.9rem;
    line-height:1.6;
    padding:15px 30px;
}

.esreda-kv .row{
    display:flex;
    margin:.4rem;
    align-items:center;
    padding:0;
}

.esreda-kv .key{
    display:inline-flex;
    align-items:center;
    margin-right:.7rem;
    color:var(--esreda-soft);
    font-weight:700;
    letter-spacing:.06em;
    font-size:.9rem;
    text-transform:uppercase;
}

.esreda-kv .val{
    display:inline-block;
    min-width:200px;
    color:var(--esreda-next-title);
}

.esreda-badge{
    display:inline-block;
    margin-left:.5rem;
    padding:2px 8px;
    border-radius:12px;
    background:var(--esreda-accent);
    color:var(--esreda-white);
    font-size:11px;
    line-height:inherit;
    vertical-align:middle;
}

.esreda-kv .esreda-actions{
    margin-top:1rem;
}

/* Iconos dentro de WHEN / WHERE */

.esreda-kv .key .esreda-icon{
    width:1em;
    height:1em;
    margin-right:.35rem;
    display:inline-block;
    fill:currentColor;
    vertical-align:-0.15em;
}

/* ──────────────────────────────
   Tabs y listados “Latest”
   ────────────────────────────── */

.esreda-tabs{
    margin:1.5rem 0 2rem;
    font-family:inherit;
    color:var(--esreda-gray-111);
}

/* Botonera */

.esreda-tabs__nav{
    display:flex;
    flex-wrap:wrap;
    border-bottom:1px solid var(--esreda-tabs-border);
    margin-bottom:1rem;
}

.esreda-tabs__btn{
    border:0;
    background:transparent;
    padding:.75rem 1.5rem;
    cursor:pointer;
    font-size:.95rem;
    font-weight:600;
    color:var(--esreda-gray-555);
    border-bottom:3px solid transparent;
    transition:all .15s ease-in-out;
}

.esreda-tabs__btn:hover{
    color:var(--esreda-link-hover);
}

.esreda-tabs__btn.is-active{
    color:var(--esreda-link-hover);
    border-bottom-color:var(--esreda-accent-alt);
}

/* Paneles */

.esreda-tabs__panels{
    margin-top:.5rem;
}

.esreda-tabs__panel{
    display:none;
}

.esreda-tabs__panel.is-active{
    display:block;
}

/* Listado */

.esreda-latest{
    padding:.25rem 0 .5rem;
}

.esreda-latest-list{
    list-style:none!important;
    margin:0;
    padding:0!important;
}

.esreda-item{
    margin:0 0 1rem;
    background:var(--esreda-item-bg);
    padding:.5rem 1.5rem;
}

.esreda-item:last-child{
    border-bottom:none;
}

/* Bloque clicable */

.esreda-item__link{
    display:block;
    padding:.35rem .25rem .35rem 0;
    text-decoration:none;
    color:inherit;
    transition:background-color .12s ease-in-out;
}

.esreda-item__link:hover{
    background-color:rgba(0,0,0,.02);
}

/* Título */

.esreda-item__title{
    margin:0 0 .1rem;
    font-size:.97rem;
    font-weight:600;
}

/* Línea superior: tag + location */

.esreda-item__top{
    font-size:.82rem;
    color:var(--esreda-gray-666);
    margin-bottom:.1rem;
}

/* Iconos + meta */

.esreda-item .esreda-icon{
    width:.9rem;
    height:.9rem;
    display:inline-block;
}

.esreda-item .esreda-icon path{
    fill:currentColor;
}

.esreda-item .esreda-meta-part{
    display:inline-flex;
    align-items:center;
    gap:.25em;
}

/* Tag base (aspecto general) */

.esreda-tag{
    border-radius:var(--esreda-radius-pill);
    font-weight:600;
    text-transform:uppercase;
    background:#4488ae;
    color:var(--esreda-white);
}

/* Ajustes de tag en listados “latest” */

.esreda-latest .esreda-tag{
    display:inline-block;
    padding:.05rem .4rem;
    font-size:.6rem;
    margin-right:.25rem;
}

.esreda-tag--proceeding{
    background:#4488ae;
    color:var(--esreda-white);
}

.esreda-tag--registration{
    background-color:#43bd73;
    color:var(--esreda-white);
}

/* Meta + excerpt */

.esreda-item__meta{
    font-size:.8rem;
    color:var(--esreda-gray-666);
}

.esreda-item__meta--datetime{
    margin-top:.1rem;
}

.esreda-item__excerpt{
    font-size:.86rem;
    color:var(--esreda-gray-444);
    margin:.1rem 0 0;
}

/* Enlace archivo completo */

.esreda-archive-link{
    margin-top:.75rem;
    text-align:right;
}

/* Botón genérico ESREDA */

.esreda-btn{
    display:inline-block;
    padding:.5rem 1.2rem!important;
    border-width:5px!important;
    border-color:rgba(0,0,0,0);
    border-radius:2px;
    font-size:.8rem;
    font-weight:700;
    text-transform:uppercase!important;
    letter-spacing:.03em;
    text-decoration:none;
    background:var(--esreda-accent-alt);
    color:var(--esreda-white);
}

.esreda-btn:hover{
    background:var(--esreda-accent-alt-dark);
    color:var(--esreda-white);
}

/* Paginación */

.esreda-tabs__pagination{
    margin-top:1rem;
    text-align:right;
}

.esreda-tabs__pagination .page-numbers{
    display:inline-block;
    padding:.2rem .45rem;
    margin-left:.15rem;
    font-size:.8rem;
    text-decoration:none;
    border-radius:2px;
    border:1px solid transparent;
    color:var(--esreda-gray-555);
}

.esreda-tabs__pagination .page-numbers.current{
    background:var(--esreda-accent-alt);
    color:var(--esreda-white);
    border-color:var(--esreda-accent-alt);
}

.esreda-tabs__pagination .page-numbers:hover:not(.current){
    border-color:#cfd6dd;
}

/* Variantes upcoming / publications */

.esreda-latest--upcoming .esreda-tag,
.esreda-latest--publications .esreda-tag{
    vertical-align:text-top;
}

.esreda-latest--upcoming .esreda-item,
.esreda-latest--publications .esreda-item{
    margin:0;
    background:var(--esreda-item-bg);
    padding:.5rem 1.5rem 0;
}

.esreda-latest--upcoming .esreda-item h4,
.esreda-latest--publications .esreda-item h4{
    margin-bottom:0;
    padding-bottom:0;
    font-size:.9rem;
}

/* Ajustes finos de línea */

.esreda-latest .esreda-item h4{
    line-height:inherit;
}

.esreda-latest .esreda-item .esreda-tag{
    line-height:1.1rem;
}

.esreda-latest .esreda-item__top .esreda-tag{
    vertical-align:4px !important;
}

/* ──────────────────────────────
   Ajustes globales WP singular
   ────────────────────────────── */

.wp-singular h3,
.wp-singular h4,
.wp-singular h5{
    margin-top:1rem;
    font-weight:bold;
}

.wp-singular .wp-block-table{
    margin-bottom:2rem;
}

/* PDFs incrustados como bloque de archivo */

.wp-block-file .fluid-width-video-wrapper{
    position:static!important;
    padding-top:0!important;
    height:auto!important;
}

.wp-block-file .fluid-width-video-wrapper>object,
.wp-block-file .fluid-width-video-wrapper>embed,
.wp-block-file .fluid-width-video-wrapper>iframe{
    position:static!important;
    top:auto!important;
    left:auto!important;
}

/* ──────────────────────────────
   Next Event
   ────────────────────────────── */

.esreda-next-event{
    padding:1rem;
}

/* Cabecera en una sola línea: NEXT EVENT + tags + título */
.esreda-next-event__headline{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.5rem;
}

/* NEXT EVENT */
.esreda-next-event__label{
    font-size:1rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--esreda-next-label);
}

/* Tag de tipo (Seminar / Webinar) solo en bloque next-event */
.esreda-next-event .esreda-tag{
    display:inline-flex;
    align-items:center;
    padding:0 .4rem;
    font-size:.7rem;
    line-height: 17px;
}

/* Título en la MISMA línea que NEXT EVENT + tags */
.esreda-next-event__title{
    display:inline;
    font-size:1.5rem;
    font-weight:600;
    color:var(--esreda-next-title);
    text-decoration:none;
    margin-left:.4rem;
}

.esreda-next-event__title:hover,
.esreda-next-event__title:focus{
    text-decoration:underline;
}

/* Bloque de metadatos (cuando, donde, speakers) */
.esreda-next-event__meta{
    margin-top:.5rem;
    color:var(--esreda-next-meta);
    font-size:.9rem;
    margin-left:.4rem;
}

/* Fila individual de meta con icono */
.esreda-next-event__meta-row{
    display:flex;
    align-items:flex-start;
    gap:.4rem;
    margin-bottom:.15rem;
}

/* Iconos */
.esreda-next-event__meta-row .esreda-icon{
    width:1rem;
    height:1rem;
    flex-shrink:0;
    fill:currentColor;
}

.esreda-next-event__meta-text{
    line-height:1.3;
}

/* Contenedor del contador */
.esreda-next-event__countdown-wrapper{
    margin-top:.75rem;
}

/* Contador numérico */
.esreda-next-event__countdown{
    display:inline-flex;
    align-items:baseline;
    gap:.4rem;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:1.8rem;
    font-weight:700;
    color:var(--esreda-white);
}

/* Segmentos numéricos */
.esreda-countdown__segment{
    width:60px;
    text-align:center;
}

/* Labels Days / Hours / Minutes / Seconds debajo del contador */
.esreda-next-event__countdown-labels{
    display:flex;
    justify-content:flex-start;
    gap:1.1rem;
    margin-top:.2rem;
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--esreda-white);
}

/* Cada label alineado con su número */
.esreda-countdown__label{
    width:64px;
    text-align:center;
}

/* Estado vacío (sin próximos eventos) */
.esreda-next-event--empty{
    padding:1.5rem 0;
    font-size:.95rem;
}

/* ──────────────────────────────
   Responsive global
   ────────────────────────────── */

/* Móviles pequeños */
@media (max-width:480px){
    .esreda-card-body{
        padding:12px 12px 14px;
    }

    .esreda-item{
        padding:.5rem 1rem;
    }

    .esreda-tabs__btn{
        padding:.5rem .75rem;
        font-size:.8rem;
    }

    .esreda-next-event__countdown{
        font-size:1.2rem;
    }

    .esreda-countdown__segment,
    .esreda-countdown__label{
        width:48px;
    }
}

/* Hasta tablet pequeña */
@media (max-width:640px){
    .grid-2{
        grid-template-columns:1fr;
    }
}

/* Tablet / viewport medio */
@media (max-width:767px){
    /* Tablas con scroll horizontal mínimo */
    .single-esreda_seminar .entry-content .wp-block-table table,
    .single-esreda_webinar .entry-content .wp-block-table table{
        min-width:560px;
    }

    /* Tabs */
    .esreda-tabs__nav{
        overflow-x:auto;
        white-space:nowrap;
    }

    .esreda-tabs__btn{
        padding:.6rem 1rem;
        font-size:.85rem;
    }

    .esreda-archive-link{
        text-align:left;
        margin-top:.5rem;
    }

    /* Next event se apila vertical */
    .esreda-next-event{
        padding:.75rem;
    }

    .esreda-next-event__headline{
        flex-direction:column;
        align-items:flex-start;
    }

    .esreda-next-event__title{
        display:block;
        margin-left:0;
        margin-top:.25rem;
        font-size:1.25rem;
    }

    .esreda-next-event__countdown{
        font-size:1.4rem;
    }
}

/* -----------------------------
   UPCOMING EVENTS MARQUEE
------------------------------ */

.esreda-marquee{
    --esreda-marquee-gap: 28px;
    --esreda-marquee-speed: 55; /* px/seg (más alto = más rápido) */

    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
}

.esreda-marquee__viewport{
    width: 100%;
    overflow: hidden;
}

.esreda-marquee__track{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--esreda-marquee-gap);
    width: max-content;
    white-space: nowrap;
    will-change: transform;
    transform: translate3d(0,0,0);
}

.esreda-marquee__item{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
}

.esreda-marquee__link{
    text-decoration: none;
    color: rgba(255,255,255,.92);
    font-weight: 700;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
}

.esreda-marquee__date{
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    color: rgba(255,255,255,.78);
}

.esreda-marquee__title{
    font-size: 14px;
    font-weight: 800;
    color: rgba(255,255,255,.92);
}

.esreda-marquee__link:hover .esreda-marquee__title{
    text-decoration: underline;
    text-decoration-color: #2EA3F2;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* separador opcional “·” */
.esreda-marquee__sep{
    opacity: .25;
    color: rgba(255,255,255,.85);
}

/* Si el usuario tiene reduce motion, no animamos */
@media (prefers-reduced-motion: reduce){
    .esreda-marquee__track{ transform: none !important; }
}

/* ──────────────────────────────
   PROJECT GROUP ORG CHART (FLEX)
   ────────────────────────────── */

.esreda-orgchart{
    margin: 14px 0 28px;
}

/* h3 centrado */
.esreda-orgchart .esreda-org-title{
    margin: 35px 0 8px;
    font-size: 1.7rem;
    line-height: 1.2;
    font-weight: 800;
    color: rgba(255,255,255,.92);
    text-align: center;
    width: 100%;
    text-decoration: underline;
    text-decoration-color: currentcolor;
    text-decoration-thickness: auto;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
    text-decoration-color: #2ea3f2;
}

/* Flex: leaders + members (máx 6 por fila en desktop) */
.esreda-org-grid,
.esreda-org-grid.esreda-org-grid--leaders,
.esreda-org-grid.esreda-org-grid--members{
    --esreda-org-card: 200px;
    --esreda-org-gap: 16px;

    display:flex !important;
    flex-wrap:wrap;
    justify-content:center !important;
    align-items:flex-start;
    gap:var(--esreda-org-gap);

    width:100%;
    margin-left:auto !important;
    margin-right:auto !important;

    max-width:calc(6 * var(--esreda-org-card) + 5 * var(--esreda-org-gap));
}

/* Tablet: 3 por fila */
@media (max-width: 980px){
    .esreda-org-grid,
    .esreda-org-grid.esreda-org-grid--leaders,
    .esreda-org-grid.esreda-org-grid--members{
        max-width:calc(3 * var(--esreda-org-card) + 2 * var(--esreda-org-gap));
    }
}

/* Móvil: 2 por fila aprox */
@media (max-width: 560px){
    .esreda-org-grid,
    .esreda-org-grid.esreda-org-grid--leaders,
    .esreda-org-grid.esreda-org-grid--members{
        --esreda-org-card: 46vw;
        max-width:100%;
    }
}

/* Person card */
.esreda-org-person{
    width:var(--esreda-org-card);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    text-decoration:none;
    border-radius:14px;
    padding:5px 5px 5px;
    background:transparent;
    border:0;
    box-shadow:none;
    transition:transform .18s ease, filter .18s ease;
    outline:none;
}

.esreda-org-person:hover{
    transform:translateY(-2px);
    filter:brightness(1.05);
}

.esreda-org-person:focus{
    box-shadow:0 0 0 3px rgba(255,255,255,.12);
}

/* Avatar */
.esreda-org-avatar{
    width:68px;
    height:68px;
    margin:0 0 10px;
    border-radius:999px;
    overflow:hidden;
    display:block;

    background:rgba(255,255,255,.06);
    border:2px solid rgba(255,255,255,.10);
}

.esreda-org-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* Name */
.esreda-org-name{
    display:block;
    font-weight:800;
    font-size:14px;
    line-height:1.25;
    color:rgba(255,255,255,.92);
    text-shadow:0 1px 0 rgba(0,0,0,.25);
}

/* Meta: flag + organization */
.esreda-org-meta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:6px;
    max-width:100%;
}

/* Flag (sin círculo) */
.esreda-org-flag{
    order:0;
    display:inline-block;
    line-height:1;
    font-size:14px;
    transform:translateY(-0.03em);
    user-select:none;
}

/* Organization */
.esreda-org-org{
    order:1;
    display:inline-block;
    font-size:12px;
    line-height:1.25;
    color:rgba(255,255,255,.78);
    margin:0;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-shadow:0 1px 0 rgba(0,0,0,.25);
}

/* Socials */
.esreda-org-socials{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:10px;
}

.esreda-social{
    width:28px;
    height:28px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;

    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.12);
    transition:transform .15s ease, background-color .15s ease;
}

.esreda-social:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,.16);
}

.esreda-social__icon{
    display:inline-flex;
    width:16px;
    height:16px;
    opacity:.95;
}

.esreda-social__icon svg{
    width:16px;
    height:16px;
    display:block;
}

.esreda-social__icon svg path{
    fill:rgba(255,255,255,.92);
}
/* Añadir collaborators al mismo bloque flex que leaders/members */
.esreda-org-grid.esreda-org-grid--collaborators{
    --esreda-org-card: 200px;
    --esreda-org-gap: 16px;

    display:flex !important;
    flex-wrap:wrap;
    justify-content:center !important;
    align-items:flex-start;
    gap:var(--esreda-org-gap);

    width:100%;
    margin-left:auto !important;
    margin-right:auto !important;

    max-width:calc(6 * var(--esreda-org-card) + 5 * var(--esreda-org-gap));
}

@media (max-width: 980px){
    .esreda-org-grid.esreda-org-grid--collaborators{
        max-width:calc(3 * var(--esreda-org-card) + 2 * var(--esreda-org-gap));
    }
}

@media (max-width: 560px){
    .esreda-org-grid.esreda-org-grid--collaborators{
        --esreda-org-card: 46vw;
        max-width:100%;
    }
}

/*********************************************************************************************************************/
/* ──────────────────────────────
   NEURONET (Project Groups) - layout thumb 100%
   ────────────────────────────── */
.esreda-neuronet--flex{
    position: relative;
    width: 100%;
    min-height: 520px;
    background: transparent;
    border: 0;
    overflow: hidden;
    border-radius: 18px;
}

.esreda-neuronet--flex .esreda-neuronet-canvas{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .9;
}

.esreda-neuronet-nodes--flex{
    --esreda-neuronet-gap: 32px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--esreda-neuronet-gap);
    padding: 22px 0 26px;
}

.esreda-neuronet-node--card{
    box-sizing: border-box;

    /* ✅ 3 por fila pero más grandes */
    flex: 0 1 calc((100% - (var(--esreda-neuronet-gap) * 2)) / 3);
    max-width: 560px;  /* ✅ más grande */
    min-width: 320px;  /* ✅ más grande */

    text-decoration: none;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.04);
    overflow: hidden;

    padding: 0;
    display: flex;
    flex-direction: column;

    transition: transform .18s ease, border-color .18s ease, filter .18s ease;
    will-change: transform;
}

.esreda-neuronet-node--card:hover{
    transform: translateY(-2px);
    border-color: rgba(46,163,242,.55);
    filter: brightness(1.06);
}

.esreda-neuronet-node--card:focus{
    outline: none;
    box-shadow: 0 0 0 3px rgba(46,163,242,.25);
}

/* Thumb 100% (más alto) */
.esreda-neuronet-node-thumb{
    width: 100%;
    height: 190px;
    display: block;
    overflow: hidden;
    background: rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.esreda-neuronet-node-thumb img{
    width: 100%;
    height: 100%;
    display: block;
    background-color: #ffffffe5;
    object-fit: contain;
    object-position: center;
}

.esreda-neuronet-node-body{
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.esreda-neuronet-node-title{
    font-weight: 900;
    font-size: 16px;
    line-height: 1.25;
    color: rgba(255,255,255,.95);
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
    text-decoration: underline;
    text-decoration-color: #2EA3F2;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    white-space: normal;
    overflow: visible;
    display: none;
}

.esreda-neuronet-node-brief{
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255,255,255,.82);
    text-shadow: 0 1px 0 rgba(0,0,0,.25);

    /* ✅ NUNCA cortar */
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    white-space: normal;
}

/* Tablet */
@media (max-width: 980px){
    .esreda-neuronet-node--card{
        flex-basis: calc((100% - var(--esreda-neuronet-gap)) / 2);
        min-width: 300px;
        max-width: 620px;
    }
    .esreda-neuronet-node-thumb{
        height: 170px;
    }
}

/* Móvil */
@media (max-width: 560px){
    .esreda-neuronet-nodes--flex{
        padding: 16px 0 20px;
        --esreda-neuronet-gap: 18px;
    }
    .esreda-neuronet-node--card{
        flex-basis: 100%;
        min-width: 0;
        max-width: 620px;
    }
    .esreda-neuronet-node-thumb{
        height: 150px;
    }
}
/*********************************************************************************************************************/
/* ──────────────────────────────
   PUBLICATION BOOK TABLE
   ────────────────────────────── */
.esreda-pub-table{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.esreda-pub-row{
    display:grid;
    grid-template-columns: 160px 1fr 200px; /* ✅ imagen más grande + botón más ancho */
    gap:18px;
    padding:16px;
    border:1px solid rgba(0,0,0,.12);
    border-radius:10px;
    background:#fff;

    /* ✅ NO uses align-items aquí porque centraría también el texto.
       Vamos a centrar por columnas (thumb + action) */
}

.esreda-pub-thumb{
    display:flex;
    align-items:center;
    justify-content:center;
}

.esreda-pub-thumb-img{
    max-width:160px;
    height:auto;
    border-radius:10px;
    display:block;
}

.esreda-pub-thumb-placeholder{
    width:160px;
    height:160px;
    border-radius:10px;
    background:rgba(0,0,0,.06);
}

.esreda-pub-main{
    padding: 5px;
    align-self:start; /* ✅ texto arriba */
}

.esreda-pub-title{
    margin:0 0 10px 0;
    font-size:18px;
    line-height:1.2;
}

.esreda-pub-synopsis,
.esreda-pub-toc{
    font-size:.8rem;
    line-height:1.55;
}

.esreda-pub-toc{
    margin-top: 10px;
}

.esreda-pub-label{
    font-weight:600;
    margin:10px 0 6px 0;
    font-size:13px;
}

.esreda-pub-action{
    display:flex;
    align-items:center;     /* ✅ centra vertical */
    justify-content:flex-end;
}

.esreda-pub-btn{
    display:inline-block;
    text-decoration:none;
    padding:11px 16px;
    border-radius:9px;
    border:1px solid rgba(0,0,0,.15);
    font-weight:600;
    font-size:14px;
    white-space:nowrap;
}

.esreda-pub-btn:hover{
    filter:brightness(0.98);
}

.esreda-pub-btn-disabled{
    opacity:.5;
    cursor:not-allowed;
}

/* ✅ Responsive */
@media (max-width: 780px){
    .esreda-pub-row{
        grid-template-columns: 130px 1fr; /* imagen grande pero adaptada */
    }

    .esreda-pub-thumb-img,
    .esreda-pub-thumb-placeholder{
        width:130px;
        height:130px;
    }

    .esreda-pub-action{
        grid-column:1 / -1;
        justify-content:flex-start;
    }
}
/* ===== ESReDA Publications: Tabs / Button bar ===== */
.esreda-pub-tabs{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 0 0 18px 0;
    padding: 0;
}

.esreda-pub-tab{
    appearance: none;
    border: 1px solid rgba(0,0,0,.15);
    background: #fff;
    color: inherit;
    padding: 10px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
    user-select: none;
}

.esreda-pub-tab:hover{
    border-color: rgba(0,0,0,.28);
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    transform: translateY(-1px);
}

.esreda-pub-tab:active{
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(0,0,0,.06);
}

.esreda-pub-tab.is-active{
    background: #044569; /* cambia si quieres alinearlo con tu paleta */
    border-color: #044569;
    color: #fff;
    box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

.esreda-pub-tab:focus{
    outline: none;
}

.esreda-pub-tab:focus-visible{
    outline: 3px solid rgba(4, 69, 105, .35);
    outline-offset: 2px;
}

/* Opcional: si hay muchos tabs, que no “rompan” feo */
.esreda-pub-tabs{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.esreda-pub-tabs::-webkit-scrollbar{
    height: 10px;
}

.esreda-pub-tabs::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.15);
    border-radius: 999px;
}

.esreda-pub-tabs::-webkit-scrollbar-track{
    background: transparent;
}

/*********************************************************************************************************************/
/* ──────────────────────────────
   ESREDA Albums – Modern single-piece layout (no cards)
   ────────────────────────────── */

.esreda-albums {
    --esreda-accent: #00AAFF;
    --esreda-text: rgba(0, 0, 0, .86);
    --esreda-muted: rgba(0, 0, 0, .58);
    --esreda-line: rgba(0, 0, 0, .10);
    --esreda-line-2: rgba(0, 0, 0, .08);
    --esreda-bg: rgba(0, 0, 0, .02);

    color: var(--esreda-text);
}

/* Año: headline + subrayado color */
.esreda-albums__year {
    margin: 34px 0 16px;
    padding: 0 0 10px;
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: .2px;
    border-bottom: 3px solid var(--esreda-accent);
}

/* Bloque album: “todo en una pieza” */
.esreda-album {
    padding: 16px 0 22px;
}

.esreda-album:first-of-type {
    padding-top: 6px;
}

.esreda-album__head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 14px;
    align-items: baseline;
    margin: 0 0 12px;
}

.esreda-album__title {
    margin: 0;
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: .15px;
}

.esreda-album__date {
    font-size: .95rem;
    color: var(--esreda-muted);
    white-space: nowrap;
}

/* =========================================================
   Carousel (modern)
   ========================================================= */

.esreda-carousel {
    position: relative;
}

/* Botones flotantes, sin “caja” */
.esreda-carousel__btn {
    appearance: none;
    border: 0;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(0,0,0,.86);
    width: 42px;
    height: 42px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(0,0,0,.12);
    transition: transform .15s ease, opacity .15s ease;
    user-select: none;
}

.esreda-carousel__btn:hover {
    transform: translateY(-1px);
}

.esreda-carousel__btn:active {
    transform: translateY(0);
}

.esreda-carousel__btn:disabled {
    opacity: .35;
    cursor: default;
    transform: none;
}

.esreda-carousel__btn--prev,
.esreda-carousel__btn--next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

.esreda-carousel__btn--prev { left: 10px; }
.esreda-carousel__btn--next { right: 10px; }

/* Vista: sin borde “card”, look limpio */
.esreda-carousel__viewport {
    overflow: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--esreda-line-2);
}

/* Ocultar scrollbar (sin romper accesibilidad) */
.esreda-carousel__viewport::-webkit-scrollbar { height: 10px; }
.esreda-carousel__viewport::-webkit-scrollbar-thumb { background: rgba(0,0,0,.14); border-radius: 999px; }
.esreda-carousel__viewport::-webkit-scrollbar-track { background: rgba(0,0,0,.04); }

.esreda-carousel__track {
    display: flex;
    gap: 2px;
}

/* Item: sin card, solo imagen “premium” */
.esreda-carousel__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: block;
    overflow: hidden;
    background: var(--esreda-bg);
    outline: 1px solid var(--esreda-line-2);
    transition: transform .18s ease, outline-color .18s ease;
    cursor: zoom-in;
}

.esreda-carousel__item:hover {
    transform: translateY(-2px);
    outline-color: rgba(0,0,0,.14);
}

.esreda-carousel__img {
    display: block;
    width: 340px;
    height: 235px;
    object-fit: cover;
}

/* Responsive carousel sizes */
@media (max-width: 900px) {
    .esreda-carousel__img { width: 290px; height: 200px; }
    .esreda-carousel__btn { width: 40px; height: 40px; }
}
@media (max-width: 600px) {
    .esreda-carousel__img { width: 245px; height: 170px; }
    .esreda-carousel__btn { width: 38px; height: 38px; }
    .esreda-carousel__btn--prev { left: 8px; }
    .esreda-carousel__btn--next { right: 8px; }
}

/* =========================================================
   Grid gallery (modern)
   ========================================================= */

.esreda-grid {
    --gap: 12px;
    display: grid;
    grid-template-columns: repeat(var(--esreda-grid-cols, 4), minmax(0, 1fr));
    gap: var(--gap);
    padding: 8px 0 2px;
    border-top: 1px solid var(--esreda-line-2);
}

/* item look “single piece” */
.esreda-grid__item {
    display: block;
    border-radius: 18px;
    overflow: hidden;
    background: var(--esreda-bg);
    outline: 1px solid var(--esreda-line-2);
    transition: transform .18s ease, outline-color .18s ease;
    cursor: zoom-in;
}

.esreda-grid__item:hover {
    transform: translateY(-2px);
    outline-color: rgba(0,0,0,.14);
}

.esreda-grid__img {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
}

/* mixed sizing */
.esreda-grid--mixed .esreda-grid__item.is-lg { grid-column: span 2; }
.esreda-grid--mixed .esreda-grid__item.is-xl { grid-column: span 2; grid-row: span 2; }
.esreda-grid--mixed .esreda-grid__item.is-xl .esreda-grid__img { height: 432px; }

/* Responsive grid */
@media (max-width: 900px) {
    .esreda-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .esreda-grid__img { height: 185px; }
    .esreda-grid--mixed .esreda-grid__item.is-xl .esreda-grid__img { height: 382px; }
}
@media (max-width: 600px) {
    .esreda-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .esreda-grid__img { height: 160px; }
    .esreda-grid--mixed .esreda-grid__item.is-lg,
    .esreda-grid--mixed .esreda-grid__item.is-xl { grid-column: span 2; }
}

/* =========================================================
   Lightbox / Zoom (no navigation)
   ========================================================= */

.esreda-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0,0,0,.78);
    display: none;
}

.esreda-lightbox.is-open {
    display: block;
}

.esreda-lightbox__inner {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    padding: 14px;
}

.esreda-lightbox__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: rgba(255,255,255,.88);
    font-size: .95rem;
}

.esreda-lightbox__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .9;
}

.esreda-lightbox__close {
    appearance: none;
    border: 0;
    background: rgba(255,255,255,.12);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.esreda-lightbox__close:hover {
    background: rgba(255,255,255,.18);
}

.esreda-lightbox__stage {
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 6px;
}

.esreda-lightbox__img {
    max-width: min(1200px, 96vw);
    max-height: min(78vh, 900px);
    border-radius: 18px;
    box-shadow: 0 18px 60px rgba(0,0,0,.45);
    background: rgba(255,255,255,.06);
}

.esreda-lightbox__nav {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    padding: 8px 0 2px;
}

.esreda-lightbox__btn {
    appearance: none;
    border: 0;
    background: rgba(255,255,255,.14);
    color: #fff;
    height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: .2px;
}

.esreda-lightbox__btn:hover {
    background: rgba(255,255,255,.18);
}

.esreda-lightbox__btn:disabled {
    opacity: .35;
    cursor: default;
}

@media (max-width: 600px) {
    .esreda-lightbox__inner { padding: 10px; }
    .esreda-lightbox__close { width: 40px; height: 40px; }
    .esreda-lightbox__btn { height: 42px; padding: 0 14px; }
}

/* ──────────────────────────────
   Paginación JS (botones) — Latest tabs
   Fix: que NO salga en columna (li uno debajo de otro)
   ────────────────────────────── */

.esreda-tabs__pagination .page-numbers{
    /* tu CSS anterior lo deja inline-block, pero los <li> siguen apilando.
       Esto fuerza el layout en fila. */
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    padding:0;
    margin:0;
    list-style:none!important;
}

/* Cada item de la lista en línea */
.esreda-tabs__pagination .page-numbers > li{
    display:inline-flex;
    margin:0;
    padding:0;
}

/* Botones JS dentro del UL */
.esreda-tabs__pagination .page-numbers button{
    appearance:none;
    border:1px solid transparent;
    background:transparent;
    cursor:pointer;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.2rem .45rem;
    border-radius:2px;
    font-size:.8rem;
    line-height:1.2;
    color:var(--esreda-gray-555);

    transition:border-color .12s ease, background-color .12s ease, color .12s ease, filter .12s ease;
}

.esreda-tabs__pagination .page-numbers button:hover{
    border-color:#cfd6dd;
}

/* Activo (tu JS añade .is-active) */
.esreda-tabs__pagination .page-numbers button.is-active{
    background:var(--esreda-accent-alt);
    color:var(--esreda-white);
    border-color:var(--esreda-accent-alt);
}

/* Disabled */
.esreda-tabs__pagination .page-numbers button:disabled{
    opacity:.45;
    cursor:default;
    border-color:transparent;
}

/* Opcional: en móvil, permitir “scroll” horizontal si hay muchas páginas */
@media (max-width:480px){
    .esreda-tabs__pagination{
        text-align:left;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        padding-bottom:.15rem;
    }
    .esreda-tabs__pagination .page-numbers{
        white-space:nowrap;
    }
}

@media (max-width: 767px){
    .esreda-latest--upcoming .esreda-item,
    .esreda-latest--publications .esreda-item{
        margin: 1rem;
    }
}
