@keyframes fire-gradient {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .btn-fire {
      background: linear-gradient(270deg, #ff0000, #ff4500, #ff8c00, #ffd700, #ff8c00, #ff4500, #ff0000);
      background-size: 400% 400%;
      animation: fire-gradient 3s ease infinite;
      border: none;
      color: #fff !important;
      font-weight: 700;
      text-shadow: 0 1px 3px rgba(0,0,0,.35);
      box-shadow: 0 4px 18px rgba(255,100,0,.45);
      transition: transform .18s, box-shadow .18s;
    }
    .btn-fire:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 24px rgba(255,100,0,.65);
    }
    @keyframes tech-gradient {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .btn-tech {
      background: linear-gradient(270deg, #3dec71, #00c4ff, #005a8c, #00c4ff, #3dec71);
      background-size: 400% 400%;
      animation: tech-gradient 3s ease infinite;
      border: none;
      color: #fff !important;
      font-weight: 700;
      text-shadow: 0 1px 3px rgba(0,0,0,.35);
      box-shadow: 0 4px 18px rgba(0,90,140,.45);
      transition: transform .18s, box-shadow .18s;
    }
    .btn-tech:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 24px rgba(0,90,140,.65);
    }

        /* ESTILOS COMPACTOS */
        .budget-content { font-size: 0.78rem; line-height: 1.4; }
        .budget-content .category-header { 
            background: var(--primary); color: white; font-weight: 600; 
            font-size: 0.9rem; padding: 0.5rem 1rem; 
        }
        
        .search-box { max-width: 100%; }

        /* CONTADOR DE ÍTEMS */
        .item-count { font-size: 0.8rem; color: #555; }

        /* BOTÓN CSV MODERNO */
        .btn-csv { 
            background: linear-gradient(135deg, #6e8efb, #a777e3); 
            color: white; border: none; 
        }
        .btn-csv:hover { 
            background: linear-gradient(135deg, #5a75e0, #9666d0); 
        }

        /* NOTIFICACIONES */
        .toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; }
        .toast { font-size: 0.8rem; }

        /* MODO OSCURO MODERNO - ESCALA DE GRISES */
        body.dark-mode {
            background: #0f0f0f; color: #e0e0e0;
        }
        body.dark-mode .navbar { background: #1a1a1a !important; }
        body.dark-mode .hero { background: #1a1a1a !important; }
        body.dark-mode .footer { background: #1a1a1a !important; }
        body.dark-mode .budget-content .budget-summary,
        body.dark-mode .accordion-item {
            background: #1e1e1e; border-color: #333;
        }
        body.dark-mode .table { color: #ccc; }
        body.dark-mode .form-control { 
            background: #2a2a2a; border-color: #444; color: #fff; 
        }
        body.dark-mode .category-header { 
            background: #333; color: #fff; 
        }
        body.dark-mode .item-row { border-bottom-color: #444; }
        body.dark-mode .remove-item { color: #ff6b6b; }
        body.dark-mode .btn-csv { 
            background: linear-gradient(135deg, #4a5568, #2d3748); 
        }
        body.dark-mode .btn-csv:hover { 
            background: linear-gradient(135deg, #2d3748, #1a202c); 
        }

        /* Transiciones suaves */
        body { opacity: 0; transition: opacity 0.2s ease; }
        body.loaded { opacity: 1; }
        img { opacity: 0; transition: opacity 0.3s ease; }
        img.loaded { opacity: 1; }


          #chat-widget-toggle {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 60px !important;
    height: 60px !important;
    background: #28a745 !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 24px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    z-index: 9999 !important;
    display: block !important;
  }