/* =====================================================================
   REDISEÑO — Fase 1: tokens de diseño + HEADER + FOOTER/boletín
   La Buena Nutrición Eventos

   Reglas de esta capa:
   - Todo lo nuevo vive aquí (NUNCA en frontend.css ni en los SCSS del tema).
   - Selectores propios llevan prefijo `rd-` y/o cuelgan de `body.rediseno`.
   - Donde se sobreescribe un selector legacy (main-menu-container,
     navbar-session, footer-area-section, etc.) es SOLO para agregar
     estados que no existían (:focus-visible, :hover) — no se toca
     layout/color base porque ya hace match pixel-close con el Figma
     (HOME.jpg / HOME-1.jpg), validado con cuentagotas.
   - Mobile-first: base en 320px, escalado con min-width.
   - Fuente: Mukta ya self-host con font-display:swap en frontend.css,
     no se agregan webfonts nuevas.
   ===================================================================== */

:root {
  /* Paleta — extraída con cuentagotas de HOME.jpg/HOME-1.jpg y confirmada
     contra los valores exactos ya usados en producción (SVG del logo y
     frontend.css). No se re-declaran los colores en los selectores legacy
     que YA los aplican correctamente; estos tokens documentan la paleta
     y se usan en los estados nuevos (focus/hover) de esta capa. */
  --rd-navy: #030139;           /* texto/títulos oscuros (ej. "Suscríbete a nuestro boletín") */
  --rd-ink: #1A1B2A;             /* texto+borde de botones pill, links de nav */
  --rd-brand-dark: #004876;      /* azul "La Buena" del logo (fill exacto del SVG) */
  --rd-brand-light: #73C3D5;     /* celeste "Nutrición" del logo (fill exacto del SVG) */
  --rd-link-blue: #225192;       /* links "Conócenos" / "Pasos a seguir" del footer */
  --rd-underline-teal: #72C4D7;  /* subrayado de esos links */
  --rd-fill-celeste: #E5FAFA;    /* relleno de los pills (Iniciar Sesión / Regístrate / Enviar) */
  --rd-bg-page: #FFFFFF;
  --rd-divider: silver;          /* separador vertical del header logueado */

  --rd-radius-pill: 999px;
  --rd-transition: 200ms ease-out; /* timing por defecto (no viaja por prototipo) */

  --rd-focus-color: var(--rd-ink);
  --rd-focus-width: 3px;
  --rd-focus-offset: 2px;

  /* Fase 2 — /login: extraídos con cuentagotas de LOGIN.jpg (estado vacío)
     y LOGIN-1.jpg (estado lleno). --rd-fill-celeste, --rd-navy y
     --rd-brand-light de arriba ya cubren el resto de la pantalla
     (CTA activo, borde/texto CTA activo, blob del ícono). */
  --rd-grey-mid: #999999;     /* CTA disabled + borde de inputs */
  --rd-grey-light: #CCCCCC;   /* borde checkbox + línea del separador */
  --rd-login-link: #0057FF;   /* "¿Olvidaste tu contraseña?" / "REGÍSTRATE" + accent-color checkbox */

  /* Fase 6 — /eventos-pasados: extraídos con cuentagotas (PIL, no a ojo) de
     "eventos pasados.jpg". --rd-navy y --rd-link-blue de arriba ya cubren
     iconos/texto de fecha-hora-stats y el título de cada card (sampleados
     en #02013A y #215191/#225292 respectivamente -- prácticamente idénticos
     a los tokens existentes, se reusan en vez de duplicar). */
  --rd-pasados-pill-active-bg: #1E386B;  /* pill "Todos los años" (activo) */
  --rd-pasados-pill-border: #E0E4ED;     /* borde pills outline + input buscar */
  --rd-pasados-band-bg: #F5F9FC;         /* fondo banda de filtros */
  --rd-pasados-card-border: #4185F4;     /* borde 1px de cada card */
  --rd-badge-congreso-bg: #E1F2EA;
  --rd-badge-congreso-text: #0C5961;
  --rd-badge-simposio-bg: #D8E8F7;
  --rd-badge-simposio-text: #1A5096;
  --rd-badge-webinar-bg: #EADDF7;
  --rd-badge-webinar-text: #601999;
}

/* ---------------------------------------------------------------------
   Utilidad de foco accesible — reutilizada en header y footer.
   :focus-visible obligatorio en todo elemento interactivo aunque el
   diseño de referencia no lo muestre.
   --------------------------------------------------------------------- */
body.rediseno .main-menu-container a:focus-visible,
body.rediseno .main-menu-container button:focus-visible,
body.rediseno .mean-nav a:focus-visible,
body.rediseno .meanmenu-reveal:focus-visible,
body.rediseno #footer-area a:focus-visible,
body.rediseno #footer-area button:focus-visible,
body.rediseno #footer-area input:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
  border-radius: 4px;
}

/* Los pills ya son redondos: el outline cuadrado se ve raro pegado al
   borde, así que en los botones/inputs pill usamos radio a juego. */
body.rediseno .navbar-session a:focus-visible,
body.rediseno #footer-area .footer-subscribe-form-send .email:focus-visible,
body.rediseno #footer-area .footer-subscribe-form-send .send:focus-visible {
  outline-offset: 3px;
  border-radius: var(--rd-radius-pill);
}

body.rediseno .nav.navbar-nav.navbar-nav--login li > a:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
  border-radius: var(--rd-radius-pill);
}

/* ---------------------------------------------------------------------
   HEADER — estados interactivos (hover/focus) que no existían.
   Base visual (colores, spacing, pills) ya matchea la referencia y no
   se toca: cambios mínimos, solo se agrega feedback de interacción.
   --------------------------------------------------------------------- */

/* Fix: al agregar "Eventos Pasados" (5to item), el <ul> flex (frontend.css
   .nav-menu ul{display:flex}) comprimía cada <a> por debajo de su ancho
   natural y el texto se partía en 2 líneas entre 992-1120px. Con
   nowrap + flex-shrink:0 cada link mide su ancho natural; a 992px caben
   los 5 (~509px necesarios vs ~610px disponibles entre logo y botones). */
body.rediseno .nav-menu li {
  flex-shrink: 0;
}

body.rediseno .nav-menu li a {
  white-space: nowrap;
}

/* Links de navegación: line bajo el texto en hover, igual que el activo. */
body.rediseno .nav-menu li a,
body.rediseno .mean-nav ul li a {
  transition: color var(--rd-transition);
}

body.rediseno .nav-menu li a:hover {
  color: var(--rd-ink);
}

/* 2026-08-03 QA "Web eventos" obs.2 -- "revisar animaciones" del nav: el
   underline saltaba porque el ::after era display:block DENTRO del flujo de
   un <a> display:inline (legacy .nav-menu li a, frontend.css) -- un hijo
   block dentro de un inline crea una caja anónima que desalinea el <a> con
   su <li> (medido: <a> quedaba 3px más alto que su <li>, desborde hacia
   arriba). Fix: position:absolute (el <a> ya es position:relative por
   legacy) saca el underline del flujo -- ya no mueve/desalinea nada, solo
   anima su width con --rd-transition. */
body.rediseno .nav-menu li a:not(.active)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  display: block;
  height: 2px;
  width: 0;
  background-color: var(--rd-brand-light);
  transition: width var(--rd-transition);
}

body.rediseno .nav-menu li a:not(.active):hover::after,
body.rediseno .nav-menu li a:not(.active):focus-visible::after {
  width: 100%;
}

/* Pendiente B (Fase 1): entre 992-1100px .navbar-session (flex, gap:1rem)
   dentro de .navbar-default (flex, space-between) comprime el pill por
   debajo del ancho natural de su contenido y "Iniciar Sesión" se parte
   en 2 líneas (verificado: roto en 1024px, OK desde 1100px). Mismo
   patrón que el fix de .nav-menu li en Fase 1: nowrap + flex-shrink:0
   para que cada pill mida su ancho natural y no se comprima. */
body.rediseno .navbar-session {
  flex-shrink: 0;
}

body.rediseno .navbar-session a {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Botones pill "Iniciar Sesión" / "Regístrate": feedback de hover. */
body.rediseno .navbar-session a,
body.rediseno .mean-nav--btn a {
  transition: background-color var(--rd-transition), border-color var(--rd-transition), transform var(--rd-transition);
}

body.rediseno .navbar-session a:hover {
  background-color: #d6f4f4;
  border-color: var(--rd-navy);
}

body.rediseno .navbar-session a:active {
  transform: translateY(1px);
}

/* Avatar + chevron (estado logueado, HOME-1.jpg): feedback de hover en el toggle. */
body.rediseno .nav.navbar-nav.navbar-nav--login li > a {
  transition: opacity var(--rd-transition);
}

body.rediseno .nav.navbar-nav.navbar-nav--login li > a:hover {
  opacity: .8;
}

/* Hamburguesa mobile: sin outline visible por defecto en el tema legacy. */
body.rediseno .meanmenu-reveal {
  transition: opacity var(--rd-transition);
}

/* ---------------------------------------------------------------------
   FOOTER / BOLETÍN — estados interactivos que no existían.
   --------------------------------------------------------------------- */

body.rediseno #footer-area .footer-subscribe-form-send .send {
  transition: background-color var(--rd-transition), transform var(--rd-transition);
}

body.rediseno #footer-area .footer-subscribe-form-send .send:hover {
  background-color: #d6f4f4;
}

body.rediseno #footer-area .footer-subscribe-form-send .send:active {
  transform: translateY(-50%) translateY(1px);
}

body.rediseno #footer-area .footer-subscribe-form label a {
  transition: color var(--rd-transition);
}

body.rediseno #footer-area .footer-subscribe-form label a:hover {
  color: var(--rd-link-blue);
}

/* Redes sociales + links "Conócenos"/"Pasos a seguir": feedback de hover. */
body.rediseno #footer-area .footer-social a {
  display: inline-flex;
  transition: opacity var(--rd-transition);
}

body.rediseno #footer-area .footer-social a:hover {
  opacity: .7;
}

body.rediseno #footer-area .footer-contact a {
  transition: color var(--rd-transition), border-color var(--rd-transition);
}

body.rediseno #footer-area .footer-contact a:hover {
  color: var(--rd-navy);
  border-color: var(--rd-navy);
}

/* Checkbox de políticas: usamos el mismo azul nativo que ya trae la
   referencia (HOME.jpg lo muestra con el check azul por defecto del
   navegador), solo homologamos accent-color para que no varíe entre
   navegadores manteniendo ese mismo tono. */
body.rediseno #footer-area .footer-subscribe-form input[type="checkbox"] {
  accent-color: #0075FF;
}

/* =====================================================================
   LOGIN — Fase 2: página dedicada /login (antes: redirect a home + modal)
   Split-screen: foto de auditorio (izq, se oculta <768px) + formulario.
   Paleta y proporciones extraídas con cuentagotas/medición de píxeles de
   LOGIN.jpg (vacío) y LOGIN-1.jpg (lleno). No hay Figma para esta
   pantalla: el gate es el catálogo anti-defectos + verificación
   scriptada (ver reporte), no el ≤2px/99% de Figma.
   Mobile-first: base en 320px, split desde 768px.
   ===================================================================== */

/* padding-top compensa el header fixed (.main-menu-container en
   frontend.css es position:fixed SIEMPRE, no solo al hacer scroll):
   sin esto el título y el ícono quedan tapados detrás del header
   (catálogo anti-defectos #6). Medido: header ~78px en mobile,
   ~88-90px en desktop -> se deja margen extra en ambos casos. */
body.rediseno .rd-login {
  padding: 6.5rem 0 3rem;
}

body.rediseno .rd-login__grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Foto decorativa oculta en mobile: prioriza el form sin scroll extra y
   evita cargar/renderizar una imagen alta que no aporta a la tarea
   (login) en pantallas chicas. */
body.rediseno .rd-login__media {
  display: none;
}

body.rediseno .rd-login__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.rediseno .rd-login__panel {
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
}

body.rediseno .rd-login__title {
  color: var(--rd-navy);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2rem);
  text-align: center;
  margin: 0 0 1.5rem;
}

/* Ícono: círculo (borde navy) + blob (teal) detrás + glyph de persona,
   todo un solo <svg> inline (login.blade.php). Blob y glyph comparten
   color: en LOGIN.jpg ambos muestrean el mismo teal (--rd-brand-light). */
body.rediseno .rd-login-icon {
  width: 140px;
  margin: 0 auto 2rem;
}

body.rediseno .rd-login-icon svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Ajuste 2026-07-08: la img es el asset real (login-user-icon.png) que
   reemplazó al svg dibujado en /login. Scopeado a .rd-login__panel para NO
   pisar el preview del avatar de /register (.rd-register-avatar__preview,
   absolute inset:12px), que también vive dentro de un .rd-login-icon. */
body.rediseno .rd-login__panel .rd-login-icon > img {
  display: block;
  width: 100%;
  height: auto;
}

body.rediseno .rd-login-icon__blob {
  fill: var(--rd-brand-light);
}

body.rediseno .rd-login-icon__circle {
  fill: #fff;
  stroke: var(--rd-navy);
  stroke-width: 3;
}

body.rediseno .rd-login-icon__glyph {
  fill: var(--rd-brand-light);
}

body.rediseno .rd-login-alert {
  background: #FEECEC;
  border: 1px solid #E38080;
  color: #8A1F1F;
  padding: .75rem 1rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  font-size: .9rem;
  line-height: 1.4;
}

body.rediseno .rd-login-alert[hidden] {
  display: none;
}

/* Modificador genérico (usado primero en /register, Fase 3): mismo box que
   .rd-login-alert, tokens de éxito en vez de error. No se toca la regla base. */
body.rediseno .rd-login-alert--success {
  background: #E7F6EC;
  border-color: #6FCB8E;
  color: #1E6B3A;
}

body.rediseno .rd-login-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

body.rediseno .rd-login-field label {
  display: block;
  font-weight: 500;
  color: var(--rd-ink);
  margin-bottom: .5rem;
}

/* Inputs >=16px evita zoom automático en iOS; min-height 48px cubre el
   touch target >=44px del catálogo anti-defectos. */
body.rediseno .rd-login-field input[type="email"],
body.rediseno .rd-login-field input[type="password"] {
  width: 100%;
  min-height: 48px;
  font-size: 1rem;
  line-height: 1.4;
  padding: 0 1rem;
  border: 1px solid var(--rd-grey-mid);
  border-radius: 12px;
  background: #fff;
  color: var(--rd-ink);
  transition: border-color var(--rd-transition);
}

