body {
    font-size: 105%; /* Aumentar todo un 5% */
  }
  
  .blue-gradient {
    background: linear-gradient(to left, var(--color-blue-800), var(--color-blue-600));
  }
  
  .blue-button {
    background-color: var(--color-blue-600);
  }
  
  .blue-button:hover {
    background-color: var(--color-blue-700);
  }
  
  .grid-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.25;
    background-image: linear-gradient(to right, var(--color-white-50) 1px, transparent 1px), 
                      linear-gradient(to bottom, var(--color-white-50) 1px, transparent 1px);
    background-size: 52px 52px; /* Ajusta el tamaño de los cuadros aquí */
  }



  .input-field {
    background-color: var(--color-gray-100);
  }
  
  .copyright {
    position: absolute;
    bottom: 20px;
    left: 40px;
    font-size: 14px;
    opacity: 0.7;
  }

  .main-container{
    transform: scale(1.01);
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .main-container {
      transform: scale(0.95);
    }
  }

  @media (max-width: 640px) {
    .main-container {
      transform: scale(0.9);
      margin: 1rem;
    }
  }

  /* Theme toggle button styles */
  #theme-toggle {
    transition: all 0.2s ease;
  }

  #theme-toggle:hover {
    background-color: var(--bg-surface) !important;
    transform: scale(1.05);
  }

  #theme-toggle:active {
    transform: scale(0.95);
  }

  /* Icon animation */
  #theme-toggle svg {
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  #theme-toggle:hover svg {
    transform: rotate(15deg) scale(1.1);
  }

  /* Smooth theme transitions */
  * {
    transition: background-color 0.3s ease, 
                border-color 0.3s ease, 
                color 0.3s ease, 
                box-shadow 0.3s ease !important;
  }

  /* Special transition for main container to preserve decorative elements */
  .main-container {
    transition: transform 0.3s ease, 
                box-shadow 0.3s ease,
                backdrop-filter 0.3s ease !important;
  }

  .main-container > * {
    transition: background-color 0.4s ease, 
                color 0.4s ease,
                border-color 0.4s ease !important;
  }

  /* Blue gradient panel smooth transitions */
  .blue-gradient {
    transition: all 0.4s ease !important;
  }

  .grid-pattern {
    transition: opacity 0.4s ease !important;
  }

  /* Form elements smooth transitions */
  input, button, label, a {
    transition: all 0.3s ease !important;
  }

  /* SVG pattern smooth transitions */
  svg, svg * {
    transition: stroke 0.3s ease, fill 0.3s ease !important;
  }

  /* Import base styles for consistency */
  @import url('../../../assets/css/core/base.css');