/**
 * mom-ui — kit visual base do framework (páginas + modais).
 *
 * Tokens: usa --headerbar-btn / --primary-color de app.css quando existirem.
 * Classes canônicas: .mom-*
 * Alias de compatibilidade: .fin-* (legado SIGV finUi) — mesmo estilo.
 *
 * Página:
 *   .mom-page > .mom-page-head (+ .mom-page-head-text / .mom-page-head-actions)
 *            > .mom-card.divQuadro > .divQuadroTitle + .mom-page-body
 *
 * Modal:
 *   .modal > .mom-modal-dialog[.mom-modal-wide] > .mom-modal
 *     > .mom-modal-head | .mom-modal-body | .mom-modal-footer
 */

/* ===== Tokens de superfície (kit) ===== */
:root {
  --mom-ui-surface: #ffffff;
  --mom-ui-surface-muted: #f8fafc;
  --mom-ui-page-bg: #f1f5f9;
  --mom-ui-border: #cbd5e1;
  --mom-ui-text: #0f172a;
  --mom-ui-text-muted: #64748b;
  --mom-ui-text-soft: #475569;
  --mom-ui-accent: var(--headerbar-btn, var(--primary-color, #2563eb));
  --mom-ui-radius: 12px;
  --mom-ui-radius-sm: 8px;
  --mom-ui-radius-lg: 14px;
  --mom-ui-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04);
  --mom-ui-shadow-modal: 0 20px 50px rgba(15, 23, 42, 0.18);
}

/* ===== Página ===== */
.mom-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 88px;
  background: var(--mom-ui-page-bg);
  min-height: 100%;
  box-sizing: border-box;
}

.mom-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.mom-page-head-text h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--mom-ui-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.mom-page-head-text h2 i {
  color: var(--mom-ui-accent);
}

.mom-page-head-text p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--mom-ui-text-muted);
}

.mom-page-head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mom-page .mom-card.divQuadro,
.mom-card.divQuadro {
  width: 100%;
  margin: 0;
  padding: 0;
  float: none;
  background: var(--mom-ui-surface);
  border: 1px solid var(--mom-ui-border);
  border-radius: var(--mom-ui-radius);
  box-shadow: var(--mom-ui-shadow-card);
  overflow: hidden;
}

.mom-page .mom-card .divQuadroTitle,
.mom-card .divQuadroTitle {
  margin: 0;
  padding: 12px 14px;
  background: var(--mom-ui-surface-muted);
  border-bottom: 1px solid var(--mom-ui-border);
  align-items: center;
}

.mom-page .mom-card .divTitle,
.mom-card .divTitle {
  width: auto;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--mom-ui-text);
  display: flex;
  align-items: center;
  gap: 8px;
  float: none;
}

.mom-page .mom-card .divTitle i,
.mom-card .divTitle i {
  color: var(--mom-ui-accent);
}

.mom-page .mom-card .btnTitleClose,
.mom-card .btnTitleClose {
  border-radius: var(--mom-ui-radius-sm);
}

.mom-page-body {
  padding: 12px 14px 6px;
}

.mom-page-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  width: 100%;
}

.mom-page .divCampo {
  margin-bottom: 10px;
}

.mom-page .divCampo > label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--mom-ui-text-muted);
}

.mom-page .divCampo input,
.mom-page .divCampo select,
.mom-page .divCampo textarea {
  border: 1px solid var(--mom-ui-border);
  border-radius: var(--mom-ui-radius-sm);
  min-height: 34px;
}

.mom-page .divCampo input.inputReadOnly,
.mom-page .divCampo input[readonly] {
  background: #f1f5f9;
  color: var(--mom-ui-text-soft);
}

.mom-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 0 2px;
}

.mom-chips input[type="checkbox"],
.mom-chips input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mom-chips label {
  margin: 0 !important;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--mom-ui-border);
  background: var(--mom-ui-surface-muted);
  color: #334155;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
}

.mom-chips input:checked + label {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.mom-hint {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--mom-ui-text-muted);
  line-height: 1.35;
}

/* ===== Modal (mom-* + fin-* legado) ===== */
.mom-modal-dialog,
.fin-modal-dialog {
  width: 560px;
  max-width: calc(100vw - 24px);
  margin: 40px auto;
}

.mom-modal-wide,
.fin-modal-wide {
  width: 720px;
}

.mom-modal-wide-lg,
.fin-modal-wide-lg {
  width: 920px;
}

.mom-modal,
.fin-modal {
  border: none;
  border-radius: var(--mom-ui-radius-lg);
  overflow: hidden;
  box-shadow: var(--mom-ui-shadow-modal);
}

.mom-modal-head,
.fin-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: var(--mom-ui-surface-muted);
  border-bottom: 1px solid var(--mom-ui-border);
}

