#livepro-widget-root {
  --livepro-width-desktop: 392px;
  --livepro-width-mobile: calc(100vw - 24px);
  --livepro-offset-x: 16px;
  --livepro-offset-y: 16px;
  position: fixed;
  z-index: 9999999;
  font-family: "Inter", "Segoe UI", sans-serif;
}

#livepro-widget-root * {
  margin: 0;
  box-sizing: border-box;
  font-family: 'lato', sans-serif;
}

#livepro-widget-root[data-horizontal="left"] {
  left: var(--livepro-offset-x);
}

#livepro-widget-root[data-horizontal="right"] {
  right: var(--livepro-offset-x);
}

#livepro-widget-root[data-vertical="top"] {
  top: var(--livepro-offset-y);
}

#livepro-widget-root[data-vertical="bottom"] {
  bottom: var(--livepro-offset-y);
}

.livepro-mini,
.livepro-shell {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 48px rgba(8, 15, 31, 0.34);
  isolation: isolate;
}

.livepro-mini::before,
.livepro-shell::before,
.livepro-gallery__viewport::before {
  content: "";
  display: block;
}

.livepro-mini {
  width: clamp(132px, calc(var(--livepro-width-desktop) * 0.37), 164px);
  padding: 0;
  color: #fff;
  cursor: pointer;
  background: #435046;
}

.livepro-mini::before {
  padding-top: 161.2903%;
}

#livepro-widget-root[data-orientation="horizontal"] .livepro-mini {
  width: clamp(180px, calc(var(--livepro-width-desktop) * 0.52), 250px);
}

#livepro-widget-root[data-orientation="horizontal"] .livepro-mini::before {
  padding-top: 86.2069%;
}

.livepro-mini__bg,
.livepro-shell__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.livepro-mini__iframe {
  pointer-events: none;
}

.livepro-mini__overlay,
.livepro-shell__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.livepro-shell__interaction-blocker {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  background: transparent;
  pointer-events: auto;
}

.livepro-mini__top,
.livepro-shell__topbar {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  z-index: 6;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.livepro-mini__top {
  justify-content: flex-start;
}

.livepro-mini__center {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
}

.livepro-mini__play {
  display: inline-flex;
  width: 70px;
  height: 70px;
  color: rgba(255, 255, 255, 0.48);
  filter: drop-shadow(0 12px 28px rgba(9, 14, 25, 0.28));
}

.livepro-mini__play svg {
  width: 100%;
  height: 100%;
}

.livepro-mini__cta {
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

.livepro-mini__hit {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.livepro-mini--live {
  background: #12171c;
}

.livepro-mini--live .livepro-mini__overlay {
  background: linear-gradient(180deg, rgba(7, 10, 15, 0.22) 0%, rgba(7, 10, 15, 0.04) 42%, rgba(7, 10, 15, 0.36) 100%);
}

.livepro-mini__live-indicator {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(6, 10, 18, 0.42);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
}

.livepro-mini__live-indicator::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid rgba(255, 255, 255, 0.92);
  transform: translate(-35%, -50%);
}

.livepro-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* (Acá había un `.livepro-pill + .livepro-pill { margin-left }` que nunca hizo nada:
   `#livepro-widget-root * { margin: 0 }`, con ID, le gana a cualquier margen por clase. La
   separación entre pastillas va con `gap` en el contenedor —`.livepro-shell__status`, y
   `.livepro-mini__top`, que ya lo trae—.) */

.livepro-pill--mini {
  min-height: 24px;
  padding: 0 10px;
  font-size: 10px;
}

.livepro-pill--live {
  background: #ec3028;
  color: #fff;
  box-shadow: 0 10px 20px rgba(236, 48, 40, 0.2);
}

.livepro-pill--ghost {
  background: rgba(32, 40, 45, 0.72);
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
}

.livepro-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.livepro-pill svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

.livepro-shell {
  width: min(var(--livepro-width-desktop), calc(100vw - 24px));
  background: #485449;
  opacity: 0;
  transform: translateY(16px) scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.livepro-shell::before {
  padding-top: 188.8889%;
}

#livepro-widget-root[data-orientation="horizontal"] .livepro-shell::before {
  padding-top: 98.0392%;
}

.livepro-shell.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.livepro-shell.is-closing {
  opacity: 0;
  transform: translateY(16px) scale(0.95);
}

.livepro-shell__media {
  position: absolute;
  inset: 0;
}

.livepro-shell__status {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
}

/* Los cuatro botones en una sola cápsula.
   Sueltos eran cuatro círculos flotando sobre el video, cada uno con su propio fondo
   traslúcido: cuatro manchas oscuras en vez de un control. Juntos se leen como una
   barra de reproductor, que es lo que son, y ocupan menos. */
.livepro-shell__actions {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  border-radius: 999px;
  background: rgba(28, 34, 40, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
}

/* Adentro de la cápsula el botón pierde su fondo: dos fondos superpuestos dan una
   mancha más oscura por botón, que es justo lo que se quería sacar. */
.livepro-shell__actions .livepro-icon-btn {
  width: 38px;
  height: 38px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  /* Todos blancos, incluido el carrito.
     El carrito traía color configurable por la tienda, pensado para cuando era un botón
     suelto con su propio fondo. Adentro de la cápsula ese color queda sobre un fondo
     oscuro que no eligió nadie: con la configuración por defecto el ícono desaparecía. */
  color: #fff;
}

.livepro-shell__actions .livepro-icon-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* Separadores finos entre botones, como en un reproductor.
   Van como pseudo-elemento y no con `box-shadow: inset`: el botón es redondo, así que la
   sombra interior seguía el borde y dibujaba un arco en vez de una línea. */
.livepro-shell__actions .livepro-icon-btn {
  position: relative;
}

.livepro-shell__actions .livepro-icon-btn + .livepro-icon-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

.livepro-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(38, 46, 50, 0.66);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
}

.livepro-icon-btn:hover {
  transform: translateY(-1px);
  background: rgba(33, 40, 44, 0.8);
}

.livepro-icon-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.livepro-shell__dock-host {
  position: absolute;
  right: 0;
  left: 0;
  /* Deja lugar abajo para la pastilla de la firma; el video, el cupón y la barra de
     arriba no se movieron. */
  bottom: 40px;
  z-index: 5;
  overflow: hidden;
}

/* La firma en el vivo: la misma pastilla con logo que en la cuenta regresiva (ver
   `.livepro-agenda-mini__firma`, que comparte estilos). Al pie y centrada es el único lugar
   que no tapa ni la mercadería ni la cara de quien transmite. */
.livepro-product-dock {
  width: 100%;
}

.livepro-product-dock__viewport {
  --livepro-dock-gap: 10px;
  --livepro-dock-track-padding-inline: 16px;
  overflow: hidden;
}

.livepro-product-dock__track {
  display: flex;
  align-items: stretch;
  gap: var(--livepro-dock-gap);
  will-change: transform;
  padding: 0 var(--livepro-dock-track-padding-inline);
}

.livepro-product-dock.is-transitioning .livepro-product-dock__track {
  pointer-events: none;
}

.livepro-product-dock__slide {
  flex: 0 0 90%;
  width: 90%;
  min-width: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.livepro-product-dock--collapsed .livepro-product-dock__slide {
  flex-basis: 100%;
  width: 100%;
}

.livepro-product-dock__card {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  grid-template-rows: auto;
  gap: 11px;
  padding: 12px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.94);
  color: #18263f;
  box-shadow: 0 16px 34px rgba(10, 17, 33, 0.26);
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.livepro-product-dock__card--collapsed {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 50px;
  max-height: 50px;
  padding: 0 12px;
  border-radius: 13px;
  box-shadow: 0 12px 24px rgba(10, 17, 33, 0.18);
  overflow: hidden;
}

.livepro-product-dock__card--active {
  transform: translateY(0);
}

.livepro-product-dock__slide.is-inactive .livepro-product-dock__card {
  opacity: 0.98;
  box-shadow: 0 12px 26px rgba(10, 17, 33, 0.18);
}

.livepro-product-dock__image-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: none;
}

.livepro-product-dock__image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%;
  height: 75%;
  display: block;
  object-fit: cover;
  border-radius: 10px;
  transform: translate(-50%, -50%);
}

.livepro-product-dock__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
}

