/* ==========================================================================
   GachaNews — Calendar (/calendar/) y widget «Coming up» de la portada.
   Fuente de verdad: Figma «Gachanews-v1», Calendar (Guide 2034:458, List 2054:620, Month 2055:620,
   Coming up 2043:1044; móvil 2042:373, 2056:426, 2056:805). Usa los tokens de main.css.
   Móvil primero; escritorio a partir de 1024 px.
   ========================================================================== */

/* 1. Cabecera: foto, título, resumen y cambio de vista */
.cal-head { position: relative; display: flex; flex-direction: column; gap: 12px; }
.cal-head__banner { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 170px; border-radius: var(--r-panel); background: var(--ink); }
.cal-head__banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(17, 18, 20, .1), rgba(17, 18, 20, .78)); }
.cal-head__media { position: absolute; inset: 0; z-index: -2; background: var(--ink); }
.cal-head__body { display: flex; flex-direction: column; gap: 6px; padding: 20px; }
.cal-head__title { color: #fff; }
.cal-head__sub { font: 400 16px/22px var(--font-ui); color: rgba(255, 255, 255, .86); font-variant-numeric: tabular-nums; }
.segmented--3 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 1024px) {
	.cal-head__banner { min-height: 220px; }
	.cal-head__body { padding: 40px; gap: 8px; max-width: calc(100% - 300px); }
	.cal-views { position: absolute; right: 32px; bottom: 32px; width: 240px; background: var(--surface); }
}

