/* IDI Actividades · ficha de la actividad ("mesa de luz": el póster ilumina el cristal en el que se apoya).
   Usa los tokens del tema hijo (--tinta, --fucsia, --f-titulo...) y sus botones .idi-btn. */

.idi-ficha {
  --acc: var(--fucsia, #DC2657);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip; /* sin crear zona de scroll: así funcionan los elementos fijos (sticky) de la ficha emergente */
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 28px);
  align-items: start;
  margin: 0 0 2.4em;
  padding: clamp(14px, 2.4vw, 22px);
  border-radius: 28px;
  background: rgba(255, 255, 255, .64);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow:
    inset 0 1px 0 #fff,
    0 30px 70px -42px color-mix(in srgb, var(--acc) 65%, rgba(27, 23, 25, .6));
  line-height: 1.5;
}
/* la luz: el propio póster, muy desenfocado, bajo el cristal */
.idi-ficha::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  background: var(--luz-img, none) center / cover no-repeat, color-mix(in srgb, var(--acc) 24%, white);
  filter: blur(56px) saturate(1.5);
  opacity: .42;
}
.idi-ficha--realizada::before { opacity: .26; filter: blur(56px) saturate(.9); }
.idi-ficha--sin-poster { grid-template-columns: minmax(0, 1fr); }

.idi-ficha__poster img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 22px 44px -24px rgba(27, 23, 25, .5);
}

.idi-ficha__cuerpo { display: grid; gap: 16px; align-content: start; min-width: 0; }

/* chips: tipo, modalidad y estado */
:is(.idi-ficha, .idi-escena) .idi-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.idi-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.2;
  background: rgba(255, 255, 255, .78);
  box-shadow: inset 0 0 0 1px var(--linea, rgba(27, 23, 25, .1));
  color: var(--tinta-2, #4B4448);
}
.idi-chip svg { width: 15px; height: 15px; flex: none; }
/* el texto toma el tono del póster con la luz limitada: con pósters claros (amarillo) sigue siendo legible (AA) */
.idi-chip--acc {
  background: color-mix(in srgb, var(--acc) 14%, white);
  color: color-mix(in srgb, var(--acc) 50%, black);
  color: oklch(from var(--acc) min(l, .45) c h);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 30%, transparent);
}
.idi-chip--oliva { background: #EEF1D6; color: var(--oliva-txt, #56600F); box-shadow: inset 0 0 0 1px rgba(157, 167, 53, .45); }
.idi-chip--marcha { background: var(--tinta, #1B1719); color: #fff; box-shadow: none; }
.idi-chip--realizada { background: #EFEDF0; color: #5d5760; }

/* cuándo, dónde, con quién */
:is(.idi-ficha, .idi-escena) .idi-datos { display: grid; gap: 12px; margin: 0; padding: 0; }
.idi-dato { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.idi-dato dt {
  margin: 0;
  padding-top: 1px;
  color: color-mix(in srgb, var(--acc) 60%, black);
  color: oklch(from var(--acc) min(l, .5) c h);
}
.idi-dato dt svg { display: block; width: 22px; height: 22px; }
.idi-dato dd { margin: 0; padding: 0; }
.idi-dato b { display: block; font-weight: 700; line-height: 1.35; color: var(--tinta, #1B1719); }
.idi-dato dd span { display: block; margin-top: 2px; color: var(--tinta-2, #4B4448); }

/* Divi da relleno y viñetas a las listas con "#left-area ul/ol": :is(#left-area, body) pesa como un id
   y vale también fuera de #left-area (plantillas del Theme Builder). */
:is(#left-area, body) .idi-ficha .idi-sesiones,
:is(#left-area, body) :is(.idi-ficha, .idi-escena) .idi-precio ul { padding: 0; list-style: none; line-height: inherit; }

/* sesiones */
.idi-ficha .idi-sesiones { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.idi-ficha .idi-sesiones li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  margin: 0;
  padding: 9px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .74);
  box-shadow: inset 0 0 0 1px var(--linea, rgba(27, 23, 25, .1));
  font-size: .95rem;
  line-height: 1.35;
}
.idi-ficha .idi-sesiones li::marker { content: none; }
.idi-sesion__dia { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.idi-sesion__dia svg { width: 16px; height: 16px; flex: none; color: var(--oliva-txt, #56600F); }
.idi-sesion__hora { color: var(--tinta-2, #4B4448); font-variant-numeric: tabular-nums; white-space: nowrap; }
.idi-sesion__titulo { grid-column: 1 / -1; color: var(--tinta-2, #4B4448); }
.idi-ficha .idi-sesiones li.is-marcada { box-shadow: inset 0 0 0 2px var(--acc); background: rgba(255, 255, 255, .9); }
.idi-ficha .idi-sesiones li.is-pasada { background: rgba(255, 255, 255, .42); color: var(--tinta-3, #6E676C); }

/* precio */
.idi-precio {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .8);
  box-shadow: inset 0 0 0 1px var(--linea, rgba(27, 23, 25, .1));
}
:is(.idi-ficha, .idi-escena) .idi-precio p { margin: 0; padding: 0; color: var(--tinta-2, #4B4448); }
:is(.idi-ficha, .idi-escena) .idi-precio .idi-precio__linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--tinta, #1B1719); }
.idi-precio__importe { font: 800 2.1rem/1 var(--f-titulo, sans-serif); letter-spacing: -.02em; }
.idi-precio__cuando { font-weight: 700; color: var(--fucsia-lo, #B5153F); }
:is(.idi-ficha, .idi-escena) .idi-precio ul { display: grid; gap: 3px; margin: 4px 0 0; padding: 0; list-style: none; font-size: .95rem; color: var(--tinta-2, #4B4448); }
:is(.idi-ficha, .idi-escena) .idi-precio li { margin: 0; }
:is(.idi-ficha, .idi-escena) .idi-precio li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 9px 2px 2px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--acc) 70%, white);
}

/* botones: a lo ancho, el principal primero */
.idi-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.idi-acciones .idi-btn { flex: 1 1 100%; }
.idi-acciones .idi-btn svg { width: 1.1em; height: 1.1em; flex: none; }
.idi-btn--agotado { filter: grayscale(1) opacity(.6); pointer-events: none; }
:is(.idi-ficha, .idi-escena) .idi-nota { flex-basis: 100%; margin: 0; padding: 0; font-size: .93rem; color: var(--tinta-3, #6E676C); }
:is(.idi-ficha, .idi-escena) .idi-ficha__hecha { flex-basis: 100%; margin: 0; padding: 0; font-weight: 600; color: #5d5760; }

.idi-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .idi-ficha { grid-template-columns: minmax(0, 1fr); border-radius: 24px; }
  .idi-ficha__poster { justify-self: center; width: min(100%, 420px); }
}

@media (prefers-reduced-transparency: reduce) {
  .idi-ficha { background: #fff; }
  .idi-ficha::before { display: none; }
}
@media (prefers-contrast: more) {
  .idi-ficha { background: #fff; border-color: var(--tinta, #1B1719); }
  .idi-ficha::before { display: none; }
}