.livepro-product-dock__body-info {
  width: 100%;
  display: grid;
  gap: 5px;
}

.livepro-product-dock__body-top {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
}

.livepro-product-dock__body-bottom {
  display: grid;
  gap: 8px;
}

.livepro-product-dock__body-cta {
  width: 100%;
}

.livepro-product-dock__summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.livepro-product-dock__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 2px 5px;
  border-radius: 5px;
  background: #ffe2e0;
  width: fit-content;
}

.livepro-product-dock__tag {
  color: #e43226;

  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.livepro-product-dock__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #04b10f26;
  flex: 0 0 auto;
  grid-column: 2/3;
}

.livepro-product-dock__status-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #04b10f;
}

.livepro-product-dock__stock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #eb8a16;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.livepro-product-dock__stock svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.livepro-product-dock__title {
  margin: 0;
  color: #1c2945;
  font-size: 13px;
  line-height: 1 !important;
  font-weight: 500;
  letter-spacing: 0;
}

.livepro-product-dock__price {
  margin: 0;
  color: var(--livepro-product-price-color, #4f4bf0);
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
}

.livepro-product-dock__summary-row .livepro-product-dock__title,
.livepro-product-dock__summary-row .livepro-product-dock__price {
  line-height: 1.1 !important;
}

.livepro-product-dock__summary-row .livepro-product-dock__title {
  flex: 1 1 auto;
}

.livepro-product-dock__summary-row .livepro-product-dock__price {
  flex: 0 0 auto;
  white-space: nowrap;
}

.livepro-product-dock__status-corner {
  display: inline-flex;
  align-self: start;
  padding-top: 4px;
}

.livepro-btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 35px;
  padding: 0 20px;
  margin: 0;
  border: none;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
}

