/* Tema de color del home. "Noche" es el default (ver DEFAULT_HOME_THEME),
   "Lima" la excepción — mismo par que usa el resto del sitio. Las variables
   van en :root para que el fondo de página completo (html/body) siga el
   tema, no sólo la tarjeta. */
:root, :root[data-theme="noche"] {
  --bg: #0B0B0D; --fg: #f2f2f0; --muted: #a9a9a2; --faint: #7a7a72; --line: #26261f;
  --accent: #B8F500; --accent-fg: #0B0B0D; --secondary: #7C3AED;
  --thumb-a: #1a1a16; --thumb-b: #232320; --fav-off: #55554d;
}
:root[data-theme="lima"] {
  --bg: #fff; --fg: #0B0B0D; --muted: #555; --faint: #8a8a80; --line: #e8e8e0;
  --accent: #B8F500; --accent-fg: #0B0B0D; --secondary: #7C3AED;
  --thumb-a: #ececec; --thumb-b: #f4f4f4; --fav-off: #b7b7ad;
}

html, body { background: var(--bg); }

.home { max-width: 64rem; margin: 2rem auto; padding: 0 1.25rem 3rem; min-height: 70vh; font-family: system-ui, sans-serif; color: var(--fg); }
.home h1 { font-size: 1.25rem; margin: 0; display: flex; align-items: center; gap: .5rem; }
.home h1::before { content: ""; width: .6rem; height: .6rem; border-radius: 2px; background: var(--accent); flex: none; }
.home__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.home__toggle { display: inline-flex; gap: .2rem; font-size: .8rem; }
.home__toggle a { color: var(--muted); text-decoration: none; padding: .25rem .7rem; border-radius: 999px; }
.home__toggle a.home__toggle--on { background: var(--accent); color: var(--accent-fg); font-weight: 600; }


.home__list { list-style: none; padding: 0; margin: 1rem 0 0; }
.home__event { display: flex; align-items: center; gap: .75rem; padding: .85rem 0; border-top: 1px solid var(--line); }
.home__event-link { display: flex; align-items: center; gap: .75rem; flex: 1; text-decoration: none; color: inherit; }
.home__event-thumb { width: 44px; height: 55px; object-fit: cover; border-radius: 4px; flex: none; }
.home__event-name { display: block; font-weight: 600; }
.home__event-meta { display: block; color: var(--muted); font-size: .85rem; }

.home__grid { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem; }
/* Escritorio: ancho fijo de 4 columnas con tarjetas más grandes. */
@media (min-width: 48rem) {
  .home__grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}
.home__card-link { text-decoration: none; color: inherit; display: block; }
.home__card-flyer { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; border-radius: 8px; display: block; }
.home__card-flyer--placeholder { background: repeating-linear-gradient(45deg, var(--thumb-a), var(--thumb-a) 10px, var(--thumb-b) 10px, var(--thumb-b) 20px); }
.home__card-name { font-weight: 600; font-size: .9rem; margin-top: .4rem; }
.home__card-meta { color: var(--muted); font-size: .8rem; }
.home .favorite-toggle { border: 0; background: none; padding: .2rem; line-height: 0; color: var(--fav-off); cursor: pointer; }
.home .favorite-toggle--on { color: var(--fg); }

/* Estrella sobre la esquina superior derecha del flyer. */
.home__card { position: relative; }
.home__card-fav { position: absolute; top: .4rem; right: .4rem; z-index: 1; }
.home .home__card-fav .favorite-toggle { padding: .3rem; border-radius: 999px; background: rgba(0, 0, 0, .5); color: #fff; }
.home .home__card-fav .favorite-toggle--on { color: #ffcf33; }