/* ============================================================
   LogiRed — "Revive la jornada": grabaciones de San Antonio
   Usado por index.html (botones + modal) y nodo-san-antonio.html
   (sección de tarjetas + el mismo modal).

   Archivo nuevo y versionado: no está cacheado en ningún
   navegador, así que no necesita ir inline como los añadidos
   sobre logired.v5.css.

   El modal lo construye js/revive.v1.js; acá solo viven sus
   estilos. Los colores son los de San Antonio (navy/sky) en las
   dos páginas: las grabaciones son de ese nodo, no del sitio.
   ============================================================ */

/* ---------- Fila "ribbon + botón" ----------
   .ribbon-done es display:flex con width:fit-content y margen inferior propio, o sea
   ocupa su línea entera. Para poner el botón a su costado los envuelve esta fila, que
   absorbe el margen y deja que el botón caiga abajo solo cuando no quepa al lado. */
.donerow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}
.donerow .ribbon-done { margin-bottom: 0; }

.btn-revive {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 18px 8px 14px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  text-align: left;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn-revive:hover { background: var(--navy); color: var(--white); transform: translateY(-2px); }
/* El triángulo se queda naranja al invertir el botón: es el mismo acento que lleva el
   check de la cinta, y mantiene la pareja legible en los dos estados. */
.btn-revive__play {
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--orange);
  color: var(--navy);
}
.btn-revive__play svg { width: 10px; height: 10px; margin-left: 1px; }

/* ---------- Sección de grabaciones (nodo-san-antonio.html) ---------- */
.revive { padding: var(--space-12) 0; }
.revive__grid {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}
.revive-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid #cfe2f6;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.revive-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* La portada es 16:9 como el video, pero dibujada con la trama de la marca en vez de la
   miniatura de YouTube: las tres grabaciones comparten exactamente el mismo archivo de
   portada, así que tres miniaturas idénticas en fila no distinguirían nada. */
.revive-card__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(420px 220px at 15% -10%, rgba(55, 138, 221, .55), transparent 62%),
    radial-gradient(360px 260px at 110% 115%, rgba(24, 95, 165, .5), transparent 60%),
    var(--navy);
  display: grid;
  place-items: center;
}
.revive-card__play {
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--orange);
  color: var(--navy);
  box-shadow: 0 10px 26px rgba(4, 44, 83, .35);
  transition: transform .22s var(--ease), background-color .22s var(--ease);
}
.revive-card:hover .revive-card__play { transform: scale(1.08); background: var(--orange-light); }
.revive-card__play svg { width: 22px; height: 22px; margin-left: 3px; }

.revive-card__part,
.revive-card__dur {
  position: absolute;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
}
.revive-card__part { top: 14px; left: 16px; }
.revive-card__dur {
  bottom: 14px; right: 16px;
  letter-spacing: .04em;
  /* "2H 31M" en versalitas se lee como sigla; la duración va tal cual se escribe. */
  text-transform: none;
  background: rgba(4, 44, 83, .72);
  padding: 4px 10px;
  border-radius: 999px;
}

.revive-card__body {
  padding: var(--space-3) 18px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1 1 auto;
}
.revive-card__title { color: var(--navy); font-weight: 700; font-size: 16px; line-height: 1.3; }
.revive-card__meta { font-size: 13px; color: var(--gray); }
.revive-card__go { margin-top: auto; font-weight: 600; font-size: 15px; color: var(--blue); }
.revive-card:hover .revive-card__go { color: var(--navy); }

/* ---------- Modal con reproductor ---------- */
.rvmodal { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 20px; }
.rvmodal[hidden] { display: none; }
.rvmodal__backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 44, 83, .66);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .25s ease;
}
.rvmodal__card {
  position: relative;
  width: min(1040px, 100%);
  max-height: calc(100dvh - 40px);
  display: flex; flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 80px rgba(4, 44, 83, .35);
  overflow: hidden;
  opacity: 0; transform: translateY(20px) scale(.98);
  transition: opacity .28s ease, transform .28s ease;
}
.rvmodal.is-open .rvmodal__backdrop { opacity: 1; }
.rvmodal.is-open .rvmodal__card { opacity: 1; transform: translateY(0) scale(1); }

.rvmodal__head {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: 18px 20px 14px;
}
.rvmodal__heading { flex: 1 1 auto; min-width: 0; }
.rvmodal__kicker { color: var(--orange-dark); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; }
.rvmodal__title { color: var(--navy); font-weight: 800; font-size: clamp(19px, 2.4vw, 24px); line-height: 1.2; margin-top: 2px; text-transform: uppercase; }
.rvmodal__close {
  flex: none; width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--cream); color: var(--navy);
  cursor: pointer;
}
.rvmodal__close:hover { background: var(--orange-light); }

/* Las pestañas hacen scroll horizontal en móvil en vez de apilarse: apiladas empujaban
   el reproductor fuera de la pantalla en teléfonos apaisados. */
.rvmodal__tabs {
  display: flex; gap: 8px;
  padding: 0 20px 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.rvmodal__tabs::-webkit-scrollbar { display: none; }
.rvmodal__tab {
  flex: none;
  display: inline-flex; align-items: baseline; gap: 8px;
  min-height: 40px;
  padding: 9px 18px;
  border: 2px solid #d9e6f4;
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-weight: 600; font-size: 14.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.rvmodal__tab:hover { border-color: var(--blue); }
.rvmodal__tab small { font-weight: 500; font-size: 12.5px; color: var(--gray); }
.rvmodal__tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.rvmodal__tab[aria-selected="true"] small { color: var(--pale-blue); }

.rvmodal__player { background: #000; aspect-ratio: 16 / 9; width: 100%; }
.rvmodal__player iframe { width: 100%; height: 100%; border: 0; display: block; }

.rvmodal__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--cream);
}
.rvmodal__caption { font-size: 13.5px; color: var(--gray); }
.rvmodal__yt { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; color: var(--blue); }
.rvmodal__yt:hover { color: var(--navy); text-decoration: underline; }

/* En móvil el modal se estrecha pero sigue siendo una tarjeta: a sangre completa y con
   esquinas rectas parecía una hoja de pantalla completa a medio hacer, porque su alto lo
   fija el contenido (cabecera + 16:9 + pie) y nunca llega a llenar la pantalla. */
@media (max-width: 640px) {
  .rvmodal { padding: 12px; }
  .rvmodal__card { max-height: calc(100dvh - 24px); }
  .rvmodal__head { padding: 14px 16px 12px; }
  .rvmodal__tabs { padding: 0 16px 12px; }
  .rvmodal__foot { padding: 12px 16px; }
}

/* ---------- Encajes con los contenedores donde vive la fila ----------
   .schedule__head es uppercase, 800 y con letter-spacing propio, y el botón heredaba
   las tres cosas: se leía "REVIVE LA JORNADA" en versalitas apretadas, distinto del
   mismo botón en la tarjeta de nodo. */
.schedule__head .btn-revive {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
  font-size: 14px;
}
/* index.html trae `.schedule__head .ribbon-done { margin-bottom: 9px }` en un <style>
   del documento, que gana por orden de origen a `.donerow .ribbon-done` con la misma
   especificidad. Sumar el contenedor la desempata y evita el margen duplicado (9px de
   la cinta más 9px de la fila). */
.schedule__head .donerow .ribbon-done { margin-bottom: 0; }