/* La tarjeta de una publicación y el calendario de la agenda: los mismos en
   la web pública (Descubre, Explorar, agenda, fichas; enlazado detrás de
   public.css) y en el panel del negocio («Tus publicaciones», su calendario y
   la vista previa del formulario, dentro de `.tjv`). El HTML lo pinta
   `assets/tarjeta.js`. Lo que en la web pública va dentro de `main.pub`
   aquí es `:is(.pub, .tjv)`: la misma especificidad en los dos sitios. */

/* ── Tarjeta de publicación (functions/_lib/tarjeta.js) ────────────────── */
/* La foto o el vídeo de protagonista, entera (4:5, como se suben desde la
   app), y el panel encima de su borde de abajo, como el panel de cristal de
   Descubre. Toda la tarjeta es un enlace (el del título, estirado). */
.tjs { display: grid; gap: 22px 18px; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); margin: 0 0 14px; }
.tjs--feed { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
@media (max-width: 600px) { .tjs, .tjs--feed { grid-template-columns: 1fr; gap: 22px; } }
.tj { position: relative; display: flex; flex-direction: column; min-width: 0; color: var(--ink); isolation: isolate; }
.tj-media { position: relative; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; background: var(--soft); }
.tj-img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--soft); transition: transform .4s ease; }
.tj:hover .tj-img { transform: scale(1.03); }
.tj-ph { position: absolute; inset: 0; display: grid; place-items: center; font: 800 64px/1 var(--display); color: var(--ink-2);
  background: linear-gradient(140deg, var(--soft), transparent 70%); }
/* La agenda pública sin foto (`arteHtml`, como `AgendaArtBackground` en la
   app): el color de su categoría en degradado y su icono en grande, apagado,
   donde no lo tapa el panel. En una miniatura, el icono a la vista. */