body.rediseno .rd-login-field input::placeholder {
  color: #9CA3AF;
}

body.rediseno .rd-login-field input:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
  border-color: var(--rd-ink);
}

body.rediseno .rd-login-field input[aria-invalid="true"] {
  border-color: #C22525;
}

body.rediseno .rd-login-error {
  display: block;
  color: #C22525;
  font-size: .8125rem;
  line-height: 1.4;
  margin-top: .375rem;
}

body.rediseno .rd-login-error:empty {
  display: none;
}

body.rediseno .rd-login-field__control {
  position: relative;
}

body.rediseno .rd-login-field__control input {
  padding-right: 3rem;
}

body.rediseno .rd-login-toggle-password {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background-color: transparent;
  background-image: url(/images/ico_eye.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
  cursor: pointer;
  border-radius: 12px;
}

body.rediseno .rd-login-toggle-password--visible {
  background-image: url(/images/ico_eye_close.svg);
}

body.rediseno .rd-login-toggle-password:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}

body.rediseno .rd-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.rediseno .rd-login-forgot {
  text-align: right;
  margin-top: -.5rem;
}

body.rediseno .rd-login-forgot a {
  color: var(--rd-login-link);
  font-size: .875rem;
  text-decoration: none;
}

body.rediseno .rd-login-forgot a:hover {
  text-decoration: underline;
}

body.rediseno .rd-login-forgot a:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
  border-radius: 4px;
}

body.rediseno .rd-login-remember {
  display: flex;
  align-items: center;
  gap: .625rem;
}

body.rediseno .rd-login-remember input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  accent-color: var(--rd-login-link);
  border-radius: 4px;
}

body.rediseno .rd-login-remember label {
  color: var(--rd-ink);
  font-size: .9375rem;
}

body.rediseno .rd-login-remember input:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}

body.rediseno .rd-login-divider {
  position: relative;
  text-align: center;
  color: #9CA3AF;
  font-size: .875rem;
  margin: .5rem 0;
}

body.rediseno .rd-login-divider::before,
body.rediseno .rd-login-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 32%;
  height: 1px;
  background: var(--rd-grey-light);
}

body.rediseno .rd-login-divider::before {
  left: 0;
}

body.rediseno .rd-login-divider::after {
  right: 0;
}

body.rediseno .rd-login-divider span {
  background: var(--rd-bg-page);
  padding: 0 .75rem;
  position: relative;
}

body.rediseno .rd-login-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

/* Placeholder de demo (decisión Anyerson 2026-07-08): con oauth_ready=false
   los botones sociales se ven como en el diseño pero NO son clickeables
   (no hay credenciales OAuth reales todavía). Se neutraliza el mouse aquí;
   el foco por teclado lo saca initSocialPlaceholder() en rediseno.js. */
body.rediseno .rd-login-social--disabled a {
  pointer-events: none;
  cursor: default;
}

/* LOOP BACK QA (FIX 9, BAJO) — LOGIN.jpg muestra Facebook -> Google, pero
   Socialite::getSocialLinks() (app/Helpers/Frontend/Auth/Socialite.php,
   backend compartido con el modal legacy, NO se toca) emite el <a> de
   Google antes que el de Facebook -- confirmado en el DOM real de
   /login: "social-login--google" sale primero. Se resuelve solo en
   presentación, sin tocar el helper ni el modal legacy: row-reverse
   invierte el orden VISUAL de los hijos flex de .rd-login-social (el
   div .alt-text que precede a ambos <a> en el HTML ya está oculto con
   display:none, así que reordenarlo no tiene efecto visible). Scope:
   .rd-login-social es exclusivo de esta página dedicada (/login,
   frontend/auth/login.blade.php) -- el modal legacy usa su propio
   #socialLinks dentro de .modal--login y no hereda esta regla. */
body.rediseno .rd-login-social {
  flex-direction: row-reverse;
}

/* Socialite::getSocialLinks() (helper compartido, no se toca) antepone su
   propio separador en inglés ("SIGN IN WITH"); lo ocultamos porque el
   texto en español ya lo dibuja .rd-login-divider arriba. */
body.rediseno .rd-login-social .alt-text {
  display: none;
}

body.rediseno .rd-login-social a {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #F1F2F4;
  transition: background-color var(--rd-transition), transform var(--rd-transition);
}

body.rediseno .rd-login-social a:hover {
  background-color: #E3E5E8;
}

body.rediseno .rd-login-social a:active {
  transform: translateY(1px);
}

body.rediseno .rd-login-social a:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: 2px;
}

/* El helper devuelve "<a class='btn-main btn--2'><div class='social-login
   ...'></div> Continuar con Google</a>": el texto queda en el árbol de
   accesibilidad (describe el link) pero se oculta visualmente porque la
   referencia solo pide el ícono redondo. */
body.rediseno .rd-login-social a.btn-main.btn--2 {
  font-size: 0;
  line-height: 0;
  color: transparent;
}

body.rediseno .rd-login-social .social-login {
  width: 20px;
  height: 20px;
  /* Sin flex-shrink:0 el div vacío (solo background-image, sin contenido
     que le dé "min-content") colapsa a 0px de ancho dentro del <a> flex:
     flex-basis:auto usa el min-content del ítem en vez del width
     especificado cuando el ítem no tiene contenido intrínseco. Verificado
     en Chromium: width computado pasaba de 0px a 20px solo con esto. */
  flex-shrink: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  /* Sin filter: los SVG entregados (Figma nodes 12:142/13:666 LOGIN,
     13:917/13:2428 SIGN UP) ya traen el gris exacto #999999 sólido —
     el filter grayscale(1) brightness(.75) era para desaturar los badges
     circulares a color (facebook azul + google 4 colores) que se usaban
     antes; con el ícono plano ya gris aplicar brightness(.75) lo oscurecía
     a ~#727272, corriendo el tono respecto al Figma. */
}

/* Íconos exactos entregados por Anyerson desde Figma (asset fuente, NO los
   badges circulares a color de /images/facebook-ico.svg y google-ico.svg
   que usa el modal legacy #socialLinks vía frontend.css — ruta y asset
   distintos, cero solape). Carpeta dedicada para no tocar ese asset
   compartido fuera de alcance de este fix. */
body.rediseno .rd-login-social .social-login--facebook {
  background-image: url(/images/social/facebook.svg);
}

body.rediseno .rd-login-social .social-login--google {
  background-image: url(/images/social/google.svg);
}

/* Providers sin .social-login (twitter/linkedin/github/bitbucket en el
   helper) pintan un <i class="fab"> sobre .btn.btn-sm.btn-info: ese
   ".btn-info" trae bg/borde azul de Bootstrap con su propia
   especificidad, por eso el !important (documentado aquí, mismo patrón
   que el resto del sitio con temas legacy: ver frontend.css línea 789
   ".navbar-nav--login a{border-left:1px solid silver !important}"). */
body.rediseno .rd-login-social a:not(.btn-main.btn--2) {
  background-color: #F1F2F4 !important;
  border: 0 !important;
  color: #6B7280 !important;
}

body.rediseno .rd-login-cta {
  width: 100%;
  min-height: 52px;
  border-radius: var(--rd-radius-pill);
  border: 1.5px solid transparent;
  background-color: var(--rd-grey-mid);
  color: #fff;
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .02em;
  cursor: not-allowed;
  transition: background-color var(--rd-transition), color var(--rd-transition), border-color var(--rd-transition);
}

/* Clase que agrega rediseno.js cuando ambos campos tienen valor (ver
   initLoginCtaState). Sin JS el botón sigue siendo clickeable (no trae
   el atributo disabled de fábrica), solo se ve gris por defecto. */
body.rediseno .rd-login-cta--active {
  background-color: var(--rd-fill-celeste);
  border-color: var(--rd-navy);
  color: var(--rd-navy);
  cursor: pointer;
}

body.rediseno .rd-login-cta--active:hover {
  background-color: #d6f4f4;
}

body.rediseno .rd-login-cta--active:active {
  transform: translateY(1px);
}

body.rediseno .rd-login-cta:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}

body.rediseno .rd-login-signup {
  text-align: center;
  color: var(--rd-ink);
  font-size: .9375rem;
  margin: 0;
}

body.rediseno .rd-login-signup a {
  color: var(--rd-login-link);
  font-weight: 700;
  text-decoration: none;
  margin-left: .25rem;
}

body.rediseno .rd-login-signup a:hover {
  text-decoration: underline;
}

body.rediseno .rd-login-signup a:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
  border-radius: 4px;
}

@media (min-width: 768px) {
  body.rediseno .rd-login__grid {
    flex-direction: row;
    align-items: stretch;
    gap: 3rem;
  }

  body.rediseno .rd-login__media {
    display: block;
    flex: 0 0 40%;
    max-width: 460px;
    overflow: hidden;
  }

  body.rediseno .rd-login__panel {
    flex: 1 1 auto;
  }
}

@media (min-width: 1024px) {
  body.rediseno .rd-login {
    padding: 7.5rem 0 4rem;
  }
}

/* =====================================================================
   REGISTRO — Fase 3: página dedicada /register (antes: reusaba por error
   LoginController@showLoginForm y mostraba la pantalla de LOGIN).
   Shell split-screen (foto + panel), header-offset, ícono con blob/círculo
   y varias clases hoja se REUSAN literalmente de .rd-login-* (ver comentario
   de reuso en register.blade.php) porque son visualmente identicas y no
   tienen JS atado a un selector singular. Lo nuevo (grid de filas, campos
   genéricos input/select, avatar mock, cascada de profesión, checkbox de
   términos) vive en clases rd-register-* propias.
   Extraído con cuentagotas/medición de píxeles de SIGN UP.jpg (vacío) y
   SIGN UP-1.jpg (lleno); fields.jpg fijó el detalle de campos (Nombre y
   Apellido separados, qué lleva asterisco). Sin Figma: gate = catálogo
   anti-defectos + verificación scriptada, no el ≤2px/99%.
   Mobile-first: base en 320px, grid de 2 columnas desde 768px.
   ===================================================================== */

/* Panel más ancho que el de /login: el form de registro tiene filas de 2
   columnas y en 32rem (ancho de .rd-login__panel) esas columnas quedan
   apretadas. Medido en SIGN UP.jpg: el panel ocupa ~31-32% de un lienzo
   ~2x, ≈595-620px de CSS width -> 36rem (576px) es la lectura más cercana
   que no rompe el mobile-first (columna única <768px de cualquier forma). */
body.rediseno .rd-register .rd-login__panel {
  max-width: 36rem;
}

body.rediseno .rd-register-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ---------------------------------------------------------------------
   Avatar (mock visual, ver TODO-BACKEND.md > Fase 3): marco circular
   blob+círculo reusando .rd-login-icon, más grande que en /login y con
   la foto de preview superpuesta cuando el usuario elige un archivo.
   --------------------------------------------------------------------- */
body.rediseno .rd-register-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
}

body.rediseno .rd-register-avatar__icon {
  position: relative;
  width: 140px;
  margin: 0;
}

/* Ajuste 2026-07-08: placeholder del avatar = asset real de /login
   (login-user-icon.png). Llena la caja como lo hacía el svg; el preview
   (.rd-register-avatar__preview, absolute) se superpone sin conflicto. */
body.rediseno .rd-register-avatar__placeholder {
  display: block;
  width: 100%;
  height: auto;
}

body.rediseno .rd-register-avatar__preview {
  position: absolute;
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  border-radius: 50%;
  object-fit: cover;
}

body.rediseno .rd-register-avatar__preview[hidden] {
  display: none;
}

body.rediseno .rd-register-avatar__link {
  color: var(--rd-login-link);
  font-size: .9375rem;
  text-decoration: underline;
  cursor: pointer;
}

body.rediseno .rd-register-avatar__link:hover {
  color: var(--rd-navy);
}

body.rediseno .rd-register-avatar__link:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
  border-radius: 4px;
}

/* ---------------------------------------------------------------------
   Filas de campos: 1 columna en mobile, 2 desde 768px (fields.jpg /
   SIGN UP.jpg muestran los pares Nombre+Apellido, Tipo/Nro documento,
   Profesión/Nacionalidad, Celular/Email, Contraseña/Confirmar en 2 col
   en desktop; en mobile cada campo ocupa el ancho completo).
   --------------------------------------------------------------------- */
body.rediseno .rd-register-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

body.rediseno .rd-register-row[hidden] {
  display: none;
}

body.rediseno .rd-register-field[hidden] {
  display: none;
}

body.rediseno .rd-register-field label {
  display: block;
  font-weight: 500;
  color: var(--rd-ink);
  margin-bottom: .5rem;
}

/* Inputs/selects >=16px evita zoom automático en iOS; min-height 48px
   cubre el touch target >=44px del catálogo anti-defectos. Mismos
   tokens que .rd-login-field (border/radius/color) pero selector propio
   porque acá cubre también text/tel/select, no solo email/password. */
body.rediseno .rd-register-field input[type="text"],
body.rediseno .rd-register-field input[type="tel"],
body.rediseno .rd-register-field input[type="email"],
body.rediseno .rd-register-field input[type="password"],
body.rediseno .rd-register-field select {
  width: 100%;
  min-height: 48px;
  font-size: 1rem;
  line-height: 1.4;
  padding: 0 1rem;
  border: 1px solid var(--rd-grey-mid);
  border-radius: 12px;
  background-color: #fff;
  color: var(--rd-ink);
  transition: border-color var(--rd-transition);
}

body.rediseno .rd-register-field select {
  padding-right: 2.75rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231A1B2A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

body.rediseno .rd-register-field input::placeholder {
  color: #9CA3AF;
}

body.rediseno .rd-register-field input:focus-visible,
body.rediseno .rd-register-field select:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
  border-color: var(--rd-ink);
}

body.rediseno .rd-register-field input[aria-invalid="true"],
body.rediseno .rd-register-field select[aria-invalid="true"] {
  border-color: #C22525;
}

/* Microcopy del certificado (debajo de Nombre/Apellido): celeste, ver
   --rd-brand-light ya usado en el resto del rediseño para acentos. */
body.rediseno .rd-register-hint {
  color: var(--rd-brand-dark);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
  margin: -.5rem 0 0;
}

body.rediseno .rd-register-field--captcha {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

/* ---------------------------------------------------------------------
   Checkbox de términos y condiciones.
   --------------------------------------------------------------------- */
body.rediseno .rd-register-terms {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
}

body.rediseno .rd-register-terms input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin-top: .125rem;
  accent-color: var(--rd-login-link);
  border-radius: 4px;
}

