/* ============================================================
   Modales de confirmación in-app (reemplazan al confirm() nativo).
   Estilo minimalista alineado con sidepanel: Inter, bordes suaves,
   paleta neutra con acento azul Cenipalma (#0076A8).
   ============================================================ */
.modal-backdrop.app-confirm-backdrop {
  background: rgba(15, 23, 42, 0.35);
}

/* El sidepanel tiene z-index 1999 (var --z-sidepanel). Hay que elevar
   tanto el modal como su backdrop por encima para que el dialog no
   quede oculto detras del panel. */
.modal.app-confirm-open,
.modal:has(.app-confirm-dialog) {
  z-index: 9999 !important;
}
.modal-backdrop.app-confirm-backdrop {
  z-index: 9998 !important;
}

/* Posicionamiento del dialog: SIEMPRE fixed con transform centering. El JS
   dentro del modal calcula top/left para anclarlo al sidepanel; si no
   encuentra panel, se queda en el centro de la ventana (50vw/50vh).
   Usamos !important para garantizar que Bootstrap no nos sobreescriba. */
.modal-dialog.app-confirm-dialog {
  position: fixed !important;
  top: 50vh !important;
  left: 50vw !important;
  transform: translate(-50%, -50%) !important;
  max-width: 420px !important;
  width: 90% !important;
  margin: 0 !important;
  transition: top 0.18s ease, left 0.18s ease;
}

.app-confirm-dialog .modal-content {
  border: none;
  border-radius: 12px;
  box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.35);
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

.app-confirm-dialog .modal-header,
.app-confirm-dialog .modal-footer { display: none; }

.app-confirm-dialog .modal-body { padding: 0; }

.app-confirm-body {
  padding: 22px 22px 18px;
  background: #ffffff;
}

.app-confirm-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: -0.1px;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-confirm-title .app-confirm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.app-confirm-title .app-confirm-icon--default {
  background: rgba(0, 118, 168, 0.12);
  color: #0076A8;
}
.app-confirm-title .app-confirm-icon--warning {
  background: rgba(217, 119, 6, 0.14);
  color: #b45309;
}

.app-confirm-message {
  font-size: 12.5px;
  color: #4a5868;
  line-height: 1.5;
  margin: 0;
}

.app-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 22px 18px;
  background: #ffffff;
}

.app-confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.app-confirm-btn--cancel {
  background: #ffffff;
  color: #4a5868;
  border-color: rgba(15, 27, 45, 0.15);
}
.app-confirm-btn--cancel:hover {
  background: rgba(15, 27, 45, 0.04);
  border-color: rgba(15, 27, 45, 0.25);
  color: #1f2937;
}

.app-confirm-btn--ok {
  background: #0076A8;
  color: #ffffff;
}
.app-confirm-btn--ok:hover {
  background: #005a83;
}
.app-confirm-btn--ok.app-confirm-btn--warning {
  background: #d97706;
}
.app-confirm-btn--ok.app-confirm-btn--warning:hover {
  background: #b45309;
}