.livepro-product-dock__cta,
.livepro-product-sheet__continue {
  background: var(--livepro-product-cta-background-color, #4f4bf0);
  color: var(--livepro-product-cta-text-color, #ffffff);
}

.livepro-product-dock__cta {
  width: 100%;
  padding: 0px 30px;
  min-height: 32px;
  max-height: 32px;
  line-height: 1.5em !important;
  border-radius: 5px;
  font-size: 10px;
}

.livepro-btn-close {
  display: inline-flex;
  width: 25px;
  min-width: 25px;
  height: 25px;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 0;
  appearance: none;
  border-radius: 50%;
  background: #eceae8;
  color: #6f7279;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.livepro-btn-close:hover {
  background: #e1dfdc;
  color: #484d55;
  transform: scale(1.04);
}

.livepro-btn-close svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.livepro-product-dock__close {
  grid-column: 3/4;
}

.livepro-product-dock__cta svg,
.livepro-product-sheet__continue svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.livepro-product-dock--collapsed .livepro-product-dock__body {
  justify-content: center;
  gap: 0;
}

.livepro-product-dock--collapsed .livepro-product-dock__body-info {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.livepro-product-dock--collapsed .livepro-product-dock__title {
  font-size: 12px;
  line-height: 1 !important;
}

.livepro-product-dock--collapsed .livepro-product-dock__price,
.livepro-product-dock--collapsed .livepro-product-dock__tag {
  font-size: 13px;
  line-height: 1 !important;
}

.livepro-product-sheet {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 7;
  min-height: 0;
  max-height: calc(100% - 104px);
  padding: 14px 22px 22px;
  border-radius: 30px;
  background: rgba(249, 249, 251, 0.98);
  color: #1e2d49;
  box-shadow: 0 -14px 30px rgba(8, 15, 31, 0.2);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.livepro-product-sheet.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.livepro-product-sheet.is-closing {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
}

.livepro-product-sheet__close {
  position: absolute;
  top: 18px;
  right: 18px;
}

.livepro-product-sheet__header {
  margin-bottom: 16px;
  padding-right: 42px;
}

.livepro-product-sheet__content {
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
}

.livepro-product-sheet__hero {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.livepro-product-sheet__photo,
.livepro-gallery__viewport {
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  touch-action: pan-y pinch-zoom;
}

.livepro-product-sheet__photo {
  width: 92px;
  height: 92px;
}

.livepro-product-sheet__photo img,
.livepro-gallery__viewport img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.livepro-gallery__viewport img {
  position: absolute;
  inset: 0;
  max-height: 100% !important;
  object-fit: cover;
}

.livepro-product-sheet__summary {
  display: grid;
  gap: 10px;
}

.livepro-product-sheet__summary-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.livepro-product-sheet__title {
  flex: 1 1 auto;
  margin: 0;
  color: #23314f;
  font-size: 13px;
  line-height: 1.05;
  font-weight: 800;
}

.livepro-product-sheet__price {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 55%;
  margin: 0;
  /* El mismo color que eligió la tienda para el precio: antes acá estaba fijo y la ficha no
     lo respetaba, aunque la barra de producto sí. */
  color: var(--livepro-product-price-color, #4f4bf0);
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.livepro-product-sheet__stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff1f1;
  color: #e35555;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
}

.livepro-product-sheet__stock svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.livepro-product-sheet__gallery {
  min-height: 0;
  margin-bottom: 14px;
}

.livepro-gallery {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  grid-template-rows: 1fr;
  gap: 12px;
  align-items: center;
  max-width: 305px;
  margin: auto;
  margin-bottom: 10px;
}

.livepro-gallery--single {
  grid-template-columns: minmax(0, 1fr);
}

.livepro-gallery__viewport {
  position: relative;
  max-height: 100%;
}

.livepro-gallery__viewport::before {
  padding-top: 124%;
}

.livepro-gallery-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #d8e0ef;
  border-radius: 50%;
  color: #5c6c89;
  background: #fff;
  cursor: pointer;
}

.livepro-gallery-nav svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.livepro-gallery-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  margin-bottom: 18px;
}

.livepro-gallery-dot {
  display: block;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  min-width: 6px;
  min-height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d4dbea;
  cursor: pointer;
  appearance: none;
}

.livepro-gallery-dot.is-active {
  background: #5a52f4;
  box-shadow: 0 0 0 4px rgba(90, 82, 244, 0.12);
}

.livepro-product-sheet__details {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 10px;
}

.livepro-info-group {
  display: grid;
  gap: 10px;
}

.livepro-info-group__label {
  margin: 0;
  color: #90a0bc;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.livepro-info-group__tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.livepro-info-token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  max-height: 23px;
  margin: 0;
  padding: 3px 10px;
  border-radius: 14px;
  border: 1px solid #d6ddec;
  background: #fff;
  color: #596b89;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}

.livepro-info-token--option {
  cursor: pointer;
  appearance: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.livepro-info-token--option.is-selected {
  background: #23314f;
  border-color: #23314f;
  color: #fff;
}

.livepro-info-token--option.is-disabled,
.livepro-info-token--option:disabled {
  background: #eef2f7;
  border-color: #e0e6f0;
  color: #a5afc1;
  cursor: not-allowed;
  box-shadow: none;
}

.livepro-product-sheet__footer {
  flex: 0 0 auto;
  margin-top: 4px;
  padding: 10px 2px 0;
}

.livepro-product-sheet__add-to-cart {
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.livepro-product-sheet__add-to-cart:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}

.livepro-product-sheet__add-to-cart.is-disabled,
.livepro-product-sheet__add-to-cart:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.livepro-product-sheet__add-to-cart svg {
  width: 20px;
  height: 20px;
}

.livepro-cart-btn {
  position: relative;
}

.livepro-cart-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}

.livepro-cart-badge.is-hidden {
  display: none;
}

.livepro-mini__cart-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 11px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  z-index: 3;
  pointer-events: none;
}

.livepro-mini__cart-badge.is-hidden {
  display: none;
}

.livepro-cart-confirmation {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 40;
  padding: 20px 22px 22px;
  border-radius: 30px;
  background: rgba(249, 249, 251, 0.98);
  color: #1e2d49;
  box-shadow: 0 -14px 30px rgba(8, 15, 31, 0.2);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.livepro-cart-confirmation.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.livepro-cart-confirmation__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.livepro-cart-confirmation__message {
  display: flex;
  align-items: center;
  gap: 10px;
}

.livepro-cart-confirmation__check {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.livepro-cart-confirmation__check svg {
  width: 28px;
  height: 28px;
}

.livepro-cart-confirmation__title {
  font-size: 15px;
  font-weight: 700;
  color: #1e2d49;
  margin: 0;
}

.livepro-cart-confirmation__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.livepro-cart-confirmation__continue {
  border: 2px solid currentColor;
  transition: opacity 0.15s ease;
}

.livepro-cart-confirmation__continue:hover {
  opacity: 0.85;
}

.livepro-cart-confirmation__checkout {
  transition: opacity 0.15s ease;
}

.livepro-cart-confirmation__checkout:hover {
  opacity: 0.9;
}

.livepro-cart-view {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 10;
  min-height: 0;
  max-height: calc(100% - 104px);
  padding: 14px 22px 0;
  border-radius: 30px;
  background: rgba(249, 249, 251, 0.98);
  color: #1e2d49;
  box-shadow: 0 -14px 30px rgba(8, 15, 31, 0.2);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.livepro-cart-view.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.livepro-cart-view.is-closing {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
}

.livepro-cart-view__close {
  position: absolute;
  top: 14px;
  right: 14px;
}

.livepro-cart-view__header {
  flex: 0 0 auto;
  padding: 0 0 10px;
}

.livepro-cart-view__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: #1e2d49;
}

.livepro-cart-view__body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.livepro-cart-view__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.livepro-cart-view__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  gap: 14px;
}

.livepro-cart-view__empty-text {
  font-size: 15px;
  color: #64748b;
  margin: 0;
}

.livepro-cart-view__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 20px;
  border: 2px solid #1e2d49;
  border-radius: 12px;
  background: transparent;
  color: #1e2d49;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.livepro-cart-view__back:hover {
  background: rgba(30, 45, 73, 0.06);
}

.livepro-cart-view__items {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.livepro-cart-view__item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #eef2f7;
}

.livepro-cart-view__item:last-child {
  border-bottom: none;
}

.livepro-cart-view__item-image {
  width: 60px;
  height: 72px;
  min-width: 60px;
  object-fit: cover;
  border-radius: 8px;
  background: #eef2f7;
}

.livepro-cart-view__item-image--empty {
  width: 60px;
  height: 72px;
  min-width: 60px;
  border-radius: 8px;
  background: #eef2f7;
}

.livepro-cart-view__item-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.livepro-cart-view__item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.livepro-cart-view__item-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.livepro-cart-view__item-name {
  font-size: 13px;
  font-weight: 600;
  color: #1e2d49;
  margin: 0 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.livepro-cart-view__item-attr {
  font-size: 11px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

.livepro-cart-view__item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.livepro-cart-view__item-price {
  font-size: 14px;
  font-weight: 700;
  color: #1e2d49;
  margin: 0;
}

.livepro-cart-view__qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid #d4dae3;
  border-radius: 8px;
  overflow: hidden;
}

.livepro-cart-view__qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: #1e2d49;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.12s ease;
}

.livepro-cart-view__qty-btn:hover:not(:disabled) {
  opacity: 0.7;
}

.livepro-cart-view__qty-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.livepro-cart-view__qty-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 28px;
  font-size: 12px;
  font-weight: 700;
  color: #1e2d49;
  border-left: 1px solid #d4dae3;
  border-right: 1px solid #d4dae3;
}

.livepro-cart-view__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.livepro-cart-view__remove:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

.livepro-cart-view__remove svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.livepro-cart-view__footer {
  flex: 0 0 auto;
  padding: 14px 0 22px;
  border-top: 1px solid #eef2f7;
}

.livepro-cart-view__totals {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.livepro-cart-view__total-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #64748b;
}

.livepro-cart-view__total-row--total {
  font-size: 16px;
  font-weight: 700;
  color: #1e2d49;
  margin-top: 4px;
}

.livepro-cart-view__checkout {
  transition: opacity 0.15s ease;
}

.livepro-cart-view__checkout:hover {
  opacity: 0.9;
}

.livepro-cart-view__checkout:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@keyframes livepro-spin {
  to { transform: rotate(360deg); }
}

.livepro-spinner {
  animation: livepro-spin 0.8s linear infinite;
}

.livepro-spinner--lg {
  width: 32px;
  height: 32px;
}

.livepro-spinner--lg circle {
  fill: none;
  stroke: #64748b;
  stroke-width: 3;
}

 .is-hidden {
  display: none !important;
}

@media (max-width: 768px) {
  #livepro-widget-root {
    max-width: calc(100vw - 12px);
  }

  .livepro-shell {
    width: min(var(--livepro-width-mobile), calc(100vw - 24px));
  }

  #livepro-widget-root[data-mobile-presentation="immersive"] {
    max-width: none;
  }

  #livepro-widget-root[data-mobile-presentation="immersive"] .livepro-shell {
    width: calc(100vw - (var(--livepro-offset-x) * 2));
    height: calc(100dvh - (var(--livepro-offset-y) * 2));
    max-height: calc(100dvh - (var(--livepro-offset-y) * 2));
    border-radius: 32px;
  }

  #livepro-widget-root[data-mobile-presentation="immersive"] .livepro-shell::before {
    content: none;
  }

  .livepro-mini {
    width: min(150px, calc(100vw - 48px));
  }

  #livepro-widget-root[data-orientation="horizontal"] .livepro-mini {
    width: min(220px, calc(100vw - 48px));
  }

  .livepro-shell__topbar {
    top: 14px;
    left: 14px;
    right: 14px;
  }

  .livepro-shell__dock-host {
    left: 14px;
    right: 14px;
    bottom: 40px;
  }

  #livepro-widget-root[data-mobile-presentation="immersive"] .livepro-shell__dock-host {
    left: 16px;
    right: 16px;
    bottom: 40px;
  }

  .livepro-product-dock__card {
    grid-template-columns: 75px minmax(0, 1fr);
    gap: 11px;
    padding: 8px 12px;
    border-radius: 15px;
  }

  .livepro-product-dock__card--collapsed {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    min-height: 50px;
    max-height: 50px;
    padding: 8px 12px;
  }

  .livepro-product-dock__image-wrap {
    width: 100%;
    border-radius: 10px;
  }

  .livepro-product-dock__title {
    font-size: 12px;
  }

  .livepro-product-dock__price {
    font-size: 14px;
  }

  .livepro-product-dock__cta {
    padding: 0 15px;
    min-height: 25px;
  }

  .livepro-product-sheet {
    left: 14px;
    right: 14px;
    bottom: 14px;
    max-height: calc(100% - 86px);
    padding: 14px 16px 18px;
    border-radius: 26px;
  }

  #livepro-widget-root[data-mobile-presentation="immersive"] .livepro-product-sheet {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-height: calc(100% - 64px);
    padding: 16px 18px 20px;
    border-radius: 30px;
  }

  .livepro-product-sheet__header {
    padding-right: 32px;
  }

  .livepro-product-sheet__title {
    font-size: 12px;
  }

  .livepro-product-sheet__details {
    gap: 12px;
  }

  .livepro-info-group__tokens {
    gap: 8px;
  }

  .livepro-info-token {
    font-size: 12px;
  }

  .livepro-product-sheet__footer {
    margin-top: 0;
  }

  .livepro-cart-view {
    left: 14px;
    right: 14px;
    bottom: 14px;
    max-height: calc(100% - 86px);
    padding: 14px 16px 0;
    border-radius: 26px;
  }

  #livepro-widget-root[data-mobile-presentation="immersive"] .livepro-cart-view {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-height: calc(100% - 64px);
    padding: 16px 18px 0;
    border-radius: 30px;
  }

  .livepro-cart-view__item-image {
    width: 52px;
    height: 64px;
    min-width: 52px;
  }

  .livepro-cart-view__item-image--empty {
    width: 52px;
    height: 64px;
    min-width: 52px;
  }

  .livepro-cart-view__footer {
    padding: 12px 0 18px;
  }

  .livepro-cart-confirmation {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 18px 16px 20px;
    border-radius: 26px;
  }

  #livepro-widget-root[data-mobile-presentation="immersive"] .livepro-cart-confirmation {
    left: 16px;
    right: 16px;
    bottom: 16px;
    border-radius: 30px;
  }
}

