/* Nerdearla Argentina 2026 — agenda (grilla + lista) y detalle de charla.
   Todo lo estructural sale del payload de Backstage: días, salas y tracks se
   arman en routes.py, así que acá no hay ninguna fecha ni sala escrita a mano. */

/* --------------------------------------------------------------------------
   Encabezado
   -------------------------------------------------------------------------- */
/* El header del sitio es fixed y el breadcrumb es lo primero del contenido, así
   que renderiza debajo y no se ve. Lo bajamos acá, y de paso la sección que
   sigue afloja su padding para que no queden 200px de aire antes del título.
   El mismo problema existe en el resto del sitio: arreglarlo global significa
   tocar index.css, que dispara el build del proyecto de speakers. */
.ag-breadcrumb {
    padding-top: calc(var(--header-height) + 0.5rem);
    padding-bottom: 0.5rem;
}
.ag-breadcrumb + .section { padding-top: 1.5rem; }

.container--agenda { max-width: 1400px; }

.ag-header {
    margin-bottom: 1.5rem;
}
.ag-header__title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 6vw, 3.2rem);
    line-height: 1;
    margin: 0 0 0.6rem;
}
.ag-header__subtitle {
    color: var(--color-text-secondary);
    font-size: 1.05rem;
    margin: 0;
}
.ag-header__count {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin: 0.4rem 0 0;
}

/* --------------------------------------------------------------------------
   Barra de control (días + filtros)
   -------------------------------------------------------------------------- */
.ag-toolbar {
    position: sticky;
    top: var(--header-height);
    z-index: 20;
    padding: 0.9rem 0 0.7rem;
    margin-bottom: 1.2rem;
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .ag-toolbar { background: rgba(0, 0, 0, 0.92); }
}

.ag-days {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.3rem;
    scrollbar-width: thin;
}
.ag-day-tab {
    /* Reparten el ancho completo de la barra: los cinco terminan donde termina
       la fila de controles. En pantallas chicas el min-width los saca del
       reparto y la tira scrollea. */
    flex: 1 1 0;
    min-width: 8.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.55rem 0.9rem;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    text-align: left;
    font-family: inherit;
}
.ag-day-tab:hover { border-color: rgba(255, 255, 255, 0.45); }
.ag-day-tab[aria-selected="true"] {
    background: var(--color-rojo-cta);
    border-color: var(--color-rojo-cta);
}
.ag-day-tab__date {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.1;
}
/* Frase, no etiqueta: en versalitas "WORKSHOPS PRESENCIALES EN SANTANDER"
   grita y ocupa el doble. */
.ag-day-tab__meta {
    font-size: 0.74rem;
    line-height: 1.25;
    color: var(--color-text-muted);
}
.ag-day-tab[aria-selected="true"] .ag-day-tab__meta { color: rgba(255, 255, 255, 0.85); }
/* Con un filtro puesto, un día sin nada que mostrar se apaga en vez de
   quedarse ahí prometiendo charlas que no tiene. */
.ag-day-tab.is-empty { opacity: 0.45; }

.ag-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.ag-search {
    /* Crece, pero con techo: sin él se comía toda la fila y dejaba al huso
       horario y a los idiomas contra el borde derecho. */
    flex: 1 1 22rem;
    max-width: 34rem;
    position: relative;
}
.ag-search input {
    width: 100%;
    padding: 0.45rem 2rem 0.45rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
}
.ag-search input:focus { border-color: rgba(255, 255, 255, 0.55); }
.ag-search input::placeholder { color: var(--color-text-muted); }
.ag-search__clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem;
    display: none;
}
.ag-search__clear.is-visible { display: block; }

.ag-tz select,
.ag-view button {
    font-family: inherit;
}
.ag-tz select {
    padding: 0.4rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text);
    font-size: 0.82rem;
    cursor: pointer;
    outline: none;
}
.ag-tz select option { background: #1a1a1a; color: #fff; }

.ag-langs {
    display: inline-flex;
    gap: 0.35rem;
}

.ag-view {
    display: none;
    margin-left: auto;
    gap: 0.25rem;
    padding: 0.15rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
}
.ag-view button {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    cursor: pointer;
}
.ag-view button[aria-pressed="true"] {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-text);
}

