/* Coloquio Amauta — estilos del cronograma. Prefijo "coloquio-" para no chocar con el tema. */

.coloquio-wrap {
    --coloquio-primario: #BF223F;
    --coloquio-primario-suave: #fcd76c;
    --coloquio-texto: #2b2b2b;
    --coloquio-borde: #000000;
    max-width: 1100px;
    margin: 0 auto;
    color: var(--coloquio-texto);
    font-size: 16px;
    line-height: 1.5;
}
/* Aísla el widget de reglas de box-sizing/bordes raras que traiga el tema:
   nada se desborda en móvil y todas las cajas quedan cuadradas (sin radios). */
.coloquio-wrap,
.coloquio-wrap *,
.coloquio-wrap *::before,
.coloquio-wrap *::after {
    box-sizing: border-box;
    border-radius: 0 !important;
}
.coloquio-wrap img,
.coloquio-wrap iframe {
    max-width: 100%;
}
.coloquio-wrap,
.coloquio-wrap * {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}
/* El tema del sitio aplica a TODA lista de su contenido una regla del
   estilo ".article .body ul { float:left; width:100%; margin-left:30px }".
   Con box-sizing:content-box eso equivale a "100% del ancho + 30px extra",
   así que la lista siempre terminaba saliéndose del recuadro sin importar
   qué tan bien wrapeara el texto — la causa real del desborde. Como esa
   regla del tema tiene más especificidad que la nuestra (dos clases + una
   etiqueta contra una sola clase), hace falta !important para ganarle. */
.coloquio-wrap ul,
.coloquio-wrap ol {
    float: none !important;
    width: auto !important;
    margin-left: 0 !important;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* Buscador */
.coloquio-buscador {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--coloquio-borde);
}
.coloquio-buscador-caja {
    position: relative;
}
.coloquio-buscar-input {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--coloquio-borde);
}
.coloquio-buscar-input:focus {
    outline: 2px solid var(--coloquio-primario);
    outline-offset: 1px;
}
/* El input type="search" trae su propia "x" nativa en Chrome/Edge/Safari;
   se quita para que no choque con nuestro botón "×" personalizado. */
.coloquio-buscar-input::-webkit-search-cancel-button,
.coloquio-buscar-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}
.coloquio-buscar-clear {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.6rem;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    color: #888;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.coloquio-buscar-clear:hover,
.coloquio-buscar-clear:focus {
    color: var(--coloquio-primario);
}
.coloquio-buscar-ayuda {
    margin: 0.1rem 0 0;
    font-size: 0.92rem;
    color: #777;
}

/* Mientras hay una búsqueda activa, las pestañas de día no aportan
   (los resultados ya muestran los 3 días juntos), así que se ocultan
   para no confundir sobre "en qué día estoy parado". */
.coloquio-wrap.is-searching .coloquio-tabs-nav {
    display: none;
}

/* Pestañas de día. Van en un contenedor flex APARTE de los paneles de
   contenido (coloquio-tabs-panels): si estuvieran en el mismo flex
   container, el ajuste de scroll horizontal en móvil (más abajo) también
   metería el panel completo del día en esa fila, rompiendo el layout. */
.coloquio-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    /* gap en vez de margin en cada pestaña: el tema del sitio resetea el
       margin-bottom del último hijo dentro de su columna de texto
       (".wpb_text_column *:last-child"), y como la pestaña activa suele
       ser la última, perdía ese margen y el resto del espacio libre se
       repartía distinto entre las 3, dejándola más ancha. gap no es una
       propiedad de margen, así que esa regla del tema no la toca. */
    gap: 0.75rem 0.4rem;
}
.coloquio-tab-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.coloquio-tab-label {
    /* min-width:0 es imprescindible: sin esto, un flex item nunca se
       encoge más allá del ancho de su propio texto, así que la pestaña
       con el texto más largo ("Sábado 24 de octubre") terminaba más
       ancha que las demás aunque todas tuvieran flex:1 1 0. */
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    background: var(--coloquio-primario-suave);
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* !important en el modelo de caja: el tema le pone márgenes/tamaños
       de tipografía distintos a la pestaña marcada (roja) que a las que
       no lo están, así que salían de distinto alto aunque el resto del
       CSS fuera idéntico. En vez de perseguir esa regla del tema, se
       fija aquí el tamaño de caja de las 3 sin dejarle nada que tocar. */
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0.6rem 1.1rem !important;
    border: 0 !important;
    line-height: 1.3 !important;
    font-size: 1rem !important;
}
.coloquio-tab-radio:checked + .coloquio-tab-label {
    background: var(--coloquio-primario);
    color: #fff;
}
.coloquio-tabs-panels {
    width: 100%;
}
.coloquio-panel {
    display: none;
    width: 100%;
}
/* El día activo lo controla coloquio.js (según el radio marcado); si JS
   está desactivado, el <noscript> del shortcode fuerza ver los 3 días. */
