/* ===== Quick buttons (top-right) ===== */
.bpHelpQuickTopRight{
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 9997;bpFaqList
  display: flex;
  gap: 6px;
}

/* ===== Backdrop ===== */
.bpHelpBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 9998;
}

/* ===== Drawer ===== */
.bpHelpDrawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 420px;
  max-width: 92vw;
  background: #fff;
  z-index: 9999;
  box-shadow: -12px 0 30px rgba(0,0,0,.2);

  transform: translateX(100%);
  transition: transform 180ms ease;
  display: flex;
  flex-direction: column;
}
.bpHelpDrawer--open{ transform: translateX(0); }

.bpHelpDrawer button:disabled{
  opacity: .45;
  cursor: not-allowed;
}

.bpHelpHeader{
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  /* REMOVE flex: DataFlex grid will handle layout */
}

.bpHelpHeaderFlex{
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  gap:10px;
}

.bpHelpHeaderTitle{
  flex: 1 1 auto;           /* take remaining space */
  white-space: nowrap;
}

.bpHelpHeaderBtn{
  flex: 0 0 auto;
  min-width: 110px;         /* ensures "Refrescar" fits */
  white-space: nowrap;
}

.bpHelpBody{
  padding: 10px 12px;
  overflow: auto;
  flex: 1;
}

/* ===== Overlay help icon pattern ===== */
.bpHelpWrap{ position: relative; }

/* keep the overlay positioning */
.bpHelpAbsTopRight{
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 60;
}

/* make the button perfectly round */
/* Round icon wrapper */
.bpHelpIconRound{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  overflow: hidden;           /* forces inner element to clip round */
  display: inline-block;
}

/* Force the actual DataFlex button element inside to be round */
.bpHelpIconRound .WebBtn,
.bpHelpIconRound .dfWebBtn,
.bpHelpIconRound button{
  width: 22px !important;
  height: 32px !important;
  min-width: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  line-height: 32px !important;
  text-align: center !important;
  font-weight: 800;
}

/* optional background/border if your theme overrides it */
.bpHelpIconRound .WebBtn,
.bpHelpIconRound .dfWebBtn{
  border: 1px solid rgba(0,0,0,.25) !important;
  background: rgba(255,255,255,.95) !important;
}

/* optional hover */
.bpHelpIconRound:hover{
  background: #ffffff;
}

.bpHelpIcon{
  padding: 0px 7px;
  line-height: 18px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.92);
  cursor: pointer;
  font-weight: 700;
}

/* host panel becomes the anchor */
.bpHelpHost{
  position: relative;
  min-height: 52px;   /* 40px or whatever fits */
}

/* the 3 buttons sit in the bottom-left of the host */
.bpHelpQuickBL{
  position: absolute;
  left: 6px;
  bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2000;
}

/* Wrapper around each main button cell */
.bpHelpCell{
  position: relative;
  padding-bottom: 26px;   /* creates space for the ? underneath */
}

/* Place the help icon centered at the bottom of the cell */
.bpHelpAbsBottomCenter{
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  z-index: 60;
}

/* Perfect round help button (targets the inner DF button element too) */
.bpHelpCircle{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-block;
}

.bpHelpCircle .WebBtn,
.bpHelpCircle .dfWebBtn,
.bpHelpCircle button{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  line-height: 22px !important;
  text-align: center !important;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.25) !important;
  background: rgba(255,255,255,.95) !important;
}

/* The group (cell/tile) */
 

/* Target DataFlex inner button element */
.bpHelpCircleOnly .WebBtn,
.bpHelpCircleOnly .dfWebBtn,
.bpHelpCircleOnly button{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  line-height: 22px !important;
  text-align: center !important;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.25) !important;
  background: rgba(255,255,255,.95) !important;
}

/* Make the help control itself shrink-to-fit */
.bpHelpCellStack .bpHelpCircleOnly{
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
}

/* Force DataFlex button to shrink + remove theme margins */
.bpHelpCellStack .bpHelpCircleOnly,
.bpHelpCellStack .bpHelpCircleOnly .WebBtn,
.bpHelpCellStack .bpHelpCircleOnly .dfWebBtn{
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* If your theme adds padding on the group contents, cancel it */
.bpHelpCellStack{
  text-align: center !important;
  align-items: center !important;
}

/* Center row */
.bpHelpRowCenter{
  width: 100%;
  display: flex !important;
  justify-content: center !important;

  /* remove the “line” look */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* DataFlex often floats controls; remove it so flex can center */
/* Remove any background/border under the help row */
.bpHelpRowCenter,
.bpHelpRowCenter *{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Also remove any separator line some themes add */
.bpHelpRowCenter{
  padding: 0 !important;
  margin: 0 !important;
}

/* Round help button */
.bpHelpCircleOnly{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-block;
}

/* Ensure the "?" is visible */
.bpHelpCircleOnly .WebBtn,
.bpHelpCircleOnly .dfWebBtn,
.bpHelpCircleOnly button{
  border: 2px solid rgba(0,0,0,.65) !important;
  background: rgba(255,255,255,.98) !important;
  border-radius: 999px !important;
}

/* If theme uses pseudo-elements, make sure it doesn't hide the text */
.bpHelpCircleOnly .WebBtn::before,
.bpHelpCircleOnly .dfWebBtn::before,
.bpHelpCircleOnly button::before{
  content: none !important;
}
.bpHelpCircleOnly .WebBtn::after,
.bpHelpCircleOnly .dfWebBtn::after,
.bpHelpCircleOnly button::after{
  content: none !important;
}

/* remove focus ring / inner highlight lines */
.bpHelpCircleOnly .WebBtn:focus,
.bpHelpCircleOnly .dfWebBtn:focus,
.bpHelpCircleOnly button:focus{
  outline: none !important;
  box-shadow: none !important;
}

.bpHelpCircleOnly span{
  display: inline !important;
  color: #000 !important;
  font-size: 14px !important;
}

.bpHelpHtmlCenter{
  text-align: center;
}

.bpHelpQ{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.70);
  background: rgba(255,255,255,.98);
  font-weight: 900;
  cursor: pointer;
  line-height: 18px;
}

/* centers content inside the htmlbox */
.bpHelpHtmlCenter{
  text-align: center;
}

.bpHelpDot{
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 2px solid rgba(0,0,0,.75) !important;
  background: rgba(255,255,255,.98) !important;

  font-weight: 900 !important;
  line-height: 22px !important;
  color: #000 !important;

  cursor: pointer !important;
  user-select: none !important;
}

.bpHelpDot:hover{
  background: #fff !important;
}

/* Bottom help host: collapsed vs open */
.bpHelpHost--collapsed{
  height: 52px;
  overflow: visible;   /* <-- key change */
}

.bpHelpHost--open{
  height: 320px;       /* panel height when assistant is open */
  overflow: auto;
}

/* contenedor del icono (no ocupa espacio raro) */
.bpHelpBulbBox{
  text-align: right;
}

/* el icono bombillo */
.bpHelpBulbImg{
  width: 30px;
  height: 30px;
  cursor: pointer;
  user-select: none;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}

.bpHelpBulbImg:hover{
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, .8));
  transform: scale(1.05);
}

