/* ==========================================================================
   HackDevNet · Webinars: listado, destacado con cuenta regresiva y cupos, página del webinar,
   reproductor a pedido y bloqueo de la grabación completa.
   ========================================================================== */

.hdn-pagina .hdn-webinars__intro { margin-top: var(--hdn-e3); font: 400 var(--hdn-t-m)/1.6 var(--hdn-fuente); color: var(--hdn-gris); }
.hdn-pagina .hdn-seccion .hdn-titulo + .hdn-webinars-lista { margin-top: var(--hdn-e6); }
.hdn-pagina .hdn-webinars__intro + .hdn-webinars-lista { margin-top: var(--hdn-e6); }

/* Etiquetas: en vivo y cupos */
.hdn-pagina .hdn-etiqueta--vivo { border-color: #E5484D; color: #B4232A; }
.hdn-pagina .hdn-etiqueta--llena { color: var(--hdn-tinta); }

/* --- Destacado ---------------------------------------------------------------- */
.hdn-pagina .hdn-webinar-destacado {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); overflow: hidden;
	border: 1px solid var(--hdn-tinta); border-radius: var(--hdn-radio);
}
.hdn-pagina .hdn-webinar-destacado__texto { display: grid; align-content: start; gap: var(--hdn-e4); padding: var(--hdn-e7); }
.hdn-pagina .hdn-webinar-destacado__texto .hdn-antetitulo { margin: 0; }
.hdn-pagina .hdn-webinar-destacado__resumen { font: 400 var(--hdn-t-m)/1.6 var(--hdn-fuente); color: var(--hdn-texto); }
.hdn-pagina .hdn-webinar-destacado__fecha { font: 600 var(--hdn-t-s)/1.5 var(--hdn-fuente); color: var(--hdn-tinta); }
.hdn-pagina .hdn-webinar-destacado__ponentes { font: 400 var(--hdn-t-s)/1.5 var(--hdn-fuente); color: var(--hdn-gris); }
.hdn-pagina .hdn-webinar-destacado .hdn-acciones { margin-top: var(--hdn-e3); }
.hdn-pagina .hdn-webinar-destacado__panel {
	display: grid; align-content: center; gap: var(--hdn-e6); padding: var(--hdn-e7);
	background-color: var(--hdn-carbon); color: var(--hdn-sobre-oscuro);
	background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 32px 32px;
}
.hdn-pagina .hdn-webinar-destacado__etiqueta { font: 600 .75rem/1 var(--hdn-fuente); letter-spacing: .16em; text-transform: uppercase; color: var(--hdn-gris2); }
.hdn-pagina .hdn-webinar-destacado__vivo { display: flex; align-items: center; gap: var(--hdn-e3); font: 600 var(--hdn-t-l)/1.2 var(--hdn-fuente); color: var(--hdn-blanco); }

.hdn-pagina .hdn-cuenta { display: flex; gap: var(--hdn-e5); }
.hdn-pagina .hdn-cuenta span { display: grid; gap: var(--hdn-e1); font: 400 var(--hdn-t-xs)/1 var(--hdn-fuente); color: var(--hdn-gris2); }
.hdn-pagina .hdn-cuenta b {
	font: 500 clamp(2.25rem, 1.6rem + 2vw, 3.25rem)/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color: var(--hdn-blanco); font-variant-numeric: tabular-nums;
}

.hdn-pagina .hdn-cupos { display: grid; gap: var(--hdn-e2); max-width: 420px; font: 400 var(--hdn-t-s)/1.5 var(--hdn-fuente); }
.hdn-pagina .hdn-cupos strong { color: inherit; font-weight: 700; }
.hdn-pagina .hdn-cupos__barra { display: block; height: 6px; border-radius: 3px; background: rgba(127, 127, 127, .3); overflow: hidden; }
.hdn-pagina .hdn-cupos__barra i { display: block; height: 100%; background: currentColor; }
.hdn-pagina .hdn-webinar-destacado__panel .hdn-cupos { color: var(--hdn-blanco); }
.hdn-pagina .hdn-portada .hdn-cupos { margin-top: var(--hdn-e5); color: var(--hdn-tinta); }