/* 2. Filtro por juego */
.cal-filter__chip { background: var(--game-soft, var(--brand-soft)); color: color-mix(in srgb, var(--game, var(--ink)) 88%, #000); }
.cal-filter__chip.game--none { color: var(--muted); }
.cal-filter__chip:hover { box-shadow: inset 0 0 0 2px var(--game, var(--ink)); }
.cal-filter__chip.is-active { background: var(--game, var(--ink)); color: #fff; }
.cal-filter__chip:not([class*="game--"]) { background: var(--brand-soft); color: var(--ink); }
.cal-filter__chip.is-active:not([class*="game--"]), .cal-filter__chip.game--none.is-active { background: var(--ink); color: #fff; }

/* 3. Arriba: lo próximo más gordo + Live now */
.cal-top { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1024px) {
	.cal-top { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar); gap: 12px; align-items: stretch; }
	.cal-top--solo { grid-template-columns: 1fr; }
}

.cal-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; min-height: 440px; border-radius: var(--r-panel); background: var(--ink); }
.cal-hero__link { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: 20px; color: #fff; text-decoration: none; }
.cal-hero__link::before { content: ""; position: absolute; inset: auto 0 0; height: 78%; z-index: -1; background: linear-gradient(to bottom, rgba(17, 18, 20, 0), rgba(17, 18, 20, .9)); }
.cal-hero__media { position: absolute; inset: 0; z-index: -2; background: var(--game, var(--ink)); }
.cal-hero__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cal-hero__title { color: #fff; overflow-wrap: anywhere; text-wrap: balance; transition: color .15s; }
a.cal-hero__link:hover .cal-hero__title { color: var(--brand-bright); }
.cal-hero__meta { gap: 6px; }
.cal-hero__read { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #fff; }
.cal-count { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cal-count__tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 72px; padding: 8px; border-radius: 14px; background: rgba(17, 18, 20, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cal-count__n { font: 700 34px/1 var(--font-head); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.cal-count__u { font: 700 12px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
@media (min-width: 1024px) {
	.cal-hero { min-height: 420px; }
	.cal-hero__link { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 32px; }
	.cal-hero__body { max-width: 560px; }
	.cal-count { flex: none; grid-template-columns: repeat(3, 96px); }
	.cal-count__tile { min-height: 96px; border-radius: 16px; }
	.cal-count__n { font-size: 52px; }
}

/* 4. Filas con miniatura (Live now al lado del destacado y Coming up de la portada) */
.cal-live--rows { gap: 12px; }
.cal-live__rows, .cal-soon__rows { list-style: none; margin: 0; padding: 4px 12px; justify-content: space-between; flex: 1; }
.cal-row__link { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: inherit; text-decoration: none; }
.cal-row__thumb { width: 64px; aspect-ratio: 1; flex: none; border-radius: var(--r-inner); background: var(--game-soft, var(--brand-soft)); }
.cal-row__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-row__title { color: var(--ink); overflow-wrap: anywhere; transition: color .15s; }
a.cal-row__link:hover .cal-row__title { color: var(--brand-strong); }
.cal-row__when { font: 600 13px/16px var(--font-ui); color: var(--brand-strong); }
.cal-row .meta__game { color: var(--game, var(--muted)); }
@media (min-width: 1024px) { .cal-live--rows { padding: 20px 12px 12px; } .cal-live--rows > h2 { padding-inline: 8px; } }

.cal-soon__rows { padding: 4px 12px; }
.cal-soon .cal-row__thumb { width: 56px; }
.cal-soon__all { background: var(--surface); width: 36px; height: 36px; }
.cal-soon .section-head { min-height: 36px; }

/* 5. Tarjetas del calendario (Next up, List, Live now en tarjetas, día del mes) */
.cal-next__grid, .cal-cards { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -12px; padding-inline: 12px; }
.cal-next__grid::-webkit-scrollbar, .cal-cards::-webkit-scrollbar { display: none; }
.cal-next__grid > .cal-item, .cal-cards > .cal-item { width: 250px; flex: none; scroll-snap-align: start; }
.cal-week__grid { display: grid; gap: 8px; }
@media (min-width: 1024px) {
	.cal-next__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; overflow: visible; margin: 0; padding: 0; }
	/* Live now: cuatro a la vista; si hay más, la fila se desliza. */
	.cal-cards { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 4); gap: 12px; margin: 0; padding: 0 0 4px; }
	.cal-next__grid > .cal-item, .cal-cards > .cal-item { width: auto; }
	.cal-week__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

.cal-item { background: var(--surface); border-radius: var(--r-tile); min-width: 0; display: flex; }
.cal-item__link { flex: 1; display: flex; flex-direction: column; padding: 8px; color: inherit; text-decoration: none; min-width: 0; }
.cal-item__media { position: relative; flex: none; aspect-ratio: 16 / 9; border-radius: var(--r-inner); background: var(--game-soft, var(--brand-soft)); }
.cal-item__media.is-empty { display: flex; align-items: flex-end; padding: 12px; }
.cal-item__noimg { font: 700 22px/26px var(--font-head); letter-spacing: -.01em; color: color-mix(in srgb, var(--game, var(--muted)) 88%, #000); opacity: .8; }
.cal-item__badge { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 5px 10px; border-radius: 999px; background: var(--surface); font: 700 12px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); font-variant-numeric: tabular-nums; }
.cal-item__body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px 8px 6px; min-width: 0; }
.cal-item .meta__game { color: var(--game, var(--muted)); }
.cal-item__title { color: var(--ink); overflow-wrap: anywhere; }
a.cal-item__link:hover .cal-item__title { color: var(--brand-strong); }
.cal-item__when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: auto; padding-top: 4px; }
.cal-item__go { margin-left: auto; color: var(--brand-strong); display: inline-flex; }
.cal-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--brand-soft); font: 600 13px/16px var(--font-ui); color: var(--brand-strong); white-space: nowrap; }

/* En fila: imagen a la izquierda (List y día del mes) */
.cal-item--row .cal-item__link { flex-direction: row; gap: 12px; }
.cal-item--row .cal-item__media { width: 112px; aspect-ratio: 1; }
.cal-item--row .cal-item__media.is-empty { padding: 10px; }
.cal-item--row .cal-item__noimg { font-size: 16px; line-height: 20px; }
.cal-item--row .cal-item__badge { top: 8px; left: 8px; padding: 4px 8px; }
.cal-item--row .cal-item__body { padding: 4px 4px 2px 0; gap: 4px; }
@media (min-width: 1024px) {
	.cal-item--row .cal-item__link { gap: 16px; }
	.cal-item--row .cal-item__media { width: 220px; aspect-ratio: 16 / 9; }
	.cal-item--row .cal-item__noimg { font-size: 24px; line-height: 28px; }
	.cal-item--row .cal-item__body { padding: 6px 8px 4px 0; gap: 6px; }
	.cal-item--card .cal-item__body { padding: 14px 10px 8px; gap: 8px; }
}

/* 6. La guía */
.cal-guide { padding: 8px; overflow: hidden; }
.cal-guide__scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--brand-soft-strong) transparent; }
.cal-guide__grid { --name: 0px; position: relative; min-width: 960px; display: flex; flex-direction: column; gap: 6px; padding-bottom: 4px; }
.cal-guide__ruler { position: relative; height: 48px; margin-left: var(--name); }
.cal-guide__tick { position: absolute; top: 6px; padding-left: 8px; font: 700 12px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.cal-guide__today { position: absolute; left: var(--now); bottom: 0; z-index: 3; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: var(--brand-strong); font: 700 12px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: #fff; white-space: nowrap; }

.cal-lane { display: flex; flex-direction: column; border-radius: 14px; background: var(--game-soft, var(--brand-soft)); }
.cal-lane.game--none { background: color-mix(in srgb, var(--brand-soft) 70%, #fff); }
.cal-lane__name { position: sticky; left: 0; align-self: flex-start; padding: 8px 10px 0; font: 600 13px/16px var(--font-ui); color: color-mix(in srgb, var(--game, var(--muted)) 88%, #000); }
.cal-lane__track { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 76px; padding: 8px 0; border-radius: 0 14px 14px 0;
	/* Semanas en líneas finas y lo ya pasado más claro, para que hoy se lea de un vistazo. */
	background:
		linear-gradient(to right, rgba(255, 255, 255, .5) var(--now), transparent var(--now)),
		repeating-linear-gradient(to right, rgba(255, 255, 255, .9) 0 1px, transparent 1px calc(100% / 6)); }
.cal-lane__track.has-today::after { content: ""; position: absolute; top: -6px; bottom: -6px; left: var(--now); z-index: 0; width: 2px; margin-left: -1px; background: var(--brand-strong); pointer-events: none; }
.cal-lane__row, .cal-lane__pills { position: relative; z-index: 1; height: 56px; }
.cal-lane__pills { height: 26px; }

.cal-bar { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 10px 6px 6px; border-radius: 10px; background: var(--game, var(--muted)); color: #fff; text-decoration: none; overflow: hidden; container-type: inline-size; box-shadow: 0 0 0 2px var(--game-soft, var(--brand-soft)); transition: filter .15s; }
.cal-bar.is-cut-start { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-bar.is-cut-end { border-top-right-radius: 0; border-bottom-right-radius: 0; }
a.cal-bar:hover { filter: brightness(1.12); }
.cal-bar__thumb { flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 8px; background: rgba(255, 255, 255, .2); }
.cal-bar__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cal-bar__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-bar__title, .cal-bar__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-bar__title { font: 600 14px/18px var(--font-ui); }
.cal-bar__sub { font: 400 13px/16px var(--font-ui); color: rgba(255, 255, 255, .88); }
@container (max-width: 150px) { .cal-bar__thumb { display: none; } }
@container (max-width: 64px) { .cal-bar__txt { display: none; } }

.cal-moment { position: absolute; top: 0; display: inline-flex; align-items: center; gap: 4px; max-width: 32%; padding: 4px 10px; border-radius: 999px; background: var(--surface); font: 600 12px/18px var(--font-ui); color: color-mix(in srgb, var(--game, var(--muted)) 88%, #000); text-decoration: none; white-space: nowrap; box-shadow: 0 1px 3px rgba(17, 18, 20, .08); }
.cal-moment.is-end { transform: translateX(-100%); }
.cal-moment__title { overflow: hidden; text-overflow: ellipsis; }
a.cal-moment:hover { background: var(--game, var(--ink)); color: #fff; }
.cal-empty { padding: 24px 12px; text-align: center; color: var(--muted); }

@media (min-width: 1024px) {
	.cal-guide { padding: 12px; }
	.cal-guide__scroll { overflow: visible; }
	.cal-guide__grid { --name: 200px; min-width: 0; gap: 8px; }
	.cal-guide__tick { top: 8px; }
	.cal-lane { flex-direction: row; border-radius: 16px; }
	.cal-lane__name { position: static; flex: none; align-self: center; width: var(--name); padding: 16px 20px; font: 700 17px/22px var(--font-head); letter-spacing: -.005em; }
	.cal-lane__track { min-height: 104px; padding: 12px 0; border-radius: 0 16px 16px 0; }
	.cal-lane__track.has-today::after { top: -8px; bottom: -8px; }
	.cal-lane__row { height: 60px; }
}

/* 7. Mes */
.cal-month { gap: 8px; }
.cal-month .section-head { padding: 4px 0 4px 8px; }
.cal-month__nav { display: flex; gap: 8px; }
.cal-month__btn { background: var(--surface); width: 36px; height: 36px; }
.cal-month__btn:hover { background: var(--ink); color: #fff; }
.cal-month__table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 4px; margin: -4px; width: calc(100% + 8px); }
.cal-month__table th { padding: 4px 0; font: 700 12px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; }
.cal-cell { height: 1px; padding: 0; vertical-align: top; }
/* Número y círculo caben siempre dentro de la casilla (en un móvil estrecho mide unos 45 px). */
.cal-cell__btn { width: 100%; height: 100%; min-height: 54px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 5px 2px; border: 0; border-radius: 10px; background: var(--surface); font: inherit; color: var(--ink); text-align: center; }
button.cal-cell__btn { cursor: pointer; transition: background .15s, color .15s, transform .12s var(--ease); }
button.cal-cell__btn:active { transform: scale(.97); }
.cal-cell.is-out .cal-cell__btn { background: rgba(255, 255, 255, .45); color: var(--muted); }
.cal-cell__n { display: inline-grid; place-items: center; flex: none; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 999px; font: 600 13px/16px var(--font-ui); }
.cal-cell.is-today .cal-cell__n { background: var(--brand-strong); color: #fff; }
.cal-cell__img { width: 22px; max-width: 100%; aspect-ratio: 1; flex: none; border-radius: 999px; background: var(--game-soft, var(--brand-soft)); }
.cal-cell__img.is-empty { background: var(--game-soft, var(--brand-soft-strong)); }
.cal-cell.is-open button.cal-cell__btn { background: var(--ink); color: #fff; }
.cal-tag { display: block; padding: 4px 8px; border-radius: 6px; background: var(--game-soft, var(--brand-soft)); font: 500 12px/16px var(--font-ui); color: color-mix(in srgb, var(--game, var(--muted)) 88%, #000); text-align: left; overflow-wrap: anywhere; }
.cal-tag--more { background: transparent; color: var(--muted); padding-block: 0; }
.cal-month__empty { padding: 8px; text-align: center; }
.cal-dayview.is-default { scroll-margin-top: 16px; }
@media (min-width: 1024px) {
	.cal-month { gap: 12px; }
	.cal-month .section-head { padding: 0 0 4px; }
	.cal-month__btn { width: 40px; height: 40px; }
	.cal-month__table { border-spacing: 8px; margin: -8px; width: calc(100% + 16px); }
	.cal-month__table th { padding: 0 2px; text-align: left; }
	.cal-cell__btn { min-height: 150px; overflow: visible; align-items: stretch; gap: 8px; padding: 8px; border-radius: 12px; text-align: left; }
	.cal-cell__n { align-self: flex-start; min-width: 0; padding: 0; height: auto; }
	.cal-cell.is-today .cal-cell__n { min-width: 28px; height: 28px; }
	.cal-cell__img { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; }
	.cal-cell__img.is-empty { display: none; }
	.cal-cell__tags { display: flex; flex-direction: column; gap: 4px; }
	.cal-cell.is-open button.cal-cell__btn { background: var(--surface); color: var(--ink); }
	.cal-cell.is-picked button.cal-cell__btn { box-shadow: inset 0 0 0 2px var(--ink); }
	button.cal-cell__btn:hover { box-shadow: inset 0 0 0 2px var(--brand-strong); }
	/* En escritorio el mes ya lo enseña todo: el detalle del día solo sale al pulsar uno. */
	.cal-dayview.is-default { display: none; }
}

/* 8. Movimiento: la guía entra de izquierda a derecha, como si se fuera llenando la programación */
@media (prefers-reduced-motion: no-preference) {
	.cal-head__media .media__img, .cal-hero__media .media__img { animation: gn-settle 1.4s var(--ease) backwards; }
	.cal-head__body > *, .cal-hero__body > * { animation: gn-rise .6s var(--ease) backwards; animation-delay: 80ms; }
	.cal-head__body > :nth-child(2), .cal-hero__body > :nth-child(2) { animation-delay: 150ms; }
	.cal-hero__body > :nth-child(3) { animation-delay: 220ms; }
	.cal-count__tile { animation: gn-rise .6s var(--ease) backwards; animation-delay: 260ms; }
	.cal-count__tile:nth-child(2) { animation-delay: 310ms; }
	.cal-count__tile:nth-child(3) { animation-delay: 360ms; }
	.cal-guide.is-in .cal-bar, .cal-guide.is-in .cal-moment { animation: cal-fill .8s var(--ease) backwards; animation-delay: calc(120ms + var(--i, 0) * 40ms); }
	.cal-guide.is-in .cal-guide__today { animation: gn-fade .4s var(--ease) backwards; animation-delay: 500ms; }
	@keyframes cal-fill { from { clip-path: inset(0 100% 0 0 round 10px); } to { clip-path: inset(0 0 0 0 round 10px); } }
	.cal-count__n.is-tick { animation: gn-rise .35s var(--ease); }
}

/* Selección y foco con la marca */
.gn-page--calendar ::selection { background: var(--brand-soft-strong); color: var(--ink); }