body.rediseno .rd-register-terms input:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}

body.rediseno .rd-register-terms label {
  color: var(--rd-ink);
  font-size: .9375rem;
  line-height: 1.4;
  cursor: pointer;
}

body.rediseno .rd-register-terms label a {
  color: var(--rd-link-blue);
  text-decoration: underline;
}

body.rediseno .rd-register-terms label a:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
  border-radius: 4px;
}

@media (min-width: 768px) {
  body.rediseno .rd-register-row {
    grid-template-columns: 1fr 1fr;
  }

  body.rediseno .rd-register-avatar__icon {
    width: 168px;
  }
}

/* =====================================================================
   HOME — Fase 4: cierre de brechas contra HOME.jpg (invitado) /
   HOME-1.jpg (logueado, mismo layout). Sin nodos Figma (son capturas
   JPG): gate = catálogo anti-defectos + verificación scriptada +
   medición/cuentagotas sobre el JPG, igual que /login y /register.
   El hero/slider y los números de "Nuestras cifras" son CONTENIDO de
   BD (arte del banner, countdown real, contadores) — no se tocan.
   Mobile-first: base 320px, escalado con min-width.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Card evento destacado (.course-item-fecha, partials/popular_courses.
   blade.php) — countdown ".course-count".
   Gap de ESTRUCTURA real (no de contenido): el HTML legacy pintaba las
   3 cajas del countdown (Días/Horas/Minutos) DESPUÉS del botón "Saber
   más"; HOME.jpg muestra 1 sola caja celeste ancha ("15 dias - 20 h")
   ANTES del botón. Se reordenó en el blade y aquí se fusiona el estilo
   de los divs en una caja única, sin tocar public/assets/js/script.js
   (actualiza SOLO los span:first-child por índice nth-child, nunca
   toca layout/labels) -- el fix es 100% CSS + reorder de blade.
   --------------------------------------------------------------------- */
body.rediseno .course-count {
  margin-top: 1.25rem;
  background: var(--rd-fill-celeste);
  border-radius: 24px;
  padding: 1.25rem 1rem;
  gap: 0;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
}

body.rediseno .course-count div {
  flex: 0 0 auto;
  background: transparent;
  padding: 0;
  border-radius: 0;
  display: flex;
  align-items: baseline;
  gap: .375rem;
}

/* 3er hijo (Minutos): ruido que no está en la referencia. Se deja en el
   DOM (el script legacy sigue actualizando su número) y se oculta solo
   visualmente -- display:none también lo saca del árbol de accesibilidad,
   que es lo esperado para un dato redundante/no crítico. */
body.rediseno .course-count div:nth-child(3) {
  display: none;
}

/* Separador " - " entre los 2 divs visibles, calcado de "15 dias - 20 h"
   en HOME.jpg. Usa :not(:first-child) en vez de div + div porque el 3er
   div oculto sigue contando como hermano en el árbol (no afecta acá:
   solo hay 2 hijos visibles, 1 separador). */
body.rediseno .course-count div:not(:first-child)::before {
  content: '-';
  margin-right: .375rem;
  color: var(--rd-brand-dark);
  font-weight: 700;
}

body.rediseno .course-count div span {
  font-size: 1rem;
}

body.rediseno .course-count div span:first-child {
  font-size: 1.75rem;
  line-height: 1.2;
}

@media (min-width: 768px) {
  body.rediseno .course-count {
    padding: 1.5rem 2rem;
  }

  body.rediseno .course-count div span:first-child {
    font-size: 2rem;
  }
}

/* Botón "Saber más": pill outline ANCHO COMPLETO (HOME.jpg lo muestra
   ocupando el mismo ancho que la caja del countdown, no un botón de
   ancho de contenido como pintaba el legacy con inline-flex). Radius/
   borde/color ya matchean via frontend.css .course-btn -- solo se
   agrega ancho, separación y los estados interactivos que faltaban. */
body.rediseno .course-btn {
  display: flex;
  width: 100%;
  min-height: 48px;
  margin-top: 1.25rem;
  transition: background-color var(--rd-transition), transform var(--rd-transition);
}

body.rediseno .course-btn:hover {
  background-color: #d6f4f4;
}

body.rediseno .course-btn:active {
  transform: translateY(1px);
}

body.rediseno .course-btn:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}

/* ---------------------------------------------------------------------
   Floating "Próximo Evento" (.next_events / #nextEvent, partials/
   popular_courses.blade.php) — NO está en HOME.jpg/HOME-1.jpg, es un
   componente legacy (position:fixed;bottom:0) que vive fuera del scope
   del rediseño. Se detectó con verificación scriptada (no en el ojo):
   en <768px mide 180px de alto (3 filas: texto+countdown+botón) y tapa
   POR COMPLETO el título, countdown y botón "Saber más" de la card
   destacada en la carga inicial de la página -- catálogo anti-defectos
   #3 (flotantes no pueden tapar CTAs) y #5 (el botón cerrar medía
   24x24px, por debajo del touch target ≥44x44px). Fix: se comprime en
   mobile (el countdown interno es redundante, la card ya lo muestra) y
   se amplía el área de toque del botón cerrar en todos los tamaños. El
   componente no se elimina (no es parte del alcance de Figma tocar/
   quitar features) ni se toca su JS (public/assets/js/script.js).

   Verificación scriptada con getBoundingClientRect() en los 6 viewports
   del gate: el solapamiento con el CTA no depende solo del ancho -- en
   1920x1080 (viewport más ALTO que 1440x900) el floating vuelve a tapar
   ~38px del botón aunque el ancho sobre de espacio, porque bottom:0 lo
   ancla al borde inferior real del viewport y ese borde cae más abajo
   cuanto más alto es el viewport. Por eso el countdown (el elemento más
   alto de la fila, y 100% redundante con el de la card) se oculta
   SIEMPRE, sin importar el breakpoint -- es lo que más aporta a reducir
   la altura del floating en cualquier tamaño. El resto (nowrap + texto
   truncado) solo aplica hasta 1024px, donde el título largo no cabe en
   una fila sin comprimir; en anchos mayores cabe completo y truncarlo
   sería un cambio visual innecesario. */
body.rediseno .next_events {
  padding: 8px 1rem;
}

/* Redundante con el countdown de la card debajo; es el div más alto de
   la fila (padding vertical + 2 líneas) y el que más aporta al alto
   total del floating en cualquier tamaño de viewport. */
body.rediseno .next_events_countdown {
  display: none;
}

/* padding vertical ajustado a 11px (en vez del 12px del legacy) para
   que min-height:44px cierre el touch target exacto sin agregar alto
   de más -- el legacy medía 42.2px (12px+18px texto+12px), 1.8px por
   debajo del mínimo. */
body.rediseno .next_events_block .btn-main.btn--3 {
  min-height: 44px;
  padding: 11px 14px;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 1024px) {
  body.rediseno .next_events_block {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: .75rem;
  }

  body.rediseno .next_events_text {
    min-width: 0;
    flex: 1 1 auto;
  }

  body.rediseno .next_events_text span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  body.rediseno .next_events_block .btn-main.btn--3 {
    flex-shrink: 0;
    font-size: .8125rem;
  }
}

body.rediseno .next_events_close {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.rediseno .next_events_close:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
  border-radius: 50%;
}

body.rediseno .next_events_block .btn-main.btn--3:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}

/* ---------------------------------------------------------------------
   "Suscríbete a futuros eventos" (#suscribeForm, partials/subscribe.
   blade.php) — el input, el botón "Suscríbete", el checkbox y el link
   "Políticas de Privacidad" no tenían NINGÚN feedback de foco por
   teclado (frontend.css resetea outline:none en varios selectores
   globales de tema legacy). :focus-visible obligatorio en todo
   elemento interactivo aunque el diseño de referencia no lo muestre.
   --------------------------------------------------------------------- */
body.rediseno #suscribeForm .email:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
  border-radius: 64px;
}

body.rediseno #suscribeForm .send:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: 3px;
  border-radius: 64px;
}

body.rediseno #suscribeForm label input[type="checkbox"]:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}

body.rediseno #suscribeForm label a:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
  border-radius: 4px;
}

/* ---------------------------------------------------------------------
   Hero/slider (partials/slider.blade.php) — botón "Ver Evento" del
   slide (contenido de BD, "layer-1-4 .genius-btn a"). Es un <a> real
   (focusable de fábrica); solo le faltaba el estilo de foco, igual que
   el resto del sitio. Las flechas .owl-prev/.owl-next del carrusel
   (Owl Carousel, plugin de terceros) son <div> sin tabindex -- no son
   alcanzables por teclado en absoluto y arreglarlo requiere JS (agregar
   tabindex/role/keydown al init del plugin), fuera del alcance de esta
   fase de maquetación; se documenta en el reporte para programación. */
body.rediseno .genius-btn a:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}

/* =====================================================================
   PROXIMOS EVENTOS — Fase 5: /eventos (courses/index.blade.php,
   route courses.all + courses.category, ambas renderizan esta misma
   vista). Referencia: "1920w light.jpg" (JPG, no nodo Figma con
   variantes) -> gate = catálogo anti-defectos + verificación scriptada +
   medición/cuentagotas, igual que Home (Fase 4).

   El markup base de esta pantalla (hero #breadcrumb, tarjeta de evento
   .best-course-pic-text dentro de .event-course-section) YA lo pintaba
   frontend.css con match pixel-close contra la referencia -- no es
   trabajo de un rediseño anterior, es una coincidencia real del theme
   (confirmado con computed styles, no a ojo). El diff real de esta fase
   fueron los huecos de abajo, no la maqueta completa.

   Scoping con .rd-eventos-page (NO alcanza con #event-course/#course-page
   ni con clases como .event-course-section--inside/.best-course-href):
   este theme REUTILIZA esos mismos ids/clases en frontend/search-result/
   courses.blade.php (la vista de /search-course, ruta de búsqueda de
   texto compartida por todo el sitio) y en courses/course.blade.php
   ("también te puede interesar"). .rd-eventos-page se agregó SOLO en
   courses/index.blade.php (a #course-page y a #event-course) para que
   estas reglas no se filtren a esas otras vistas. Mobile-first: base en
   320px, escalado con min-width.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Filtro "Elige una categoria" (#filterCategory) — la referencia pinta
   el pill CELESTE relleno (mismo --rd-fill-celeste que el resto del
   sitio), no blanco con borde como el pill de búsqueda. frontend.css
   los trata igual (.listing-filter-form-control base) porque comparten
   clase; el fix es solo de color, scopeado por id (máxima especificidad,
   no requiere !important).
   --------------------------------------------------------------------- */
body.rediseno .rd-eventos-page #filterCategory {
  background-color: var(--rd-fill-celeste);
  border-color: var(--rd-fill-celeste);
  color: var(--rd-ink);
}

body.rediseno .rd-eventos-page #filterCategory:focus-visible,
body.rediseno .rd-eventos-page #filterSearch:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}

/* ---------------------------------------------------------------------
   Card de evento (.best-course-pic-text) — 3 huecos reales contra la
   referencia, verificados con computed styles (no a ojo):
   1) botón "Ver más" (.best-course-href): frontend.css solo lo hace
      ancho completo en <=500px (mobile); en >=501px queda un pill de
      contenido (~90px) inline. La referencia lo muestra ancho completo
      del panel en TODOS los tamaños.
   2) el mismo botón medía 38px de alto, debajo del touch target
      mínimo de 44px del catálogo anti-defectos.
   3) la descripción (<p>) usa -webkit-line-clamp:2; la referencia
      trunca a 3 líneas. Se compensa la línea extra recortando el
      padding de la fila fecha/hora y el margin-bottom de la
      descripción para seguir cerrando dentro de los 320px de alto
      fijo de la card en >=501px (en <=500px la card ya es height:auto,
      así que ahí no hay presupuesto que cuidar).
   --------------------------------------------------------------------- */
body.rediseno .rd-eventos-page .best-course-pic-text .best-course-text .best-course-text-date {
  padding: 1.25rem 0;
}

body.rediseno .rd-eventos-page .best-course-pic-text .best-course-text p {
  -webkit-line-clamp: 3;
  margin-bottom: 1rem;
}

body.rediseno .rd-eventos-page .best-course-pic-text .best-course-text .best-course-href {
  display: flex;
  width: 100%;
  min-height: 44px;
}

body.rediseno .rd-eventos-page .best-course-pic-text .best-course-text .best-course-href:focus-visible,
body.rediseno .rd-eventos-page .best-course-pic-text .course-title h3 a:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}

/* ---------------------------------------------------------------------
   Estado vacío del filtro por fecha (#rd-eventos-empty, ver rediseno.js
   > initEventosDateFilter). Oculto por defecto vía [hidden]; solo se
   muestra cuando el usuario teclea una fecha/hora sin match. Mismo tono
   que el resto de mensajes informativos del rediseño (--rd-navy) y con
   el mismo link-blue que "Políticas de Privacidad" en el footer.
   --------------------------------------------------------------------- */
body.rediseno .rd-eventos-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--rd-navy);
  font-size: 1rem;
}

body.rediseno .rd-eventos-empty a {
  color: var(--rd-link-blue);
  text-decoration: underline;
}

body.rediseno .rd-eventos-empty a:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}

/* ---------------------------------------------------------------------
   LOOP BACK QA (FIX 1, ALTO) — /eventos y /search-course: la imagen de la
   card de evento recorta el arte (ej. se pierde el wordmark "CIAN").

   Causa raíz: .best-course-pic-text .best-course-pic (base del theme,
   _best-course.scss/frontend.css) fija background-size:cover. Dentro de
   .event-course-section.event-course-section--inside (el contenedor que
   comparten AMBAS pantallas -- ver DEUDA-TECNICA.md > "Ids/clases
   duplicados... .rd-eventos-page", courses/index.blade.php y search-
   result/courses.blade.php pintan el mismo markup) ese box queda fijo en
   ancho:40% x alto:320px (retrato, ratio ~0.71 -- .event-course-section
   .best-course-pic-text{height:320px} + .best-course-pic{width:40%;
   height:inherit}, frontend.css). La imagen real subida por el admin
   (1125x875px, ratio ~1.29 "paisaje", ver nombre de archivo "...540px-x-
   420px...") es más ancha que ese box, así que cover la recorta por los
   costados -- se pierde el wordmark y parte del texto del arte.

   Fix: mismo patrón que ya usa Fase 8 en .rd-historico-hero__art (arriba
   en este archivo) para el mismo tipo de arte CIAN -- background-size:
   contain (nunca recorta, cualquier proporción que suba el admin se ve
   completa) + background-color navy de relleno para el margen que deja
   el letterbox (evita que se vea un hueco gris/vacío alrededor del arte).

   Scope: .event-course-section.event-course-section--inside es el
   modificador exacto que comparten /eventos y /search-course y que NO
   usan ni el widget "featured_course" del sidebar (fuera de .event-
   course-section, ver right-sidebar.blade.php/browse_courses.blade.php)
   ni "también te puede interesar" en /evento/{slug} (usa --two, no
   --inside) -- ninguno de esos dos se toca, quedan con su cover legacy. */
