/**
 * @file
 * Cartelera de eventos del Centro de Convenciones Virtual.
 *
 * Paleta y tipografía tomadas del tema institucional de ProColombia:
 * Poppins, rojo de marca #B21A3E, grises #1A1A1A / #646464 / #F2F2F2.
 */

:root {
  --ccv-rojo: #b21a3e;
  --ccv-rojo-oscuro: #8d1531;
  --ccv-negro: #1a1a1a;
  --ccv-gris: #646464;
  --ccv-gris-claro: #b3b3b3;
  --ccv-fondo: #f2f2f2;
  --ccv-borde: #dedede;
  --ccv-azul-pastel: #ccdbe6;
  --ccv-blanco: #fff;
  --ccv-radio: 8px;
  --ccv-sombra: 0 2px 10px rgb(26 26 26 / 8%);
  --ccv-sombra-alta: 0 8px 24px rgb(26 26 26 / 14%);
}

/* ---------- Encabezado y filtros ---------- */

.view-cartelera-webinars {
  font-family: Poppins, sans-serif;
  color: var(--ccv-negro);
}

.view-cartelera-webinars .view-filters {
  background: var(--ccv-fondo);
  border-radius: var(--ccv-radio);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.view-cartelera-webinars .view-filters form {
  display: block;
}

/* Drupal envuelve los filtros expuestos en este contenedor; sin darle
   ancho se queda encogido y el botón cae a una segunda línea. */
.view-cartelera-webinars .view-filters .form--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
  width: 100%;
}

.view-cartelera-webinars .view-filters .form-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  /* El buscador ocupa el doble que el desplegable: los nombres de evento
     son largos y el eje solo muestra cuatro opciones. */
  flex: 2 1 18rem;
  min-width: 12rem;
}

.view-cartelera-webinars .view-filters .js-form-type-select {
  flex: 1 1 14rem;
  max-width: 22rem;
}

/* La ayuda del buscador no debe alterar la altura de la fila ni empujar
   al botón: se saca del flujo dejándole su hueco con el relleno inferior. */
.view-cartelera-webinars .view-filters .form-item {
  position: relative;
  padding-bottom: 1.5rem;
}

.view-cartelera-webinars .view-filters .description,
.view-cartelera-webinars .view-filters .form-item__description {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: -1.25rem;
  font-size: 0.8125rem;
  color: var(--ccv-gris);
}

.view-cartelera-webinars .view-filters label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ccv-gris);
}

.view-cartelera-webinars .view-filters select,
.view-cartelera-webinars .view-filters input[type="text"] {
  font-family: inherit;
  font-size: 0.9375rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--ccv-negro);
  border-radius: 4px;
  background: var(--ccv-blanco);
  color: var(--ccv-negro);
  width: 100%;
}

/* El desplegable perdía su flecha al fijarle fondo y borde, y sin ella
   parece un campo de escritura: nadie adivina que se puede desplegar.
   La flecha va incrustada como SVG para no depender de ningún archivo. */
.view-cartelera-webinars .view-filters select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  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 1.5 6 6.5l5-5' fill='none' stroke='%231b1b1d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  cursor: pointer;
}

.view-cartelera-webinars .view-filters select:focus,
.view-cartelera-webinars .view-filters input:focus {
  outline: 2px solid var(--ccv-rojo);
  outline-offset: 1px;
}

.view-cartelera-webinars .view-filters .form-actions {
  display: flex;
  gap: 0.75rem;
  flex: 0 0 auto;
  /* Alineado con los campos y no con sus etiquetas: el botón no lleva
     etiqueta encima, así que sin este desplazamiento queda más alto. */
  margin-top: 1.55rem;
}

.view-cartelera-webinars .view-filters input[type="submit"] {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.65rem 1.5rem;
  border: 1px solid var(--ccv-rojo);
  border-radius: 4px;
  background: var(--ccv-rojo);
  color: var(--ccv-blanco);
  cursor: pointer;
  transition: background 0.15s ease;
}

.view-cartelera-webinars .view-filters input[type="submit"]:hover {
  background: var(--ccv-rojo-oscuro);
}

.view-cartelera-webinars .view-filters input[type="submit"][id*="reset"],
.view-cartelera-webinars .view-filters input[type="submit"].btn-secondary {
  background: transparent;
  color: var(--ccv-rojo);
}

/* ---------- Rejilla ---------- */

.view-cartelera-webinars .view-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.75rem;
}

.view-cartelera-webinars .views-row {
  display: flex;
}

/* ---------- Tarjeta ---------- */

.ccv-tarjeta {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--ccv-blanco);
  border: 1px solid var(--ccv-borde);
  border-radius: var(--ccv-radio);
  overflow: hidden;
  box-shadow: var(--ccv-sombra);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ccv-tarjeta:hover,
.ccv-tarjeta:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--ccv-sombra-alta);
}

.ccv-tarjeta__medio {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ccv-fondo);
  overflow: hidden;
}

.ccv-tarjeta__medio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ccv-tarjeta__marcador {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: linear-gradient(135deg, var(--ccv-azul-pastel), var(--ccv-fondo));
}

.ccv-tarjeta__marcador span {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ccv-gris);
}

.ccv-etiqueta {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ccv-etiqueta--eje {
  background: var(--ccv-rojo);
  color: var(--ccv-blanco);
}

.ccv-tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.7rem;
  padding: 1.25rem;
}

.ccv-tarjeta__titulo {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
}

.ccv-tarjeta__titulo a {
  color: var(--ccv-negro);
  text-decoration: none;
}

.ccv-tarjeta__titulo a:hover,
.ccv-tarjeta__titulo a:focus {
  color: var(--ccv-rojo);
  text-decoration: underline;
}

