/* ============================================================
   contrato-instalador.css
   Estilos do Contrato Instalador (wizard + dashboard + sign).
   Prefixo `ci-` evita colisão com o resto do app.
   Baseado nas cores do host (preto/amarelo VerticalParts).
   ============================================================ */

/* ---------- Variáveis ---------- */
.ci-page, .ci-sign-shell, .ci-modal-backdrop, .ci-drawer-backdrop {
  --ci-yellow: #FBB039;
  --ci-yellow-press: #E89A1F;
  --ci-dark: #15233f;
  --ci-fg: #111;
  --ci-fg2: #4a4a4a;
  --ci-fg3: #8a8a8a;
  --ci-line: #e5e7eb;
  --ci-bg-1: #f7f7f7;
  --ci-bg-2: #fff;
  --ci-ok: #16a34a;
  --ci-warn: #ca8a04;
  --ci-danger: #dc2626;
  --ci-info: #2563eb;
}

/* ============================================================
   PAGE WRAPPER (fallback EnterprisePageBase)
   ============================================================ */
.ci-page { padding: 24px 32px; max-width: 100%; }
.ci-page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--ci-line); }
.ci-page-kicker { font-size: 10px; font-weight: 800; letter-spacing: .2em; color: var(--ci-fg3); text-transform: uppercase; }
.ci-page-title { font-size: 32px; font-weight: 900; margin: 8px 0 4px; letter-spacing: -.02em; }
.ci-page-sub { color: var(--ci-fg2); font-size: 13px; margin: 0; max-width: 620px; line-height: 1.5; }
.ci-page-actions { display: flex; gap: 8px; }