/* ---------------------------------------------------------------------------
   Cuenta regresiva del próximo vivo.

   Usa el mismo armazón que el vivo —.livepro-shell, .livepro-mini— así que hereda
   tamaño, radios, sombra y animación de apertura. Acá va sólo lo propio: el fondo,
   el reloj y la firma.
   --------------------------------------------------------------------------- */

.livepro-agenda,
.livepro-agenda-mini {
  background-color: #0b0d12;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
}

/* El patrón se ve sólo cuando la tienda no cargó una foto: sobre una imagen sería
   suciedad. Va en un plano rotado y más grande que el marco, porque el mosaico de
   texto sólo empalma sin costuras si se lo rota entero, no baldosa por baldosa. */
.livepro-agenda__patron {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  transform: rotate(-18deg);
  pointer-events: none;
  background-repeat: repeat;
  background-size: 320px 110px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='110'%3E%3Cg font-family='Arial Black,Arial,sans-serif' font-size='34' font-weight='900' fill='%23ffffff' fill-opacity='0.05'%3E%3Ctext x='0' y='40'%3ELIVE SHOPPING%3C/text%3E%3Ctext x='-320' y='40'%3ELIVE SHOPPING%3C/text%3E%3Ctext x='160' y='96'%3ELIVE SHOPPING%3C/text%3E%3Ctext x='-160' y='96'%3ELIVE SHOPPING%3C/text%3E%3C/g%3E%3C/svg%3E");
}

