/* ============================================================ LogiRed — "Revive la jornada": grabaciones de los dos nodos. Usado por index.html (botones + modal), nodo-san-antonio.html y nodo-los-andes.html (sección de tarjetas + el mismo modal). v2 (2026-09-03), sobre la v1: 1. El color del nodo salió de las reglas y entró en variables propias del componente (--rv-*). La v1 tenía el navy de San Antonio cableado en catorce declaraciones porque las tres grabaciones eran de ese nodo. El modificador --land las reasigna sin duplicar una sola regla. 2. Panel para las partes que YouTube no deja insertar (ver .rvmodal__blocked, abajo). Por qué variables propias y no los --nodo-* de nodo.v1.css: el modal lo inyecta el JS en , así que en index.html queda fuera de cualquier .nodopage--land y esas variables ni siquiera están definidas. El color tiene que viajar en el dato (js/revive.v2.js pone la clase), no en la cascada del DOM. ============================================================ */ .revive, .rvmodal, .btn-revive { --rv-deep: var(--navy); --rv-accent: var(--blue); --rv-line: #cfe2f6; --rv-line-2: #d9e6f4; --rv-pale: var(--pale-blue); --rv-shade: 4, 44, 83; /* en rgba(): sombras y velos del nodo */ --rv-cover: var(--navy); --rv-glow-1: rgba(55, 138, 221, .55); --rv-glow-2: rgba(24, 95, 165, .5); } /* Misma especificidad que el bloque de arriba: gana por venir después. */ .revive--land, .rvmodal--land, .btn-revive--land { --rv-deep: var(--green-dark); --rv-accent: var(--green); --rv-line: #cbe3d5; --rv-line-2: #d6e8de; --rv-pale: var(--green-soft); --rv-shade: 24, 51, 39; /* La portada necesita un verde bastante más oscuro que --green-dark para sostener el texto blanco: #406e58 con blanco encima queda en 4,4:1. */ --rv-cover: #24473a; --rv-glow-1: rgba(92, 156, 118, .55); --rv-glow-2: rgba(64, 110, 88, .55); } /* ---------- 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(--rv-deep); border-radius: 999px; background: var(--white); color: var(--rv-deep); 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(--rv-deep); 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. Es acento de marca, no de nodo, así que no entra en las variables --rv-*. */ .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 (páginas de nodo) ---------- */ .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 var(--rv-line); 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 grabaciones de un mismo nodo comparten exactamente el mismo archivo de portada, así que las miniaturas en fila no distinguirían nada. */ .revive-card__cover { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(420px 220px at 15% -10%, var(--rv-glow-1), transparent 62%), radial-gradient(360px 260px at 110% 115%, var(--rv-glow-2), transparent 60%), var(--rv-cover); 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(var(--rv-shade), .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(var(--rv-shade), .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(--rv-deep); 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(--rv-accent); } .revive-card:hover .revive-card__go { color: var(--rv-deep); } /* ---------- 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(var(--rv-shade), .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(var(--rv-shade), .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(--rv-deep); 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(--rv-deep); 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 var(--rv-line-2); border-radius: 999px; background: var(--white); color: var(--rv-deep); 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(--rv-accent); } .rvmodal__tab small { font-weight: 500; font-size: 12.5px; color: var(--gray); } .rvmodal__tab[aria-selected="true"] { background: var(--rv-deep); border-color: var(--rv-deep); color: var(--white); } .rvmodal__tab[aria-selected="true"] small { color: var(--rv-pale); } .rvmodal__player { position: relative; background: #000; aspect-ratio: 16 / 9; width: 100%; } .rvmodal__player iframe { width: 100%; height: 100%; border: 0; display: block; } /* El [hidden] del UA no alcanza: `.rvmodal__player iframe { display: block }` le gana por especificidad y el iframe oculto seguiría ocupando el marco. Con el contenedor delante, (0,2,0) contra (0,1,1), el hidden vuelve a mandar y no hace falta un !important. */ .rvmodal__player > [hidden] { display: none; } /* ---------- Parte que YouTube no deja insertar ---------- Cuando una grabación tiene desactivado "Permitir insertar", el iframe pinta la pantalla negra de error de YouTube dentro del modal, que es la peor lectura posible: parece que el sitio está roto. Este panel ocupa el mismo marco 16:9, dice qué pasa y ofrece la única salida que existe. Se activa por dato (embed:false en js/revive.v2.js), no por detección: el iframe es de otro origen y la página no puede leer si cargó o falló. */ .rvmodal__blocked { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: clamp(18px, 4vw, 34px); text-align: center; background: radial-gradient(520px 300px at 50% -20%, var(--rv-glow-2), transparent 70%), var(--rv-cover); color: var(--white); } .rvmodal__blocked-icon { flex: none; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--orange); color: var(--navy); } .rvmodal__blocked-icon svg { width: 26px; height: 26px; } .rvmodal__blocked-title { font-weight: 800; font-size: clamp(16px, 2.2vw, 19px); line-height: 1.25; max-width: 34ch; } .rvmodal__blocked-text { font-size: 14px; line-height: 1.45; max-width: 46ch; color: rgba(255, 255, 255, .82); } .rvmodal__blocked-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 10px 22px; border-radius: 999px; background: var(--white); color: var(--rv-deep); font-weight: 700; font-size: 14.5px; transition: background-color .2s var(--ease), transform .2s var(--ease); } .rvmodal__blocked-cta:hover { background: var(--orange-light); transform: translateY(-2px); } /* Bajo ~420px de alto útil el marco 16:9 deja menos de 240px: sobra el párrafo antes que el botón, que es lo único accionable. */ @media (max-height: 620px), (max-width: 430px) { .rvmodal__blocked { gap: 10px; } .rvmodal__blocked-icon { display: none; } .rvmodal__blocked-text { display: none; } } .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(--rv-accent); } .rvmodal__yt:hover { color: var(--rv-deep); text-decoration: underline; } /* ---------- Teléfono apaisado ---------- Viene de la v1: el reproductor lleva aspect-ratio 16/9, así que su alto lo decide el ancho, y en 844x420 pide 450px cuando la tarjeta entera dispone de 380 (100dvh - 40). El overflow:hidden de la tarjeta no reacomoda nada: cortaba las pestañas por la mitad y dejaba el pie fuera de la pantalla. Bajo 560px de alto se invierte quién manda —el reproductor absorbe lo que sobra en vez de imponerlo— y YouTube pone sus propias franjas negras si la caja no queda en 16:9. El min-height:0 no es adorno: el mínimo automático de un ítem flex es su contenido, y sin eso el iframe se niega a encoger. */ @media (max-height: 560px) { /* El align-self:stretch es la mitad que hace falta y no se ve venir: flex-grow reparte el espacio SOBRANTE, y con la tarjeta centrada (place-items:center) su alto lo fija su contenido, así que no sobra nada y el reproductor no crecía. Estirada contra la pista de la grilla —que sí ocupa todo, porque align-content vale stretch por omisión— hay espacio real que repartir. Y stretch respeta el padding de .rvmodal, cosa que un height: calc(100dvh - 40px) tendría que repetir a mano en cada media query. */ .rvmodal__card { align-self: stretch; } .rvmodal__head, .rvmodal__tabs, .rvmodal__foot { flex: none; } .rvmodal__player { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; } } /* 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