/* --- Tarjetas del listado ------------------------------------------------------ */
.hdn-pagina .hdn-webinars-lista { display: grid; gap: var(--hdn-e4); list-style: none; }
.hdn-pagina .hdn-webinar-tarjeta {
	position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--hdn-e5); align-items: start;
	padding: var(--hdn-e5); background: var(--hdn-blanco); border: 1px solid var(--hdn-linea); border-radius: var(--hdn-radio);
	transition: border-color var(--hdn-transicion);
}
.hdn-pagina .hdn-webinar-tarjeta:hover { border-color: var(--hdn-tinta); }
.hdn-pagina .hdn-webinar-tarjeta__fecha {
	display: grid; justify-items: center; gap: var(--hdn-e1); padding: var(--hdn-e3) var(--hdn-e2);
	background: var(--hdn-carbon); border-radius: var(--hdn-radio); color: var(--hdn-blanco); text-align: center;
}
.hdn-pagina .hdn-webinar-tarjeta__dia { font: 600 2rem/1 var(--hdn-fuente); }
.hdn-pagina .hdn-webinar-tarjeta__mes { font: 500 .75rem/1.2 var(--hdn-fuente); letter-spacing: .08em; text-transform: uppercase; color: var(--hdn-sobre-oscuro); }
.hdn-pagina .hdn-webinar-tarjeta__texto { display: grid; gap: var(--hdn-e2); }
.hdn-pagina .hdn-webinar-tarjeta__estado { display: flex; flex-wrap: wrap; gap: var(--hdn-e2); }
.hdn-pagina .hdn-webinar-tarjeta__estado .hdn-etiqueta { margin: 0; color: var(--hdn-gris); }
.hdn-pagina .hdn-webinar-tarjeta__titulo { font: 600 var(--hdn-t-l)/1.25 var(--hdn-fuente); color: var(--hdn-tinta); }
.hdn-pagina .hdn-webinar-tarjeta__titulo a { color: inherit; text-decoration: none; }
.hdn-pagina .hdn-webinar-tarjeta__titulo a::after { content: ""; position: absolute; inset: 0; }
.hdn-pagina .hdn-webinar-tarjeta:hover .hdn-webinar-tarjeta__titulo a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.hdn-pagina .hdn-webinar-tarjeta__resumen { font: 400 var(--hdn-t-s)/1.6 var(--hdn-fuente); color: var(--hdn-gris); }
.hdn-pagina .hdn-webinar-tarjeta__meta { font: 500 var(--hdn-t-xs)/1.4 var(--hdn-fuente); color: var(--hdn-texto); }

/* --- Página del webinar -------------------------------------------------------- */
.hdn-pagina .hdn-webinar__titulo { max-width: 24ch; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1.08; }
.hdn-pagina .hdn-webinar__fecha {
	display: flex; align-items: center; gap: var(--hdn-e2); margin-top: var(--hdn-e5);
	font: 600 var(--hdn-t-m)/1.4 var(--hdn-fuente); color: var(--hdn-tinta);
}
.hdn-pagina .hdn-webinar__fecha .hdn-ico { width: 1.2em; height: 1.2em; }

.hdn-pagina .hdn-webinar__cuerpo {
	display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--hdn-e8); align-items: start; padding-block: var(--hdn-e8);
}
.hdn-pagina .hdn-webinar__principal { display: grid; gap: var(--hdn-e7); }
.hdn-pagina .hdn-webinar__bloque { display: grid; gap: var(--hdn-e4); }
.hdn-pagina .hdn-webinar__bloque > .hdn-subtitulo { display: flex; align-items: center; gap: var(--hdn-e2); }
.hdn-pagina .hdn-webinar__redes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hdn-e3); font: 400 var(--hdn-t-s)/1.4 var(--hdn-fuente); color: var(--hdn-gris); }
.hdn-pagina .hdn-webinar__redes a { display: inline-flex; align-items: center; gap: .4em; color: var(--hdn-tinta); font-weight: 600; }
.hdn-pagina .hdn-webinar__redes .hdn-ico { width: 1.1em; height: 1.1em; }

.hdn-pagina .hdn-webinar__bloqueo {
	display: grid; justify-items: start; gap: var(--hdn-e4); padding: var(--hdn-e7) var(--hdn-e6);
	background-color: var(--hdn-carbon); color: var(--hdn-sobre-oscuro); border-radius: var(--hdn-radio);
	background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 32px 32px;
}
.hdn-pagina .hdn-webinar__bloqueo p { font: 400 var(--hdn-t-m)/1.6 var(--hdn-fuente); color: var(--hdn-sobre-oscuro); }
.hdn-pagina .hdn-webinar__bloqueo strong { color: var(--hdn-blanco); }
.hdn .hdn-pagina .hdn-webinar__bloqueo .hdn-boton { background: var(--hdn-blanco); color: var(--hdn-tinta); border-color: var(--hdn-blanco); }

.hdn-pagina .hdn-temario { display: grid; gap: var(--hdn-e3); list-style: none; }
.hdn-pagina .hdn-temario li {
	display: flex; gap: var(--hdn-e4); align-items: baseline; padding-top: var(--hdn-e3); border-top: 1px solid var(--hdn-linea);
	font: 400 var(--hdn-t-m)/1.55 var(--hdn-fuente); color: var(--hdn-texto);
}
.hdn-pagina .hdn-temario__numero { flex: none; font: 500 var(--hdn-t-xs)/1 "JetBrains Mono", ui-monospace, monospace; color: var(--hdn-gris); }
.hdn-pagina .hdn-ponentes { display: grid; gap: var(--hdn-e4); list-style: none; }
.hdn-pagina .hdn-ponentes li { display: flex; align-items: center; gap: var(--hdn-e4); font: 400 var(--hdn-t-s)/1.5 var(--hdn-fuente); color: var(--hdn-gris); }
.hdn-pagina .hdn-ponentes strong { font-size: var(--hdn-t-m); color: var(--hdn-tinta); }
.hdn-pagina .hdn-ponentes__inicial {
	flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
	background: var(--hdn-carbon); color: var(--hdn-blanco); font: 600 var(--hdn-t-l)/1 var(--hdn-fuente);
}

