/**
 * Estilos para a calculadora do Simples Nacional
 * Versão modernizada para WordPress
 */

/* Reset e base */
.calculadora-simples-nacional * {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

.calculadora-simples-nacional {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
    "Helvetica Neue", sans-serif !important;
  max-width: 1000px !important;
  margin: 0px !important;
  padding: 0px !important;
  background-color: #ffffff !important;
  border-radius: 12px !important;
  color: #333 !important;
}

/* Grid e layout */
.sn-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
}

@media (min-width: 768px) {
  .sn-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Cards */
.sn-card {
  background-color: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

.sn-card-content {
  padding: 24px !important;
}

/* Seções de destaque para preenchimento */
.sn-secao-destaque {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin-bottom: 20px !important;
  position: relative !important;
}

.sn-secao-destaque::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background-color: #fe3e6d !important;
  border-radius: 4px 0 0 4px !important;
}

.sn-secao-destaque:hover {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  transition: all 0.2s ease !important;
}

/* Tipografia */
.sn-h3 {
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  color: #333333 !important;
}

.sn-step-number {
  background-color: #fe3e6d !important;
  color: white !important;
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Espaçamento */
.sn-mb-4 {
  margin-bottom: 16px !important;
}

.sn-mb-6 {
  margin-bottom: 24px !important;
}

.sn-mb-2 {
  margin-bottom: 8px !important;
}

.sn-mt-6 {
  margin-top: 24px !important;
}

.sn-mt-4 {
  margin-top: 16px !important;
}

.sn-ml-1 {
  margin-left: 4px !important;
}

.sn-mr-2 {
  margin-right: 8px !important;
}

/* Formulários */
.sn-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #4b5563 !important;
  display: block !important;
  margin-bottom: 8px !important;
}

.sn-select-wrapper {
  position: relative !important;
  width: 100% !important;
}

.sn-select {
  width: 100% !important;
  padding: 10px 16px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  font-size: 14px !important;
  color: #374151 !important;
  appearance: none !important;
  padding-right: 32px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.sn-select:focus {
  outline: none !important;
  border-color: #fe3e6d !important;
  box-shadow: 0 0 0 3px rgba(254, 62, 109, 0.1) !important;
}

.sn-select-icon {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  color: #9ca3af !important;
}

/* Tabs */
.sn-tabs {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 16px !important;
}

.sn-tabs-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  margin-bottom: 8px !important;
  background-color: #f3f4f6 !important;
  border-radius: 8px !important;
  padding: 4px !important;
}

.sn-tab {
  padding: 8px 16px !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  transition: all 0.2s !important;
}

.sn-active-tab {
  background-color: #ffffff !important;
  color: #111827 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.sn-tab-content {
  display: block !important;
}

.sn-hidden {
  display: none !important;
}

/* Inputs */
.sn-input-wrapper {
  position: relative !important;
  margin-bottom: 16px !important;
}

.sn-input {
  width: 100% !important;
  padding: 10px 12px !important;
  padding-left: 32px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  color: #374151 !important;
  background-color: #ffffff !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  height: 42px !important; /* Altura fixa para garantir alinhamento */
}

.sn-input:focus {
  outline: none !important;
  border-color: #fe3e6d !important;
  box-shadow: 0 0 0 3px rgba(254, 62, 109, 0.1) !important;
}

.sn-input-prefix {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #6b7280 !important;
  font-size: 14px !important;
  pointer-events: none !important; /* Evita que o prefixo interfira com o input */
}

.sn-info-text {
  font-size: 14px !important;
  color: #6b7280 !important;
  background-color: #f9fafb !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  margin-top: 8px !important;
}

/* Flexbox */
.sn-flex {
  display: flex !important;
}

.sn-space-x-2 > * + * {
  margin-left: 8px !important;
}

.sn-flex-1 {
  flex: 1 1 0% !important;
}

.sn-items-center {
  align-items: center !important;
}

.sn-justify-end {
  justify-content: flex-end !important;
}

/* Botões */
.sn-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  border: none !important;
  background-color: #f3f4f6 !important;
  color: #374151 !important;
}

.sn-button-primary {
  background-color: #fe3e6d !important;
  color: #ffffff !important;
}

.sn-button-primary:hover {
  background-color: #e62e5c !important;
}

