/* ═══════════════════════════════════════════════════════════════
   Página «programa»: cabecera con avisos, índice de días, filtro y
   los días con sus tarjetas de sesión.

   Aquí NO se define ninguna caja de tarjeta: la caja, la rejilla y
   sus piezas (.tarjeta, .tarjetas, .etiqueta, .tarjeta-meta,
   .tarjeta-titulo, .enlace-cubre, .punto) viven en
   css/style-cards.css y se usan tal cual. Esta hoja solo añade lo
   propio de la página.

   El color de ruta (--c) llega solo: cada tarjeta y cada pastilla
   llevan data-ruta y style-colors.css les fija --c y --sc. Nunca se
   usa --c como color de texto; aquí es fondo, filete o marca.
   ═══════════════════════════════════════════════════════════════ */

/* ── CABECERA DE LA PÁGINA ────────────────────────────────────── */
/*
 * Mismo ritmo que la .cabecera-pagina de css/style.css (54/40 y filete
 * inferior), que es como abren las otras cinco páginas de contenido.
 * No puede usar esa clase todavía porque el marcado envuelve la
 * cabecera en <section class="seccion programa-intro">; cuando
 * programa.php pase a .cabecera-pagina estas reglas desaparecen.
 */
.programa-intro {
    padding: 54px 0 40px;
    border-bottom: 1px solid var(--linea);
}

.programa-entradilla {
    max-width: 62ch;
    margin: 16px 0 0;
    font-size: var(--txt-entradilla);
    color: var(--gris);
}

.programa-actualizado {
    margin: 8px 0 0;
    color: var(--gris);
    font-size: var(--txt-menor);
}

/* ── AVISOS DE ESTADO ─────────────────────────────────────────── */
/*
 * Tienen que verse (el programa es provisional y faltan aulas y
 * nombres), pero sin alarmar: fondo claro, filete morado de marca y
 * cero rojos ni iconos de advertencia.
 */
/* La caja es .panel (css/style.css); aquí solo el filete de marca. */
.programa-avisos {
    margin: 24px 0 0;
    border-left: 6px solid var(--morado);
    max-width: 72ch;
}

.programa-avisos ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.programa-aviso {
    position: relative;
    margin: 0;
    padding-left: 20px;
    color: var(--gris);
    font-size: var(--txt-menor);
    line-height: 1.5;
}

.programa-aviso + .programa-aviso {
    margin-top: 8px;
}

.programa-aviso::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--linea);
}

/* El primero es el que enmarca todo lo demás: se lee en tinta. */
.programa-aviso-destacado {
    color: var(--tinta);
    font-weight: 650;
}

.programa-aviso-destacado::before {
    background: var(--morado);
}

/* ── ÍNDICE DE DÍAS ───────────────────────────────────────────── */
/*
 * Enlaces normales a las anclas de cada día. Es la navegación que
 * funciona siempre, también sin JavaScript, así que va visible
 * desde el HTML y no depende del filtro.
 */
.programa-indice {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 26px 0 0;
}

