/* =========================================================================
   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. */
body.modal-open:has(#empireAiChatModal.show) {
  height: auto !important;
  overflow: visible !important;
  padding-right: 0 !important;
}