/**
 * Fechas rotuladas.
 *
 * Cada par va en su propia línea: puestas seguidas, y con la fecha repetida
 * entera en las dos, no se distinguía el comienzo del final.
 */
.ccv-tarjeta__fechas {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
}

.ccv-tarjeta__fecha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
}

.ccv-tarjeta__rotulo {
  font-weight: 700;
  color: var(--ccv-gris);
}

/* El dato conserva el rojo de marca que ya tenía la fecha. */
.ccv-tarjeta__valor {
  margin: 0;
  font-weight: 500;
  color: var(--ccv-rojo);
}

.ccv-tarjeta__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ccv-dato {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--ccv-borde);
  border-radius: 4px;
  background: var(--ccv-fondo);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ccv-gris);
}

.ccv-dato--modalidad {
  border-color: var(--ccv-azul-pastel);
  background: var(--ccv-azul-pastel);
  color: var(--ccv-negro);
}

.ccv-tarjeta__lugar,
.ccv-tarjeta__resumen {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ccv-gris);
}

.ccv-tarjeta__acciones {
  margin-top: auto;
  padding-top: 0.5rem;
}

/**
 * «Ir al evento».
 *
 * Ocupa todo el ancho de la tarjeta: al ir pegado al borde inferior, un botón
 * suelto y estrecho se lee como un enlace más entre el texto de al lado.
 */
.ccv-tarjeta__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  /* Objetivo cómodo para el dedo, como el resto de acciones del portal. */
  min-height: 44px;
  padding: 0.55rem 1.25rem;
  border-radius: 4px;
  background: var(--ccv-rojo);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.ccv-tarjeta__boton:hover,