.hdn-pagina .hdn-webinar__lateral {
	position: sticky; top: calc(var(--hdn-alto-cabecera) + var(--hdn-e5)); display: grid; gap: var(--hdn-e5);
	padding: var(--hdn-e6); background: var(--hdn-panel); border-radius: var(--hdn-radio);
}
.admin-bar .hdn-pagina .hdn-webinar__lateral { top: calc(var(--hdn-alto-cabecera) + var(--hdn-e5) + 32px); }
.hdn-pagina .hdn-webinar__lateral .hdn-aviso { margin: 0; background: var(--hdn-blanco); }
.hdn-pagina .hdn-form--webinar { margin-top: 0; gap: var(--hdn-e4); }
.hdn-pagina .hdn-form--webinar .hdn-form__enviar { justify-self: stretch; }
.hdn-pagina .hdn-webinar__calendario { display: grid; gap: var(--hdn-e2); padding-top: var(--hdn-e5); border-top: 1px solid var(--hdn-linea); }
.hdn-pagina .hdn-webinar__calendario .hdn-antetitulo { margin: 0 0 var(--hdn-e1); }
.hdn-pagina .hdn-webinar__calendario .hdn-boton { min-height: 42px; font-size: var(--hdn-t-xs); background: var(--hdn-blanco); }
.hdn-pagina .hdn-webinar__calendario .hdn-boton:hover { background: var(--hdn-tinta); }
.hdn-pagina .hdn-webinar__servicio { font: 400 var(--hdn-t-s)/1.5 var(--hdn-fuente); color: var(--hdn-gris); }
.hdn-pagina .hdn-webinar__servicio a { color: var(--hdn-tinta); font-weight: 600; }

/* Registro de avisos en /webinars/: el panel lateral trae el formulario. */
.hdn-pagina .hdn-webinars .hdn-detalle__lateral .hdn-form { margin-top: 0; }

/* --- Reproductor a pedido (no carga YouTube hasta pulsar) ---------------------- */
.hdn-pagina .hdn-video { display: grid; gap: var(--hdn-e2); }
.hdn-pagina .hdn-video iframe, .hdn .hdn-pagina button.hdn-video__iniciar { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--hdn-radio); }
.hdn .hdn-pagina button.hdn-video__iniciar {
	display: grid; place-content: center; justify-items: center; gap: var(--hdn-e3); margin: 0; padding: 0; cursor: pointer;
	background-color: var(--hdn-carbon); color: var(--hdn-blanco); font: 600 var(--hdn-t-s)/1 var(--hdn-fuente);
	background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 32px 32px;
}
.hdn .hdn-pagina button.hdn-video__iniciar:hover { background-color: var(--hdn-tinta); color: var(--hdn-blanco); }
.hdn-pagina .hdn-video__iniciar .hdn-ico {
	width: 72px; height: 72px; padding: 20px 18px 20px 22px; border-radius: 50%; background: var(--hdn-blanco); color: var(--hdn-tinta);
	transition: transform var(--hdn-transicion);
}
.hdn-pagina .hdn-video__iniciar:hover .hdn-ico { transform: scale(1.06); }
.hdn-pagina .hdn-video__nota { font: 400 var(--hdn-t-xs)/1.4 var(--hdn-fuente); color: var(--hdn-gris); }

@media (max-width: 1023px) {
	.hdn-pagina .hdn-webinar-destacado { grid-template-columns: 1fr; }
	.hdn-pagina .hdn-webinar-destacado__texto, .hdn-pagina .hdn-webinar-destacado__panel { padding: var(--hdn-e6) var(--hdn-e5); }
	.hdn-pagina .hdn-webinar__cuerpo { grid-template-columns: 1fr; gap: var(--hdn-e7); padding-block: var(--hdn-e7); }
	.hdn-pagina .hdn-webinar__lateral { position: static; order: -1; }
}
@media (max-width: 640px) {
	.hdn-pagina .hdn-webinar-tarjeta { grid-template-columns: 64px minmax(0, 1fr); gap: var(--hdn-e4); padding: var(--hdn-e4); }
	.hdn-pagina .hdn-webinar-tarjeta__dia { font-size: 1.5rem; }
	.hdn-pagina .hdn-cuenta { gap: var(--hdn-e4); }
	.hdn-pagina .hdn-webinar__lateral { padding: var(--hdn-e5); }
}