body.rediseno .event-course-section.event-course-section--inside .best-course-pic-text .best-course-pic {
  background-size: contain;
  background-color: var(--rd-navy);
}

/* 2026-08-03 QA "Web eventos" obs.3 -- card de evento en /eventos: la imagen
   (.best-course-pic) queda pegada a los 3 bordes libres de la tarjeta
   (izquierda/arriba/abajo -- el derecho ya lo separa el padding propio de
   .best-course-text, 1.5rem). Mismo scope que el fix de arriba
   (.event-course-section--inside, compartido por /eventos y /search-course,
   no toca el widget del sidebar ni "también te puede interesar").
   Fix: padding en la tarjeta alrededor de la imagen + bg propio (mismo tono
   que .best-course-text) para que el aire nuevo no muestre blanco plano.
   .best-course-pic pasa de height:inherit (copiaba el 320px LITERAL del
   padre y desbordaba el padding nuevo) a height:100% para respetar el alto
   ya disponible tras el padding; radio propio más chico para que se lea
   como "imagen enmarcada" dentro de la tarjeta redondeada. */
body.rediseno .event-course-section.event-course-section--inside .best-course-pic-text {
  background-color: #F7F5F6;
  padding: 12px 0 12px 12px;
}

body.rediseno .event-course-section.event-course-section--inside .best-course-pic-text .best-course-pic {
  height: 100%;
  border-radius: 16px;
}

@media (max-width: 500px) {
  /* <=500px la base legacy apila pic/texto en columna (flex-direction:column)
     y el card pasa a height:auto -- el inset pasa a ser simétrico (12px en
     los 4 lados) y el alto de la imagen vuelve a un valor fijo (100% de un
     padre height:auto colapsaría a 0). */
  body.rediseno .event-course-section.event-course-section--inside .best-course-pic-text {
    padding: 12px;
  }

  body.rediseno .event-course-section.event-course-section--inside .best-course-pic-text .best-course-pic {
    height: 250px;
  }
}

/* 2026-07-21: la portada del evento pasó al arte cuadrado CIAN 2026 (577x560,
   fondo navy). El hero del detalle (/evento/{slug}) lo pinta como <img> con
   attrs 600x449 (paisaje) -> un arte cuadrado se estiraría. Mismo patrón que la
   tarjeta de arriba: object-fit:contain (nunca distorsiona/recorta, cualquier
   proporción se ve completa) + fondo navy para el letterbox (invisible porque
   el arte ya es navy). Solo aplica al hero del detalle (desktop; el bloque está
   display:none <=990px), no toca miniaturas ni "también te puede interesar". */
body.rediseno .course-details-head-section .course-details-head-visual img {
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  background-color: #030139;
  display: block;
}

/* =====================================================================
   EVENTOS PASADOS — Fase 6: /eventos-pasados (pantalla nueva, mock -- ver
   TODO-BACKEND.md > Fase 6). Referencia: "eventos pasados.jpg" (JPG, no
   nodo Figma) -> gate = catálogo anti-defectos + verificación scriptada +
   medición/cuentagotas (con PIL, no a ojo), igual que Home/eventos
   (Fases 4-5). Scope: .rd-pasados-page, mismo patrón que .rd-eventos-page
   (Fase 5) -- #breadcrumb, .container y otros ids/clases de este theme se
   reutilizan en otras vistas. Mobile-first: base en 320px, escalado con
   min-width.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Hero -- reusa #breadcrumb.breadcrumb-section (mismo componente que
   /pasos-a-seguir y /nosotros: radio de esquinas inferiores + .blakish-
   overlay con gradiente transparente-a-oscuro izq->der, YA pensado para
   texto blanco alineado a la derecha). Solo se agrega el modificador
   --pasados con su imagen de fondo (banner real ya usado en el proyecto,
   ver past.blade.php) y las reglas de <h1> -- el resto del sitio usa <h2>
   en este componente, pero la instrucción de accesibilidad de esta fase
   pide h1 explícitamente; estas reglas calcan el h2 base (color/align/
   weight, frontend.css líneas 682-707) para no perder el match visual.
   --------------------------------------------------------------------- */
body.rediseno .breadcrumb-section.breadcrumb-section--pasados {
  background-image: url(../storage/uploads/1718226167-banner-principal-gloria.png);
}

@media only screen and (max-width: 768px) {
  body.rediseno .breadcrumb-section.breadcrumb-section--pasados {
    background-position: center 30%;
  }
}

body.rediseno .breadcrumb-section.breadcrumb-section--pasados .page-breadcrumb-content h1 {
  flex: 1;
  color: #fff;
  text-align: right;
  font-weight: bold;
  margin: 0;
  font-size: 2.25rem;
}

body.rediseno .breadcrumb-section.breadcrumb-section--pasados .page-breadcrumb-content h1 span {
  display: block;
  font-size: 1.25rem;
  font-weight: 400;
}

@media only screen and (max-width: 600px) {
  body.rediseno .breadcrumb-section.breadcrumb-section--pasados .page-breadcrumb-content h1 {
    font-size: 1.375rem;
  }

  body.rediseno .breadcrumb-section.breadcrumb-section--pasados .page-breadcrumb-content h1 span {
    font-size: 1rem;
  }
}

/* ---------------------------------------------------------------------
   Sección de filtros + grid.
   --------------------------------------------------------------------- */
body.rediseno .rd-pasados-section {
  padding: 2rem 0 3rem;
}

body.rediseno .rd-pasados-filtros {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  background: var(--rd-pasados-band-bg);
  border-radius: 20px;
  padding: 1.25rem;
  margin-bottom: 2rem;
}

body.rediseno .rd-pasados-filtros__label {
  font-weight: 700;
  color: var(--rd-ink);
  font-size: .9375rem;
}

body.rediseno .rd-pasados-filtros__pills {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
}

/* Pills: min-height 44px cubre el touch target del catálogo anti-defectos
   aunque visualmente el pill mida menos (padding vertical compensa). */
body.rediseno .rd-pasados-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.125rem;
  border-radius: var(--rd-radius-pill);
  border: 1px solid var(--rd-pasados-pill-border);
  background: #fff;
  color: var(--rd-ink);
  font-size: .9375rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--rd-transition), border-color var(--rd-transition), color var(--rd-transition);
}

body.rediseno .rd-pasados-pill:hover {
  border-color: var(--rd-pasados-pill-active-bg);
}

body.rediseno .rd-pasados-pill--active {
  background: var(--rd-pasados-pill-active-bg);
  border-color: var(--rd-pasados-pill-active-bg);
  color: #fff;
}

body.rediseno .rd-pasados-pill--active:hover {
  background: var(--rd-pasados-pill-active-bg);
  opacity: .92;
}

body.rediseno .rd-pasados-pill:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}

body.rediseno .rd-pasados-filtros__search {
  position: relative;
  width: 100%;
}

@media (min-width: 992px) {
  body.rediseno .rd-pasados-filtros {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  body.rediseno .rd-pasados-filtros__search {
    width: auto;
    min-width: 260px;
  }
}

/* Input >=16px evita zoom automático en iOS; min-height 44px cubre el
   touch target del catálogo anti-defectos. */
body.rediseno .rd-pasados-search-input {
  width: 100%;
  min-height: 44px;
  font-size: 1rem;
  padding: 0 2.75rem 0 1.125rem;
  border: 1px solid var(--rd-pasados-pill-border);
  border-radius: var(--rd-radius-pill);
  background: #fff;
  color: var(--rd-ink);
  transition: border-color var(--rd-transition);
}

body.rediseno .rd-pasados-search-input::placeholder {
  color: #9CA3AF;
}

body.rediseno .rd-pasados-search-input:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
  border-color: var(--rd-pasados-pill-active-bg);
}

body.rediseno .rd-pasados-search-icon {
  position: absolute;
  top: 50%;
  right: 1.125rem;
  transform: translateY(-50%);
  color: var(--rd-navy);
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   Grid de cards -- 1 columna hasta 991px (la card ya es horizontal desde
   768px, ver abajo), 2 columnas desde 992px, igual que pide la directiva.
   --------------------------------------------------------------------- */
body.rediseno .rd-pasados-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 992px) {
  body.rediseno .rd-pasados-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Card -- sin altura fija (lección de Fase 5: una card con height fijo +
   contenido variable termina rompiendo el catálogo anti-defectos #4). La
   media se estira con la fila via align-self/flex en vez de forzar 1:1
   real en desktop -- así un título de 3 líneas (webinar) no desborda. */
body.rediseno .rd-pasados-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rd-pasados-card-border);
  border-radius: 24px;
  overflow: hidden;
}

body.rediseno .rd-pasados-card__media {
  flex: none;
  aspect-ratio: 1 / 1;
  /* Loop back QA Fase 10 (hallazgo adicional): navy como relleno del
     letterbox — mismo patrón que .best-course-pic (FIX 1) y
     .rd-historico-hero__art para el arte CIAN apaisado.
     Original: background: var(--rd-pasados-band-bg); */
  background: var(--rd-navy);
}

body.rediseno .rd-pasados-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  /* Loop back QA Fase 10: contain nunca recorta el wordmark del arte,
     sea cual sea la proporción subida. Original: object-fit: cover; */
  object-fit: contain;
}

body.rediseno .rd-pasados-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .625rem;
  padding: 1.5rem;
}

body.rediseno .rd-pasados-badge {
  display: inline-flex;
  align-items: center;
  padding: .35rem .9rem;
  border-radius: var(--rd-radius-pill);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}

body.rediseno .rd-pasados-badge--congreso {
  background: var(--rd-badge-congreso-bg);
  color: var(--rd-badge-congreso-text);
}

body.rediseno .rd-pasados-badge--simposio {
  background: var(--rd-badge-simposio-bg);
  color: var(--rd-badge-simposio-text);
}

body.rediseno .rd-pasados-badge--webinar {
  background: var(--rd-badge-webinar-bg);
  color: var(--rd-badge-webinar-text);
}

/* clamp() en vez de nowrap+ancho fijo: catálogo anti-defectos #4 (headings
   con badge encima nunca deben cortarse). */
body.rediseno .rd-pasados-card__title {
  color: var(--rd-link-blue);
  font-size: clamp(1.0625rem, 2.2vw, 1.375rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

body.rediseno .rd-pasados-card__meta,
body.rediseno .rd-pasados-card__stats {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-wrap: wrap;
  color: var(--rd-link-blue);
  font-size: .9375rem;
  line-height: 1.4;
}

body.rediseno .rd-pasados-card__meta span,
body.rediseno .rd-pasados-card__stats span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

body.rediseno .rd-pasados-card__meta img {
  flex-shrink: 0;
}

body.rediseno .rd-pasados-stat-icon {
  color: var(--rd-navy);
  flex-shrink: 0;
}

body.rediseno .rd-pasados-card__divider {
  width: 1px;
  height: 1rem;
  background: var(--rd-pasados-pill-border);
  flex-shrink: 0;
}

/* CTA "Ver Histórico": pill outline ancho completo, min-height 44px
   (touch target del catálogo anti-defectos). Es un <a href="#">, no un
   <button> -- ver TODO backend en past.blade.php (Fase 8 maqueta el
   destino real). */
body.rediseno .rd-pasados-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: .375rem;
  border: 1.5px solid var(--rd-navy);
  border-radius: var(--rd-radius-pill);
  color: var(--rd-navy);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--rd-transition), transform var(--rd-transition);
}

body.rediseno .rd-pasados-card__cta:hover {
  background-color: var(--rd-fill-celeste);
}

body.rediseno .rd-pasados-card__cta:active {
  transform: translateY(1px);
}

body.rediseno .rd-pasados-card__cta:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}

/* Card horizontal desde 768px (imagen cuadrada a la izquierda + panel a
   la derecha) -- la directiva pide vertical SOLO <768px. */
@media (min-width: 768px) {
  body.rediseno .rd-pasados-card {
    flex-direction: row;
    align-items: stretch;
  }

  body.rediseno .rd-pasados-card__media {
    flex: 0 0 38%;
    aspect-ratio: auto;
  }

  body.rediseno .rd-pasados-card__body {
    flex: 1 1 auto;
    padding: 1.75rem;
  }
}

/* ---------------------------------------------------------------------
   Estado vacío del filtro combinado (pill + buscador) -- ver
   initPasadosFilters() en rediseno.js.
   --------------------------------------------------------------------- */
body.rediseno .rd-pasados-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--rd-navy);
  font-size: 1rem;
}

body.rediseno .rd-pasados-empty__reset {
  display: inline;
  margin-left: .375rem;
  border: 0;
  background: none;
  padding: 0;
  color: var(--rd-link-blue);
  text-decoration: underline;
  font-size: 1rem;
  cursor: pointer;
}

body.rediseno .rd-pasados-empty__reset:hover {
  color: var(--rd-navy);
}

body.rediseno .rd-pasados-empty__reset:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
  border-radius: 4px;
}

/* Nav mobile (.mean-nav): a diferencia de .nav-menu (desktop), este theme
   no tenía NINGUNA regla para .active en el menú hamburguesa -- se agrega
   acá porque Fase 6 es la primera vez que un link mobile usa esa clase
   (ver app1.blade.php > "Eventos Pasados"). */
body.rediseno .mean-nav ul li a.active {
  font-weight: 700;
  color: var(--rd-navy);
}