.ag-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.6rem;
}
.ag-filters--rooms { margin-top: 0.5rem; }
.ag-pill {
    padding: 0.28rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    background: transparent;
    color: var(--color-text);
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s, background 0.2s, border-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.ag-pill:hover { border-color: rgba(255, 255, 255, 0.5); }
.ag-pill[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14); }
.ag-pill__dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex-shrink: 0;
}
/* Apagado: chip neutro con el color en el punto. Encendido: el color llena el
   chip. Media opacidad sobre negro dejaba el texto ilegible. */
.ag-pill--track {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    font-weight: 600;
    font-size: 0.72rem;
}
.ag-pill--track[aria-pressed="true"] {
    background: var(--ag-track-color);
    border-color: var(--ag-track-color);
    color: var(--ag-track-fg);
}
.ag-pill--track[aria-pressed="true"] .ag-pill__dot { display: none; }
.ag-filters__reset {
    align-self: center;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-family: inherit;
    text-decoration: underline;
    cursor: pointer;
    padding: 0.28rem 0.4rem;
}

/* Idioma: encendido en blanco pleno, para que no se confunda ni con los tracks
   (de color) ni con las salas (apenas marcadas). */
.ag-pill--lang[aria-pressed="true"] {
    background: var(--color-text);
    border-color: var(--color-text);
    color: var(--color-bg);
}

.ag-filters-toggle {
    display: none;
    margin-top: 0.6rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    background: transparent;
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}
.ag-filters-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.12); }

.ag-status {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin: 0.9rem 0 0.2rem;
    min-height: 1.2em;
}

/* --------------------------------------------------------------------------
   Tarjeta (compartida por lista y grilla)
   -------------------------------------------------------------------------- */
.ag-card {
    display: block;
    background: var(--color-bg-card);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-left: 4px solid var(--ag-card-accent, rgba(255, 255, 255, 0.2));
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.ag-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.25);
    border-left-color: var(--ag-card-accent, rgba(255, 255, 255, 0.2));
}
.ag-card.is-hidden { display: none; }
/* Apagada por un filtro: sigue ahí y sigue siendo un link, y al pasar por
   encima vuelve a leerse. */
.ag-card.is-dimmed { opacity: 0.3; }
.ag-card.is-dimmed:hover { opacity: 0.8; }
.ag-card.is-live {
    box-shadow: 0 0 0 2px var(--color-rojo), 0 0 18px rgba(255, 50, 60, 0.35);
}

.ag-card__time { display: none; }