.mom-modal-head h3,
.fin-modal-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--mom-ui-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.mom-modal-head h3 i,
.fin-modal-head h3 i {
  color: var(--mom-ui-accent);
}

.mom-modal-head p,
.fin-modal-head p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--mom-ui-text-muted);
}

.mom-modal-close,
.fin-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--mom-ui-radius-sm);
  background: #fee2e2;
  color: #b91c1c;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.mom-modal-body,
.fin-modal-body {
  padding: 16px 18px;
  background: var(--mom-ui-surface);
  max-height: calc(100vh - 200px);
  overflow: auto;
}

.mom-modal-footer,
.fin-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 18px;
  background: var(--mom-ui-surface-muted);
  border-top: 1px solid var(--mom-ui-border);
}

.mom-modal-footer-right,
.fin-modal-footer-right {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.mom-modal-badge,
.fin-modal-badge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  font-size: 13px;
  font-weight: 600;
}

.mom-modal-badge .btn,
.fin-modal-badge .btn {
  margin: 0;
  padding: 4px 10px;
  font-size: 12px;
}

.mom-modal-block,
.fin-modal-block {
  margin: 0 0 14px;
  padding: 12px 12px 4px;
  border: 1px solid var(--mom-ui-border);
  border-radius: var(--mom-ui-radius);
  background: var(--mom-ui-surface);
}

.mom-modal-block-pay,
.fin-modal-block-pay {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.mom-modal-block-title,
.fin-modal-block-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mom-ui-text-muted);
}

.mom-modal-row,
.fin-modal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mom-modal-field,
.fin-modal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  min-width: 0;
}

.mom-modal-field[hidden],
.mom-modal-badge[hidden],
.mom-modal-block[hidden],
.fin-modal-field[hidden],
.fin-modal-badge[hidden],
.fin-modal-block[hidden] {
  display: none !important;
}

.mom-field-grow,
.fin-field-grow { flex: 1 1 220px; }

.mom-field-md,
.fin-field-md { flex: 1 1 140px; max-width: 220px; }

.mom-field-sm,
.fin-field-sm { flex: 0 0 110px; }

.mom-field-full,
.fin-field-full { flex: 1 1 100%; }

.mom-modal-field label,
.fin-modal-field label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--mom-ui-text-muted);
}

.mom-modal-field input,
.mom-modal-field select,
.mom-modal-textarea,
.fin-modal-field input,
.fin-modal-field select,
.fin-modal-textarea {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--mom-ui-border);
  border-radius: var(--mom-ui-radius-sm);
  padding: 6px 10px;
  font-size: 13px;
  color: var(--mom-ui-text);
  box-sizing: border-box;
  background: var(--mom-ui-surface);
}

.mom-modal-field input.inputReadOnly,
.mom-modal-field input[readonly],
.fin-modal-field input.inputReadOnly,
.fin-modal-field input[readonly] {
  background: #f1f5f9;
  color: var(--mom-ui-text-soft);
}

.mom-modal-textarea,
.fin-modal-textarea {
  min-height: 72px;
  resize: vertical;
}

.mom-modal-field .btn,
.fin-modal-field .btn {
  width: 100%;
}

.mom-modal-hint,
.fin-modal-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--mom-ui-text-muted);
  line-height: 1.35;
}

.mom-file,
.fin-file {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1.5px dashed var(--mom-ui-border);
  border-radius: 10px;
  background: var(--mom-ui-surface-muted);
  cursor: pointer;
  margin: 0;
  position: relative;
}

.mom-file:hover,
.fin-file:hover {
  border-color: #93c5fd;
  background: #eff6ff;
}

.mom-file.is-filled,
.fin-file.is-filled {
  border-style: solid;
  border-color: #86efac;
  background: #f0fdf4;
}

.mom-file input[type="file"],
.fin-file input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.mom-file-icon,
.fin-file-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--mom-ui-border);
  color: var(--mom-ui-text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mom-file.is-filled .mom-file-icon,
.fin-file.is-filled .fin-file-icon {
  background: #dcfce7;
  color: #16a34a;
}

.mom-file-text,
.fin-file-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.mom-file-text strong,
.fin-file-text strong {
  font-size: 13px;
  color: var(--mom-ui-text);
}

.mom-file-text small,
.fin-file-text small {
  font-size: 12px;
  color: var(--mom-ui-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mom-file-btn,
.fin-file-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: var(--mom-ui-radius-sm);
  background: var(--mom-ui-border);
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 720px) {
  .mom-field-md,
  .mom-field-sm,
  .fin-field-md,
  .fin-field-sm {
    flex: 1 1 100%;
    max-width: none;
  }

  .mom-modal-footer,
  .fin-modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .mom-modal-footer-right,
  .fin-modal-footer-right {
    margin-left: 0;
    width: 100%;
  }

  .mom-modal-footer .btn,
  .fin-modal-footer .btn {
    width: 100%;
  }
}