.tj-arte { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: var(--arte, #3A4654);
  background: radial-gradient(90% 55% at 50% 30%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--arte, #3A4654) 94%, #fff), color-mix(in srgb, var(--arte, #3A4654) 62%, #000)); }
.tj-arte svg { display: block; width: 40%; max-width: 240px; height: auto; opacity: .16; transform: translateY(-18%); }
.tj--pantalla .tj-arte { align-items: start; padding-top: 30%; }
.tj--pantalla .tj-arte svg { width: 36%; transform: none; }
.tj-arte--mini svg { width: 52%; opacity: .88; transform: none; }
.tj-tipo, .tj-video { position: absolute; top: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px;
  border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(10,10,10,.62); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tj-tipo { left: 12px; }
.tj-video { right: 12px; padding: 5px 8px; }
.tj-panel { position: relative; flex: 1; margin: -56px 10px 0; padding: 14px 16px 16px; border-radius: 22px; display: flex; flex-direction: column; gap: 8px;
  background: color-mix(in srgb, var(--elevated) 88%, transparent); border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 14px 34px -18px rgba(0,0,0,.45); }
:is(.pub, .tjv) .tj p, :is(.pub, .tjv) .tj .tj-titulo { margin: 0; }
.tj-negocio { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; min-width: 0; }
.tj-logo { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; background: var(--soft); }
.tj-nombre, .tj-lugar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tj-lugar { color: var(--ink-2); font-weight: 600; }
.tj-negocio .tj-dist { margin-left: auto; padding-left: 6px; color: var(--ink-2); font-weight: 700; white-space: nowrap; }
:is(.pub, .tjv) .tj .tj-titulo { font: 800 19px/1.2 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tj-enlace, :is(.pub, .tjv) .tj .tj-enlace { color: inherit; }
.tj-enlace:hover { text-decoration: none; }
.tj-enlace::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 26px; }
.tj-enlace:focus-visible { outline: none; }
.tj:has(.tj-enlace:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 26px; }
.tj-desc { font-size: 14px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tj-datos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tj-precio { padding: 4px 11px; border-radius: 999px; background: var(--tj-acento, var(--accent)); color: var(--tj-sobre, var(--on-accent));
  font-weight: 800; font-size: 14px; white-space: nowrap; }
.tj-antes { color: var(--ink-2); font-size: 13px; }
.tj-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--glass-border);
  background: var(--soft); font-size: 13px; font-weight: 700; min-width: 0; }
.tj-chip .ic { flex: none; }
/* La cuenta atrás de una oferta flash, siempre en coral (es la oferta); la
   urgencia, con la negrita (menos de 60 min, menos de 15), no con otro color. */
.tj-cuando.ahora { color: var(--accent-text); font-weight: 600; }
.tj-cuando.ahora.pronto { font-weight: 700; }
.tj-cuando.ahora.urgente { font-weight: 800; }
.tj-cuando.fin { color: var(--ink-2); }
.tj-amigos:empty { display: none; }
.tj-amigos .quien-va { margin: 0; font-size: 13px; }
.tj-cta { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: auto; /* siempre abajo: en una fila de tarjetas quedan alineados */ border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 15px; }
.tj:hover .tj-cta { filter: brightness(1.05); }
/* Plantilla «bold»: el panel del color del negocio. */
.tj--bold .tj-panel { background: var(--tj-acento, var(--accent)); color: var(--tj-sobre, var(--on-accent)); border-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none; }
.tj--bold .tj-lugar, .tj--bold .tj-negocio .tj-dist, .tj--bold .tj-antes, .tj--bold .tj-desc { color: inherit; opacity: .8; }
.tj--bold .tj-precio, .tj--bold .tj-cta { background: var(--tj-sobre, var(--on-accent)); color: var(--tj-acento, var(--accent)); }
.tj--bold .tj-chip { background: color-mix(in srgb, currentColor 14%, transparent); border-color: transparent; }
/* En «Color» el fondo ya es el color de la oferta: la cuenta atrás, de la letra del panel. */
.tj--bold .tj-cuando.ahora { color: inherit; }
/* Plantilla «minimal»: panel opaco, sin cristal. */
.tj--minimal .tj-panel { background: var(--elevated); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Plantilla «poster»: sin panel; el título grande sobre la foto oscurecida. */
.tj--poster .tj-panel { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 80px 18px 18px; border: 0; border-radius: 0 0 26px 26px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.55) 35%, rgba(0,0,0,.88)); color: #fff; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; }
:is(.pub, .tjv) .tj--poster .tj-titulo { font-size: 24px; }
.tj--poster .tj-lugar, .tj--poster .tj-negocio .tj-dist, .tj--poster .tj-antes, .tj--poster .tj-desc { color: rgba(255,255,255,.82); }
.tj--poster .tj-chip { background: rgba(255,255,255,.16); border-color: transparent; color: #fff; }
.tj--poster .tj-cta { background: #fff; color: #0A0A0A; }
.tj--poster .tj-cuando.ahora { color: #FF8FA3; }
/* Antetítulo de «Cartel»: la fecha, en un bloque del color del negocio. */
.tj-kicker { align-self: flex-start; padding: 4px 9px; border-radius: 6px; background: var(--tj-acento, var(--accent));
  color: var(--tj-sobre, var(--on-accent)); font-size: 12px; font-weight: 800; letter-spacing: .05em; }
:is(.pub, .tjv) .tj--poster .tj-titulo { font-size: 28px; font-weight: 900; line-height: 1.04; letter-spacing: -.03em; -webkit-line-clamp: 4; }
/* Sin panel debajo («Cartel» y «Foto grande»): la foto llena toda la tarjeta
   aunque la fila de la rejilla sea más alta que ella. */
.tj--photo .tj-media, .tj--poster .tj-media { flex: 1 1 auto; }
/* Plantilla «photo» (Foto grande): la foto manda; datos pequeños sobre un
   degradado discreto, sin panel, y el botón del ancho del texto. */
.tj--photo .tj-panel { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 70px 16px 16px; border: 0; border-radius: 0 0 26px 26px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.45) 45%, rgba(0,0,0,.72)); color: #fff; box-shadow: none; gap: 6px;
  backdrop-filter: none; -webkit-backdrop-filter: none; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
:is(.pub, .tjv) .tj--photo .tj-titulo { font-size: 17px; -webkit-line-clamp: 2; }
.tj--photo .tj-negocio { font-size: 12px; }
.tj--photo .tj-logo { width: 20px; height: 20px; }
.tj--photo .tj-desc, .tj--photo .tj-antes { display: none; }
.tj--photo .tj-negocio .tj-dist, .tj--photo .tj-org { color: rgba(255,255,255,.82); }
.tj--photo .tj-chip { background: none; border: 0; padding: 0; color: rgba(255,255,255,.88); }
.tj--photo .tj-precio { font-size: 13px; padding: 3px 9px; text-shadow: none; }
.tj--photo .tj-cta { align-self: flex-start; min-height: 36px; padding: 0 14px; font-size: 13px; background: #fff; color: #0A0A0A; text-shadow: none; }
.tj--photo .tj-cuando.ahora { color: #FF8FA3; }
/* Plantilla «minimal»: sobria; el color solo en el precio. */
:is(.pub, .tjv) .tj--minimal .tj-titulo { font-weight: 700; }
.tj--minimal .tj-chip { background: none; border: 0; padding: 0 4px 0 0; color: var(--ink-2); }
.tj--minimal .tj-cuando.ahora { color: var(--accent-text); }
/* Con lugar propio: el sitio y, debajo, quién lo organiza. */
.tj-nombre .ic { vertical-align: -2px; margin-right: 2px; }
.tj-org { font-size: 12px; color: var(--ink-2); margin-top: -4px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tj--bold .tj-org { color: inherit; opacity: .8; }
.tj--poster .tj-org { color: rgba(255,255,255,.82); }

/* La forma «fila»: la lista de un día del calendario (la agenda de la app). */
.tj-filas { display: grid; gap: 10px; }
.tj-fila { flex-direction: row; align-items: center; gap: 14px; padding: 10px 12px 10px 10px; border-radius: 22px; background: var(--elevated);
  border: 1px solid var(--glass-border); }
.tj-fila:hover { border-color: var(--ink-2); }
.tj-fila .tj-media { width: 84px; height: 84px; aspect-ratio: auto; flex: none; border-radius: 16px; }
.tj-fila .tj-ph { font-size: 30px; }
.tj-fila .tj-enlace::after { border-radius: 22px; }
.tj-fila:has(.tj-enlace:focus-visible) { border-radius: 22px; }
.tj-cuerpo { display: grid; gap: 3px; min-width: 0; flex: 1; }
.tj-fila .tj-datos { gap: 8px; }
.tj-hora { color: var(--ink); font-weight: 800; font-size: 15px; }
/* La hora, en coral solo si es oferta (flash o con descuento), como la app. */
.tj-hora.tj-hora-oferta { color: var(--accent-text); }
.tj-rayo { color: var(--accent-text); display: inline-flex; }
.tj-fila .tj-precio { font-size: 13px; padding: 2px 9px; }
:is(.pub, .tjv) .tj-fila .tj-titulo { font-size: 16px; -webkit-line-clamp: 2; }
.tj-fila .tj-negocio { font-weight: 600; color: var(--ink-2); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tj-chevron { color: var(--ink-2); flex: none; display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .tj-img { transition: none; } .tj:hover .tj-img { transform: none; } }

/* ── Calendario (la agenda de Explorar en la app) ──────────────────────── */
.calendario { display: grid; gap: 22px 28px; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .calendario { grid-template-columns: 1fr; } }
.cal-mes { margin: 0; background: var(--elevated); border: 1px solid var(--glass-border); border-radius: 28px; padding: 14px 12px 12px; position: sticky; top: 84px; }
@media (max-width: 900px) { .cal-mes { position: static; } }
.cal-cab { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin: 0 0 4px; }
:is(.pub, .tjv) .cal-cab h2 { margin: 0; text-align: center; font-size: 20px; }
.cal-nav { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); }
a.cal-nav:hover { background: var(--soft); }
.cal-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px 2px; text-align: center; }
.cal-sem { font-size: 13px; color: var(--ink-2); padding: 6px 0 4px; text-transform: lowercase; }
:is(.pub, .tjv) .cal-dia { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 50px; border-radius: 15px;
  font-weight: 700; font-size: 16px; color: var(--ink); position: relative; }
a.cal-dia:hover { background: var(--soft); text-decoration: none; }
.cal-dia.pasado { color: var(--ink-2); opacity: .5; }
/* Fuera de «¿Cuándo?»: se puede tocar (dice por qué está vacío), pero apagado. */
.cal-dia.fuera { color: var(--ink-2); opacity: .45; }
.cal-titulo { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.cal-hoy { padding: 6px 14px; font-size: 14px; }
.cal-vacio { padding: 18px 0; }
.cal-vacio h3 { margin: 0 0 6px; font-size: 18px; }
.cal-dia.hoy { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
:is(.pub, .tjv) .cal-dia.sel { background: var(--ink); color: var(--surface); box-shadow: none; }
.cal-puntos { display: flex; gap: 3px; height: 6px; }
.cal-puntos i, .cal-leyenda i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
/* Eventos en tinta y ofertas flash en coral (son oferta); sin más colores
   (Iván, 2026-10-27). */
.pe { background: var(--ink); }
.pf { background: var(--accent); }
/* El día elegido va en tinta: su punto de eventos, del color del fondo (como
   la app, `MonthCalendar`), o no se veía. */
:is(.pub, .tjv) .cal-dia.sel .pe { background: var(--surface); }
:is(.pub, .tjv) .cal-leyenda { display: flex; justify-content: center; gap: 18px; font-size: 13px; color: var(--ink-2); margin: 10px 0 2px; }
.cal-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cal-lista { min-width: 0; padding: 0; scroll-margin-top: 80px; }
.cal-lista-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 4px 0 12px; }
:is(.pub, .tjv) .cal-lista-cab h2 { margin: 0; font-size: 20px; }
.cal-lista .empty a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ── Galería: todas las fotos y vídeos (Descubre y Explorar) ───────────────
   Se desliza de lado (dedo o flechas en el escritorio); los puntos van en
   una cápsula de cristal oscuro, como en la app (blancos sueltos se perdían
   en una foto clara: el activo da 5,7:1 y los demás 3,8:1 sobre blanco).
   Cada pieza es un enlace a la ficha (fuera del orden del tabulador: el del
   título ya lo es). */
.tj-galeria, .tj-media > .tj-pieza { position: absolute; inset: 0; }
.tj-pista { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain; }
.tj-pista::-webkit-scrollbar { display: none; }
.tj-pieza { position: relative; display: block; flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.tj-pieza .tj-img { width: 100%; height: 100%; object-fit: cover; }
video.tj-img { background: #0A0A0A; }
.tj-puntos { position: absolute; z-index: 3; top: 12px; right: 12px; display: flex; gap: 6px; padding: 5px 6px; border-radius: 999px;
  background: rgba(10,10,10,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); pointer-events: none; }
.tj-puntos i { display: block; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.7); transition: transform .2s ease, background-color .2s ease; }
/* Puntos de foto, redondos (alargado parecía un logo): el de la que se ve,
   algo más grande y blanco del todo. Solo en las fotos grandes (Descubre, la
   ficha): en las tarjetas pequeñas, ninguno. */
.tj-puntos i.on { background: #fff; transform: scale(1.35); }
.tj:not(.tj--pantalla) .tj-puntos { display: none; }
.tj-flecha, .tj-sonido, .tj-play { position: absolute; z-index: 4; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer;
  border-radius: 50%; background: rgba(10,10,10,.6); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tj-flecha { top: 50%; width: 40px; height: 40px; margin-top: -20px; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.tj-ant { left: 10px; }
.tj-sig { right: 10px; }
/* Las flechas, solo con ratón (en el móvil se desliza) y al pasar por encima. */
@media (hover: hover) and (pointer: fine) {
  .tj-galeria:hover .tj-flecha:not(.fuera), .tj-flecha:focus-visible { opacity: 1; pointer-events: auto; }
}
.tj-flecha.fuera { opacity: 0 !important; pointer-events: none !important; }
.tj-flecha:hover, .tj-sonido:hover, .tj-play:hover { background: rgba(10,10,10,.78); }
.tj-flecha:focus-visible, .tj-sonido:focus-visible, .tj-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* El altavoz: tachado mientras está en silencio. */
.tj-sonido { right: 12px; top: 46px; width: 40px; height: 40px; }
.tj-galeria:not(:has(.tj-puntos)) .tj-sonido { top: 12px; }
.tj-sonido .ic + .ic, .tj-sonido.on .ic:first-child { display: none; }
.tj-sonido.on .ic + .ic { display: block; }
.tj-play { left: 50%; top: 40%; width: 64px; height: 64px; margin: -32px 0 0 -32px; }

/* ── Una por pantalla (el feed de Descubre) ────────────────────────────────
   La foto o el vídeo de fondo, a sangre, y el panel flotante abajo como la
   tarjeta de la app (docs/DISENOS_PUBLICACION.md), a la escala de un móvil:
   `--u` es 1 px en una columna de 390 (o más ancha: nunca se amplía) y
   menos en una más estrecha, así todo guarda la proporción de la app.
   `--feed-arriba` es lo que ocupan la cabecera y los filtros encima (solo en
   el móvil); `--feed-abajo`, la barra de pestañas. */
.feed { container-type: inline-size; }
.tj--pantalla { --u: min(1px, calc(100cqw / 390)); height: var(--feed-alto, 100dvh); overflow: hidden; background: #0A0A0A; }
.tj--pantalla .tj-media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; background: #0A0A0A; }
.tj--pantalla:hover .tj-img { transform: none; }
/* Los sellos, pegados arriba del panel (no flotando bajo la cabecera). */
.tj-sellos { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6 * var(--u, 1px)); }
.tj--pantalla .tj-sellos .tj-tipo, .tj--pantalla .tj-sellos .tj-sello { position: static; font-size: calc(12 * var(--u));
  padding: calc(5 * var(--u)) calc(11 * var(--u)); }
.tj-sello { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; font-size: 12px; font-weight: 800;
  background: rgba(10,10,10,.62); color: #fff; }
.tj-sello .ic { flex: none; }
.tj--pantalla .tj-sellos .tj-sello--entidad { padding: calc(5 * var(--u)) calc(11 * var(--u)); }
/* Quién publica, si es una entidad: sobrio, en tinta secundaria. */
.tj-entidad { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; font-weight: 800; color: var(--ink-2); }
.tj-entidad .ic { flex: none; }
.tj-sello button { position: relative; z-index: 3; display: grid; place-items: center; width: 28px; height: 28px; margin: -6px -8px -6px 0;
  padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.tj-sello button::after { content: ""; position: absolute; inset: -8px; }
.tj-sello button:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
.tj--pantalla .tj-puntos { top: calc(var(--feed-arriba, 120px) + 46 * var(--u)); right: auto; left: 50%; transform: translateX(-50%);
  gap: calc(6 * var(--u)); padding: calc(5 * var(--u)) calc(6 * var(--u)); }
.tj--pantalla .tj-puntos i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); }
.tj--pantalla .tj-puntos i.on { width: calc(6 * var(--u)); }
.tj--pantalla .tj-sonido, .tj--pantalla .tj-galeria:not(:has(.tj-puntos)) .tj-sonido { top: calc(var(--feed-arriba, 120px) + 6 * var(--u)); right: calc(14 * var(--u));
  width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
.tj--pantalla .tj-sonido .ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
/* «Ver solo la foto» (lo enseña /assets/tarjetas.js, que pone `con-solo`):
   un círculo de cristal como el altavoz, en la esquina de la fila de los
   puntos; el altavoz pasa a su izquierda (el botón no se mueve al pasar a un
   vídeo de la galería). Expandir con la información a la vista; recoger con
   ella escondida. */
.tj-solo { position: absolute; z-index: 4; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; border-radius: 50%;
  background: rgba(10,10,10,.6); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  top: calc(var(--feed-arriba, 120px) + 6 * var(--u, 1px)); right: calc(14 * var(--u, 1px)); width: calc(36 * var(--u, 1px)); height: calc(36 * var(--u, 1px)); }
.tj-solo[hidden] { display: none; }
.tj-solo::after { content: ""; position: absolute; inset: calc(-6 * var(--u, 1px)); }
.tj-solo .ic { width: calc(18 * var(--u, 1px)); height: calc(18 * var(--u, 1px)); }
.tj-solo .ic + .ic, .tj-solo.on .ic:first-child { display: none; }
.tj-solo.on .ic + .ic { display: block; }
.tj-solo:hover { background: rgba(10,10,10,.78); }
.tj-solo:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tj--pantalla.con-solo .tj-sonido, .tj--pantalla.con-solo .tj-galeria:not(:has(.tj-puntos)) .tj-sonido { right: calc(58 * var(--u)); }
.tj--pantalla .tj-flecha { width: calc(36 * var(--u)); height: calc(36 * var(--u)); margin-top: calc(-18 * var(--u)); top: 42%; }
.tj--pantalla .tj-flecha .ic { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.tj--pantalla .tj-ant { left: calc(10 * var(--u)); }
.tj--pantalla .tj-sig { right: calc(10 * var(--u)); }
.tj--pantalla .tj-play { width: calc(60 * var(--u)); height: calc(60 * var(--u)); margin: calc(-30 * var(--u)) 0 0 calc(-30 * var(--u)); }
/* El panel: separado 12 de los bordes, esquinas 28, títulos de 24. */
.tj--pantalla .tj-panel { position: absolute; left: calc(12 * var(--u)); right: calc(12 * var(--u)); bottom: var(--feed-abajo, 16px); margin: 0;
  padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)); border-radius: calc(28 * var(--u)); gap: calc(10 * var(--u));
  max-height: calc(var(--feed-alto, 100dvh) - var(--feed-arriba, 120px) - var(--feed-abajo, 16px) - 70px); overflow: hidden; }
.tj--pantalla .tj-negocio { font-size: calc(14 * var(--u)); gap: calc(8 * var(--u)); }
.tj--pantalla .tj-logo { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.tj--pantalla .tj-org { font-size: calc(12 * var(--u)); }
:is(.pub, .tjv) .tj--pantalla .tj-titulo { font-size: calc(24 * var(--u)); letter-spacing: -.035em; -webkit-line-clamp: 2; }
.tj--pantalla .tj-desc { font-size: calc(14 * var(--u)); }
.tj--pantalla .tj-datos { gap: calc(6 * var(--u)); }
.tj--pantalla .tj-precio { font-size: calc(14 * var(--u)); padding: calc(5 * var(--u)) calc(12 * var(--u)); }
.tj--pantalla .tj-chip { font-size: calc(14 * var(--u)); padding: calc(5 * var(--u)) calc(11 * var(--u)); }
.tj--pantalla .tj-chip .ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.tj--pantalla .tj-antes { font-size: calc(13 * var(--u)); }
.tj--pantalla .tj-amigos .quien-va { font-size: calc(14 * var(--u)); }
.tj--pantalla .tj-cta { min-height: calc(52 * var(--u)); font-size: calc(15 * var(--u)); gap: calc(8 * var(--u)); }
.tj--pantalla .tj-cta .ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.tj--pantalla .tj-enlace::after { border-radius: calc(28 * var(--u)); }
.tj--pantalla .tj-kicker { font-size: calc(13 * var(--u)); padding: calc(4 * var(--u)) calc(9 * var(--u)); }
/* Clásica: cristal sobre foto (claro .90, oscuro .62). En claro era .80, pero
   sobre una foto oscura (o sin foto) el gris de la descripción y el coral de
   «Ahora · quedan…» se quedaban en 3,2–3,8:1; con .90 pasan de 4,5:1. */
.tj--pantalla.tj--glass .tj-panel { background: rgba(255,255,255,.90); border-color: rgba(255,255,255,.5);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); color: #0A0A0A; }
@media (prefers-color-scheme: dark) {
  .tj--pantalla.tj--glass .tj-panel { background: rgba(10,10,10,.62); border-color: rgba(255,255,255,.14); color: #FAFAFA; }
}
/* Foto grande y Cartel: sin panel; degradado abajo y el texto encima. */
/* El degradado, en la parte de abajo de la tarjeta como en la app (Foto
   grande: el 45 % de abajo; Cartel: el 58 %); si el texto no cabe, sube. */
.tj--pantalla.tj--photo .tj-panel, .tj--pantalla.tj--poster .tj-panel { left: 0; right: 0; bottom: 0; border-radius: 0; max-height: none;
  justify-content: flex-end; padding: calc(24 * var(--u)) calc(16 * var(--u)) calc(var(--feed-abajo, 16px) + 4 * var(--u)); }
.tj--pantalla.tj--photo .tj-panel { gap: calc(6 * var(--u)); min-height: 45%;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.45) 51%, rgba(0,0,0,.72)); }
:is(.pub, .tjv) .tj--pantalla.tj--photo .tj-titulo { font-size: calc(20 * var(--u)); }
.tj--pantalla.tj--photo .tj-negocio { font-size: calc(13 * var(--u)); }
.tj--pantalla.tj--photo .tj-logo { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.tj--pantalla.tj--photo .tj-precio { font-size: calc(13 * var(--u)); padding: calc(3 * var(--u)) calc(10 * var(--u)); }
.tj--pantalla.tj--photo .tj-chip { font-size: calc(13 * var(--u)); padding: 0; }
.tj--pantalla.tj--photo .tj-cta { min-height: calc(40 * var(--u)); padding: 0 calc(16 * var(--u)); font-size: calc(14 * var(--u)); }
.tj--pantalla.tj--poster .tj-panel { min-height: 58%; gap: calc(10 * var(--u));
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.72) 52%, rgba(0,0,0,.9)); }
:is(.pub, .tjv) .tj--pantalla.tj--poster .tj-titulo { font-size: calc(34 * var(--u)); line-height: 1.02; letter-spacing: -.04em; }
.tj--pantalla.tj--photo .tj-enlace::after, .tj--pantalla.tj--poster .tj-enlace::after { border-radius: 0; }
/* Color: panel macizo con sombra. Minimal: liso, borde fino. */
.tj--pantalla.tj--bold .tj-panel { box-shadow: 0 14px 34px -14px rgba(0,0,0,.6); }
.tj--pantalla.tj--minimal .tj-panel { box-shadow: 0 10px 30px -18px rgba(0,0,0,.4); }

/* ── La galería en la ficha (cabecera de una publicación o de un negocio) ──
   La misma que la tarjeta (`galeria` en assets/tarjeta.js), como la
   cabecera de la ficha en la app: los puntos abajo en el centro, el altavoz
   abajo a la derecha y «Ver a pantalla completa» arriba a la derecha. Tocar
   una pieza abre el visor. */
.tj-galeria--ficha .tj-pieza { cursor: zoom-in; }
.tj-galeria.tj-galeria--ficha .tj-puntos { top: auto; bottom: 14px; right: auto; left: 50%; transform: translateX(-50%); }
.tj-galeria.tj-galeria--ficha .tj-sonido { top: auto; bottom: 8px; right: 12px; }
.tj-ampliar { position: absolute; z-index: 4; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; padding: 0;
  cursor: pointer; border-radius: 50%; background: rgba(10,10,10,.6); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tj-ampliar:hover { background: rgba(10,10,10,.78); }
.tj-ampliar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── Visor a pantalla completa (como `showPhotoViewer` en la app) ────────
   Negro siempre (también en el tema claro): la foto o el vídeo enteros,
   sin recortar. «Cerrar» arriba a la izquierda y «2 / 3» a la derecha, en
   cristal oscuro. */
html.con-visor { overflow: hidden; }
.visor { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #000; color: #fff; overflow: hidden; }
.visor::backdrop { background: #000; }
.visor[open] { animation: visor-entra .2s ease-out; }
@keyframes visor-entra { from { opacity: 0; } to { opacity: 1; } }
.visor .tj-galeria { position: absolute; inset: 0; }
.visor .tj-pista { touch-action: pan-x pinch-zoom; }
.visor .tj-pieza .tj-img { object-fit: contain; background: transparent; }
.visor-barra { position: absolute; z-index: 6; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  pointer-events: none; }
.visor-barra > * { pointer-events: auto; }
.visor-cerrar { width: 44px; height: 44px; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; border-radius: 50%;
  background: rgba(10,10,10,.6); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.visor-cerrar:hover { background: rgba(40,40,40,.8); }
.visor-cerrar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.visor-der { display: flex; align-items: center; gap: 8px; }
.visor-denuncia { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; color: #fff;
  background: rgba(10,10,10,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-weight: 700; font-size: 14px; }
.visor-denuncia:hover { background: rgba(40,40,40,.8); text-decoration: none; }
.visor-denuncia:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.visor-denuncia[hidden] { display: none; }
.visor-n { padding: 6px 12px; border-radius: 999px; background: rgba(10,10,10,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.visor .tj-flecha { width: 48px; height: 48px; margin-top: -24px; }
.visor .tj-ant { left: max(16px, env(safe-area-inset-left)); }
.visor .tj-sig { right: max(16px, env(safe-area-inset-right)); }
@media (hover: hover) and (pointer: fine) { .visor .tj-flecha:not(.fuera) { opacity: 1; pointer-events: auto; } }
.visor .tj-galeria .tj-sonido { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); width: 44px; height: 44px; }
.visor .tj-play { top: 50%; }
@media (prefers-reduced-motion: reduce) { .visor[open] { animation: none; } }

/* ── Miniaturas que abren el visor (carta, novedades, reseñas) ─────────── */
.miniaturas { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.mini, .carta-foto, .nov-media, .dish { position: relative; display: block; overflow: hidden; background: var(--soft); cursor: zoom-in; }
/* Cuadradas de 72, como en la app (docs/RESENAS_MEDIOS.md §5). */
.mini { width: 72px; height: 72px; flex: none; border-radius: 12px; }
.mini .mini-play { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.mini-dur { position: absolute; right: 4px; bottom: 4px; padding: 1px 5px; border-radius: 6px; background: rgba(10,10,10,.7); color: #fff;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
.mini img, .mini video, .carta-foto img, .carta-foto video, .nov-media img, .nov-media video, .dish img, .dish video {
  width: 100%; height: 100%; object-fit: cover; display: block; }
.mini video, .carta-foto video, .nov-media video, .dish video { background: #0A0A0A; }
:is(.mini, .carta-foto, .nov-media, .dish):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mini-play { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(10,10,10,.6); color: #fff; pointer-events: none; }
@media (hover: hover) { :is(.mini, .carta-foto, .nov-media):hover img { filter: brightness(.94); } }