/* ============================================================
   GPSHUB Modales — shell común de los diálogos (rediseño /routes).
   Mismo lenguaje visual ghc-* que Flota y los drawers: header azul
   sólido, borde azul 2.5px + sombra azulada, tokens en todo.
   Reemplaza los shells duplicados (devmodal-, ga-, lr-, about-).

   Las variables :root (--ghc-*) viven en map-control-panel.css y NO
   se redefinen acá. Los primitivos de formulario/acción (.ghc-btn,
   .ghc-btn-primary, .ghc-input, .ghc-field, .ghc-error) viven en
   panel-common.css; los menús (.ghc-menu-item) en fleet-panel.css.
   Acá solo el shell del diálogo modal.
   ============================================================ */

.ghc-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, .4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ghc-modal {
  display: flex;
  flex-direction: column;
  width: 460px;
  max-width: 92vw;
  max-height: 92vh;
  background: var(--ghc-bg);
  color: var(--ghc-text);
  font-family: var(--ghc-font);
  font-size: 14px;
  /* mismo marco que el panel de Flota: borde azul grueso + sombra azulada */
  border: 2.5px solid var(--ghc-primary);
  border-radius: var(--ghc-radius);
  box-shadow: 0 4px 16px rgba(24, 95, 165, .25);
  overflow: hidden;
}
.ghc-modal-xs { width: 340px; }
.ghc-modal-sm { width: 420px; }
.ghc-modal-lg { width: 760px; max-width: 94vw; }

.ghc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  background: var(--ghc-primary);
  color: #fff;
  flex-shrink: 0;
}
.ghc-modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.ghc-modal-title i,
.ghc-modal-header > i { color: #fff; }

.ghc-modal-close {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #cfe0f0;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1;
}
.ghc-modal-close:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.ghc-modal-close:focus-visible { outline: 3px solid #fff; outline-offset: 1px; }

.ghc-modal-body { padding: 14px; overflow-y: auto; }

.ghc-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--ghc-border);
  flex-shrink: 0;
}

/* estado de carga inline dentro del cuerpo */
.ghc-modal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 0;
  color: var(--ghc-text-muted);
}
.ghc-modal-loading i { color: var(--ghc-primary); }

/* separación vertical entre campos apilados dentro del modal (el .ghc-field base no
   trae margen; dentro de un .ghc-field-row los campos quedan flush, sin margen propio) */
.ghc-modal-body > .ghc-field,
.ghc-modal-body > .ghc-field-row { margin-bottom: 10px; }
.ghc-modal-body > .ghc-field:last-child,
.ghc-modal-body > .ghc-field-row:last-child { margin-bottom: 0; }