.ci-tab {
  padding: 8px 14px; background: #fff; border: 1px solid var(--ci-line);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  cursor: pointer; border-radius: 4px;
}
.ci-tab.on { background: #111; color: var(--ci-yellow); border-color: #111; }

/* ============================================================
   BUTTONS
   ============================================================ */
.ci-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  border: 1px solid var(--ci-line); background: #fff; color: var(--ci-fg);
  cursor: pointer; border-radius: 4px;
}
.ci-btn:hover { background: #fafafa; }
.ci-btn:disabled { opacity: .5; cursor: not-allowed; }
.ci-btn--primary { background: var(--ci-yellow); border-color: var(--ci-yellow); color: #111; }
.ci-btn--primary:hover { background: var(--ci-yellow-press); }
.ci-btn--dark { background: #111; color: #fff; border-color: #111; }
.ci-btn--dark:hover { background: #000; }
.ci-btn--ghost { background: transparent; }
.ci-btn--danger { background: #fff; color: var(--ci-danger); border-color: #fca5a5; }
.ci-btn--danger:hover { background: #fef2f2; }

/* ============================================================
   WIZARD
   ============================================================ */
.ci-wiz { display: flex; flex-direction: column; min-height: 540px; }

.ci-stepbar {
  display: flex; align-items: center; gap: 0;
  padding: 12px 8px; background: #fff; border: 1px solid var(--ci-line);
  border-radius: 4px; margin-bottom: 16px; overflow-x: auto;
}
.ci-stepbar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; background: transparent; border: none;
  cursor: pointer; flex: 0 0 auto; position: relative;
}
.ci-stepbar-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: #e5e7eb; color: var(--ci-fg3);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.ci-stepbar-item.is-active .ci-stepbar-num { background: var(--ci-yellow); color: #111; }
.ci-stepbar-item.is-done .ci-stepbar-num { background: #111; color: var(--ci-yellow); }
.ci-stepbar-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.ci-stepbar-text b { font-size: 12px; font-weight: 700; color: var(--ci-fg); }
.ci-stepbar-text small { font-size: 10px; color: var(--ci-fg3); text-transform: uppercase; letter-spacing: .08em; }
.ci-stepbar-line { width: 30px; height: 1px; background: var(--ci-line); margin-left: 4px; }

.ci-wiz-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-height: 600px; }
@media (max-width: 1200px) { .ci-wiz-body { grid-template-columns: 1fr; } }

.ci-form-col {
  background: #fff; border: 1px solid var(--ci-line); border-radius: 4px;
  display: flex; flex-direction: column; overflow: hidden;
}
.ci-form-inner { padding: 24px; flex: 1; overflow-y: auto; max-height: 700px; }
.ci-form-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-top: 1px solid var(--ci-line); background: #fafafa;
}
.ci-form-foot-meta { font-size: 11px; color: var(--ci-fg3); text-transform: uppercase; letter-spacing: .1em; }

.ci-preview-col {
  background: var(--ci-bg-1); border: 1px solid var(--ci-line); border-radius: 4px;
  display: flex; flex-direction: column; overflow: hidden;
}
.ci-preview-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: #111; color: #fff;
}
.ci-preview-bar-title { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ci-preview-bar-conds { display: flex; gap: 4px; flex-wrap: wrap; }
.ci-pv-cond { padding: 3px 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 2px; background: #444; color: #fff; }
.ci-pv-cond--info { background: var(--ci-info); }
.ci-pv-cond--warn { background: var(--ci-warn); }
.ci-pv-cond--muted { background: transparent; border: 1px dashed #555; color: #888; }

.ci-preview-scroll { flex: 1; overflow-y: auto; padding: 16px; max-height: 700px; }

/* ============================================================
   STEP CONTENT
   ============================================================ */
.ci-step-head { margin-bottom: 24px; }
.ci-step-kicker { font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ci-yellow-press); }
.ci-step-title { font-size: 22px; font-weight: 800; margin: 4px 0 8px; letter-spacing: -.01em; }
.ci-step-desc { font-size: 13px; color: var(--ci-fg2); margin: 0; line-height: 1.5; }

.ci-field-group { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--ci-line); }
.ci-field-group:last-child { border-bottom: none; }
.ci-field-group--cond { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 4px; padding: 14px 16px; }
.ci-group-title { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ci-fg); margin: 0 0 12px; }

.ci-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 8px; }
.ci-grid--indent { padding-left: 16px; border-left: 2px solid #f5c400; margin-top: 4px; }

.ci-field { display: flex; flex-direction: column; gap: 4px; }
.ci-field--full { grid-column: 1 / -1; }
.ci-field--wide { grid-column: span 2; }
.ci-field--narrow { grid-column: span 1; }
.ci-field--qty { grid-column: span 1; }
.ci-field--fixed-brand { grid-column: span 1; }
.ci-field label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ci-fg2); }
.ci-req { color: var(--ci-danger); margin-left: 2px; }

.ci-input {
  font-family: inherit; font-size: 13px;
  padding: 9px 11px;
  border: 1px solid var(--ci-line); background: #fff;
  border-radius: 3px; transition: border .12s; width: 100%;
}
.ci-input:focus { outline: none; border-color: var(--ci-yellow); box-shadow: 0 0 0 3px rgba(251,176,57,.18); }
.ci-input--mono { font-family: 'Courier New', monospace; letter-spacing: .03em; }
.ci-input--error { border-color: var(--ci-danger); background: #fef2f2; }
.ci-input--prefix { display: flex; align-items: center; padding: 0 11px; gap: 6px; }
.ci-input-prefix { font-size: 11px; font-weight: 700; color: var(--ci-fg3); flex-shrink: 0; }
.ci-input-bare { flex: 1; border: none; outline: none; padding: 9px 0; background: transparent; font-family: inherit; font-size: 13px; }
.ci-textarea { resize: vertical; min-height: 60px; }
.ci-field-hint { font-size: 11px; color: var(--ci-fg3); }
.ci-field-err { font-size: 11px; color: var(--ci-danger); font-weight: 600; }
.ci-field-extenso { font-size: 11px; color: var(--ci-yellow-press); font-style: italic; }

.ci-select-wrap { position: relative; }
.ci-select { appearance: none; padding-right: 28px; cursor: pointer; }
.ci-select-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ci-fg3); }

