/* CRM — estándar móvil y escritorio para modales y formularios en diálogo */

:root {
  --crm-modal-width: 95%;
  --crm-modal-max-height: 90vh;
  --crm-modal-max-height-d: 90dvh;
  --crm-modal-pad-x: 1rem;
  --crm-modal-pad-y: 0.85rem;
  --crm-modal-field-gap: 0.875rem;
  --crm-modal-section-bg: #f8fafc;
  --crm-modal-section-border: #e2e8f0;
  --crm-modal-text: 0.9375rem;
  --crm-modal-input-text: 1rem;
}

.modal .modal-dialog.modal-sm,
.modal .modal-dialog.modal-lg,
.modal .modal-dialog.modal-xl {
  width: var(--crm-modal-width);
  max-width: var(--crm-modal-width);
}

/* Bootstrap rows/cols dentro de modales */
.modal .row {
  --bs-gutter-x: 0.75rem;
  --bs-gutter-y: var(--crm-modal-field-gap);
  margin-left: calc(var(--bs-gutter-x) * -0.5);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  width: calc(100% + var(--bs-gutter-x));
  max-width: calc(100% + var(--bs-gutter-x));
}

.modal .row > [class*="col-"] {
  min-width: 0;
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  padding-right: calc(var(--bs-gutter-x) * 0.5);
}

.modal .form-label {
  font-size: var(--crm-modal-text);
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.3rem;
}

.modal .form-control,
.modal .form-select {
  font-size: var(--crm-modal-input-text);
  min-height: 2.75rem;
}

body.modal-open {
  overflow-x: hidden;
}

/* Modal pago OC */
.po-pay-summary-card {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.po-pay-summary-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.85rem;
}

.po-pay-summary-card__label {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.po-pay-summary-card__total {
  margin: 0.2rem 0 0;
  font-size: 1.55rem;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.po-pay-summary-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.po-pay-modal__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.65rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.po-pay-modal__meta dt {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.po-pay-modal__meta dd {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
}

.po-pay-modal__total-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.85rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  font-size: 1rem;
}

.po-pay-modal__total-bar strong {
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  color: #1d4ed8;
}

/* ——— Contenedor del modal ——— */
.modal {
  overflow-x: hidden;
}

.modal .modal-dialog {
  width: var(--crm-modal-width);
  max-width: var(--crm-modal-width);
  margin: calc((100vh - var(--crm-modal-max-height)) / 2) auto;
  margin: calc((100dvh - var(--crm-modal-max-height-d)) / 2) auto;
  max-height: var(--crm-modal-max-height);
  max-height: var(--crm-modal-max-height-d);
  display: flex;
  align-items: stretch;
}

.modal .modal-dialog.modal-dialog-centered {
  min-height: 0;
}

.modal-dialog.modal-dialog-scrollable {
  height: auto;
}

.modal .modal-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: var(--crm-modal-max-height);
  max-height: var(--crm-modal-max-height-d);
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--crm-modal-section-border, #e2e8f0);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16);
}

.modal-dialog-scrollable .modal-content {
  max-height: var(--crm-modal-max-height);
  max-height: var(--crm-modal-max-height-d);
}

/* Cabecera fija con botón cerrar */
.modal .modal-header {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 3;
  padding: var(--crm-modal-pad-y) var(--crm-modal-pad-x);
  border-bottom: 1px solid var(--crm-modal-section-border, #e2e8f0);
  background: #fff;
  gap: 0.65rem;
}

.modal .modal-title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.modal .btn-close {
  flex-shrink: 0;
  margin: 0;
  padding: 0.5rem;
  opacity: 0.72;
}

/* Solo el cuerpo hace scroll */
.modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--crm-modal-pad-y) var(--crm-modal-pad-x);
  font-size: var(--crm-modal-text);
  color: #334155;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

/* Footer fijo con acciones */
.modal .modal-footer,
.crm-modal__footer {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
  padding: 0.75rem var(--crm-modal-pad-x);
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--crm-modal-section-border, #e2e8f0);
  background: #fff;
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.05);
}

.modal .modal-footer .btn,
.crm-modal__footer .btn {
  min-height: 2.75rem;
  font-size: var(--crm-modal-text);
  font-weight: 600;
  border-radius: 10px;
  margin: 0;
}

@media (max-width: 640px) {
  .modal .modal-footer,
  .crm-modal__footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .modal .modal-footer .btn,
  .crm-modal__footer .btn {
    width: 100%;
    min-height: 2.9rem;
  }
}

/*
 * Guardar en footer solo donde el modal ya trae el submit (evitar duplicado).
 * NO ocultar en la ficha del cliente: ahí viven sedes, contrato, etc. y el pie solo tiene «Cerrar».
 */
#client-edit-modal .modal-body .crm-form-actions,
#client-equipment-modal .modal-body .crm-form-actions,
#user-hr-modal .modal-body .crm-form-actions,
#user-edit-modal .modal-body .crm-form-actions {
  display: none !important;
}

/* ——— Formularios dentro de modales ——— */
.modal .crm-form,
.modal .tickets-modal-form,
.modal .client-site-form {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.modal .crm-form-grid,
.modal .tickets-modal-form .row {
  width: 100%;
  min-width: 0;
  gap: var(--crm-modal-field-gap);
}

.modal .crm-field,
.modal .tickets-modal-form .col,
.modal .tickets-modal-form [class*="col-"] {
  min-width: 0;
  max-width: 100%;
}

.modal .crm-form .crm-field > label,
.modal .crm-form-grid .crm-field > label,
.modal .tickets-modal-label,
.modal #ticket-visit-report-fields label {
  font-size: var(--crm-modal-text);
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.3rem;
}

