/* Encabezado: título + filtros con líneas a 100vw */
.ofer-wrap {
  --ofer-radius: 14px;
}
.ofer-head {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  isolation: isolate;
  padding: 12px 0; /* espacio para las líneas */
}
.ofer-head::before,
.ofer-head::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: #e5edf4;
  pointer-events: none;
}
.ofer-head::before {
  top: 0;
}
.ofer-head::after {
  bottom: 0;
}

.ofer-title {
  margin: 0 12px 0 0;
  font-size: 28px;
  line-height: 1.25;
  color: #163e64;
  font-weight: 800;
}

/* Filtros */
.ofer-filtros {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin: 12px 0 16px;
}
/* En el encabezado, empujar filtros a la derecha */
.ofer-head .ofer-filtros {
  margin: 0 0 0 auto;
}

/* Botón Reset de filtros */
.ofer-reset {
  border: 1px solid #163e64;
  background: transparent;
  color: #163e64;
  border-radius: 24px;
  padding: 10px 16px;
  font: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ofer-reset:hover {
  background: #f56600;
  border-color: #f56600;
  color: #fff;
}
.ofer-reset[hidden] { display: none !important; }

.ofer-select select {
  /* Ocultamos el select nativo pero lo mantenemos accesible para la lógica */
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
}
.ofer-select {
  position: relative;
}
.ofer-trigger::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-right: 2px solid #fff; /* flecha blanca */
  border-bottom: 2px solid #fff;
  pointer-events: none;
  opacity: 0.9;
}
.ofer-select.is-open .ofer-trigger::after {
  transform: translateY(-50%) rotate(-135deg); /* rota al abrir */
}

/* Estado activo cuando hay un valor seleccionado */
.ofer-select.has-value .ofer-trigger {
  background: #f56600;
  border-color: #f56600;
  color: #fff;
}

/* Trigger del dropdown (botón visible) */
.ofer-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #163e64;
  border-radius: 24px;
  padding: 10px 38px 10px 14px;
  min-width: 180px;
  background: #163e64; /* azul corporativo por defecto */
  color: #fff;
  font: inherit;
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.ofer-trigger:hover,
.ofer-select.is-open .ofer-trigger {
  background: #f56600; /* hover/activo naranja */
  border-color: #f56600;
}

/* Panel del dropdown */
.ofer-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 250px; /* igual al otro plugin */
  overflow: visible; /* el scroll vive dentro */
  background: #163e64; /* fondo azul */
  color: #fff;
  border-radius: 20px; /* radio como pmap */
  box-shadow: 0 12px 28px rgba(15, 46, 79, 0.35);
  padding: 8px 16px 8px 8px; /* más espacio a la derecha para scrollbar */
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
/* Máscaras para ocultar flechas/residuos del scrollbar en extremos (WebKit) */
.ofer-panel::before,
.ofer-panel::after {
  content: "";
  position: absolute;
  right: 8px; /* alineado con el padding-right interno */
  width: 14px;
  height: 12px;
  background: #163e64; /* mismo color del panel */
  pointer-events: none;
  z-index: 1;
}
.ofer-panel::before {
  top: 8px;
  border-top-right-radius: 12px;
}
.ofer-panel::after {
  bottom: 8px;
  border-bottom-right-radius: 12px;
}
.ofer-select.is-open .ofer-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Contenedor desplazable interno y scrollbar como pmap */
.ofer-scroll {
  max-height: 304px;
  overflow-y: auto;
  overflow-x: hidden; /* evita esquina y barra horizontal */
  padding: 10px 0; /* separación arriba/abajo para que la barra no toque extremos */
  scrollbar-gutter: stable; /* reservar espacio, evitar overlay */
  position: relative; /* para colocar máscaras internas */
}
.ofer-scroll::-webkit-scrollbar {
  width: 8px;
  background: #163e64; /* color base para evitar piezas visibles */
}
.ofer-scroll::-webkit-scrollbar-track {
  background: #163e64; /* mismo azul del panel */
  margin: 0 3px 0 0; /* sólo separación derecha; sin espacio arriba/abajo */
  border-radius: 6px;
}
.ofer-scroll::-webkit-scrollbar-thumb {
  background: #ffffff; /* pulgar blanco que se mueve */
  border-radius: 6px;
}
/* Máscaras en el contenedor scroll para tapar los extremos del track (WebKit) */
.ofer-scroll::before,
.ofer-scroll::after {
  content: "";
  position: absolute;
  right: 0;
  width: 14px; /* cubre el canal y el margen derecho */
  height: 10px; /* tapa sólo el extremo */
  background: #163e64;
  pointer-events: none;
}
.ofer-scroll::before {
  top: 0;
}
.ofer-scroll::after {
  bottom: 0;
}
/* Asegurar que las piezas del track entre botones usen el mismo color */
.ofer-scroll::-webkit-scrollbar-track-piece {
  background: #163e64;
}
.ofer-scroll::-webkit-scrollbar-track-piece:start {
  background: #163e64;
}
.ofer-scroll::-webkit-scrollbar-track-piece:end {
  background: #163e64;
}
/* Ocultar botones/controles de la scrollbar (arriba/abajo) en WebKit */
.ofer-scroll::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: #163e64 !important;
  background-image: none !important;
  color: transparent !important;
  border: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  opacity: 0 !important;
}
/* Forzar ocultado en vertical/horizontal y en todos los estados */
.ofer-scroll::-webkit-scrollbar-button:vertical,
.ofer-scroll::-webkit-scrollbar-button:horizontal,
.ofer-scroll::-webkit-scrollbar-button:vertical:start:decrement,
.ofer-scroll::-webkit-scrollbar-button:vertical:end:increment,
.ofer-scroll::-webkit-scrollbar-button:horizontal:start:decrement,
.ofer-scroll::-webkit-scrollbar-button:horizontal:end:increment,
.ofer-scroll::-webkit-scrollbar-button:vertical:increment,
.ofer-scroll::-webkit-scrollbar-button:vertical:decrement {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: #163e64 !important;
  border: none !important;
  opacity: 0 !important;
}
/* Ocultar variantes conocidas de botones WebKit */
.ofer-scroll::-webkit-scrollbar-button:single-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: #163e64 !important;
  background-image: none !important;
  color: transparent !important;
  border: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  opacity: 0 !important;
}
.ofer-scroll::-webkit-scrollbar-button:start:decrement,
.ofer-scroll::-webkit-scrollbar-button:end:increment,
.ofer-scroll::-webkit-scrollbar-button:vertical:start:decrement,
.ofer-scroll::-webkit-scrollbar-button:vertical:end:increment,
.ofer-scroll::-webkit-scrollbar-button:horizontal:start:decrement,
.ofer-scroll::-webkit-scrollbar-button:horizontal:end:increment,
.ofer-scroll::-webkit-scrollbar-button:decrement,
.ofer-scroll::-webkit-scrollbar-button:increment,
.ofer-scroll::-webkit-scrollbar-button:active,
.ofer-scroll::-webkit-scrollbar-button:hover {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border: none !important;
}
.ofer-scroll::-webkit-scrollbar-button:single-button:start:decrement,
.ofer-scroll::-webkit-scrollbar-button:single-button:end:increment,
.ofer-scroll::-webkit-scrollbar-button:single-button:vertical:start:decrement,
.ofer-scroll::-webkit-scrollbar-button:single-button:vertical:end:increment,
.ofer-scroll::-webkit-scrollbar-button:single-button:horizontal:start:decrement,
.ofer-scroll::-webkit-scrollbar-button:single-button:horizontal:end:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: #163e64 !important;
  border: none !important;
  opacity: 0 !important;
}
.ofer-scroll::-webkit-scrollbar-corner {
  background: #163e64;
}
/* Firefox */
.ofer-scroll {
  scrollbar-width: thin;
  scrollbar-color: #ffffff #163e64;
}