.ccv-tarjeta__boton:focus {
  background: var(--ccv-rojo-oscuro, #7d1430);
  color: #fff;
  text-decoration: none;
}

/* El foco debe verse sobre el fondo rojo del propio botón. */
.ccv-tarjeta__boton:focus-visible {
  outline: 3px solid var(--ccv-negro, #1b1b1b);
  outline-offset: 2px;
}

/* La flecha acompaña al texto y se separa un poco al apuntar. */
.ccv-tarjeta__boton-flecha {
  display: inline-flex;
  transition: transform 0.15s ease;
}

.ccv-tarjeta__boton:hover .ccv-tarjeta__boton-flecha {
  transform: translateX(2px);
}

/* Quien prefiere no ver movimiento no lo ve. */
@media (prefers-reduced-motion: reduce) {
  .ccv-tarjeta__boton,
  .ccv-tarjeta__boton-flecha {
    transition: none;
  }
  .ccv-tarjeta__boton:hover .ccv-tarjeta__boton-flecha {
    transform: none;
  }
}

.ccv-boton {
  display: inline-block;
  padding: 0.6rem 1.35rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.ccv-boton--principal {
  background: var(--ccv-rojo);
  color: var(--ccv-blanco);
}

.ccv-boton--principal:hover,
.ccv-boton--principal:focus {
  background: var(--ccv-rojo-oscuro);
  color: var(--ccv-blanco);
}

/* ---------- Paginación ---------- */

.view-cartelera-webinars .pager__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-top: 2.5rem;
  padding: 0;
  list-style: none;
}

.view-cartelera-webinars .pager__item a {
  display: block;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--ccv-borde);
  border-radius: 4px;
  color: var(--ccv-negro);
  font-size: 0.875rem;
  text-decoration: none;
}

.view-cartelera-webinars .pager__item a:hover,
.view-cartelera-webinars .pager__item.is-active a {
  border-color: var(--ccv-rojo);
  background: var(--ccv-rojo);
  color: var(--ccv-blanco);
}

/* ---------- Vacío ---------- */

.view-cartelera-webinars .view-empty {
  padding: 3rem 1.5rem;
  border: 1px dashed var(--ccv-borde);
  border-radius: var(--ccv-radio);
  text-align: center;
  color: var(--ccv-gris);
}

/* ---------- Adaptación a pantallas ---------- */

@media (max-width: 767px) {
  .view-cartelera-webinars .view-content {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .view-cartelera-webinars .view-filters {
    padding: 1rem;
  }

  /*
   * En columna hay que quitar el ajuste automático: con `wrap` activo, flex
   * reparte los elementos en varias columnas en lugar de apilarlos.
   */
  .view-cartelera-webinars .view-filters form {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .view-cartelera-webinars .view-filters .form-item {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
  }

  .view-cartelera-webinars .view-filters .form-actions {
    width: 100%;
  }

  .view-cartelera-webinars .view-filters input[type="submit"] {
    flex: 1;
  }

  .ccv-tarjeta__cuerpo {
    padding: 1rem;
  }
}

@media (min-width: 1400px) {
  .view-cartelera-webinars .view-content {
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ccv-tarjeta,
  .ccv-boton {
    transition: none;
  }

  .ccv-tarjeta:hover {
    transform: none;
  }
}

/* ---------- Encabezado del portal ---------- */

/*
 * El nombre del sitio es largo ("Centro de Convenciones Virtual
 * ProColombia") y sin estas reglas desborda el ancho en móvil, lo que
 * provoca desplazamiento horizontal en toda la página.
 */
.navbar-brand,
.region-nav-branding,
.block-system-branding-block {
  max-width: 100%;
  min-width: 0;
}

.site-title {
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.2;
}

.navbar-brand {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.navbar-brand img,
.site-logo img {
  max-height: 44px;
  width: auto;
}

@media (max-width: 991px) {
  .site-title {
    font-size: 1rem;
  }
}

@media (max-width: 575px) {
  .site-title {
    font-size: 0.875rem;
  }

  .navbar-brand img,
  .site-logo img {
    max-height: 34px;
  }
}

/* Red de seguridad: ninguna página debe desplazarse en horizontal. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ---------- Formulario de cuenta y registro ---------- */

.user-register-form,
.user-login-form,
.user-pass {
  max-width: 640px;
  margin-inline: auto;
  font-family: Poppins, sans-serif;
}

.user-register-form .form-item,
.user-login-form .form-item {
  margin-bottom: 1.1rem;
}

.user-register-form label,
.user-login-form label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ccv-negro);
}

.user-register-form input[type="text"],
.user-register-form input[type="email"],
.user-register-form input[type="password"],
.user-register-form input[type="tel"],
.user-register-form select,
.user-login-form input[type="text"],
.user-login-form input[type="password"] {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--ccv-negro);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9375rem;
}

.user-register-form input:focus,
.user-login-form input:focus,
.user-register-form select:focus {
  outline: 2px solid var(--ccv-rojo);
  outline-offset: 1px;
}

.user-register-form .form-submit,
.user-login-form .form-submit {
  padding: 0.7rem 1.75rem;
  border: none;
  border-radius: 4px;
  background: var(--ccv-rojo);
  color: var(--ccv-blanco);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.user-register-form .form-submit:hover,
.user-login-form .form-submit:hover {
  background: var(--ccv-rojo-oscuro);
}

.user-register-form .description,
.user-login-form .description {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--ccv-gris);
}

/* ---------- Página de detalle del webinar ---------- */

.pro-tw-webinar-page {
  max-width: 900px;
  margin-inline: auto;
  font-family: Poppins, sans-serif;
}

.pro-tw-webinar-page h1 {
  font-size: 2rem;
  line-height: 1.25;
  color: var(--ccv-negro);
}

.pro-tw-webinar-page form {
  margin-top: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--ccv-borde);
  border-radius: var(--ccv-radio);
  background: var(--ccv-fondo);
}

.pro-tw-webinar-page .form-submit {
  padding: 0.7rem 1.75rem;
  border: none;
  border-radius: 4px;
  background: var(--ccv-rojo);
  color: var(--ccv-blanco);
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 767px) {
  .pro-tw-webinar-page h1 {
    font-size: 1.5rem;
  }

  .pro-tw-webinar-page form {
    padding: 1rem;
  }
}

/* ---------- Botones heredados de Bootstrap ---------- */

/*
 * Bootstrap pinta sus botones primarios de azul. En un portal institucional
 * de ProColombia el color de acción es el rojo de marca.
 */
.btn-primary,
.button--primary,
header .form-submit {
  background-color: var(--ccv-rojo);
  border-color: var(--ccv-rojo);
  color: var(--ccv-blanco);
}

.btn-primary:hover,
.btn-primary:focus,
.button--primary:hover,
.button--primary:focus,
header .form-submit:hover {
  background-color: var(--ccv-rojo-oscuro);
  border-color: var(--ccv-rojo-oscuro);
  color: var(--ccv-blanco);
}

.btn-outline-primary {
  border-color: var(--ccv-rojo);
  color: var(--ccv-rojo);
}

.btn-outline-primary:hover {
  background-color: var(--ccv-rojo);
  color: var(--ccv-blanco);
}

a {
  color: var(--ccv-rojo);
}

/* La etiqueta del buscador del encabezado sobra: el campo ya se entiende. */
header .block-search .form-item > label,
.region-nav-additional .block-search label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

header .block-search .form-item {
  margin-bottom: 0;
}

/* ---------- Avisos de aforo y cierre ---------- */

.ccv-aforo {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.45rem 0.9rem;
  border-radius: 4px;
  background: var(--ccv-azul-pastel);
  color: var(--ccv-negro);
  font-size: 0.875rem;
  font-weight: 600;
}

.ccv-aforo--pocos {
  background: var(--ccv-rojo);
  color: var(--ccv-blanco);
}

.ccv-cerrado {
  padding: 1.1rem 1.35rem;
  border-left: 4px solid var(--ccv-rojo);
  border-radius: 4px;
  background: var(--ccv-fondo);
  color: var(--ccv-negro);
  font-size: 0.9375rem;
  font-weight: 500;
}

/* ---------- Cabecera: reparto del espacio ---------- */

/*
 * El bloque de marca no tenía límite de crecimiento y se comía casi todo el
 * ancho, de modo que el menú de cuenta y el buscador terminaban montados
 * encima del nombre del portal. Se convierte la barra en una fila flexible
 * de verdad: la marca cede espacio y el grupo de la derecha nunca se solapa.
 */
.navbar > .container,
.navbar > .container-fluid {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
}

.region-nav-branding {
  flex: 1 1 auto;
  min-width: 0;
}

.region-nav-branding .block,
.region-nav-branding .navbar-brand {
  max-width: 100%;
  min-width: 0;
}

.navbar-collapse {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.navbar-collapse .region-nav-main,
.navbar-collapse .region-nav-additional {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
}

.navbar-collapse .block {
  margin: 0;
}

.navbar-collapse .navbar-nav {
  flex-direction: row;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

/* El nombre del portal es largo: se le permite partir en dos líneas antes
   de empujar al resto de la barra. */
.site-title {
  max-width: 100%;
  font-size: clamp(0.9rem, 1.35vw, 1.35rem);
  line-height: 1.15;
}

.block-search .form-search,
.block-search input[type="search"],
.block-search input[type="text"] {
  max-width: 190px;
}

@media (max-width: 991px) {
  /* Por debajo del punto de corte de Bootstrap el menú se colapsa y la
     barra pasa a dos filas: ahí sí conviene permitir el salto. */
  .navbar > .container,
  .navbar > .container-fluid {
    flex-wrap: wrap;
  }

  .navbar-collapse {
    flex: 1 1 100%;
  }

  .navbar-collapse .region-nav-main,
  .navbar-collapse .region-nav-additional {
    flex-wrap: wrap;
  }

  .block-search .form-search,
  .block-search input[type="search"],
  .block-search input[type="text"] {
    max-width: 100%;
  }
}

/* ---------- Cabecera: quién cede espacio ---------- */

/*
 * Bootstrap deja la marca y el grupo derecho en `flex: 1 0 auto`, es decir,
 * ambos crecen y ninguno encoge. Con un nombre de portal tan largo la suma
 * supera el contenedor y el bloque de la derecha se sale de la pantalla.
 *
 * Las reglas van con selector de hijo directo para ganarle a Bootstrap sin
 * recurrir a !important.
 */
.navbar > .container > .region-nav-branding,
.navbar > .container-fluid > .region-nav-branding {
  flex: 0 1 auto;
  min-width: 0;
}

.navbar > .container > .navbar-collapse,
.navbar > .container-fluid > .navbar-collapse {
  flex: 0 0 auto;
  min-width: 0;
}

/* Para que la marca pueda encoger de verdad, cada capa intermedia necesita
   permitir el desbordamiento del contenido. */
.navbar .region-nav-branding > .block,
.navbar .navbar-brand,
.navbar .navbar-brand > * {
  min-width: 0;
  max-width: 100%;
}

.navbar .site-title {
  display: block;
  max-width: 100%;
  /* Se corta solo entre palabras: 'anywhere' partía «CONVENCIONES» a la
     mitad y quedaba ilegible. */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

@media (min-width: 992px) {
  /* En escritorio el nombre puede ocupar dos líneas antes que empujar al
     buscador fuera de la pantalla. */
  .navbar .site-title {
    font-size: clamp(0.85rem, 1.15vw, 1.25rem);
  }
}

/* ---------- Área táctil mínima ---------- */

/*
 * WCAG 2.2 pide un objetivo de al menos 24×24 px. Los enlaces de la miga de
 * pan y del pie quedaban en 21 px de alto, incómodos de tocar en el móvil.
 */
.breadcrumb a,
.breadcrumb li,
footer a,
.region-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

@media (max-width: 768px) {
  .breadcrumb a,
  footer a,
  .region-footer a {
    min-height: 28px;
    padding-block: 0.15rem;
  }
}

/* ---------- Campos de formulario en pantallas estrechas ---------- */

/*
 * Los campos de subida de archivo traen un ancho intrínseco del navegador
 * (más de 400 px) que se sale del viewport en móvil.
 */
input[type="file"],
.js-form-file,
.form-file {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

input,
select,
textarea {
  max-width: 100%;
}

/* ---------- Encabezado sobre fondo claro ---------- */

/*
 * El logotipo institucional está dibujado para fondo claro: sobre la barra
 * oscura de Bootstrap el texto «PROCOLOMBIA» quedaba apagado y parecía
 * hundido en el fondo. En procolombia.co el encabezado es blanco, así que
 * el portal se alinea con esa referencia.
 */
.navbar {
  background-color: var(--ccv-blanco) !important;
  border-bottom: 3px solid var(--ccv-rojo);
  padding-block: 0.5rem;
}

.navbar .site-title,
.navbar .site-title a,
.navbar .nav-link,
.navbar .navbar-nav .nav-link {
  color: var(--ccv-negro);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .site-title a:hover {
  color: var(--ccv-rojo);
}

.navbar .site-title {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.navbar .navbar-toggler {
  border-color: var(--ccv-borde);
}

.navbar .block-search input[type="search"],
.navbar .block-search input[type="text"] {
  border: 1px solid var(--ccv-borde);
  background: var(--ccv-fondo);
  color: var(--ccv-negro);
}

/* La marca se mantiene en una sola línea mientras quepa, para que la barra
   no crezca innecesariamente. */
.navbar .navbar-brand {
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.25rem;
}

.navbar .navbar-brand img,
.navbar .site-logo img {
  max-height: 40px;
  flex: 0 0 auto;
}

@media (max-width: 991px) {
  .navbar .navbar-brand img,
  .navbar .site-logo img {
    max-height: 32px;
  }

  .navbar .site-title {
    font-size: 0.8125rem;
  }
}

@media (max-width: 575px) {
  .navbar .navbar-brand {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .navbar .site-title {
    font-size: 0.75rem;
    line-height: 1.2;
  }
}

/* ---------- Logo y nombre: quién cede espacio dentro de la marca ---------- */

/*
 * El enlace del logo podía encogerse por debajo del ancho de su propia
 * imagen: la imagen se desbordaba y el nombre del portal se le montaba
 * encima. El logo no cede espacio; el que se adapta es el texto.
 */
.navbar .navbar-brand > .site-logo,
.navbar .navbar-brand > a:has(img) {
  flex: 0 0 auto;
  min-width: auto;
  max-width: none;
  display: inline-flex;
  align-items: center;
}

.navbar .navbar-brand > .site-logo img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* El nombre ocupa lo que quede y parte en líneas si hace falta. */
.navbar .navbar-brand > div:not(.site-logo) {
  flex: 1 1 auto;
  min-width: 0;
}

/* El nombre del portal es muy largo: se escala para caber en dos líneas
   sin partir palabras. */
.navbar .site-title {
  font-size: clamp(0.7rem, 1.5vw, 1.15rem);
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

@media (max-width: 767px) {
  .navbar .site-title {
    font-size: 0.68rem;
    letter-spacing: 0;
  }
}

/* ---------- El nombre del portal en pantallas estrechas ---------- */

/*
 * «Centro de Convenciones Virtual ProColombia» son 42 caracteres. Junto al
 * logotipo no cabe en pantallas pequeñas: se partía en cuatro líneas y la
 * barra crecía hasta ocupar media pantalla. Por debajo de 768 px el
 * logotipo basta para identificar el portal, así que el nombre se reserva
 * para lectores de pantalla.
 */
@media (max-width: 767px) {
  .navbar .site-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (min-width: 768px) {
  .navbar .site-title {
    /* Dos líneas como máximo; si no cabe, se recorta con puntos suspensivos
       en lugar de empujar la barra hacia abajo. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ---------- Banner de la cartelera ---------- */

.ccv-banner {
  position: relative;
  margin-bottom: 2rem;
  border-radius: var(--ccv-radio);
  overflow: hidden;
  background: var(--ccv-fondo);
  /* La imagen es 1202×542: se conserva su proporción para que no se
     deforme, con un mínimo de alto para que el texto siempre quepa. */
  aspect-ratio: 1202 / 542;
  max-height: 420px;
}

.ccv-banner__imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/*
 * Velo oscuro solo en la mitad inferior: la imagen es clara en el centro y
 * sin él el texto blanco resultaba ilegible.
 */
.ccv-banner__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgb(26 26 26 / 0%) 35%,
    rgb(26 26 26 / 55%) 70%,
    rgb(26 26 26 / 80%) 100%
  );
}

.ccv-banner__texto {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.5rem 1.75rem;
}

.ccv-banner__titulo {
  margin: 0;
  max-width: 22ch;
  color: var(--ccv-blanco);
  font-family: Poppins, sans-serif;
  font-size: clamp(1.25rem, 3.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.12;
  text-wrap: balance;
  text-shadow: 0 2px 12px rgb(0 0 0 / 45%);
}

/* Filo de marca, el mismo del encabezado. */
.ccv-banner::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 5px;
  background: var(--ccv-rojo);
}

@media (max-width: 767px) {
  .ccv-banner {
    /* En vertical la imagen apaisada deja el texto muy apretado: se recorta
       a un formato más alto y se enfoca el lado izquierdo, donde está la
       escena principal. */
    aspect-ratio: 3 / 2;
  }

  .ccv-banner__imagen {
    object-position: 30% center;
  }

  .ccv-banner__texto {
    padding: 1rem 1.1rem;
  }

  .ccv-banner__titulo {
    max-width: none;
  }
}

/* ---------- Ventana de bienvenida ---------- */

.ccv-bienvenida {
  font-family: Poppins, sans-serif;
  text-align: center;
  padding: 0.5rem 0.25rem;
}

.ccv-bienvenida__saludo {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ccv-negro);
  overflow-wrap: break-word;
}

.ccv-bienvenida__correo {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  color: var(--ccv-gris);
  overflow-wrap: anywhere;
}

.ccv-bienvenida__acciones {
  display: flex;
  justify-content: center;
}

.ccv-bienvenida__continuar {
  border: none;
  cursor: pointer;
  font-family: inherit;
  min-width: 10rem;
}

.ccv-bienvenida-dialogo .ui-dialog-titlebar {
  background: var(--ccv-rojo);
  border: none;
  border-radius: var(--ccv-radio) var(--ccv-radio) 0 0;
}

.ccv-bienvenida-dialogo .ui-dialog-title {
  color: var(--ccv-blanco);
  font-family: Poppins, sans-serif;
  font-weight: 700;
}

.ccv-bienvenida-dialogo .ui-dialog-titlebar-close {
  color: var(--ccv-blanco);
}

.ccv-bienvenida-dialogo .ui-dialog-content {
  padding: 1.5rem;
}

/* ---------- Ficha del evento ---------- */

.ccv-evento {
  font-family: Poppins, sans-serif;
  max-width: 1140px;
  margin-inline: auto;
}

/* Portada */

.ccv-evento__portada {
  position: relative;
  width: 100%;
  /* Altura fija en lugar de proporción con tope: con `max-height` el
     navegador reducía también el ancho y el banner quedaba a media página. */
  height: clamp(180px, 26vw, 300px);
  border-radius: var(--ccv-radio);
  overflow: hidden;
  margin-bottom: 2rem;
  background: var(--ccv-fondo);
}

.ccv-evento__portada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ccv-evento__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgb(26 26 26 / 0%) 40%,
    rgb(26 26 26 / 70%) 100%
  );
}

.ccv-evento__portada-texto {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.ccv-evento__portada-texto .ccv-etiqueta {
  position: static;
}

.ccv-evento__portada-titulo {
  margin: 0;
  color: var(--ccv-blanco);
  font-size: clamp(0.95rem, 2vw, 1.5rem);
  font-weight: 700;
  text-shadow: 0 2px 10px rgb(0 0 0 / 45%);
}

.ccv-evento__portada::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 4px;
  background: var(--ccv-rojo);
}

/* Dos columnas: la información a la izquierda, la acción a la derecha. */

.ccv-evento__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 2.5rem;
  align-items: start;
}

/* Datos del evento */

.ccv-evento__datos {
  display: grid;
  /* Antes eran cinco columnas de 160px que dejaban «Jue, 13/Ago/2026 -
     08:00» partido en dos líneas. Con la fecha en palabras hace falta más
     sitio, así que se pide el doble y caben dos por fila en escritorio. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.15rem 2rem;
  margin: 0 0 1.5rem;
  padding: 1.35rem 1.5rem;
  background: var(--ccv-fondo);
  border-radius: var(--ccv-radio);
}

.ccv-evento__dato dt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ccv-evento__icono {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #fff;
  color: var(--ccv-rojo);
}

.ccv-evento__icono svg {
  width: 1.125rem;
  height: 1.125rem;
}

.ccv-evento__rotulo {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* El gris del tema no llegaba al 4,5:1 que piden las WCAG para texto
     normal. Este oscurecido mide 5,72:1 sobre el fondo del bloque. */
  color: #55606d;
}

.ccv-evento__dato dd {
  /* Sangrado hasta donde empieza el rótulo —el ancho del icono más su
     separación—, para que el valor cuelgue de él y no del borde. */
  margin: 0.2rem 0 0 2.6rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ccv-negro);
}

/* «jueves 13 de agosto» se escribe en minúscula —así es en español— pero
   abriendo un valor queda desaliñado. Se sube solo la primera letra, sin
   tocar el mes, que sí debe seguir en minúscula. */
.ccv-evento__dato dd::first-letter {
  text-transform: uppercase;
}

/* Cancelado o aplazado: el color no basta para avisar —hay quien no lo
   distingue—, así que el icono de alerta lo acompaña. */
.ccv-evento__dato--aviso .ccv-evento__icono {
  background: #fdecef;
  color: #b3123a;
}

.ccv-evento__dato--aviso dd {
  color: #b3123a;
}

.ccv-evento__lugar {
  margin: 0 0 1.5rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--ccv-azul-pastel);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ccv-gris);
}

.ccv-evento__descripcion {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ccv-negro);
}

.ccv-evento__seccion {
  margin-top: 2rem;
}

.ccv-evento__seccion h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--ccv-borde);
}