.sn-button-outline {
  background-color: #ffffff !important;
  color: #374151 !important;
  border: 1px solid #e5e7eb !important;
}

.sn-button-outline:hover {
  background-color: #f9fafb !important;
}

.sn-button-icon {
  margin-right: 8px !important;
}

/* Resultados */
.sn-resultado-container {
  transition: all 0.3s !important;
}

.sn-animate-result {
  transform: scale(1.02) !important;
}

.sn-bg-gray-50 {
  background-color: #f9fafb !important;
}

.sn-p-4 {
  padding: 16px !important;
}

.sn-p-2 {
  padding: 8px !important;
}

.sn-rounded-lg {
  border-radius: 8px !important;
}

.sn-flex-between {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.sn-text-sm {
  font-size: 14px !important;
}

.sn-text-xs {
  font-size: 12px !important;
}

.sn-text-gray-600 {
  color: #4b5563 !important;
}

.sn-text-gray-400 {
  color: #9ca3af !important;
}

.sn-font-semibold {
  font-weight: 600 !important;
}

.sn-text-xl {
  font-size: 20px !important;
}

.sn-text-primary {
  color: #fe3e6d !important;
}

/* Barra de progresso */
.sn-progress-container {
  height: 8px !important;
  background-color: #e5e7eb !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.sn-progress-bar {
  height: 100% !important;
  background-color: #fe3e6d !important;
  transition: width 0.3s !important;
}

/* Tooltips modernos */
.sn-tooltip {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.sn-tooltip-icon {
  color: #9ca3af !important;
  margin-left: 4px !important;
  cursor: help !important;
}

.sn-tooltip-content {
  visibility: hidden !important;
  position: absolute !important;
  z-index: 10 !important;
  bottom: 125% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background-color: #1f2937 !important;
  color: #ffffff !important;
  text-align: center !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  width: 220px !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
  font-size: 12px !important;
  font-weight: normal !important;
  pointer-events: none !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.sn-tooltip-content::after {
  content: "" !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  margin-left: -5px !important;
  border-width: 5px !important;
  border-style: solid !important;
  border-color: #1f2937 transparent transparent transparent !important;
}

.sn-tooltip:hover .sn-tooltip-content {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Observação */
.sn-observacao {
  font-size: 13px !important;
  color: #6b7280 !important;
  background-color: #f9fafb !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  margin-top: 16px !important;
  border-left: 3px solid #fe3e6d !important;
}

.sn-observacao strong {
  font-weight: 600 !important;
  color: #4b5563 !important;
}

/* Gráfico de distribuição */
.sn-grafico-distribuicao {
  margin: 20px 0 !important;
  padding: 16px !important;
  background-color: #f9fafb !important;
  border-radius: 8px !important;
}

.sn-grafico-titulo {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
}

.sn-grafico-titulo i {
  color: #fe3e6d !important;
  margin-right: 8px !important;
}

.sn-barras-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.sn-barra-item {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.sn-barra-label {
  width: 80px !important;
  font-size: 13px !important;
  color: #4b5563 !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.sn-barra-label-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  margin-right: 6px !important;
  flex-shrink: 0 !important;
}

.sn-barra-track {
  flex-grow: 1 !important;
  height: 8px !important;
  background-color: #e5e7eb !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  position: relative !important;
}

.sn-barra-fill {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  border-radius: 4px !important;
}

.sn-barra-valor {
  width: 120px !important; /* Aumentado para acomodar os valores */
  text-align: right !important;
  font-size: 13px !important;
  color: #4b5563 !important;
  margin-left: 12px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
}

.sn-barra-percentual {
  font-weight: 500 !important;
  color: #374151 !important;
}

.sn-barra-montante {
  color: #6b7280 !important;
}

/* Cores para os diferentes impostos */
.sn-cor-irpj {
  background-color: #fe3e6d !important;
}
.sn-cor-csll {
  background-color: #f59e0b !important;
}
.sn-cor-cofins {
  background-color: #10b981 !important;
}
.sn-cor-pis {
  background-color: #3b82f6 !important;
}
.sn-cor-cpp {
  background-color: #8b5cf6 !important;
}
.sn-cor-icms {
  background-color: #ec4899 !important;
}
.sn-cor-iss {
  background-color: #6366f1 !important;
}
.sn-cor-ipi {
  background-color: #14b8a6 !important;
}