/* =====================================================================
   DETALLE EVENTO — Fase 7: /evento/{slug} (courses/course.blade.php,
   CoursesController@show). Referencias JPG (no nodos Figma, son 5
   estados de la misma pantalla): CIAN 2025.jpg (logueado+registrado,
   página completa) / Frame 495.jpg (no registrado, solo hero) /
   Frame 524.jpg (registrado, solo hero) / Frame 522.jpg (drawer de
   selección de días) / Frame 523.jpg (modal "Gracias" post-registro).

   DIFF-first (screenshot real vs referencia, no a ojo): frontend.css
   (líneas ~7686-8605, .course-details-head-*/.course-about-*/.course-
   program-*/.course-sponsor-*/.course-exhibitors-*) YA pinta esta
   pantalla con match muy alto contra las 5 referencias -- no es una
   maqueta nueva de esta fase, es una coincidencia real del theme. Los
   4 gaps de código reales cerrados abajo:
   1) countdown en 3 cajas separadas (Días/Horas/Minutos) en vez de 1
      sola caja "15 dias - 20 h" -- mismo patrón que .course-count de
      Home/Fase 4 (ver arriba en este archivo).
   2) banda "Lugar: CHILE..." con el mismo pill blanco que "Conducción:
      DR..." en vez de banda navy de ancho completo.
   3) el modal de selección de días (#lessonModal) era un modal
      Bootstrap centrado con header/footer estándar en vez de un drawer
      lateral derecho con panel navy + ilustración + copy de aforo.
   4) el modal "Gracias" (messages.blade.php, partial GLOBAL a 11
      vistas) no tenía botón "Aceptar" ni ícono destacado -- solo la X.
   La selección de días YA es funcional en backend (CartController@
   getNow lee lesson_selection_ids, valida cupo por horario y persiste
   assist/schedule por lesson en order_items -- no es mock); esta fase
   solo re-maqueta el contenedor (modal -> drawer), sin tocar submit ni
   validación existentes. El modal "Gracias" también es 100% funcional
   (dispara con session('success')/session('alert')) y su copy YA es
   idéntico al de Frame 523.jpg (resources/lang/es/labels.php:1266).

   Scope: .rd-evento-page (wrapper de @section('content') en course.
   blade.php, mismo patrón que .rd-eventos-page/Fase 5 y .rd-pasados-
   page/Fase 6) -- esta vista reutiliza .best-course-pic-text/.best-
   course-href ("también te puede interesar") de /eventos; ninguna
   regla de abajo las toca. Excepción deliberada: .rd-modal-gracias
   (mismo componente que ya vive en el partial GLOBAL messages.blade.
   php) va SIN el scope .rd-evento-page a propósito, para que el botón
   "Aceptar" alcance las 11 vistas que incluyen ese partial (ver reporte
   de fase para el listado completo -- QA debe cubrirlas todas).
   Mobile-first: base en 320px, escalado con min-width.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Countdown del hero (.course-details-head-info-countdown) -- mismo
   tratamiento que .course-count (Home/Fase 4): fusiona los 3 divs en 1
   sola caja celeste, oculta "Minutos" (3er div, ruido no presente en la
   referencia) y agrega el separador "-" entre los 2 divs visibles. No se
   toca el HTML ni el script inline startCountdown() de course.blade.php
   (actualiza los mismos span:first-child por índice); en "Evento
   Finalizado" el fallback sigue siendo un único div, así que el
   selector :not(:first-child)::before no aplica y no hay separador
   huérfano.
   --------------------------------------------------------------------- */
/* Selectores calcados 1:1 de frontend.css (.course-details-head-section
   .course-details-head .course-details-head-info .course-details-head-
   info-countdown[ div[ span[:first-child]]], 4-6 niveles de especificidad
   según el selector) + el scope .rd-evento-page al inicio: con menos
   niveles, estas reglas pierden la cascada contra el estilo legacy aunque
   vengan después en el documento (especificidad > orden de aparición) --
   verificado con computed styles, no a ojo (ver reporte de fase). */
body.rediseno .rd-evento-page .course-details-head-section .course-details-head .course-details-head-info .course-details-head-info-countdown {
  background: var(--rd-fill-celeste);
  border-radius: 24px;
  padding: 1.5rem 1.25rem;
  gap: 0;
  justify-content: flex-start;
  align-items: baseline;
  flex-wrap: wrap;
}

body.rediseno .rd-evento-page .course-details-head-section .course-details-head .course-details-head-info .course-details-head-info-countdown div {
  background: transparent;
  padding: 0;
  border-radius: 0;
  text-align: left;
  display: flex;
  align-items: baseline;
  gap: .5rem;
}

body.rediseno .rd-evento-page .course-details-head-section .course-details-head .course-details-head-info .course-details-head-info-countdown div:nth-child(3) {
  display: none;
}

body.rediseno .rd-evento-page .course-details-head-section .course-details-head .course-details-head-info .course-details-head-info-countdown div:not(:first-child)::before {
  content: '-';
  margin-right: .5rem;
  color: var(--rd-link-blue);
  font-weight: 700;
}

/* frontend.css define 52px -- demasiado grande para 1 sola línea con
   separador (rompía a 2 líneas en 320-375px). 2rem calca la proporción
   que ya usa .course-count en Home para el mismo patrón. */
body.rediseno .rd-evento-page .course-details-head-section .course-details-head .course-details-head-info .course-details-head-info-countdown div span:first-child {
  font-size: 2rem;
  line-height: 1.2;
}

/* ---------------------------------------------------------------------
   Banda "Lugar" del Programa del Evento -- Gap #2. frontend.css trata
   "Conducción: DR..." y "Lugar: CHILE..." con el mismo pill blanco
   (.course-program-title-block); la referencia diferencia claramente
   "Lugar" con una banda navy de ancho completo y texto blanco. Se agrega
   el modificador --place solo al bloque de Lugar (course.blade.php); el
   chip "Conducción" no se toca.
   --------------------------------------------------------------------- */
/* Selector calcado 1:1 de frontend.css (.course-program .course-program-block
   .course-program-content .course-program-title .course-program-title-block,
   6 niveles de especificidad) + el modificador --place al final: con menos
   niveles, esta regla pierde la cascada contra el estilo legacy aunque
   venga después en el documento (especificidad > orden de aparición). */
body.rediseno .rd-evento-page .course-program .course-program-block .course-program-content .course-program-title .course-program-title-block--place {
  flex: 1 1 100%;
  width: 100%;
  background-color: var(--rd-navy);
  justify-content: center;
}

body.rediseno .rd-evento-page .course-program .course-program-block .course-program-content .course-program-title .course-program-title-block--place p,
body.rediseno .rd-evento-page .course-program .course-program-block .course-program-content .course-program-title .course-program-title-block--place p strong {
  color: #fff;
}

/* ---------------------------------------------------------------------
   CRO fix multi-sede CIAN 2026 (H-01/H-02/H-03/H-05/H-06) -- sin Figma
   para esta variante (3 sedes reales agregadas sobre la maqueta ya
   validada de Fase 7), gate = catálogo anti-defectos + verificación
   scriptada en 320/375/768. Mobile-first, base 320px.
   --------------------------------------------------------------------- */

/* H-02+H-05: badge "📍 Ciudad, País" + H-06: venue_name ("Lugar: ...")
   debajo del H3, above the fold. Ambos ausentes si el evento no tiene
   sede (course.blade.php guarda con @if($course->venue_city)). */
body.rediseno .rd-evento-page .course-details-head-section .rd-venue-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
  margin-top: .5rem;
}

body.rediseno .rd-evento-page .course-details-head-section .rd-venue-badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  background: var(--rd-fill-celeste);
  color: var(--rd-link-blue);
  font-size: .875rem;
  font-weight: 700;
  padding: .375rem .875rem;
  border-radius: var(--rd-radius-pill);
  line-height: 1.3;
}

body.rediseno .rd-evento-page .course-details-head-section .rd-venue-name {
  color: var(--rd-ink);
  font-size: .875rem;
  line-height: 1.3;
}

body.rediseno .rd-evento-page .course-details-head-section .rd-venue-name strong {
  color: var(--rd-navy);
}

/* H-03: sufijo "(hora de Lima/Santiago)" junto a la hora en la cabecera --
   tono apagado para no competir con el valor de la hora (el div padre ya
   pinta #225192 y 14px, ver frontend.css .course-details-head-info-date
   div). NO reemplaza el color heredado del texto principal, solo el
   suffix propio. */
body.rediseno .rd-evento-page .course-details-head-section .course-details-head-info-date .rd-tz-suffix {
  color: #6B7280;
  font-weight: 400;
}

/* H-01: microcopy bajo el CTA anónimo "Postular al evento" (sedes con
   requires_approval=true). El botón vive en un flex-wrap container
   (.course-details-head-info-btns, frontend.css) -- flex-basis:100% lo
   manda a su propia línea sin tocar el layout de los demás botones. */
body.rediseno .rd-evento-page .course-details-head-info-btns .rd-cta-microcopy {
  flex-basis: 100%;
  margin: 0;
  color: #6B7280;
  font-size: .8125rem;
  line-height: 1.4;
}

/* ---------------------------------------------------------------------
   Drawer de selección de días (#lessonModal, .rd-drawer) -- Frame
   522.jpg, Gap #3. Se reutiliza el modal de Bootstrap 4 como base (el
   plugin ya da gratis backdrop, Escape-cierra y devolver el foco al
   trigger al cerrar) en vez de escribir un componente nuevo: solo se
   sobreescribe la posición/tamaño de .modal-dialog para que entre desde
   la derecha en vez de centrado. El trap de Tab (Bootstrap 4 NO lo
   implementa nativo) lo agrega rediseno.js > initDrawerFocusTrap.
   --------------------------------------------------------------------- */
body.rediseno .rd-evento-page .rd-drawer .modal-dialog {
  max-width: 420px;
  width: 100%;
  height: 100vh;
  margin: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  transform: translateX(100%);
  transition: transform .3s ease-out;
}

body.rediseno .rd-evento-page .rd-drawer.show .modal-dialog {
  transform: translateX(0);
}

body.rediseno .rd-evento-page .rd-drawer .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
  padding: 0;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

/* 2026-07-21: layout del asset final "Amy" (Frame 522.jpg): ilustración a la
   izquierda pegada al piso + texto a la derecha alineado a la izquierda con la
   línea azul bajo el título. Antes era columna centrada con placeholder. */
body.rediseno .rd-evento-page .rd-drawer__panel {
  position: relative;
  flex-shrink: 0;
  background-color: var(--rd-navy);
  color: #fff;
  padding: 2.75rem 1.75rem 0;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 1rem;
  text-align: left;
}

body.rediseno .rd-evento-page .rd-drawer__close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  margin: 0;
  padding: 0;
}

/* ico_close.svg es un trazo #030139 (navy) -- invert(1) lo vuelve blanco
   sobre el panel navy, sin duplicar el asset. */
body.rediseno .rd-evento-page .rd-drawer__close img {
  filter: invert(1) brightness(2);
}

/* width < 156px nativo del PNG => se ve nítido (downscale). max-width evita que
   aplaste el texto en drawers angostos (mobile full-width). align-self flex-end
   la pega al piso del panel. */
body.rediseno .rd-evento-page .rd-drawer__illustration {
  width: 150px;
  max-width: 42%;
  height: auto;
  flex-shrink: 0;
  align-self: flex-end;
  display: block;
}

body.rediseno .rd-evento-page .rd-drawer__panel-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 2rem;
  /* 2026-08-05: al agrandar .rd-drawer__title (1.375rem->1.5rem) la 1ra
     línea quedaba a 8px del borde del botón .rd-drawer__close (absolute,
     top:.5rem, 44px alto -> bottom:52px) y en >=480px (drawer fijo a
     420px de ancho) el texto SÍ llegaba a solaparse con el botón
     (verificado con Range.getClientRects, no solo bounding box del
     bloque). padding-top empuja el título por debajo del botón sin
     tocar el ancho de columna (no agrega wraps extra en 320/375). */
  padding-top: 1.25rem;
}

body.rediseno .rd-evento-page .rd-drawer__title {
  color: #fff;
  /* 2026-08-05: cliente pidió agrandar título/subtítulo del header (se veía
     chico vs. mockup). 1.375rem->1.5rem. Columna de texto y de Amy son
     independientes (flex row, gap fijo) -- crecer el font solo hace más
     líneas de wrap, nunca empuja/solapa la ilustración. Verificado 320/375. */
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 .75rem;
  padding-bottom: .75rem;
  border-bottom: 3px solid var(--rd-link-blue);
}

body.rediseno .rd-evento-page .rd-drawer__subtitle {
  color: #fff;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  opacity: .92;
}

body.rediseno .rd-evento-page .rd-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.75rem;
}

body.rediseno .rd-evento-page .rd-drawer__body-label {
  font-weight: 700;
  color: var(--rd-ink);
  margin-bottom: 1rem;
}

body.rediseno .rd-evento-page .rd-drawer__list {
  display: flex;
  flex-direction: column;
  gap: .875rem;
}

body.rediseno .rd-evento-page .rd-drawer__item {
  border: 1px solid var(--rd-underline-teal);
  border-radius: 14px;
  padding: .875rem 1rem;
}

body.rediseno .rd-evento-page .rd-drawer__item--disabled {
  opacity: .55;
}

/* min-height:44px en el label completo (touch target) -- el checkbox
   visual mide 20x20 pero el área clicable es toda la fila. */
body.rediseno .rd-evento-page .rd-drawer__checkbox {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  cursor: pointer;
  margin: 0;
  min-height: 44px;
}

body.rediseno .rd-evento-page .rd-drawer__checkbox input {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  margin: 0;
}

body.rediseno .rd-evento-page .rd-drawer__checkmark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 2px solid var(--rd-grey-mid);
  border-radius: 5px;
  background: #fff;
  position: relative;
  transition: background-color var(--rd-transition), border-color var(--rd-transition);
}

body.rediseno .rd-evento-page .rd-drawer__checkbox input:checked ~ .rd-drawer__checkmark {
  background-color: var(--rd-link-blue);
  border-color: var(--rd-link-blue);
}

body.rediseno .rd-evento-page .rd-drawer__checkmark::after {
  content: '';
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

body.rediseno .rd-evento-page .rd-drawer__checkbox input:checked ~ .rd-drawer__checkmark::after {
  display: block;
}

body.rediseno .rd-evento-page .rd-drawer__checkbox input:disabled ~ .rd-drawer__checkmark {
  background-color: #F3F4F6;
  border-color: #E5E7EB;
}

body.rediseno .rd-evento-page .rd-drawer__checkbox input:focus-visible ~ .rd-drawer__checkmark {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}

body.rediseno .rd-evento-page .rd-drawer__item-text {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  color: var(--rd-ink);
  font-size: .9375rem;
  line-height: 1.35;
}

body.rediseno .rd-evento-page .rd-drawer__item-date {
  color: #6B7280;
  font-size: .875rem;
}

body.rediseno .rd-evento-page .rd-drawer__schedule {
  margin-top: .75rem;
  width: 100%;
  min-height: 44px;
  font-size: 1rem;
}

body.rediseno .rd-evento-page .rd-drawer__schedule:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}