.livepro-agenda--foto .livepro-agenda__patron {
  display: none;
}

/* Sobre la foto del cliente hay texto blanco encima, y no sabemos qué foto es.
   El velo garantiza que se lea sin tener que pedirle una imagen oscura. */
.livepro-agenda__velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 10, 16, 0.55) 0%, rgba(8, 10, 16, 0.78) 55%, rgba(8, 10, 16, 0.92) 100%);
}

.livepro-agenda--foto .livepro-agenda__velo {
  background: linear-gradient(180deg, rgba(8, 10, 16, 0.62) 0%, rgba(8, 10, 16, 0.72) 45%, rgba(8, 10, 16, 0.94) 100%);
}

.livepro-agenda .livepro-shell__topbar {
  z-index: 3;
}

.livepro-agenda__cuerpo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 64px 26px 76px;
  text-align: center;
}

.livepro-agenda__titulo {
  font-size: clamp(28px, 8vw, 38px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.livepro-agenda__texto {
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
  max-width: 30ch;
}

.livepro-agenda__fecha {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.livepro-agenda__reloj {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.livepro-agenda__caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 74px;
  padding: 10px 6px 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  color: #10131a;
}

.livepro-agenda__caja b {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  /* Sin esto los dígitos cambian de ancho al pasar de 11 a 12 y las cajas tiemblan
     una vez por segundo. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.livepro-agenda__caja small {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #5b6474;
}

.livepro-agenda__ya {
  margin-top: 6px;
  padding: 12px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  color: #10131a;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.livepro-agenda__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 10px;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  background: #e8452c;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
}

.livepro-agenda__cta:hover {
  background: #f2543b;
  transform: translateY(-1px);
}

.livepro-agenda__cta svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.livepro-agenda__firma {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  z-index: 3;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.18s ease;
}

.livepro-agenda__firma:hover {
  color: rgba(255, 255, 255, 0.9);
}

.livepro-agenda__firma b {
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.livepro-agenda .is-hidden {
  display: none;
}

/* La burbuja. Muestra ya cuánto falta: quien pasa por la tienda no debería tener que
   hacer clic para enterarse de que hay algo. */
.livepro-agenda-mini {
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.livepro-agenda-mini__cuerpo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* El reloj queda centrado en la altura y el rótulo justo encima: se centra el grupo,
     no cada cosa por su lado, para que no queden dos bloques flotando separados. */
  gap: 14px;
  padding: 18px 12px;
}

.livepro-agenda-mini__rotulo {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.72);
}

/* --- escalón de abajo: el botón flotante -------------------------------------
   Adonde va la cuenta regresiva cuando alguien la cierra. No desaparece —eso sería
   perder el anuncio— pero deja la tienda despejada para quien vino a comprar hoy. */
.livepro-agenda-boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #0b0d12;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(8, 15, 31, 0.42);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.livepro-agenda-boton:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(8, 15, 31, 0.5);
}

.livepro-agenda-boton__icono {
  position: relative;
  z-index: 2;
  display: inline-flex;
  width: 26px;
  height: 26px;
  /* Corrido un pelo a la derecha: un triángulo centrado por su caja se ve descentrado,
     porque su peso visual está en la punta. */
  margin-left: 3px;
}

.livepro-agenda-boton__icono svg {
  width: 100%;
  height: 100%;
}

/* El anillo que late. Es lo que hace que se note sin ocupar lugar: un botón quieto en
   una esquina no lo mira nadie. */
.livepro-agenda-boton__pulso {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  animation: livepro-agenda-latido 2.4s ease-out infinite;
}

/* Pasada la hora, el anillo se pone del color del vivo y late más seguido: es la
   diferencia entre "hay algo el jueves" y "está por empezar ahora". */
.livepro-agenda-boton.is-ya .livepro-agenda-boton__pulso {
  border-color: #e8452c;
  animation-duration: 1.2s;
}

@keyframes livepro-agenda-latido {
  0%   { transform: scale(1);    opacity: 0.75; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* Quien pidió menos movimiento no debería recibir un anillo latiendo en la esquina. */
@media (prefers-reduced-motion: reduce) {
  .livepro-agenda-boton__pulso {
    animation: none;
    opacity: 0.35;
  }
}

/* --- escalón del medio: la miniatura ------------------------------------------
   Es por donde se entra. Tiene la proporción del widget y ya muestra cuánto falta:
   quien pasa por la tienda no debería tener que tocar nada para enterarse.

   El ancho no es el de `.livepro-mini` porque acá van tres números con sus palabras,
   y en 150 píxeles no entran en una línea sin abreviar — abreviar fue lo que no se
   entendía. El alto sí sigue la proporción de siempre; `padding-top` en porcentaje se
   mide contra el ancho, así que 177.78% da 9:16 exacto sea cual sea el ancho. */
.livepro-agenda-mini {
  width: clamp(200px, calc(var(--livepro-width-desktop) * 0.56), 240px);
  cursor: pointer;
}

.livepro-agenda-mini::before {
  padding-top: 177.7778%;
}

#livepro-widget-root[data-orientation="horizontal"] .livepro-agenda-mini {
  width: clamp(200px, calc(var(--livepro-width-desktop) * 0.62), 250px);
}

#livepro-widget-root[data-orientation="horizontal"] .livepro-agenda-mini::before {
  padding-top: 177.7778%;
}

.livepro-agenda-mini__cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 15, 22, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background 0.18s ease;
}

.livepro-agenda-mini__cerrar:hover {
  background: rgba(12, 15, 22, 0.85);
}

.livepro-agenda-mini__cerrar svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* El cuerpo es el que abre el grande, y ocupa toda la tarjeta salvo la cruz: en una
   miniatura, obligar a apuntar a un botón chico es una barrera de más. */
.livepro-agenda-mini__cuerpo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: center;
}

.livepro-agenda-mini__rotulo {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.72);
}

.livepro-agenda-mini__reloj {
  display: flex;
  align-items: stretch;
  gap: 5px;
  width: 100%;
}

.livepro-agenda-mini__par {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 2px 5px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  color: #10131a;
}

