/* ============================================================
 * Stewardis — utility classes (Round 6 Frente B.2)
 * ============================================================
 * Substitui `style="..."` attributes inline pra preparar a remoção
 * de `'unsafe-inline'` do CSP styleSrc (Frente B.3). Inline attrs
 * NÃO podem usar nonce — só `<style>` blocks. Classes utility
 * cobrem os padrões repetidos.
 *
 * Casos COMPLEXOS / one-off ficam dentro de `<style nonce>` blocks
 * por arquivo HTML (esses sim ganham nonce e funcionam pós-B.3).
 *
 * Prefix `stw-` evita colisão com Bootstrap / Tailwind / outras
 * libs que o cliente possa ter importado.
 * ============================================================ */

/* ── Visibility ─────────────────────────────────────────────── */
.stw-hidden { display: none !important; }
.stw-opacity-0 { opacity: 0; }

/* ── Cursor ─────────────────────────────────────────────────── */
.stw-cursor-pointer { cursor: pointer; }

/* ── Sizing ─────────────────────────────────────────────────── */
.stw-w-full { width: 100%; }
.stw-w-0 { width: 0%; }
.stw-min-h-32 { min-height: 32px; }

/* ── Margins ────────────────────────────────────────────────── */
.stw-m-0 { margin: 0; }
.stw-my-2 { margin: 8px 0; }
.stw-mb-3 { margin-bottom: 14px; }
.stw-mt-2 { margin-top: 8px; }
.stw-mt-3 { margin-top: 24px; }

/* ── Display ────────────────────────────────────────────────── */
.stw-flex-center { display: flex; align-items: center; gap: 8px; }
.stw-flex-center-mb { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.stw-block-center { display: block; margin: 0 auto 6px; }

/* ── Typography ─────────────────────────────────────────────── */
.stw-tag-uppercase {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--slate-100, #f1f5f9);
    color: var(--slate-500, #64748b);
    padding: 2px 6px;
    border-radius: 3px;
}

/* ── Dropzone / drag area ───────────────────────────────────── */
.stw-dropzone {
    display: block;
    border: 2px dashed var(--slate-300, #cbd5e1);
    border-radius: 6px;
    padding: 18px;
    text-align: center;
    cursor: pointer;
    color: var(--slate-500, #64748b);
    font-size: 13px;
    transition: border-color 120ms;
}

/* ── Section separator (display:none + top border + spacing) ── */
.stw-hidden-section {
    display: none;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--slate-200);
}
.stw-hidden-mb-3 { display: none; margin-bottom: 14px; }

/* ── Small text variants ────────────────────────────────────── */
.stw-text-xs-muted { margin-top: 8px; font-size: 11px; }
.stw-text-14-m0 { margin: 0; font-size: 14px; }
.stw-text-14-mb { margin: 0 0 14px 0; }

/* ── Progress / range bars ──────────────────────────────────── */
/* Para width dinâmica, ainda usa style.width via JS (NÃO bloqueado
 * pelo style-src — DOM-set styles passam por style-src-attr, mas
 * via property setter como `el.style.width` não conta como inline
 * em browsers modernos). Caso futuro precise, criar classes
 * .stw-progress-0, .stw-progress-25, etc. */

/* ── Text alignment + utility margins ───────────────────────── */
.stw-text-center { text-align: center; }
.stw-no-underline { text-decoration: none; }
.stw-inline-m0 { display: inline; margin: 0; }
.stw-mb-2 { margin-bottom: 12px; }
.stw-mb-4-13 { margin-bottom: 16px; font-size: 13px; }
.stw-mt-12-12 { margin-top: 12px; font-size: 12px; }
.stw-mt-2-center { text-align: center; margin-top: 8px; }

/* ── Brand color helpers (used em texto inline e ênfase) ───── */
.stw-text-gold { color: var(--gold-500); }
.stw-text-white { color: var(--white); }

/* ── Form group spacing ─────────────────────────────────────── */
.stw-form-group-tight { margin-bottom: 12px; }