/* Bloque de inscripción */

.ccv-evento__inscripcion {
  position: sticky;
  top: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--ccv-borde);
  border-top: 4px solid var(--ccv-rojo);
  border-radius: var(--ccv-radio);
  background: var(--ccv-blanco);
  box-shadow: var(--ccv-sombra);
}

.ccv-evento__inscripcion-titulo {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ccv-negro);
}

.ccv-evento__inscripcion .form-item {
  margin-bottom: 1rem;
}

.ccv-evento__inscripcion label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.ccv-evento__inscripcion input[type="text"],
.ccv-evento__inscripcion input[type="email"],
.ccv-evento__inscripcion input[type="tel"],
.ccv-evento__inscripcion select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--ccv-negro);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9375rem;
}

.ccv-evento__inscripcion .form-submit {
  width: 100%;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 4px;
  background: var(--ccv-rojo);
  color: var(--ccv-blanco);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

.ccv-evento__inscripcion .form-submit:hover {
  background: var(--ccv-rojo-oscuro);
}

.ccv-participar__resumen {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 4px;
  background: var(--ccv-fondo);
}

.ccv-participar__quien {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ccv-negro);
  overflow-wrap: anywhere;
}

@media (max-width: 991px) {
  .ccv-evento__cuerpo {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .ccv-evento__inscripcion {
    position: static;
  }
}

@media (max-width: 767px) {
  .ccv-evento__portada {
    height: 190px;
  }

  .ccv-evento__datos {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    padding: 1.1rem;
  }

  .ccv-evento__inscripcion {
    padding: 1.15rem;
  }
}

/* ---------- Pie de página ---------- */

/*
 * Réplica del pie de procolombia.co: franja clara con los logotipos
 * institucionales y, debajo, tres columnas sobre gris.
 */

.ccv-pie {
  margin-top: 3rem;
  font-family: Poppins, sans-serif;
}

.ccv-pie__marcas {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: #dedede;
}

.ccv-pie__marcas img {
  max-width: 100%;
  height: auto;
  max-height: 96px;
}

.ccv-pie__columnas {
  background: #656565;
  color: var(--ccv-blanco);
  padding: 3rem 1.5rem;
}

.ccv-pie__interior {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
  max-width: 1140px;
  margin-inline: auto;
}

.ccv-pie__titulo {
  margin: 0 0 1.1rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ccv-blanco);
}

