.grilla__vigencia {
  margin-bottom: var(--space-5);
  color: var(--text-subtle);
}

.grilla {
  display: flex;
  flex-direction: column;
  border-top: var(--border-hairline) solid var(--border);
}
.grilla__daylabel,
.grilla__time { display: none; }

.grilla__cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-bottom: var(--border-hairline) solid var(--border);
  min-width: 0;
}
@media (max-width: 1023px) {
  .grilla:not(.is-js) .grilla__cell:not(.grilla__cell--hoy) { display: none; }
}

.grilla__cell-time {
  color: var(--action);
  font-variant-numeric: tabular-nums;
}

.grilla__cell-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--text);
  margin: 0;
}

.grilla__cell-title a {
  transition: color var(--duration-fast) var(--ease-out);
}
.grilla__cell-title a:hover { color: var(--action); }

.grilla__cell-detail {
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.grilla__cell.is-live {
  position: relative;
  background: var(--surface-alt);
  padding-inline: var(--space-5);
  border-left: var(--border-thick) solid var(--action);
}

.grilla__live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--action);
  font-weight: var(--weight-semibold);
}

.grilla__hint {
  padding: var(--space-7);
  border: var(--border-hairline) dashed var(--border-strong);
  color: var(--text-subtle);
  text-align: center;
}

@media (min-width: 1024px) {
  .day-tabs { display: none; }

  .grilla {
    display: grid;
    grid-template-columns: 4.5rem repeat(7, minmax(0, 1fr));
    gap: 1px;
    border: var(--border-hairline) solid var(--border);
    background: var(--border);
  }
  .grilla__daylabel,
  .grilla__time,
  .grilla__cell {
    background: var(--surface);
    border: none;
  }

  .grilla__daylabel {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-row: 1;
    grid-column: var(--col);
    padding-block: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-subtle);
  }
  .grilla__daylabel.is-today {
    background: var(--ink-900);
    color: var(--white);
  }

  .grilla__time {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    grid-row: var(--row);
    grid-column: 1;
    padding: var(--space-4) var(--space-3);
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .grilla__cell {
    grid-row: var(--row);
    grid-column: var(--col) / span var(--span);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  .grilla__cell:hover { background: var(--surface-alt); }
  .grilla__cell-time { display: none; }
  .grilla__cell-title {
    font-size: var(--step--1);
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  .grilla__cell-detail {
    font-size: var(--step--2);
    line-height: var(--leading-snug);
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  .grilla__cell.is-live {
    background: var(--ink-900);
    border-left: none;
    padding-inline: var(--space-4);
    color: var(--white);
  }

  .grilla__cell.is-live:hover { background: var(--ink-800); }
  .grilla__cell.is-live .grilla__cell-title { color: var(--white); }
  .grilla__cell.is-live .grilla__cell-title a:hover { color: var(--red-400); }
  .grilla__cell.is-live .grilla__cell-detail { color: var(--gray-400); }
  .grilla__cell.is-live .grilla__live { color: var(--red-400); }

  .grilla__hint { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .grilla { grid-template-columns: 3.75rem repeat(7, minmax(0, 1fr)); }
  .grilla__cell { padding: var(--space-3) var(--space-2); }
  .grilla__cell-title { font-size: var(--step--2); }
  .grilla__time { padding-inline: var(--space-2); }
}

.programs {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: var(--border-hairline) solid var(--border);
}

.programs .section-kicker { margin-bottom: var(--space-6); }