/* ======================================================================
   RADAR — Historias
   Corrección 10-ago pto. 8 ("Revisar la función Compartir historia").

   Este archivo se carga DESPUÉS de styles.css a propósito: además de traer
   el compositor nuevo, pisa dos reglas viejas de styles.css que estaban
   causando exactamente lo que reportó el cliente (el flyer recortado).

   Todo el color viene de tokens.css. Tema claro, mobile-first.
   ====================================================================== */

/* ======================================================================
   1. Encuadre del visor — la lógica estaba INVERTIDA
   ----------------------------------------------------------------------
   styles.css tiene `.story-body { background-size: cover }` para las fotos y
   `.story-body-img { object-fit: contain }` para la placa generada. Es al
   revés de lo que corresponde:

     · La placa que arma el server (/api/story-card, /api/share-card) YA viene
       en 9:16 exacto → tiene que ir a `cover`, entra clavada.
     · El flyer real y las fotos que sube la gente tienen cualquier proporción
       → van a `contain` para verse ENTERAS, con una copia borrosa y ampliada
       de sí mismas por detrás para llenar el 9:16 sin barras negras.
   ====================================================================== */
.story-body {
  /* La foto ya no va de background: ahora siempre hay un <img> real, así el
     onerror y el lazy del navegador funcionan igual para los dos casos. */
  background-image: none !important;
  background-color: #08080c;
  overflow: hidden;
}

.story-body .story-body-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Flyer / foto: entera, nunca recortada. Es el pedido literal del cliente. */
.story-body.is-photo .story-body-img { object-fit: contain; }

/* Placa 1080x1920 generada por el server: ya viene en proporción, va clavada. */
.story-body.is-card .story-body-img { object-fit: cover; }

/* El relleno de las bandas: la misma imagen, ampliada y desenfocada. */
.story-body-blur {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(30px) saturate(1.2);
  transform: scale(1.15);
  opacity: 0.85;
  pointer-events: none;
}

/* Chip del vínculo: de qué evento o lugar es la historia. Va DENTRO del bloque
   de texto (no flotando): si no, el botón de CTA —que es absolute, bottom:20px—
   le pasa por encima al título. */
.story-link-chip {
  display: inline-flex;
  margin-bottom: 10px;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 32px);
  padding: 7px 14px 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-full);
  background: rgba(10, 10, 14, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
.story-link-chip.is-static { cursor: default; }
.story-link-chip svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.9; }
.story-link-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.story-link-chip:active:not(.is-static) { transform: scale(0.97); }

/* El texto de la historia se lee por encima de todo. Cuando hay CTA le dejamos
   lugar al botón, que se dibuja encima del pie del cuerpo. */
.story-body .story-text-overlay { z-index: 4; }
.story-body.has-cta .story-text-overlay { padding-bottom: 88px; }

/* Vista previa del uploader viejo: `cover` recortaba la foto justo cuando la
   persona quería ver si había quedado bien. */
.story-upload-preview { object-fit: contain !important; }

/* ======================================================================
   2. Compositor de historias (3 pasos)
   ----------------------------------------------------------------------
   Reemplaza al formulario anterior. z-index por encima del visor (10000)
   porque se puede abrir desde el estado vacío de Historias.
   ====================================================================== */
.story-composer-modal {
  position: fixed;
  inset: 0;
  z-index: 10600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-composer-modal.hidden { display: none; }

.story-composer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 12, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.story-composer {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  height: 100%;
  max-height: 100%;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  animation: composerIn 0.22s var(--ease, ease);
}
@media (min-width: 560px) {
  .story-composer {
    height: min(760px, 92vh);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
  }
}
@keyframes composerIn {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .story-composer { animation: none; }
}

/* ---- Cabecera ---- */
.composer-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: calc(var(--sp-4) + var(--safe-top)) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.composer-heading {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.composer-kicker {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.composer-title {
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: var(--lh-tight);
  color: var(--ink);
}
.composer-icon-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-full);
  background: var(--bg-tint);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t-base);
}
.composer-icon-btn:hover { background: var(--line-strong); }
.composer-icon-btn svg { width: 20px; height: 20px; }
.composer-icon-btn[hidden] { display: none; }

/* ---- Riel de pasos ---- */
.composer-rail {
  display: flex;
  gap: 4px;
  padding: var(--sp-3) var(--sp-4);
  flex-shrink: 0;
}
.composer-rail i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  transition: background var(--t-base);
}
.composer-rail i.is-done { background: var(--ink); }
.composer-rail i.is-active { background: var(--ink); }