.ccv-pie__direccion {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #e6e6e6;
}

.ccv-pie__direccion a {
  color: #e6e6e6;
  text-decoration: none;
}

.ccv-pie__direccion a:hover,
.ccv-pie__direccion a:focus {
  color: var(--ccv-blanco);
  text-decoration: underline;
}

.ccv-pie__lista {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ccv-pie__lista a {
  color: #e6e6e6;
  font-size: 0.875rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.ccv-pie__lista a:hover,
.ccv-pie__lista a:focus {
  color: var(--ccv-blanco);
  text-decoration: underline;
}

.ccv-pie__redes {
  display: flex;
  gap: 1.25rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.ccv-pie__redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  opacity: 0.9;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.ccv-pie__redes a:hover,
.ccv-pie__redes a:focus {
  opacity: 1;
  transform: translateY(-2px);
}

.ccv-pie__redes img {
  width: 22px;
  height: 22px;
}

/* El menú que se administre desde Drupal hereda el mismo aspecto. */
.ccv-pie__bloque--drupal a {
  color: #e6e6e6;
  font-size: 0.875rem;
  text-decoration: none;
}

.ccv-pie__bloque--drupal a:hover {
  color: var(--ccv-blanco);
  text-decoration: underline;
}

.ccv-pie__legal {
  background: var(--ccv-negro);
  padding: 1rem;
}

.ccv-pie__copyright {
  max-width: 1140px;
  margin: 0 auto;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #d9d9d9;
}

.ccv-pie__copyright a {
  color: var(--ccv-blanco);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .ccv-pie__columnas {
    padding: 2rem 1.25rem;
  }

  .ccv-pie__interior {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .ccv-pie__marcas {
    padding: 1.5rem 1rem;
  }

  .ccv-pie__marcas img {
    max-height: 68px;
  }
}

/* ---------- Correo destacado y aviso de Teams ---------- */

/*
 * El correo se resalta porque es el dato con el que hay que identificarse
 * en Teams: entrar con otro deja a la persona fuera del reporte de
 * asistencia del evento.
 */
.ccv-participar__correo {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--ccv-rojo);
  border-radius: 4px;
  background: var(--ccv-blanco);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ccv-rojo);
  overflow-wrap: anywhere;
}

.ccv-participar-aviso {
  font-family: Poppins, sans-serif;
  padding: 0.25rem;
}

.ccv-participar-aviso__texto {
  margin: 0 0 0.85rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ccv-negro);
}

.ccv-participar-aviso__correo {
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--ccv-rojo);
  border-radius: 4px;
  background: var(--ccv-fondo);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ccv-rojo);
  overflow-wrap: anywhere;
  text-align: center;
}