body.rediseno .rd-evento-page .rd-drawer__no-cupo {
  margin-top: .5rem;
  color: #C0392B;
  font-size: .875rem;
}

body.rediseno .rd-evento-page .rd-drawer__footer {
  flex-shrink: 0;
  padding: 1.25rem 1.75rem 1.75rem;
  border-top: 1px solid #EEE;
  justify-content: center;
}

body.rediseno .rd-evento-page .rd-drawer__submit {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  transition: background-color var(--rd-transition), transform var(--rd-transition);
}

body.rediseno .rd-evento-page .rd-drawer__submit:hover {
  background-color: var(--rd-fill-celeste);
}

body.rediseno .rd-evento-page .rd-drawer__submit:active {
  transform: translateY(1px);
}

body.rediseno .rd-evento-page .rd-drawer__close:focus-visible,
body.rediseno .rd-evento-page .rd-drawer__submit:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}

/* QA fix [MEDIO]: estado de la postulación (pending/confirmed/rejected) en los CTAs
   "Postular a este evento" -- botón no-clickeable, se distingue visualmente del CTA
   activo. El estado "approved" es un <a> real (link a confirmar), no lleva :disabled. */
body.rediseno .rd-evento-page .rd-application-status:disabled {
  opacity: .65;
  cursor: not-allowed;
}

/* <480px: el drawer ocupa el 100% del ancho (no tiene sentido reservar
   margen izquierdo en un viewport tan chico). */
@media (max-width: 480px) {
  body.rediseno .rd-evento-page .rd-drawer .modal-dialog {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------------
   Modal "Gracias" post-registro (.rd-modal-gracias, en messages.blade.
   php) -- Frame 523.jpg, Gap #4. GLOBAL a propósito (ver cabecera de
   este bloque): estas reglas NO llevan el scope .rd-evento-page porque
   .rd-modal-gracias vive en un partial incluido en 11 vistas del sitio,
   no solo en /evento/{slug}.
   --------------------------------------------------------------------- */
body.rediseno .rd-modal-gracias .modal-thanks {
  gap: .25rem;
}

body.rediseno .rd-modal-gracias .modal-thanks img {
  width: 56px;
  height: 56px;
}

body.rediseno .rd-modal-gracias .rd-modal-gracias__accept {
  display: flex;
  min-width: 160px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-top: 1.25rem;
}

body.rediseno .rd-modal-gracias .close:focus-visible,
body.rediseno .rd-modal-gracias .rd-modal-gracias__accept:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}

/* =====================================================================
   HISTORICO DE EVENTO — Fase 8: /eventos-pasados/historico (pantalla
   nueva, mock -- ver TODO-BACKEND.md > Fase 8). Referencias: "HISTORICO
   DE EVENTO.jpg" (página completa) y "HISTORICO DE EVENTO-1.jpg"
   (lightbox abierto). JPG, no nodos Figma -> gate = catálogo
   anti-defectos + verificación scriptada + medición/cuentagotas, igual
   que Fases 4-7.

   Reuso deliberado (0 CSS nuevo para estas piezas): rd-pasados-badge
   (--congreso/--simposio/--webinar) y rd-pasados-stat-icon (SVG inline
   de asistentes/certificados) y rd-pasados-card__divider, todas de
   Fase 6 -- ya viven SIN el scope .rd-pasados-page en el CSS (a
   diferencia de las reglas de layout de esa fase), así que ya eran
   componentes reusables cross-página desde que se escribieron. Ver
   past-detail.blade.php para dónde se reusan literalmente esas clases.

   Scope de layout nuevo: .rd-historico-page. Mobile-first: base en
   320px, escalado con min-width.
   ===================================================================== */

/* padding-top compensa el header fixed (.main-menu-container es
   position:fixed SIEMPRE en este theme, no solo al hacer scroll -- mismo
   gotcha que Fase 2 documentó en .rd-login). Sin esto el badge y las
   primeras líneas del <h1> quedan tapados detrás del header en la carga
   inicial (catálogo anti-defectos #6) -- medido con getBoundingClientRect:
   header 78px mobile / ~88-90px desktop, .rd-historico-page no tenía
   margen propio. Mismos valores que .rd-login (Fase 2) por consistencia. */
body.rediseno .rd-historico-page {
  padding: 6.5rem 0 3rem;
}

@media (min-width: 1024px) {
  body.rediseno .rd-historico-page {
    padding: 7.5rem 0 4rem;
  }
}

/* ---------------------------------------------------------------------
   Hero: info (badge+título+meta+stats+descripción) + card de arte del
   evento. Mobile: columna (info primero -- orden de lectura antes que
   decoración -- arte después). Desktop (>=992px, mismo breakpoint que
   .rd-pasados-grid de Fase 6, por consistencia): fila 58/38.
   --------------------------------------------------------------------- */
body.rediseno .rd-historico-hero {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 3rem;
}

body.rediseno .rd-historico-hero__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .875rem;
}

body.rediseno .rd-historico-hero__title {
  color: var(--rd-link-blue);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1.25;
  margin: 0;
}

body.rediseno .rd-historico-hero__meta,
body.rediseno .rd-historico-hero__stats {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-wrap: wrap;
  color: var(--rd-link-blue);
  font-size: .9375rem;
  line-height: 1.4;
}

body.rediseno .rd-historico-hero__meta span,
body.rediseno .rd-historico-hero__stats span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

body.rediseno .rd-historico-hero__meta img {
  flex-shrink: 0;
}

body.rediseno .rd-historico-hero__desc {
  color: var(--rd-ink);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  max-width: 62ch;
}

/* aspect-ratio + background-color evitan CLS mientras carga la imagen
   (catálogo anti-defectos #7); background navy calca el "arte navy" de
   la referencia incluso en el margen que deja object-fit:contain. */
body.rediseno .rd-historico-hero__art {
  flex-shrink: 0;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  background-color: var(--rd-navy);
  aspect-ratio: 4 / 3;
}

body.rediseno .rd-historico-hero__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
  box-sizing: border-box;
}

@media (min-width: 992px) {
  body.rediseno .rd-historico-hero {
    flex-direction: row;
    align-items: flex-start;
  }

  body.rediseno .rd-historico-hero__info {
    flex: 1 1 58%;
  }

  body.rediseno .rd-historico-hero__art {
    flex: 0 0 38%;
    max-width: 380px;
    margin: 0;
  }
}

/* ---------------------------------------------------------------------
   "Lo que se vivió" -- mosaico de galería. Cada foto es un <button>
   real (focusable nativo; Enter/Space ya disparan click sin JS extra)
   que abre el lightbox -- ver initHistoricoLightbox en rediseno.js.
   Mobile: 1 columna (directiva: "colapsa 2 cols -> 1 col en mobile").
   >=600px: 2 columnas (estado intermedio, la foto central ocupa el
   ancho completo -- todavía no hay presupuesto para el mosaico de 3
   columnas). >=992px: mosaico real (1fr 2fr 1fr / 2 filas, centro
   ocupando ambas filas), igual que la referencia.
   --------------------------------------------------------------------- */
body.rediseno .rd-historico-gallery {
  margin-bottom: 3rem;
}

body.rediseno .rd-historico-gallery h2 {
  color: var(--rd-navy);
  font-weight: 700;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  margin: 0 0 1.25rem;
}

/* grid-auto-flow:dense evita un hueco vacío real (verificado, no a ojo):
   en el breakpoint 600-991px la foto --center pide grid-column:1/-1 (fila
   completa) y no cabe junto a la 1era foto en una fila de 2 columnas -- el
   auto-placement sparse (default) la empuja a una fila nueva y deja la
   celda vacía junto a la 1era foto. "dense" hace que la 3ra foto rellene
   ese hueco en vez de dejarlo en blanco (reordena visualmente esa foto,
   sin afectar el mosaico >=992px, que ya no tiene huecos por sí solo). */
body.rediseno .rd-historico-gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: dense;
  gap: .875rem;
}

body.rediseno .rd-historico-gallery__item {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  background-color: var(--rd-pasados-band-bg);
  transition: transform var(--rd-transition), box-shadow var(--rd-transition);
}

body.rediseno .rd-historico-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.rediseno .rd-historico-gallery__item:hover {
  transform: scale(1.015);
}

body.rediseno .rd-historico-gallery__item:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}

@media (min-width: 600px) {
  body.rediseno .rd-historico-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  body.rediseno .rd-historico-gallery__item--center {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 992px) {
  body.rediseno .rd-historico-gallery__grid {
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: repeat(2, minmax(180px, 1fr));
  }

  body.rediseno .rd-historico-gallery__item {
    aspect-ratio: auto;
    height: 100%;
  }

  body.rediseno .rd-historico-gallery__item--center {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}

@media (min-width: 1440px) {
  body.rediseno .rd-historico-gallery__grid {
    grid-template-rows: repeat(2, 220px);
  }
}

/* ---------------------------------------------------------------------
   Carousels genéricos (testimonios + videos) -- scroll-snap + flechas
   JS con scrollBy(), ver initHistoricoCarousels en rediseno.js. Mobile:
   scroll horizontal nativo (swipe), 1 tarjeta visible. Scrollbar oculta
   visualmente (las flechas + el swipe cubren la interacción; sigue
   siendo desplazable con teclado/rueda, no se pierde funcionalidad).
   --------------------------------------------------------------------- */
body.rediseno .rd-historico-carousel-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

body.rediseno .rd-historico-carousel__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: .25rem;
  scrollbar-width: none;
}

body.rediseno .rd-historico-carousel__track::-webkit-scrollbar {
  display: none;
}

body.rediseno .rd-historico-carousel__nav {
  display: flex;
  justify-content: center;
  gap: .75rem;
}

/* Flechas: navy, min 44x44 touch target. disabled nativo en los
   extremos (rediseno.js) -- ya saca el botón del flujo de foco
   esperado y el navegador lo salta visualmente solo. */
body.rediseno .rd-historico-carousel__arrow {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 0;
  background-color: var(--rd-navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--rd-transition), opacity var(--rd-transition), transform var(--rd-transition);
}

body.rediseno .rd-historico-carousel__arrow svg {
  width: 18px;
  height: 18px;
}

body.rediseno .rd-historico-carousel__arrow:hover:not(:disabled) {
  background-color: var(--rd-link-blue);
}

body.rediseno .rd-historico-carousel__arrow:active:not(:disabled) {
  transform: translateY(1px);
}

body.rediseno .rd-historico-carousel__arrow:disabled {
  background-color: var(--rd-grey-light);
  cursor: default;
  opacity: .6;
}

body.rediseno .rd-historico-carousel__arrow:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}

/* ---------------------------------------------------------------------
   "Compartieron y aprendieron" -- testimonios en box celeste,
   blockquote+cite (semántica de cita real).
   --------------------------------------------------------------------- */
body.rediseno .rd-historico-testimonios {
  margin-bottom: 3rem;
}

body.rediseno .rd-historico-testimonios h2 {
  color: var(--rd-navy);
  font-weight: 700;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  margin: 0 0 1.25rem;
}

body.rediseno .rd-historico-testimonial {
  flex: 0 0 100%;
  scroll-snap-align: start;
  background: var(--rd-pasados-band-bg);
  border-radius: 20px;
  padding: 1.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* font-size:1rem (no .9375rem como el resto de metadatos secundarios de
   esta fase) -- es texto de lectura primaria (la cita completa), no un
   caption; catálogo anti-defectos #8 pide body >=16px. */
body.rediseno .rd-historico-testimonial p {
  color: var(--rd-ink);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
}

body.rediseno .rd-historico-testimonial footer {
  display: flex;
  align-items: center;
  gap: .875rem;
}

body.rediseno .rd-historico-testimonial__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

body.rediseno .rd-historico-testimonial cite {
  display: block;
  color: var(--rd-navy);
  font-weight: 700;
  font-style: normal;
  font-size: .9375rem;
}

body.rediseno .rd-historico-testimonial__role {
  display: block;
  color: #6B7280;
  font-size: .8125rem;
}

@media (min-width: 768px) {
  body.rediseno .rd-historico-testimonial {
    flex: 0 0 calc((100% - 1.25rem) / 2);
  }
}

@media (min-width: 1200px) {
  body.rediseno .rd-historico-testimonial {
    flex: 0 0 calc((100% - 2 * 1.25rem) / 3);
  }
}

/* ---------------------------------------------------------------------
   "Videos Destacados" -- banda celeste ancho completo (fuera de
   .container en el HTML, ver past-detail.blade.php).
   --------------------------------------------------------------------- */
body.rediseno .rd-historico-videos {
  background: var(--rd-pasados-band-bg);
  padding: 2.5rem 0 3rem;
}

body.rediseno .rd-historico-videos h2 {
  color: var(--rd-navy);
  font-weight: 700;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  margin: 0 0 .375rem;
}

body.rediseno .rd-historico-videos__subtitle {
  color: var(--rd-ink);
  font-size: 1rem;
  margin: 0 0 1.5rem;
}

body.rediseno .rd-historico-video {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

body.rediseno .rd-historico-video__thumb {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: #dbe4ee;
}

body.rediseno .rd-historico-video__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.rediseno .rd-historico-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background-color: rgba(3, 1, 57, .82);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--rd-transition), transform var(--rd-transition);
}

body.rediseno .rd-historico-video__play svg {
  width: 20px;
  height: 20px;
}

body.rediseno .rd-historico-video__thumb:hover .rd-historico-video__play,
body.rediseno .rd-historico-video__thumb:focus-visible .rd-historico-video__play {
  background-color: var(--rd-link-blue);
  transform: translate(-50%, -50%) scale(1.06);
}

body.rediseno .rd-historico-video__thumb:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}

body.rediseno .rd-historico-video__duration {
  position: absolute;
  right: .625rem;
  bottom: .625rem;
  background-color: rgba(3, 1, 57, .82);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  padding: .2rem .5rem;
  border-radius: 6px;
}

body.rediseno .rd-historico-video__title {
  color: var(--rd-navy);
  font-weight: 700;
  font-size: 1rem;
  margin: .875rem 0 .25rem;
}