.ci-brand-lock { padding: 9px 11px; border: 1px solid var(--ci-line); background: #fafafa; border-radius: 3px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.ci-lock-ico { color: var(--ci-fg3); }

.ci-mini-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ci-fg2); display: block; margin: 8px 0 6px; }

.ci-radio-cards { display: grid; gap: 8px; margin-bottom: 4px; }
.ci-radio-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border: 1px solid var(--ci-line); background: #fff; border-radius: 4px; cursor: pointer; text-align: left; position: relative; }
.ci-radio-card:hover { border-color: #cbd5e1; }
.ci-radio-card--on { border-color: var(--ci-yellow); background: #fffbeb; }
.ci-radio-card-dot { width: 14px; height: 14px; border: 2px solid var(--ci-fg3); border-radius: 50%; position: absolute; top: 12px; right: 12px; }
.ci-radio-card--on .ci-radio-card-dot { border-color: var(--ci-yellow-press); background: var(--ci-yellow-press); box-shadow: inset 0 0 0 3px #fff; }
.ci-radio-card-label { font-size: 13px; font-weight: 700; }
.ci-radio-card-desc { font-size: 12px; color: var(--ci-fg2); }

.ci-segmented { display: inline-flex; background: var(--ci-bg-1); border-radius: 4px; padding: 3px; border: 1px solid var(--ci-line); }
.ci-seg { padding: 7px 14px; font-size: 12px; font-weight: 600; background: transparent; border: none; cursor: pointer; border-radius: 3px; color: var(--ci-fg2); }
.ci-seg--on { background: #fff; color: var(--ci-fg); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.ci-check-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #fff; border: 1px solid var(--ci-line); border-radius: 3px; cursor: pointer; text-align: left; width: 100%; margin-bottom: 4px; }
.ci-check-row:hover { background: #fafafa; }
.ci-check-row--on { background: #fffbeb; border-color: var(--ci-yellow); }
.ci-check-box { width: 18px; height: 18px; border: 2px solid var(--ci-fg3); border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ci-check-row--on .ci-check-box { background: var(--ci-yellow-press); border-color: var(--ci-yellow-press); }
.ci-check-mark { color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.ci-check-label { font-size: 12.5px; color: var(--ci-fg); }

.ci-stepper { display: inline-flex; border: 1px solid var(--ci-line); border-radius: 3px; overflow: hidden; }
.ci-stepper button { width: 28px; padding: 7px 0; background: #fafafa; border: none; cursor: pointer; font-weight: 700; }
.ci-stepper button:hover { background: #f0f0f0; }
.ci-stepper input { width: 50px; text-align: center; border: none; border-left: 1px solid var(--ci-line); border-right: 1px solid var(--ci-line); padding: 7px 0; font-size: 13px; }

.ci-contratante-note { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--ci-bg-1); border: 1px solid var(--ci-line); border-radius: 4px; margin-bottom: 16px; }
.ci-cn-label { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ci-fg3); }
.ci-cn-meta { font-size: 11px; color: var(--ci-fg3); }

.ci-cond-alert { margin-top: 8px; padding: 8px 12px; background: #fef3c7; border-left: 3px solid var(--ci-yellow); font-size: 12px; color: #92400e; display: flex; align-items: center; gap: 8px; }
.ci-cond-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ci-yellow); }

.ci-distance-gauge { padding: 10px 0; }
.ci-dg-track { position: relative; height: 4px; background: #e5e7eb; border-radius: 2px; margin: 6px 0; }
.ci-dg-fill { height: 100%; background: var(--ci-yellow); border-radius: 2px; transition: width .25s; }
.ci-distance-gauge--on .ci-dg-fill { background: var(--ci-warn); }
.ci-dg-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ci-fg2); }
.ci-dg-mark span { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 700; color: var(--ci-fg2); }
.ci-dg-status { font-size: 11px; color: var(--ci-fg2); }

.ci-parcelas { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ci-parcela-row { display: flex; align-items: center; gap: 8px; }
.ci-parcela-n { font-size: 11px; font-weight: 700; color: var(--ci-fg3); min-width: 30px; }
.ci-parcela-fields { flex: 1; display: grid; grid-template-columns: 180px 1fr; gap: 8px; }
.ci-parcela-del { width: 28px; height: 28px; background: transparent; border: 1px solid var(--ci-line); cursor: pointer; border-radius: 3px; color: var(--ci-fg3); }
.ci-add-parcela { padding: 8px; background: transparent; border: 1px dashed var(--ci-line); cursor: pointer; font-size: 12px; color: var(--ci-fg2); border-radius: 3px; }

.ci-anexos-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ci-link-btn { background: transparent; border: none; color: var(--ci-yellow-press); font-size: 11px; font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: .08em; }
.ci-anexos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ci-empty-conds { font-size: 12px; color: var(--ci-fg3); font-style: italic; margin: 0; }
.ci-cond-summary { display: flex; flex-wrap: wrap; gap: 6px; }
.ci-cond-pill { padding: 4px 10px; font-size: 11px; font-weight: 700; border-radius: 12px; background: #fef3c7; color: #92400e; }
.ci-cond-pill--info { background: #dbeafe; color: #1e40af; }

/* ============================================================
   DOCUMENT (preview)
   ============================================================ */
.ci-doc-sheet { background: #fff; padding: 28px 36px; box-shadow: 0 1px 3px rgba(0,0,0,.06); font-family: 'Times New Roman', serif; font-size: 11pt; line-height: 1.5; color: #111; max-width: 720px; margin: 0 auto; }
.ci-doc-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #ddd; }
.ci-doc-logo { height: 36px; }
.ci-doc-meta { display: flex; flex-direction: column; align-items: flex-end; }
.ci-doc-meta-label { font-size: 8pt; color: #555; font-family: Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.ci-doc-meta-num { font-size: 11pt; font-weight: 800; font-family: 'Courier New', monospace; }
.ci-doc-title { text-align: center; font-family: Arial, sans-serif; font-size: 13.5pt; font-weight: 700; margin: 6pt 0 14pt; letter-spacing: .02em; }
.ci-doc-p { text-align: justify; margin: 8pt 0; }
.ci-doc-intro { margin-top: 12pt; }
.ci-doc-e { text-align: left; margin: 4pt 0; }
.ci-doc-clause { margin: 14pt 0; }
.ci-doc-clause--cond { background: #fff8e1; border-left: 3px solid var(--ci-yellow); padding: 10px 14px; }
.ci-doc-clause-title { font-family: Arial, sans-serif; font-size: 11pt; font-weight: 700; margin: 0 0 6pt; }
.ci-doc-cond-tag { font-size: 8.5pt; color: var(--ci-yellow-press); font-weight: 600; margin-left: 8px; }
.ci-doc-item { margin: 4pt 0; }
.ci-doc-item p { margin: 0; text-align: justify; }
.ci-doc-n { font-weight: 700; margin-right: 6px; }
.ci-doc-list, .ci-doc-list-alpha { margin: 4pt 0 6pt 18pt; padding: 0; }
.ci-doc-list-alpha { list-style: lower-alpha; }
.ci-doc-list li, .ci-doc-list-alpha li { margin: 2pt 0; text-align: justify; }
.ci-doc-bank-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4pt 14pt; margin: 6pt 0 0 18pt; font-size: 10.5pt; }
.ci-doc-bank-grid div { display: flex; justify-content: space-between; }
.ci-doc-bank-grid span { color: #666; }
.ci-doc-closing { margin-top: 18pt; }
.ci-doc-local { margin: 14pt 0 24pt; }
.ci-doc-sign-block, .ci-doc-witness { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 18pt 0; }
.ci-doc-sign { display: flex; flex-direction: column; gap: 2pt; align-items: center; }
.ci-doc-sign-role { font-size: 9.5pt; font-family: Arial, sans-serif; font-weight: 700; align-self: flex-start; }
.ci-doc-sign-co { font-size: 10pt; font-weight: 700; margin-top: 2pt; }
.ci-doc-sign-line { width: 100%; border-top: 1px solid #333; margin: 24pt 0 4pt; }
.ci-doc-sign-name { font-size: 9.5pt; font-weight: 700; }
.ci-doc-sign-cpf { font-size: 8.5pt; color: #555; font-family: Arial, sans-serif; }

/* ============================================================
   DASHBOARD
   ============================================================ */
.ci-dash { padding: 0; }

.ci-dash-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; }
.ci-stat { padding: 16px 18px; background: #fff; border: 1px solid var(--ci-line); border-radius: 4px; cursor: pointer; transition: border .12s; }
.ci-stat:hover { border-color: #cbd5e1; }
.ci-stat.active { border-color: var(--ci-yellow); background: #fffbeb; }
.ci-stat-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ci-stat-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ci-fg3); }
.ci-stat--blue .ci-stat-dot { background: var(--ci-info); }
.ci-stat--yellow .ci-stat-dot { background: var(--ci-yellow); }
.ci-stat--green .ci-stat-dot { background: var(--ci-ok); }
.ci-stat-num { font-size: 28px; font-weight: 900; line-height: 1; }
.ci-stat-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ci-fg3); }

.ci-panel { background: #fff; border: 1px solid var(--ci-line); border-radius: 4px; }
.ci-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--ci-line); }
.ci-panel-head h2 { font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.ci-panel-search input { padding: 7px 10px; font-size: 12px; border: 1px solid var(--ci-line); border-radius: 3px; min-width: 280px; }
.ci-empty { padding: 40px 20px; text-align: center; color: var(--ci-fg3); font-size: 13px; }

.ci-table { width: 100%; border-collapse: collapse; }
.ci-table thead th { padding: 10px 16px; text-align: left; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ci-fg3); background: var(--ci-bg-1); border-bottom: 1px solid var(--ci-line); }
.ci-table tbody tr { cursor: pointer; transition: background .1s; }
.ci-table tbody tr:hover { background: #fafafa; }
.ci-table tbody td { padding: 12px 16px; font-size: 12.5px; border-bottom: 1px solid #f5f5f5; vertical-align: middle; }
.ci-cell-co { font-weight: 700; }
.ci-cell-num { font-size: 10.5px; color: var(--ci-fg3); font-family: 'Courier New', monospace; }
.ci-cell-obj { font-size: 12px; }
.ci-cell-resp { font-size: 10.5px; color: var(--ci-fg3); }
.ci-cell-val { font-weight: 700; font-family: 'Courier New', monospace; }
.ci-cell-time { font-size: 11px; color: var(--ci-fg3); }
.ci-cell-actions { display: flex; justify-content: flex-end; gap: 6px; align-items: center; }
.ci-icon-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--ci-line); border-radius: 3px; cursor: pointer; text-decoration: none; color: var(--ci-fg2); font-size: 13px; }
.ci-icon-btn:hover { background: var(--ci-bg-1); }
.ci-mini-btn { padding: 5px 10px; background: var(--ci-yellow); border: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; border-radius: 3px; color: #111; }
.ci-mini-btn:hover { background: var(--ci-yellow-press); }

.ci-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; font-size: 10.5px; font-weight: 700; border-radius: 12px; }
.ci-badge--gray   { background: #e5e7eb; color: #4b5563; }
.ci-badge--blue   { background: #dbeafe; color: #1e40af; }
.ci-badge--yellow { background: #fef3c7; color: #92400e; }
.ci-badge--green  { background: #dcfce7; color: #166534; }
.ci-badge--red    { background: #fee2e2; color: #991b1b; }
.ci-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ============================================================
   DRAWER (Auditoria)
   ============================================================ */
.ci-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; justify-content: flex-end; z-index: 1000; }
.ci-drawer { background: #fff; width: 520px; max-width: 95vw; height: 100%; overflow-y: auto; display: flex; flex-direction: column; }
.ci-drawer-head { padding: 22px 24px 16px; border-bottom: 1px solid var(--ci-line); display: flex; justify-content: space-between; align-items: flex-start; }
.ci-drawer-head h2 { margin: 0; font-size: 16px; font-weight: 800; font-family: 'Courier New', monospace; letter-spacing: .04em; }
.ci-drawer-co { font-size: 12.5px; color: var(--ci-fg2); margin-top: 4px; }
.ci-drawer-x { background: transparent; border: none; font-size: 20px; cursor: pointer; color: var(--ci-fg3); }
.ci-drawer-body { padding: 20px 24px; }
.ci-drawer-sec { margin-bottom: 24px; }
.ci-drawer-sec-title { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ci-fg3); margin: 0 0 12px; }

.ci-timeline { display: flex; flex-direction: column; gap: 12px; }
.ci-tl-step { display: flex; gap: 12px; }
.ci-tl-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.ci-tl-dot { width: 28px; height: 28px; border-radius: 50%; background: #e5e7eb; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--ci-fg3); flex-shrink: 0; }
.ci-tl-step.done .ci-tl-dot { background: var(--ci-ok); color: #fff; }
.ci-tl-step.current .ci-tl-dot { background: var(--ci-yellow); color: #111; box-shadow: 0 0 0 3px rgba(251,176,57,.25); }
.ci-tl-line { width: 1px; flex: 1; background: var(--ci-line); margin: 4px 0; min-height: 12px; }
.ci-tl-step:last-child .ci-tl-line { display: none; }
.ci-tl-body { padding-bottom: 8px; flex: 1; }
.ci-tl-title { font-size: 12.5px; font-weight: 700; }
.ci-tl-meta { font-size: 11px; color: var(--ci-fg3); margin-top: 2px; }

.ci-audit { background: var(--ci-bg-1); border: 1px solid var(--ci-line); border-radius: 4px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.ci-audit-row { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; padding: 4px 0; border-bottom: 1px dashed #e5e7eb; }
.ci-audit-row:last-child { border-bottom: none; }
.ci-audit-row .k { color: var(--ci-fg3); }
.ci-audit-row .v { color: var(--ci-fg); font-weight: 600; text-align: right; word-break: break-all; max-width: 60%; }
.ci-legal-note { margin-top: 10px; padding: 8px 10px; background: #f0fdf4; border-left: 2px solid var(--ci-ok); font-size: 11px; color: #166534; }

.ci-drawer-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* ============================================================
   SEND MODAL
   ============================================================ */
.ci-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 1100; }
.ci-modal { background: #fff; width: 500px; max-width: 92vw; max-height: 92vh; overflow: hidden; display: flex; flex-direction: column; border-radius: 6px; }
.ci-modal-head { padding: 22px 24px 12px; display: flex; justify-content: space-between; align-items: flex-start; }
.ci-modal-head h2 { margin: 0; font-size: 18px; font-weight: 800; }
.ci-modal-head p { margin: 4px 0 0; font-size: 12px; color: var(--ci-fg3); }
.ci-modal-x { background: transparent; border: none; font-size: 20px; cursor: pointer; color: var(--ci-fg3); }
.ci-modal-body { padding: 12px 24px; overflow-y: auto; flex: 1; }
.ci-modal-foot { padding: 12px 20px; border-top: 1px solid var(--ci-line); display: flex; justify-content: flex-end; gap: 8px; background: #fafafa; }

.ci-mini { padding: 12px 14px; background: var(--ci-bg-1); border: 1px solid var(--ci-line); border-radius: 4px; margin-bottom: 16px; }
.ci-mini-num { font-size: 10.5px; font-weight: 800; color: var(--ci-fg3); font-family: 'Courier New', monospace; letter-spacing: .04em; display: block; }
.ci-mini-title { font-weight: 700; font-size: 13px; display: block; margin: 2px 0; }
.ci-mini-row { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ci-fg2); margin-top: 4px; }
.ci-mini-row b { font-family: 'Courier New', monospace; }

.ci-linkbox { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--ci-bg-1); border: 1px solid var(--ci-line); border-radius: 3px; margin-bottom: 14px; }
.ci-linkbox code { flex: 1; font-size: 11.5px; font-family: 'Courier New', monospace; color: var(--ci-fg2); word-break: break-all; }
.ci-linkbox button { padding: 4px 10px; background: #111; color: #fff; border: none; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; border-radius: 3px; flex-shrink: 0; }

.ci-channels { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.ci-channel { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; background: #fff; border: 1px solid var(--ci-line); cursor: pointer; border-radius: 4px; text-align: center; }
.ci-channel:hover { border-color: #cbd5e1; }
.ci-channel.on { border-color: var(--ci-yellow); background: #fffbeb; }
.ci-channel-icon { font-size: 22px; }
.ci-channel span { font-size: 12px; font-weight: 700; }
.ci-channel small { font-size: 9.5px; color: var(--ci-fg3); }

.ci-sent-ok { text-align: center; padding: 8px 0; }
.ci-check { width: 56px; height: 56px; border-radius: 50%; background: var(--ci-ok); color: #fff; font-size: 32px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.ci-sent-ok h3 { margin: 0 0 4px; font-size: 16px; }
.ci-sent-ok p { margin: 0 0 14px; font-size: 12.5px; color: var(--ci-fg3); }

/* ============================================================
   SIGN PAGE (assinar.html)
   ============================================================ */
.ci-sign-shell { max-width: 760px; margin: 0 auto; padding: 0 16px 80px; }
.ci-sign-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; background: #111; color: #fff; margin: 0 -16px 16px; padding: 14px 16px; }
.ci-sign-top img { height: 28px; filter: brightness(0) invert(1); }
.ci-secure { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; padding: 4px 10px; background: rgba(255,255,255,.1); border-radius: 12px; }

.ci-sign-intro h1 { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.ci-sign-intro p { font-size: 13px; color: var(--ci-fg2); margin: 0 0 18px; }

.ci-sum-card { padding: 14px 16px; background: #fff; border: 1px solid var(--ci-line); border-radius: 4px; margin-bottom: 20px; }
.ci-sum-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding-bottom: 10px; border-bottom: 1px solid var(--ci-line); margin-bottom: 10px; }
.ci-sum-head .num { font-size: 11px; font-family: 'Courier New', monospace; font-weight: 800; color: var(--ci-fg3); letter-spacing: .04em; }
.ci-sum-head .title { font-size: 14px; font-weight: 700; line-height: 1.3; flex: 1; text-align: right; }
.ci-sum-rows { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.ci-sum-row { display: flex; justify-content: space-between; gap: 12px; }
.ci-sum-row .k { color: var(--ci-fg3); }
.ci-sum-row .v { font-weight: 600; text-align: right; }

.ci-sign-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ci-fg3); margin: 22px 0 8px; display: flex; align-items: center; gap: 8px; }
.ci-sign-label .n { width: 22px; height: 22px; border-radius: 50%; background: var(--ci-yellow); color: #111; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }

.ci-doc-viewer { background: #fff; border: 1px solid var(--ci-line); border-radius: 4px; position: relative; }
.ci-doc-viewer-scroll { max-height: 360px; overflow-y: auto; padding: 0; }
.ci-doc-viewer-scroll .ci-doc-sheet { box-shadow: none; padding: 16px; max-width: 100%; font-size: 10.5pt; }
.ci-scroll-hint { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); padding: 6px 12px; background: rgba(0,0,0,.75); color: #fff; font-size: 11px; border-radius: 12px; pointer-events: none; transition: opacity .25s; }
.ci-scroll-hint.hidden { opacity: 0; }
.ci-read-flag { padding: 8px 12px; font-size: 12px; font-weight: 600; background: #dcfce7; color: #166534; border-radius: 3px; margin-top: 8px; text-align: center; }
.ci-read-flag.pending { background: #fef3c7; color: #92400e; }

.ci-consent { display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: #fff; border: 1px solid var(--ci-line); border-radius: 4px; cursor: pointer; }
.ci-consent.disabled { opacity: .5; cursor: not-allowed; }
.ci-consent.on { background: #fffbeb; border-color: var(--ci-yellow); }
.ci-consent .box { width: 22px; height: 22px; border: 2px solid var(--ci-fg3); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; font-weight: 700; }
.ci-consent.on .box { background: var(--ci-yellow-press); border-color: var(--ci-yellow-press); }
.ci-consent .txt { font-size: 12.5px; color: var(--ci-fg2); line-height: 1.4; }

.ci-sig-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.ci-sig-tab { flex: 1; padding: 10px; background: #fff; border: 1px solid var(--ci-line); border-radius: 3px; font-size: 12px; font-weight: 600; cursor: pointer; }
.ci-sig-tab.on { background: #111; color: var(--ci-yellow); border-color: #111; }

.ci-sig-pad-wrap { position: relative; }
.ci-sig-pad { width: 100%; height: 180px; border: 1px solid var(--ci-line); border-radius: 4px; background: #fff; touch-action: none; cursor: crosshair; display: block; }
.ci-sig-pad-base { position: absolute; bottom: 30px; left: 24px; right: 24px; border-bottom: 1px dashed var(--ci-fg3); }
.ci-sig-pad-x { position: absolute; bottom: 20px; left: 24px; color: var(--ci-fg3); }
.ci-sig-pad-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ci-fg3); font-size: 12px; pointer-events: none; }
.ci-sig-clear { position: absolute; top: 8px; right: 8px; padding: 4px 10px; background: #fff; border: 1px solid var(--ci-line); font-size: 11px; cursor: pointer; border-radius: 3px; }

.ci-sig-typed input { width: 100%; padding: 14px; border: 1px solid var(--ci-line); border-radius: 3px; font-size: 14px; }
.ci-sig-typed .preview { margin-top: 10px; padding: 18px 14px; background: #fff; border: 1px solid var(--ci-line); border-radius: 3px; text-align: center; }
.ci-sig-typed .preview span { font-family: 'Brush Script MT', 'Lucida Handwriting', cursive; font-size: 28px; color: var(--ci-dark); }
.ci-sig-typed .preview .ph { color: var(--ci-fg3); font-family: inherit; font-size: 12px; }

.ci-sig-meta { font-size: 11px; color: var(--ci-fg3); margin: 10px 0 0; line-height: 1.5; }

.ci-sign-actionbar { margin-top: 24px; }
.ci-sign-btn { width: 100%; padding: 16px; background: var(--ci-yellow); border: none; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; border-radius: 4px; color: #111; }
.ci-sign-btn:hover { background: var(--ci-yellow-press); }
.ci-sign-btn:disabled { background: #e5e7eb; color: var(--ci-fg3); cursor: not-allowed; }
.ci-req-hint { font-size: 11px; color: var(--ci-fg3); margin-top: 6px; text-align: center; }
.ci-sign-sub-action { margin-top: 10px; width: 100%; padding: 10px; background: transparent; border: none; font-size: 11.5px; color: var(--ci-danger); cursor: pointer; }

.ci-sign-status { max-width: 480px; margin: 60px auto 30px; text-align: center; padding: 24px; }
.ci-sign-status h1 { font-size: 22px; margin: 16px 0 6px; }
.ci-sign-status p { font-size: 13px; color: var(--ci-fg2); }
.ci-spinner { width: 36px; height: 36px; border: 3px solid #f0f0f0; border-top-color: var(--ci-yellow); border-radius: 50%; animation: ci-spin 0.75s linear infinite; margin: 0 auto; }
@keyframes ci-spin { to { transform: rotate(360deg); } }
.ci-success-check { width: 60px; height: 60px; border-radius: 50%; background: var(--ci-ok); color: #fff; font-size: 32px; display: inline-flex; align-items: center; justify-content: center; }
.ci-protocolo { padding: 12px; background: var(--ci-bg-1); border-radius: 4px; font-size: 11px; color: var(--ci-fg2); font-family: 'Courier New', monospace; margin: 16px 0; line-height: 1.6; }

.ci-err-state { padding: 60px 20px; text-align: center; }
.ci-err-state h1 { font-size: 22px; margin: 0 0 8px; }
.ci-err-state p { font-size: 13px; color: var(--ci-fg2); }