.ccv-participar-aviso__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.ccv-participar-aviso__ir {
  border: none;
  cursor: pointer;
  font-family: inherit;
  flex: 1 1 auto;
  min-width: 12rem;
}

.ccv-participar-aviso__cancelar {
  padding: 0.6rem 1.35rem;
  border: 1px solid var(--ccv-borde);
  border-radius: 4px;
  background: transparent;
  color: var(--ccv-gris);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.ccv-participar-aviso__cancelar:hover {
  border-color: var(--ccv-gris);
  color: var(--ccv-negro);
}

.ccv-participar-dialogo .ui-dialog-titlebar {
  background: var(--ccv-rojo);
  border: none;
  border-radius: var(--ccv-radio) var(--ccv-radio) 0 0;
}

.ccv-participar-dialogo .ui-dialog-title,
.ccv-participar-dialogo .ui-dialog-titlebar-close {
  color: var(--ccv-blanco);
  font-family: Poppins, sans-serif;
  font-weight: 700;
}

.ccv-participar-dialogo .ui-dialog-content {
  padding: 1.5rem;
}

/* ---------- Banner a todo el ancho, pegado al menú ---------- */

/*
 * El banner encabeza la portada: va de borde a borde y pegado a la barra
 * superior. Antes quedaba dentro del contenedor, a media página y separado
 * del menú por el margen del contenido.
 */
.ccv-banner {
  /* Rompe el contenedor para ocupar todo el ancho de la ventana. */
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 2.5rem;
  border-radius: 0;
  /* Altura fija: con proporción y tope de altura el navegador reducía
     también el ancho. */
  height: clamp(200px, 30vw, 420px);
  aspect-ratio: auto;
}

.ccv-banner__texto {
  /* El texto se alinea con el resto del contenido, no con el borde. */
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/*
 * El margen superior lo pone la región de contenido del tema (130px). En la
 * portada estorba: el banner debe arrancar justo debajo del menú.
 */
main:has(.ccv-banner) .region-content {
  margin-top: 0 !important;
}

.view-cartelera-webinars {
  margin-top: 0;
}

/* La miga de pan sobra en la portada: es el propio inicio. */
main:has(.ccv-banner) .breadcrumb,
main:has(.ccv-banner) nav[aria-labelledby="system-breadcrumb"] {
  display: none;
}

@media (max-width: 767px) {
  .ccv-banner {
    height: 220px;
    margin-bottom: 1.75rem;
  }

  .ccv-banner__texto {
    padding-inline: 1.1rem;
  }
}

/* Imagen del eje temático en la tarjeta. */
.ccv-tarjeta__imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Salidas del formulario de participación: clave olvidada y registro. */
.ccv-ayudas {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid #e3e4e8;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5;
}

.ccv-ayudas__enlace {
  /* En bloque con altura mínima: son la salida de quien no puede entrar, y
     en móvil quedaban por debajo del área que un dedo acierta con fiabilidad. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0.5rem;
  color: #a91b40;
  font-weight: 600;
  text-decoration: underline;
}

.ccv-ayudas__enlace:hover,
.ccv-ayudas__enlace:focus {
  color: #7d1430;
}

.ccv-ayudas p {
  margin: 0.55rem 0 0;
  color: #55565a;
}

/* La nota de formato quedaba pegada al campo y se leía como parte de él. */
.ccv-evento__inscripcion .form-item .description,
.ccv-evento__inscripcion .form-item__description {
  margin-top: 10px;
  line-height: 1.45;
}

/* Aviso modal de credenciales incorrectas. */
.ccv-credenciales__mensaje {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1b1b1d;
}

.ccv-credenciales__pista {
  margin: 0 0 1.25rem;
  color: #55565a;
  line-height: 1.5;
}

.ccv-credenciales__acciones {
  display: flex;
  justify-content: flex-end;
}

.ccv-credenciales__cerrar {
  min-height: 44px;
}

.ccv-credenciales__acciones {
  gap: 1rem;
  align-items: center;
}

.ccv-credenciales__recuperar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
  color: #a91b40;
  font-weight: 600;
  text-decoration: underline;
}

.ccv-credenciales__recuperar:hover,
.ccv-credenciales__recuperar:focus {
  color: #7d1430;
}

/* Caja de participación cuando no hay sesión iniciada. */
.ccv-entrar {
  text-align: center;
}

.ccv-entrar__texto {
  margin: 0 0 1rem;
  color: #55565a;
  line-height: 1.5;
}

.ccv-entrar__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  background: #a91b40;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.ccv-entrar__boton:hover,
.ccv-entrar__boton:focus {
  background: #7d1430;
  color: #fff;
}


/* En pantallas estrechas cada filtro ocupa su propia línea y el botón se
   extiende: en un teléfono, tres elementos en fila quedan inservibles. */
@media (max-width: 48rem) {
  .view-cartelera-webinars .view-filters .form-item,
  .view-cartelera-webinars .view-filters .js-form-type-select {
    flex: 1 1 100%;
  }

  .view-cartelera-webinars .view-filters .form-actions {
    flex: 1 1 100%;
    margin-top: 0.25rem;
  }

  .view-cartelera-webinars .view-filters .form-actions input[type="submit"] {
    width: 100%;
  }
}

/* Título de la ficha del evento, debajo del banner. */
.ccv-evento__titulo {
  margin: 1.75rem 0 1.5rem;
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ccv-negro);
}

@media (max-width: 48rem) {
  .ccv-evento__titulo {
    margin: 1.25rem 0 1rem;
  }
}

/* En la ficha del evento el banner sube hasta el menú. La región de
   contenido reserva 130px para las migas y el título, que aquí están
   ocultos; sin anular ese margen quedaba un hueco vacío. Se anula el
   margen en lugar de tirar del bloque con un valor negativo: la cabecera
   cambia de altura entre anchos y el banner acabaría tapándola. */
body.ccv-ficha-evento .region-content {
  /* El !important responde a otro igual: style.css del tema heredado fija
     ese margen con !important dentro de una media query, y sin repetirlo
     aquí la especificidad no basta. */
  margin-top: 0 !important;
}

body.ccv-ficha-evento .ccv-evento__portada {
  margin-top: 0;
}

/* «ccv-calendario__abrir» es solo el enganche del JavaScript y no lleva
   apariencia: la presentación la dan «ccv-agendar» y sus variantes. */

/* En la ficha el botón va algo más grande, que hay sitio de sobra. */
.ccv-agendar--ficha {
  margin: 0.25rem 0 1.5rem;
  font-size: 0.9375rem;
}

.ccv-agendar--ficha .ccv-agendar__icono {
  width: 38px;
  height: 38px;
}

/* Ventana con los cuatro destinos, en rejilla de dos por dos. */
.ccv-calendario__opciones {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.ccv-calendario__opcion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.1rem 0.75rem;
  border: 1px solid #d3d4d9;
  border-radius: 6px;
  color: #1b1b1d;
  text-align: center;
  text-decoration: none;
}

.ccv-calendario__opcion:hover,
.ccv-calendario__opcion:focus {
  border-color: var(--ccv-rojo);
  background: #fdf3f6;
  color: #1b1b1d;
}

.ccv-calendario__nombre {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.ccv-calendario__aviso {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid #e3e4e8;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #55565a;
}

@media (max-width: 30rem) {
  .ccv-calendario__opciones {
    grid-template-columns: 1fr;
  }

  .ccv-calendario__opcion {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
  }
}

/* Botón de agendar dentro de la tarjeta, junto al de inscripción. */
.ccv-tarjeta__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

/* Agendar, debajo de la fecha de la tarjeta. El rótulo está siempre a la
   vista: como no es la acción principal, un icono solo obligaba a pasar el
   cursor para saber qué hacía. */
.ccv-agendar {
  display: inline-flex;
  align-items: center;
  /* El cuerpo de la tarjeta es una columna flexible y estira a sus hijos:
     sin esto el botón ocupaba todo el ancho disponible. */
  align-self: flex-start;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ccv-rojo);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.ccv-agendar__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Circulito fijo: sin ancho propio el icono se comprime cuando el rótulo
     se parte en dos líneas. */
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ccv-rojo);
  border-radius: 50%;
}