.coloquio-panel.is-active {
    display: block;
}
.coloquio-panel.is-hidden {
    display: none;
}
/* Título del día: solo se muestra al buscar, cuando las pestañas se ocultan
   y los días se apilan; sin él no se sabe a qué día pertenece cada resultado. */
.coloquio-dia-titulo {
    display: none !important;
    margin: 1.5rem 0 0.75rem !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
    background: var(--coloquio-primario) !important;
    color: #fff !important;
}
.coloquio-wrap.is-searching .coloquio-dia-titulo {
    display: block !important;
}

/* Celda de la grilla: botón con el nombre de la sesión. El detalle se copia
   al panel .coloquio-detalle de abajo (ver coloquio.js). !important porque
   el tema estiliza los <button> (relleno, mayúsculas, sombras, colores). */
.coloquio-celda-btn {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 4.6rem;
    min-width: 0;
    margin: 0 !important;
    padding: 0.6rem 0.7rem !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--coloquio-texto) !important;
    font: inherit !important;
    font-size: 0.92rem !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-align: left !important;
    box-shadow: none !important;
    cursor: pointer;
}
.coloquio-celda-btn:hover {
    background: #0000000a !important;
}
/* Búsqueda: las sesiones que no coinciden se ocultan (su celda queda rayada
   como una celda vacía) y las que coinciden se resaltan en amarillo con una
   línea que dice qué nombre o dato coincidió. */
.coloquio-celda-btn.no-coincide {
    display: none !important;
}
.coloquio-tabla-dia td.coloquio-celda.no-coincide {
    background: repeating-linear-gradient(45deg, transparent, transparent 8px, #0000000a 8px, #0000000a 9px) !important;
    border-left-color: var(--coloquio-borde) !important;
}
.coloquio-celda-btn.is-coincide {
    background: var(--coloquio-primario-suave) !important;
}
.coloquio-celda-coincide {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--coloquio-primario);
}
.coloquio-celda-coincide::before {
    content: "\2605\00a0";
}
.coloquio-celda-btn:focus-visible {
    outline: 2px solid var(--coloquio-primario);
    outline-offset: -2px;
}
.coloquio-celda-btn.is-active {
    outline: 3px solid var(--coloquio-borde);
    outline-offset: -3px;
}
.coloquio-celda-titulo {
    display: block;
    font-weight: 700;
}
.coloquio-celda-n {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: #666;
}
/* El detalle de cada sesión viaja oculto en su celda; solo se ve en el panel. */
.coloquio-detalle-fuente {
    display: none !important;
}

/* Inauguración y clausura, arriba de la grilla. */
.coloquio-especiales {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}
.coloquio-wrap.is-searching .coloquio-especiales {
    display: none;
}
.coloquio-acto {
    border: 1px solid var(--coloquio-borde);
    border-left: 5px solid #7a1f2b;
    padding: 0.7rem 1rem;
    background: #fff;
}
.coloquio-acto-cuando {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
}
.coloquio-acto-titulo {
    display: block;
    margin: 0.1rem 0;
    font-size: 1.15rem;
    font-weight: 700;
}
.coloquio-acto-lugar {
    display: block;
    font-size: 0.9rem;
    color: #555;
}