body.rediseno .rd-historico-video__channel {
  color: var(--rd-ink);
  font-size: .875rem;
  margin: 0 0 .25rem;
}

body.rediseno .rd-historico-video__views {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  color: #6B7280;
  font-size: .8125rem;
  margin: 0;
}

@media (min-width: 768px) {
  body.rediseno .rd-historico-video {
    flex: 0 0 calc((100% - 1.25rem) / 2);
  }
}

@media (min-width: 992px) {
  body.rediseno .rd-historico-video {
    flex: 0 0 calc((100% - 2 * 1.25rem) / 3);
  }
}

/* ---------------------------------------------------------------------
   Lightbox -- "HISTORICO DE EVENTO-1.jpg". Dialog accesible (aria-modal,
   focus trap, Escape) implementado en rediseno.js > initHistoricoLightbox;
   acá solo el look. position:fixed cubre todo el viewport -- backdrop
   navy semitransparente (no negro puro, para quedar en línea con la
   paleta del resto del rediseño en vez de un overlay genérico).
   --------------------------------------------------------------------- */
body.rediseno .rd-historico-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

body.rediseno .rd-historico-lightbox[hidden] {
  display: none;
}

body.rediseno .rd-historico-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(3, 1, 57, .8);
}

body.rediseno .rd-historico-lightbox__dialog {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 85vh;
}

/* LOOP BACK QA (FIX 6, MEDIO) — la foto se veía a resolución nativa
   (~588x360, muy chica contra el viewport en desktop) en vez del
   tratamiento "casi pantalla completa" de HISTORICO DE EVENTO-1.jpg.
   Causa raíz: max-width/max-height son topes -- SOLO encogen una
   imagen más grande que el límite, nunca agrandan una más chica que el
   límite (por eso la foto quedaba a su tamaño nativo, muy por debajo de
   88vh). Fix: width/height explícitos (no "max-") fuerzan la caja a
   90vw x 85vh siempre -- object-fit:contain adentro escala CUALQUIER
   imagen (nativa chica o grande, cualquier proporción) para llenar esa
   caja sin recortar ni distorsionar, dejando franjas del propio
   background-color:#000 ya presente cuando el ratio no calza exacto
   (mismo criterio que el resto del rediseño, ver .rd-historico-hero__art
   más arriba). El botón cerrar sigue anclado porque su position:absolute
   es relativo a .rd-historico-lightbox__dialog, que ahora mide exactamente
   lo mismo que la imagen (sin ancho/alto propio, se ajusta al contenido).
   Trade-off aceptado: si la foto fuente sigue en baja resolución, en
   viewports muy grandes (ej. 2560px) el upscale se nota (borroso) --
   es un tema de resolución del asset, no de este CSS; recomendado subir
   fotos de mayor resolución a futuro. */
body.rediseno .rd-historico-lightbox__img {
  display: block;
  width: 90vw;
  height: 85vh;
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 12px;
  object-fit: contain;
  background-color: #000;
  margin: 0 auto;
}

body.rediseno .rd-historico-lightbox__close {
  position: absolute;
  top: -3.25rem;
  right: 0;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 0;
  background-color: rgba(255, 255, 255, .15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--rd-transition);
}

body.rediseno .rd-historico-lightbox__close svg {
  width: 18px;
  height: 18px;
}

body.rediseno .rd-historico-lightbox__close:hover {
  background-color: rgba(255, 255, 255, .28);
}

body.rediseno .rd-historico-lightbox__close:focus-visible {
  outline: var(--rd-focus-width) solid #fff;
  outline-offset: var(--rd-focus-offset);
}

/* En mobile el botón cerrar no cabe arriba del dialog sin salirse del
   viewport (top:-3.25rem lo pone fuera del área visible) -- se mueve
   dentro, esquina superior derecha, con fondo propio para que se lea
   sobre cualquier foto clara. */
@media (max-width: 480px) {
  body.rediseno .rd-historico-lightbox__close {
    top: .5rem;
    right: .5rem;
    background-color: rgba(3, 1, 57, .55);
  }
}

/* =====================================================================
   Módulo de Admisión (flujo tipo TEDxSurco) — /eventos/confirmar/{token}
   (confirm.blade.php + confirm-success.blade.php). Maquetación, Task 3.

   Sin Figma para esta pantalla: se reutiliza el mismo patrón de card
   centrada que /login (rd-login__panel) y los tokens ya existentes
   (--rd-navy, --rd-brand-dark, --rd-brand-light, --rd-fill-celeste,
   --rd-radius-pill, --rd-transition, --rd-focus-*). El logo/header LBN
   ya lo pone el layout compartido (<header> de app1.blade.php) -- no se
   duplica aquí. Mobile-first: base 320px, escalado con min-width.
   ===================================================================== */
body.rediseno .rd-confirmar {
  padding: 2.5rem 0 3.5rem;
  background-color: var(--rd-bg-page);
}

body.rediseno .rd-confirmar__container {
  display: flex;
  justify-content: center;
}

body.rediseno .rd-confirmar__card {
  width: 100%;
  max-width: 30rem;
  background-color: #fff;
  border: 1px solid var(--rd-pasados-pill-border, #E0E4ED);
  border-radius: 24px;
  box-shadow: 0 12px 32px rgba(3, 1, 57, .08);
  padding: 2rem 1.5rem;
  text-align: center;
}

body.rediseno .rd-confirmar__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background-color: var(--rd-fill-celeste);
  display: flex;
  align-items: center;
  justify-content: center;
}

body.rediseno .rd-confirmar__icon svg {
  width: 32px;
  height: 32px;
}

body.rediseno .rd-confirmar__icon circle {
  stroke: var(--rd-brand-light);
  stroke-width: 2;
}

body.rediseno .rd-confirmar__icon path {
  stroke: var(--rd-brand-dark);
}

body.rediseno .rd-confirmar__icon--success {
  background-color: var(--rd-brand-dark);
}

body.rediseno .rd-confirmar__icon--success circle {
  stroke: rgba(255, 255, 255, .35);
}

body.rediseno .rd-confirmar__icon--success path {
  stroke: #fff;
}

body.rediseno .rd-confirmar__eyebrow {
  margin: 0 0 .5rem;
  color: var(--rd-link-blue);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.rediseno .rd-confirmar__title {
  margin: 0 0 1rem;
  color: var(--rd-navy);
  font-weight: 700;
  font-size: clamp(1.25rem, 4vw, 1.625rem);
  line-height: 1.3;
}

body.rediseno .rd-confirmar__alert {
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  border-radius: 10px;
  background-color: #FDECEC;
  border: 1px solid #F1C2C2;
  color: #8B2F2F;
  font-size: .9375rem;
  text-align: left;
}

body.rediseno .rd-confirmar__text {
  margin: 0 0 1.5rem;
  color: #333333;
  font-size: 1rem;
  line-height: 1.5;
}

body.rediseno .rd-confirmar__code {
  display: inline-block;
  padding: .125rem .625rem;
  border-radius: 6px;
  background-color: var(--rd-fill-celeste);
  color: var(--rd-navy);
  font-weight: 700;
  letter-spacing: .04em;
}

body.rediseno .rd-confirmar__hint {
  margin: 1rem 0 0;
  color: var(--rd-grey-mid);
  font-size: .8125rem;
}

body.rediseno .rd-confirmar__form,
body.rediseno .rd-confirmar__actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

body.rediseno .rd-confirmar__field {
  text-align: center;
}

/* ---------------------------------------------------------------------
   Input de foto para el fotocheck (confirm.blade.php, campo opcional).
   Mismo lenguaje visual que el avatar de /register (rd-register-avatar:
   marco circular + preview con FileReader) pero compacto -- este es un
   campo dentro de la card de confirmación, no una pantalla dedicada.
   JS: initConfirmPhotoPreview() en rediseno.js.
   --------------------------------------------------------------------- */
body.rediseno .rd-confirmar-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .625rem;
  margin: .25rem 0 .5rem;
}

body.rediseno .rd-confirmar-photo__frame {
  position: relative;
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-color: var(--rd-fill-celeste);
  border: 1.5px solid var(--rd-pasados-pill-border, #E0E4ED);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--rd-transition);
}

body.rediseno .rd-confirmar-photo__frame:hover {
  border-color: var(--rd-brand-light);
}

body.rediseno .rd-confirmar-photo__placeholder {
  position: absolute;
  inset: 18px;
  width: calc(100% - 36px);
  height: auto;
  pointer-events: none;
}

body.rediseno .rd-confirmar-photo__preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

body.rediseno .rd-confirmar-photo__preview[hidden] {
  display: none;
}

/* El <input> real es rd-visually-hidden (NO display:none): sigue en el tab
   order y es activable por teclado. Cuando recibe foco por teclado, el aro
   de foco se dibuja sobre el marco visible (combinador de hermanos, el
   input va ANTES del label en el markup). */
body.rediseno .rd-confirmar-photo__input:focus-visible ~ .rd-confirmar-photo__frame {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}

/* padding + margen negativo: agranda el área táctil a ~44px de alto sin
   cambiar el tamaño visual del texto (catálogo anti-defectos #5). */
body.rediseno .rd-confirmar-photo__label {
  display: inline-block;
  margin: -.75rem -.5rem;
  padding: .75rem .5rem;
  color: var(--rd-link-blue, #225192);
  font-weight: 700;
  font-size: .9375rem;
  text-decoration: underline;
  cursor: pointer;
}

body.rediseno .rd-confirmar-photo__label:hover {
  color: var(--rd-navy);
}

body.rediseno .rd-confirmar-photo__optional {
  color: var(--rd-grey-mid);
  font-weight: 400;
  text-decoration: none;
}

body.rediseno .rd-confirmar-photo__hint {
  margin: 0;
  color: var(--rd-grey-mid);
  font-size: .8125rem;
}

body.rediseno .rd-confirmar-photo__filename {
  margin: 0;
  max-width: 100%;
  color: var(--rd-navy);
  font-size: .8125rem;
  font-weight: 700;
  word-break: break-all;
}

body.rediseno .rd-confirmar-photo__filename:empty {
  display: none;
}

/* Botón pill igual al patrón de /login (rd-login-cta), reusado tal cual
   para no introducir un segundo estilo de CTA en el mismo sistema. */
body.rediseno .rd-confirmar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 0 1.5rem;
  border-radius: var(--rd-radius-pill);
  border: 1.5px solid var(--rd-brand-dark);
  background-color: var(--rd-brand-dark);
  color: #fff;
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--rd-transition), color var(--rd-transition), border-color var(--rd-transition);
}

body.rediseno .rd-confirmar__cta:hover {
  background-color: #003A5F;
  border-color: #003A5F;
  color: #fff;
  text-decoration: none;
}

body.rediseno .rd-confirmar__cta:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}

body.rediseno .rd-confirmar__cta--ghost {
  background-color: transparent;
  color: var(--rd-brand-dark);
}

body.rediseno .rd-confirmar__cta--ghost:hover {
  background-color: var(--rd-fill-celeste);
  color: var(--rd-brand-dark);
}

@media (min-width: 768px) {
  body.rediseno .rd-confirmar {
    padding: 4rem 0 5rem;
  }

  body.rediseno .rd-confirmar__card {
    padding: 3rem 2.5rem;
  }

  body.rediseno .rd-confirmar__icon {
    width: 80px;
    height: 80px;
  }

  body.rediseno .rd-confirmar__icon svg {
    width: 40px;
    height: 40px;
  }

  body.rediseno .rd-confirmar__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  body.rediseno .rd-confirmar__cta {
    width: auto;
  }

  body.rediseno .rd-confirmar-photo__frame {
    width: 112px;
    height: 112px;
  }
}

/* =====================================================================
   Fase "Banners del Home" -- carrusel del hero (App\Models\HomeBanner,
   reemplaza al hero legacy .bg-image/#slide cuando hay banners activos).
   Markup: frontend/layouts/partials/home-banners-slider.blade.php.
   JS: rediseno.js > initHomeBannersSlider().

   - Reusa `.slider-section` (legacy, frontend.css) para el border-radius
     y el padding-top mobile que ya libera el header sticky -- no se
     duplica ese valor aquí, `border-radius: inherit` lo hereda.
   - Mobile-first, min-width. Fix H-08 (overflow horizontal 320/375 del
     hero anterior): viewport con overflow:hidden + min-width:0 en cada
     slide (el ancho intrínseco de la imagen no puede forzar overflow).
   - Fix H-02 (LCP tardío): ver el <link rel="preload"> que agrega este
     mismo módulo en el <head> (home-banners-slider.blade.php).
   ===================================================================== */
body.rediseno .rd-banners {
  position: relative;
}

body.rediseno .rd-banners__viewport {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

body.rediseno .rd-banners__track {
  display: flex;
  width: 100%;
  transition: transform var(--rd-transition);
}

@media (prefers-reduced-motion: reduce) {
  body.rediseno .rd-banners__track {
    transition: none;
  }
}

body.rediseno .rd-banners__slide {
  flex: 0 0 100%;
  min-width: 0;
  max-width: 100%;
}

body.rediseno .rd-banners__link {
  display: block;
  width: 100%;
  height: 100%;
}

body.rediseno .rd-banners__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  /* Banner CIAN 2026 (arte del cliente 1905x695, aspecto 2.74:1). Mismo layout ancho
     en mobile y desktop -> object-fit:contain para que la pieza entre COMPLETA (banderas
     arriba, logos abajo) sin recortar. Fondo navy por si el contenedor es más ancho. */
  aspect-ratio: 760 / 278;
  object-fit: contain;
  background: #030139;
}

@media (min-width: 768px) {
  body.rediseno .rd-banners__img {
    aspect-ratio: 1905 / 695;
  }
}

/* 2026-08-03 QA "Web eventos" obs.1 -- banner del home "muy pegado banderas".
   Causa raíz (medida con getBoundingClientRect): .main-menu-container
   (frontend.css) es position:fixed SIEMPRE, no solo al hacer scroll -- mismo
   gotcha que Fase 2 (.rd-login) y Fase 6 (.rd-historico-page) ya documentaron
   para otras secciones. .rd-banners hereda el padding-top legacy de
   .slider-section, que SOLO compensa esa altura en mobile (78px <=480px /
   82px <=768px, frontend.css) -- en mobile el resultado es aire CERO (el
   arte empieza exactamente donde termina el header, gap medido = 0px) y en
   desktop esa compensación es 0px, así que el header fixed tapa de forma
   directa ~95px del arte (gap medido = -95px, banderas ya asomando justo
   debajo del header). Fix: aire adicional en .rd-banners__viewport, en NAVY
   (letterbox, mismo #030139 que el fondo de .rd-banners__img -- no recorta
   ni distorsiona el arte, ni depende de su aspect-ratio) sumado al
   padding-top legacy que sigue siendo necesario para no tapar el arte.
   Mismo criterio de holgura que .rd-login/.rd-historico-page (~24-30px de
   aire sobre la altura medida del header). */
