/* Implantacao (Fase 11): checklist, assistente, modelos, demo, relatorio, guia contextual e aviso de demonstracao.
   Reaproveita .badge, .primary-action/.secondary-action, .cp-tabs e .cm-modal. */

.ob-root { display: grid; gap: 14px; }
.ob-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.ob-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--color-muted); min-width: 0; }
.ob-field select, .ob-field input, .ob-field textarea { width: 100%; }
.ob-company { flex: 1 1 280px; max-width: 520px; }
.ob-card { padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.ob-card h3, .ob-card h4, .ob-card h5 { margin: 0 0 8px; }
.ob-card h5 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); margin-top: 10px; }
.ob-card p { margin: 4px 0; font-size: 14px; overflow-wrap: anywhere; }
.ob-empty { text-align: center; padding: 28px 16px; }
.ob-fine { color: var(--color-muted); font-size: 13px; }

.ob-status-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ob-status h3 { margin: 6px 0 2px; }
.ob-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-bar { height: 10px; margin: 12px 0 4px; border-radius: 999px; background: var(--color-surface-muted, #e5e9ee); overflow: hidden; }
.ob-bar span { display: block; height: 100%; background: var(--color-accent, #0e7c86); border-radius: 999px; transition: width 0.3s; }
.ob-st-released .ob-bar span, .ob-st-ready .ob-bar span { background: var(--color-success, #1f8a4c); }
.ob-st-blocked .ob-bar span { background: var(--color-danger, #c0392b); }
.ob-next { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--color-accent-ring, rgba(14, 124, 134, 0.13)); }
.ob-released { color: var(--color-success, #1f8a4c); font-weight: 600; }

.ob-critical { border-color: #f0c2bb; background: #fdf3f1; }
.ob-warn { border-color: #f5d9a0; background: #fffaf0; }
.ob-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ob-issues li { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; font-size: 14px; }
.ob-link { border: 0; background: none; color: var(--color-accent, #0e7c86); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 6px; white-space: nowrap; }
.ob-link:hover { text-decoration: underline; }

.ob-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ob-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px; border-left-width: 4px; background: var(--color-surface-soft, #f7f9fb); }
.ob-s-completed { border-left-color: var(--color-success, #1f8a4c); }
.ob-s-in_progress { border-left-color: var(--color-accent, #0e7c86); }
.ob-s-blocked { border-left-color: var(--color-danger, #c0392b); }
.ob-s-skipped { opacity: 0.8; }
.ob-s-pending { border-left-color: var(--color-warning, #b7791f); }
.ob-item-main { min-width: 0; }
.ob-item-main .badge { margin-left: 6px; }
.ob-item-main p { margin: 2px 0; font-size: 13px; color: var(--color-text-soft, #334155); }
.ob-need { color: #7a4a00 !important; }
.ob-reason { font-style: italic; }
.ob-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.ob-item-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

.ob-wizard { display: grid; gap: 12px; }
.ob-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ob-step { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 13px; cursor: pointer; }
.ob-step span { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-surface-muted, #e5e9ee); font-size: 12px; font-weight: 700; }
.ob-step.is-active { border-color: var(--color-accent, #0e7c86); background: var(--color-accent-ring, rgba(14, 124, 134, 0.13)); }
.ob-step.is-done span { background: var(--color-success, #1f8a4c); color: #fff; }
.ob-go, .ob-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ob-nav { justify-content: space-between; }
.ob-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 10px 0; }
.ob-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ob-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 10px; }

.ob-dialog { width: min(560px, 94vw); max-height: 90vh; overflow-y: auto; display: grid; gap: 10px; }
.ob-dialog ul { margin: 4px 0 8px; padding-left: 18px; }
.ob-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.primary-action.danger, .secondary-action.danger { background: #c0392b; border-color: #c0392b; color: #fff; }
.primary-action:disabled { opacity: 0.55; cursor: not-allowed; }

/* aviso de demonstracao (faixa fixa acima do conteudo) */
.demo-banner { position: sticky; top: 0; z-index: 70; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center; padding: 8px 14px; background: #fff3cd; color: #664d03; border-bottom: 2px solid #f0c24b; font-size: 13px; text-align: center; }
.demo-banner strong { text-transform: uppercase; letter-spacing: 0.04em; }

/* guia contextual */
.gd-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: 8px; border: 1px solid var(--color-border-strong, #cbd5e1); border-radius: 50%; background: var(--color-surface); color: var(--color-accent, #0e7c86); font-weight: 700; font-size: 14px; cursor: pointer; vertical-align: middle; }
.gd-btn:hover { background: var(--color-accent-ring, rgba(14, 124, 134, 0.13)); }
.gd-btn:focus-visible, .gd-close:focus-visible, .ob-link:focus-visible, .ob-step:focus-visible { outline: 3px solid var(--color-accent-ring, #7cc3c9); outline-offset: 2px; }
.gd-pop { position: absolute; z-index: 220; width: min(360px, calc(100vw - 24px)); padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2); }
.gd-pop header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.gd-pop dl { margin: 0; display: grid; gap: 4px; font-size: 13px; }
.gd-pop dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); margin-top: 6px; }
.gd-pop dd { margin: 0; }
.gd-pop ul { margin: 0; padding-left: 18px; }
.gd-close { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--color-text); }
.gd-next { margin-top: 10px; width: 100%; }

@media (max-width: 700px) {
  .gd-pop { position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto !important; width: auto; max-height: 70vh; overflow-y: auto; }
  .ob-item { flex-direction: column; }
  .ob-item-side { align-items: flex-start; width: 100%; }
  .ob-item-actions { justify-content: flex-start; }
  .ob-nav { flex-direction: row; }
  .ob-actions .compact-action { flex: 1 1 140px; }
}

/* UX-05: o botao do Guia rapido nunca ocupa linha propria */
.panel-heading > .gd-btn { order: 5; margin-left: auto; flex: 0 0 auto; align-self: flex-start; }
.panel-heading > p { flex: 1 1 0; min-width: 0; }
.gd-btn.gd-in-bar { margin-left: auto; width: 34px; height: 34px; flex: 0 0 auto; }
.sg-toolbar-actions .gd-btn.gd-in-bar { margin-left: 4px; }
/* cabecalho so com titulo e sem barra: o botao flutua no canto sem ocupar altura */
.panel-heading.gd-solo { position: relative; margin: 0; min-height: 0; height: 0; }
.panel-heading.gd-solo > .gd-btn { position: absolute; right: 0; top: 0; margin: 0; z-index: 5; }
h2.gd-inline { display: inline-flex !important; width: auto !important; vertical-align: middle; }