.ag-card__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}
.ag-card__speakers {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.4rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}
.ag-card__speaker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.ag-card__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.ag-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.6rem;
}
.ag-chip {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.16rem 0.45rem;
    border-radius: 20px;
    white-space: nowrap;
}
.ag-chip--room {
    background: transparent;
    border: 1px solid var(--ag-room-color, rgba(255, 255, 255, 0.3));
    color: var(--color-text);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.ag-chip--room .ag-pill__dot { width: 0.5rem; height: 0.5rem; }
.ag-chip--flag {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-text);
}
.ag-card__sponsor {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    font-size: 0.62rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ag-card__sponsor img {
    height: 18px;
    width: auto;
    max-width: 72px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Vista lista (server-rendered: es la que existe sin JS)
   -------------------------------------------------------------------------- */
.ag-day { margin-bottom: 2.5rem; }
.ag-day__heading {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin: 0 0 0.2rem;
}
.ag-day__sub {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin: 0 0 1rem;
}
.ag-day__empty {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    padding: 1.5rem 0;
    display: none;
}
.ag-day.is-empty .ag-day__empty { display: block; }

.ag-list-row {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.9rem;
    margin-bottom: 0.7rem;
    align-items: start;
}
.ag-list-row.is-hidden { display: none; }
.ag-list-row.is-dimmed .ag-list-row__time { opacity: 0.3; }
.ag-list-row__time {
    text-align: right;
    padding-top: 0.85rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}
.ag-list-row__start {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
}
.ag-list-row__end {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}
.ag-list-row .ag-card { padding: 0.85rem 1rem; }

/* --------------------------------------------------------------------------
   Vista grilla (la arma el JS; oculta si no hay JS o en mobile)
   -------------------------------------------------------------------------- */
.ag-grid-wrapper {
    display: none;
    padding-bottom: 1rem;
}
.ag-grid {
    display: grid;
    position: relative;
}
.ag-grid__head {
    padding: 0.6rem 0.5rem 0.7rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    border-bottom: 3px solid var(--ag-room-color, #444);
}
.ag-grid__head.is-dimmed { opacity: 0.35; }
.ag-grid__hour {
    grid-column: 1;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 600;
    padding-right: 0.7rem;
    text-align: right;
    position: relative;
}
.ag-grid__rule {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    pointer-events: none;
}
/* Las medias horas marcan más flojo que las horas en punto. */
.ag-grid__rule--half { border-top-color: rgba(255, 255, 255, 0.03); }
.ag-grid__hour--half { opacity: 0.55; font-weight: 500; }
.ag-grid .ag-card {
    margin: 2px 3px;
    padding: 0.45rem 0.55rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ag-grid .ag-card__title { font-size: 0.78rem; line-height: 1.2; }
.ag-grid .ag-card__speakers { font-size: 0.7rem; margin-top: 0.2rem; gap: 0.3rem; }
.ag-grid .ag-card__avatar { width: 18px; height: 18px; }
.ag-grid .ag-card__meta { margin-top: auto; padding-top: 0.25rem; gap: 0.25rem; }
/* El interlineado del sitio (1.6) sobre textos de 11px son diez píxeles de aire
   por tarjeta, y por esos diez píxeles una charla de 20 minutos soltaba sus
   chips: se pasaba por uno. */
.ag-grid .ag-card__time { line-height: 1.25; }
.ag-grid .ag-chip { line-height: 1.3; }

/* Degradado progresivo para las tarjetas que igual no entran en su horario.
   Primero sale el horario, que es lo único que la grilla ya dice por otro lado
   (la tarjeta está puesta en su hora y la regla está a la izquierda). Los chips
   recién después: sin ellos no queda de qué sala es la charla, y el borde de
   color, que es el track, se lee como si fuera la sala. */
.ag-grid .ag-card.is-tight .ag-card__time { display: none; }
.ag-grid .ag-card.is-tighter .ag-card__meta { display: none; }
.ag-grid .ag-card.is-tightest .ag-card__speakers { display: none; }
.ag-grid .ag-card.is-tightest .ag-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ag-grid .ag-card__time {
    display: block;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.2rem;
}

/* Con JS y en desktop, la vista elegida manda. */
@media (min-width: 62rem) {
    .ag-view { display: inline-flex; }
    .js-agenda[data-view="grid"] .ag-grid-wrapper { display: block; }
    .js-agenda[data-view="grid"] .ag-list { display: none; }
    .js-agenda[data-view="grid"].is-searching .ag-grid-wrapper { display: none; }
    .js-agenda[data-view="grid"].is-searching .ag-list { display: block; }
}

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
.ag-cta {
    text-align: center;
    padding: 3.5rem 0;
}
.ag-cta__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin: 0 0 0.8rem;
}
.ag-cta__text {
    color: var(--color-text-muted);
    margin: 0 0 1.8rem;
}

/* --------------------------------------------------------------------------
   Detalle de charla
   -------------------------------------------------------------------------- */
.ag-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 3rem;
    align-items: start;
}
.ag-detail__track {
    display: inline-block;
    padding: 0.28rem 0.75rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}
.ag-detail__title {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    line-height: 1.15;
    margin: 0 0 1.2rem;
}
.ag-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.8rem;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
}
.ag-detail__banner {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
    background: var(--color-bg-card);
}

.ag-detail__description {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
}
.ag-detail__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.2rem 1.5rem;
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
}
.ag-detail__cta-text {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text);
}
.ag-detail__cta .btn { flex-shrink: 0; }

