:root{
  /* Paleta institucional suave (puedes ajustar) */
  --brand-700:#0B3D91;
  --brand-600:#0D4AA6;
  --brand-50:#EEF4FF;

  --text-900:#111827;
  --text-600:#4B5563;
  --border-200:#E5E7EB;
  --card:#FFFFFF;
  --shadow: 0 10px 30px rgba(17,24,39,.08);
}

/* Cabecera / título */
.offer-hero{
  background: linear-gradient(180deg, var(--brand-50), #fff 60%);
  border: 1px solid var(--border-200);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 18px 18px;
  margin-bottom: 16px;
}

.offer-hero h1, .offer-hero h2, .offer-hero .h1{
  color: var(--text-900);
  margin-bottom: 6px;
}

.offer-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  color: var(--text-600);
  font-size: .95rem;
}

.badge-soft{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--brand-50);
  border: 1px solid rgba(11,61,145,.12);
  color: var(--brand-700);
  font-weight: 600;
}

/* La barra de Vigencia es una FRASE larga, no un chip corto: con inline-flex
   cada fragmento de texto se vuelve un item rigido y al ampliar la letra se
   reparte en columnas con huecos (se veia peor que la version anterior). Fluye
   como texto normal (inline-block) y envuelve conservando el look de pastilla. */
.badge-soft.offer-vigencia{
  display: inline-block;
  align-items: initial;
  gap: 0;
  line-height: 1.6;
  white-space: normal;
}

/* Que cada fecha/hora no se parta a mitad ("11:59" arriba y "PM" abajo): el
   valor entero salta junto a la linea siguiente. El texto envuelve solo en los
   espacios entre frases. */
.badge-soft.offer-vigencia #vig-desde,
.badge-soft.offer-vigencia #vig-hasta,
.badge-soft.offer-vigencia #hora-cierre{
  white-space: nowrap;
}

/* Cards / secciones */
.offer-card{
  background: var(--card);
  border: 1px solid var(--border-200);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 16px;
}

.offer-card .card-title{
  color: var(--text-900);
  font-weight: 700;
  margin-bottom: 10px;
}

.offer-card .muted{
  color: var(--text-600);
}



/* Redes */
.share-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border: 1px solid var(--border-200);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
  margin: 14px 0 18px;
}
.share-label{
  color: var(--text-600);
  font-weight: 600;
}
.share-buttons{
  display:flex;
  gap:10px;
}

.share-btn{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border: 1px solid rgba(11,61,145,.18);
  background: var(--brand-50);
  color: var(--brand-700);
  transition: transform .12s ease, background .12s ease;
}
.share-btn:hover{
  transform: translateY(-1px);
  background: #fff;
}
.share-btn .fa{
  font-size: 18px;
}

/* Variantes sutiles */
.share-fb{ }
.share-x{ }
.share-in{ }
.share-wa{ border-color: rgba(16,185,129,.25); background: rgba(16,185,129,.10); color:#047857; }

/* HU58536 — Detalle de oferta al ampliar la letra (Bug60310/60334): evitar el
   overflow horizontal de la columna derecha, que el overflow-x:hidden global
   recorta contra el borde de la tarjeta. La URL larga de "Mas informacion" parte
   palabra y el bloque Compartir envuelve sus botones. Seguras tambien al 100%
   (a esa escala ya caben, asi que no cambian la vista actual). */
#offerer_website{
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.share-wrap{
  flex-wrap: wrap;
}
.share-buttons{
  flex-wrap: wrap;
}

/* Contenido largo (CKEditor) */
.offer-rich p, .offer-rich li{
  color: var(--text-600);
  line-height: 1.6;
}
.offer-rich h1, .offer-rich h2, .offer-rich h3{
  color: var(--text-900);
}
.offer-rich a{
  color: var(--brand-600);
}
.offer-rich a:hover{
  color: var(--brand-700);
}