body.rediseno .rd-banners__viewport {
  padding-top: 24px;
  background-color: #030139;
}

@media (min-width: 768px) {
  body.rediseno .rd-banners__viewport {
    padding-top: 120px;
  }
}

/* 2026-07-30: separar "Eventos Futuros" (#event-course) del banner del home.
   La base .event-course-section trae padding-top:0 -> quedaba pegado al banner.
   Scoped al home con :not(--inside) para no tocar la pagina de cursos. */
body.rediseno #event-course.event-course-section:not(.event-course-section--inside) {
  margin-top: 56px;
}

@media (max-width: 767px) {
  body.rediseno #event-course.event-course-section:not(.event-course-section--inside) {
    margin-top: 32px;
  }
}

/* ---------------------------------------------------------------------
   Flechas prev/next -- ocultas por completo cuando hay 1 solo banner
   (el blade no las renderiza en ese caso, no es solo un display:none).
   Touch target 44x44 en mobile (catálogo anti-defectos #5).
   --------------------------------------------------------------------- */
body.rediseno .rd-banners__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(3, 1, 57, .45);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--rd-transition);
}

body.rediseno .rd-banners__arrow:hover {
  background-color: rgba(3, 1, 57, .7);
}

body.rediseno .rd-banners__arrow:focus-visible {
  outline: var(--rd-focus-width) solid #fff;
  outline-offset: var(--rd-focus-offset);
}

body.rediseno .rd-banners__arrow--prev {
  left: .5rem;
}

body.rediseno .rd-banners__arrow--next {
  right: .5rem;
}

@media (min-width: 768px) {
  body.rediseno .rd-banners__arrow {
    width: 48px;
    height: 48px;
  }

  body.rediseno .rd-banners__arrow--prev {
    left: 1.5rem;
  }

  body.rediseno .rd-banners__arrow--next {
    right: 1.5rem;
  }
}

/* ---------------------------------------------------------------------
   Dots + play/pause -- misma píldora que el resto del sistema
   (var(--rd-radius-pill)). Dots con hit-area 44x44 aunque el punto
   visible sea de 8px (patrón estándar: hit-area grande, indicador chico).
   --------------------------------------------------------------------- */
body.rediseno .rd-banners__controls {
  position: absolute;
  bottom: .75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .25rem;
  background-color: rgba(255, 255, 255, .85);
  padding: 0 .375rem;
  border-radius: var(--rd-radius-pill);
}

body.rediseno .rd-banners__dots {
  display: flex;
  align-items: center;
}

body.rediseno .rd-banners__dot {
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.rediseno .rd-banners__dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--rd-grey-mid);
  transition: background-color var(--rd-transition), transform var(--rd-transition);
}

body.rediseno .rd-banners__dot.is-active::before {
  background-color: var(--rd-brand-dark);
  transform: scale(1.3);
}

body.rediseno .rd-banners__dot:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
  border-radius: 50%;
}

body.rediseno .rd-banners__playpause {
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--rd-navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.rediseno .rd-banners__playpause:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
  border-radius: 50%;
}

body.rediseno .rd-banners__icon-play {
  display: none;
}

body.rediseno .rd-banners__playpause.is-paused .rd-banners__icon-pause {
  display: none;
}

body.rediseno .rd-banners__playpause.is-paused .rd-banners__icon-play {
  display: block;
}

@media (min-width: 768px) {
  body.rediseno .rd-banners__controls {
    bottom: 1.5rem;
  }
}

/* =====================================================================
   Fix CRO-H02 -- hero legacy #slide (frontend/layouts/partials/slider.blade.php,
   fallback cuando NO hay banners activos en App\Models\HomeBanner -- ver
   home-banners-slider.blade.php). En 320-767px el logo "CIAN", el título
   "XIII CONGRESO..." y las tarjetas de fecha quedaban recortados por los
   bordes.

   Causa raíz: #bg-N.bg-image (frontend.css línea ~2139) tiene
   `height: 600px` FIJO + `background-size: cover` en TODOS los anchos.
   Con el ancho angosto (320/375px) pero la altura fija en 600px, cover
   escala la imagen ~1.7-2x para cubrir esa altura y recorta ~25% de
   contenido de cada lado (por eso "CIAN" se veía como "IAN"). A partir
   de ~643px de ancho el propio cover ya no necesita ese exceso de escala
   y el recorte desaparece -- coincide con que a 768px/1920px CRO ya lo
   vio completo.

   Fix: en <768px el alto de #bg-N se deriva del aspect-ratio real del
   banner mobile activo (1756516569-...-750x700px...png = 750/700) en
   vez del height fijo, así cover ya no necesita sobre-escalar. Se suma
   `background-size: contain` como red de seguridad: si a futuro se sube
   desde el CMS (tabla `sliders`, campo bg_image_mobile) un banner con
   otra proporción, en el peor caso queda una franja vacía (letterbox),
   nunca vuelve a recortar texto/logo.

   Scopeado a `#slide` (id único de este partial, confirmado que no se
   reutiliza en ninguna otra vista) -- no toca `.slider-bg-1..4` ni el
   nuevo `.rd-banners__*` (Fase "Banners del Home"), y no aplica a
   >=768px (ahí el comportamiento actual ya es correcto, no se toca). */
@media (max-width: 767.98px) {
  body.rediseno #slide .bg-image {
    height: auto;
    aspect-ratio: 750 / 700;
    background-size: contain;
    background-position: center top;
    background-color: #dbe3f7;
  }
}

/* PONENTES — placeholder sin foto (fix H-CIAN-1)
   Cuando el ponente no tiene foto (image=null), el blade agrega
   .course-exhibitors-content-item-head--noimg y omite el background-image
   y el <img> de bandera (que antes salían como 404 / ícono roto). Aquí se
   dibuja un fondo neutro de marca con una silueta centrada, para que la
   tarjeta degrade con gracia en vez de mostrar un recuadro roto. */
body.rediseno .course-exhibitors-content-item-head--noimg {
  background-color: #E8EEF5; /* tinte suave de --rd-brand-dark */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%23004876' stroke-opacity='0.35' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 96px 96px;
}

/* 2026-08-03 QA "Web eventos" obs.4 -- ponentes con encuadres/fondos dispares
   (ej. una foto real con fondo verde saturado -Analía Furio-, otras con fondo
   gris/oscuro/exterior; distinto nivel de "zoom" porque las 14 fotos subidas
   tienen proporciones nativas MUY distintas -- medido con las imágenes reales:
   van desde 345x600 -portrait- hasta 600x400 -landscape-). NO se reemplazan
   imágenes (decisión de Anyerson). El tamaño del box y background-size:cover +
   background-position:center top YA son uniformes para los 19 (herencia de
   frontend.css, base theme) -- ahí el "mismo aspect-ratio/tamaño... encuadre
   facial consistente" que pide QA ya se cumple. Lo que se agrega es un
   vignette sutil (radial, transparente en el centro donde cae la cara gracias
   a background-position:center, navy tenue solo en el borde) que ataja
   puntualmente la disparidad de fondo/zoom entre fotos sin tocar ni recortar
   la cara -- mismo tratamiento para los 14 reales Y los 5 --noimg (selector
   base, no --noimg específico), así toda la fila comparte un solo "marco". */
body.rediseno .course-exhibitors-content-item-head {
  position: relative;
}

body.rediseno .course-exhibitors-content-item-head::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(ellipse 62% 58% at center 38%, rgba(3, 1, 57, 0) 28%, rgba(3, 1, 57, .55) 100%);
}

/* La bandera de país es un <img> normal (sin position), por defecto un ::before
   absolute+z-index se pinta ENCIMA de contenido no posicionado -- se le da
   position+z-index para que gane y no quede tapada por el vignette. */
body.rediseno .course-exhibitors-content-item-head img {
  position: relative;
  z-index: 2;
}

/* 2026-08-03 (v2, validacion jefe) obs.4 -- las fotos se veian CORTADAS (cabezas
   pegadas al borde). RAIZ: el recuadro base es 370x280 (landscape, ratio 1.32)
   pero casi todas las fotos son VERTICALES (ratios reales 0.57-0.91) -> cover
   recortaba ~50% del alto y la coronilla quedaba al ras del borde (Scott Forbes,
   Analia Furio). Fix elegido por el jefe: recuadro RETRATO 3:4 -> como las fotos
   son verticales, entran casi completas con cover (recorte de alto baja a ~11-24%,
   la cara respira arriba). Las 2 landscape (Rodrigo 1.5, Manuel 1.06) recortan
   lados, no la cara. `height:auto` habilita `aspect-ratio` (frontend.css fija
   height:280px; se replica su cadena de 4 clases + body.rediseno para ganar
   especificidad). background-position:center top se hereda (max cabeza visible).
   El vignette ::before (inset:0) y la silueta --noimg (centrada) se adaptan solos. */
body.rediseno .course-exhibitors .course-exhibitors-content .course-exhibitors-content-item .course-exhibitors-content-item-head {
  height: auto;
  aspect-ratio: 3 / 4;
}

/* ── 2026-08-04: aviso "solo visita a stands" en el tab de un día NO inscribible
   del programa (CIAN 2026 · Miércoles 09-sep). Reemplaza el microcopy plano
   .rd-lesson-no-inscribible por un aviso destacado (info box celeste). ────── */
body.rediseno .rd-lesson-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 20px;
  padding: 14px 18px;
  background: var(--rd-fill-celeste);
  border-left: 4px solid var(--rd-link-blue);
  border-radius: 10px;
}
body.rediseno .rd-lesson-notice img {
  flex: 0 0 auto;
  margin-top: 2px;
}
body.rediseno .rd-lesson-notice p {
  margin: 0;
  color: var(--rd-navy);
  font-size: 15px;
  line-height: 1.45;
}
body.rediseno .rd-lesson-notice strong {
  color: var(--rd-link-blue);
}

/* =====================================================================
   2026-08-07 — Obs. cliente CIAN 2026 (lote 2), Obs #2: botón "Continuar
   con Google" del modal legacy de login/registro (#myModal/#myModalRegister,
   resources/views/frontend/layouts/modals/loginModal.blade.php — NO se
   toca el blade, solo CSS).

   Diagnóstico (verificado en navegador, inyectando el HTML real que
   devuelve App\Helpers\Frontend\Auth\Socialite::getSocialLinks() mientras
   OAUTH_READY todavía no estaba en true en .env local): el <a class="btn-main
   btn--2"> que arma el helper YA hereda la base pill del rediseño
   (frontend.css .btn-main: radio 42px, padding 12px 20px, gap 8px) y calza
   en alto/ancho con "Iniciar sesión"/"Crear una cuenta" del propio modal
   (ambos .btn-main.btn--3) sin tocar nada — NO hacía falta reconstruir el
   botón. Lo único legacy es el ÍCONO: .social-login/.social-login--google
   (scope ".modal.modal--login #socialLinks/#socialLinksRegister",
   frontend.css ~9733-9747) sigue apuntando a /images/google-ico.svg
   (asset a color pre-rediseño, sin fondo), distinto del ícono plano
   /images/social/google.svg que ya usa /login (Fase 2 de este archivo,
   selector .rd-login-social, línea ~642).

   Probado el swap "a secas" (solo cambiar background-image sin más) antes
   de aplicarlo: el ícono plano es monocromo #999999 pensado para ir DENTRO
   de un círculo #F1F2F4 de 44px (como en /login, ícono solo sin texto) —
   suelto a 24px junto al texto "Continuar con Google" se ve pálido/perdido,
   peor que el legacy a color. Por eso, a diferencia de /login, aquí se
   mantiene el tamaño de caja legacy (24px, intacto, sin tocar frontend.css)
   y se le agrega el mismo respaldo circular neutro que ya usa /login antes
   de cambiar el asset — mismo criterio, adaptado a que este botón SÍ lleva
   texto. Sin este respaldo, el ícono no tenía background-size/position
   propios (frontend.css solo fija width/height) y el SVG nuevo (32x32
   nativo) se recorta contra una caja de 24px sin escalar — se declaran los
   3 explícitos para que no rompa.

   Se agrega también :hover/:active/:focus-visible al botón (regla dura:
   todo interactivo lleva :focus-visible aunque no esté en el resto del
   modal). El resto de botones del modal ("Iniciar sesión", "Crear una
   cuenta") NO tienen estos estados tampoco — gap preexistente, sitewide,
   fuera de alcance de este fix puntual (reportado como hallazgo, no se
   refactoriza de paso). Timing: 200ms ease-out (default, no viaja por
   prototipo). */
body.rediseno #myModal #socialLinks .social-login,
body.rediseno #myModalRegister #socialLinksRegister .social-login {
  border-radius: 50%;
  background-color: #F1F2F4;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

body.rediseno #myModal #socialLinks .social-login--facebook,
body.rediseno #myModalRegister #socialLinksRegister .social-login--facebook {
  background-image: url(/images/social/facebook.svg);
}

body.rediseno #myModal #socialLinks .social-login--google,
body.rediseno #myModalRegister #socialLinksRegister .social-login--google {
  background-image: url(/images/social/google.svg);
}

body.rediseno #myModal #socialLinks a.btn-main.btn--2,
body.rediseno #myModalRegister #socialLinksRegister a.btn-main.btn--2 {
  transition: background-color var(--rd-transition), border-color var(--rd-transition);
}

body.rediseno #myModal #socialLinks a.btn-main.btn--2:hover,
body.rediseno #myModalRegister #socialLinksRegister a.btn-main.btn--2:hover {
  background-color: #F1F6FB;
}

body.rediseno #myModal #socialLinks a.btn-main.btn--2:active,
body.rediseno #myModalRegister #socialLinksRegister a.btn-main.btn--2:active {
  transform: translateY(1px);
}

body.rediseno #myModal #socialLinks a.btn-main.btn--2:focus-visible,
body.rediseno #myModalRegister #socialLinksRegister a.btn-main.btn--2:focus-visible {
  outline: var(--rd-focus-width) solid var(--rd-focus-color);
  outline-offset: var(--rd-focus-offset);
}