.ag-detail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.ag-detail__tag {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    background: rgba(255, 255, 255, 0.07);
    color: var(--color-text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.ag-detail__sponsor {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.4rem;
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    font-size: 0.92rem;
    color: var(--color-text-muted);
}
.ag-detail__sponsor img {
    height: 26px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    /* En blanco, igual que en las tarjetas de la agenda: los logos vienen de
       Backstage con fondos y colores dispares y sobre negro se ven sucios. */
    filter: brightness(0) invert(1);
    opacity: 0.9;
}
.ag-detail__back a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
}
.ag-detail__back a:hover { color: var(--color-text); }

.ag-detail__speaker {
    background: var(--color-bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 1.4rem;
    margin-bottom: 1.2rem;
    text-align: center;
}
.ag-detail__speaker a { display: block; }
.ag-detail__speaker-photo {
    display: block;
    width: 110px;
    height: 110px;
    margin: 0 auto 0.9rem;
    border-radius: 50%;
    border: 2px solid var(--color-rojo);
    object-fit: cover;
}
.ag-detail__speaker-name {
    font-size: 1.15rem;
    margin: 0 0 0.3rem;
}
.ag-detail__speaker-name a { color: inherit; text-decoration: none; }
.ag-detail__speaker-name a:hover { text-decoration: underline; }
.ag-detail__speaker-role {
    color: var(--color-amarillo);
    font-size: 0.85rem;
    margin: 0 0 0.7rem;
}
.ag-detail__speaker-bio {
    color: var(--color-text-muted);
    font-size: 0.87rem;
    line-height: 1.6;
    margin: 0 0 0.8rem;
    text-align: left;
}
.ag-detail__speaker-links {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
}
.ag-detail__speaker-links a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 1rem;
}
.ag-detail__speaker-links a:hover { color: var(--color-text); }

.ag-detail__related { margin-top: 3.5rem; }
.ag-detail__related h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
}
.ag-detail__related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.1rem;
}
/* Las tarjetas de una fila miden todas lo mismo (las estira el grid), así que
   con los chips clavados abajo quedan alineados entre tarjetas en vez de flotar
   cada uno donde termina su título. Son cuatro tarjetas angostas con mucho
   texto: la línea de chips a la misma altura es lo que las hace leíbles. */
.ag-detail__related-grid .ag-card {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.1rem 1.1rem;
}
.ag-detail__related-grid .ag-card__title { font-size: 0.95rem; }
/* En las relacionadas la tarjeta es angosta: dos speakers van uno por línea. */
.ag-detail__related-grid .ag-card__speakers {
    margin-top: 0.55rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}
/* El padding es el aire mínimo con el texto de arriba, para la tarjeta más
   alta de la fila, que es la que no tiene espacio libre que repartir. */
.ag-detail__related-grid .ag-card__meta {
    margin-top: auto;
    padding-top: 0.9rem;
    gap: 0.4rem;
}

@media (max-width: 62rem) {
    .ag-detail__layout { grid-template-columns: 1fr; gap: 2rem; }
}

[hidden] { display: none !important; }

