/* IDI Actividades · portada: el banner "mesa de luz", el calendario y la ficha emergente.
   Usa los tokens del tema hijo (--tinta, --fucsia, --cristal...), los botones .idi-btn y las piezas de front.css.
   Divi da estilo a títulos, párrafos, listas y enlaces con selectores fuertes: aquí se neutralizan con
   :is(#page-container, body), que pesa como un id. */

.idi-mesa, .idi-cal, .idi-hoja, .idi-proximas, .idi-realizadas { --idi-gutter: clamp(16px, 4vw, 48px); --idi-muelle: cubic-bezier(.22, 1, .36, 1); }
.idi-mesa [hidden], .idi-cal [hidden], .idi-proximas [hidden] { display: none !important; }

:is(#page-container, body) :is(.idi-mesa, .idi-cal, .idi-hoja, .idi-proximas, .idi-realizadas) :is(h1, h2, h3, p) { margin: 0; padding: 0; }
/* [class] suma peso: el tema pone relleno a ":is(#left-area, body) .entry-content ul", que empataría y se carga después */
:is(#page-container, body) :is(.idi-mesa, .idi-cal, .idi-realizadas) :is(ul, ol)[class] { margin: 0; padding: 0; list-style: none; line-height: inherit; }
:is(#page-container, body) :is(.idi-mesa, .idi-cal, .idi-realizadas) li { margin: 0; padding: 0; }
:is(#page-container, body) :is(.idi-escena__titulo, .idi-ficha__titulo) a { color: inherit; text-decoration: none; }
:is(#page-container, body) :is(.idi-escena__titulo, .idi-ficha__titulo) a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.idi-btn.idi-btn--sm, .idi-btn.idi-btn--sm:hover { min-height: 40px; padding: 0 1.05em; font-size: .95rem; }

.idi-icono-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta, #1B1719);
  cursor: pointer;
  transition: background 150ms, transform 120ms ease-out;
}
:is(#page-container, body) a.idi-icono-btn { color: var(--tinta, #1B1719); }
.idi-icono-btn:hover { background: rgba(27, 23, 25, .06); }
.idi-icono-btn:active { transform: scale(.94); }
.idi-icono-btn svg { width: 22px; height: 22px; }

/* ============ MESA DE LUZ: el póster de cada actividad tiñe la luz del fondo ============ */

.idi-mesa {
  --acc: var(--fucsia, #DC2657);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(24px, 4vw, 48px) 0;
}
/* a todo el ancho de la pantalla, aunque esté dentro de una fila de Divi */
.idi-mesa--completo { width: 100vw; margin-inline: calc(50% - 50vw); }
body:has(.idi-mesa--completo) #page-container { overflow-x: clip; }

.idi-mesa__luz {
  position: absolute;
  inset: -12%;
  z-index: -2;
  background: color-mix(in srgb, var(--acc) 22%, var(--luz, #F4F5F7));
  transition: background 900ms ease;
}
.idi-mesa__luz img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: blur(46px) saturate(1.7) brightness(1.08);
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 900ms ease, transform 1400ms var(--idi-muelle);
}
.idi-mesa__luz img.is-on { opacity: .9; transform: scale(1); }
.idi-mesa::before { /* la superficie esmerilada de la mesa, que se funde con la página */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 60% at 20% 0%, rgba(255, 255, 255, .6), transparent 60%),
    linear-gradient(180deg, rgba(244, 245, 247, .05) 0%, rgba(244, 245, 247, .3) 72%, var(--luz, #F4F5F7) 100%);
}

.idi-mesa__wrap { width: min(1280px, 100% - 2 * var(--idi-gutter)); margin-inline: auto; }
.idi-mesa:not(.idi-mesa--completo) .idi-mesa__wrap { width: min(1280px, 100% - 2 * clamp(14px, 3vw, 32px)); }

.idi-mesa__intro { max-width: 44rem; margin-bottom: clamp(20px, 2.6vw, 32px); }
:is(#page-container, body) .idi-mesa__intro h1 {
  font: 800 clamp(2rem, 3.9vw, 3.05rem)/1.02 var(--f-titulo, sans-serif);
  letter-spacing: -.028em;
  color: var(--tinta, #1B1719);
}
:is(#page-container, body) .idi-mesa__intro p { margin-top: 12px; max-width: 40rem; font-size: 1.08rem; color: var(--tinta-2, #4B4448); }

/* una escena: el póster apoyado en la mesa y su ficha de cristal */
.idi-escena {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
}
.idi-escena__poster { position: relative; aspect-ratio: 1; width: min(100%, 64vh); justify-self: end; touch-action: pan-y; }
.idi-escena__luz {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-poster, 18px);
  background: rgba(255, 255, 255, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 30px 80px -30px color-mix(in srgb, var(--acc) 70%, transparent);
}
.idi-escena__luz img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--r-poster, 18px);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 24px 48px -24px rgba(27, 23, 25, .45);
}

.idi-escena__ficha {
  display: grid;
  gap: 18px;
  align-content: start;
  min-width: 0;
  padding: clamp(22px, 3vw, 38px);
  border-radius: 26px;
  background: var(--cristal, rgba(255, 255, 255, .62));
  -webkit-backdrop-filter: var(--cristal-blur, blur(22px) saturate(170%));
  backdrop-filter: var(--cristal-blur, blur(22px) saturate(170%));
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 18px 50px -22px rgba(27, 23, 25, .35);
  line-height: 1.5;
}
:is(#page-container, body) .idi-escena__titulo {
  font: 700 clamp(1.7rem, 2.9vw, 2.45rem)/1.06 var(--f-titulo, sans-serif);
  letter-spacing: -.022em;
  color: var(--tinta, #1B1719);
}
:is(#page-container, body) .idi-escena__resumen { max-width: 36rem; color: var(--tinta-2, #4B4448); }
/* en el banner, los botones van uno al lado del otro */
.idi-escena .idi-acciones .idi-btn { flex: 0 1 auto; }

/* bandeja: las otras próximas actividades */
.idi-bandeja { display: flex; align-items: center; gap: 14px; margin-top: clamp(22px, 3vw, 34px); }
.idi-bandeja__lista { display: flex; gap: 12px; padding: 4px !important; overflow-x: auto; scrollbar-width: none; }
.idi-bandeja__lista::-webkit-scrollbar { display: none; }
.idi-miniatura {
  position: relative;
  flex: none;
  display: block;
  width: 74px;
  height: 74px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(27, 23, 25, .45);
  transition: transform 200ms var(--idi-muelle), box-shadow 200ms;
  -webkit-tap-highlight-color: transparent;
}
.idi-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.idi-miniatura[aria-current="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--acc), 0 10px 22px -10px rgba(27, 23, 25, .5); }
.idi-miniatura:active { transform: scale(.95); }
.idi-miniatura__progreso { position: absolute; inset: auto 0 0 0; height: 4px; background: rgba(255, 255, 255, .5); }
.idi-miniatura__progreso i { display: block; width: 0; height: 100%; background: var(--acc); }
.idi-bandeja__contador { font-weight: 700; color: var(--tinta-2, #4B4448); white-space: nowrap; }
.idi-bandeja__pausa { margin-left: auto; }
.idi-bandeja__pausa svg { width: 1.1em; height: 1.1em; }

/* sin próximas actividades: una invitación, no una disculpa */
.idi-mesa__vacio {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  max-width: 980px;
  padding: clamp(26px, 4vw, 52px);
  border-radius: 26px;
  background: var(--cristal, rgba(255, 255, 255, .62));
  -webkit-backdrop-filter: var(--cristal-blur, blur(22px) saturate(170%));
  backdrop-filter: var(--cristal-blur, blur(22px) saturate(170%));
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 18px 50px -22px rgba(27, 23, 25, .35);
}
.idi-mesa__cara { width: clamp(110px, 14vw, 170px); height: auto; }
:is(#page-container, body) .idi-mesa__vacio h2 { font: 700 clamp(1.9rem, 3.4vw, 2.8rem)/1.06 var(--f-titulo, sans-serif); letter-spacing: -.022em; color: var(--tinta, #1B1719); }
:is(#page-container, body) .idi-mesa__vacio p { margin-top: 10px; max-width: 34rem; color: var(--tinta-2, #4B4448); }
.idi-mesa__vacio .idi-acciones { margin-top: 22px; }
.idi-mesa__vacio .idi-acciones .idi-btn { flex: 0 1 auto; }

/* ============ CALENDARIO ============ */

.idi-cal { scroll-margin-top: 100px; }
.idi-cal__cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; margin-bottom: 28px; }
:is(#page-container, body) .idi-cal__cab h2 { font: 700 clamp(1.65rem, 3vw, 2.35rem)/1.06 var(--f-titulo, sans-serif); letter-spacing: -.022em; color: var(--tinta, #1B1719); }
:is(#page-container, body) .idi-cal__cab p { margin-top: 8px; max-width: 40rem; color: var(--tinta-2, #4B4448); }
.idi-cal__barra { display: flex; align-items: center; gap: 8px; }
.idi-cal__mes { min-width: 11ch; font: 700 1.35rem/1 var(--f-titulo, sans-serif); text-align: center; }
.idi-cal[aria-busy="true"] .idi-cal__cuerpo { opacity: .55; transition: opacity 200ms 150ms; }

.idi-cal__cuerpo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.idi-cal__rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.idi-cal__dsem { padding: 6px 8px; font-size: .85rem; font-weight: 700; color: var(--tinta-3, #6E676C); }
.idi-dia { display: flex; flex-direction: column; gap: 5px; min-width: 0; min-height: 92px; padding: 8px; border-top: 1px solid var(--linea, rgba(27, 23, 25, .1)); }
.idi-dia--fuera { border-top-color: transparent; }
.idi-dia--con { border-radius: 14px; border-top-color: transparent; background: #fff; box-shadow: 0 1px 2px rgba(27, 23, 25, .06), inset 0 0 0 1px var(--linea, rgba(27, 23, 25, .1)); }
.idi-dia__num { font-size: .95rem; font-weight: 700; line-height: 1.4; }
.idi-dia--pasado .idi-dia__num { color: #a9a3a8; }
.idi-dia--hoy .idi-dia__num { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--tinta, #1B1719); color: #fff; }

:is(#page-container, body) a.idi-cal__sesion {
  --c: var(--fucsia, #DC2657);
  display: block;
  padding: 5px 7px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--c) 13%, white);
  color: color-mix(in srgb, var(--c) 60%, black);
  color: oklch(from var(--c) min(l, .45) c h);
  box-shadow: inset 3px 0 0 var(--c);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  transition: transform 120ms ease-out, background 150ms;
}
:is(#page-container, body) a.idi-cal__sesion:hover { background: color-mix(in srgb, var(--c) 22%, white); }
.idi-cal__sesion:active { transform: scale(.96); }
.idi-cal__sesion span { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
:is(#page-container, body) a.idi-cal__sesion.is-pasada { opacity: .85; } /* el color gris lo pone el servidor */

/* la agenda: la lista del mes (en el móvil es el calendario) */
:is(#page-container, body) .idi-cal__agenda h3 { margin-bottom: 12px; font: 700 1.25rem/1.2 var(--f-titulo, sans-serif); color: var(--tinta, #1B1719); }
.idi-agenda { display: grid; gap: 10px; }
:is(#page-container, body) a.idi-agenda__item {
  --c: var(--fucsia, #DC2657);
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
  color: var(--tinta, #1B1719);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--linea, rgba(27, 23, 25, .1));
  transition: transform 120ms ease-out, box-shadow 150ms;
}
:is(#page-container, body) a.idi-agenda__item:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 10px 24px -16px rgba(27, 23, 25, .5); }
.idi-agenda__item:active { transform: scale(.985); }
.idi-agenda__fecha {
  display: grid;
  place-items: center;
  align-content: center;
  height: 58px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c) 12%, white);
  color: color-mix(in srgb, var(--c) 60%, black);
  color: oklch(from var(--c) min(l, .45) c h);
}
.idi-agenda__fecha b { font: 800 1.45rem/1 var(--f-titulo, sans-serif); }
.idi-agenda__fecha small { font-size: .78rem; font-weight: 700; line-height: 1.3; }
.idi-agenda__txt b { display: block; line-height: 1.25; }
.idi-agenda__txt span { display: block; margin-top: 2px; font-size: .9rem; line-height: 1.35; color: var(--tinta-3, #6E676C); }
.idi-agenda__vacia { display: grid; gap: 14px; justify-items: start; padding: 18px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea, rgba(27, 23, 25, .1)); }
:is(#page-container, body) .idi-agenda__vacia p { color: var(--tinta-2, #4B4448); }
.idi-cal .is-cargando { cursor: progress; opacity: .7; }

/* ============ FICHA EMERGENTE (dialog nativo: foco atrapado, Esc para cerrar) ============ */

.idi-hoja { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; }
.idi-hoja::backdrop { background: rgba(27, 23, 25, .38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
html.idi-sin-scroll { overflow: hidden; }
.idi-hoja__marco { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; }
.idi-hoja__caja { position: relative; width: min(980px, 100%); transform-origin: var(--ox, 50%) var(--oy, 50%); }
.idi-hoja__panel {
  max-height: min(88vh, 860px);
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 30px;
  box-shadow: 0 40px 100px -30px rgba(27, 23, 25, .6);
}
.idi-hoja__panel:focus { outline: none; }
.idi-hoja__cerrar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px -8px rgba(27, 23, 25, .4);
}
.idi-hoja__cerrar:hover { background: rgba(255, 255, 255, .92); }
.idi-hoja__asa { display: none; }

.idi-ficha--hoja {
  --pad: clamp(18px, 3vw, 30px);
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  margin: 0;
  padding: var(--pad);
  border-radius: 30px;
  background: rgba(255, 255, 255, .82);
}
.idi-ficha--hoja .idi-ficha__poster { position: sticky; top: 0; }
.idi-ficha--hoja .idi-ficha__cuerpo { padding-right: 34px; } /* sitio para el botón de cerrar */
:is(#page-container, body) .idi-ficha__titulo { font: 700 clamp(1.5rem, 2.4vw, 2rem)/1.08 var(--f-titulo, sans-serif); letter-spacing: -.02em; color: var(--tinta, #1B1719); }
.idi-ficha--hoja .idi-acciones .idi-btn--cristal { flex: 1 1 auto; }

/* ============ PRÓXIMAS: cada actividad con su ficha completa ============ */

.idi-proximas { display: grid; gap: clamp(28px, 4vw, 48px); }
.idi-proximas .idi-ficha { margin: 0; }
:is(#page-container, body) .idi-proximas + .idi-cal { margin-top: clamp(56px, 8vw, 104px); } /* el calendario, como sección aparte */
.idi-proximas .idi-ficha .idi-acciones .idi-btn--cristal { flex: 1 1 auto; }

/* ============ REALIZADAS: filtros, buscador y malla de pósters ============ */

/* no se queda fijo al bajar (tapaba las fichas): el buscador y el botón "Filtrar", que despliega el panel */
.idi-filtros {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px;
  border-radius: 22px;
  background: var(--cristal, rgba(255, 255, 255, .62));
  -webkit-backdrop-filter: var(--cristal-blur, blur(22px) saturate(170%));
  backdrop-filter: var(--cristal-blur, blur(22px) saturate(170%));
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 18px 50px -22px rgba(27, 23, 25, .35);
}
.idi-filtros__barra { display: flex; gap: 10px; align-items: center; }
.idi-filtros__barra .idi-buscador { flex: 1 1 auto; min-width: 0; }
.idi-btn.idi-filtros__abrir, .idi-btn.idi-filtros__abrir:hover { flex: none; min-height: 46px; padding: 0 1.1em; }
.idi-filtros__abrir svg { width: 1.2em; height: 1.2em; }
.idi-filtros__abrir[aria-expanded="true"] { background: #fff !important; box-shadow: inset 0 0 0 1px var(--linea, rgba(27, 23, 25, .1)); }
.idi-filtros__n { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .4em; border-radius: 999px; background: var(--fucsia, #DC2657); color: #fff; font-size: .78rem; font-weight: 700; }
.idi-filtros__n[hidden] { display: none; }
/* el panel es un <dialog>: abierto con show() queda en su sitio, bajo el buscador */
.idi-filtros__panel { position: static; width: auto; max-width: none; height: auto; margin: 0; padding: 6px 0 0; border: 0; background: none; color: inherit; }
.idi-filtros__panel[open] { display: grid; gap: 12px; }
.idi-filtros__cab { display: none; }
.idi-filtros__pie { display: flex; justify-content: flex-end; }
.idi-btn.idi-filtros__ver, .idi-btn.idi-filtros__ver:hover { min-height: 46px; padding: 0 1.3em; }
/* en el móvil (showModal): hoja que sube desde abajo, con su velo; el botón para verlas, siempre a mano */
.idi-filtros__panel:modal {
  position: fixed;
  inset: auto 0 0;
  box-sizing: border-box;
  width: 100%;
  max-height: min(86vh, 760px);
  max-height: min(86dvh, 760px);
  padding: 0 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 26px 26px 0 0;
  background: #fff;
  box-shadow: 0 -24px 60px -24px rgba(27, 23, 25, .5);
  transition: transform 320ms var(--idi-muelle, cubic-bezier(.22, 1, .36, 1));
}
@starting-style { .idi-filtros__panel:modal { transform: translateY(100%); } }
.idi-filtros__panel::backdrop { background: rgba(27, 23, 25, .4); }
.idi-filtros__panel:modal .idi-filtros__cab {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -18px;
  padding: 14px 12px 8px 18px;
  background: #fff;
  font: 700 1.2rem/1.2 var(--f-titulo, sans-serif);
}
.idi-filtros__panel:modal .idi-filtros__pie {
  position: sticky;
  bottom: 0;
  margin: 0 -18px;
  padding: 12px 18px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 28%);
}
.idi-filtros__panel:modal .idi-filtros__ver { flex: 1 1 auto; }
/* lo filtrado, junto al número de actividades: cada filtro con su ✕ */
.idi-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 18px; }
.idi-activos { display: flex; flex-wrap: wrap; gap: 8px; }
.idi-activos:empty { display: none; }
:is(#page-container, body) a.idi-activo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 13px;
  border-radius: 999px;
  background: var(--tinta, #1B1719);
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
a.idi-activo::after { content: "✕"; font-size: .8em; opacity: .75; }
a.idi-activo:active { transform: scale(.96); }
.idi-filtros__fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
/* las etiquetas en su columna: las opciones de todas las filas empiezan a la misma altura */
.idi-filtros__fila--chips { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 8px; align-items: start; }
.idi-filtros__fila > b { padding-top: 8px; font-size: .92rem; color: var(--tinta-3, #6E676C); }
.idi-filtros__chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
:is(#page-container, body) a.idi-filtro {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  box-shadow: inset 0 0 0 1px var(--linea, rgba(27, 23, 25, .1));
  color: var(--tinta, #1B1719);
  font-size: .93rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 120ms ease-out; /* el cambio de selección, al instante: un fundido deja el texto ilegible a medias */
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { :is(#page-container, body) a.idi-filtro:hover { background: #fff; } }
.idi-filtro:active { transform: scale(.96); }
:is(#page-container, body) a.idi-filtro[aria-current="true"] { background: var(--tinta, #1B1719); color: #fff; box-shadow: none; }
.idi-buscador {
  flex: 1 1 260px;
  min-height: 46px;
  padding: 0 16px 0 42px;
  border: 1px solid rgba(27, 23, 25, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E676C' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 14px 50% / 18px no-repeat;
  color: var(--tinta, #1B1719);
  font: inherit;
  font-size: 1rem; /* 16 px: en el móvil no hace zoom al escribir */
}
.idi-buscador:focus-visible { outline: 3px solid var(--fucsia, #DC2657); outline-offset: 2px; }
:is(#page-container, body) .idi-resultado { margin: 0; font-weight: 600; color: var(--tinta-2, #4B4448); }
.idi-realizadas[aria-busy="true"] .idi-realizadas__lista { opacity: .55; transition: opacity 200ms 150ms; }

.idi-malla { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px 22px; }
:is(#page-container, body) a.idi-tarjeta { display: grid; gap: 10px; align-content: start; color: var(--tinta, #1B1719); text-decoration: none; }
.idi-tarjeta__img {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-poster, 18px);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--linea, rgba(27, 23, 25, .1));
  transition: transform 250ms var(--idi-muelle), box-shadow 250ms;
}
.idi-tarjeta__img img { width: 100%; height: 100%; object-fit: contain; }
@media (hover: hover) {
  .idi-tarjeta:hover .idi-tarjeta__img { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--linea, rgba(27, 23, 25, .1)), 0 18px 34px -20px rgba(27, 23, 25, .55); }
}
.idi-tarjeta:active .idi-tarjeta__img { transform: scale(.98); }
.idi-tarjeta__sin {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 18px;
  background: color-mix(in srgb, var(--acc) 16%, white);
  color: color-mix(in srgb, var(--acc) 55%, black);
  color: oklch(from var(--acc) min(l, .42) c h);
  font: 700 1.1rem/1.15 var(--f-titulo, sans-serif);
  text-align: center;
}
.idi-tarjeta b { display: -webkit-box; overflow: hidden; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.idi-tarjeta__cuando { font-size: .92rem; color: var(--tinta-3, #6E676C); }
.idi-malla__mas { display: flex; justify-content: center; margin-top: 32px; }
.idi-malla__vacia { display: grid; gap: 14px; justify-items: center; padding: 40px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea, rgba(27, 23, 25, .1)); text-align: center; }

/* ============ PORTADA: estante de realizadas y vídeos ============ */

:is(#page-container, body) ul.idi-estante[class] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  gap: 20px;
  margin: 0;
  padding: 6px 4px 18px;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.idi-estante > li { margin: 0; padding: 0; scroll-snap-align: start; }

.idi-video { display: grid; gap: 10px; margin: 0; }
.idi-video__marco { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 22px; background: var(--tinta, #1B1719); }
.idi-video__marco img, .idi-video__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border: 0; object-fit: cover; }
:is(#page-container, body) a.idi-video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(27, 23, 25, 0) 40%, rgba(27, 23, 25, .45));
  color: var(--fucsia, #DC2657);
  -webkit-tap-highlight-color: transparent;
}
.idi-video__play span {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 #fff, 0 14px 34px -12px rgba(0, 0, 0, .55);
  transition: transform 120ms ease-out;
}
.idi-video__play:active span { transform: scale(.94); }
.idi-video__play svg { width: 30px; height: 30px; margin-left: 4px; }
.idi-video figcaption { display: grid; gap: 2px; line-height: 1.3; }
.idi-video small { font-size: .92rem; color: var(--tinta-3, #6E676C); }

@media (max-width: 1080px) {
  .idi-cal__cuerpo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .idi-escena { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .idi-escena__poster { width: min(100%, 520px); justify-self: center; }
  .idi-escena__ficha { position: relative; margin-top: -56px; } /* la ficha de cristal se apoya sobre el póster */
  .idi-escena__resumen, .idi-escena .idi-dato--con { display: none; } /* el botón sube: el detalle está en la ficha */
  .idi-escena .idi-acciones .idi-btn { flex: 1 1 auto; }
  .idi-mesa__vacio { grid-template-columns: minmax(0, 1fr); }
  .idi-cal__rejilla { display: none; } /* en el móvil, el calendario es la agenda */
  /* filtros: la etiqueta encima de sus opciones, que se reparten en varias líneas dentro de la hoja */
  .idi-filtros { padding: 12px; }
  .idi-filtros__fila--chips { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .idi-filtros__fila > b { padding-top: 0; }
  .idi-malla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }

  /* la ficha emergente pasa a ser una hoja que sube desde abajo */
  .idi-hoja__marco { place-items: end center; padding: 0; }
  .idi-hoja__caja { width: 100%; transform-origin: 50% 100%; }
  .idi-hoja__panel { max-height: 92vh; max-height: 92dvh; border-radius: 26px 26px 0 0; }
  .idi-ficha--hoja { --pad: 20px; grid-template-columns: minmax(0, 1fr); border-radius: 26px 26px 0 0; padding-top: 30px; }
  .idi-ficha--hoja .idi-ficha__poster { position: static; justify-self: center; width: min(100%, 42vh); }
  .idi-ficha--hoja .idi-ficha__cuerpo { padding-right: 0; }
  /* el asa: una franja arriba que se arrastra hacia abajo para cerrar (la barrita es solo la señal) */
  .idi-hoja__asa { display: block; position: absolute; top: 0; left: 0; right: 64px; z-index: 3; height: 30px; touch-action: none; cursor: grab; }
  .idi-hoja__asa::after { content: ""; position: absolute; top: 9px; left: calc(50% + 32px); width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: rgba(27, 23, 25, .25); }
  /* el botón principal, siempre a mano abajo */
  .idi-ficha--hoja .idi-acciones {
    position: sticky;
    bottom: calc(-1 * var(--pad));
    z-index: 2;
    margin: 0 calc(-1 * var(--pad)) calc(-1 * var(--pad));
    padding: 14px var(--pad) calc(var(--pad) + env(safe-area-inset-bottom));
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .94) 30%);
  }
  .idi-ficha--hoja .idi-acciones .idi-btn { flex: 1 1 0; }
  .idi-ficha--hoja .idi-acciones .idi-btn--ics { flex: 0 0 52px; padding: 0; }
  .idi-ficha--hoja .idi-acciones .idi-btn--ics span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .idi-ficha--hoja .idi-acciones .idi-btn--ver { display: none; } /* el título ya lleva a la ficha completa */
}

@media (max-width: 520px) {
  .idi-bandeja { gap: 10px; }
  .idi-bandeja__contador { display: none; }
  .idi-bandeja__pausa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .idi-mesa__luz img { transform: none !important; transition: opacity 200ms ease; }
  .idi-filtros__panel:modal { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .idi-escena__ficha, .idi-mesa__vacio, .idi-hoja__cerrar, .idi-filtros { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .idi-ficha--hoja { background: #fff; }
}
@media (prefers-contrast: more) {
  .idi-escena__ficha, .idi-mesa__vacio, .idi-ficha--hoja { background: #fff; border-color: var(--tinta, #1B1719); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .idi-escena__ficha, .idi-mesa__vacio { background: rgba(255, 255, 255, .94); }
}