.ccv-agendar__rotulo {
  text-decoration: underline;
}

.ccv-agendar:hover .ccv-agendar__icono,
.ccv-agendar:focus-visible .ccv-agendar__icono {
  background: var(--ccv-rojo);
  color: var(--ccv-blanco);
}

.ccv-agendar:hover,
.ccv-agendar:focus-visible {
  color: var(--ccv-rojo-oscuro);
}

}

/* Aviso de que el acceso al evento todavía no está abierto. */
.ccv-acceso-pendiente {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border-left: 3px solid var(--ccv-rojo);
  background: #fdf3f6;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #55565a;
}

/* Botón de participar mientras el acceso todavía no se abre.
   Se cualifica con el elemento y con .btn para ganarle a .btn-primary de
   Bootstrap, que tiene la misma especificidad y se carga después. */
input.ccv-participar__boton--inactivo.btn,
input.ccv-participar__boton--inactivo.btn:hover,
input.ccv-participar__boton--inactivo.btn:focus,
.ccv-participar__boton--inactivo,
.ccv-participar__boton--inactivo:hover,
.ccv-participar__boton--inactivo:focus {
  border-color: #c6c7cc;
  background: #e3e4e8;
  color: #767780;
  box-shadow: none;
  cursor: not-allowed;
}