@media (max-width: 48rem) {
    .ag-toolbar { position: static; }
    /* La nota del día se repite bajo el encabezado, así que en el carrusel de
       pestañas sólo estorba: tres renglones por pestaña. */
    .ag-day-tab__meta { display: none; }
    /* Doce tracks y cinco salas empujaban la primera charla fuera de pantalla. */
    .ag-filters-toggle { display: inline-block; }
    .ag-toolbar:not(.is-open) .ag-filters { display: none; }
    .ag-day-tab { min-width: 6.5rem; }
    .ag-list-row {
        grid-template-columns: 1fr;
        gap: 0.3rem;
        margin-bottom: 1rem;
    }
    .ag-list-row__time {
        text-align: left;
        padding-top: 0;
        display: flex;
        gap: 0.4rem;
        align-items: baseline;
    }
    .ag-list-row__end::before { content: '- '; }
    .ag-card__sponsor { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Modal de charla
   -------------------------------------------------------------------------- */
/* Clickear una charla abre esto en vez de navegar: irse a la página interna y
   volver perdía el día, los filtros y la posición del scroll. La página interna
   sigue siendo la que se comparte y la que indexa Google, y se llega a ella
   desde el pie del modal. */
.ag-modal {
    width: min(46rem, calc(100vw - 2rem));
    max-height: min(86vh, 50rem);
    /* El reset del sitio le pone margin 0 a todo, y ese es justo el margen con
       el que el navegador centra un <dialog> abierto. */
    margin: auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
    color: var(--color-text);
    overflow: hidden;
    /* El display de la tarjeta abierta pisa el display:none con el que el
       navegador esconde un <dialog> cerrado, así que hay que reponerlo. */
    display: flex;
    flex-direction: column;
}
.ag-modal:not([open]) { display: none; }
.ag-modal::backdrop {
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(3px);
}
/* Con el modal abierto, el fondo no scrollea: el top layer bloquea el click
   pero no la rueda. */
body.ag-modal-open { overflow: hidden; }

.ag-modal__scroll {
    /* Crece hasta donde da y de ahí scrollea: sin esto el pie queda flotando a
       media pantalla cuando la charla tiene poca descripción, y el min-height
       es lo que deja que el contenido largo scrollee adentro en vez de
       desbordar. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.6rem 1.8rem 1.4rem;
    scrollbar-width: thin;
}
.ag-modal__close {
    position: absolute;
    top: 0.7rem;
    right: 0.8rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: var(--color-text);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s;
}
.ag-modal__close:hover { background: rgba(255, 255, 255, 0.18); }

.ag-modal__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.8rem;
    padding-right: 2.2rem;
}
.ag-modal__title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3.4vw, 1.9rem);
    line-height: 1.2;
    margin: 0 0 0.8rem;
}
/* Día, horario y speakers en una sola fila, que envuelve cuando no entra. */
.ag-modal__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    margin: 0 0 1.3rem;
    font-size: 0.92rem;
    color: var(--color-text-secondary);
}
/* La tira de speakers es la misma de la tarjeta, clonada. Cierra la fila y va
   en blanco: al lado de la fecha en gris, el nombre es lo que se busca. */
.ag-modal__meta .ag-card__speakers {
    margin: 0;
    gap: 0.4rem 1rem;
    font-size: inherit;
    color: var(--color-text);
}
.ag-modal__meta .ag-card__avatar { width: 24px; height: 24px; }

.ag-modal__abstract {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}
.ag-modal__abstract p { margin: 0 0 0.9rem; }
.ag-modal__error { color: var(--color-text-muted); font-size: 0.92rem; }

/* Mientras baja la descripción: tres renglones en vez de un salto de alto. */
.ag-modal__skeleton span {
    display: block;
    height: 0.85rem;
    margin-bottom: 0.7rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.09);
    animation: ag-pulse 1.2s ease-in-out infinite;
}
.ag-modal__skeleton span:nth-child(2) { width: 92%; animation-delay: 0.1s; }
.ag-modal__skeleton span:nth-child(3) { width: 70%; animation-delay: 0.2s; }
@keyframes ag-pulse {
    50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
    .ag-modal__skeleton span { animation: none; }
}

.ag-modal__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 1rem 1.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.25);
}
.ag-modal__sponsor {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: auto;
    font-size: 0.62rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ag-modal__sponsor img {
    height: 20px;
    width: auto;
    max-width: 90px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}
.ag-modal__cta { white-space: nowrap; }

@media (max-width: 48rem) {
    /* A pantalla completa: en un teléfono una tarjeta flotante deja franjas de
       fondo que se clickean sin querer. */
    .ag-modal {
        width: 100vw;
        max-width: none;
        max-height: 100dvh;
        height: 100dvh;
        margin: 0;
        border: 0;
        border-radius: 0;
    }
    .ag-modal__scroll { padding: 1.3rem 1.2rem 1.2rem; }
    .ag-modal__foot { padding: 0.9rem 1.2rem calc(0.9rem + env(safe-area-inset-bottom)); }
    .ag-modal__cta { flex: 1 1 auto; text-align: center; }
}