/* ============================================================
   GPS IMOBILIÁRIO — formularios-dinamicos.css
   Form builder + respostas + preencher + filtros
   Extraído de components.css · 2026-04-21
   ============================================================ */

/* Lista de formularios */
.form-lista-vazio { padding: 40px 20px; text-align: center; font-size: var(--font-base); color: var(--ink-muted); }
.form-card { background: white; border: 1px solid var(--cream-border); border-radius: 10px; padding: 16px 20px; margin-bottom: 10px; transition: box-shadow .15s; }
.form-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.form-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.form-card-nome { font-size: var(--font-base); font-weight: 500; color: var(--ink); margin-bottom: 3px; display: flex; align-items: center; gap: 6px; }
.form-card-meta { font-size: var(--font-sm); color: var(--ink-muted); }
.form-card-desc { font-size: var(--font-sm); color: var(--ink-soft); margin-top: 8px; }
.form-card-acoes { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.form-badge-pre { font-size: var(--font-xs); font-weight: 600; letter-spacing: .06em; background: var(--accent); color: white; padding: 1px 5px; border-radius: 3px; }
.badge-verde { background: rgba(45,80,22,0.1); color: var(--green); }
.badge-gold { background: rgba(184,150,12,0.12); color: var(--accent); }
.badge-danger { background: rgba(192,57,43,0.1); color: var(--red-soft); }

/* Editor de campos */
.form-campos-lista { margin-bottom: 12px; }
.form-campos-vazio { padding: 24px; text-align: center; font-size: var(--font-sm); color: var(--ink-muted); border: 1px dashed var(--cream-border); border-radius: var(--r); }
.form-campo-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--cream); border: 1px solid var(--cream-border); border-radius: var(--r); margin-bottom: 6px; }
.form-campo-drag { color: var(--ink-muted); cursor: grab; font-size: var(--font-lg); }
.form-campo-info { flex: 1; min-width: 0; }
.form-campo-label { font-size: var(--font-base); font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-campo-tipo { font-size: var(--font-sm); color: var(--ink-muted); }
.form-campo-acoes { display: flex; gap: 4px; flex-shrink: 0; }

/* Selector de tipo de campo */
.form-tipo-selector { display: none; background: white; border: 1px solid var(--cream-border); border-radius: 10px; padding: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); margin-bottom: 10px; }
.form-tipo-selector.open { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.form-tipo-btn { padding: 8px 6px; font-size: var(--font-sm); text-align: center; cursor: pointer; border: 1px solid var(--cream-border); border-radius: 6px; background: var(--cream); color: var(--ink-soft); transition: all .12s; }
.form-tipo-btn:hover { border-color: var(--accent); color: var(--ink); background: white; }

/* Respostas */
.resposta-card { background: white; border: 1px solid var(--cream-border); border-radius: 10px; padding: 16px; margin-bottom: 10px; }
.resposta-meta { font-size: var(--font-sm); color: var(--ink-muted); margin-bottom: 12px; }
.resposta-linha { display: flex; gap: 12px; margin-bottom: 8px; font-size: var(--font-base); }
.resposta-label { color: var(--ink-muted); min-width: 120px; flex-shrink: 0; }
.resposta-valor { color: var(--ink); font-weight: 500; }

/* Link de envio */
.enviar-link-input-wrap { display: flex; gap: 8px; margin-top: 8px; }
.enviar-link-input-wrap input { flex: 1; padding: 10px 12px; border: 1px solid var(--cream-border); border-radius: var(--r); font-family: 'DM Sans', sans-serif; font-size: var(--font-sm); color: var(--ink); background: var(--cream); outline: none; }


/* Formularios -- Responsividade adicional (preencher + respostas) */
@media (max-width: 768px) {
  /* Modal preencher: full screen no mobile */
  #modal-preencher-formulario .modal { max-width: 100% !important; border-radius: 16px 16px 0 0; margin-top: auto; }
  #modal-preencher-formulario.open { align-items: flex-end; }

  /* Respostas: header empilha em mobile */
  .resposta-card-header { flex-direction: column; gap: 8px; }
  .resposta-titulo { font-size: var(--font-sm); }

  /* Preencher seccao: padding reduzido */
  .preencher-seccao { padding: 6px 0 10px; }
  .preencher-seccao-titulo { font-size: var(--font-lg); }
}

/* Impressao de respostas */

/* Formularios -- Responsividade mobile */
@media (max-width: 768px) {
  /* Editor: grids passam a coluna unica */
  #modal-editor-formulario [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Selector de tipos: 2 colunas em vez de 3 */
  .form-tipo-selector.open { grid-template-columns: repeat(2, 1fr); }

  /* Cards de formularios: acoes empilham */
  .form-card-header { flex-direction: column; gap: 10px; }
  .form-card-acoes { width: 100%; justify-content: flex-start; flex-wrap: wrap; }

  /* Respostas: label e valor em coluna */
  .resposta-linha { flex-direction: column; gap: 2px; }
  .resposta-label { min-width: unset; }

  /* Enviar link: input e botao em coluna */
  .enviar-link-input-wrap { flex-direction: column; }
  .enviar-link-input-wrap .btn-confirm { width: 100% !important; }

  /* Campo item: acoes condensadas */
  .form-campo-item { flex-wrap: wrap; }
  .form-campo-acoes { margin-left: auto; }
}

@media (max-width: 460px) {
  .form-tipo-btn { padding: 10px 6px; font-size: var(--font-xs); }
}

@media print {
  body > *:not(#modal-respostas-formulario) { display: none !important; }
  #modal-respostas-formulario { position: static !important; display: block !important; }
  #modal-respostas-formulario .modal-overlay { position: static !important; background: none !important; }
  #modal-respostas-formulario .modal { max-height: none !important; box-shadow: none !important; border: none !important; max-width: 100% !important; }
  #modal-respostas-formulario .modal-header button { display: none !important; }
  #modal-respostas-formulario .modal-body { overflow: visible !important; }
  .resposta-card { break-inside: avoid; page-break-inside: avoid; border: 1px solid #ccc !important; }
  @page { margin: 20mm; }
}

/* Preencher formulario interno */
.preencher-seccao { padding: 8px 0 12px; border-bottom: 1px solid var(--cream-border); margin-bottom: 4px; }
.preencher-seccao-titulo { font-family: 'Cormorant Garamond', serif; font-size: var(--font-xl); font-weight: 600; color: var(--ink); }
.preencher-seccao-desc { font-size: var(--font-sm); color: var(--ink-muted); margin-top: 4px; }

/* Resposta card header */
.resposta-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.resposta-titulo { font-size: var(--font-base); font-weight: 600; color: var(--ink); margin-bottom: 2px; }

/* Drawer notificações — navegação (definição principal em linha ~1747) */
.resposta-item-info { flex: 1; min-width: 0; }

/* Breadcrumb formularios */
.form-breadcrumb { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: var(--font-sm); }
.form-breadcrumb-item { color: var(--ink-muted); cursor: pointer; transition: color .15s; }
.form-breadcrumb-item:hover { color: var(--ink); }
.form-breadcrumb-item.active { color: var(--ink); font-weight: 500; cursor: default; }
.form-breadcrumb-sep { color: var(--ink-muted); font-size: var(--font-base); }

/* Header da vista de respostas */
.form-respostas-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }

/* Item da lista de respostas (formulários) — única definição */
.resposta-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: white; border: 1px solid var(--cream-border); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: box-shadow .15s; }
.resposta-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.resposta-item-titulo { font-size: var(--font-base); font-weight: 500; color: var(--ink); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resposta-item-meta { font-size: var(--font-sm); color: var(--ink-muted); }

/* Print: mostrar apenas a vista de respostas */
@media print {
  body > *:not(#app-screen) { display: none !important; }
  .topbar, .sidebar, #app-footer { display: none !important; }
  #tab-formularios { display: block !important; }
  #form-vista-lista { display: none !important; }
  #form-vista-respostas { display: block !important; }
  .form-breadcrumb, .form-respostas-header .btn, .resposta-item { break-inside: avoid; }
  .notif-back, .resposta-card-header .btn { display: none !important; }
  @page { margin: 20mm; }
}

/* Assinatura */
.assinatura-wrap { position: relative; }
.assinatura-canvas { display: block; width: 100%; height: 160px; background: #fff; border: 1px solid var(--cream-border); border-radius: 8px; cursor: crosshair; touch-action: none; }
.assinatura-canvas:focus { outline: 2px solid var(--accent); }

/* Barra de filtros -- formularios (reutiliza .filtros-bar de negocios) */
.filtros-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filtros-bar .form-input,
.filtros-bar .form-select { height: 36px; font-size: var(--font-base); padding: 0 10px; }
@media (max-width: 600px) {
  .filtros-bar { flex-direction: column; }
  .filtros-bar .form-input,
  .filtros-bar .form-select { width: 100%; }
}