/* Fecha y hora de Colombia, bajo los cupos.
   En dos líneas y con un icono de reloj: en una sola, el rótulo y el dato
   se leían como una frase corrida y la hora se perdía dentro. */
.ccv-hora-servidor {
  display: block;
  margin: 0 0 1.1rem;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid #8e929c;
  background: #f2f2f4;
  line-height: 1.4;
}

.ccv-hora-servidor__rotulo {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #55565a;
}

.ccv-hora-servidor__valor {
  display: block;
  margin-top: 0.15rem;
  font-size: 1rem;
  font-weight: 700;
  color: #1b1b1d;
}

/* -------------------------------------------------------------------------
   Texto largo sin espacios en la ficha del evento
   -------------------------------------------------------------------------
   Una palabra sin cortes —o una dirección web pegada en la descripción, que
   es lo que suele pasar— se sale de su caja y empuja la maquetación. Se le
   permite partir donde haga falta antes que desbordar.
   ------------------------------------------------------------------------- */

.ccv-evento__descripcion,
.ccv-evento__descripcion p,
.ccv-evento__seccion p,
.ccv-evento__seccion li {
  overflow-wrap: anywhere;
}

/* El enlace que envuelve la imagen de la tarjeta no debe alterar la caja:
   sin esto, al ser en línea, dejaba un hueco bajo la foto. */
.ccv-tarjeta__enlace-medio {
  display: block;
  line-height: 0;
}