/* Identidade Meu Parceiro sobre o Dashkit (moderação e lojista).
   Tokens do protótipo do cliente (MeuParceiro_App.html, out/2026): carmim, grafite, verde de confirmação, âmbar de atenção.
   Carregar depois de theme.bundle.css e antes de proto.css. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --mp-carmim: #B5123A; --mp-carmim-600: #8E0E2C; --mp-carmim-tint: #FBE9EE;
  --mp-grafite: #232A30; --mp-muted: #656D77; --mp-line: #E3E6EA; --mp-bg: #F5F6F8;
  --mp-verde: #2E7D4F; --mp-verde-dk: #246340; --mp-verde-tint: #E8F3EC;
  --mp-ambar: #B5791F; --mp-ambar-dk: #8F5E16; --mp-ambar-tint: #FBF0DC;
  --bs-primary: #B5123A; --bs-primary-rgb: 181, 18, 58;
  --bs-success: #2E7D4F; --bs-success-rgb: 46, 125, 79;
  --bs-warning: #B5791F; --bs-warning-rgb: 181, 121, 31;
  --bs-danger: #8E0E2C; --bs-danger-rgb: 142, 14, 44;
  --bs-dark: #232A30;
  --bs-body-font-family: 'Inter', system-ui, sans-serif;
}

/* tipografia: Sora em títulos e rótulos, Inter no corpo */
body { font-family: 'Inter', system-ui, sans-serif; color: var(--mp-grafite); background-color: var(--mp-bg); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .header-title, .header-pretitle, .card-header-title,
.btn, .nav-link, .navbar-heading, .badge, .mp-brand { font-family: 'Sora', 'Inter', sans-serif; }
.header-title, .card-header-title, h1, h2, h3, h4, h5, h6 { color: var(--mp-grafite); }

/* links e texto */
a { color: var(--mp-carmim); }
a:hover { color: var(--mp-carmim-600); }
.text-primary { color: var(--mp-carmim) !important; }
.text-success { color: var(--mp-verde) !important; }
.text-warning { color: var(--mp-ambar) !important; }
.text-danger { color: var(--mp-carmim-600) !important; }
.text-muted { color: var(--mp-muted) !important; }

/* fundos e selos */
.bg-primary { background-color: var(--mp-carmim) !important; }
.bg-success { background-color: var(--mp-verde) !important; }
.bg-warning { background-color: var(--mp-ambar) !important; }
.bg-danger { background-color: var(--mp-carmim-600) !important; }
.bg-dark { background-color: var(--mp-grafite) !important; }
.bg-primary-soft { background-color: var(--mp-carmim-tint) !important; }
.bg-success-soft { background-color: var(--mp-verde-tint) !important; }
.bg-warning-soft { background-color: var(--mp-ambar-tint) !important; }
.bg-danger-soft { background-color: #F6DDE3 !important; }
.badge.bg-primary-soft, .bg-primary-soft.text-primary { color: var(--mp-carmim) !important; }
.badge.bg-success-soft { color: var(--mp-verde-dk) !important; }
.badge.bg-warning-soft { color: var(--mp-ambar-dk) !important; }
.badge.bg-danger-soft { color: var(--mp-carmim-600) !important; }

/* botões */
.btn-primary { background-color: var(--mp-carmim); border-color: var(--mp-carmim); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-check:checked + .btn-primary { background-color: var(--mp-carmim-600); border-color: var(--mp-carmim-600); color: #fff; }
.btn-primary:focus, .btn-outline-primary:focus { box-shadow: 0 0 0 .15rem rgba(181, 18, 58, .3); }
.btn-outline-primary { color: var(--mp-carmim); border-color: var(--mp-carmim); }
.btn-outline-primary:hover, .btn-check:checked + .btn-outline-primary { background-color: var(--mp-carmim); border-color: var(--mp-carmim); color: #fff; }
.btn-success { background-color: var(--mp-verde); border-color: var(--mp-verde); }
.btn-success:hover, .btn-success:focus { background-color: var(--mp-verde-dk); border-color: var(--mp-verde-dk); }
.btn-outline-success { color: var(--mp-verde); border-color: var(--mp-verde); }
.btn-outline-success:hover { background-color: var(--mp-verde); border-color: var(--mp-verde); color: #fff; }
.btn-danger { background-color: var(--mp-carmim-600); border-color: var(--mp-carmim-600); }
.btn-outline-danger { color: var(--mp-carmim-600); border-color: var(--mp-carmim-600); }
.btn-outline-danger:hover { background-color: var(--mp-carmim-600); border-color: var(--mp-carmim-600); color: #fff; }
.btn-warning { background-color: var(--mp-ambar); border-color: var(--mp-ambar); color: #fff; }

/* formulários, abas e paginação */
.form-control:focus, .form-select:focus { border-color: var(--mp-carmim); box-shadow: 0 0 0 .15rem rgba(181, 18, 58, .18); }
.form-check-input:checked { background-color: var(--mp-carmim); border-color: var(--mp-carmim); }
.form-check-input:focus { border-color: var(--mp-carmim); box-shadow: 0 0 0 .15rem rgba(181, 18, 58, .18); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { border-color: var(--mp-carmim); color: var(--mp-grafite); }
.nav-pills .nav-link.active { background-color: var(--mp-carmim); }
.page-item.active .page-link { background-color: var(--mp-carmim); border-color: var(--mp-carmim); }
.progress-bar { background-color: var(--mp-carmim); }
.list-group-item.active { background-color: var(--mp-carmim); border-color: var(--mp-carmim); }

/* sidebar: item ativo e selo de contagem */
#sidebar .navbar-nav .nav-link.active { color: var(--mp-grafite); }
#sidebar .navbar-nav > .nav-item > .nav-link.active { box-shadow: inset 3px 0 0 var(--mp-carmim); }
#sidebar .navbar-nav .nav-link.active .fe { color: var(--mp-carmim); }

/* foco visível em todo controle (acessibilidade do protótipo do cliente) */
a:focus-visible, button:focus-visible, .btn:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--mp-carmim); outline-offset: 2px; }

/* marca do produto na sidebar */
.mp-logo { display: block; width: 36px; height: 41px; background: url('../img/mp/logo.jpg') no-repeat; background-size: 121px auto; background-position: -8px -15px; border-radius: 8px; }
.mp-wordmark { font-family: 'Sora', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; line-height: 1.02; color: var(--mp-grafite); font-size: .95rem; }
.mp-wordmark i { font-style: normal; font-weight: 400; letter-spacing: 2px; display: block; font-size: .85rem; }

/* miniaturas: foto do consultor e logo da empresa (sem imagem, cai nas iniciais) */
.mp-mini { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--mp-carmim-tint) center 30% / cover no-repeat; color: var(--mp-carmim); font-family: 'Sora', sans-serif; font-weight: 600; font-size: .75rem; overflow: hidden; }
.mp-mini.emp { border-radius: .5rem; background-color: #fff; background-size: contain; background-position: center; border: 1px solid var(--mp-line); color: var(--mp-grafite); }
.mp-mini.sm { width: 1.75rem; height: 1.75rem; font-size: .625rem; }
.mp-mini.lg { width: 4rem; height: 4rem; font-size: 1.125rem; }
.mp-mini.xl { width: 5.5rem; height: 5.5rem; font-size: 1.5rem; }

/* aviso de compliance (amarelo): aberto 10 s, depois recolhe para uma linha e leva às regras */
.mp-compl { display: flex; gap: .75rem; align-items: flex-start; background: #FFF8E6; border: 1px solid #F1DDA6; color: #5C4410; border-radius: .5rem; padding: .75rem 1rem; font-size: .8125rem; cursor: pointer; }
.mp-compl b { color: #3E2E0A; }
.mp-compl .mp-compl-ver { font-weight: 600; color: var(--mp-carmim); white-space: nowrap; }
.mp-compl .mp-compl-min { display: none; }
.mp-compl.min .mp-compl-txt { display: none; }
.mp-compl.min .mp-compl-min { display: inline; }

/* etapas da demanda (6 etapas, linha do tempo vertical) */
.mp-tl { list-style: none; margin: 0; padding: 0; }
.mp-tl li { display: flex; gap: .75rem; align-items: flex-start; padding: .5rem 0; position: relative; }
.mp-tl li:not(:last-child)::after { content: ''; position: absolute; left: .875rem; top: 2.25rem; bottom: -.25rem; width: 2px; background: var(--mp-line); }
.mp-tl .mk { width: 1.75rem; height: 1.75rem; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: #EEF0F3; color: var(--mp-muted); font-family: 'Sora', sans-serif; font-weight: 600; font-size: .75rem; }
.mp-tl li.done .mk { background: var(--mp-verde); color: #fff; }
.mp-tl li.done:not(:last-child)::after { background: var(--mp-verde); }
.mp-tl li.now .mk { background: var(--mp-carmim); color: #fff; box-shadow: 0 0 0 4px var(--mp-carmim-tint); }
.mp-tl li.now b { color: var(--mp-carmim); }
.mp-tl small { display: block; color: var(--mp-muted); }