.bpHowToList a{
  display:block;
  padding:8px 10px;
  margin:6px 0;
  border:1px solid rgba(0,0,0,.15);
  border-radius:8px;
  text-decoration:none;
  color:#003a66;
  background:#fff;
}
.bpHowToList a:hover{
  background:#f3fbff;
}
.bpHowToList small{
  color:#555;
}


.bpFaqItem{
  border:1px solid rgba(0,0,0,.15);
  border-radius:10px;
  margin:8px 0;
  background:#fff;
}
.bpFaqQ{
  padding:10px 12px;
  cursor:pointer;
  font-weight:700;
  color:#003a66;
}
.bpFaqA{
  padding:10px 12px;
  border-top:1px solid rgba(0,0,0,.10);
  display:none;
  color:#222;
}
.bpFaqItem.open .bpFaqA{ display:block; }

.bpFaqList .bpFaqItem{
  border:1px solid rgba(0,0,0,.15);
  border-radius:10px;
  margin:8px 0;
  background:#fff;
}

.bpFaqList .bpFaqQ{
  padding:10px 12px;
  cursor:pointer;
  font-weight:700;
  color:#003a66;
}

.bpFaqList .bpFaqMeta{
  padding:0 12px 10px 12px;
  color:#666;
  font-size:12px;
}

.bpFaqList .bpFaqA{
  padding:10px 12px;
  border-top:1px solid rgba(0,0,0,.10);
  display:none;
  color:#222;
}

.bpFaqList .bpFaqItem.open .bpFaqA{
  display:block;
}

.bpFaqList .bpFaqItem.open .bpFaqA{ display:block; }
.bpFaqList .bpFaqA{ display:none; }

.bpFaqRow{
  border:1px solid rgba(0,0,0,.15);
  border-radius:10px;
  margin:8px 0;
  background:#fff;
  padding:10px 12px;
  cursor:pointer;
}

.bpFaqRow:hover{ background:#f3fbff; }

.bpFaqRow.selected{
  border-color: rgba(0,90,160,.55);
  box-shadow: 0 0 0 2px rgba(0,90,160,.10);
}

.bpFaqRowQ{
  font-weight:700;
  color:#003a66;
  margin-bottom:4px;
}

.bpFaqRowMeta{
  font-size:12px;
  color:#666;
}

.bpFaqAnswer{
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  padding:12px 14px;
  background:#fff;
  margin-top:12px;
}

/* Make the FAQ list scroll so the answer box remains visible */
.bpFaqList{
  max-height: 760px;
  overflow-y: auto;
}

/* Ensure the drawer can scroll too (safe) */
.bpHelpDrawer{
  overflow-y: auto;
  max-height: 100%;
}

.bpChatTickets{
  max-height: 340px;
  overflow-y: auto;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  padding:8px;
  background:#fff;
}

.bpChatTickets .bpT{
  padding:8px 10px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:10px;
  margin:6px 0;
  cursor:pointer;
}
.bpChatTickets .bpT:hover{ background:#f3fbff; }
.bpChatTickets .bpT.sel{ border-color: rgba(0,90,160,.55); }

.bpChatThread{
  max-height: 220px;
  overflow-y: auto;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  padding:10px;
  background:#fff;
  margin-top:10px;
}

.bpMsg{ margin:8px 0; }
.bpMsg .meta{ font-size:12px; color:#666; margin-bottom:2px; }
.bpMsg .body{ padding:8px 10px; border-radius:10px; display:inline-block; max-width:92%; }
.bpMsg.user .body{ background:#eaf6ff; border:1px solid rgba(0,90,160,.15); }
.bpMsg.admin .body{ background:#fff4e6; border:1px solid rgba(255,140,0,.18); }

.bpVideoBox{
  margin-top: 10px;
}

.bpVideoWrap{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}

.bpVideoWrap iframe{
  width: 100%;
  height: 720px;
  border: 0;
  display: block;
}

.bpVideoWrap video{
  width: 100%;
  height: 820px;      /* adjust if you want */
  display: block;
  background: #000;
}