.modal .crm-form input:not([type="checkbox"]):not([type="hidden"]):not([type="file"]),
.modal .crm-form select,
.modal .crm-form textarea,
.modal .tickets-modal-control,
.modal #ticket-form input:not([type="checkbox"]):not([type="hidden"]),
.modal #ticket-form select,
.modal #ticket-form textarea,
.modal #ticket-visit-report-fields input:not([type="hidden"]),
.modal #ticket-visit-report-fields select,
.modal #ticket-visit-report-fields textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
  font-size: var(--crm-modal-input-text);
}

/* Una columna en pantallas estrechas */
@media (max-width: 991px) {
  .modal .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  .modal .crm-form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--crm-modal-field-gap);
  }

  .modal .tickets-modal-form .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  .modal .tickets-modal-form .row {
    --bs-gutter-y: var(--crm-modal-field-gap);
  }

  .modal fieldset > div[style*="grid-template-columns"],
  #ticket-visit-report-fields fieldset > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--crm-modal-field-gap) !important;
  }
}

/* ——— Secciones con jerarquía visual ——— */
.modal .tickets-modal-section.card,
.modal .crm-form fieldset,
.modal .crm-form .crm-form-block,
.modal .legal-rep-fieldset,
#ticket-visit-report-fields fieldset {
  background: var(--crm-modal-section-bg);
  border: 1px solid var(--crm-modal-section-border);
  border-radius: 12px;
  padding: 0.85rem 0.9rem;
  margin: 0 0 1rem;
  box-shadow: none;
}

#ticket-visit-report-fields fieldset.vr-wty-case-res-focus {
  outline: 2px solid #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25);
}

.modal .tickets-modal-section__head {
  padding: 0 0 0.55rem;
  margin-bottom: 0.55rem;
  border-bottom: 1px solid #e8eef4;
  background: transparent;
}

.modal .tickets-modal-section__title,
.modal .crm-form fieldset legend,
.modal .legal-rep-fieldset legend,
#ticket-visit-report-fields fieldset legend {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
  line-height: 1.35;
  padding: 0 0.2rem;
}

.modal .tickets-modal-section__body {
  padding: 0.15rem 0 0;
}

.modal .tickets-modal-hint,
.modal .main-lead,
.modal .crm-form-hint {
  font-size: var(--crm-modal-text);
  line-height: 1.45;
  color: #64748b;
}

#ticket-po-modal .ticket-po-modal__dialog {
  width: var(--crm-modal-width) !important;
  max-width: var(--crm-modal-width) !important;
  margin: calc((100vh - var(--crm-modal-max-height)) / 2) auto !important;
  margin: calc((100dvh - var(--crm-modal-max-height-d)) / 2) auto !important;
  max-height: var(--crm-modal-max-height);
  max-height: var(--crm-modal-max-height-d);
}

#ticket-po-modal .ticket-po-modal__content {
  max-height: var(--crm-modal-max-height);
  max-height: var(--crm-modal-max-height-d);
}

#ticket-po-modal .ticket-po-modal__header {
  padding: var(--crm-modal-pad-y) var(--crm-modal-pad-x);
}

#ticket-po-modal .ticket-po-modal__subtitle {
  font-size: var(--crm-modal-text);
}

#ticket-po-modal .ticket-po-modal__body {
  padding: var(--crm-modal-pad-y) var(--crm-modal-pad-x);
}

#ticket-po-modal .ticket-po-modal__footer {
  padding: 0.75rem var(--crm-modal-pad-x);
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

/* ——— Ticket modal (estructura propia) ——— */
#ticket-create-modal .ticket-edit-modal__dialog {
  width: var(--crm-modal-width) !important;
  max-width: var(--crm-modal-width) !important;
  margin: calc((100vh - var(--crm-modal-max-height)) / 2) auto !important;
  margin: calc((100dvh - var(--crm-modal-max-height-d)) / 2) auto !important;
  max-height: var(--crm-modal-max-height);
  max-height: var(--crm-modal-max-height-d);
}

#ticket-create-modal .ticket-edit-modal__content {
  max-height: var(--crm-modal-max-height);
  max-height: var(--crm-modal-max-height-d);
}

#ticket-create-modal .ticket-edit-modal__header {
  padding: var(--crm-modal-pad-y) var(--crm-modal-pad-x);
}

#ticket-create-modal .modal-title {
  font-size: 1.2rem;
}

#ticket-create-modal .ticket-edit-modal__subtitle {
  font-size: var(--crm-modal-text);
}

#ticket-create-modal .ticket-create-modal__body {
  padding: var(--crm-modal-pad-y) var(--crm-modal-pad-x);
}

#ticket-create-modal .ticket-create-modal__footer,
#ticket-create-modal .tickets-modal-actions {
  padding: 0.75rem var(--crm-modal-pad-x);
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

#ticket-visit-report-card.tickets-modal-panel {
  max-height: none;
}

#ticket-visit-report-fields .users-table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ——— Sin scroll horizontal ——— */
.modal *,
.modal *::before,
.modal *::after {
  box-sizing: border-box;
}

.modal img,
.modal video,
.modal canvas,
.modal iframe,
.modal table {
  max-width: 100%;
}

@media (max-width: 991px) {
  :root {
    --crm-modal-pad-x: 0.85rem;
    --crm-modal-pad-y: 0.75rem;
    --crm-modal-field-gap: 1rem;
  }
}