/* Estándar compartido para ventanas de alta y edición de QBAI.
   Ver docs/GUIA_ESTILO_VISUAL_QBAI.md, sección 4.7. */
:is(.qbai-edit-modal, #configModal .modal, #masterModal .modal, #itemProviderFormModal .modal, #providerEditorModal .modal-content, #crearCompraModal > .modal, #compraModal > .modal, #pedidoModal > .modal, #proyectosModal > .modal, #manualReceiptModal .modal, #checkbookModal .payment-dialog, #reverseDialog, #transferDialog, #disposeDialog, #classificationDialog) {
  background: #fff;
  border: 1px solid var(--stroke, var(--line, #dfe3df));
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(24, 30, 24, .18);
}

:is(.qbai-edit-modal, #configModal .modal, #masterModal .modal, #itemProviderFormModal .modal, #providerEditorModal .modal-content, #crearCompraModal > .modal, #compraModal > .modal, #pedidoModal > .modal, #proyectosModal > .modal, #manualReceiptModal .modal, #checkbookModal .payment-dialog, #reverseDialog, #transferDialog, #disposeDialog, #classificationDialog) :is(.modal-head, .modal-header, .detail-head, header) {
  /* `display` y `justify-content` van declarados acá y no dados por sentado:
     esta hoja ponía `align-items` y `gap` —propiedades que sólo hacen algo en
     un contenedor flex— confiando en que el módulo declarara el `display`. Los
     módulos que ya tenían modales de edición lo hacían, así que el agujero no
     se veía; el primer módulo que estrenó una modal con esta hoja sola
     (Tesorería, 2026-09-23) mostró el «Cerrar» debajo del título y a la
     izquierda en vez de arriba a la derecha. Misma forma que el ítem del menú
     «Ir» (lección L33). */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 0;
  padding: 16px 20px 14px;
  border-bottom: 1px solid #e3e6e3;
  background: #fff;
}

:is(.qbai-edit-modal, #configModal .modal, #masterModal .modal, #itemProviderFormModal .modal, #providerEditorModal .modal-content, #crearCompraModal > .modal, #compraModal > .modal, #pedidoModal > .modal, #proyectosModal > .modal, #manualReceiptModal .modal, #checkbookModal .payment-dialog, #reverseDialog, #transferDialog, #disposeDialog, #classificationDialog) :is(.modal-head h2, .modal-header h3, .detail-head h3, header h2) {
  margin: 0;
  color: var(--text, #292b27);
  font-size: 1.1rem;
}

:is(.qbai-edit-modal, #configModal .modal, #masterModal .modal, #itemProviderFormModal .modal, #providerEditorModal .modal-content, #crearCompraModal > .modal, #compraModal > .modal, #pedidoModal > .modal, #proyectosModal > .modal, #manualReceiptModal .modal, #checkbookModal .payment-dialog, #reverseDialog, #transferDialog, #disposeDialog, #classificationDialog) :is(.modal-head p, .modal-header p, .detail-head p, header p) {
  margin: 4px 0 0;
  color: var(--muted, #6c7169);
}

:is(.qbai-edit-modal, #configModal .modal, #masterModal .modal, #itemProviderFormModal .modal, #providerEditorModal .modal-content, #crearCompraModal > .modal, #compraModal > .modal, #pedidoModal > .modal, #proyectosModal > .modal, #manualReceiptModal .modal, #checkbookModal .payment-dialog, #reverseDialog, #transferDialog, #disposeDialog, #classificationDialog) :is(form, .edit-modal-body, .detail-body) { padding: 16px 20px 20px; }

:is(.qbai-edit-modal, #configModal .modal, #masterModal .modal, #itemProviderFormModal .modal, #providerEditorModal .modal-content, #crearCompraModal > .modal, #compraModal > .modal, #pedidoModal > .modal, #proyectosModal > .modal, #manualReceiptModal .modal, #checkbookModal .payment-dialog, #reverseDialog, #transferDialog, #disposeDialog, #classificationDialog) :is(.form-grid, .payment-form) { gap: 12px 18px; }

:is(.qbai-edit-modal, #configModal .modal, #masterModal .modal, #itemProviderFormModal .modal, #providerEditorModal .modal-content, #crearCompraModal > .modal, #compraModal > .modal, #pedidoModal > .modal, #proyectosModal > .modal, #manualReceiptModal .modal, #checkbookModal .payment-dialog, #reverseDialog, #transferDialog, #disposeDialog, #classificationDialog) :is(.form-grid label, .payment-form label) { color: var(--muted, #6c7169); font-size: .75rem; }

:is(.qbai-edit-modal, #configModal .modal, #masterModal .modal, #itemProviderFormModal .modal, #providerEditorModal .modal-content, #crearCompraModal > .modal, #compraModal > .modal, #pedidoModal > .modal, #proyectosModal > .modal, #manualReceiptModal .modal, #checkbookModal .payment-dialog, #reverseDialog, #transferDialog, #disposeDialog, #classificationDialog) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 34px;
  border: 1px solid #d6dad6;
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
}

/* Los valores técnicos no editables conservan la misma superficie blanca que
   los campos editables: la restricción se comunica por su comportamiento, no
   por un fondo beige que pueda parecer una advertencia. */
#invoiceDetailModal .modal-content.qbai-edit-modal .detail-value {
  border-color: #d6dad6;
  border-radius: 6px;
  background: #fff !important;
}

:is(.qbai-edit-modal, #configModal .modal, #masterModal .modal, #itemProviderFormModal .modal, #providerEditorModal .modal-content, #crearCompraModal > .modal, #compraModal > .modal, #pedidoModal > .modal, #proyectosModal > .modal, #manualReceiptModal .modal, #checkbookModal .payment-dialog, #reverseDialog, #transferDialog, #disposeDialog, #classificationDialog) textarea { min-height: 72px; }

:is(.qbai-edit-modal, #configModal .modal, #masterModal .modal, #itemProviderFormModal .modal, #providerEditorModal .modal-content, #crearCompraModal > .modal, #compraModal > .modal, #pedidoModal > .modal, #proyectosModal > .modal, #manualReceiptModal .modal, #checkbookModal .payment-dialog, #reverseDialog, #transferDialog, #disposeDialog, #classificationDialog) :is(input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus) {
  border-color: var(--brand, #087f5b);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand, #087f5b) 14%, transparent);
}

:is(.qbai-edit-modal, #configModal .modal, #masterModal .modal, #itemProviderFormModal .modal, #providerEditorModal .modal-content, #crearCompraModal > .modal, #compraModal > .modal, #pedidoModal > .modal, #proyectosModal > .modal, #manualReceiptModal .modal, #checkbookModal .payment-dialog, #reverseDialog, #transferDialog, #disposeDialog, #classificationDialog) :is(.modal-actions, .payment-form-actions, .form-actions) { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 900px) {
  :is(.qbai-edit-modal, #configModal .modal, #masterModal .modal, #itemProviderFormModal .modal, #providerEditorModal .modal-content, #crearCompraModal > .modal, #compraModal > .modal, #pedidoModal > .modal, #proyectosModal > .modal, #manualReceiptModal .modal, #checkbookModal .payment-dialog, #reverseDialog, #transferDialog, #disposeDialog, #classificationDialog) :is(.modal-head, .modal-header, .detail-head, header) { align-items: stretch; flex-direction: column; }
}