.programa-indice-enlace {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    min-height: 44px;
    padding: 8px 18px;
    border: 2px solid var(--tinta);
    border-radius: var(--r);
    background: transparent;
    color: var(--tinta);
    font-weight: 650;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.programa-indice-enlace:hover {
    background: var(--tinta);
    color: var(--hueso);
}

.programa-indice-cuenta {
    font-size: var(--txt-servicio);
    font-weight: 400;
    color: var(--gris);
}

.programa-indice-enlace:hover .programa-indice-cuenta {
    color: inherit;
}

/*
 * Día sin ninguna sesión visible. El enlace no se retira —desaparecer
 * bajo el cursor desordena el índice y esconde la respuesta «de ese día
 * no queda nada»— pero deja de comportarse como enlace: js/programa.js
 * le pone aria-disabled y lo saca del recorrido del tabulador, y su
 * cuenta pasa a «0 sesiones». Un control que no lleva a ningún sitio
 * tiene que decirlo; el gris solo no basta, por eso la cuenta lo
 * escribe con palabras.
 */
.programa-indice-enlace[aria-disabled="true"] {
    border-color: var(--linea);
    color: var(--gris);
    cursor: default;
}

.programa-indice-enlace[aria-disabled="true"]:hover {
    background: transparent;
    color: var(--gris);
}

/* ── FILTRO ───────────────────────────────────────────────────── */
/*
 * Lo destapa js/programa.js quitando el atributo hidden. Mientras
 * siga oculto no hay ningún control muerto en pantalla.
 */
/* La caja es .panel (css/style.css). */
.programa-filtros {
    margin: 30px 0 0;
}

.filtro-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.filtro-fila + .filtro-fila {
    margin-top: 16px;
}

/*
 * Dos de las tres filas del filtro son <fieldset> y su rótulo es un
 * <legend>. Un legend NO es un elemento flex de su fieldset: el
 * navegador lo saca del flujo y lo pinta sobre el canto superior de la
 * caja, así que ni «flex: none» ni «min-width» le llegaban y las dos
 * filas de pastillas abrían con el rótulo encima en lugar de a su
 * izquierda, como sí hace la fila del buscador, que usa <label>.
 * Medido: el rótulo caía 32px por encima de su fila.
 *
 * «float: left» lo arreglaba en Chromium pero NO en WebKit, que seguía
 * dando los mismos 32 px de desvío. Por eso el rótulo visible pasó a ser
 * un <span> en el marcado y el <legend> quedó oculto solo visualmente:
 * el grupo se sigue nombrando para el lector de pantalla y el rótulo ya
 * es un elemento flex normal en los dos motores.
 *
 */
.filtro-rotulo {
    flex: none;
    min-width: 62px;
    padding: 0;
    margin: 0;
    color: var(--gris);
    font-size: var(--txt-rotulo);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.filtro-buscar {
    flex: 1 1 260px;
    min-width: 0;
    min-height: 44px;
    padding: 10px 16px;
    border: 2px solid var(--linea);
    border-radius: 999px;
    background: #fff;
    color: var(--tinta);
    font-family: var(--font-body);
    font-size: 16px;   /* menos de 16px hace que iOS haga zoom al enfocar */
}

.filtro-buscar::placeholder {
    color: var(--gris);
    opacity: 1;
}

.filtro-buscar:focus {
    border-color: var(--morado);
}

/* Pastilla de filtro: botón de verdad, nunca baja de 44 px (WCAG 2.5.8). */
.pastilla {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 16px;
    border: 2px solid var(--linea);
    border-radius: 999px;
    background: #fff;
    color: var(--tinta);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.pastilla:hover {
    border-color: var(--tinta);
}

/*
 * Activa: el color de ruta pinta el fondo y --sc el texto que va
 * encima (las cinco parejas cumplen AA). Las pastillas de día no
 * llevan ruta, así que caen al morado de marca por defecto.
 */
.pastilla[aria-pressed="true"] {
    background: var(--c);
    border-color: var(--c);
    color: var(--sc);
}

.pastilla[aria-pressed="true"] .punto {
    background: var(--sc);
}

.filtro-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--linea);
}

.filtro-resultado {
    margin: 0;
    font-weight: 650;
}

.filtro-limpiar {
    min-height: 44px;
    padding: 9px 18px;
    border: 2px solid var(--tinta);
    border-radius: 999px;
    background: transparent;
    color: var(--tinta);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.filtro-limpiar:hover {
    background: var(--tinta);
    color: var(--hueso);
}

/* .programa-vacio es el .estado-vacio de css/style.css. */

/* ── DÍAS Y TARJETAS ──────────────────────────────────────────── */
.programa-dia-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
}

.programa-dia-cuenta,
.programa-dia-nota {
    margin: 0;
    color: var(--gris);
    font-size: var(--txt-menor);
}

.programa-dia-nota::before {
    content: "· ";
}

.programa-tarjetas {
    --tarjetas-min: 330px;
}

/*
 * La línea de ponentes solo existe cuando hay nombres publicables: sin
 * ella la tarjeta termina en el título y no queda ningún hueco.
 *
 * Sin cualificar. El «.tarjeta p» que obligaba a escribir
 * «.tarjeta p.sesion-ponentes» ya es «.tarjeta :where(p)» y no pesa: el
 * tamaño y el color vienen de allí y aquí solo queda lo que cambia.
 */
.sesion-ponentes {
    margin: 0;
    line-height: 1.45;
}

.tarjeta-meta .sesion-doble {
    font-weight: 650;
}

/*
 * El filtro oculta con el atributo hidden. Hace falta decirlo aquí:
 * .tarjeta-sesion declara display:flex y una declaración de hoja
 * gana al display:none de la hoja del navegador.
 */
.programa-dia[hidden],
.tarjeta-sesion[hidden] {
    display: none;
}

/* ── IMPRESIÓN ────────────────────────────────────────────────── */
@media print {
    /* En papel no hay nada que filtrar ni ancla que seguir. */
    .programa-filtros,
    .programa-indice,
    .programa-vacio {
        display: none;
    }

    .programa-avisos {
        border-left-width: 3px;
    }
}