.livepro-agenda-mini__par b {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
  /* Sin esto los dígitos cambian de ancho al pasar de 11 a 12 y las cajas tiemblan
     una vez por segundo. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.livepro-agenda-mini__par small {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
  /* En minúscula se lee como una palabra y no como una sigla. */
  text-transform: lowercase;
  color: #5b6474;
}

/* La firma de la burbuja: la misma pastilla, más chica, abajo. El cuerpo deja lugar
   con su propio padding para que el reloj no la pise. */
.livepro-agenda-mini__cuerpo {
  padding-bottom: 46px;
}

.livepro-agenda-mini__firma.livepro-firma--logo,
.livepro-shell__firma.livepro-firma--logo {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 3;
  transform: translateX(-50%);
  /* Con left:50% el ancho disponible es la mitad de la burbuja y el texto se desbordaba
     de la pastilla: que mida lo que mide su contenido. */
  width: max-content;
  max-width: calc(100% - 16px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(10, 14, 20, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.85);
  font-size: 9px;
  text-decoration: none;
  white-space: nowrap;
}

.livepro-agenda-mini__firma.livepro-firma--logo img,
.livepro-shell__firma.livepro-firma--logo img {
  display: block;
  width: 17px;
  height: 17px;
  border-radius: 5px;
}

.livepro-agenda-mini__firma.livepro-firma--logo b,
.livepro-shell__firma.livepro-firma--logo b {
  font-weight: 700;
  color: #fff;
}

/* En el vivo va más abajo y por encima del carrusel de productos. */
.livepro-shell__firma.livepro-firma--logo {
  bottom: 6px;
  z-index: 6;
}

.livepro-agenda-mini__ya {
  padding: 7px 12px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.95);
  color: #10131a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
}

@media (max-width: 768px) {
  .livepro-agenda__cuerpo {
    padding: 60px 20px 72px;
  }

  .livepro-agenda__caja {
    min-width: 66px;
  }

  .livepro-agenda__caja b {
    font-size: 26px;
  }
}

/* ---------------------------------------------------------------------------
   El cupón del vivo.

   Tres partes en una píldora: cuánto es, cuál es el código, cuánto queda. El disco
   blanco del medio se sale del alto a propósito — es lo único con lo que la clienta
   tiene que hacer algo, y así se lee antes que el resto.

   ⚠️ Los tamaños y los interlineados van con `!important`, y no es pereza. Este widget
   se inyecta en el tema de cada tienda, y hay temas que declaran `b { line-height: 2 }`
   o `small { font-size: .85em }` con `!important`. La primera versión se veía perfecta
   en el banco de pruebas —una página en blanco— y en una tienda real salía con el
   doble de alto y los renglones separados. No se puede confiar en heredar nada acá.
   --------------------------------------------------------------------------- */

.livepro-cupon-host {
  position: absolute;
  top: 66px;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.livepro-cupon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 32px);
  /* El disco sobresale arriba y abajo: sin margen propio lo recorta el borde del video. */
  margin: 5px 0;
  padding: 5px 12px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  background: linear-gradient(100deg, #7a3f9d 0%, #b03a6a 52%, #e8452c 100%);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 8px 20px rgba(12, 16, 28, 0.36);
  animation: livepro-cupon-entra 0.35s ease-out;
}

/* Los dos costados miden lo mismo aunque digan cosas de largo distinto: si no, el disco
   del medio queda corrido y se nota enseguida. */
.livepro-cupon__lado {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
}