/* ---- Escenario ---- */
.composer-stage {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-4);
}
/* Los pasos de foto y texto van a sangre y en oscuro: es una cámara, no un
   formulario. */
.composer-stage[data-step="2"],
.composer-stage[data-step="3"] {
  padding: 0;
  background: #08080c;
  display: flex;
  flex-direction: column;
}

/* ---- Paso 1: buscador + tarjetas ---- */
.composer-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3);
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--bg-tint);
  margin-bottom: var(--sp-4);
}
.composer-search svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.composer-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-lg); /* 16px: menos que eso y iOS hace zoom al enfocar */
  color: var(--ink);
}
.composer-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.composer-section { margin-bottom: var(--sp-5); }
.composer-section h4 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: var(--sp-3);
}
.composer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-3);
}
.composer-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.composer-card:hover { border-color: var(--line-strong); box-shadow: var(--sh-sm); }
.composer-card:active { transform: scale(0.98); }
.composer-card.is-selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.composer-card-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--bg-tint);
  overflow: hidden;
}
.composer-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.composer-card-kind {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: rgba(8, 8, 12, 0.72);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.composer-card-body {
  display: block;
  padding: var(--sp-3);
}
.composer-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink);
}
.composer-card-meta {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-sm);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-empty {
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  font-size: var(--fs-md);
  color: var(--muted);
}

/* ---- Paso 2: la foto ---- */
.composer-photo-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  padding: var(--sp-6);
  color: rgba(255, 255, 255, 0.92);
}
.composer-photo-glyph {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
}
.composer-photo-glyph svg { width: 42px; height: 42px; }
.composer-photo-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  max-width: 320px;
}
.composer-photo-actions.is-inline {
  flex-direction: row;
  justify-content: center;
  max-width: none;
  padding: var(--sp-3) var(--sp-4);
}
.composer-big-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 15px var(--sp-5);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-full);
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-base);
}
.composer-big-btn svg { width: 20px; height: 20px; }
.composer-big-btn.is-primary {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.composer-big-btn:active { transform: scale(0.98); }
.composer-ghost-btn {
  padding: 10px var(--sp-5);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-full);
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
}

/* Vista previa FIEL: la foto entera, con su propio desenfoque de fondo.
   Es la misma técnica que el visor, así lo que se ve acá es exactamente lo
   que va a ver el resto. */
.composer-preview {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #08080c;
}
.composer-preview-blur {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  filter: blur(30px) saturate(1.2);
  transform: scale(1.15);
  opacity: 0.85;
}
.composer-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.composer-preview-chip {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 2;
  max-width: calc(100% - 32px);
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-full);
  background: rgba(10, 10, 14, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Paso 3: el texto va ENCIMA de la foto ---- */
.composer-write {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--sp-10) var(--sp-4) var(--sp-4);
  background: linear-gradient(to top, rgba(8, 8, 12, 0.86) 12%, rgba(8, 8, 12, 0.45) 55%, transparent 100%);
}
.composer-write-title,
.composer-write-sub {
  display: block;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  resize: none;
  padding: 4px 0;
}
.composer-write-title {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: var(--lh-tight);
}
.composer-write-sub {
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: rgba(255, 255, 255, 0.92);
}
.composer-write-title::placeholder,
.composer-write-sub::placeholder { color: rgba(255, 255, 255, 0.6); }
.composer-counts {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.65);
}

/* ---- Pie ---- */
.composer-foot {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-4) + var(--safe-bottom));
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.composer-hint {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--muted);
}
.composer-chosen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  max-width: 100%;
  padding: 5px 12px 5px 8px;
  border-radius: var(--r-full);
  background: var(--bg-tint);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
}
.composer-chosen svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--state-success); }
.composer-chosen span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-primary {
  width: 100%;
  padding: 15px var(--sp-5);
  border: 0;
  border-radius: var(--r-full);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--t-base), transform var(--t-base);
}
.composer-primary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.composer-primary:not(:disabled):active { transform: scale(0.99); }
.composer-note {
  font-size: var(--fs-xs);
  color: var(--muted-2);
  text-align: center;
}

/* Borrar la propia historia desde el visor. El endpoint existía desde siempre
   pero no había botón: quien subía algo por error tenía que esperar 24 h a que
   Mongo lo expirara. Va en el encabezado, del lado opuesto al autor. */
.story-header-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.story-delete {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  cursor: pointer;
}

.story-delete svg { width: 17px; height: 17px; }
.story-delete:hover { background: rgba(0, 0, 0, 0.55); }