/* Item opción (sin mostrar radios) */
.ofer-option {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.ofer-option:hover {
  background: rgba(255, 255, 255, 0.12);
}
.ofer-option .ofer-option-label {
  color: #fff;
}
/* opción seleccionada (resaltado sutil como pmap) */
.ofer-option.is-current {
  background: rgba(255, 255, 255, 0.18);
}
.ofer-option.is-child {
  margin-left: 20px;
}
.ofer-trigger:focus {
  background-color: #f56600;
}

/* Separadores por grupos (optgroup) */
.ofer-group {
  color: #fff;
  font-weight: 300;
  padding: 8px 10px 4px;
  opacity: 0.95;
}

/* Disposición móvil: dos columnas y botones a ancho completo */
@media (max-width: 767px) {
  .ofer-filtros {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .ofer-filtros .ofer-select {
    width: 100%;
  }
  .ofer-filtros .ofer-trigger {
    width: 100%;
    min-width: 0;
  }
  .ofer-filtros .ofer-reset {
    width: 100%;
  }
  /* Panel fijo a ancho completo menos 40px, alineado al botón */
  .ofer-panel {
    position: fixed;
    top: var(--ofer-dd-top, 72px);
    width: calc(100vw - 40px);
    left: 50%;
    right: auto;
    padding-left: 20px;
    padding-right: 20px;
    transform: translate(-50%, -6px);
  }
  .ofer-select.is-open .ofer-panel {
    transform: translate(-50%, 0);
  }
}

/* Grid 3/2/1 columnas */
.ofer-lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 40px;
}
@media (max-width: 1024px) {
  .ofer-lista {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .ofer-lista {
    grid-template-columns: 1fr;
  }
}

/* Tarjeta */
.ofer-card {
  background: #fff;
  border: 1px solid #163e64;
  border-radius: 12px;
  padding: 0; /* padding se aplica al enlace para que todo sea clicable */
}
.ofer-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  width: 100%;
  height: 100%;
  cursor: pointer;
  outline: none;
  padding: 20px; /* ahora todo el área con padding es clicable */
}
.ofer-card {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ofer-card:hover {
  border-color: #f56600;
  box-shadow: 0 8px 18px rgba(15, 46, 79, 0.12);
}
.ofer-card-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(245, 102, 0, 0.35);
  border-radius: 10px; /* ligeramente menor que la tarjeta para el overlay */
}
.ofer-card-title {
  font-size: 24px;
  font-weight: 700;
  color: #091a2a;
  margin: 0 0 8px;
}
.ofer-card-meta {
  color: #091a2a;
  font-size: 16px;
  margin-bottom: 6px;
}
.ofer-geo {
  color: #f56600;
  font-size: 16px;
  margin-bottom: 10px;
}
.ofer-geo .ofer-meta-sep {
  margin: 0 6px;
  color: #f56600;
  opacity: 1;
}
.ofer-card-actions {
  margin-top: 6px;
}
.ofer-link {
  color: #163e64;
  font-size: 18px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ofer-link:hover {
  text-decoration: underline;
}
.ofer-link-icon img {
  display: block;
  width: 32px;
}