.livepro-cupon__lado small {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 7.5px !important;
  line-height: 1.35 !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.livepro-cupon__lado small svg {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
}

.livepro-cupon__lado b {
  font-size: 15px !important;
  line-height: 1.15 !important;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.livepro-cupon__lado i {
  font-size: 6.5px !important;
  line-height: 1.35 !important;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}

/* El reloj no puede cambiar de ancho cada segundo: con dígitos de ancho variable, la
   píldora entera late al pasar de 9:59 a 10:00. */
.livepro-cupon__lado--der b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.livepro-cupon__disco {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 62px;
  height: 62px;
  margin: -9px 5px;
  border-radius: 50%;
  background: #fff;
  color: #10131a;
  box-shadow: 0 5px 14px rgba(12, 16, 28, 0.26);
}

.livepro-cupon__disco small {
  /* Acotado al ancho del disco, pero sin `overflow: hidden`: con el interlineado justo,
     recortaba la tilde de "CÓDIGO" y se leía "CODIGO". El texto es corto y entra; la
     protección de verdad fue acortarlo, no taparlo. */
  max-width: 58px;
  font-size: 7px !important;
  line-height: 1.5 !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #5b6474;
  white-space: nowrap;
}

/* El código nunca se corta: se achica.
   Recortarlo con puntos suspensivos era lo peor posible — es lo único que la clienta
   tiene que poder leer, y "PRIM…" no sirve ni para tipearlo ni para repetirlo. */
.livepro-cupon__codigo {
  max-width: 58px;
  font-size: 14.5px !important;
  line-height: 1.05 !important;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
  overflow-wrap: anywhere;
}

.livepro-cupon__codigo[data-largo="m"]  { font-size: 12px !important; }
.livepro-cupon__codigo[data-largo="l"]  { font-size: 10px !important; letter-spacing: 0; }
.livepro-cupon__codigo[data-largo="xl"] { font-size: 8.5px !important; letter-spacing: 0; }

.livepro-cupon__copiar {
  width: 10px;
  height: 10px;
  color: #8a93a3;
}

/* Copiar sin confirmación se siente como que no pasó nada. */
.livepro-cupon.is-copiado .livepro-cupon__disco small {
  color: #1a9b5c;
}

@keyframes livepro-cupon-entra {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .livepro-cupon {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Conectando, y "Toca para escuchar".

   Entre que se toca para abrir el vivo y que sale el primer cuadro pasan uno o dos
   segundos, y lo que se veía era el fondo liso del contenedor. Ahora ese rato lleva la
   imagen de vista previa configurada —la misma de la miniatura cerrada— con un spinner
   encima. Sin imagen configurada queda un fondo oscuro parejo, no el gris.
   --------------------------------------------------------------------------- */
.livepro-carga {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: #0e1217;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* Un velo, para que el spinner se lea sobre cualquier imagen. */
.livepro-carga::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 16, 0.42);
}

.livepro-shell.is-cargando .livepro-carga,
.livepro-mini--live.is-cargando .livepro-carga {
  display: flex;
}

.livepro-carga__giro {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  animation: livepro-giro 0.85s linear infinite;
}

.livepro-mini--live .livepro-carga__giro {
  width: 28px;
  height: 28px;
  border-width: 2.5px;
}

@keyframes livepro-giro {
  to { transform: rotate(360deg); }
}

/* El botón para activar el sonido: casi transparente, en el medio, sólo con el video
   saliendo y mudo. Va por encima del bloqueador de toques del video (z-index 2). */
.livepro-escuchar {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  display: none;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(10, 14, 20, 0.36);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.livepro-shell.is-silencio .livepro-escuchar {
  display: inline-flex;
}

.livepro-escuchar svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .livepro-carga__giro { animation-duration: 2.4s; }
}

/* ── Precio con el cupón del vivo ───────────────────────────────────────────
   El precio viejo tachado, el nuevo, y una etiqueta con el porcentaje. Cuando el cupón
   recién sale, el precio original "explota" y recién después aparece el resto: las tres
   piezas entran con retraso (el estreno) y no se ven hasta que les toca. */
.livepro-precio {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  max-width: 100%;
}

/* El precio nuevo va debajo del viejo, en su propia fila: puesto al lado, en una ficha
   angosta la etiqueta y el código del cupón se cortaban contra el borde. */
.livepro-precio__fila {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.livepro-cart-view__item-price .livepro-precio {
  align-items: flex-start;
}

.livepro-cart-view__item-price .livepro-precio__cupon {
  text-align: left;
}

/* En el dock cerrado hay una sola línea de alto: ahí sí van uno al lado del otro. */
.livepro-product-dock--collapsed .livepro-precio {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}

.livepro-precio__viejo {
  font-size: 0.78em;
  font-weight: 600;
  opacity: 0.55;
  text-decoration: line-through;
}

.livepro-precio__nuevo {
  font-weight: 900;
}

.livepro-precio__etiqueta {
  padding: 1px 5px;
  border-radius: 6px;
  background: #16a34a;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
}

.livepro-precio__cupon {
  max-width: 100%;
  text-align: right;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  opacity: 0.7;
}

.livepro-product-dock--collapsed .livepro-precio__etiqueta {
  display: none;
}

.livepro-precio.is-estreno .livepro-precio__viejo {
  animation: livepro-precio-aparece 0.4s ease 0.55s both;
}

.livepro-precio.is-estreno .livepro-precio__nuevo {
  animation: livepro-precio-nuevo 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) 0.45s both;
}

.livepro-precio.is-estreno .livepro-precio__etiqueta,
.livepro-precio.is-estreno .livepro-precio__cupon {
  animation: livepro-precio-aparece-lleno 0.4s ease 0.75s both;
}

.livepro-precio__bum {
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
  white-space: nowrap;
  font-weight: 900;
  animation: livepro-precio-bum 0.45s ease-in both;
}

.livepro-precio__chispa {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f59e0b;
  pointer-events: none;
  animation: livepro-precio-chispa 0.6s ease-out 0.12s both;
}

.livepro-precio__chispa:nth-of-type(3n + 1) { background: #ef4444; }
.livepro-precio__chispa:nth-of-type(3n + 2) { background: #3b82f6; }
.livepro-precio__chispa:nth-of-type(3n) { background: #22c55e; }

.livepro-cart-view__total-row--cupon {
  color: #16a34a;
  font-weight: 700;
}

@keyframes livepro-precio-bum {
  0% { transform: scale(1); opacity: 1; filter: blur(0); }
  30% { transform: scale(1.3) rotate(-2deg); opacity: 1; filter: blur(0); }
  100% { transform: scale(2); opacity: 0; filter: blur(6px); }
}

@keyframes livepro-precio-chispa {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0); opacity: 0; }
}

@keyframes livepro-precio-nuevo {
  0% { transform: scale(0.4); opacity: 0; }
  65% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes livepro-precio-aparece {
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 0.55; transform: translateY(0); }
}

@keyframes livepro-precio-aparece-lleno {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .livepro-precio.is-estreno .livepro-precio__viejo { animation: none; opacity: 0.55; }
  .livepro-precio.is-estreno .livepro-precio__nuevo,
  .livepro-precio.is-estreno .livepro-precio__etiqueta,
  .livepro-precio.is-estreno .livepro-precio__cupon { animation: none; opacity: 1; }
  .livepro-precio__bum,
  .livepro-precio__chispa { display: none; }
}

/* La firma en la pantalla de espera (el contador): con el logo y a la vista.
   Es un link y tiene que parecerlo: un pill con borde y fondo, no un texto perdido. */
.livepro-agenda__firma.livepro-firma--logo {
  left: 50%;
  right: auto;
  bottom: 18px;
  transform: translateX(-50%);
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(10, 14, 20, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.livepro-agenda__firma.livepro-firma--logo:hover {
  background: rgba(10, 14, 20, 0.72);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.livepro-agenda__firma.livepro-firma--logo img {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 7px;
}

.livepro-agenda__firma.livepro-firma--logo b {
  font-size: 14px;
  color: #fff;
}

/* Red de seguridad: un <video> del player con la clase por defecto nunca entra en el flujo.
   Sin esto, en la miniatura ocupaba 300 x 150 mientras el player negociaba y la estiraba. */
video.livepro-shell__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}

/* Botones redondos a prueba de tema.
   Los temas de tienda suelen darle a todo `button` un padding, un alto mínimo o un
   interlineado propios, y un círculo de 28 × 28 termina siendo un óvalo. Acá se fija el
   tamaño por los dos lados, se anula lo que el tema pueda agregar (con !important, porque
   algunos temas lo usan) y se obliga a la proporción 1:1. */
.livepro-agenda-mini__cerrar,
.livepro-icon-btn {
  box-sizing: border-box;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: 0 !important;
  aspect-ratio: 1 / 1;
  -webkit-appearance: none;
  appearance: none;
}

.livepro-agenda-mini__cerrar {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
}

.livepro-icon-btn {
  width: 42px !important;
  height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
}

.livepro-agenda-mini__cerrar svg,
.livepro-icon-btn svg {
  display: block;
  flex: none;
}

/* Extensiones de navegador (Video Speed Controller y parecidas) que se pegan sobre cada <video>:
   no son de LiveGora y tapan la imagen, así que se ocultan el widget. */
vsc-controller { display: none !important; }

.livepro-icon-btn svg {
  transition: transform 0.15s ease;
}

/* Los corazones que suben. El contenedor no ocupa lugar —los hijos son los que se ven—,
   por eso mide 1px: si midiera algo, en el layout con `inset:0` de `.livepro-shell__media`
   competiría por el espacio con el video. Nace arriba del carrusel de productos y no del
   botón: ver el comentario en la plantilla (`widget.js`, junto a `.livepro-hearts-fx`). */
.livepro-hearts-fx {
  position: absolute;
  right: 18px;
  width: 1px;
  height: 1px;
  z-index: 6;
  pointer-events: none;
}

/* Los mismos dos valores que `.livepro-chat`, un poco por encima del botón real —que es
   el último elemento de la barra, pegado al borde de abajo del chat—: así el corazón nace
   donde está el botón y no en un punto fijo que quedaba lejos cuando el chat bajaba. */
.livepro-hearts-fx.con-producto {
  bottom: 198px;
}

.livepro-hearts-fx.sin-producto {
  bottom: 56px;
}

.livepro-heart-fx {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 26px;
  height: 26px;
  color: #ec3028;
  opacity: 0;
  animation-name: livepro-corazon-sube;
  animation-timing-function: cubic-bezier(0.16, 0.6, 0.4, 1);
  animation-fill-mode: forwards;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
}

.livepro-heart-fx svg {
  width: 100%;
  height: 100%;
  display: block;
}

.livepro-heart-fx svg path {
  fill: currentColor;
}

@keyframes livepro-corazon-sube {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }
  12% { opacity: 1; transform: translate(calc(var(--dx, 0px) * 0.2), -18px) scale(1) rotate(calc(var(--rot, 0deg) * 0.3)); }
  100% { opacity: 0; transform: translate(var(--dx, 0px), -190px) scale(0.9) rotate(var(--rot, 0deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .livepro-heart-fx { animation-duration: 0.6s !important; }
}

/* El chat. Tres partes, en este orden en el HTML: el historial, la pastilla y la barra de
   comentar. El contenedor cuelga sólo del borde de abajo (`bottom`, sin `top`): así la barra
   —el último hijo— queda siempre pegada a ese borde fijo, y es el historial, primer hijo,
   el que se estira hacia arriba cuando se abre. La pastilla y la barra están siempre a la
   vista; lo que se abre y cierra es sólo el historial.

   La posición cambia según haya o no un producto al aire: con el carrusel abajo, el chat
   tiene que quedar arriba de él (`.con-producto`); sin nada que mostrar, baja a ocupar ese
   lugar (`.sin-producto`). */
.livepro-chat {
  position: absolute;
  left: 14px;
  right: 14px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.livepro-chat.con-producto {
  bottom: 190px;
}

.livepro-chat.sin-producto {
  bottom: 48px;
}

/* Minimalista, sin pastilla: sólo el ícono, la palabra y la flecha, en blanco liso —nada
   de fondo ni de sombra detrás—. Con `!important` en fondo y borde por lo mismo que el
   campo de texto: la tienda suele traer una regla genérica para `button`. */
.livepro-chat__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0 !important;
  padding: 0 !important;
  margin-left: 2px;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.livepro-chat__toggle svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex: none;
}

.livepro-chat__chevron {
  transition: transform 0.2s ease;
}

.livepro-chat.is-open .livepro-chat__chevron {
  transform: rotate(180deg);
}

/* El historial: sin caja ni fondo propio —"para que se vea el vivo detrás"—, con una
   sombra de texto en cada línea en vez de una tarjeta, que es lo que mantiene legible un
   mensaje sobre cualquier video, claro u oscuro. Cerrado mide 0 y no deja rastro; abierto,
   la altura de unos cinco mensajes (el resto se ve scrolleando). */
.livepro-chat__feed {
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow-y: hidden;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  /* Nada de `justify-content: flex-end` acá: con overflow y scroll, "empujar al final"
     hace que el navegador recorte el contenido de más arriba en vez de dejarlo
     scrolleable —el `scrollHeight` daba igual al `clientHeight`, como si no hubiera nada
     para scrollear—. El feed fluye normal y `patchChat` lo manda al final a mano. */
  gap: 7px;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}

.livepro-chat.is-open .livepro-chat__feed {
  max-height: 128px;
  opacity: 1;
  overflow-y: auto;
  padding-bottom: 6px;
}

.livepro-chat__msg {
  margin: 0;
  flex: none;
  font-size: 13px;
  line-height: 1.4;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 0, 0, 0.35);
  word-break: break-word;
}

.livepro-chat__msg b {
  font-weight: 700;
}

.livepro-chat__msg.is-propio {
  color: #ffb199;
}

/* Lo que escribe la propia tienda desde el panel: el nombre en ámbar, para que las
   respuestas de quien transmite se encuentren de un vistazo en medio del chat, sin
   ponerles caja ni fondo (sigue siendo minimalista). */
.livepro-chat__msg.is-tienda b {
  color: #ffd166;
}

/* La barra de comentar: siempre a la vista, sin cajas ni sombras —el campo es sólo un
   borde fino sobre el video, y el envío y el corazón van adentro y al costado sin fondo
   propio, para que se lea liviana. */
.livepro-chat__barra {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.livepro-chat__form {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px !important;
  border: 1.3px solid rgba(255, 255, 255, 0.55) !important;
  padding: 9px 8px 9px 16px !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* Con `!important`: la tienda suele traer una regla para `input[type="text"]` —fondo
   blanco, borde, color de letra— con más especificidad que una sola clase nuestra (pasó de
   verdad el 28/09/2026: el campo se veía como un rectángulo blanco sólido, tapando el
   ícono de enviar). Es el mismo motivo por el que los botones redondos llevan `!important`
   desde la 1.6.10. */
.livepro-chat__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: 13px;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.livepro-chat__input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.livepro-chat__input:focus {
  outline: none;
  box-shadow: none !important;
}

.livepro-chat__enviar {
  flex: none;
  width: 30px;
  height: 30px;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.livepro-chat__enviar svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* El corazón, al costado de la pastilla de comentar y no arriba: rojo sólido y sin nada
   detrás —ni círculo ni sombra—, para que se lea como "me encanta" y no como un botón
   redondo más. */
.livepro-chat__heart {
  flex: none;
  width: 30px;
  height: 30px;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.livepro-chat__heart svg {
  width: 24px;
  height: 24px;
}

.livepro-chat__heart svg path {
  fill: #ec3028;
}

.livepro-chat__heart:active svg {
  transform: scale(1.18);
}

/* El formulario para pedir el nombre: mismo campo con borde fino que el de comentar, para
   que no se sienta como una pantalla aparte sino como el mismo lugar pidiendo un dato antes. */
.livepro-chat__form--nombre .livepro-chat__input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}