.kilometer-input-wrapper {
  position: relative;
  margin-bottom: 0.5rem;
  
  .input-container {
    position: relative;
    display: flex;
    align-items: center;
  }
  
  .kilometer-input {
    width: 100%;
    padding: 12px 60px 12px 16px; // Espaço para o sufixo
    font-size: 14px;
    border: 1px solid var(--divider, #e5e7eb);
    border-radius: 8px;
    background: var(--surface, #ffffff);
    color: #111827; // Cor mais escura para melhor legibilidade
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); // Transição mais suave
    font-family: inherit;
    font-weight: 600; // Peso da fonte maior para melhor legibilidade
    
    // Melhor contraste de texto
    &:not(:placeholder-shown) {
      font-weight: 700; // Peso ainda maior quando há valor
      color: #000000; // Preto para máximo contraste quando há valor
    }
    
    // 🎯 DESTAQUE ESPECIAL: Campo com valor - efeito "highlight"
    &.has-value {
      background: linear-gradient(135deg, rgba(255, 200, 46, 0.03) 0%, rgba(255, 200, 46, 0.01) 100%);
      border-color: rgba(255, 200, 46, 0.3);
      color: #000000; // Preto para máximo contraste com o fundo amarelo
      font-weight: 700; // Peso máximo para destacar valor
      
      &:not(:focus) {
        box-shadow: 0 1px 3px rgba(255, 200, 46, 0.1);
      }
    }
    
    &::placeholder {
      color: #6b7280; // Placeholder mais escuro para melhor legibilidade
      font-weight: 500;
    }
    
    &:focus {
      outline: none;
      border-color: var(--idt-primary-color, #ffc82e);
      box-shadow: 0 0 0 2px rgba(255, 200, 46, 0.1);
      background: var(--surface, #ffffff);
    }
    
    &:hover:not(:focus):not(:disabled) {
      border-color: var(--text-secondary, #d1d5db);
    }
    
    &:disabled {
      background-color: var(--surface-disabled, #f8fafc);
      background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 3px,
        rgba(148, 163, 184, 0.1) 3px,
        rgba(148, 163, 184, 0.1) 6px
      );
      border-color: var(--divider-disabled, #e2e8f0);
      color: var(--text-disabled, #94a3b8);
      cursor: not-allowed;
      opacity: 0.8;
      
      &::placeholder {
        color: var(--text-disabled, #cbd5e1);
        opacity: 0.7;
      }
    }
    
    &:read-only {
      // background-color: var(--surface-readonly, #f9fafb);
      color: var(--text-secondary, #6b7280);
      cursor: default;
    }
  }
  
  .input-label {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--surface, #ffffff);
    color: #374151; // Cor mais escura para melhor legibilidade do label
    font-size: 14px;
    font-weight: 600; // Peso maior para melhor legibilidade
    transition: all 0.2s ease;
    pointer-events: none;
    padding: 0 4px;
    z-index: 1;
  }
  
  .suffix {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary, #6b7280);
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
    background: var(--surface, #ffffff);
    padding: 2px 6px;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    // 🎯 DESTAQUE ESPECIAL: Quando há valor, destacar o sufixo
    &:not(:empty) {
      color: var(--idt-primary-color, #ffc82e);
      font-weight: 700;
      background: linear-gradient(135deg, rgba(255, 200, 46, 0.1) 0%, rgba(255, 200, 46, 0.05) 100%);
      border: 1px solid rgba(255, 200, 46, 0.2);
      box-shadow: 0 1px 3px rgba(255, 200, 46, 0.1);
    }
  }
  
  // Estados do label
  &.focused .input-label,
  .kilometer-input:not([value=""]) + .input-label,
  .kilometer-input:focus + .input-label {
    top: 0;
    font-size: 12px;
    color: #1f2937; // Cor ainda mais escura quando ativo para máxima legibilidade
    font-weight: 700; // Peso ainda maior quando ativo
  }
  
  // Estado de foco
  &.focused {
    .kilometer-input {
      border-color: var(--idt-primary-color, #ffc82e);
      box-shadow: 0 0 0 2px rgba(255, 200, 46, 0.1);
    }
    
    .suffix {
      opacity: 0.5;
    }
  }
  
      // Estado desabilitado
  &.disabled {
    .input-label {
      color: #6b7280; // Cinza médio para disabled (mais claro que o normal)
      background-color: var(--surface-disabled, #f8fafc);
      opacity: 0.8; // Opacity moderado para disabled
      font-weight: 500; // Peso médio para disabled
    }
    
    .suffix {
      color: var(--text-disabled, #94a3b8);
      background: var(--surface-disabled, #f8fafc);
      background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        rgba(148, 163, 184, 0.08) 2px,
        rgba(148, 163, 184, 0.08) 4px
      );
      border-color: var(--divider-disabled, #e2e8f0);
      opacity: 0.7;
      box-shadow: none;
    }
  }
  
  // Estado readonly
  &.readonly {
    .kilometer-input {
      background-color: var(--surface-readonly, #f9fafb);
      border-color: var(--divider, #e5e7eb);
      color: #374151; // Cor escura para readonly mas diferente do normal
    }
    
    .input-label {
      color: #4b5563; // Cor escura para readonly
      font-weight: 600;
    }
    
    &::after {
      content: '\f023'; /* FontAwesome lock icon */
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      position: absolute;
      right: 40px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-secondary, #6b7280);
      font-size: 10px;
      opacity: 0.7;
      pointer-events: none;
    }
  }
}

// 🌙 TEMA ESCURO - Suporte completo e refinado
@media (prefers-color-scheme: dark) {
  .kilometer-input-wrapper {
    .kilometer-input {
      background: var(--surface-dark, #111827);
      border-color: var(--divider-dark, #374151);
      color: var(--text-primary-dark, #f9fafb);
      
      &::placeholder {
        color: var(--text-secondary-dark, #6b7280);
        opacity: 0.8;
      }
      
      &:hover:not(:focus):not(:disabled) {
        border-color: var(--divider-hover-dark, #4b5563);
        background: var(--surface-hover-dark, #1f2937);
        transition: all 0.2s ease;
      }
      
      &:focus {
        background: var(--surface-dark, #111827);
        border-color: var(--idt-primary-color, #ffc82e);
        box-shadow: 0 0 0 2px rgba(255, 200, 46, 0.15);
        color: var(--text-primary-dark, #ffffff);
      }
      
        &:disabled {
         background-color: var(--surface-disabled-dark, #0f172a);
         background-image: repeating-linear-gradient(
           45deg,
           transparent,
           transparent 2px,
           rgba(75, 85, 99, 0.1) 2px,
           rgba(75, 85, 99, 0.1) 4px
         );
         border-color: var(--divider-disabled-dark, #334155);
         color: var(--text-disabled-dark, #64748b);
         opacity: 0.7;
         cursor: not-allowed;
         
         &::placeholder {
           color: var(--text-disabled-dark, #475569);
           opacity: 0.6;
         }
       }
      
             &:read-only {
         background-color: var(--surface-readonly-dark, #1f2937);
         border-color: var(--divider-readonly-dark, #374151);
         color: var(--text-secondary-dark, #9ca3af);
       }
       
       // 🎯 DESTAQUE ESPECIAL: Campo com valor no tema escuro
       &.has-value {
         background: linear-gradient(135deg, rgba(255, 200, 46, 0.08) 0%, rgba(255, 200, 46, 0.03) 100%);
         border-color: rgba(255, 200, 46, 0.4);
         color: var(--text-primary-dark, #ffffff);
         font-weight: 600;
         
         &:not(:focus) {
           box-shadow: 
             0 2px 6px rgba(255, 200, 46, 0.15),
             inset 0 1px 2px rgba(255, 200, 46, 0.05);
         }
         
         &:hover:not(:focus) {
           border-color: rgba(255, 200, 46, 0.5);
           background: linear-gradient(135deg, rgba(255, 200, 46, 0.12) 0%, rgba(255, 200, 46, 0.05) 100%);
         }
       }
    }
    
    .input-label {
      background-color: var(--surface-dark, #111827);
      color: var(--text-secondary-dark, #9ca3af);
      
      // Label em foco - cor primária IDT
      &.focused,
      .kilometer-input:focus + & {
        color: var(--idt-primary-color, #ffc82e);
        background-color: var(--surface-dark, #111827);
      }
    }
    
    .suffix {
      background: var(--surface-dark, #111827);
      color: var(--text-secondary-dark, #9ca3af);
      border: 1px solid var(--divider-dark, #374151);
      
             // Sufixo quando há valor - tema escuro
       &:not(:empty) {
         color: var(--idt-primary-color, #ffc82e);
         font-weight: 700;
         background: linear-gradient(135deg, rgba(255, 200, 46, 0.15) 0%, rgba(255, 200, 46, 0.08) 100%);
         border-color: rgba(255, 200, 46, 0.3);
         box-shadow: 
           0 2px 4px rgba(255, 200, 46, 0.1),
           inset 0 1px 2px rgba(255, 200, 46, 0.1);
         text-shadow: 0 0 6px rgba(255, 200, 46, 0.4);
       }
    }
    
    // Estados do label no tema escuro
    &.focused .input-label,
    .kilometer-input:not([value=""]) + .input-label,
    .kilometer-input:focus + .input-label {
      color: var(--idt-primary-color, #ffc82e);
      background-color: var(--surface-dark, #111827);
      text-shadow: 0 0 8px rgba(255, 200, 46, 0.3);
    }
    
    // Estado de foco refinado
    &.focused {
      .kilometer-input {
        border-color: var(--idt-primary-color, #ffc82e);
        box-shadow: 
          0 0 0 2px rgba(255, 200, 46, 0.15),
          0 4px 12px rgba(255, 200, 46, 0.1);
        background: var(--surface-dark, #111827);
      }
      
      .suffix {
        opacity: 0.7;
        color: var(--idt-primary-color, #ffc82e);
      }
    }
    
         // Estado desabilitado no tema escuro
     &.disabled {
       .input-label {
         color: var(--text-disabled-dark, #475569);
         background-color: var(--surface-disabled-dark, #0f172a);
         opacity: 0.8;
         font-weight: 400;
       }
       
       .suffix {
         color: var(--text-disabled-dark, #475569);
         background: var(--surface-disabled-dark, #0f172a);
         background-image: repeating-linear-gradient(
           45deg,
           transparent,
           transparent 1px,
           rgba(75, 85, 99, 0.05) 1px,
           rgba(75, 85, 99, 0.05) 2px
         );
         border-color: var(--divider-disabled-dark, #334155);
         opacity: 0.6;
         box-shadow: none;
         text-shadow: none;
       }
     }
    
    // Estado readonly no tema escuro
    &.readonly {
      .kilometer-input {
        background-color: var(--surface-readonly-dark, #1f2937);
        border-color: var(--divider-readonly-dark, #374151);
        color: var(--text-secondary-dark, #9ca3af);
      }
      
      .input-label {
        color: var(--text-secondary-dark, #9ca3af);
        background-color: var(--surface-readonly-dark, #1f2937);
      }
      
      &::after {
        color: var(--text-secondary-dark, #6b7280);
      }
    }
  }
}

// 🎭 ANIMAÇÕES ESPECIAIS
@keyframes valueHighlight {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 200, 46, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(255, 200, 46, 0.1);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 200, 46, 0);
  }
}

@keyframes suffixPulse {
  0%, 100% {
    transform: translateY(-50%) scale(1);
  }
  50% {
    transform: translateY(-50%) scale(1.05);
  }
}

.kilometer-input-wrapper {
  // Animação quando o valor é atualizado
  &.value-updated {
    .kilometer-input {
      animation: valueHighlight 0.6s ease-out;
    }
    
    .suffix {
      animation: suffixPulse 0.4s ease-out;
    }
  }
}

// 📱 RESPONSIVIDADE
@media (max-width: 768px) {
  .kilometer-input-wrapper {
    .kilometer-input {
      padding: 10px 50px 10px 14px;
      font-size: 16px; // Evita zoom no iOS
      
      &.has-value {
        font-size: 16px;
        font-weight: 700; // Destaque maior no mobile
      }
    }
    
    .input-label {
      font-size: 13px;
      left: 12px;
      
      &.focused {
        font-size: 11px; // Menor no mobile quando focado
      }
    }
    
    .suffix {
      right: 12px;
      font-size: 11px;
      padding: 1px 4px; // Menor no mobile
      
      &:not(:empty) {
        font-size: 12px;
        font-weight: 800; // Mais destaque no mobile
      }
    }
  }
}

/* 🔴 INDICADOR DE CAMPO OBRIGATÓRIO */
.required-indicator {
  color: var(--idt-danger, #dc3545);
  margin-left: 4px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}