/* ── SmartForms — estilos del frontend ───────────────────────────────────── */
:root {
    --sf-primary:   #6C63FF;
    --sf-border:    #d1d5db;
    --sf-radius:    8px;
    --sf-danger:    #ef4444;
    --sf-success:   #22c55e;
    --sf-text:      #111827;
    --sf-bg:        #f9fafb;
    --sf-white:     #fff;
}

.sf-wrapper { max-width: 680px; font-family: system-ui, -apple-system, sans-serif; }

/* Fields grid */
.sf-fields { display: flex; flex-wrap: wrap; gap: 14px; }
.sf-field   { flex-basis: 100%; }
.sf-width-25  { flex-basis: calc(25%  - 11px); }
.sf-width-33  { flex-basis: calc(33%  - 10px); }
.sf-width-50  { flex-basis: calc(50%  - 7px);  }
.sf-width-66  { flex-basis: calc(66%  - 5px);  }
.sf-width-75  { flex-basis: calc(75%  - 4px);  }
.sf-width-100 { flex-basis: 100%; }

/* Labels */
.sf-label { display: block; font-size: 14px; font-weight: 600; color: var(--sf-text); margin-bottom: 5px; }
.sf-required { color: var(--sf-danger); margin-left: 2px; }

/* Inputs */
.sf-input, .sf-textarea, .sf-select {
    width: 100%; padding: 9px 12px; font-size: 14px;
    border: 1.5px solid var(--sf-border); border-radius: var(--sf-radius);
    background: var(--sf-white); color: var(--sf-text);
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.sf-input:focus, .sf-textarea:focus, .sf-select:focus {
    border-color: var(--sf-primary); outline: none;
    box-shadow: 0 0 0 3px rgba(108,99,255,.12);
}
.sf-input.sf-has-error, .sf-textarea.sf-has-error, .sf-select.sf-has-error {
    border-color: var(--sf-danger);
}
.sf-field-error { font-size: 12px; color: var(--sf-danger); display: block; margin-top: 4px; }
.sf-textarea { resize: vertical; min-height: 90px; }

/* Social */
.sf-social-wrap { position: relative; }
.sf-social-icon  { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: none; stroke: #6b7280; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-social-input { padding-left: 36px !important; }

/* Phone */
.sf-phone { letter-spacing: .5px; }

/* File upload */
.sf-file-drop {
    border: 2px dashed var(--sf-border); border-radius: var(--sf-radius);
    padding: 24px 16px; text-align: center; cursor: pointer;
    background: var(--sf-bg); transition: border-color .15s, background .15s;
}
.sf-file-drop:hover, .sf-file-drop.dragover { border-color: var(--sf-primary); background: #f0eeff; }
.sf-file-placeholder { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.sf-file-icon  { font-size: 28px; }
.sf-file-label { font-size: 14px; font-weight: 600; color: var(--sf-primary); }
.sf-file-hint  { font-size: 12px; color: #9ca3af; }
.sf-file-preview img { max-width: 120px; max-height: 120px; object-fit: contain; border-radius: 6px; border: 1px solid var(--sf-border); }
.sf-file-preview .sf-file-name { font-size: 12px; color: #6b7280; margin-top: 4px; }

/* Checkboxes / Radios */
.sf-check-label, .sf-radio-label {
    display: flex; align-items: center; gap: 8px; font-size: 14px;
    cursor: pointer; margin-bottom: 5px; padding: 6px 10px;
    border: 1.5px solid var(--sf-border); border-radius: 6px; background: var(--sf-white);
    transition: border-color .15s;
}
.sf-check-label:hover, .sf-radio-label:hover { border-color: var(--sf-primary); }
.sf-check-label input, .sf-radio-label input { accent-color: var(--sf-primary); width: 16px; height: 16px; }

/* Rating */
.sf-rating { display: flex; gap: 4px; }
.sf-star { font-size: 26px; cursor: pointer; color: #d1d5db; transition: color .1s; line-height: 1; }
.sf-star.active, .sf-star:hover { color: #f59e0b; }

/* Divider */
.sf-divider { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: #6b7280; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.sf-divider::before, .sf-divider::after { content: ''; flex: 1; height: 1px; background: var(--sf-border); }

/* HTML block */
.sf-html-block { font-size: 14px; color: #374151; line-height: 1.6; }

/* Consent */
.sf-consent-label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; cursor: pointer; line-height: 1.5; }
.sf-consent-label input { margin-top: 2px; accent-color: var(--sf-primary); }

/* Submit button */
.sf-footer { margin-top: 6px; }
.sf-submit-btn {
    background: var(--sf-primary); color: #fff;
    border: none; border-radius: var(--sf-radius);
    padding: 11px 28px; font-size: 15px; font-weight: 600;
    cursor: pointer; transition: background .15s, transform .1s;
}
.sf-submit-btn:hover    { background: #554fd8; }
.sf-submit-btn:active   { transform: scale(.98); }
.sf-submit-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Messages */
.sf-messages { margin-top: 14px; padding: 12px 16px; border-radius: var(--sf-radius); font-size: 14px; font-weight: 500; }
.sf-messages.sf-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.sf-messages.sf-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

.sf-error { color: var(--sf-danger); }

/* Responsive */
@media (max-width: 600px) {
    .sf-width-25, .sf-width-33, .sf-width-50, .sf-width-66, .sf-width-75 { flex-basis: 100%; }
}