/* NovaFrames front */
.nfs-wrap{ max-width:1000px; margin:0 auto; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.nfs-block{ margin:18px 0; padding:12px; border:1px solid #e5e7eb; border-radius:8px; background:#fff }
.nfs-block h3{ margin:0 0 8px; }

/* Steps chips */
.nfs-steps{ display:flex; gap:8px; flex-wrap:wrap; padding:8px 12px; margin:0 0 12px; border-bottom:1px solid #e5e7eb; background:#ffffff; }
.nfs-steps--sticky{ position:sticky; top:0; z-index:20; }
.nfs-step{ font-size:13px; padding:6px 10px; border:1px solid #e5e7eb; border-radius:999px; background:#f9fafb; color:#374151; }
.nfs-step.is-active{ background:#2563eb; color:#fff; border-color:#2563eb; }
.nfs-step.is-done{ background:#e0e7ff; color:#1e3a8a; border-color:#c7d2fe; }

/* Consents block */
.nfs-consents{ margin-top:12px; padding:12px; border:1px solid #e5e7eb; border-radius:8px; background:#fafafa }
.nfs-consents .nfs-consent-item{ display:block; margin:8px 0; font-size:14px; line-height:1.4 }
.nfs-consents .nfs-consent-item input{ margin-right:8px }
.nfs-consents .nfs-consent-help{ color:#6b7280; font-size:13px; margin-top:8px }

/* Preview scale */
#nfs-preview-wrap{ display:inline-block; transform-origin: top left; }
#nfs-preview-wrap[data-scale]{ transform: scale(calc(var(--nfs-preview-scale, 1))); }

/* Inputs aesthetic */
.nfs-wrap input[type=text], .nfs-wrap input[type=email]{
  background:#fff; color:#111827; border:1px solid #d1d5db; padding:8px 10px; border-radius:8px; margin-right:6px; transition:border-color .15s, box-shadow .15s;
}
.nfs-wrap input[type=text]:focus, .nfs-wrap input[type=email]:focus{ outline:0; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15); }

/* Buttons */
.nfs-wrap .button{ background:#111827; color:#fff; border:0; border-radius:8px; padding:8px 12px; }
.nfs-wrap .button:hover{ filter:brightness(1.05); }
.nfs-wrap .button[disabled]{ opacity:.5; cursor:not-allowed; }
.nfs-otp-controls {padding: 11px 0; }

/* Photo block height harmonization */
.nfs-block:has(#nfs-preview-wrap){ position:relative; }
.nfs-photo-minh{ min-height:100px; } /* JS ajusta dinámicamente */

/* Result cards */
.nfs-result-card{ border:1px solid #e5e7eb; border-radius:10px; padding:10px; margin:8px 0; background:#fff; }
.nfs-result-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.nfs-result-actions a.button{ text-decoration:none; }


/* === Visual 1.9.8-visual (frontend only) === */

/* Step 1 stack */
#nfs-step1 .nfs-fields{ display:block; }
#nfs-step1 .nfs-field{ margin:0 0 10px; }
#nfs-step1 .nfs-field-error{ display:none; color:#b91c1c; font-size:12px; margin-top:4px; }
#nfs-step1 [aria-invalid="true"]{ border-color:#b91c1c !important; }

/* Disabled look safeguard */
.button[disabled], .nfs-disabled{ opacity:.55; cursor:not-allowed; pointer-events:none; }

/* Chips shell; JS toggles absolute/fixed inside .nfs-wrap */
.nfs-wrap{ position:relative; }
.nfs-steps{ position:absolute; top:12px; right:12px; display:flex; flex-direction:column; gap:8px; z-index:30;
  background:rgba(255,255,255,.95); border:1px solid #e5e7eb; border-radius:12px; padding:8px; box-shadow:0 4px 16px rgba(0,0,0,.08); }
.nfs-step{ background:#f3f4f6; color:#374151; border-color:#e5e7eb; }
.nfs-step.is-active{ background:#374151; color:#fff; border-color:#374151; }
.nfs-step.is-done{ background:#e5e7eb; color:#111827; border-color:#e5e7eb; }

/* Preview fixes (as 1.9.6) */
#nfs-step3 .nfs-photo-minh{ min-height:0 !important; }
#nfs-preview-wrap{ display:inline-block; transform-origin: top left; height: var(--nfs-preview-h, auto); position: relative; }
#nfs-preview-wrap.is-loading::before{ content:''; position:absolute; inset:0; background:rgba(255,255,255,.6); pointer-events:none; }
#nfs-preview-wrap.is-loading::after{ content:'Cargando…'; position:absolute; top:8px; right:8px; font-size:12px; color:#374151; pointer-events:none; }

/* Hide raw URL in results header only */
.nfs-result-card > div:first-child a{ display:none !important; }


/* === Visual 1.9.8-visual4 (minimal, safe) === */
div#nfs-step3{ height:800px; } /* desktop requested */
@media (max-width: 768px){
  div#nfs-step3{ height:auto; }
  #nfs-preview-wrap{ width:100%; }
  #nfs-canvas{ width:100% !important; height:auto !important; }
}


/* === Visual 1.9.9-visual: mobile-friendly preview, safe step flow, quiet chips on mobile === */

/* 2) Step 3: min-height in desktop, auto flow otherwise */
#nfs-step3{
  min-height: 800px;
  height: auto;
  position: relative;
  overflow: visible;
}
@media (max-width: 768px){
  #nfs-step3{ min-height: 0; height:auto; }
}

/* Ensure Step 4 flows below */
#nfs-step4{ position:relative; z-index:1; margin-top:24px; }

/* 3.1) Mobile preview fit */
@media (max-width: 768px){
  #nfs-preview-wrap{ width:100% !important; height:auto !important; }
  #nfs-canvas{ width:100% !important; height:auto !important; }
}

/* 3.2) Chips calm on mobile */
@media (max-width: 768px){
  .nfs-steps{
    position: static !important;
    margin: 8px 0 12px;
    width: auto;
    box-shadow: none;
  }
}


/* === Visual 1.9.13-visual === */
@media (min-width:769px){
  #nfs-step3{ min-height:800px; }
}
#nfs-step4{ position:relative; z-index:1; margin-top:24px; }

@media (max-width:768px){
  #nfs-preview-wrap{ width:100% !important; height:auto !important; }
  #nfs-canvas{ width:100% !important; height:auto !important; }
  .nfs-steps{ right:8px; }
  .nfs-step{ font-size:12px; padding:6px 10px; }
}

/* Canvas overflow fix */
#nfs-canvas-preview, .nfs-canvas, #nfs-step3 canvas {max-height:420px !important;width:auto !important;display:block;margin:0 auto;object-fit:contain}
#nfs-step3,#nfs-step4{overflow:hidden}