/* =========================================================================
   Empiria para VISITANTES (modo "solo buscar contenido").
   A un administrador el cajón le llega con imageadmin.css, que arrastra todo
   el modo edición; a un visitante no se le carga eso, así que aquí van solo
   las reglas del cajón que Empiria usa de ahí (mismos valores — si cambian
   allí, cambiar aquí). Lo propio del orbe sigue en ai-chat-orb.css.
   ========================================================================= */

.modal-dialog-right {
  position: fixed;
  right: 0;
  margin: 0;
  height: 100%;
  max-width: 70%;
}

.modal-dialog-right .modal-content {
  height: 100%;
  border-radius: 0;
}

.modal.fade .modal-dialog-right {
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}

.modal.show .modal-dialog-right {
  transform: translateX(0);
}

@media (min-width: 768px) {
  .modal-dialog-right {
    min-width: 500px;
    width: auto;
    max-width: 70%;
  }
}

@media (max-width: 767.98px) {
  .modal-dialog-right {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
}

.usr-drawer { display: flex; flex-direction: column; height: 100%; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: #101828; background: #fff; }
.usr-drawer__head { padding: 22px 26px; border-bottom: 1px solid #e6e9f0; display: flex; align-items: flex-start; gap: 14px; }
.usr-drawer__ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-size: 20px; flex: 0 0 auto; }
.usr-drawer__ttl { font-size: 18px; font-weight: 800; color: #00194b; margin: 0; line-height: 1.2; }
.usr-drawer__sub { font-size: 13px; color: #667085; margin-top: 3px; }
.usr-drawer__close { margin-left: auto; border: none; background: #f2f5fb; color: #667085; width: 34px; height: 34px; border-radius: 10px; cursor: pointer; transition: all .2s ease; display: grid; place-items: center; flex: 0 0 auto; }
.usr-drawer__close:hover { background: #e6e9f0; color: #101828; }
.usr-drawer__body { padding: 22px 26px; overflow-y: auto; flex: 1; min-height: 0; }
.usr-drawer__foot { padding: 16px 26px; border-top: 1px solid #e6e9f0; display: flex; flex-wrap: wrap; gap: 10px; }

.usr-btn { justify-content: center; border: none; border-radius: 11px; padding: 11px 22px; font-weight: 700; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: transform .2s, box-shadow .2s, filter .2s; }
.usr-btn-primary { color: #fff; background: linear-gradient(135deg, #4f8cff, #7c5cff); box-shadow: 0 12px 26px -12px rgba(79, 140, 255, .8); }
.usr-btn-primary:hover { transform: translateY(-2px); }
.usr-btn:disabled { filter: saturate(.6) opacity(.85); transform: none; cursor: wait; }
.usr-btn-ghost { background: #fff; color: #00194b; border: 1.5px solid #e6e9f0; }
.usr-btn-ghost:hover { border-color: #00194b; }
.usr-btn-sm { padding: 7px 14px; font-size: 12.5px; border-radius: 9px; }

/* Por encima del topbar/menús fijos del propio sitio. */
#empireAiChatModal {
  z-index: 1000010 !important;
}

/* El cajón no tiene fondo oscuro y la página se sigue pudiendo recorrer
   (Empiria hace scroll hasta lo que encuentra): se anula el bloqueo de
   scroll de Bootstrap, que con html/body a height:100% (utils.css) además
   mandaba la página arriba. Mismo motivo que el bloque "BLOQUEO DE SCROLL"
   de imageadmin.css, solo mientras está abierto este cajón.

   La barra de scroll se oculta (sin dejar de poder hacer scroll): si no, el
   cajón, pegado a right:0, quedaba a su izquierda con una franja de página
   asomando. El padding-right que pone Bootstrap mide esa barra y compensa,
   así que el contenido no se mueve al abrir. */
body.modal-open:has(#empireAiChatModal.show) {
  height: auto !important;
  overflow: visible !important;
}
html:has(> body.modal-open #empireAiChatModal.show) { scrollbar-width: none; }
html:has(> body.modal-open #empireAiChatModal.show)::-webkit-scrollbar { display: none; }