/* =========================================================
   SVG ICONS BONITOS
   ========================================================= */

.ico,
.brand-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  vertical-align:-3px;
}

.ico svg{
  width:18px;
  height:18px;
  display:block;
}

.ico-sm svg{
  width:15px;
  height:15px;
}

.ico-lg svg{
  width:24px;
  height:24px;
}

.brand-ico svg{
  width:20px;
  height:20px;
  display:block;
}

.brand-ico.mp-svg svg{
  width:28px;
  height:19px;
}

.menu-icon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#64748b;
}

.menu-icon svg{
  width:18px;
  height:18px;
}

.painel-menu a:hover .menu-icon,
.nav-side a:hover .menu-icon{
  color:var(--brand);
}

.btn .brand-ico,
.btn .ico{
  margin-right:4px;
}

.icon-soft{
  width:38px;
  height:38px;
  border-radius:14px;
  background:#eff6ff;
  color:#2563eb;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
}

.icon-soft svg{
  width:20px;
  height:20px;
}

.icon-soft.green{
  background:#dcfce7;
  color:#166534;
}

.icon-soft.yellow{
  background:#fef3c7;
  color:#92400e;
}

.icon-soft.purple{
  background:#ede9fe;
  color:#5b21b6;
}

.icon-soft.rose{
  background:#ffe4e6;
  color:#9f1239;
}

.icon-soft.gray{
  background:#e2e8f0;
  color:#334155;
}

.card-icon-title{
  display:flex;
  align-items:center;
  gap:10px;
}

.card-icon-title .icon-soft{
  margin:0;
  width:36px;
  height:36px;
}

.google-icon{
  display:none !important;
}

.mp-icon{
  display:none !important;
}



/* =========================================================
   CORREÇÃO: ÍCONES DENTRO DO FUNDO COLORIDO
   ========================================================= */

/* A caixa do ícone fica sempre alinhada e sem vazamento */
.icon-soft{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  max-width:42px !important;
  max-height:42px !important;
  border-radius:14px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  flex:0 0 42px !important;
  padding:0 !important;
  line-height:1 !important;
}

/* SVG comum dentro da caixa */
.icon-soft svg{
  width:21px !important;
  height:21px !important;
  max-width:21px !important;
  max-height:21px !important;
  display:block !important;
  margin:0 !important;
}

/* Quando o Mercado Pago estiver dentro do icon-soft */
.icon-soft.brand-ico,
.icon-soft.mp-svg{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  max-width:42px !important;
  max-height:42px !important;
  border-radius:14px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  padding:0 !important;
}

/* O SVG do Mercado Pago estava muito largo; agora fica proporcional */
.icon-soft.brand-ico svg,
.icon-soft.mp-svg svg,
.icon-soft .mp-svg svg{
  width:24px !important;
  height:16px !important;
  max-width:24px !important;
  max-height:16px !important;
  display:block !important;
  margin:0 !important;
}

/* Ícone MP fora de card, por exemplo no botão/menu */
.brand-ico.mp-svg:not(.icon-soft) svg{
  width:27px !important;
  height:18px !important;
}

/* Título com ícone: mantém alinhado */
.card-icon-title{
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
}

.card-icon-title .icon-soft{
  margin:0 !important;
}

/* Cards de estatística do topo */
.stat-color{
  align-items:center !important;
}

.stat-color .icon-soft{
  margin:0 !important;
}

/* Remove qualquer resíduo antigo do MP */
.mp-icon{
  display:none !important;
}

/* Corrige os cards da hero para não apertar o ícone */
.hero-soft .stat-color{
  min-height:78px;
}

.hero-soft .stat-color > .icon-soft{
  align-self:center;
}

/* Responsivo */
@media(max-width:620px){
  .icon-soft{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    flex-basis:38px !important;
  }

  .icon-soft svg{
    width:19px !important;
    height:19px !important;
  }

  .icon-soft.brand-ico svg,
  .icon-soft.mp-svg svg,
  .icon-soft .mp-svg svg{
    width:22px !important;
    height:15px !important;
  }
}