/* Leyenda de colores (mismos colores que el borde de cada celda). */
.coloquio-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    margin: 0 0 1rem;
    font-size: 0.85rem;
}
.coloquio-leyenda span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.coloquio-leyenda i {
    display: inline-block;
    width: 11px;
    height: 11px;
}
.coloquio-ley-mesa { background: var(--coloquio-primario); }
.coloquio-ley-presentacion { background: #7a5a1f; }
.coloquio-ley-taller { background: #1f6b2b; }
.coloquio-ley-magistral { background: #2b2b6e; }

/* Panel de detalle, debajo de la tabla. */
.coloquio-detalle {
    margin-top: 1rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--coloquio-borde);
    border-left-width: 5px;
    background: #fff;
}
.coloquio-detalle[data-tipo="mesa"] { border-left-color: var(--coloquio-primario); }
.coloquio-detalle[data-tipo="magistral"] { border-left-color: #2b2b6e; }
.coloquio-detalle[data-tipo="taller"] { border-left-color: #1f6b2b; }
.coloquio-detalle[data-tipo="presentacion"] { border-left-color: #7a5a1f; }
.coloquio-detalle[hidden] {
    display: none !important;
}
.coloquio-ayuda-grilla {
    margin: 0 0 0.9rem;
    font-size: 0.88rem;
    color: #666;
}
.coloquio-wrap.is-searching .coloquio-ayuda-grilla {
    display: none;
}
.coloquio-ponentes-lista li.is-coincide {
    margin-left: -0.6rem;
    margin-right: -0.6rem;
    padding: 0.4rem 0.6rem;
    background: var(--coloquio-primario-suave);
}
.coloquio-detalle-cat {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
}
.coloquio-detalle-titulo {
    margin: 0.15rem 0 0.3rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}
.coloquio-detalle-meta {
    font-size: 0.88rem;
    color: #555;
}

.coloquio-ponentes-lista {
    list-style: none !important;
    margin: 0.75rem 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--coloquio-borde);
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
}
.coloquio-ponentes-lista li {
    list-style: none !important;
    margin-bottom: 0.75rem;
    font-size: inherit !important;
}
.coloquio-ponentes-lista li:last-child {
    margin-bottom: 0;
}
.coloquio-ponentes-lista strong {
    font-size: inherit !important;
    font-weight: 700;
}
.coloquio-procedencia {
    color: #666;
    font-size: 0.88rem !important;
}
.coloquio-presentadores {
    color: #444;
    font-size: inherit !important;
}
.coloquio-titulo-ponencia {
    font-style: italic;
    color: #444;
    font-size: inherit !important;
}

.coloquio-sin-resultados {
    text-align: center;
    color: #666;
    padding: 2rem 0;
}

/* Grilla del cronograma: una tabla por día, horas en filas y aulas en
   columnas, para ver de un vistazo qué se cruza con qué. */
.coloquio-tabla-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 1rem;
}
.coloquio-tabla-dia {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}
.coloquio-tabla-dia th,
.coloquio-tabla-dia td {
    border: 1px solid var(--coloquio-borde);
    vertical-align: top;
}
.coloquio-tabla-dia thead th {
    /* Sin white-space:nowrap: el nombre de una sede como "Universidad
       Particular Ricardo Palma" no cabe en una sola línea sin desbordar
       la columna. Al dejarlo envolver, usa el ancho que ya define
       .coloquio-celda (220px) en vez de estirar la tabla entera. */
    background: var(--coloquio-primario-suave);
    padding: 0.6rem 0.7rem;
    font-size: 0.85rem;
    line-height: 1.3;
    text-align: left;
}
.coloquio-sede-sub {
    display: block;
    font-weight: 400;
    font-size: 0.72rem;
    color: var(--coloquio-texto);
    opacity: 0.7;
}
.coloquio-hora-encabezado {
    background: var(--coloquio-primario-suave);
    width: 5.5rem;
    position: sticky;
    left: 0;
    z-index: 1;
}
.coloquio-hora-celda {
    background: #fff;
    width: 5.5rem;
    padding: 0.6rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    position: sticky;
    left: 0;
}
.coloquio-celda {
    padding: 0;
    min-width: 200px;
    background: #fff;
}
/* Acento de color por tipo de sesión en el borde izquierdo de la celda,
   mismo lenguaje de color que las insignias de arriba, para que la grilla
   se pueda escanear por tipo de un vistazo sin abrir cada una. El selector
   repite ".coloquio-tabla-dia td" para igualar la especificidad de la
   regla general de bordes de más arriba; con solo ".coloquio-celda" esa
   regla general (más específica) le gana y el acento no se ve. */
.coloquio-tabla-dia td.coloquio-celda { border-left-width: 5px; }
.coloquio-tabla-dia td.coloquio-celda-mesa { border-left-color: var(--coloquio-primario); }
.coloquio-tabla-dia td.coloquio-celda-magistral { border-left-color: #2b2b6e; }
.coloquio-tabla-dia td.coloquio-celda-taller { border-left-color: #1f6b2b; }
.coloquio-tabla-dia td.coloquio-celda-presentacion { border-left-color: #7a5a1f; }
.coloquio-tabla-dia td.coloquio-celda-inauguracion,
.coloquio-tabla-dia td.coloquio-celda-clausura { border-left-color: #7a1f2b; }
.coloquio-tabla-dia td.coloquio-celda-mesa { background: #bf223f0d; }
.coloquio-tabla-dia td.coloquio-celda-magistral { background: #2b2b6e14; }
.coloquio-tabla-dia td.coloquio-celda-taller { background: #1f6b2b14; }
.coloquio-tabla-dia td.coloquio-celda-presentacion { background: #7a5a1f14; }
.coloquio-celda-vacia {
    background: repeating-linear-gradient(45deg, transparent, transparent 8px, #0000000a 8px, #0000000a 9px);
}
.coloquio-celda-guion {
    display: block;
    text-align: center;
    color: #999;
    padding: 1rem 0;
}

/* Índice de ponentes */
.coloquio-alfabeto {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0 1.5rem;
}
.coloquio-alfabeto a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.5rem;
    background: var(--coloquio-primario-suave);
    color: var(--coloquio-primario);
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
}
.coloquio-alfabeto a:hover,
.coloquio-alfabeto a:focus {
    background: var(--coloquio-primario);
    color: #fff;
}

.coloquio-letra-grupo {
    margin-bottom: 1.75rem;
    scroll-margin-top: 1rem;
}
.coloquio-letra-titulo {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--coloquio-primario);
    border-bottom: 2px solid var(--coloquio-primario-suave);
    padding-bottom: 0.3rem;
    margin: 0 0 0.75rem;
}

.coloquio-index-lista,
.coloquio-index-lista li {
    list-style: none !important;
    list-style-type: none !important;
}
.coloquio-index-lista {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.6rem 1.5rem;
}
.coloquio-index-lista li {
    min-width: 0;
    border-bottom: 1px solid var(--coloquio-borde);
}
.coloquio-index-lista a {
    display: block;
    padding: 0.6rem 0.3rem;
    text-decoration: none;
    color: inherit;
    border-radius: 4px;
    transition: background 0.15s ease;
}
.coloquio-index-lista a:hover,
.coloquio-index-lista a:focus {
    background: var(--coloquio-primario-suave);
}
.coloquio-index-lista strong {
    display: block;
    font-size: 0.95rem !important;
    font-weight: 600;
    line-height: 1.3;
}
.coloquio-index-meta {
    display: block;
    font-size: 0.8rem !important;
    color: #666;
    margin-top: 0.15rem;
    line-height: 1.3;
}

/* Sedes */
.coloquio-sedes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}
.coloquio-sede-card {
    display: flex;
    flex-direction: column;
}
.coloquio-sede-card h3 {
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 0 0 0.35rem;
}
.coloquio-sede-card p {
    /* alto mínimo de 2 líneas: así, si una dirección ocupa 1 línea y otra
       2, los mapas de las 3 tarjetas igual arrancan a la misma altura. */
    min-height: 2.5em;
    font-size: 0.92rem;
    line-height: 1.35;
    color: #555;
    margin: 0;
}
.coloquio-mapa {
    position: relative;
    width: 100%;
    padding-top: 42%;
    margin-top: 0.65rem;
    overflow: hidden;
}
.coloquio-mapa iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (min-width: 640px) {
    .coloquio-wrap { font-size: 16.5px; }
}

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

/* Móvil: las pestañas de día se deslizan horizontalmente en vez de amontonarse. */
@media (max-width: 600px) {
    .coloquio-tabs-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
        margin: 0 -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .coloquio-tab-label {
        flex: 0 0 auto;
    }
    .coloquio-index-lista {
        grid-template-columns: 1fr;
    }
    .coloquio-celda {
        min-width: 170px;
    }
    .coloquio-buscar-input {
        font-size: 16px; /* evita el zoom automático de iOS al enfocar */
    }
}

/* Pantallas muy angostas (≤360px): reduce paddings para ganar espacio. */
@media (max-width: 360px) {
    .coloquio-celda-btn {
        padding: 0.5rem 0.55rem !important;
    }
    .coloquio-tab-label {
        /* !important porque la regla base también usa !important
           (ver arriba); sin esto, este ajuste para pantallas angostas
           quedaría sin efecto. */
        padding: 0.5rem 0.85rem !important;
        font-size: 0.9rem !important;
    }
}